/*
Theme Name: In the Kibble v4
Theme URI: https://inthekibble.com
Description: v4 concept build - brutalist editorial treatment of the Open Score archive. Staging only.
Author: Creahive
Version: 0.1.0
Text Domain: itk-v4
*/

/* ============================================================
   Design tokens - taken from the v4 concept
   ============================================================ */
:root {

  /* ---- Brand ---------------------------------------------------
     Five hues carry the whole site. Everything else is a surface,
     a rule or a grey. */
  --ink:    #111210;
  --blue:   #1A46F0;
  --blue-d: #0F2FB8;
  /* Accent for the panel row. Carries ink text at ~14:1, and reads at 6.4:1
     against --blue, which is what the kicker on the blue panel needs. */
  --lime:   #C4E43A;
  --lime-d: #B2D22B;
  --green:  #17652F;
  --amber:  #8A5208;
  --red:    #A82C16;

  /* ---- Page surfaces and rules ---- */
  --bg:      #FBFBF9;
  --panel:   #F4F4F1;
  --white:   #FFFFFF;
  --rule:    #DEDEDA;
  --rule-lt: #EDEDE9;
  --rule-md: #E3E3DE;

  /* Text greys are set against --bg to clear WCAG AA at small sizes.
     The previous values ran as low as 2.57:1, which failed 8 of 11 styles. */
  --muted:   #66675F;
  --muted-2: #70716A;
  --body:    #4B4C45;
  --body-2:  #3B3C36;
  --dim:     #C6C6BF;   /* on dark backgrounds only */

  /* ---- Text that sits ON a filled surface ----------------------
     These are the inverse pairs. Every one of them must clear AA
     against the fill named in the token, not against --bg. */
  --on-blue:      #FFFFFF;   /* label on a --blue fill */
  --on-blue-2:    #D7DEFF;   /* body copy on a --blue panel */
  --on-blue-soft: #C3D0FF;   /* kicker + unit on a --blue output box */
  --on-blue-3:    rgba(255,255,255,.82); /* dimmed label on a --blue tile */
  --on-blue-dim:  #93A6FA;   /* placeholder caption on the blue hatch */
  --on-lime:      #2A3305;   /* body copy on a --lime panel */
  --on-ink:       #FFFFFF;   /* numeral inside an --ink disc */
  --on-amber:     #FFFFFF;   /* staging ribbon text on --amber */
  --on-chart:     #FFFFFF;   /* figure printed inside a composition segment */

  /* ---- Hatches, grids and stripes ------------------------------
     Diagonal hatch = "no photograph on file"; it must stay quieter
     than the card it sits in. */
  --grid-line:      #F2F2EE;   /* 44px graph paper behind the hero */
  --panel-stripe-a: #E9E9E4;   /* light placeholder hatch, dark band */
  --panel-stripe-b: #F4F4F1;   /* light placeholder hatch, light band */
  --ink-stripe:     #1B1C19;   /* hatch on the ink card, paired with --ink */
  --blue-stripe-a:  #2B54F2;   /* hatch on the blue panel shot */
  --blue-stripe-b:  #1F49F0;
  --derived-stripe: #DCD5C7;   /* hatch over --n-derived (starch) */

  /* ---- Just Released: the one dark band on a light site --------
     A self-contained dark scheme. Recolour it as a set. */
  --dark-bg:      #0F100E;   /* the band itself */
  --dark-card:    #171815;   /* card fill inside the band */
  --dark-card-2:  #1C1D19;   /* card fill on hover */
  --dark-shot:    #131411;   /* image well inside the dark card */
  --dark-stripe:  #1E1F1B;   /* hatch over --dark-shot */
  --dark-rule:    #2E2F29;   /* hairline on dark: card + footer rules */
  --dark-rule-2:  #55564E;   /* underline under a link on dark */
  --dark-rule-hi: #5B5C53;   /* dark card border on hover */
  --dark-kicker:  #85867C;   /* kicker on --dark-bg */
  --dark-muted:   #8E8F85;   /* card meta on --dark-card */
  --dark-muted-2: #74756C;   /* legal line + empty score on dark */
  --dark-link:    #9A9B91;   /* footer link + note on --ink */
  --on-dark-hi:   #FFFFFF;   /* link hover on dark, must beat --dark-link */
  --band-sub:     #A8A8A0;   /* strap under the sign-up heading on --ink */

  /* ---- Status ---- */
  --ok-bg:     #EEF6F0;   /* "no recalls" banner fill */
  --ok-line:   #CFE6D6;
  --warn-bg:   #FCF3E6;   /* "recall on record" banner fill */
  --warn-line: #F0DEBE;
  --salt-mark: #92400E;   /* the salt-divider footnote marker, on --white */

  /* ---- Small utility surfaces ---- */
  --dial-track:  #EAEAE4;              /* unfilled arc of the score dial */
  --row-alt:     #FCFCFA;              /* zebra stripe, recalls table */
  --ink-hi:      #000000;              /* one step past --ink, button hover */
  --tip-bg:      #1F2937;              /* tooltip bubble, light and dark pages */
  --tip-ink:     #FFFFFF;              /* text in that bubble */
  --focus-ring:  rgba(26,70,240,.16);  /* 3px halo, derived from --blue */
  --swatch-ring: rgba(17, 18, 16, .18);/* inset ring on pale legend swatches */

  /* ---- Composition ramp ----------------------------------------
     Four measured nutrients only - validated for CVD and normal-vision
     separation as an adjacent set, which the softer mockup values failed
     (ash and moisture sat at dE 10.2 for normal vision, and they touch).
     Ash and starch are deliberately NOT on this ramp: neither is printed
     on a bag, so neither gets a measured colour. Keep them separable. */
  --n-protein:  #A83C1E;
  --n-fat:      #E0A500;
  --n-fiber:    #3F7A1F;
  --n-moisture: #1D6DA6;
  --n-assumed:  #C9C5BC;   /* ash: stated by us, not by the label */
  --n-derived:  #EDE8DE;   /* starch: what is left once the rest is subtracted */

  --warm:      #FAF3F0;    /* the reading callout under the composition bar */
  --warm-line: #EFE2DC;

  /* ---- Type ----------------------------------------------------
     --display is the headline face. It defaults to the --sans stack,
     so a palette that changes only --sans still looks coherent. */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Archivo, Helvetica, Arial, sans-serif;
  --display: Archivo, Helvetica, Arial, sans-serif;

  --display-weight: 800;
  --display-tracking: -.045em;   /* base .k-h1 tracking (see --h1-tracking) */
  --display-transform: uppercase;/* base heading case (see --heading-case) */

  /* The refinement block near the end of this file wins over the base
     declarations above for the three heading sizes and the kicker. These
     four are the ones that actually decide how the page reads today. */
  --heading-case: none;
  --h1-tracking: -.04em;
  --h2-tracking: -.03em;
  --h3-tracking: -.025em;
  --kicker-tracking: .2em;    /* base kicker + archive-log tracking */
  --kicker-tracking-2: .16em; /* the .k-kicker tracking that wins */

  /* One spacing scale, so section rhythm stops being ad hoc. */
  --s1: 8px; --s2: 14px; --s3: 22px; --s4: 34px; --s5: 52px; --s6: 76px;
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 68ch;
  --shell: 1320px;

  /* ---- Shape ---- */
  --header-h: 66px;
  --radius: 0;
  --btn-radius: 0;
  --border-w: 2px;   /* the heavy rules: masthead underline, hero search box */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }
input, select, button, textarea { font-family: inherit; }

@keyframes kibblePulse  { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ============================================================
   Typographic utilities
   ============================================================ */
.k-mono  { font-family: var(--mono); }
.k-kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: var(--kicker-tracking);
  color: var(--muted);
  text-transform: uppercase;
}
.k-kicker--blue { color: var(--blue); }
.k-label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .13em;
  color: var(--muted);
  text-transform: uppercase;
}
.k-h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: .92;
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-transform);
}
.k-h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 37px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.035em;
  text-transform: var(--display-transform);
}
.k-h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 27px);
  font-weight: 700;
  letter-spacing: -.03em;
  text-transform: var(--display-transform);
  line-height: 1.05;
}
.k-lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

/* ============================================================
   Shell: one sticky header, no persistent rail
   ============================================================ */
.k-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 12px 18px; border-radius: 0; font-weight: 600;
  transition: top .16s var(--ease);
}
.k-skip:focus { top: 0; text-decoration: none; color: var(--bg); }

.k-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: var(--border-w) solid var(--ink);
}
.k-header__in {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--gutter); height: var(--header-h);
}
.k-brand { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }
.k-brand__name {
  font-family: var(--display);
  font-size: 21px; font-weight: var(--display-weight); letter-spacing: -.035em;
  text-transform: uppercase; color: var(--ink);
}
.k-brand:hover { text-decoration: none; }

/* ---- The bag-and-bowl logo ----
   The SVG paints five slots from --lg-* properties (see itk_v4_logo()). They
   are mapped to role tokens, never to hexes, so the logo follows whichever
   palette cut is live exactly like the rest of the theme. This is the Primary
   colourway: ink contours and wordmark, lilac bag, brick bowl, amber kibble.
   The heart is the one slot that takes the GROUND rather than a fixed white,
   so it stays a hole in the bag on reversed grounds instead of a white blob. */
.k-brand--logo {
  /* Ink and kibble ride role tokens, because the logo genuinely participates in
     those roles: its contours are the page's ink, its kibble is the action
     colour. Bag and bowl are literals on purpose. Both hexes DO exist in
     theme-v4b.css - #F1F1F4 as --dark-shot and #FBE6DE as --warn-bg - but those
     roles have nothing to do with a logo, and binding the bag to the warning
     wash would mean a future palette cut re-tinting the brand by accident.
     These two are brand constants, so they are written as constants. */
  --lg-ink:    var(--ink);
  --lg-bag:    #F1F1F4;   /* mist  */
  --lg-bowl:   #FBE6DE;   /* blush */
  --lg-kibble: var(--blue);
  --lg-hi:     var(--bg);
  align-items: center;
}
.k-brand--logo .k-logo__svg {
  display: block;
  /* Aspect is 5.98:1, so height drives it. 30px keeps the lockup inside the
     66px masthead with room above and below. */
  height: 30px; width: auto;
}

/* Reversed for the footer, which sits on --ink.
   Mist and blush cannot come along. Against white contours they sit at about
   1.05:1, so the bag panel and the bowl rim stop being drawn and the mark
   collapses into one pale blob - the tints survive only on light grounds. Here
   they knock out to the ground instead and let the contours do the drawing.
   The kibble stays brick, which is the one fill with enough weight to hold on
   black, and the heart takes the ground as it does on every reversed variant. */
.k-footer .k-brand--logo {
  --lg-ink:  var(--on-ink);
  --lg-bag:  var(--ink);
  --lg-bowl: var(--ink);
  --lg-hi:   var(--ink);
}
.k-footer .k-brand--logo .k-logo__svg { height: 34px; }

@media (max-width: 420px) {
  /* Below this the lockup starts crowding the burger. */
  .k-brand--logo .k-logo__svg { height: 26px; }
}

.k-nav { display: flex; align-items: center; gap: 4px; }
.k-nav a {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 14px; border-radius: 0;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.k-nav a:hover { background: var(--rule-lt); text-decoration: none; }
.k-nav a.is-active { color: var(--blue); }
.k-nav a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--blue); border-radius: 0;
}

.k-header__aux { display: flex; align-items: center; gap: var(--s2); }
.k-hsearch {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--rule); border-radius: 0;
  padding: 0 14px; height: 40px; background: var(--white);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.k-hsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-ring); }
.k-hsearch__icon { color: var(--muted); flex: none; }
.k-hsearch input { border: 0; outline: none; background: none; width: 140px; font-size: 14.5px; }

.k-btn-dark {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px; border-radius: var(--btn-radius);
  background: var(--ink); color: var(--bg);
  font-size: 15px; font-weight: 600; border: 0; cursor: pointer;
  transition: background .16s var(--ease);
}
.k-btn-dark:hover { background: var(--blue); color: var(--on-blue); text-decoration: none; }

/* Mobile menu */
.k-burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--rule);
  border-radius: 0; background: var(--white); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.k-burger__bar { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 0; transition: transform .2s var(--ease), opacity .2s var(--ease); }
.k-burger[aria-expanded="true"] .k-burger__bar:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.k-burger[aria-expanded="true"] .k-burger__bar:last-of-type  { transform: translateY(-3.5px) rotate(-45deg); }

.k-mnav { border-top: 1px solid var(--rule); background: var(--bg); padding: var(--s1) var(--gutter) var(--s3); }
.k-mnav a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--rule-lt); color: var(--ink);
}
.k-mnav a:last-child { border-bottom: 0; }
.k-mnav a:hover { text-decoration: none; }
.k-mnav strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.k-mnav span { display: block; font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.k-mnav a.is-active strong { color: var(--blue); }

.k-main { min-width: 0; }

/* ============================================================
   Sections
   ============================================================ */
.k-section { padding: 58px 56px; border-bottom: 1px solid var(--rule); }
.k-section--tight { padding: 46px 56px; }
.k-hero {
  padding: 72px 56px 46px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  /* `isolation` is load-bearing, not decoration: it gives the hero its own
     stacking context so the z-index -1 grid below is trapped inside it. Without
     it that layer sinks past body, whose background is an opaque white painted
     after negative-z descendants of the root - the grid renders, and nothing
     shows. */
  isolation: isolate;
}

/* ---- The hero's graph paper ----
   The grid is painted by a full-bleed layer rather than on the section itself.
   The hero box stays at --shell with everything else, so the heading, lede and
   the bottom rule keep the container's edges; only the grid runs to the
   viewport edges. z-index -1 puts it behind the hero's own content: .k-hero is
   `position: relative` with `z-index: auto`, so it opens no stacking context
   and the layer still paints above the page background. */
.k-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* 100vw counts the scrollbar, so the layer overhangs by a few pixels each
   side. `clip` absorbs it; `hidden` would turn the viewport into a scroll
   container and kill the sticky masthead. */
html { overflow-x: clip; }
.k-hero__eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: .22em; color: var(--blue); margin-bottom: 22px;
}
.k-hero__lede {
  max-width: 52ch; margin: 26px 0 0;
  font-size: 18px; line-height: 1.55; color: var(--body); text-wrap: pretty;
}

/* Search */
/* ---- Hero search: Ajax Search Pro wearing the theme's chrome ----
   The plugin ships its own red fill and Open Sans. Everything below puts the
   plain form's look back on top of it, so the hero reads as it did before the
   swap. Scoped to #search-bar, which outranks the plugin's div.asp_m.asp_m_1
   rules on specificity - the plugin's stylesheet loads after this one. */
.k-hero__search { margin-top: 36px; max-width: 740px; }
.k-hero__search .asp_w_container { max-width: 100%; }

#search-bar div.asp_m,
#search-bar div.asp_m .probox {
  background: var(--white); background-image: none; border-radius: 0;
}
/* Every slot keeps an explicit height: the plugin stacks a ghost autocomplete
   input under the real one and relies on fixed heights to keep it hidden. */
#search-bar div.asp_m .probox {
  align-items: stretch; height: 52px;
  border: var(--border-w) solid var(--ink); box-shadow: none;
}
#search-bar div.asp_m .probox > div { border-radius: 0; box-shadow: none; }

/* Left slot: the settings toggle stands where the old glyph did. */
#search-bar div.asp_m .probox .prosettings {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 52px; width: 52px; height: 52px;
  background: var(--white); background-image: none;
  border-right: 1px solid var(--rule);
}
#search-bar div.asp_m .probox .prosettings .innericon svg { fill: var(--muted); }

#search-bar div.asp_m .probox .proinput { height: 52px; margin: 0 0 0 14px; }
#search-bar div.asp_m .probox .proinput form { height: 52px; }
#search-bar div.asp_m .probox .proinput input.orig,
#search-bar div.asp_m .probox .proinput input.autocomplete {
  height: 52px; line-height: 52px;
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
}
#search-bar div.asp_m .probox .proinput input.autocomplete { color: var(--muted); }
#search-bar div.asp_m .probox .proinput input.orig::placeholder { color: var(--muted); opacity: 1; }

/* Right slot: the ink block the RUN button used to fill. */
#search-bar div.asp_m .probox .promagnifier {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 62px; width: 62px; height: 52px;
  background: var(--ink); background-image: none;
}
#search-bar div.asp_m .probox .promagnifier .innericon svg { fill: var(--bg); }

/* The results panel is cloned onto <body>, so it sits outside #search-bar. The
   plugin scopes its own rules by id (#ajaxsearchprores1_1 ...), which no class
   selector can outrank - hence !important on this block and nowhere else. */
body div.asp_r.asp_r_1.vertical {
  padding: 0 !important; background: var(--white) !important;
  border: 1px solid var(--ink) !important; border-radius: 0 !important; box-shadow: none !important;
}
body div.asp_r.asp_r_1 .results .item { border-bottom: 1px solid var(--rule-lt) !important; }
body div.asp_r.asp_r_1 .results .item.hovered { background: var(--panel) !important; }
body div.asp_r.asp_r_1 .results .item .asp_content h3 a {
  font-family: var(--sans) !important; font-size: 14.5px !important;
  font-weight: 600 !important; color: var(--ink) !important;
}
body div.asp_r.asp_r_1 .results .item .asp_content h3 a:hover { color: var(--blue) !important; }
body div.asp_r.asp_r_1 span.highlighted { color: var(--blue) !important; background: transparent !important; }
body div.asp_r.asp_r_1 p.showmore { margin: 0 !important; }
body div.asp_r.asp_r_1 p.showmore a {
  display: block; background: var(--ink) !important; color: var(--bg) !important;
  border: 0 !important; border-radius: 0 !important;
  font-family: var(--mono) !important; font-size: 12.5px !important;
  letter-spacing: .13em; text-transform: uppercase;
}

.k-search {
  display: flex; margin-top: 36px; max-width: 740px;
  border: var(--border-w) solid var(--ink); background: var(--white);
}
.k-search__icon {
  display: flex; align-items: center; padding: 0 16px;
  border-right: 1px solid var(--rule);
  font-family: var(--mono); font-size: 15px; color: var(--muted);
}
.k-search__input {
  flex: 1; border: 0; outline: none; padding: 17px 14px;
  font-family: var(--mono); font-size: 14.5px; letter-spacing: .08em;
  text-transform: uppercase; background: transparent;
}
.k-search__submit {
  border: 0; padding: 0 30px; background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: .18em; cursor: pointer;
}

/* Chips */
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.k-chip {
  padding: 8px 13px; border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em;
  background: var(--white); color: var(--ink);
}
.k-chip:hover { text-decoration: none; }
.k-chip.is-active { background: var(--ink); color: var(--bg); }

/* Stat strip */
.k-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ink);
}
.k-stats--boxed { border: 1px solid var(--ink); margin-top: 34px; }
.k-stat { padding: 22px 24px; border-right: 1px solid var(--rule); }
.k-stat:last-child { border-right: 0; }
.k-stat__value { font-size: 33px; font-weight: 700; letter-spacing: -.03em; }
.k-stat__label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .15em;
  margin-top: 6px; opacity: .62;
}
.k-stat--blue { background: var(--blue); color: var(--on-blue); }

/* Archive log
   ------------------------------------------------------------
   The second half of the belt. This replaced a scrolling recall ticker: the
   marquee could only be read at the speed it chose, and it said one kind of
   thing. A static row reads at the reader's pace, links every entry, and has
   room for the other two events that change the archive - rescores and
   additions. Flex rather than a fixed grid because a category with nothing to
   report is omitted, so the row is sometimes two cells wide, not three. */
.k-archive { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); }
.k-archive__head,
.k-archive__item,
.k-archive__more { padding: 15px var(--s3); border-left: 1px solid var(--rule); }
.k-archive__head { flex: 0 0 232px; border-left: 0; }
.k-archive__updated { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin-top: 7px; }

.k-archive__item {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  color: inherit; text-decoration: none;
  transition: background .15s var(--ease);
}
.k-archive__item:hover { background: var(--panel); color: inherit; text-decoration: none; }
.k-archive__item:hover .k-archive__title { color: var(--blue); }
.k-archive__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.k-archive__note {
  font-size: 13.5px; color: var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.k-archive__more {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: var(--kicker-tracking);
  color: var(--ink); text-decoration: none;
}
.k-archive__more:hover { color: var(--blue); text-decoration: none; }

/* Split section */
.k-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 48px; }
.k-split--narrow { grid-template-columns: 300px minmax(0, 1fr); }
.k-defs { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.k-def {
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--rule); padding-top: 10px;
}
.k-def__k { font-family: var(--mono); font-size: 12px; letter-spacing: .13em; color: var(--muted); }
.k-def__v { font-size: 15px; font-weight: 600; text-align: right; }

/* Score lines */
.k-scorebox { background: var(--panel); border: 1px solid var(--rule); padding: 26px; }
.k-scorelines { display: flex; flex-direction: column; gap: 12px; }
.k-scoreline {
  background: var(--white); border: 1px solid var(--rule); padding: 16px 18px;
  display: grid; grid-template-columns: 34px minmax(0,1fr) 76px;
  gap: 18px; align-items: center;
}
.k-scoreline__num {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--blue);
}
.k-scoreline__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.k-scoreline__note {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
  color: var(--muted); margin-top: 5px;
}
.k-scoreline__max {
  text-align: right; font-family: var(--mono); font-size: 16px; font-weight: 600;
}
.k-bar { height: 4px; background: var(--rule-lt); margin-top: 10px; }
.k-bar__fill { height: 4px; background: var(--ink); }
.k-bar__fill--blue  { background: var(--blue); }
.k-bar__fill--amber { background: var(--amber); }

/* Card trio. Two cells since the nutrition card moved out to its own panel
   below; the conversion table is the wider of the pair because it is a table. */
.k-trio { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.k-card { border: 1px solid var(--rule); background: var(--white); padding: 22px; }
.k-card--panel { background: var(--panel); }
.k-card--dark {
  background: var(--ink); color: var(--bg); padding: 26px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 320px;
  background-image: repeating-linear-gradient(135deg, var(--ink-stripe) 0 10px, var(--ink) 10px 20px);
}
.k-card--dark .k-h3 { color: var(--bg); }
.k-card__copy { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--body); }
.k-card--dark .k-card__copy { color: var(--dim); max-width: 40ch; }

/* Dry-matter rows */
.k-dm {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: 8px;
  border-top: 1px solid var(--rule-md); padding: 9px 0;
  font-family: var(--mono); font-size: 13.5px;
}
.k-dm__name { font-weight: 600; }
.k-dm__asfed { color: var(--muted); }
.k-dm__read { text-align: right; font-weight: 600; }
.k-legend {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--muted-2); margin-top: 14px; line-height: 1.7;
}

/* ============================================================
   Panel row
   ------------------------------------------------------------
   One tall panel beside two stacked ones. The side column is its own grid with
   the list card on a 1fr track, so the two columns finish level however long
   the nutrition copy runs. Softer than the rest of the page on purpose: these
   three are invitations, not readings, and the radius says so.
   ============================================================ */
.k-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.k-panels__side { display: grid; grid-template-rows: auto 1fr; gap: 20px; }

.k-panel { border-radius: 0; padding: 34px; display: flex; flex-direction: column; }
.k-panel--blue { background: var(--blue); color: var(--on-blue); }
.k-panel--lime { background: var(--lime); color: var(--ink); }
.k-panel--list { background: var(--white); border: 1px solid var(--rule); }

.k-panel__kicker {
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: 14px;
}
.k-panel--blue .k-panel__kicker { color: var(--lime); }
.k-panel__kicker--blue { color: var(--blue); }

.k-panel__title {
  font-family: var(--display);
  margin: 0 0 16px; font-size: clamp(28px, 3vw, 38px); font-weight: var(--display-weight);
  line-height: 1.06; letter-spacing: -.035em;
}
.k-panel__title--sm { font-size: clamp(24px, 2.4vw, 31px); letter-spacing: -.03em; }

.k-panel__copy { margin: 0; font-size: 16px; line-height: 1.55; max-width: 46ch; }
.k-panel--blue .k-panel__copy { color: var(--on-blue-2); }
.k-panel--lime .k-panel__copy { color: var(--on-lime); }

/* The shot takes the slack, so the CTA stays pinned to the foot of the panel
   whatever the copy does. */
.k-panel__shot {
  flex: 1; min-height: 150px; margin: 26px 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  background-image: repeating-linear-gradient(135deg, var(--blue-stripe-a) 0 10px, var(--blue-stripe-b) 10px 20px);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  color: var(--on-blue-dim); text-align: center; padding: 0;
}
.k-panel__shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

.k-panel__cta {
  align-self: flex-start; background: var(--lime); color: var(--ink);
  border-radius: var(--btn-radius); padding: 0 26px; min-height: 48px;
  display: inline-flex; align-items: center;
  font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
}
.k-panel__cta:hover { background: var(--lime-d); color: var(--ink); text-decoration: none; }

.k-panel__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.k-pill {
  background: var(--white); color: var(--ink); border-radius: var(--btn-radius);
  padding: 0 18px; min-height: 40px; display: inline-flex; align-items: center;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
}
.k-pill:hover { background: var(--ink); color: var(--lime); text-decoration: none; }
.k-pill--on { background: var(--ink); color: var(--lime); }

/* Most viewed */
.k-viewed { list-style: none; margin: 4px 0 0; padding: 0; }
.k-viewed__row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  border-top: 1px solid var(--rule-lt); padding: 13px 0;
}
.k-viewed__row:first-child { border-top: 0; }
.k-viewed__n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.k-viewed__name { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.k-viewed__name:hover { color: var(--blue); text-decoration: none; }
.k-viewed__score { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.k-viewed__metric {
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--muted); text-align: right; white-space: nowrap;
}
.k-viewed__metric b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 500; }

/* Mini cards */
.k-minis { display: flex; flex-direction: column; gap: 20px; }
.k-mini { flex: 1; border: 1px solid var(--rule); background: var(--white); padding: 22px; }
.k-mini h4 {
  font-family: var(--display);
  margin: 10px 0 8px; font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1;
}
.k-mini p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }

/* Section head with action */
.k-sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.k-morelink {
  font-family: var(--mono); font-size: 13px; letter-spacing: .15em;
  color: var(--blue); border-bottom: 1px solid var(--blue); white-space: nowrap;
}
.k-morelink:hover { text-decoration: none; }

/* Product grid + cards */
.k-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.k-food {
  border: 1px solid var(--rule); background: var(--white);
  display: flex; flex-direction: column; color: inherit;
}
.k-food:hover { text-decoration: none; color: inherit; border-color: var(--ink); }
.k-food__shot {
  height: 172px; overflow: hidden;
  background-image: repeating-linear-gradient(45deg, var(--panel-stripe-a) 0 8px, var(--panel-stripe-b) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  color: var(--muted-2); text-align: center; padding: 12px;
}
.k-food__shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.k-food__body {
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.k-food__brand {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted);
  text-transform: uppercase;
}
.k-food__name {
  margin: 0; font-size: 18px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.k-food__foot {
  margin-top: auto; display: flex; align-items: flex-end;
  justify-content: space-between; border-top: 1px solid var(--rule-lt); padding-top: 12px;
}
.k-food__metric {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted);
}
.k-food__metric b { display: block; color: var(--ink); font-size: 14px; font-weight: 500; }
.k-food__score { font-size: 29px; font-weight: 700; letter-spacing: -.04em; }
.k-food__score--none { font-size: 20px; color: var(--muted); letter-spacing: 0; }
.k-food__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ============================================================
   Just released - Section 03
   ------------------------------------------------------------
   A full-bleed dark band rather than another white section: the point of the
   run is that these foods are the exception on this page, listed before the
   archive has finished reading them. Cards are the same .k-food component as
   Featured reviews, recoloured here rather than reimplemented, so the two
   stay in step.
   ============================================================ */
.k-new {
  background: var(--dark-bg); color: var(--bg);
  padding: var(--s6) var(--gutter);
}
.k-new__inner { max-width: var(--shell); margin-inline: auto; }
.k-new__head { align-items: flex-end; }
.k-new .k-h2 { color: var(--bg); letter-spacing: -.02em; }
.k-new .k-kicker { color: var(--dark-kicker); }
.k-new .k-new__lede {
  margin: 18px 0 0; font-size: 16px; line-height: 1.55;
  color: var(--dim); max-width: 58ch;
}
.k-new .k-morelink { color: var(--bg); border-bottom-color: var(--dark-rule-2); }
.k-new .k-morelink:hover { color: var(--on-dark-hi); border-bottom-color: var(--bg); }

.k-new .k-food { background: var(--dark-card); border-color: var(--dark-rule); color: var(--bg); }
.k-new .k-food:hover {
  border-color: var(--dark-rule-hi); background: var(--dark-card-2);
}
/* The shot box is square in this section, for two reasons: a square bag photo
   can then run the full width of the card with nothing cropped, and every
   image in the row still bottoms out on the same line. Portrait photos - the
   ~925x1500 exports - stay contained on the stripe, because filling the width
   would cost them a third of the bag. */
.k-new .k-food__shot {
  height: auto; aspect-ratio: 1 / 1;
  background-color: var(--dark-shot); border-bottom-color: var(--dark-rule); color: var(--dark-muted-2);
  background-image: repeating-linear-gradient(135deg, var(--dark-stripe) 0 10px, var(--dark-shot) 10px 20px);
}
.k-new .k-food__shot img { mix-blend-mode: normal; }
.k-new .k-food__shot--fill { padding: 0; }
.k-new .k-food__shot--fill img { object-fit: cover; }
.k-new .k-food__brand,
.k-new .k-food__metric { color: var(--dark-muted); }
.k-new .k-food__foot { border-top-color: var(--dark-rule); }
.k-new .k-food__metric b { color: var(--bg); }
.k-new .k-food__score { color: var(--bg); }
.k-new .k-food__score--none { color: var(--dark-muted-2); }

/* Score colour helpers */
.k-sc-blue  { color: var(--blue); }
.k-sc-ink   { color: var(--ink); }
.k-sc-amber { color: var(--amber); }
.k-sc-red   { color: var(--red); }
.k-sc-green { color: var(--green); }

/* Tables (recalls) */
.k-table { border: 1px solid var(--ink); background: var(--white); }
.k-table__head, .k-table__row { display: grid; align-items: center; }
.k-table__head {
  padding: 11px 18px; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .15em;
}
.k-table__row { padding: 13px 18px; border-bottom: 1px solid var(--rule-lt); gap: 14px; }
.k-table__row:last-child { border-bottom: 0; }
.k-cols-3 { grid-template-columns: 130px 1.1fr 1.5fr; }
.k-cols-4 { grid-template-columns: 130px 1fr 1.1fr 1.3fr; }
.k-td-date { font-family: var(--mono); font-size: 13.5px; color: var(--body); }
.k-td-brand { font-size: 16px; font-weight: 600; }
.k-td-reason {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; font-weight: 600;
}
.k-td-detail { font-size: 15px; color: var(--body); line-height: 1.45; }

/* Signup band */
.k-band {
  background: var(--ink); color: var(--bg); padding: 70px 56px; text-align: center;
}
.k-band h2 {
  font-family: var(--display);
  margin: 0; font-size: clamp(30px, 4.4vw, 48px); font-weight: var(--display-weight);
  letter-spacing: -.04em; text-transform: var(--display-transform);
}
/* The strap is set in the sans rather than the mono: at two lines of running
   copy the mono's .2em tracking stopped reading as a caption and started
   reading as a machine line. */
.k-band__sub {
  font-family: var(--sans); font-size: 15.5px; font-weight: 500;
  letter-spacing: .05em; line-height: 1.5;
  color: var(--band-sub); margin: 16px auto 0; max-width: 54ch;
}
.k-band__form {
  max-width: 470px; margin: 32px auto 0;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--body-2); padding-bottom: 10px;
}
.k-band__form input {
  flex: 1; background: transparent; border: 0; outline: none; color: var(--bg);
  font-family: var(--mono); font-size: 14px; letter-spacing: .1em;
}
.k-band__form button {
  background: none; border: 0; color: var(--blue); font-size: 19px; cursor: pointer;
}

/* Footer
   ------------------------------------------------------------
   Dark, and continuous with the sign-up band above it: no rule between the
   two, so the page closes on one black block rather than a band and then a
   separate light plinth. Blue is not used for hover down here - --blue on
   --ink clears about 2.5:1, so links go to --on-dark-hi instead. */
.k-footer { background: var(--ink); color: var(--bg); padding: 8px var(--gutter) 56px; }

/* Held to the shell rather than running the full width, so the footer's left
   and right edges sit under the Just Released cards above it. */
.k-footer__box { max-width: var(--shell); margin-inline: auto; }
.k-footer__cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.k-footer .k-brand__name { color: var(--bg); }
.k-footer__note {
  margin: 0; max-width: 34ch;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em;
  line-height: 1.9; text-transform: uppercase; color: var(--dark-link);
}
.k-footer__title {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; margin-bottom: 14px; color: var(--bg);
}
.k-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.k-footer__list a {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; color: var(--dark-link);
}
.k-footer__list a:hover { color: var(--bg); }
.k-footer__legal {
  margin-top: 36px; border-top: 1px solid var(--dark-rule); padding-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--dark-muted-2);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  text-transform: uppercase;
}
.k-footer__status { display: inline-flex; align-items: center; gap: 8px; }
.k-footer__dot { width: 7px; height: 7px; background: var(--blue); display: inline-block; }
.k-footer__dot--warm { background: var(--amber); }

/* Staging ribbon */
.k-staging {
  background: var(--amber); color: var(--on-amber); text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  padding: 5px 10px; text-transform: uppercase;
}


/* ============================================================
   Product page - the dossier
   ------------------------------------------------------------
   The brutalist treatment from the concept: the guaranteed analysis printed
   as the bag prints it, the same figures converted beside it, and the working
   shown as a table rather than explained in prose. Prefixed pd- rather than
   reusing p-, so the softer treatment those rules describe stays intact for
   any template still on it.

   Score surfaces (.pd-score, the benchmark score row) only ever render when
   ITK_V4_SHOW_SCORE is true; their rules live here so flipping that constant
   needs no CSS change.
   ============================================================ */
.pd { padding: 34px 0 70px; }

.pd-crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 24px;
}
.pd-crumbs a { color: var(--muted); }
.pd-crumbs a:hover { color: var(--blue); }

/* ---- Shared ---- */
.pd-kicker { font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em; color: var(--muted); }
.pd-kicker--blue { color: var(--blue); }
.pd-h2 { font-family: var(--display); margin: 10px 0 0; font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.pd-h2--lg { font-size: clamp(25px, 2.9vw, 33px); margin: 0; }
.pd-note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--muted-2); }
.pd-note a { text-decoration: underline; text-underline-offset: 2px; }
.pd-box { border: 1px solid var(--ink); background: var(--white); padding: 26px 24px; }
.pd-box--warm { border: 0; background: var(--panel); }
.pd-sec { margin-top: 54px; padding-top: 46px; border-top: 1px solid var(--rule); }
/* Directly under the gallery hero, which already carries its own bottom
   padding; keep the rule, drop the doubled gap. */
.pd-sec--hero { margin-top: 0; padding-top: 34px; }
.pd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

/* The analysis row's widths, reversed: 380px + fluid up there, fluid + 380px
   here. Only the nutrition/feed row wants this - .pd-two is also the recalls
   row, which stays even halves. */
.pd-two--wide-left {
  grid-template-columns: minmax(0, 1fr) 380px;
  margin-top: 20px;
}

/* ---- Analysis row ---- */
.pd-split {
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
  gap: 20px; margin-top: 46px; align-items: start;
}
.pd-split__side { display: grid; gap: 20px; }

.pd-ga__title { font-family: var(--display); margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.pd-ga__sub { margin: 9px 0 0; font-size: 14px; color: var(--body); }
.pd-ga__rule { height: 4px; background: var(--ink); margin-top: 18px; }
.pd-ga__rows { margin: 0; }
.pd-ga__row {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--rule-lt);
}
.pd-ga__rows > .pd-ga__row:last-child { border-bottom: 0; }
.pd-ga__row dt { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.pd-ga__row dd { margin: 0; font-size: 15px; font-weight: 400; white-space: nowrap; }
.pd-ga__row--lead dd { font-size: 19px; letter-spacing: -.025em; }
.pd-ga__row--calc dt, .pd-ga__row--calc dd { color: var(--blue); }
.pd-ga__declhead {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  color: var(--muted); line-height: 1.5;
}
.pd-ga__salt { color: var(--blue); white-space: nowrap; }
.pd-decl { margin-top: 14px; }
.pd-decl p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--body-2); }
.pd-decl .itk-salt {
  background: var(--ink); color: var(--bg); padding: 1px 6px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .06em;
}

/* ---- Open Score (renders only when the constant is true) ---- */
.pd-score__head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding-bottom: 18px; border-bottom: 1px solid var(--ink);
}
.pd-score__head .pd-h2 { margin: 0; }
.pd-score__head .pd-kicker { margin-top: 6px; }
.pd-score__num { font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; text-align: right; }
.pd-score__num span {
  display: block; margin-top: 5px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .13em; font-weight: 500; color: var(--muted);
}
.pd-line {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px 74px;
  gap: 22px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--rule-lt);
}
.pd-line__title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.pd-line__why { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--body); }
.pd-line__track { height: 4px; background: var(--rule-lt); }
.pd-line__fill { height: 100%; }
.pd-line__pts { font-family: var(--mono); font-size: 14px; font-weight: 700; text-align: right; }
.pd-line__pts span { color: var(--muted); font-weight: 500; }
.pd-score__foot {
  margin-top: 18px; background: var(--panel); padding: 16px 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--body);
}

/* ---- Dry matter ---- */
.pd-dm { width: 100%; border-collapse: collapse; margin-top: 16px; }
.pd-dm th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; font-weight: 500;
  color: var(--muted); text-align: right; padding: 0 0 10px; border-bottom: 1px solid var(--rule);
}
.pd-dm th:first-child { text-align: left; }
.pd-dm td {
  font-family: var(--mono); font-size: 13px; text-align: right;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.pd-dm tbody tr:last-child td { border-bottom: 0; }
.pd-dm th:first-child, .pd-dm__name { width: 34%; }
.pd-dm th:nth-child(2), .pd-dm th:nth-child(3) { width: 16%; }
.pd-dm__name { text-align: left; font-weight: 600; letter-spacing: .06em; }
.pd-dm__fed { color: var(--muted); }
.pd-dm__dry { font-weight: 600; }
.pd-dm__read { color: var(--muted); }
.pd-dm__read.is-high { color: var(--amber); font-weight: 600; }

.pd-gauge__legend {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--muted);
}
.pd-gauge { position: relative; height: 7px; background: var(--white); border: 1px solid var(--rule); margin-top: 8px; }
.pd-gauge__fill { height: 100%; background: var(--blue); }
.pd-gauge__tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }

/* ---- Feeding ---- */
.pd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pd-field { margin-top: 16px; }
.pd-field label {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; color: var(--muted);
}
.pd-field input, .pd-field select {
  width: 100%; min-height: 44px; border: 1px solid var(--rule); background: var(--white);
  padding: 0 12px; font-family: var(--mono); font-size: 14px; color: var(--ink);
}
.pd-out { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.pd-out__box { border: 1px solid var(--rule); background: var(--white); padding: 16px 18px; }
.pd-out__box--blue { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.pd-out__box--blue .pd-kicker, .pd-out__box--blue .pd-out__unit { color: var(--on-blue-soft); }
.pd-out__num { margin-top: 8px; font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.pd-out__unit { margin-top: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .13em; color: var(--muted); }

/* ---- Ingredient wiki ---- */
.pd-sechead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.pd-wiki { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--rule); border-top: 0; }
.pd-wcard { padding: 16px; border-right: 1px solid var(--rule); color: inherit; }
.pd-wcard:last-child { border-right: 0; }
.pd-wcard:hover { text-decoration: none; color: inherit; background: var(--panel); }
/* The shot runs the full width of the card and sets its own height, so nothing
   is cropped and no frame has to be guessed. Negative margins cancel the card
   padding to take it edge to edge. */
.pd-wcard__img {
  margin: -16px -16px 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-image: repeating-linear-gradient(135deg, var(--panel-stripe-a) 0 8px, var(--panel-stripe-b) 8px 16px);
  font-family: var(--mono); font-size: 10px; letter-spacing: .11em; color: var(--muted-2);
}
.pd-wcard__img img { display: block; width: 100%; height: auto; }
/* No photo on file: there is no image to set the height, so the placeholder
   keeps a frame of its own to sit in. */
.pd-wcard__img:not(:has(img)) { aspect-ratio: 16 / 7; padding: 8px; }
.pd-wcard__body { margin-top: 14px; }
.pd-wcard__name { margin: 7px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pd-wcard:hover .pd-wcard__name { color: var(--blue); }
.pd-wcard__copy { margin: 9px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--body); }

/* ---- Benchmark ---- */
.pd-bench { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 44px; align-items: start; }
.pd-bench__copy { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.pd-bench__wrap { overflow-x: auto; }
.pd-btable { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); }
.pd-btable th {
  background: var(--ink); color: var(--bg); text-align: left; padding: 14px 16px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; font-weight: 500;
  white-space: nowrap;
}
.pd-btable th.is-self { background: var(--blue); color: var(--on-blue); }
.pd-btable td { font-family: var(--mono); font-size: 13px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.pd-btable tbody tr:nth-child(even) { background: var(--panel); }
.pd-btable tbody tr:last-child td { border-bottom: 0; }
.pd-btable td.is-self { color: var(--blue); font-weight: 600; }

/* ---- Recalls + siblings ---- */
.pd-recall {
  display: grid; grid-template-columns: 106px minmax(0, 1fr); gap: 16px;
  padding: 16px 0; border-top: 1px solid var(--rule); margin-top: 18px;
}
.pd-recall__date { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--muted); }
.pd-recall__reason {
  display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  font-weight: 600; color: var(--amber);
}
.pd-recall__reason:hover { color: var(--blue); text-decoration: none; }
.pd-recall__copy { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.pd-sibs { margin-top: 18px; }
.pd-sib {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--rule); color: inherit;
}
.pd-sib:hover { text-decoration: none; color: inherit; }
.pd-sib:hover .pd-sib__name { color: var(--blue); }
.pd-sib__name { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; }
.pd-sib__v { font-family: var(--mono); font-size: 14px; font-weight: 700; white-space: nowrap; }
.pd-sib__v--fig { color: var(--muted); font-weight: 500; }

.pd-honest {
  margin-top: 54px; padding-top: 24px; border-top: 1px solid var(--rule);
  max-width: var(--measure); font-size: 15px; line-height: 1.7; color: var(--body);
}

@media (max-width: 1100px) {
  .pd-split { grid-template-columns: 1fr; }
  /* Stacks with the analysis row above it. Held any narrower and the wide
     column shrinks to the fixed one's width, so the row reads as two equal
     boxes and the width relationship it is built on disappears. */
  .pd-two { grid-template-columns: 1fr; }
  .pd-bench { grid-template-columns: 1fr; gap: 26px; }
  .pd-line { grid-template-columns: minmax(0, 1fr) 120px 70px; gap: 16px; }
  /* Five across becomes unreadable well before the row runs out of width. */
  .pd-wiki { grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--rule); }
  .pd-wcard { border-bottom: 1px solid var(--rule); }
  .pd-wcard:nth-child(even) { border-right: 0; }
}
@media (max-width: 860px) {
  .pd-fields, .pd-out { grid-template-columns: 1fr; }
  .pd-wiki { grid-template-columns: 1fr; }
  .pd-wcard { border-right: 0; }
  .pd-line { grid-template-columns: minmax(0, 1fr) 70px; }
  .pd-line__track { display: none; }
}


/* ============================================================
   Product hero - gallery, composition, first five
   ------------------------------------------------------------
   Warmer than the dossier below it: the top of the page is where someone
   works out what the food is, so it leads with the bag and one chart, and
   leaves the tables to the sections underneath.
   ============================================================ */
/* The composition ramp (--n-*) and the warm callout (--warm, --warm-line)
   used to be declared here. They now live in the single :root block at the
   top of the file, so a theme file has one place to override. */

.ph {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: 44px; align-items: start; padding-bottom: 48px;
}

/* ---- Gallery ---- */
.ph-shot {
  border: 1px solid var(--rule); background: var(--white);
  aspect-ratio: 1 / 1; overflow: hidden; padding: 22px;
  display: flex; align-items: center; justify-content: center;
}
.ph-shot img { width: 100%; height: 100%; object-fit: contain; }
.ph-shot__ph { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; color: var(--muted); }
.ph-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.ph-thumb {
  width: 62px; height: 62px; padding: 5px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--white);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ph-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ph-thumb:hover { border-color: var(--muted); }
.ph-thumb.is-on { border-color: var(--ink); border-width: var(--border-w); padding: 4px; }

/* ---- Identity ---- */
.ph-brand { display: flex; align-items: center; gap: 14px; }
.ph-brand__logo {
  width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.ph-brand__logo img { width: 100%; height: 100%; object-fit: contain; }
.ph-brand__logo--mono { font-size: 18px; font-weight: 800; color: var(--muted); }
.ph-brand__name { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--muted); }

.ph-title {
  font-family: var(--display);
  margin: 18px 0 0; font-size: clamp(26px, 3.1vw, 38px); font-weight: var(--display-weight);
  letter-spacing: -.032em; line-height: 1.12;
}

/* ---- Composition bar ---- */
.ph-comp { margin: 24px 0 0; }
.ph-bar {
  display: flex; height: 30px; overflow: hidden;
  background: var(--panel);
  /* A 2px surface gap between segments, so touching fills stay separable
     even where two neighbours are close in tone. */
  gap: 2px;
}
.ph-bar__seg {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--on-chart);
}
.ph-seg--protein  { background: var(--n-protein); }
.ph-seg--fat      { background: var(--n-fat); color: var(--ink); }
.ph-seg--fiber    { background: var(--n-fiber); }
.ph-seg--moisture { background: var(--n-moisture); }
.ph-seg--ash      { background: var(--n-assumed); color: var(--ink); }
/* The derived remainder is hatched, not filled: it is the one figure on the
   bar that no manufacturer prints. */
.ph-seg--starch {
  color: var(--muted-2);
  background-color: var(--n-derived);
  background-image: repeating-linear-gradient(135deg, var(--derived-stripe) 0 5px, var(--n-derived) 5px 10px);
}
.ph-legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0;
  list-style: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--muted-2);
}
.ph-legend li { display: flex; align-items: center; gap: 7px; }
/* The ring keeps the two pale swatches - assumed ash and derived starch -
   perceivable against the page, which is otherwise almost their own colour. */
.ph-legend__dot {
  width: 10px; height: 10px; border-radius: 0; flex: 0 0 10px;
  box-shadow: inset 0 0 0 1px var(--swatch-ring);
}

/* ---- Reading ---- */
/* The summary sentence under the title: plain prose, measure-capped, so it
   reads as an opening line rather than another figure. */
.ph-lede {
  margin: 14px 0 0; max-width: var(--measure);
  font-size: 16.5px; line-height: 1.55; color: var(--body); text-wrap: pretty;
}

.ph-read {
  margin-top: 26px; padding: 18px 22px; background: var(--warm);
  border-left: 3px solid var(--n-protein);
  font-size: 16px; line-height: 1.6; color: var(--body-2);
}
.ph-read b { color: var(--ink); font-weight: 700; }

/* ---- Stat row ---- */
.ph-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px;
  border: 1px solid var(--rule); overflow: hidden;
}
.ph-stat { padding: 16px 20px; border-left: 1px solid var(--rule); }
.ph-stat:first-child { border-left: 0; }
.ph-stat__k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.ph-stat__v { margin-top: 8px; font-family: var(--mono); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }

.ph-compare {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 22px;
  padding: 0 24px; border: 1px solid var(--rule);
  background: var(--white); color: var(--ink); font-size: 15.5px; font-weight: 600;
}
.ph-compare:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

@media (max-width: 1100px) {
  .ph { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}
@media (max-width: 860px) {
  .ph { grid-template-columns: 1fr; }
  .ph-gallery { order: -1; }
  .ph-shot { aspect-ratio: 4 / 3; }
  .ph-stats { grid-template-columns: 1fr; }
  .ph-stat { border-left: 0; border-top: 1px solid var(--rule); }
  .ph-stat:first-child { border-top: 0; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1180px) {
  .k-grid4 { grid-template-columns: repeat(2, 1fr); }
  .k-trio  { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  /* Side by side, the nutrition copy and the food titles both run out of
     measure well before the panels run out of height. */
  .k-panels { grid-template-columns: 1fr; }
  .k-panel { padding: 30px; }
  .k-panel__shot { min-height: 190px; }
}
@media (max-width: 1024px) {
  .k-split, .k-split--narrow { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .k-nav { display: none; }
  .k-section, .k-section--tight, .k-hero, .k-band { padding-left: 20px; padding-right: 20px; }
  .k-stats { grid-template-columns: repeat(2, 1fr); }
  .k-stat { border-bottom: 1px solid var(--rule); }
  .k-cols-3, .k-cols-4 { grid-template-columns: 1fr; }
  .k-table__head { display: none; }
  .k-table__row { gap: 6px; }
  .k-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .k-grid4 { grid-template-columns: 1fr; }
  .k-search { flex-wrap: wrap; }
  .k-footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Product page - warmer, softer treatment
   ------------------------------------------------------------
   The concept renders a product as a lab dossier. This site is a guide for
   pet parents, so the product page keeps the real figures but softens the
   edges: rounded panels, plain-language verdicts, explanations beside every
   number rather than a legend at the bottom.
   ============================================================ */
.p-wrap { padding: 34px 48px 60px; max-width: 1180px; }

.p-crumbs {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 22px;
}
.p-crumbs a { color: var(--muted); }
.p-crumbs a:hover { color: var(--blue); }

.p-head { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 44px; align-items: start; }
.p-brand {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .15em; color: var(--blue); text-transform: uppercase;
}
.p-title {
  font-family: var(--display);
  margin: 12px 0 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08;
  font-weight: var(--display-weight); letter-spacing: -.03em; max-width: 20ch;
}
.p-sub { margin: 14px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--body); max-width: 56ch; }

/* Verdict + score */
.p-verdict {
  display: flex; align-items: center; gap: 18px;
  margin-top: 24px; padding: 18px 20px;
  background: var(--white); border: 1px solid var(--rule); border-radius: 0;
}
.p-dial {
  --pct: 0;
  width: 82px; height: 82px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--dial, var(--blue)) calc(var(--pct) * 1%), var(--dial-track) 0);
  display: grid; place-items: center;
}
.p-dial__inner {
  width: 64px; height: 64px; border-radius: 50%; background: var(--white);
  display: grid; place-items: center; line-height: 1;
}
.p-dial__num { font-size: 25px; font-weight: 800; letter-spacing: -.03em; }
.p-dial__den { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--muted); margin-top: 2px; }
.p-verdict__title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.p-verdict__copy { margin: 5px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--body); }

/* Quick facts */
.p-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px;
}
.p-fact {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 0; padding: 14px 16px;
}
.p-fact__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; color: var(--muted); text-transform: uppercase; }
.p-fact__v { font-size: 20px; font-weight: 700; margin-top: 6px; letter-spacing: -.02em; }
.p-fact__n { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.p-shot {
  border: 1px solid var(--rule); border-radius: 0; background: var(--white);
  padding: 18px; display: grid; place-items: center; min-height: 300px;
}
.p-shot img { max-height: 300px; width: auto; object-fit: contain; }
.p-shot__ph {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; color: var(--muted-2);
  text-align: center;
}

/* Generic soft section */
.p-sec { margin-top: 46px; }
.p-sec__head { margin-bottom: 18px; }
.p-sec__title { font-family: var(--display); margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--display-weight); letter-spacing: -.03em; }
.p-sec__note { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 68ch; }

.p-panel {
  background: var(--white); border: 1px solid var(--rule); border-radius: 0; padding: 24px 26px;
}
.p-panel--warm { background: var(--panel); }

/* Ingredients */
.p-ings { display: flex; flex-wrap: wrap; gap: 10px; }
.p-ing {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); border-radius: 0; padding: 9px 16px 9px 11px;
  background: var(--white); font-size: 15.5px; font-weight: 500; color: inherit;
}
.p-ing:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.p-ing__n {
  width: 21px; height: 21px; border-radius: 50%; flex: none;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 10.5px;
  display: grid; place-items: center;
}
.p-ing--protein .p-ing__n { background: var(--green); }
.p-note {
  margin-top: 16px; border-left: 3px solid var(--blue);
  background: var(--panel); border-radius: 0; padding: 14px 18px;
  font-size: 15.5px; line-height: 1.6; color: var(--body-2);
}

/* Analysis rows */
.p-rows { display: flex; flex-direction: column; }
.p-row {
  display: grid; grid-template-columns: minmax(0,1.6fr) 90px 90px minmax(0,1.1fr);
  gap: 14px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--rule-lt);
}
.p-row:last-child { border-bottom: 0; }
.p-row__h {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--ink);
  padding-bottom: 9px;
}
.p-row__name { font-size: 16.5px; font-weight: 600; }
.p-row__num  { font-size: 16.5px; font-variant-numeric: tabular-nums; }
.p-row__num--lead { font-weight: 700; }
.p-row__say  { font-size: 14.5px; color: var(--body); line-height: 1.45; }

/* Score breakdown */
.p-line { padding: 18px 0; border-bottom: 1px solid var(--rule-lt); }
.p-line:last-child { border-bottom: 0; }
.p-line__top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.p-line__title { font-size: 17.5px; font-weight: 700; letter-spacing: -.015em; }
.p-line__pts { font-family: var(--mono); font-size: 14px; font-weight: 600; white-space: nowrap; }
.p-line__why { margin: 8px 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--body); max-width: 74ch; }
.p-track { height: 6px; background: var(--rule-lt); border-radius: 0; overflow: hidden; }
.p-track__fill { height: 6px; border-radius: 0; background: var(--blue); }

/* Recall banner */
.p-recall { display: flex; gap: 16px; align-items: flex-start; border-radius: 0; padding: 20px 22px; }
.p-recall--clear { background: var(--ok-bg); border: 1px solid var(--ok-line); }
.p-recall--warn  { background: var(--warn-bg); border: 1px solid var(--warn-line); }
.p-recall__icon { font-size: 22px; line-height: 1; flex: none; }
.p-recall__title { font-size: 18px; font-weight: 700; }
.p-recall__copy { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--body-2); }

/* Feeding calculator */
.p-feed { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 28px; align-items: start; }
.p-field { margin-bottom: 16px; }
.p-field label {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .13em; color: var(--muted); text-transform: uppercase; margin-bottom: 7px;
}
.p-field input, .p-field select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--white); font-size: 15.5px;
}
.p-field input:focus, .p-field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.p-result {
  background: var(--ink); color: var(--bg); border-radius: 0; padding: 24px; text-align: center;
}
.p-result__num { font-size: 40px; font-weight: 800; letter-spacing: -.04em; }
.p-result__unit { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; color: var(--dim); margin-top: 6px; }
.p-result__cups { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--body-2); font-size: 15px; color: var(--dim); }
.p-result__cups b { color: var(--bg); font-size: 21px; }

/* Similar */
.p-sim { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Closing honesty note */
.p-honest {
  margin-top: 40px; border-radius: 0; background: var(--panel);
  border: 1px solid var(--rule); padding: 22px 24px;
  font-size: 15.5px; line-height: 1.65; color: var(--body-2);
}

@media (max-width: 1100px) {
  .p-head { grid-template-columns: 1fr; }
  .p-facts { grid-template-columns: repeat(2, 1fr); }
  .p-feed { grid-template-columns: 1fr; }
  .p-sim { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .p-wrap { padding: 24px 20px 44px; }
  .p-row { grid-template-columns: 1fr 74px 74px; }
  .p-row__say { grid-column: 1 / -1; }
  .p-sim { grid-template-columns: 1fr; }
}

/* ---- Product page: sections added to match the concept ---- */
.p-classchip {
  display: inline-block; background: var(--rule-lt); border-radius: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; padding: 6px 12px; margin-bottom: 14px; color: var(--body-2);
}
.p-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.p-btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--btn-radius);
  border: 1px solid var(--ink); font-size: 15px; font-weight: 600; color: var(--ink);
}
.p-btn:hover { text-decoration: none; background: var(--rule-lt); color: var(--ink); }
.p-btn--primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.p-btn--primary:hover { background: var(--blue-d); border-color: var(--blue-d); color: var(--on-blue); }

.p-side {
  margin-top: 14px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--white); padding: 14px 16px;
}
.p-side__k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.p-side__v { font-size: 15.5px; font-weight: 600; margin-top: 6px; line-height: 1.45; }

.p-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.p-sec__kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--blue); text-transform: uppercase; margin-bottom: 16px;
}
.p-panel__foot {
  margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--rule-lt);
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}

/* Starch gauge against the archive average */
.p-gauge__bar {
  position: relative; height: 12px; border-radius: 0;
  background: var(--white); border: 1px solid var(--rule); overflow: visible;
}
.p-gauge__fill { height: 100%; border-radius: 0; background: var(--blue); }
.p-gauge__tick {
  position: absolute; top: -5px; width: 2px; height: 20px; background: var(--ink);
}
.p-gauge__legend {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--muted);
}
.p-gauge__legend b { color: var(--ink); font-size: 13px; }
.p-gauge__say { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }

/* Full declaration + salt divider */
.p-decl p { margin: 0; font-size: 16px; line-height: 1.85; color: var(--body-2); }
.p-decl .itk-salt {
  background: var(--ink); color: var(--bg); padding: 2px 7px; border-radius: 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em;
}
.p-decl__meta {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-lt);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--muted);
}

/* Ingredient wiki cards */
.p-wiki { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.p-wcard {
  border: 1px solid var(--rule); border-radius: 0; background: var(--white);
  padding: 16px; display: flex; flex-direction: column; color: inherit;
}
.p-wcard:hover { text-decoration: none; color: inherit; border-color: var(--blue); }
/* The ingredient illustrations are square artwork on a flat background.
   A fixed height plus object-fit:cover cropped roughly half of each one away,
   so the box follows the artwork's own ratio and the image is contained. */
.p-wcard__img {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--panel);
  display: grid;
  place-items: center;
  padding: 8px;
  margin-bottom: 14px;
}
.p-wcard__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* drops the white plate on the panel tint */
}
.p-wcard__ph { font-size: 30px; font-weight: 800; color: var(--dim); }
.p-wcard__tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; color: var(--muted);
}
.p-wcard--protein .p-wcard__tag { color: var(--green); }
.p-wcard__name { margin: 7px 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.p-wcard__copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }

/* Benchmark table */
.p-bench { width: 100%; border-collapse: collapse; min-width: 560px; }
.p-bench th, .p-bench td { padding: 13px 18px; text-align: left; }
.p-bench thead th {
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .13em;
}
.p-bench thead th.is-self { background: var(--blue); }
.p-bench tbody tr { border-bottom: 1px solid var(--rule-lt); }
.p-bench tbody tr:last-child { border-bottom: 0; }
.p-bench tbody tr:nth-child(even) { background: var(--panel); }
.p-bench td { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.p-bench td:first-child { color: var(--body); }
.p-bench td.is-self { font-weight: 700; color: var(--blue); }

/* Siblings list */
.p-sib {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--rule); color: inherit;
}
.p-sib:last-child { border-bottom: 0; }
.p-sib:hover { text-decoration: none; color: var(--blue); }
.p-sib__name { font-size: 15.5px; font-weight: 500; line-height: 1.35; }
.p-sib__score { font-size: 19px; font-weight: 700; flex: none; }

@media (max-width: 1100px) {
  .p-wiki { grid-template-columns: repeat(3, 1fr); }
  .p-two  { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .p-wiki { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Reviews screen
   ============================================================ */
.r-wrap { padding: 28px 40px 60px; }

.r-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: var(--blue); color: var(--on-blue); padding: 14px 20px; border-radius: 0;
  flex-wrap: wrap;
}
.r-bar__q { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.r-bar__n { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; opacity: .9; }

.r-grid { display: grid; grid-template-columns: 278px minmax(0, 1fr); gap: 28px; margin-top: 24px; align-items: start; }

/* Filter rail */
.r-filters {
  border: 1px solid var(--rule); border-radius: 0; background: var(--white);
  padding: 22px; position: sticky; top: calc(var(--header-h) + 14px);
}
.r-filters__head {
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  padding-bottom: 12px; border-bottom: 1px solid var(--ink); margin-bottom: 18px;
}
.r-field { margin-bottom: 18px; }
.r-field label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  color: var(--muted); text-transform: uppercase; margin-bottom: 7px;
}
.r-field input[type="search"], .r-field select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--white); font-size: 15px;
}
.r-field input[type="range"] { width: 100%; accent-color: var(--blue); }
.r-field input:focus, .r-field select:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.r-range__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.r-range__top label { margin-bottom: 0; }
.r-range__top output { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.r-range__scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted-2); margin-top: 4px;
}
.r-check { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; cursor: pointer; }
.r-check input { margin-top: 2px; accent-color: var(--blue); }

.r-apply {
  width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: var(--btn-radius);
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer;
}
.r-apply:hover { background: var(--ink-hi); }
.r-clear {
  display: block; text-align: center; margin-top: 10px;
  font-size: 14px; color: var(--muted);
}
.r-note {
  margin-top: 20px; border-left: 3px solid var(--blue); background: var(--panel);
  border-radius: 0; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--body-2);
}

/* Result cards */
.r-list { display: flex; flex-direction: column; gap: 16px; }
.r-card {
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid var(--rule); border-radius: 0; background: var(--white); overflow: hidden;
}
.r-card:hover { border-color: var(--ink); }
.r-card__shot {
  background: var(--panel); display: grid; place-items: center; padding: 16px; min-height: 190px;
}
.r-card__shot img { max-height: 170px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.r-card__ph { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; color: var(--muted-2); }
.r-card__body { padding: 20px 22px; display: flex; flex-direction: column; }
.r-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.r-card__brand {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; color: var(--blue); text-transform: uppercase;
}
.r-card__name { margin: 7px 0 0; font-size: 21px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; max-width: 40ch; }
.r-card__name a { color: inherit; }
.r-card__name a:hover { color: var(--blue); text-decoration: none; }
.r-card__score { text-align: right; flex: none; }
.r-card__num { font-size: 32px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.r-card__den { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); margin-top: 4px; }
.r-card__metrics {
  display: grid; grid-template-columns: repeat(4, 1fr) 132px; gap: 16px; align-items: end;
  border-top: 1px solid var(--rule-lt); margin-top: 18px; padding-top: 14px;
}
.r-card__metrics b { display: block; font-size: 16.5px; font-weight: 700; margin-top: 5px; }
.r-card__cta {
  background: var(--ink); color: var(--bg); text-align: center;
  padding: 11px 10px; border-radius: var(--btn-radius); font-size: 14px; font-weight: 600;
}
.r-card__cta:hover { background: var(--blue); color: var(--on-blue); text-decoration: none; }

.r-empty {
  border: 1px solid var(--rule); border-radius: 0; background: var(--white);
  padding: 48px 32px; text-align: center;
}
.r-empty h2 { margin: 0 0 8px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.r-empty p { margin: 0 0 20px; color: var(--body); font-size: 16px; }

.r-pager {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--muted);
}
.r-pager a { color: var(--blue); }

@media (max-width: 1024px) {
  .r-grid { grid-template-columns: 1fr; }
  .r-filters { position: static; }
}
@media (max-width: 760px) {
  .r-wrap { padding: 20px 18px 44px; }
  .r-card { grid-template-columns: 1fr; }
  .r-card__metrics { grid-template-columns: repeat(2, 1fr); }
  .r-card__cta { grid-column: 1 / -1; }
}

/* ============================================================
   Recalls screen
   ============================================================ */
.c-wrap { padding: 34px 48px 60px; max-width: 1180px; }
.c-wrap--single { max-width: 880px; }
.c-head { max-width: 62ch; }
.c-title {
  font-family: var(--display);
  margin: 14px 0 0; font-size: clamp(34px, 4.8vw, 60px); line-height: .96;
  font-weight: var(--display-weight); letter-spacing: -.04em;
}
.c-title--single { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.1; margin-top: 12px; }
.c-lede { margin: 18px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--body); }

.c-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 32px;
}
.c-stat {
  border: 1px solid var(--rule); border-radius: 0; background: var(--white); padding: 18px 20px;
}
.c-stat--blue { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.c-stat__v { font-size: 30px; font-weight: 800; letter-spacing: -.035em; }
.c-stat__l { font-size: 13.5px; margin-top: 6px; color: var(--body); }
.c-stat--blue .c-stat__l { color: var(--on-blue-3); }

.c-table {
  margin-top: 26px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--white); overflow: hidden;
}
.c-table__head, .c-row {
  display: grid; grid-template-columns: 130px 1.1fr 1.05fr 1.7fr; gap: 16px;
  padding: 14px 20px; align-items: baseline;
}
.c-table__head {
  background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
}
.c-row { border-top: 1px solid var(--rule-lt); }
.c-row:nth-child(even) { background: var(--row-alt); }
.c-row__date { font-family: var(--mono); font-size: 13px; color: var(--body); white-space: nowrap; }
.c-row__brand { font-size: 16px; font-weight: 600; }
.c-row__brand a { color: inherit; }
.c-row__brand a:hover { color: var(--blue); }
.c-row__why {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  line-height: 1.45;
}
.c-row__detail { font-size: 14.5px; line-height: 1.5; color: var(--body); }

.c-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.c-signup { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.c-signup input {
  flex: 1; min-width: 180px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 0; background: var(--white); font-size: 15px;
}
.c-signup button {
  padding: 12px 22px; border: 0; border-radius: var(--btn-radius);
  background: var(--blue); color: var(--on-blue); font-size: 15px; font-weight: 600; cursor: pointer;
}
.c-signup button:hover { background: var(--blue-d); }
.c-rule {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px;
  border-top: 1px solid var(--rule-lt); padding: 13px 0;
}
.c-rule__tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; color: var(--blue); }
.c-rule__copy { font-size: 15px; line-height: 1.55; color: var(--body-2); }

/* Single recall */
.c-single__tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .13em; border: 1px solid currentColor; border-radius: 0; padding: 6px 12px;
}
.c-meta {
  display: flex; flex-wrap: wrap; gap: 32px; margin-top: 22px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 16px 0;
}
.c-meta b { display: block; font-size: 16px; margin-top: 5px; }
.c-body { margin-top: 26px; font-size: 17px; line-height: 1.7; color: var(--body-2); }
.c-body p { margin: 0 0 16px; }
.c-body a { text-decoration: underline; }

@media (max-width: 1024px) {
  .c-stats { grid-template-columns: repeat(2, 1fr); }
  .c-two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .c-wrap { padding: 22px 18px 44px; }
  .c-table__head { display: none; }
  .c-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
  .c-row__why { order: -1; }
}
.c-row__product { display: block; font-size: 13.5px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.r-card__metrics .k-label { white-space: nowrap; }

/* ---- Ingredient wiki + search ---- */
.w-search { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
.w-search input {
  flex: 1; min-width: 220px; max-width: 420px; padding: 12px 16px;
  border: 1px solid var(--rule); border-radius: 0; background: var(--white); font-size: 15.5px;
}
.w-search button {
  padding: 12px 24px; border: 0; border-radius: 0;
  background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 600; cursor: pointer;
}
.w-search button:hover { background: var(--blue); }
.w-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 28px; }

.i-head { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 36px; align-items: start; margin-top: 8px; }
.i-shot {
  border: 1px solid var(--rule); border-radius: 0; background: var(--panel);
  padding: 16px; aspect-ratio: 1 / 1; display: grid; place-items: center;
}
.i-shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.i-alias { margin: 10px 0 0; font-size: 15.5px; color: var(--muted); }
.i-benefits { margin: 0; padding-left: 20px; }
.i-benefits li { font-size: 16px; line-height: 1.6; color: var(--body-2); margin-bottom: 8px; }

@media (max-width: 1200px) { .w-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .w-grid { grid-template-columns: repeat(3, 1fr); } .i-head { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .w-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Craft layer
   ------------------------------------------------------------
   Focus, rhythm, measure and typographic restraint. The concept shouts in
   uppercase everywhere; at 135 all-caps runs a page that stops being a voice
   and becomes noise, so caps are now reserved for mono data labels and
   kickers, and headings carry the weight instead.
   ============================================================ */

/* Focus: one visible ring on everything interactive, never removed. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 0;
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Content container and vertical rhythm */
.k-hero, .k-section, .k-section--tight, .k-band,
.p-wrap, .r-wrap, .c-wrap, .pd, .cmp {
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.k-hero    { padding-top: var(--s6); padding-bottom: var(--s5); }
.k-section { padding-top: var(--s6); padding-bottom: var(--s6); }
.k-section--tight { padding-top: var(--s5); padding-bottom: var(--s5); }
.k-band    { padding-top: var(--s6); padding-bottom: var(--s6); }
.p-wrap, .r-wrap, .c-wrap, .pd, .cmp { max-width: var(--shell); margin-inline: auto; }

/* Headings: keep the weight and tight tracking, lose the shouting. */
.k-h1, .k-h2, .k-h3, .p-sec__title, .c-title, .k-band h2, .k-mini h4 {
  text-transform: var(--heading-case);
}
.k-h1 { font-size: clamp(38px, 6vw, 76px); line-height: .96; letter-spacing: var(--h1-tracking); }
/* The masthead is sentence case: requested 2026-08-15. Do not reinstate
   text-transform:uppercase on .k-hero .k-h1. */
/* The strap under the sign-up heading keeps its caps - it reads as a label,
   not a sentence. The heading itself now follows the site-wide title case. */
.k-band__sub { text-transform: uppercase; }
.k-h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.04; letter-spacing: var(--h2-tracking); }
.k-h3 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.12; letter-spacing: var(--h3-tracking); }
.k-lede, .k-hero__lede, .p-sec__note, .c-lede { max-width: var(--measure); }

/* Kickers stay uppercase, but quieter and better spaced. */
.k-kicker { font-size: 11.5px; letter-spacing: var(--kicker-tracking-2); font-weight: 600; }

/* Links inside prose should look like links. */
.c-body a, .p-recall__copy a, .p-honest a { text-decoration: underline; text-underline-offset: 2px; }

/* Every control clears a 44px target. */
.p-btn, .r-apply, .c-signup button, .w-search button,
.r-card__cta, .p-ing, .k-chip, .p-sib, .k-morelink,
.cmp-add, .cmp-pick, .cmp-act, .cmp-add-slot, .cmp-pgo,
.cmp-tray__go, .cmp-tray__clear, .cmp-open {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* .p-sib is a full-width row, not a control: the inline-flex above shrinks it
   to its contents and lets two rows pack onto one line. */
.p-sib { display: flex; justify-content: space-between; }
.k-footer__list a { display: inline-flex; align-items: center; min-height: 34px; }

/* Cards lift rather than jump. The lift is carried by the border going to full
   ink rather than by a drop shadow - depth is stated, not simulated. */
.k-food, .r-card, .p-wcard, .k-mini {
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.k-food:hover, .r-card:hover, .p-wcard:hover, .k-mini:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}

/* Bag shots read better on white than on a checkerboard. */
.k-food__shot, .r-card__shot { background: var(--white); background-image: none; }
.k-food__shot { border-bottom: 1px solid var(--rule-lt); }

/* Footer contrast */
.k-band__sub { color: var(--band-sub); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 900px) {
  .k-nav, .k-hsearch, .k-btn-dark { display: none; }
  .k-burger { display: inline-flex; }
  .k-header__aux { margin-left: auto; }
}
@media (min-width: 901px) {
  .k-mnav { display: none !important; }
}

/* Shared container: hero and both halves of the belt align to the same grid. */
.k-stats { border-inline: 1px solid var(--rule); }

/* Category chips: real filters, with the size of each set shown up front. */
.k-chip {
  gap: 8px; border-radius: 0; padding: 0 16px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 600;
  letter-spacing: -.01em; text-transform: none;
  border-color: var(--rule); background: var(--white);
}
.k-chip:hover { border-color: var(--ink); text-decoration: none; }
.k-chip__n {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--panel); border-radius: 0; padding: 3px 8px;
}
.k-chip--all { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.k-chip--all:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.k-legend { color: var(--body); }

/* ---- One container, applied to the sections themselves ----
   Hero and sections previously disagreed (140px vs 56px left edge) because
   `.k-section > *` lands on grid columns instead of centring the block. */
.k-hero,
.k-section,
.k-section--tight,
.k-stats,
.k-archive { max-width: var(--shell); margin-inline: auto; }

/* Full-bleed bands keep their background edge to edge, content stays aligned. */
.k-band > * { max-width: var(--shell); margin-inline: auto; }

/* A search field 1320px wide is a target, not a control. The band's sign-up
   field had the same problem: the full-bleed `.k-band > *` rule above outranks
   its own max-width, so restore it here where it can win. */
.k-search { max-width: 680px; }
.k-band > .k-band__form { max-width: 470px; }

/* Stat band: align to the container, drop the side borders that fought the belt. */
.k-stats { border-inline: 0; border-top: 1px solid var(--ink); }
.k-stat { padding: var(--s3) var(--s3); }
.k-stat:first-child { padding-left: 0; }
/* ...except when the first tile is the blue one, where the fill runs to the
   container edge and the figure inside still needs its gutter. */
.k-stat--blue:first-child { padding-left: var(--s3); }

/* ---- Touch targets ----
   Everything a finger has to hit clears 44px. Previously 34 of 49 controls
   on the home screen were under that, including the hero search button. */
.k-search { min-height: 56px; align-items: stretch; }
.k-search__input { min-height: 44px; }
.k-search__submit { min-height: 44px; padding-inline: clamp(20px, 6vw, 34px); }
.k-brand { min-height: 44px; align-items: center; }
.k-td-brand a { display: inline-flex; align-items: center; min-height: 44px; }
.k-band__form { min-height: 56px; }
.k-band__form input { min-height: 44px; }
.k-band__form button { min-width: 44px; min-height: 44px; }
.c-signup input, .c-signup button, .w-search input, .w-search button { min-height: 48px; }

@media (max-width: 900px) {
  .k-footer__list a { min-height: 44px; }
  .k-footer__list { gap: 2px; }
  /* Stat band reads as two rows rather than four cramped columns. */
  .k-stats { grid-template-columns: 1fr 1fr; }
  .k-stat:first-child { padding-left: var(--s3); }
  .k-hero { padding-top: var(--s5); }

  /* The section head carries a lede as well as a heading, so the nowrap
     "all new releases" link has nothing left to sit beside. Stack it. */
  .k-new__head { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* Archive log stacks: side by side the note truncates to nothing. */
  .k-archive { flex-wrap: wrap; }
  .k-archive__head,
  .k-archive__item,
  .k-archive__more { flex: 1 1 100%; border-left: 0; border-top: 1px solid var(--rule); }
  .k-archive__head { border-top: 0; }
  .k-archive__note { white-space: normal; }
}
@media (max-width: 560px) {
  .k-search { flex-wrap: nowrap; }
  .k-search__icon { display: none; }
  .k-chips { gap: 8px; }
  .k-chip { font-size: 14px; padding: 0 14px; }
}
/* The reviews page needed a real h1; keep it visually as the summary bar. */
h1.r-bar__q { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }

/* Reviews filters as a disclosure: full panel on desktop, collapsed on phones
   so the first result is reachable without scrolling past every control. */
.r-disc__sum {
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 4px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
}
.r-disc__sum::-webkit-details-marker { display: none; }
.r-disc__sum::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease);
}
.r-disc[open] .r-disc__sum::after { transform: rotate(-135deg) translateY(-2px); }
.r-disc__sum em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  background: var(--blue); color: var(--on-blue); border-radius: 0; padding: 4px 10px;
}

@media (max-width: 1024px) {
  .r-disc__sum { display: flex; }
  .r-disc[open] .r-filters__head { display: none; }
  .r-filters { padding: 14px 18px; }
}

/* Remaining touch targets inside the filter panel and pager. */
.r-field input[type="search"], .r-field select { min-height: 48px; }
.r-field input[type="range"] { min-height: 44px; }
.r-check { min-height: 44px; align-items: center; }
.r-check input { width: 22px; height: 22px; }
.r-pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

/* ============================================================
   Open Score hidden (ITK_V4_SHOW_SCORE = false)
   Two blocks lose a child when the score comes off. These rules
   keep them looking deliberate. Delete this whole section when
   the score is switched back on.
   ============================================================ */

/* The verdict box loses its dial, so it gains a coloured edge
   instead of sitting as an unmarked slab. */
.p-verdict--nodial {
  gap: 0;
  border-left: 4px solid var(--blue);
  padding-left: 18px;
}

/* Sibling and ingredient chips show protein instead of a score,
   so they read as a figure, not a grade. */
.p-sib__score--plain {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}

/* ============================================================
   JUST RELEASED: full-bleed background, aligned content
   ------------------------------------------------------------
   The colour runs edge to edge, so .k-new takes no max-width and
   carries the dark fill itself. The content column inside it is
   shell-minus-gutters, which is exactly what the padded sections
   above resolve to, so the heading and the cards land on the same
   left and right edge as the featured grid at every viewport
   width. Getting the max-width wrong here is what previously made
   this row 105px wider than the grid above it.
   Last block in the file so nothing downstream can undo it.
   ============================================================ */
.k-new {
  max-width: none;
  margin-inline: 0;
  background: var(--dark-bg);
  color: var(--bg);
  padding: var(--s6) var(--gutter);
}
.k-new__inner {
  max-width: calc(var(--shell) - var(--gutter) * 2);
  margin-inline: auto;
  background: none;
  padding: 0;
}

/* ============================================================
   Casing switch
   ------------------------------------------------------------
   Titles ship in title case. The floating button adds .is-caps to <html>,
   which puts them back in caps, and the choice is remembered in localStorage.

   It is a transform, not a second set of strings: the markup keeps one casing
   so the DOM, the page <title>, feeds and search results never disagree with
   each other, and nothing here has to be maintained twice.

   Bottom LEFT deliberately - reCAPTCHA parks its badge bottom right.
   ============================================================ */
.caps-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  /* Floats over content, so it still needs to separate from the page - but as a
     hard offset block rather than a blurred halo. */
  box-shadow: 4px 4px 0 var(--ink);
}
.caps-toggle:hover { background: var(--ink); color: var(--bg); }
.caps-toggle__aa {
  font-family: var(--sans); font-size: 14px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1;
}
/* Filled while a non-baseline mode is active, so the control reads as "doing
   something" at a glance. Title case is the plain markup, so it stays hollow. */
.case-caps .caps-toggle,
.case-custom .caps-toggle { background: var(--ink); color: var(--bg); }
.case-caps .caps-toggle:hover,
.case-custom .caps-toggle:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }

/* The caps state. Selectors are the exact set that carries title case in the
   markup, so the two modes stay mirror images of each other. */
.is-caps .k-h1,
.is-caps .k-h2,
.is-caps .k-h3,
.is-caps .c-title,
.is-caps .p-sec__title,
.is-caps .k-band h2,
.is-caps .k-mini h4,
.is-caps .k-panel__title,
.is-caps .k-panel__kicker,
.is-caps .ph-title,
.is-caps .pd-h2,
.is-caps .pd-ga__title,
.is-caps .pd-wcard__name,
.is-caps .k-food__name,
.is-caps .k-viewed__name,
.is-caps .pd-sib__name,
.is-caps .cmp-h1,
.is-caps .cmp-h2,
.is-caps .cmp-col__name,
.is-caps .cmp-rail__t,
.is-caps .k-archive__title { text-transform: uppercase; }

/* Controls follow the titles. */
.is-caps .pd-btn,
.is-caps .ph-compare,
.is-caps .k-panel__cta,
.is-caps .k-pill,
.is-caps .cmp-add,
.is-caps .cmp-pick,
.is-caps .cmp-act,
.is-caps .cmp-tray__go,
.is-caps .cmp-add-slot,
.is-caps .k-chip { text-transform: uppercase; }

/* ------------------------------------------------------------
   Custom mode - the intended default.

   Title case is the baseline; individual strings earn an exception by
   carrying data-case in the markup. That keeps the decision next to the
   string it applies to instead of in a list over here that drifts out of
   sync with the templates, and it stays a transform, so the DOM text, the
   page <title> and feeds all still agree.

   To add an exception: put data-case="upper" on the element. Nothing else.

   The rules are scoped to .case-custom, so in Title case and All caps the
   marks are simply inert and the global rule wins - a marked string is never
   stuck in one case.
   ------------------------------------------------------------ */
.case-custom [data-case="upper"] { text-transform: uppercase; }
.case-custom [data-case="title"] { text-transform: none; }

/* ============================================================
   Palette switch
   ------------------------------------------------------------
   Sits directly above the casing toggle in the same bottom-left
   stack - both are 44px tall with a 10px gap, so neither can
   ever cover the other, at any width, and both stay clear of the
   reCAPTCHA badge bottom right.

   Built from the same parts as .caps-toggle: mono label, hard
   1px ink border, 4px offset block instead of a blurred shadow.

   The three swatch dots are chrome for this control, not part of
   any skin: they carry literal colours inline in footer.php, and
   a palette file must leave them alone.
   ============================================================ */
.itk-themer {
  position: fixed; left: 20px; bottom: 74px; z-index: 61;
}
.itk-themer__btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  box-shadow: 4px 4px 0 var(--ink);
}
.itk-themer__btn:hover { background: var(--ink); color: var(--bg); }

/* Three dots, not a gradient: the palettes differ by which hues they
   pick, not by how they blend, so the preview shows the picks. */
.itk-themer__dots { display: inline-flex; gap: 3px; flex: none; }
.itk-themer__dots i {
  display: block; width: 8px; height: 8px; border-radius: 0;
  /* Pale swatches would otherwise vanish into --white. */
  box-shadow: inset 0 0 0 1px var(--swatch-ring);
}

/* Two columns, because the list is thirteen rows once every palette
   ships an "a" and a "b" cut - one column would run 540px tall and
   fall off the bottom of a short viewport. The pairs are adjacent in
   source order, so each row reads as "V3 | V3b": the two cuts of one
   palette, side by side, which is the comparison being made. */
.itk-themer__menu {
  position: absolute; left: 0; bottom: calc(100% + 10px);
  /* 200px, not 180: at 180 the longest labels ("V2b Manifesto alt")
     wrap to a second line and the rows stop lining up across columns. */
  display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr));
  padding: 6px;
  border: 1px solid var(--ink); background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}
/* An author-origin `display` beats the UA stylesheet's [hidden]{display:none}
   no matter how specific the UA rule looks, so `display: grid` above was
   silently cancelling the hidden attribute the script toggles: the menu was
   painted open on first load of every page, in every palette, sitting on top
   of the Just Released band. Restate it here so `hidden` means hidden. */
.itk-themer__menu[hidden] { display: none; }
/* Original is not one of a pair - it is the absence of a palette, so it
   sits across the top on its own. */
.itk-themer__opt[data-theme="original"] { grid-column: 1 / -1; }
/* Divider between the two families of palettes: the six taken from the
   reference images, and the six designed against the site's own jobs. */
.itk-themer__grp {
  grid-column: 1 / -1;
  margin: 6px 0 2px; padding: 8px 10px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.itk-themer__opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; padding: 0 10px;
  border: 0; background: none; color: var(--ink); cursor: pointer;
  text-align: left; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .12em;
}
.itk-themer__opt:hover { background: var(--rule-lt); }
.itk-themer__opt[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.itk-themer__n { flex: 1; }
/* The tick states the choice in text as well as in fill, so the row does
   not rely on the reversed colour alone. */
.itk-themer__opt[aria-pressed="true"] .itk-themer__n::after { content: " \2713"; }

@media (max-width: 560px) {
  .caps-toggle { left: 12px; bottom: 12px; padding: 0 12px; }
  .caps-toggle__t { display: none; }
  /* Keeps the 10px gap above the shortened casing toggle. */
  .itk-themer { left: 12px; bottom: 66px; }
  .itk-themer__btn { padding: 0 12px; }
  /* Two 180px columns do not fit beside a 12px gutter on a 390px screen,
     so the list folds back to one column and scrolls instead. */
  .itk-themer__menu {
    grid-template-columns: 1fr; min-width: 196px;
    max-height: 62vh; overflow-y: auto;
  }
  /* The comparison tray is a third fixed control and it takes the full width
     of a 390px screen along the bottom edge. Lift the other two clear of it
     while it is on screen; the script sets .has-cmp-tray on <html>.

     The offsets are measured, not guessed. At this width the tray folds to
     two rows - pills, then actions - and stands 131px tall, so with its own
     12px inset it occupies 143px up from the bottom edge. It does not grow
     with a fourth pill: .cmp-tray__list is nowrap and scrolls instead, which
     is what makes a single fixed offset safe here at all. 153px and 207px
     then keep the same 10px gaps the unlifted stack already uses (12 / 66). */
  html.has-cmp-tray .caps-toggle { bottom: 153px; }
  html.has-cmp-tray .itk-themer  { bottom: 207px; }
}

/* The tray goes full-bleed at 860, not at 560 (see .cmp-tray in the 860px
   block), so it covers this same corner across the whole band above - and
   the lift has to follow it there or the toggle sits underneath the tray
   rather than beside it.

   The 560px offsets cannot simply be reused: the pill list only turns
   nowrap-and-scroll below 561, so here it wraps, and at the narrow end of
   the band one 160px pill per row stacks all four. Measured with four
   full-width pills: 192px tall from 561 to 629, 204px up from the bottom
   edge with its inset, dropping to 104px once two pills fit on a row.
   214px and 268px clear the tall case and keep the same 10px gaps. */
@media (min-width: 561px) and (max-width: 860px) {
  html.has-cmp-tray .caps-toggle { bottom: 214px; }
  html.has-cmp-tray .itk-themer  { bottom: 268px; }
}

/* ============================================================
   Info footnote: a small "i" that explains a figure
   ------------------------------------------------------------
   CSS-only hover/focus, same as the salt-divider footnote. The
   bubble is dark on light and light on dark alike, so it reads on
   the stats belt and inside the filter panel without a variant.
   --align decides which way it opens, so one near the edge of the
   shell does not push the page sideways.
   ============================================================ */
.k-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: 5px;
  cursor: help;
}
.k-info:focus { outline: none; }
.k-info:focus-visible .k-info__i {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.k-info__i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  opacity: .65;
}
.k-info:hover .k-info__i,
.k-info:focus-visible .k-info__i { opacity: 1; }

.k-info__tip {
  position: absolute;
  bottom: calc(100% + 9px);
  z-index: 60;
  width: 268px;
  max-width: min(72vw, 268px);
  padding: 10px 12px;
  border-radius: 0;
  background: var(--tip-bg);
  color: var(--tip-ink);
  font-family: var(--sans, inherit);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  pointer-events: none;
}
.k-info--center .k-info__tip { left: 50%; transform: translateX(-50%); }
.k-info--start  .k-info__tip { left: -8px; }
.k-info--end    .k-info__tip { right: -8px; }

.k-info__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--tip-bg);
}
.k-info--center .k-info__tip::after { left: 50%; transform: translateX(-50%); }
.k-info--start  .k-info__tip::after { left: 14px; }
.k-info--end    .k-info__tip::after { right: 14px; }

.k-info:hover .k-info__tip,
.k-info:focus-visible .k-info__tip { opacity: 1; visibility: visible; }

/* The one-line note under the starch slider. */
.r-field__note {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--muted);
  text-transform: uppercase;
}

/* A tooltip inside the stats belt would be clipped by the tile. */
.k-stats, .k-stat, .k-stat__label { overflow: visible; }

/* Stat label + its footnote on one line. The label is dimmed with opacity,
   and opacity on a parent is a compositing group its children cannot escape,
   so the tooltip has to sit outside it rather than inside. */
.k-stat__foot {
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.k-stat__foot .k-stat__label { margin-top: 0; }

/* ============================================================
   Card shots
   ------------------------------------------------------------
   Square box everywhere, which is what Just Released already did.
   A square source then runs the full width of the card with
   nothing cropped; a portrait one (Hill's and friends) stays
   contained on the hatched ground rather than being cut in half.
   The template decides which by testing the source, so --fill only
   ever lands on an image that can take it.
   ============================================================ */
.k-food__shot { height: auto; aspect-ratio: 1 / 1; }
.k-food__shot--fill { padding: 0; }
.k-food__shot--fill img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Sign-up band: everything on one centre line
   ------------------------------------------------------------
   .k-band h2 sets margin:0, which outranks the margin-inline:auto
   that centres the band's other children, so the heading sat 4px
   left of the strap and the form. Restore the auto margins.
   ============================================================ */
.k-band > * { margin-inline: auto; }
.k-band h2  { margin-block: 0; margin-inline: auto; }

/* ============================================================
   Full ingredient declaration: its own box
   ------------------------------------------------------------
   It used to hang off the bottom of the guaranteed-analysis box,
   which made that column very tall while the side column ran out
   of content. It is now the first box in the side column, so it
   sits beside the analysis and the running text gets the wider
   measure it wants.
   ============================================================ */
.pd-declbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.pd-declbox .pd-ga__salt {
  flex: none;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .13em;
  line-height: 1.5;
}
/* The declaration is running text, so it wants a readable measure
   rather than the full width of the column. */
.pd-declbox .pd-decl { margin-top: 18px; }
.pd-declbox .pd-decl p { max-width: 80ch; }

@media (max-width: 900px) {
  .pd-declbox__head { flex-direction: column; gap: 10px; }
  .pd-declbox .pd-ga__salt { margin-top: 0; }
}

/* The salt mark is a highlight, so a two-word name like "Sodium Chloride"
   must not break across lines: it renders as two separate black boxes with
   the padding doubled in the middle. nowrap stops it happening; the
   box-decoration-break keeps the padding sane if a longer name ever forces
   a wrap anyway. */
.pd-decl .itk-salt {
  white-space: nowrap;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ============================================================
   Compare
   ------------------------------------------------------------
   Up to four foods, side by side, judged on the same five measures
   the Open Score already owns. The screen is server-rendered from
   ?ids=, so everything here has to look finished with JavaScript
   off: there is no loading state to style and no skeleton.

   Three ideas run through the whole block.

   1. The FIGURE is the substance, not the score. ITK_V4_SHOW_SCORE
      is false today, so the points sub-figures and the /100 total
      are simply absent from the markup. The comparison still has to
      read as a comparison without them, which is why .cmp-cell__fig
      is the loudest thing in the table and .cmp-cell__sub is quiet.

   2. Colour is never the only signal, the same house rule the
      palette tick at .itk-themer__opt and the legend swatch ring
      already follow. A win carries an inset blue rule AND a blue
      figure AND a visible "Best" badge AND the rail's "Higher Is
      Better" line, so a monochrome print-out and a red-green
      colourblind reader both still get the verdict.

   3. Below 860 the table stops being a table and becomes a stack of
      measure-major blocks - the metric name across the top, the
      foods' figures side by side underneath. That is the same
      display:block fallback .c-table__head/.c-row and .k-table__head
      already use, generalised to a variable column count via the
      inline --cmp-n the template sets on .cmp-table. Four foods on a
      560px screen fold to a 2x2, exactly as .r-card__metrics folds
      from repeat(4) to repeat(2).

   No hex colours anywhere: 19 palette files at assets/themes/
   override the tokens, and a literal here means 19 overrides there.
   ============================================================ */

/* The theme's own visually-hidden utility. Deliberately NOT
   .screen-reader-text: this theme never defines that class, and it
   only works today because WooCommerce is enqueued site-wide. The
   comparison's non-colour signalling must not hang off a plugin. */
.cmp-sr, .cmp-cap, .cmp-tray__live {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- Screen shell ---- */
/* Gutter and max-width come from the two container lists in the craft
   layer; .cmp is listed in both. Only the vertical rhythm is set here. */
.cmp { padding-top: var(--s5); padding-bottom: var(--s6); }

.cmp-head { margin-bottom: var(--s4); }
.cmp-h1 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02;
  letter-spacing: var(--h2-tracking); text-transform: var(--heading-case);
  margin: 10px 0 0;
}
.cmp-lede {
  max-width: var(--measure); margin-top: var(--s1);
  font-size: 16px; line-height: 1.55; color: var(--body);
}

/* The honesty line: an ID we dropped, a set we truncated, a basis we
   could not put on one denominator. It is amber-ruled because it is a
   caveat about the data, not an error the reader caused. */
.cmp-note {
  display: block; margin-top: var(--s2); padding: 10px 12px;
  border-left: 3px solid var(--amber); background: var(--warn-bg);
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--body); line-height: 1.5;
}
.cmp-note + .cmp-note { margin-top: 6px; }

/* Empty state only, and only with JS: "you already have three saved".
   Cut from the same cloth as .ph-compare so the two read as one family. */
.cmp-open {
  padding: 0 18px; margin-top: var(--s2);
  border: 1px solid var(--rule); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: var(--kicker-tracking);
  text-decoration: none;
}
.cmp-open:hover { border-color: var(--ink); text-decoration: none; }

/* ---- The table ---- */
/* This element scrolls sideways, never the page body - the same job
   .pd-bench__wrap does for the benchmark table.

   Known trade-off: overflow-x:auto forces overflow-y to auto too, so a
   .k-info bubble opened from a rail is clipped here, the same way one was
   clipped by the stats belt until .k-stats got overflow:visible. It is not
   fixed by making this visible, because then the page body would take the
   sideways scroll instead, which is the worse bug. It costs nothing above
   560px, where .cmp-rail__why prints the same sentence as plain text; and
   below 860px this element is overflow-x:visible anyway, so at the only
   widths where the bubble is the sole carrier of that caveat it is not
   clipped at all. */
.cmp-wrap { overflow-x: auto; border: 1px solid var(--ink); background: var(--white); }
.cmp-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: var(--sans);
}

.cmp-corner { background: var(--white); border-bottom: 2px solid var(--ink); width: 216px; }

/* The food column head. Light ground, ink text, separated from the readings
   by the 2px rule alone - the same treatment .cmp-corner beside it carries, so
   the whole header row reads as one sheet.
   This used to be an ink ground with inverse text, borrowed from
   `.pd-btable th`. That rule is built for a compact one-line mono label; this
   cell is ~250px tall and holds a product shot, a brand, a three-line title and
   two links, so the same fill landed as a heavy slab. Requested 2026-08-22. */
.cmp-col {
  vertical-align: top; padding: 14px 16px; text-align: left;
  background: var(--white); color: var(--ink); border-bottom: 2px solid var(--ink);
}
/* 01..04. The score panel numbers its five lines, so the columns are
   numbered too and a cell can say which food it belongs to in one glyph. */
.cmp-col__slot {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: var(--kicker-tracking-2); opacity: .7; margin-bottom: 6px;
}
.cmp-col__shot {
  display: block; width: 72px; height: 72px; margin-bottom: 8px;
  background: var(--panel); overflow: hidden;
}
.cmp-col__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cmp-col__brand {
  display: block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: var(--kicker-tracking); opacity: .78; margin-bottom: 3px;
}
.cmp-col__name {
  display: block; color: var(--ink); font-weight: 700; font-size: 15px;
  line-height: 1.18; text-decoration: none; text-transform: var(--heading-case);
}
.cmp-col__name:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.cmp-col__acts { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* Swap and Remove. Both places these appear - the column head and the roster -
   are now light grounds, so one treatment covers both. The .cmp-roster
   override that used to undo the inverse colour here is gone with the ink
   ground that made it necessary. */
/* No opacity here. The .78 this carried was softening white text against the
   ink ground; on a light ground it thins --muted to #858376, which measures
   3.81:1 and fails normal-text contrast at 10.5px. The roster copies of these
   links had that same problem before, and lose it here too. */
.cmp-act {
  padding: 0 2px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: var(--kicker-tracking); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.cmp-act:hover, .cmp-act:focus { color: var(--ink); }

/* An unused slot. Dashed, panel-filled and obviously not a food. */
.cmp-col--add {
  background: var(--panel); border-bottom: 2px solid var(--ink);
  border-left: 1px dashed var(--rule-md); vertical-align: middle; text-align: center;
}
.cmp-add-slot {
  padding: 0 14px; border: 1px dashed var(--rule-md); background: transparent;
  color: var(--muted); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: var(--kicker-tracking); text-decoration: none;
}
.cmp-add-slot:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
/* Below 860 the empty slots go with the <thead>, so the add affordance
   needs somewhere else to live. */
.cmp-addbar { display: none; }

/* ---- The row rail ---- */
.cmp-rail {
  text-align: left; vertical-align: top; padding: 14px 16px;
  background: var(--white); border-right: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule-lt); font-weight: 400;
}
.cmp-rail__num {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: var(--kicker-tracking-2); color: var(--muted); margin-right: 8px;
}
.cmp-rail__t {
  display: inline; font-weight: 700; font-size: 14px;
  letter-spacing: var(--h3-tracking); color: var(--ink);
  text-transform: var(--heading-case);
}
/* This is what makes the word "Best" mean something. Without it a reader
   cannot tell whether the marked cell won by being higher or by being
   lower, and half the rows in this table are lower-is-better. */
.cmp-rail__dir {
  display: block; margin-top: 4px; font-family: var(--mono); font-size: 10px;
  letter-spacing: var(--kicker-tracking-2); color: var(--blue); text-transform: uppercase;
}
.cmp-rail__why {
  display: block; margin-top: 5px; font-size: 12px; line-height: 1.4;
  color: var(--muted-2); max-width: 34ch;
}
/* Everyone tied, so nobody won. Saying so is a result; marking every
   cell "Best" would be a result-shaped way of saying nothing. */
.cmp-rail__level {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px solid var(--rule-md); background: var(--panel);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: var(--kicker-tracking-2);
  color: var(--muted); text-transform: uppercase;
}

/* ---- The figure cells ---- */
.cmp-cell {
  padding: 14px 16px; vertical-align: top; background: var(--white);
  border-bottom: 1px solid var(--rule-lt); border-left: 1px solid var(--rule-lt);
}
/* No colour is declared on .cmp-cell__fig itself: the recall and total
   figures arrive carrying a k-sc-* class from the scorer, and a colour
   here would outrank it on source order and quietly kill it. */
.cmp-cell__fig {
  display: block; font-family: var(--mono); font-size: 19px; font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.cmp-cell__sub {
  display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .03em; color: var(--muted); line-height: 1.35;
}
/* Real markup, not CSS content: below 860 the figures leave their column
   head behind, and this is the only thing tying a number back to a food.
   Being markup, it also survives a copy-paste into an email. */
.cmp-cell__who { display: none; }

/* Zebra. Restated on .cmp-rail as well because the rail goes sticky at
   1024 and a sticky cell that keeps the row's background paints over the
   scrolled cells - without this the stripes tear as the table moves. */
.cmp-rows tr:nth-child(even) .cmp-cell,
.cmp-rows tr:nth-child(even) .cmp-rail { background: var(--panel); }

/* The win. An inset shadow rather than a border-left, so no cell changes
   width and the whole table does not shift by 3px when a row resolves. */
.cmp-cell.is-best { box-shadow: inset 3px 0 0 0 var(--blue); }
.cmp-cell.is-best .cmp-cell__fig { color: var(--blue); font-weight: 700; }
.cmp-best {
  display: inline-block; margin-top: 6px; padding: 1px 7px;
  background: var(--blue); color: var(--on-blue); font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: var(--kicker-tracking-2);
  text-transform: uppercase;
}

/* Not measured. Never marked, never counted as zero. The spec asks for
   var(--dim) here, but --dim is documented in :root as "on dark
   backgrounds only" and runs about 1.7:1 on --white, which would fail
   the same AA bar the grey ramp was rebuilt to clear. --muted reads as
   dimmed against the --ink of a real figure and still passes. */
.cmp-cell.is-null .cmp-cell__fig { color: var(--muted); font-weight: 400; }

/* A figure we print but do not trust - a 0.0% starch is the carb helper's
   negative remainder clamped at zero, not a food with no starch in it. */
.cmp-cell--doubt .cmp-cell__fig {
  color: var(--amber);
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--amber); text-underline-offset: 4px;
}

.cmp-cell--empty { background: var(--panel); border-left: 1px dashed var(--rule-md); }

.cmp-row.is-level .cmp-rail { border-left: 3px solid var(--rule-md); }

/* The context rows carry no verdict, so they are visibly quieter than the
   five measured lines above them. */
.cmp-rows--context .cmp-rail__t { font-weight: 600; color: var(--muted-2); }
.cmp-rows--context .cmp-cell__fig { font-size: 15px; font-weight: 400; }

/* The total, printed only when ITK_V4_SHOW_SCORE is on. Ink ground with
   inverse text: --on-ink, never --bg, or every palette that recolours the
   page surface has to write an override (theme-v4b already did once). */
.cmp-total .cmp-rail { background: var(--ink); color: var(--on-ink); border-bottom: 0; }
.cmp-total .cmp-rail__t { color: var(--on-ink); }
.cmp-total .cmp-rail__num, .cmp-total .cmp-rail__why { color: var(--dim); }
/* --blue is a fill colour, not a text colour on --ink: it runs 2.87:1 there.
   Both places that print it in this row - the direction line and the winning
   figure - swap to the on-ink pair. The row keeps saying who won the same way
   it does everywhere else, with the inset rule and the Best badge. */
.cmp-total .cmp-rail__dir { color: var(--on-blue-soft); }
.cmp-total .cmp-cell { background: var(--ink); border-color: var(--rule-md); }
.cmp-total .cmp-cell__fig { font-size: 30px; color: var(--on-ink); }
.cmp-total .cmp-cell.is-best .cmp-cell__fig { color: var(--on-ink); }
.cmp-total .cmp-cell__sub { color: var(--on-ink); opacity: .7; }

/* ---- Mobile roster ---- */
/* Always rendered, shown only below 860, where <thead> is gone and the
   column identity and its Swap/Remove controls have nowhere else to go. */
.cmp-roster { display: none; list-style: none; margin: 0; padding: 0; }

/* ---- Picker ---- */
.cmp-picker {
  margin-top: var(--s5); border: 1px solid var(--ink);
  background: var(--white); padding: var(--s3);
}
.cmp-h2 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(19px, 2vw, 24px); letter-spacing: var(--h3-tracking);
  text-transform: var(--heading-case); margin: 0 0 var(--s1);
}
.cmp-picker__mode {
  margin: 0 0 var(--s1); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: var(--kicker-tracking); color: var(--blue);
}
.cmp-pform {
  display: grid; grid-template-columns: minmax(0, 1fr) 180px 180px auto;
  gap: 10px; align-items: end; margin-bottom: var(--s2);
}
/* The label is a fifth grid item in a four-column grid, so it is placed
   rather than left to auto-flow - otherwise it eats the search field's
   cell and pushes every control one column right. No visual property is
   set on .k-label here; it keeps the styling it has everywhere else. */
.cmp-pform .k-label { grid-column: 1; grid-row: 1; }
.cmp-pq { grid-column: 1; grid-row: 2; }
.cmp-psel { grid-row: 2; }
.cmp-pgo { grid-row: 2; }
.cmp-pq {
  width: 100%; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 13px;
}
.cmp-psel {
  width: 100%; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--rule); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px;
}
.cmp-pgo {
  padding: 0 20px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--on-ink); font-family: var(--mono); font-size: 12px;
  letter-spacing: var(--kicker-tracking); cursor: pointer;
}
.cmp-pgo:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }

.cmp-hits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-lt); }
.cmp-hits__k {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: var(--kicker-tracking-2); color: var(--muted);
  text-transform: uppercase; font-weight: 600;
}
.cmp-hit {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 96px;
  align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--rule-lt);
}
.cmp-hit__brand {
  grid-column: 1; grid-row: 1; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: var(--kicker-tracking); color: var(--muted);
}
.cmp-hit__name {
  grid-column: 1; grid-row: 2; font-weight: 700; font-size: 14px;
  color: var(--ink); text-decoration: none;
}
.cmp-hit__name:hover { color: var(--blue); text-decoration: none; }
/* `1 / span 2`, never `1 / -1`: there is no explicit grid-template-rows here,
   so line -1 resolves to line 1 and the span silently collapses. */
.cmp-hit__fig { grid-column: 2; grid-row: 1 / span 2; font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.cmp-pick {
  grid-column: 3; grid-row: 1 / span 2;
  padding: 0 16px; border: 1px solid var(--rule); background: var(--white);
  color: var(--ink); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: var(--kicker-tracking); text-decoration: none;
}
.cmp-pick:hover { border-color: var(--ink); background: var(--ink); color: var(--on-ink); text-decoration: none; }
.cmp-hits__none { font-family: var(--mono); font-size: 12px; color: var(--muted); padding: 14px 0; }

/* The method note. Same treatment as .pd-honest: a quiet aside that says
   what this page did and did not measure. */
.cmp-method {
  margin-top: var(--s4); padding: var(--s2); border-left: 3px solid var(--rule-md);
  background: var(--panel); max-width: var(--measure);
  font-size: 13px; line-height: 1.55; color: var(--body-2);
}

/* ---- Add controls ---- */
/* The product hero now carries a pair: the anchor that starts a comparison
   (which works with JS off) and the button that drops this food in the tray
   (which does not exist without JS). .ph-compare already owns margin-top:22px,
   so it is zeroed here and the row supplies the space for both. */
.ph-cmp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.ph-cmp-row .ph-compare { margin-top: 0; }

.cmp-add {
  padding: 0 16px; border: 1px solid var(--rule); background: var(--white);
  color: var(--ink); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: var(--kicker-tracking); cursor: pointer;
  text-decoration: none; border-radius: 0;
}
.cmp-add:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.cmp-add--hero { padding: 0 20px; font-size: 12.5px; }
/* Scoped to .cmp-add, not to either variant: the hero button is
   .cmp-add--hero and the card button is .cmp-add--btn, and the script sets
   aria-pressed on both. Naming one variant here left the hero saying
   "pressed" to a screen reader while looking untouched on screen. */
.cmp-add[aria-pressed="true"] {
  background: var(--blue); border-color: var(--blue); color: var(--on-blue);
}
/* The tick states the collected state in text as well as in fill, exactly
   as the palette menu's chosen row does. The reversed fill is never alone. */
.cmp-add[aria-pressed="true"] .cmp-add__t::after { content: " \2713"; }
/* Inside the archive card the pair drops onto its own row under the four
   metrics rather than taking a cell out of the repeat(4,1fr) 132px grid. */
.cmp-addwrap { display: inline-flex; grid-column: 1 / -1; margin-top: 8px; justify-content: flex-start; }

/* ---- The tray ---- */
/* A basket, not a source of truth: the URL renders the comparison, this
   only remembers what you picked up on the way. Built from the same parts
   as the palette menu - hard 1px ink border, 4px offset block, no blur. */
.cmp-tray {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 12px;
  border: 1px solid var(--ink); background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
}
.cmp-tray__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 9px;
  border: 1px solid var(--rule); background: var(--panel);
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em; max-width: 160px;
}
.cmp-chip__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 28px, deliberately under 44: this is a secondary destructive control
   inside a chip, the same allowance .k-footer__list a already takes. The
   primary Remove sits at full size in the column head and the roster. */
.cmp-chip__x {
  min-width: 28px; min-height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 0; background: none; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.cmp-chip__x:hover { color: var(--red); }
.cmp-tray__acts { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.cmp-tray__go {
  padding: 0 16px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--on-ink); font-family: var(--mono); font-size: 11.5px;
  letter-spacing: var(--kicker-tracking); text-decoration: none; white-space: nowrap;
}
.cmp-tray__go:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); text-decoration: none; }
.cmp-tray__clear {
  padding: 0 10px; border: 0; background: none; color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.cmp-tray__clear:hover { color: var(--ink); }

/* An author-origin `display` beats the UA stylesheet's [hidden]{display:none}
   however specific the UA rule looks - the bug that painted the palette menu
   open on every page. .cmp-tray is flex, .cmp-add and .cmp-open are inline-flex
   (from the 44px control list above), and all three ship with `hidden` set and
   are revealed by script. Restate it so `hidden` means hidden. */
.cmp-tray[hidden] { display: none; }
.cmp-add[hidden] { display: none; }
.cmp-open[hidden] { display: none; }

@media (max-width: 1100px) {
  .cmp-corner { width: 168px; }
  .cmp-col { padding: 12px 12px; }
  .cmp-col__shot { width: 48px; height: 48px; }
  .cmp-col__name { font-size: 13.5px; }
  .cmp-cell { padding: 12px 12px; }
  .cmp-cell__fig { font-size: 17px; }
}

@media (max-width: 1024px) {
  /* The measure name must not scroll away from its own figures, so the
     rail pins to the left edge while .cmp-wrap moves under it. */
  .cmp-corner { width: 140px; position: sticky; left: 0; z-index: 3; }
  .cmp-rail { position: sticky; left: 0; z-index: 2; }
  /* The bag shot is decoration; the roster carries identity from here down. */
  .cmp-col__shot { display: none; }
}

@media (max-width: 860px) {
  .cmp { padding-top: var(--s4); }
  /* The table stops being a table. Reading order becomes measure-major:
     the metric name across the top of a block, the foods' figures side by
     side beneath it. Same fallback as .c-table__head/.c-row, but with a
     variable column count taken from the inline --cmp-n on .cmp-table. */
  .cmp-wrap { overflow-x: visible; border: 0; }
  .cmp-table, .cmp-rows, .cmp-total, .cmp-row, .cmp-rail, .cmp-cell { display: block; }
  .cmp-table { width: 100%; }
  .cmp-table thead { display: none; }
  .cmp-row {
    display: grid; grid-template-columns: repeat(var(--cmp-n, 1), minmax(0, 1fr));
    border: 1px solid var(--rule); margin-bottom: 10px; background: var(--white);
  }
  /* `relative`, not `static`: it still cancels the sticky from 1024, and it
     makes the rail the containing block for the .k-info bubble below. */
  .cmp-rail {
    position: relative; grid-column: 1 / -1; border-right: 0;
    border-bottom: 1px solid var(--rule); padding: 12px 12px 8px; background: var(--panel);
  }
  /* The rail runs the full width of the block here and the "i" sits at its
     left end, so the shared bubble - which opens centred on its own icon -
     hangs about 90px off the left edge of a 390px screen and loses its first
     word or two. Pinning .k-info to static hands the positioning to the rail,
     and the bubble then spans the rail's own width and is always on screen.
     This matters most at 560, where .cmp-rail__why is hidden and the bubble
     is the only place that caveat is still printed. */
  .cmp-rail .k-info { position: static; }
  .cmp-rail .k-info__tip { left: 12px; right: 12px; width: auto; max-width: none; transform: none; }
  .cmp-rail .k-info__tip::after { left: 20px; right: auto; transform: none; }
  /* The zebra was a way of tracking one row across a wide table. There is
     no wide table any more - each measure is its own bordered block with a
     panel-filled rail on top - so the stripe is dropped rather than left to
     shade every second block for no reason. */
  .cmp-rows tr:nth-child(even) .cmp-rail { background: var(--panel); }
  .cmp-rows tr:nth-child(even) .cmp-cell { background: var(--white); }
  .cmp-cell { padding: 10px 12px; border-left: 0; border-bottom: 1px solid var(--rule-lt); }
  /* A fixed two-line budget, because the label is the only thing standing
     between the top of the cell and the figure: a name that wrapped to four
     lines in one column and three in the next put their figures 13px apart,
     and it did that on every row of the block. min-height holds the space a
     short label does not use, the clamp takes back the space a long one
     wants, so four figures start on one line whatever they are called.
     The slot letter leads the string and so always survives the ellipsis,
     and the roster above the table still prints every name in full. */
  .cmp-cell__who {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    min-height: 2.6em; line-height: 1.3;
    margin-bottom: 3px; font-family: var(--mono); font-size: 10px;
    letter-spacing: var(--kicker-tracking-2); color: var(--muted); text-transform: uppercase;
  }
  /* An empty slot has no head to hang off now, so it is dropped entirely
     and .cmp-addbar carries the affordance instead. */
  .cmp-cell--empty { display: none; }
  .cmp-addbar { display: block; margin-top: var(--s2); text-align: center; }

  .cmp-roster {
    display: grid; gap: 8px; margin-bottom: var(--s2);
    border: 1px solid var(--ink); background: var(--white);
  }
  .cmp-roster__i {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 8px 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--rule-lt);
  }
  .cmp-roster__i:last-child { border-bottom: 0; }
  .cmp-roster__i .cmp-col__slot { grid-column: 1; grid-row: 1 / span 2; color: var(--muted); margin-bottom: 0; }
  .cmp-roster__brand {
    grid-column: 2; grid-row: 1; font-family: var(--mono); font-size: 10.5px;
    letter-spacing: var(--kicker-tracking); color: var(--muted);
  }
  .cmp-roster__name {
    grid-column: 2; grid-row: 2; font-weight: 700; font-size: 14px;
    color: var(--ink); text-decoration: none;
  }
  .cmp-roster__i .cmp-act--swap { grid-column: 3; grid-row: 1 / span 2; }
  .cmp-roster__i .cmp-act--drop { grid-column: 4; grid-row: 1 / span 2; }

  .cmp-pform { grid-template-columns: 1fr 1fr; }
  .cmp-pform .k-label { grid-column: 1 / -1; grid-row: 1; }
  .cmp-pq { grid-column: 1 / -1; grid-row: 2; }
  .cmp-psel { grid-row: 3; }
  .cmp-pgo { grid-column: 1 / -1; grid-row: 4; }

  .cmp-hit { grid-template-columns: minmax(0, 1fr) auto; }
  .cmp-hit__fig { grid-column: 1; grid-row: 3; }
  .cmp-pick { grid-column: 2; grid-row: 1 / span 3; }

  .cmp-tray { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

@media (max-width: 560px) {
  .cmp-h1 { font-size: clamp(26px, 7vw, 32px); }
  .cmp-lede { font-size: 15px; }
  /* Four foods will not sit on one line at 390px, so the row folds to a
     2x2 - the same repeat(4) -> repeat(2) step .r-card__metrics takes. */
  .cmp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-cell__fig { font-size: 16px; }
  /* The rail's info footnote carries the same caveat in less space. */
  .cmp-rail__why { display: none; }

  .cmp-roster__i { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .cmp-roster__i .cmp-act--swap { grid-column: 1; grid-row: 3; justify-self: start; }
  .cmp-roster__i .cmp-act--drop { grid-column: 2; grid-row: 3; justify-self: start; }

  .cmp-pform { grid-template-columns: 1fr; }
  .cmp-pform .k-label, .cmp-pq, .cmp-psel, .cmp-pgo { grid-column: 1 / -1; grid-row: auto; }

  .cmp-hit { grid-template-columns: minmax(0, 1fr); }
  .cmp-hit__fig { grid-column: 1; grid-row: 3; }
  .cmp-pick { grid-column: 1; grid-row: 4; justify-self: start; margin-top: 6px; }

  /* The pills scroll on their own line rather than stacking the tray four
     rows tall over the page. */
  .cmp-tray { flex-wrap: wrap; }
  .cmp-tray__list { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .cmp-chip { flex: none; }
  .cmp-tray__acts { width: 100%; margin-left: 0; justify-content: space-between; }
}