/*
 * Green St Kitchen - Product Details template.
 * No literal colour values. Everything comes from tokens.css.
 *
 * Measured from 03_GSK_Web_June-2026_Product-Details.pdf, a 960 x 1808pt
 * artboard, which is the same 1280px canvas at 3/4 scale that every other page
 * on this site was measured from. Values in comments are the CSS pixels the
 * artboard resolves to at 4/3, taken from the PDF's own vector and text
 * geometry rather than sampled off a screenshot.
 *
 * The grid, on both the hero and the dark band: two 551px columns with a 50px
 * gap inside the 1152px content width. 551 + 50 + 551 = 1152 exactly.
 */

/* =========================================================================
 * COLOUR SCHEMES
 * One class per named scheme, set on the article wrapper by
 * single-product.php and on each related card by parts/product-related.php.
 *
 * Everything below reads --gs-product and --gs-product-shape and never names a
 * scheme, so adding a seventh scheme touches this block, tokens.css and
 * green_st_product_schemes() and nothing else.
 *
 * --gs-accent is reassigned as well, which is what makes .gs-pill--colour in
 * components.css come out in the product's colour with no extra rule.
 * ========================================================================= */
.gs-product--purple {
  --gs-product: var(--gs-scheme-purple);
  --gs-product-shape: var(--gs-scheme-purple-shape);
}

.gs-product--magenta {
  --gs-product: var(--gs-scheme-magenta);
  --gs-product-shape: var(--gs-scheme-magenta-shape);
}

.gs-product--rust {
  --gs-product: var(--gs-scheme-rust);
  --gs-product-shape: var(--gs-scheme-rust-shape);
}

.gs-product--crimson {
  --gs-product: var(--gs-scheme-crimson);
  --gs-product-shape: var(--gs-scheme-crimson-shape);
}

.gs-product--green {
  --gs-product: var(--gs-scheme-green);
  --gs-product-shape: var(--gs-scheme-green-shape);
}

.gs-product--gold {
  --gs-product: var(--gs-scheme-gold);
  --gs-product-shape: var(--gs-scheme-gold-shape);
}

/* The five added in session 7, when the Products artboard turned out to draw a
 * colour for all eleven products. Nothing below this block names a scheme, so
 * these five needed only their pair of variables plus the contrast fallbacks
 * further down. */
.gs-product--amber {
  --gs-product: var(--gs-scheme-amber);
  --gs-product-shape: var(--gs-scheme-amber-shape);
}

.gs-product--terracotta {
  --gs-product: var(--gs-scheme-terracotta);
  --gs-product-shape: var(--gs-scheme-terracotta-shape);
}

.gs-product--orange {
  --gs-product: var(--gs-scheme-orange);
  --gs-product-shape: var(--gs-scheme-orange-shape);
}

.gs-product--plum {
  --gs-product: var(--gs-scheme-plum);
  --gs-product-shape: var(--gs-scheme-plum-shape);
}

.gs-product--forest {
  --gs-product: var(--gs-scheme-forest);
  --gs-product-shape: var(--gs-scheme-forest-shape);
}

.gs-product {
  --gs-accent: var(--gs-product);
  /* Chip label. Defaults to the product colour, which is what the mockup draws.
   * Four schemes override it below - see the note on .gs-chip. */
  --gs-chip-fg: var(--gs-product);
  /* The eyebrow, which is 12.5px on warm beige and so needs 4.5:1. Measured for
   * all six: purple 8.03, magenta 6.30, crimson 6.45, rust 5.93, green 4.89,
   * gold 3.07. Only gold fails, and it overrides this below. The 50px range
   * word and the 20px bold title on the same page both clear the 3:1 that
   * large text needs, so they keep the brand colour on every scheme. */
  --gs-eyebrow-fg: var(--gs-product);
  /* The shared "Find a jar near you" band. Its own rule in home.css defaults to
   * the Pickled Things accent, which is what the Home mockup draws; the Product
   * Details mockup draws the same band in the product's colour. Reassigning the
   * variable keeps one band, one rule, and no per-page selector in home.css. */
  --gs-locator-bg: var(--gs-product);
  /* The "back to kimchi" outline pill. .gs-pill--ghost in components.css draws
   * its border and label from currentColor, and the hero body inherits Ink, so
   * without this the pill came out black against a purple page. The mockup
   * draws it in the product colour, measured #5b2d85 - the same value as the
   * wordmark beside it. */
  --gs-ghost-fg: var(--gs-product);
}

/* Applied to the ghost pill only, rather than colouring the whole hero body,
 * so the description and everything else keep their own measured colours. */
.gs-product-hero__actions .gs-pill--ghost {
  color: var(--gs-ghost-fg);
}

/* ---- Contrast fallbacks, by measurement --------------------------------------
 *
 * ONE PRINCIPLE RUNS THROUGH ALL FOUR RULES BELOW, and it is the line
 * PROJECT-BRIEF 7A draws. Only ONE product page was ever drawn - Black Miso &
 * Garlic, in purple. Every pairing on the other ten pages is therefore a surface
 * the mockup does not cover, so where the product's own colour fails WCAG on it
 * Webstein may substitute Ink. That is 7A's authority and it is used freely
 * here.
 *
 * It is NOT used on a colour the design does draw. The catalogue card titles,
 * the range band eyebrows and the page eyebrow are all drawn, some of them fail,
 * and every one is reproduced as drawn and reported instead. Two different rules
 * for two different situations, on purpose.
 *
 * MEASURED, all eleven schemes, at the sizes the page actually uses:
 *
 *              eyebrow 12.5px   chip 12px on   pill label 15px   ghost 15px
 *              on warm beige    own shape      Paper on fill     on warm beige
 *   purple          8.03            5.93            8.69             8.03
 *   magenta         6.30            4.04 FAIL       6.81             6.30
 *   rust            5.93            3.97 FAIL       6.41             5.93
 *   crimson         6.45            4.62            6.97             6.45
 *   amber           4.13 FAIL       3.59 FAIL       4.47 FAIL        4.13 FAIL
 *   green           4.89            4.33 FAIL       5.29             4.89
 *   terracotta      4.00 FAIL       3.45 FAIL       4.33 FAIL        4.00 FAIL
 *   orange          3.48 FAIL       2.71 FAIL       3.76 FAIL        3.48 FAIL
 *   plum            7.77            5.97            8.41             7.77
 *   forest          6.20            5.06            6.71             6.20
 *   gold            3.07 FAIL       2.58 FAIL       3.32 FAIL        3.07 FAIL
 *
 * Plum and forest, both new in session 7, need nothing: they pass everywhere.
 */

/* Eyebrow and ghost pill, on warm beige. Ink measures 16.05:1 and 15.85:1
 * respectively on that surface, so the substitution is never marginal.
 *
 * The ghost pill matters twice over: .gs-pill--ghost draws its border from the
 * same colour, so a failing value would also put a non-text boundary under the
 * 3:1 that needs. */



.gs-product--gold {
  --gs-eyebrow-fg: var(--gs-ink);
  --gs-ghost-fg: var(--gs-ink);
}
/* .gs-product--amber{
  --gs-ghost-fg: var(--gs-ink);
} */

/* Chip labels that cannot be the product's own colour. Seven of the eleven fail
 * at 12px on their own shape tint; Ink measures between 10.3:1 and 14.2:1 on
 * those same seven tints. Darkening the brand colours instead would be
 * inventing design.
 *
 * If a scheme is added, measure this pair before assuming it belongs here. */
.gs-product--magenta,
.gs-product--rust,
.gs-product--amber,
.gs-product--green,
.gs-product--terracotta,
.gs-product--orange,
.gs-product--gold {
  --gs-chip-fg: var(--gs-ink);
}

/* The two schemes whose "find a stockist" pill and locator band cannot carry a
 * Paper label. --gs-on-accent is the hook components.css already provides for
 * exactly this case, and its own comment says to use it rather than altering the
 * fill, because the fill is a brand value.
 *
 * Ink on orange measures 4.61:1 against Paper's 3.76, and Ink on gold 5.23:1
 * against Paper's 3.32. Both cross the threshold the other side of it. */

.gs-product--gold {
  --gs-on-accent: var(--gs-ink);
  /* The "Find a jar near you" band takes the product colour as its fill, so its
   * body copy has the same problem as the pill label above it. The band's dark
   * submit pill is unaffected. */
  --gs-locator-fg: var(--gs-ink);
}

/* AMBER AND TERRACOTTA HAVE NO RULE HERE, AND THAT IS THE FINDING RATHER THAN AN
 * OVERSIGHT. On both fills a 15px pill label fails whichever way it is set:
 *
 *   amber       Paper 4.47  FAIL     Ink 3.89  FAIL
 *   terracotta  Paper 4.33  FAIL     Ink 4.01  FAIL
 *
 * PROJECT-BRIEF section 9 states the remedy for a failing product pairing -
 * reserve the colour for large text or a button fill, and fall back to Ink for
 * small text - and then says that "a failure that cannot be resolved that way is
 * reported to Simon, not silently corrected". This is that case, twice. Paper is
 * kept because it is the better of the two measurements and because it is what
 * every other scheme uses, so the page stays internally consistent.
 *
 * Terracotta's is not new: Home already carries the identical pairing as a
 * granted exception, Paper on #b05a26 at 4.33:1, for its "view pickled things"
 * pill and its locator band. Amber's is new in session 7. Both are in
 * BUILD-REPORT.md. Neither is fixable without changing a brand colour or
 * shrinking nothing - the label is 15px medium, which is not large text at any
 * weight. */

/* =========================================================================
 * BREADCRUMB
 * Measured: x=64, y=107, 13px. The separator is drawn by CSS rather than
 * typed into the markup, so it is never read out as "slash" by a screen
 * reader and never lands in the schema.
 * ========================================================================= */
.gs-breadcrumb {
  padding-block: 30px 0;
}

.gs-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gs-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--gs-font-body);
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  /* The drawn colour. Measured #8a7f76 on the artboard, which is dE76 1.99 from
   * --gs-stone-grey and so is that token rather than a fourth warm grey.
   *
   * KNOWN CONTRAST EXCEPTION: 3.12:1 on warm beige, against the 4.5:1 that 13px
   * text needs. The first build of this page used --gs-ink-label, which passes
   * at 5.90:1 but is dE76 11.65 from the drawing and visibly darker. Corrected
   * to the drawn value on instruction, 12 August 2026. This is the same class of
   * granted exception as Home's eyebrows and the Store Locator's, and it is
   * recorded in BUILD-REPORT.md. --gs-ink-label is the one-line fix if it is
   * ever revoked. */
  color: var(--gs-stone-grey);
}

.gs-breadcrumb__item + .gs-breadcrumb__item::before {
  content: "/";
  margin-inline-end: var(--gs-space-2xs);
  color: var(--gs-stone-grey);
}

.gs-breadcrumb__link {
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* Grow the hit area to --gs-target-min without moving anything.
 *
 * The drawn link is 13px text, so its box is about 15px tall and a11y.js
 * reports it as an undersized target. tokens.css already states the remedy for
 * this case - "a control drawn smaller than this keeps its drawn size and grows
 * its hit area to meet it" - so the overlay is centred on the text and the
 * layout is untouched.
 *
 * Height only. Widening to 44px as well would make "Kimchi", drawn 39px wide
 * with an 8px separator beside it, overlap the target of the crumb next to it,
 * which trades one problem for a worse one. Breadcrumb links are inline text
 * and WCAG 2.2's target size criterion exempts inline targets for exactly this
 * reason. Recorded in BUILD-REPORT.md. */
.gs-breadcrumb__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--gs-target-min);
  transform: translateY(-50%);
}

.gs-breadcrumb__link:hover {
  color: var(--gs-ink);
  text-decoration: underline;
}

/* =========================================================================
 * HERO
 * Media card 551 x 540 at y=160. Text column starts at x=665.
 * ========================================================================= */
.gs-product-hero {
  background-color: var(--gs-warm-beige);
  padding-block: 0 var(--gs-space-3xl);
}

.gs-product-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gs-space-xl);
  margin-block-start: 22px; /* breadcrumb 107 -> card 160, less the line box */
}

@media (min-width: 900px) {
  .gs-product-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
  }
}

/* The hero card is three supplied layers plus the photograph. The first two -
 * the supplied texture and the scheme colour multiplied over it - are
 * .gs-jarmedia in components.css, shared with the related cards below and with
 * the Products catalogue. Read the long note there for why layers 3 and 4 are
 * not shared: this surface draws the shape UNDER the photograph and as the
 * supplied file, where a card draws it OVER and as a mask.
 *
 * Only the two values that are particular to this surface are here. */
.gs-product-hero__media {
  aspect-ratio: 551 / 540;
  border-radius: var(--gs-card-radius-lg);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Layer 3: the brand shape cluster. Drawn as an image rather than a mask,
 * unlike Home and Our Story, because these eleven files are per product and
 * already carry that product's own colour - #6a416d for Black Miso, #40676a for
 * Wombok, and so on. Masking them would throw away the one thing that makes
 * them per product.
 *
 * contain, not cover: the artwork is a 1080 x 789 cluster of four shapes and
 * cropping it cuts a shape in half. */
.gs-product-hero__shape {
  position: absolute;
  inset: 8%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-product-hero__shape svg path{
    fill:var(--gs-product-shape);
}

/* Layer 4. */
.gs-product-hero__img {
    position: relative;
    z-index: 3;
    width: 70%;
    height: 70%;
    object-fit: contain;
    display: block;
}

.gs-product-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Eyebrow: 12.5px, letterspaced, in the product colour. Sentence case in the
 * field, uppercased here, which is why a screen reader still hears words
 * rather than initials. */
.gs-product-hero__eyebrow {
  margin: 0;
  font-family: var(--gs-font-body);
  font-size: 0.78125rem; /* 12.5px */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gs-eyebrow-fg);
}

/* The big range word. 50px, and the two lines sit 49px apart on the artboard,
 * so the line height is just under 1.
 *
 * Lowercased here rather than in the term name, for the same reason the eyebrow
 * is uppercased here: the term is "Wild Ferments" everywhere it is read as
 * words - the breadcrumb, the specification row, the admin - and only this one
 * treatment is set in lower case. Changing the term itself would push the
 * styling into the content. */
.gs-product-hero__range {
  margin: 22px 0 0;
  max-width: 6ch; /* forces "wild ferments" to break as drawn */
  text-transform: lowercase;
  font-family: var(--gs-font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.125rem); /* 36 -> 50px */
  line-height: 0.98;
  color: var(--gs-product);
}

.gs-product-hero__title {
  margin: 22px 0 0;
  font-family: var(--gs-font-heading);
  font-weight: 700;
  font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.25rem); /* 18 -> 20px */
  line-height: 1.3;
  color: var(--gs-product);
}

.gs-product-hero__sep {
  margin-inline: 0.35em;
}

.gs-product-hero__intro {
  margin: 26px 0 0;
  max-width: 33rem;
  font-family: var(--gs-font-body);
  font-size: 1.125rem; /* 18px */
  line-height: 1.55;
  color: var(--gs-ink-soft);
}

.gs-product-hero__actions {
  margin-block-start: 40px;
}

/* Chips. Measured 12px label on the product's shape colour, 634 - 565 = 69px
 * below the button row's own top. The label colour is --gs-chip-fg, which is
 * the product colour for the two schemes where that passes and Ink for the four
 * where it does not - see the measured table at the top of this file. */
.gs-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gs-space-2xs);
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.gs-chip {
  padding: 7px 14px;
  border-radius: var(--gs-pill-radius);
  background-color: var(--gs-product-shape);
  font-family: var(--gs-font-body);
  font-size: 0.75rem; /* 12px */
  line-height: 1.2;
  color: var(--gs-chip-fg);
}

/* =========================================================================
 * DETAIL BAND
 * Ink, 659px tall on the artboard, headings 59px down from its top edge.
 * .gs-on-colour is set in the markup and is what flips text, focus rings and
 * link colours to their on-dark values - see components.css.
 * ========================================================================= */
.gs-product-detail {
  background-color: var(--gs-ink);
  color: var(--gs-paper);
  padding-block: var(--gs-space-3xl);
}

.gs-product-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gs-space-2xl);
}

@media (min-width: 900px) {
  .gs-product-detail__grid {
    grid-template-columns: 1fr 1fr;
    gap: 50px;
  }
}

.gs-product-detail__title {
  margin: 0;
  font-family: var(--gs-font-heading);
  font-weight: 700;
  font-size: var(--gs-step-section); /* 24px at the measured end */
  line-height: 1.2;
  color: var(--gs-paper);
}

.gs-product-detail__lede {
  margin-block-start: 26px;
  font-family: var(--gs-font-body);
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: var(--gs-beige-rose);
}

.gs-product-detail__lede p {
  margin: 0 0 1em;
}

.gs-product-detail__lede p:last-child {
  margin-bottom: 0;
}

/* ---- specification list --------------------------------------------------
 * Label left, value right-aligned, 41px row pitch measured. A dl rather than a
 * table: these are label/value pairs, not a grid of data. */
.gs-spec {
  margin: 40px 0 0;
  border-block-start: 1px solid var(--gs-spec-rule);
  padding-block-start: 22px;
}

.gs-spec__row {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: var(--gs-space-md);
  padding-block: 10px;
}

.gs-spec__key {
  margin: 0;
  font-family: var(--gs-font-body);
  font-size: 0.90625rem; /* 14.5px */
  color: var(--gs-stone-grey);
}

.gs-spec__value {
  margin: 0;
  font-family: var(--gs-font-body);
  font-size: 0.90625rem; /* 14.5px */
  line-height: 1.5;
  text-align: end;
  color: var(--gs-spec-value);
}

/* ---- taste bars ---------------------------------------------------------
 * 27px row pitch, label 13px, track starting at x=270 on the artboard. The
 * percentage is carried as visually hidden text in the markup, because bar
 * length is the only cue the design gives and it is no cue at all to anyone
 * not looking at the screen. */
.gs-taste {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.gs-taste__row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 8rem) 1fr;
  align-items: center;
  gap: var(--gs-space-md);
  padding-block: 6px;
}

/* Light, not the specification list's grey. Measured #cfc7bf on the artboard,
 * dE76 2.98 from --gs-beige-rose and 25.81 from --gs-stone-grey - these are two
 * different colours and the first build used the wrong one, because the sed that
 * pointed the specification keys at stone grey caught this rule too. 12.65:1. */
.gs-taste__label {
  font-family: var(--gs-font-body);
  font-size: 0.8125rem; /* 13px */
  color: var(--gs-beige-rose);
}

.gs-taste__track {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background-color: var(--gs-spec-rule);
}

.gs-taste__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background-color: var(--gs-product-shape);
}

/* ---- nutrition panel ----------------------------------------------------
 * White card, 551 x 263 at (665, 1076), 29px inset, 28px row pitch.
 * Two value columns as of 11 August 2026 - see PROJECT-BRIEF section 10. */
.gs-nutrition {
  margin-block-start: 40px;
  border-radius: var(--gs-card-radius-lg);
  background-color: var(--gs-white);
  color: var(--gs-ink);
  padding: 20px 29px 24px;
}

.gs-nutrition__title {
  margin: 0;
  font-family: var(--gs-font-heading);
  font-weight: 700;
  font-size: 0.91875rem; /* 14.7px */
  line-height: 1.3;
  color: var(--gs-ink);
}

.gs-nutrition__meta {
  margin: 6px 0 0;
  font-family: var(--gs-font-body);
  font-size: 0.75rem; /* 12px */
  color: var(--gs-ink-label);
}

.gs-nutrition__table {
  width: 100%;
  margin-block-start: 12px;
  border-collapse: collapse;
  font-family: var(--gs-font-body);
  font-size: 0.8125rem; /* 13px */
}

.gs-nutrition__table th,
.gs-nutrition__table td {
  padding-block: 7px;
  border-block-end: 1px solid var(--gs-nutrition-rule);
  font-weight: 400;
  text-align: end;
  color: var(--gs-ink);
}

.gs-nutrition__table thead th {
  font-size: 0.6875rem; /* 11px */
  color: var(--gs-ink-label);
}

.gs-nutrition__table th[scope="row"] {
  text-align: start;
}

.gs-nutrition__table tbody tr:last-child th,
.gs-nutrition__table tbody tr:last-child td {
  border-block-end: 0;
}

.gs-nutrition__row--sub th[scope="row"] {
  color: var(--gs-ink-muted);
}

/* =========================================================================
 * RELATED
 * Three 371 x 211 cards, 20px apart, title 20px in from the card's left edge.
 * ========================================================================= */
.gs-product-related {
  background-color: var(--gs-warm-beige);
  padding-block: var(--gs-space-3xl);
}

.gs-product-related__title {
  margin: 0 0 var(--gs-space-lg);
  font-family: var(--gs-font-heading);
  font-weight: 700;
  font-size: var(--gs-step-section);
  line-height: 1.2;
  color: var(--gs-ink);
}

.gs-product-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-product-card {
  border-radius: var(--gs-card-radius);
  background-color: var(--gs-white);
  overflow: hidden;
}

.gs-product-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* The same base as the hero and as the Products catalogue: .gs-jarmedia in
 * components.css supplies the supplied texture, the scheme tint, the
 * photograph's own rule and the shape mask. Only the aspect ratio and this
 * surface's own cluster geometry are here.
 *
 * The texture matters here only while the photography is outstanding. The
 * mockup draws a food photograph filling this area with the shape cluster over
 * its bottom-right corner, and a real photograph covers the texture completely.
 * Without it the card would otherwise be a flat tint with an invisible shape on
 * it, because the shape and the card background are the same colour. */
.gs-product-card__media {
  aspect-ratio: 371 / 159;
}

/* This surface's cluster, measured from the Product Details artboard, where the
 * shared default in components.css is the mean of the eleven Products cards.
 * The two boxes are drawn to different shapes - 371x159 here against 273x200
 * there - so one set of offsets cannot serve both. */
.gs-product-card .gs-jarmedia__shape {
  right: -16%;
  bottom: -14%;
  width: 40%;
}

/* The card title is the product's OWN scheme colour, set by the scheme class
 * on the card. Contrast on white was measured for every scheme; see the table
 * in tokens.css and the note there about gold. */
.gs-product-card__title {
  display: block;
  padding: 16px 20px 18px;
  font-family: var(--gs-font-heading);
  font-weight: 700;
  font-size: 0.91875rem; /* 14.7px */
  line-height: 1.3;
  color: var(--gs-product);
}

.gs-product-card__link:hover .gs-product-card__title {
  text-decoration: underline;
}

/* =========================================================================
 * SMALL SCREENS
 * PROJECT-BRIEF 7A: no mobile artefact exists, so this is a rearrangement of
 * the desktop design and nothing new is introduced.
 *
 * The specification and nutrition rows are the only parts that need real
 * thought. Both put a label against a right-aligned value, which stops working
 * once the value wraps to three lines in a 375px column, so below 600px the
 * spec rows stack and align left. The nutrition table keeps its columns,
 * because dropping a column would drop data the client asked to add.
 * ========================================================================= */
@media (max-width: 599px) {
  .gs-spec__row {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .gs-spec__value {
    text-align: start;
  }

  .gs-taste__row {
    grid-template-columns: 4.5rem 1fr;
    gap: var(--gs-space-sm);
  }

  .gs-nutrition {
    padding-inline: 20px;
  }

  .gs-nutrition__table {
    font-size: 0.75rem; /* 12px */
  }
}