/*
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: #8F2E23;   /* hatch over --n-derived (starch) — darker red so white text stays readable over both, white 8.13:1 */

  /* ---- 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 stays neutral: it is not printed on a bag, so it gets no measured
     colour. Starch is the one exception - still hatched to mark it as
     derived rather than printed, but coloured red on purpose: it is the
     figure we don't want high, so the bar should read as a warning. */
  --n-protein:  #1E7A3D;
  --n-fat:      #E0A500;
  --n-fiber:    #A85419;   /* burnt orange - white 5.32:1 */
  --n-moisture: #1D6DA6;
  --n-assumed:  #C9C5BC;   /* ash: stated by us, not by the label */
  --n-derived:  #B03A17;   /* starch: what is left once the rest is subtracted - coloured as a warning */

  --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); }
/* Not :first-of-type: the screen-reader "Menu" span comes first, so that
   selector never matched the top bar and the X came out as a single slash. */
.k-burger[aria-expanded="true"] .k-burger__bar:not(.k-burger__bar + .k-burger__bar) { transform: translateY(3.5px) rotate(45deg); }
.k-burger[aria-expanded="true"] .k-burger__bar + .k-burger__bar { 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; }
/* Chrome does not apply `clip` on the root to viewport scrolling (the page still
   scrolled 8px sideways on narrow desktop windows). On body it clips the overhang,
   and clip, unlike hidden, creates no scroll container, so sticky still works. */
body { 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%; }
/* Reviews list (2026-10-07): the same box, open above the list instead of
   hidden in the filter panel. #search-bar carries the hero styling below. */
.r-search { margin: 14px 0 22px; max-width: 740px; }
.r-search .asp_w_container { max-width: 100%; }
.r-search__clear {
  display: inline-block; margin-top: 10px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--muted);
}

:is(#search-bar, #fq-look-asp) div.asp_m,
:is(#search-bar, #fq-look-asp) 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. */
:is(#search-bar, #fq-look-asp) div.asp_m .probox {
  align-items: stretch; height: 52px;
  border: var(--border-w) solid var(--ink); box-shadow: none;
}
:is(#search-bar, #fq-look-asp) div.asp_m .probox > div { border-radius: 0; box-shadow: none; }

/* Left slot: the settings toggle stands where the old glyph did. */
:is(#search-bar, #fq-look-asp) 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);
}
:is(#search-bar, #fq-look-asp) div.asp_m .probox .prosettings .innericon svg { fill: var(--muted); }

:is(#search-bar, #fq-look-asp) div.asp_m .probox .proinput { height: 52px; margin: 0 0 0 14px; }
:is(#search-bar, #fq-look-asp) div.asp_m .probox .proinput form { height: 52px; }
:is(#search-bar, #fq-look-asp) div.asp_m .probox .proinput input.orig,
:is(#search-bar, #fq-look-asp) 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);
}
:is(#search-bar, #fq-look-asp) div.asp_m .probox .proinput input.autocomplete { color: var(--muted); }
:is(#search-bar, #fq-look-asp) div.asp_m .probox .proinput input.orig::placeholder { color: var(--muted); opacity: 1; }

/* Right slot: the ink block the RUN button used to fill. */
:is(#search-bar, #fq-look-asp) 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;
}
:is(#search-bar, #fq-look-asp) 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: 52px minmax(0, 1fr);
  align-items: center; column-gap: 14px; row-gap: 6px;
  border-top: 1px solid var(--rule-lt); padding: 12px 0;
}
.k-viewed__row:first-child { border-top: 0; }
.k-viewed__shot {
  grid-row: span 2; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--white); border: 1px solid var(--rule-lt); overflow: hidden;
}
.k-viewed__shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Four figures under the name: there is no room beside it in the side panel. */
.k-viewed__metrics { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.k-viewed .k-viewed__metric { text-align: left; }
.k-viewed .k-viewed__metric b { display: inline; margin-left: 5px; }
@media (max-width: 560px) {
  .k-viewed__metrics { display: grid; grid-template-columns: max-content max-content; gap: 4px 16px; }
}
.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; }
/* Phones: a long heading plus a no-wrap link overflowed the row; let the link drop under the heading. */
@media (max-width: 640px) { .k-sechead { flex-wrap: wrap; row-gap: 10px; } }

/* 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; }
/* $/lb is the card's attention point: bag red type (5.7:1 on white) with a
   one-pixel tinted shadow to lift it, no fill. Fallback is the v4b value. */
.k-food__price {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--feature-red, #C8202B);
  text-shadow: 0 1px 2px color-mix(in srgb, var(--feature-red, #C8202B) 22%, transparent);
  white-space: nowrap; letter-spacing: .02em;
}
.k-food__price small { font-size: 11px; font-weight: 500; color: inherit; margin-left: 1px; }

/* ============================================================
   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);
}
/* Two lines on phones, never three. The 30px floor above let the longer
   line ("Know What's In The Bowl", ~11.6em wide) outgrow the 20px-gutter
   column on anything under ~390px, so there the size tracks the viewport
   instead, with ~5% headroom for the font's fallback metrics. */
@media (max-width: 600px) {
  .k-band h2 { font-size: min(30px, calc(8.2vw - 3.5px)); }
}
/* 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: 3 / 2; padding: 8px; background: var(--panel); }
/* Same watermark letter as the wiki index tiles (.p-wcard__ph), sized up to
   fill the frame a photo would. The 3:2 frame matches the photo set. */
.pd-wcard__img .pd-wcard__ph { font-family: inherit; font-size: 56px; line-height: 1; letter-spacing: 0; }
.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; }
  /* Swipe carousel: the next card peeks in at the edge so it reads as
     scrollable, instead of five full-width cards stacked down the page. */
  .pd-wiki {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pd-wiki::-webkit-scrollbar { display: none; }
  .pd-wcard {
    flex: 0 0 78%; max-width: 300px; scroll-snap-align: start;
    border-bottom: 0; border-right: 1px solid var(--rule);
  }
  .pd-wcard:nth-child(even) { border-right: 1px solid var(--rule); }
  .pd-wcard:last-child { 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-gallery { position: relative; }
.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;
  cursor: zoom-in;
}
.ph-shot img { width: 100%; height: 100%; object-fit: contain; }
/* The magnified crop, JS-positioned to the left of the shot - it is allowed
   to sit over the whole text column, so it is only hidden once script
   confirms there is no room at all (see the inline script at the foot of
   single-product.php) - hidden by default so a no-JS layout never reserves
   space for it. */
.ph-zoom {
  display: none;
  position: absolute; top: 0; right: calc(100% + 20px);
  border: 1px solid var(--rule); background-color: var(--white); background-repeat: no-repeat;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  z-index: 30; pointer-events: none;
}
.ph-shot.is-zooming + .ph-zoom { display: block; }
.ph-shot__ph { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em; color: var(--muted); }
/* Only 4-5 thumbs fit the hero column at once; the rest scroll rather than
   wrap or get cut from the gallery, so every photo on file stays reachable. */
.ph-thumbs {
  display: flex; gap: 12px; margin-top: 14px;
  overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px;
  scrollbar-width: thin; scrollbar-color: var(--muted) transparent;
}
.ph-thumbs::-webkit-scrollbar { height: 6px; }
.ph-thumbs::-webkit-scrollbar-thumb { background: var(--rule); }
.ph-thumbs::-webkit-scrollbar-track { background: transparent; }
.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;
  flex: 0 0 62px; scroll-snap-align: start;
}
.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. It is coloured red rather than neutral
   because, unlike ash, it is the segment we want readers to see as unwanted. */
.ph-seg--starch {
  color: var(--on-chart);
  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) {
  /* minmax(0, ...), not a bare 1fr: the gallery column has no fixed width to
     rely on at this breakpoint, so without it the grid track grows to the
     product image's natural intrinsic size instead of the viewport - the
     classic grid-item min-width:auto overflow. */
  .ph { grid-template-columns: minmax(0, 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: 16px;
}
.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);
}

.r-intro { max-width: 78ch; margin: 14px 0 22px; font-size: 15.5px; line-height: 1.65; color: var(--body); }
.r-intro a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
/* 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, max-content) minmax(0, 1fr) 120px; gap: 16px 22px; 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__metrics b.is-null { color: var(--muted-2); }
.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-shot .i-shot__ph { font-size: 120px; line-height: 1; }
.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; }

/* The "In Detail" long read. Only a handful of ingredients carry one, so this
   is sized for reading a few hundred words rather than for the one-line
   definition that every other ingredient gets. */
.i-longread { font-size: 17px; line-height: 1.75; color: var(--body-2); }
.i-longread > *:first-child { margin-top: 0; }
.i-longread > *:last-child { margin-bottom: 0; }
.i-longread p { margin: 0 0 18px; }
.i-longread h3 {
	font-family: var(--display);
	font-weight: var(--display-weight);
	letter-spacing: -.02em;
	font-size: 20px;
	line-height: 1.3;
	margin: 30px 0 12px;
	color: var(--ink);
}
.i-longread ul, .i-longread ol { margin: 0 0 18px; padding-left: 22px; }
.i-longread li { margin-bottom: 8px; }
.i-longread a { text-decoration: underline; text-underline-offset: 2px; }
.i-longread strong { font-weight: 600; }

@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; }
}

/* 1080, not 900: with News and Blog the six-item nav wraps below about 1060px. */
@media (max-width: 1080px) {
  .k-nav, .k-hsearch, .k-btn-dark { display: none; }
  .k-burger { display: inline-flex; }
  .k-header__aux { margin-left: auto; }
}
@media (min-width: 1081px) {
  .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, rgba(20, 18, 16, .22));
}

/* 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);
  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;
  /* Closed tips take no layout: an invisible one still widened the page on phones. */
  display: 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; display: block; }
/* Phones: no room to float a tip beside a small icon; show it as a bar pinned to the bottom of the screen. */
@media (max-width: 640px) {
  .k-info__tip,
  .k-info--center .k-info__tip, .k-info--start .k-info__tip, .k-info--end .k-info__tip {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto;
    width: auto; max-width: none; transform: none;
  }
  .k-info__tip::after { display: none; }
}

/* 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; }

/* Live picker results (compare-picker.js): a bag shot in front, so a reader
   can tell two near-identical recipe names apart at a glance. */
.cmp-results[aria-busy="true"] { opacity: .55; }
.cmp-hit--img { grid-template-columns: 64px minmax(0, 1fr) 270px 96px; }
.cmp-hit--img .cmp-hit__brand, .cmp-hit--img .cmp-hit__name { grid-column: 2; }
.cmp-hit--img .cmp-hit__fig { grid-column: 3; }
.cmp-hit--img .cmp-pick { grid-column: 4; }
.cmp-hit__img {
  grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px;
  background: var(--white); border: 1px solid var(--rule-lt);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cmp-hit__img img { width: 100%; height: 100%; object-fit: contain; }
.cmp-pick { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; }
.cmp-more {
  margin-top: 12px; min-height: 44px; padding: 0 18px;
  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;
}
.cmp-more:hover { border-color: var(--ink); }
.cmp-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.cmp-brands__k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--kicker-tracking-2);
  color: var(--muted); text-transform: uppercase; font-weight: 600; margin-right: 4px;
}
.cmp-brand {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.cmp-brand:hover { background: var(--ink); color: var(--on-ink); }
.cmp-brand__c { font-family: var(--mono); font-size: 11px; font-weight: 400; opacity: .7; }

/* 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; }

/* ---- Buy on (verified retailer links) ---- */
.ph-read__doubt { display: block; margin-top: 10px; padding-left: 10px; border-left: 3px solid var(--amber); color: var(--body); font-size: .92em; }
.ph-buy { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 16px; }
.ph-buy__label {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  color: var(--muted); text-transform: uppercase;
}
/* One store per row (owner 2026-10-08): the name in a fixed column, its bag sizes beside it. */
.ph-buy__list { flex: 1 1 100%; display: grid; gap: 0; }
/* A plain text link, not a button: the retailer is a way out, not the page's
   main action, and a boxed button competed with Compare for attention. */
.ph-buy__link {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--blue); font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.ph-buy__link:hover { color: var(--blue-d); text-decoration-thickness: 2px; }
.ph-buy__price { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--body-2); }
.ph-buy__price:empty:not(.ph-skel) { display: none; }
.ph-buy__store { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--rule-lt); }
.ph-buy__store:last-child { border-bottom: 1px solid var(--rule-lt); }
@media (max-width: 560px) { .ph-buy__store { grid-template-columns: 78px 1fr; } }
.ph-buy__bags { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.ph-buy__bag { color: var(--body-2); text-decoration: none; white-space: nowrap; }
.ph-buy__bag:hover { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.ph-buy__size { color: var(--muted); font-weight: 600; }
.ph-buy__per { color: var(--muted); font-weight: 400; }

/* ---- Live prices: skeletons ----
   The product HTML is cached for everyone, so prices arrive after load from
   itk-retail's /wp-json/itk/v1/prices/<id> (assets/live-prices.js there).
   Until then each slot pulses. Grey on grey from the rule tokens, so it follows
   the palette; still under reduced motion. */
.ph-skel {
  display: inline-block; width: 56px; height: 1em; vertical-align: -0.15em;
  background: var(--rule-lt); animation: phSkel 1.2s ease-in-out infinite;
}
.ph-buy__price.ph-skel { width: 52px; }
.pd-price__note .ph-skel { height: .9em; }
@keyframes phSkel { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .ph-skel { animation: none; } }

/* ---- Price by bag size ---- */
.pd-price__table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.pd-price__table th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em; font-weight: 500;
  color: var(--muted); text-align: left; padding: 0 12px 10px 0; border-bottom: 1px solid var(--rule);
}
.pd-price__table td {
  font-family: var(--mono); font-size: 13px; text-align: left;
  padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule);
}
.pd-price__table tbody tr:last-child td { border-bottom: 0; }
.pd-price__bag { font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.pd-price__amt, .pd-price__per { white-space: nowrap; }
.pd-price__amt { font-weight: 700; color: var(--ink); }
.pd-price__per { color: var(--muted); }
.pd-price__where a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-family: var(--sans); font-weight: 600; }
.pd-price__where a:hover { color: var(--blue-d); }
.pd-price__more { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.pd-price__live {
  display: inline-block; margin-left: 6px; font-size: 10px; letter-spacing: .12em;
  color: var(--green); vertical-align: 1px;
}
@media (max-width: 560px) {
  .pd-price__table th:nth-child(3), .pd-price__table td:nth-child(3) { display: none; }
}

.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"; }
/* In the product hero both compare controls are plain text links, like the
   "Buy on" retailer links under them: the page is for reading the food, and
   two boxed buttons outweighed everything above them. Scoped to .ph-cmp-row
   so the archive card's .cmp-add--btn keeps its button. min-height stays
   (from the 44px control rule) as the tap target; only the box goes. The
   pressed state drops the brick fill for ink text; the tick still says it. */
.ph-cmp-row .ph-compare,
.ph-cmp-row .cmp-add--hero {
  min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--blue); font-family: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px;
}
.ph-cmp-row .ph-compare:hover,
.ph-cmp-row .cmp-add--hero:hover { color: var(--blue-d); text-decoration: underline; text-decoration-thickness: 2px; }
.ph-cmp-row .cmp-add--hero[aria-pressed="true"] { background: none; color: var(--ink); }
.ph-cmp-row { gap: 4px 24px; }
/* 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-hit--img { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .cmp-hit--img .cmp-hit__img { grid-row: 1 / span 3; }
  .cmp-hit--img .cmp-hit__fig { grid-column: 2; grid-row: 3; }
  .cmp-hit--img .cmp-pick { grid-column: 3; grid-row: 1 / span 3; }
  /* Under 16px iOS zooms the page on focus. */
  .cmp-pq, .cmp-psel { font-size: 16px; }

  .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; }
  .cmp-hit--img { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .cmp-hit--img .cmp-hit__img { grid-row: 1 / span 4; align-self: start; }
  .cmp-hit--img .cmp-hit__fig { grid-column: 2; grid-row: 3; }
  .cmp-hit--img .cmp-pick { grid-column: 2; grid-row: 4; }

  /* 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; }
}

/* ============================================================
   Guides
   ------------------------------------------------------------
   Blog posts render here. They used to fall through index.php's
   generic branch, which put the whole article body inside .k-lede:
   one size, one colour, no hierarchy, and the h2/ul the writer typed
   came out looking exactly like the paragraphs around them.

   The `g-` prefix is the theme's, deliberately not `itk-`: the v2
   plugins own that namespace and a collision there costs the region
   its palette. Everything below is expressed in role tokens, so a
   different palette cut retints the guides with the rest of the site.
   ============================================================ */

/* ---- Index (home.php) and taxonomy archives (archive.php) ---- */
.g-head { border-bottom: 1px solid var(--rule); padding-bottom: var(--s3); }
.g-head__lede { margin-top: 14px; }

/* The filter row reuses .k-chip so a category link here is the same
   affordance as a sort link on the reviews screen. */
.g-cats { margin-top: var(--s3); }

.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: var(--s4); }

.g-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); background: var(--white);
  color: var(--ink);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.g-card:hover { text-decoration: none; color: inherit; border-color: var(--ink); }
.g-card__shot {
  aspect-ratio: 16 / 10; background: var(--panel);
  border-bottom: 1px solid var(--rule-lt); overflow: hidden;
}
.g-card__shot img { width: 100%; height: 100%; object-fit: cover; }
/* No featured image is a normal state here, not a bug. The slug stands in
   so the card keeps its shape instead of collapsing to a text block. */
.g-card__shot--none {
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px;
}
/* On a checker guide the verdict takes the well. Tint carries the meaning
   loosely; the word carries it properly, so this reads correctly in greyscale
   and with any colour vision deficiency. */
.g-ph__v {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(20px, 2.4vw, 28px); line-height: 1; letter-spacing: -.03em;
  text-transform: uppercase;
}
.g-card__shot--never   { background: var(--warn-bg); }
.g-card__shot--never   .g-ph__v { color: var(--red); }
.g-card__shot--caution { background: var(--row-alt); }
.g-card__shot--caution .g-ph__v { color: var(--amber); }
.g-card__shot--safe    { background: var(--ok-bg); }
.g-card__shot--safe    .g-ph__v { color: var(--green); }
/* News: a borrowed pack shot or brand logo, whole, never cropped. */
.g-card__shot--pack { display: flex; align-items: center; justify-content: center; background: var(--white); padding: 24px; }
.g-card__shot.g-card__shot--pack img { width: auto; height: auto; max-width: 70%; max-height: 100%; object-fit: contain; }
/* Everything else falls back to its category, set quietly. */
.g-ph__c {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--kicker-tracking);
  color: var(--muted); text-transform: uppercase;
}
.g-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.g-card__meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  color: var(--muted); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.g-card__cat { color: var(--blue); }
.g-card__dot { color: var(--rule-md); }
.g-card__title {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: 19px; line-height: 1.2; letter-spacing: var(--h3-tracking);
}
.g-card:hover .g-card__title { color: var(--blue); }
.g-card__ex { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.g-card__foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule-lt);
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  color: var(--muted); text-transform: uppercase;
}

/* The newest guide leads the index full width, lying on its side: image on one
   flank, text on the other. It went through two other shapes first and both
   fought the grid. Spanning two columns on one row left the third column
   holding a single card stretched to the lead's height with a void above its
   footer; spanning two rows as well fixed that but forced the lead's own shot
   into a ~660x800 portrait box, which crops landscape photography badly.
   Taking the whole row sidesteps both: the cards underneath stay a plain
   uniform 3-up, and the lead's image keeps a sane ratio. */
.g-card--lead { grid-column: 1 / -1; flex-direction: row; }
.g-card--lead .g-card__shot {
  flex: 0 0 52%; aspect-ratio: 16 / 10;
  border-bottom: 0; border-right: 1px solid var(--rule-lt);
}
/* Centred rather than top aligned, because the text block is shorter than the
   image beside it and hanging it off the top reads as a mistake. */
.g-card--lead .g-card__body { justify-content: center; padding: 32px; gap: 12px; }
.g-card--lead .g-card__title { font-size: clamp(23px, 2.6vw, 31px); }
.g-card--lead .g-card__ex { font-size: 16.5px; }
/* The auto margin is what pins the footer to the bottom on a normal card.
   Here the body is centred, so it has to sit with the text instead. */
.g-card--lead .g-card__foot { margin-top: 16px; }

/* ---- Single guide (single.php) ---- */
/* The bottom padding is load bearing: the footer is a dark band, and without
   it the last row of related cards butts straight into it with no gap. */
.g-wrap { max-width: 1180px; margin-inline: auto; padding: 30px var(--gutter) var(--s6); }

.g-hero { max-width: 76ch; }
.g-hero__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: var(--kicker-tracking);
  color: var(--muted); text-transform: uppercase;
}
.g-hero__cat { color: var(--blue); }
.g-hero__cat:hover { color: var(--blue-d); }
.g-hero__title {
  margin: 14px 0 0; font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(31px, 4.4vw, 54px); line-height: 1.03;
  letter-spacing: var(--h1-tracking); text-transform: var(--heading-case);
}
/* News headlines run long (2026-10-14, owner: "the h1s are too large"): smaller than guides. */
.g-hero--news .g-hero__title { font-size: clamp(26px, 3.1vw, 40px); line-height: 1.08; }
.g-hero__lede {
  margin: 20px 0 0; font-size: 19px; line-height: 1.55; color: var(--body);
  max-width: 62ch; text-wrap: pretty;
}
.g-shot {
  margin-top: var(--s4); border: 1px solid var(--rule); background: var(--panel);
}
.g-shot img { width: 100%; height: auto; }
.g-shot figcaption { margin: 0; padding: 8px 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* Body column plus a sticky rail. The rail is where the links out to the
   data live, so the prose never has to carry a call to action mid-sentence. */
.g-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s5); margin-top: var(--s5); align-items: start;
}

/* ---- Article body ----
   This is the part index.php never had. Everything the editor can emit
   gets a size, a rhythm and a colour, measured against --body-2 on --bg. */
.g-body { font-size: 18px; line-height: 1.72; color: var(--body-2); max-width: 68ch; }
.g-body > *:first-child { margin-top: 0; }
.g-body p { margin: 0 0 22px; }
.g-body h2 {
  margin: 46px 0 16px; font-family: var(--display); font-weight: 700;
  font-size: clamp(23px, 2.5vw, 29px); line-height: 1.12;
  letter-spacing: var(--h2-tracking); color: var(--ink);
  text-transform: var(--heading-case);
  padding-top: 18px; border-top: 2px solid var(--ink);
}
.g-body h3 {
  margin: 32px 0 12px; font-family: var(--display); font-weight: 700;
  font-size: 20px; line-height: 1.25; letter-spacing: var(--h3-tracking);
  color: var(--ink); text-transform: var(--heading-case);
}
.g-body ul, .g-body ol { margin: 0 0 22px; padding-left: 22px; }
.g-body li { margin-bottom: 10px; }
.g-body li::marker { color: var(--blue); }
.g-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.g-body a:hover { color: var(--blue-d); }
.g-body strong { color: var(--ink); font-weight: 700; }
.g-body blockquote {
  margin: 30px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue);
  font-size: 19px; line-height: 1.55; color: var(--ink);
}
.g-body blockquote p:last-child { margin-bottom: 0; }
.g-body img { margin: 30px 0; border: 1px solid var(--rule); }
/* Tables scroll inside their own box rather than widening the document.
   itk_v4_guide_wrap_tables() supplies the wrapper. */
.g-scroll { overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch; }
.g-scroll table { margin-bottom: 0; min-width: 440px; }
/* Opt out for compact number grids, such as the chocolate dose table, which
   fit a phone and must not hide a column behind a sideways scroll. */
.g-scroll table.g-fit { min-width: 0; }
.g-body table.g-fit th, .g-body table.g-fit td { padding: 11px 8px; }
.g-body table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 15.5px; }
.g-body th, .g-body td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--rule-lt); }
.g-body th {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--muted); border-bottom-color: var(--ink);
}
.g-body hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

/* The short version. Sits above the body so the answer is not buried.
   ------------------------------------------------------------
   Ground is --warm, which theme-v4b.css defines as "the reading callout".
   .ph-read already uses it for the plain-language reading under the
   composition bar on a product page, so a guide summary and a product
   reading now share one ground: both are the site talking to the reader
   rather than reporting a figure. It replaced --panel:
   sand is this site's DATA tone, carrying the packshot wells, the stat
   tiles and the guides strip, so a sand summary block read as one more
   data panel instead of as the answer to the headline. The hairline is
   --warm-line rather than the 2px ink rule for the same reason: the
   panel should be a change of ground, not a box shouting at the reader.
   Text stays --ink at full contrast. */
.g-tldr {
  border: 1px solid var(--warm-line); background: var(--warm);
  padding: 24px 26px; margin-bottom: var(--s4);
}
.g-tldr__k {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--ink);
}
.g-tldr ul { margin: 14px 0 0; padding-left: 20px; }
.g-tldr li { margin-bottom: 9px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.g-tldr li:last-child { margin-bottom: 0; }
.g-tldr li::marker { color: var(--blue); }

/* ---- Rail ---- */
.g-rail { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.g-box { border: 1px solid var(--rule); background: var(--white); padding: 20px; }
.g-box--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.g-box__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--muted);
}
.g-box--ink .g-box__k { color: var(--dark-kicker); }
.g-box__t {
  margin: 10px 0 0; font-family: var(--display); font-weight: 700;
  font-size: 18px; line-height: 1.2; letter-spacing: var(--h3-tracking);
}
.g-box__p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.g-box--ink .g-box__p { color: var(--dark-muted); }
.g-box .p-btn, .g-box .p-btn--primary { margin-top: 16px; width: 100%; justify-content: center; }

.g-toc { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: gtoc; }
.g-toc li { counter-increment: gtoc; border-top: 1px solid var(--rule-lt); }
.g-toc li:first-child { border-top: 0; }
.g-toc a {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px;
  padding: 10px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink);
}
.g-toc a::before {
  content: counter(gtoc, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 2px;
}
.g-toc a:hover { color: var(--blue); text-decoration: none; }

/* ---- Footer of the article ---- */
.g-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s4); }
.g-note {
  margin-top: var(--s4); padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 68ch;
}

.g-next { margin-top: var(--s5); }

/* ---- Homepage section ----
   No tint. It used to sit on --panel to separate itself from the white
   sections either side, but sand at full-bleed band scale reads muddy in a
   way the same tint does not at panel scale, and the rule below does the
   separating perfectly well. Same treatment as .k-section now. */
.g-strip { border-bottom: 1px solid var(--rule); }
.g-strip__in { max-width: var(--shell); margin-inline: auto; padding: var(--s6) var(--gutter); }
.g-strip .g-card { background: var(--white); }
.g-strip .g-grid { margin-top: var(--s4); }

/* ============================================================
   Guides: narrow
   ============================================================ */
@media (max-width: 1080px) {
  /* The rail's content is supplementary, so it drops under the article
     rather than squeezing the measure below comfortable. */
  .g-cols { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .g-rail { position: static; grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .g-grid { grid-template-columns: repeat(2, 1fr); }
  /* Side by side stops working once the row is only two cards wide: the text
     half gets too narrow to set. The lead goes back to a stacked card that
     happens to be full width. */
  .g-card--lead { flex-direction: column; }
  .g-card--lead .g-card__shot {
    flex: none; aspect-ratio: 16 / 9;
    border-right: 0; border-bottom: 1px solid var(--rule-lt);
  }
  .g-card--lead .g-card__body { justify-content: flex-start; padding: 24px; }
  .g-card--lead .g-card__foot { margin-top: auto; }
}

@media (max-width: 620px) {
  .g-grid { grid-template-columns: 1fr; }
  .g-card--lead .g-card__shot { aspect-ratio: 16 / 10; }
  .g-rail { grid-template-columns: 1fr; }
  .g-body { font-size: 17px; }
  .g-tldr { padding: 20px; }
  .g-wrap { padding-top: 22px; }
}

/* ============================================================
   Food checker
   ------------------------------------------------------------
   The /can-dogs-eat/ hub. Every row ships in the HTML and the filter only
   toggles [hidden], so the page still answers a hundred long-tail queries
   with JS off and still reads as one document to a crawler.

   The list is grouped A to Z under letter headings with a sticky jump rail.
   With JS off the rail's buttons do nothing, which is the right failure: the
   full list is still there in alphabetical order and still readable top to
   bottom. Nothing below hides a row until a script hides it.

   Verdict colours are the palette's semantic three, used semantically:
   --red for never, --amber for in-moderation, --green for safe. This is the
   one place in the guides where those tokens are correct rather than
   decorative, because the thing being coloured genuinely is a warning.
   ============================================================ */
.fc { margin-top: var(--s4); }

/* ---- Hero ----
   The page opens like the homepage does, because the search is the whole
   point of it and burying it under a section heading understated that. */
.fc-hero { border-bottom: 1px solid var(--rule); }
.fc-hero__in { max-width: var(--shell); margin-inline: auto; padding: var(--s6) var(--gutter); }
.fc-hero__h1 { margin-top: 14px; }
.fc-hero__lede { margin-top: 20px; }
.fc-hero__hint {
  margin: 14px 0 0; min-height: 1.4em;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* The homepage hero's box, carrying a popup. Relative so the listbox can
   hang off it, and z-index above the sticky chip bar below. */
.fc-search { position: relative; z-index: 20; }
.fc-search__input { text-transform: none; letter-spacing: .04em; font-size: 15px; }
.fc-search__input::placeholder { text-transform: uppercase; letter-spacing: .08em; }
.fc-search:focus-within { box-shadow: 0 0 0 3px var(--focus-ring); }
.fc-search__clear {
  flex: none; width: 52px; border: 0; border-left: 1px solid var(--rule);
  background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--muted);
}
.fc-search__clear:hover { color: var(--ink); }

/* ---- Suggestions ----
   Overlaps the list rather than pushing it down: the page must not reflow
   under the reader's eye on every keystroke. */
.fc-sug {
  position: absolute; top: 100%; left: -2px; right: -2px; z-index: 30;
  margin: 0; padding: 0; list-style: none;
  background: var(--white); border: var(--border-w) solid var(--ink); border-top: 0;
  max-height: 340px; overflow-y: auto;
}
.fc-sug__item {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px;
  align-items: baseline; padding: 13px 16px; cursor: pointer;
  border-top: 1px solid var(--rule-lt);
}
.fc-sug__item:first-child { border-top: 0; }
.fc-sug__item.is-active { background: var(--panel); }
.fc-sug__v {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; font-weight: 600;
}
.fc-sug__n { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }

.fc-wrap { padding-top: var(--s4); }

/* Two stacked rows, chips over the A to Z rail, both pinned under the
   masthead. The jump helpers in the template measure this element's height to
   work out where a scroll target has to land, so it stays position: sticky. */
.fc__controls {
  position: sticky; top: var(--header-h); z-index: 5;
  display: grid; gap: 10px;
  background: var(--bg); padding: 14px 0;
  border-bottom: var(--border-w) solid var(--ink);
}

.fc__filters { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- The A to Z rail ----
   All 26 letters are always present, whether or not anything falls under
   them, so the rail never reflows under a thumb when the filter changes.
   A letter with nothing live under it is dimmed and disabled instead. */
.fc-az {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-top: 1px solid var(--rule-lt); padding-top: 10px;
}
.fc-az__key {
  flex: 1 1 auto; min-width: 26px; min-height: 30px; padding: 0 2px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--body);
  font-family: var(--mono); font-size: 12px; font-weight: 600; text-transform: uppercase;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.fc-az__key:hover:not(.is-off) { border-color: var(--ink); color: var(--ink); }
/* The letter the reader is currently scrolled inside, set by the scrollspy. */
.fc-az__key.is-here { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.fc-az__key.is-off { color: var(--dim); cursor: default; }

/* ---- Letter groups ---- */
.fc-grp[hidden] { display: none; }
.fc-grp__h {
  display: flex; align-items: center; gap: 16px;
  margin: var(--s4) 0 6px; font-family: var(--mono); font-weight: 600;
}
.fc-grp:first-child .fc-grp__h { margin-top: var(--s3); }
.fc-grp__letter {
  font-size: 13px; letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  color: var(--on-ink); background: var(--ink); min-width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
}
.fc-grp__rule { flex: 1; height: 1px; background: var(--rule); }

/* ---- Back to top ----
   115 rows is a long way down, and the rail only moves you sideways through
   the alphabet. Hidden until the reader is well past the hero.

   Sits 88px up rather than in the corner: the collapsed reCAPTCHA badge is
   pinned bottom-right at 14px and stands 60px tall, and the two were landing
   on top of each other. Do not reduce this without checking the badge is
   still gone from the page. */
.fc-top {
  position: fixed; z-index: 40; right: 18px; bottom: 88px;
  min-height: 42px; padding: 0 16px; cursor: pointer;
  background: var(--white); border: var(--border-w) solid var(--ink); color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
}
.fc-top:hover { background: var(--ink); color: var(--on-ink); }
.fc-top[hidden] { display: none; }
.fc__chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--white); border-radius: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--ink);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.fc__chip:hover { border-color: var(--ink); }
.fc__chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.fc__n { font-size: 11px; color: var(--muted); }
.fc__chip.is-active .fc__n { color: var(--band-sub); }

.fc__list { list-style: none; margin: 0; padding: 0; }
.fc__row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 15px 4px; border-bottom: 1px solid var(--rule-lt);
}
.fc__row:hover { background: var(--row-alt); }

/* The row the search jumped to. Brick edge marks it after the wash fades,
   so the answer is still findable once the animation is over. */
.fc__row.is-hit {
  box-shadow: inset 3px 0 0 var(--blue);
  animation: fcHit 1.6s var(--ease) 1;
}
@keyframes fcHit {
  0%   { background: var(--lime); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .fc__row.is-hit { animation: none; background: var(--warm); }
}

.fc__verdict {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; font-weight: 600;
}
/* Colour is never the only carrier: the word itself says Never, In Moderation
   or Safe, so this still reads correctly in greyscale or with any CVD. */
.fc__verdict--never   { color: var(--red); }
.fc__verdict--caution { color: var(--amber); }
.fc__verdict--safe    { color: var(--green); }

.fc__food { display: grid; gap: 3px; }
.fc__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.fc__note { font-size: 15px; line-height: 1.5; color: var(--body); }

.fc__read {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; white-space: nowrap; color: var(--blue);
  border-bottom: 1px solid var(--rule);
}
.fc__read:hover { color: var(--blue-d); border-bottom-color: var(--blue); text-decoration: none; }

.fc__empty { margin: var(--s4) 0 0; font-size: 17px; line-height: 1.6; color: var(--body); }

.fc__foot {
  margin-top: var(--s4); padding: 24px 26px;
  background: var(--warm); border: 1px solid var(--warm-line);
}
.fc__foot p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--body-2); }
.fc__foot p:last-child { margin-bottom: 0; }
.fc__foot strong { color: var(--ink); }

@media (max-width: 720px) {
  /* Verdict moves above the name so the food is never squeezed into a
     third of the row on a phone. */
  .fc__row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: 4px 14px; padding: 16px 2px;
  }
  .fc__verdict { grid-column: 1 / -1; grid-row: 1; }
  .fc__food    { grid-column: 1;      grid-row: 2; }
  .fc__act     { grid-column: 2;      grid-row: 2; align-self: center; }
  .fc__controls { top: 0; }
  .fc-hero__in { padding-top: var(--s5); padding-bottom: var(--s5); }
  .fc-sug__item { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .fc__foot { padding: 20px; }

  /* The rail becomes a horizontal scroller rather than a wrapped grid: 26
     keys wrapped over three lines pushes the list off the screen. The
     scrollspy keeps the live letter scrolled into view inside it. */
  .fc-az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fc-az::-webkit-scrollbar { display: none; }
  .fc-az__key { flex: 0 0 auto; min-width: 32px; min-height: 34px; }
}

/* ---- Flashcard quiz ----
   A band between the hero and the list. Cards are dealt from the list rows by
   the page script, so there is no quiz data to keep in step. Hidden until
   that script runs: without JS the page is just the list. */
.fq[hidden], .fq-cta[hidden], .fq-end[hidden], .fq-card[hidden], .fq-end__miss[hidden] { display: none; }
.fq { background: var(--panel); border-bottom: 1px solid var(--rule); scroll-margin-top: var(--header-h); }
.fq__in {
  max-width: var(--shell); margin-inline: auto; padding: var(--s5) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s5); align-items: center;
}
.fq__h { margin-top: 12px; }
.fq__lede { margin: 18px 0 0; max-width: 42ch; font-size: 17px; line-height: 1.6; color: var(--body); }

.fq__stats { display: flex; gap: 10px; margin-top: var(--s3); }
.fq__stat {
  flex: 1 1 0; display: grid; gap: 4px; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--rule);
}
.fq__stat-k {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--muted);
}
.fq__stat-v { font-family: var(--display); font-weight: var(--display-weight); font-size: 26px; line-height: 1; color: var(--ink); }

.fq__pips { display: flex; gap: 4px; margin-top: 12px; }
.fq__pip { flex: 1 1 0; height: 6px; background: var(--rule-lt); }
.fq__pip.is-now { background: var(--ink); }
.fq__pip.is-ok  { background: var(--green); }
.fq__pip.is-no  { background: var(--red); }

.fq__keys {
  margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.fq__keys kbd {
  display: inline-block; min-width: 20px; padding: 1px 5px; margin: 0 2px 0 8px;
  border: 1px solid var(--rule); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 11px; text-align: center;
}
.fq__keys kbd:first-child { margin-left: 4px; }

/* ---- The card ----
   Both faces share one grid cell, so the card is always as tall as the
   taller face and never jumps in height as it turns. The offset slabs behind
   it are the deck. */
.fq__stage { position: relative; }
.fq-card {
  position: relative; display: grid; perspective: 1600px;
  margin: 0 12px 12px 0;
}
.fq-card::before, .fq-card::after {
  content: ""; position: absolute; inset: 0;
  background: var(--white); border: var(--border-w) solid var(--ink);
}
.fq-card::before { transform: translate(12px, 12px); }
.fq-card::after  { transform: translate(6px, 6px); }

.fq-card__face {
  grid-area: 1 / 1; position: relative; z-index: 1;
  display: flex; flex-direction: column; min-height: 360px; padding: 28px 30px;
  background: var(--white); border: var(--border-w) solid var(--ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s var(--ease);
}
.fq-card__back { transform: rotateY(180deg); }
.fq-card.is-flipped .fq-card__front { transform: rotateY(-180deg); }
.fq-card.is-flipped .fq-card__back  { transform: rotateY(0); }
.fq-card.is-ok .fq-card__back { background: var(--ok-bg); }
.fq-card.is-no .fq-card__back { background: var(--warn-bg); }
@media (prefers-reduced-motion: reduce) {
  .fq-card__face { transition: none; }
}

.fq-card__top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--muted);
}
.fq-card__result { font-weight: 600; color: var(--ink); }
.fq-card.is-ok .fq-card__result { color: var(--green); }
.fq-card.is-no .fq-card__result { color: var(--red); }

.fq-card__food {
  flex: 1; display: flex; align-items: center; margin: 18px 0;
  font-family: var(--display); font-weight: var(--display-weight);
  letter-spacing: -.03em; text-transform: var(--display-transform);
  font-size: clamp(34px, 5vw, 58px); line-height: .98; color: var(--ink);
  overflow-wrap: anywhere;
}
.fq-card__food--sm { flex: none; margin: 18px 0 0; font-size: clamp(22px, 2.6vw, 30px); }

.fq-card__ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fq-ans {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 8px 10px; cursor: pointer;
  background: var(--white); border: 2px solid var(--ink); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; line-height: 1.2;
  transition: background .14s var(--ease), color .14s var(--ease);
}
.fq-ans__k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1px solid currentColor; font-size: 11px; flex: none;
}
.fq-ans--safe:hover    { background: var(--green); border-color: var(--green); color: var(--on-ink); }
.fq-ans--caution:hover { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
.fq-ans--never:hover   { background: var(--red);   border-color: var(--red);   color: var(--on-ink); }
.fq-ans:focus-visible, .fq-next:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.fq-ans:disabled { cursor: default; }

.fq-card__verdict {
  margin: 10px 0 0; font-family: var(--display); font-weight: var(--display-weight);
  text-transform: var(--display-transform); letter-spacing: -.03em;
  font-size: clamp(36px, 5vw, 56px); line-height: 1;
}
.fq-card__note { flex: 1; margin: 14px 0 20px; font-size: 16.5px; line-height: 1.55; color: var(--body-2); }
.fq-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fq-card__said {
  font-family: var(--mono); font-size: 12px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--body);
}

.fq-next {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  margin-left: auto; cursor: pointer; border: 0;
  background: var(--blue); color: var(--on-blue);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase;
}
.fq-next:hover { background: var(--blue-d); }

/* ---- End of round ---- */
.fq-end {
  padding: 28px 30px; background: var(--white); border: var(--border-w) solid var(--ink);
  outline: none;
}
.fq-end__score {
  font-family: var(--display); font-weight: var(--display-weight); line-height: .9;
  font-size: clamp(64px, 9vw, 104px); letter-spacing: -.05em; color: var(--ink);
}
.fq-end__score small { font-size: .42em; color: var(--muted); letter-spacing: -.02em; }
.fq-end__line { margin: 12px 0 0; font-size: 18px; line-height: 1.5; color: var(--body-2); }
.fq-end__miss { margin-top: var(--s3); border-top: 1px solid var(--rule); }
.fq-end__h {
  margin: 16px 0 4px; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--muted);
}
.fq-end__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.fq-end__row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule-lt);
}
.fq-end__v {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase;
}
.fq-end__body { display: grid; gap: 2px; }
.fq-end__name { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.fq-end__said { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.fq-again { margin-left: 0; }

.fq-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  color: var(--blue); border-bottom: 1px solid var(--rule);
}
.fq-cta:hover { color: var(--blue-d); border-bottom-color: var(--blue); text-decoration: none; }

.fq-sr {
  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;
}

@media (max-width: 900px) {
  .fq__in { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-top: var(--s4); padding-bottom: var(--s4); }
  .fq__h br { display: none; }
}
@media (max-width: 560px) {
  .fq-card__face { min-height: 330px; padding: 22px 20px; }
  .fq-card__ask { grid-template-columns: minmax(0, 1fr); }
  .fq-ans { justify-content: flex-start; min-height: 48px; padding: 0 14px; }
  .fq__keys { display: none; }
  .fq-end { padding: 22px 20px; }
  .fq-end__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fq-end__list { max-height: none; overflow: visible; }
  .fq__stat { padding: 10px 12px; }
  .fq__stat-v { font-size: 22px; }
}

/* ---- Motion layer ----
   .fq-card__fly carries drag, fly-off and deal-in; the faces inside it only
   rotate. perspective sits on the fly so its own 2D transform never flattens
   the flip. touch-action pan-y keeps vertical page scroll with the browser and
   hands horizontal drags to the swipe code. */
.fq-card { perspective: none; }
.fq-card__fly {
  grid-area: 1 / 1; position: relative; z-index: 1;
  display: grid; perspective: 1600px;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
  cursor: grab; will-change: transform;
}
.fq-card.is-drag .fq-card__fly { cursor: grabbing; }
.fq-card.is-instant .fq-card__face { transition: none; }

/* Stamps fade in as the card is dragged toward an answer. */
.fq-stamp {
  position: absolute; top: 58px; z-index: 2; pointer-events: none; opacity: 0;
  padding: 4px 12px; border: var(--border-w) solid currentColor; background: var(--white);
  font-family: var(--display); font-weight: var(--display-weight);
  text-transform: uppercase; letter-spacing: .02em; font-size: 26px; line-height: 1.1;
}
.fq-stamp--safe  { left: 24px;  color: var(--green); transform: rotate(-12deg); }
.fq-stamp--never { right: 24px; color: var(--red);   transform: rotate(12deg); }

.fq-ans__i { display: none; width: 22px; height: 22px; flex: none; }
.fq-ans.fq-ans--safe.is-lit    { background: var(--green); border-color: var(--green); color: var(--on-ink); }
.fq-ans.fq-ans--never.is-lit   { background: var(--red);   border-color: var(--red);   color: var(--on-ink); }

.fq-card__result { display: inline-flex; align-items: center; gap: 8px; }
.fq-card__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 13px; line-height: 1; color: var(--on-ink);
  background: var(--ink); letter-spacing: 0;
}
.fq-card.is-ok .fq-card__mark { background: var(--green); }
.fq-card.is-no .fq-card__mark { background: var(--red); }

.fq__stat-v { display: block; transform-origin: left center; }

/* Streak callout. Hangs over the top edge of the card, then gets out of the way. */
.fq-toast {
  position: absolute; z-index: 5; top: -20px; left: 50%;
  margin: 0; padding: 9px 16px; white-space: nowrap; pointer-events: none;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  opacity: 0; transform: translate(-50%, 8px);
}
.fq-toast.is-on { animation: fqToast 2s var(--ease) 1 both; }
@keyframes fqToast {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.9); }
  14%  { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  24%  { transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(1); }
}

.fq-swipe {
  margin: 20px 12px 0 0; text-align: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--muted);
}
.fq-swipe:empty { display: none; }

/* Confetti and sad faces. Above everything, never in the way of a tap. */
.fq-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .fq-toast.is-on { animation: none; opacity: 1; transform: translate(-50%, 0); }
}

/* ---- Phone ----
   Card first, controls in a thumb dock. The dock runs Never, Moderation,
   Safe left to right so the buttons sit on the same sides as the swipes. */
@media (max-width: 560px) {
  .fq__lede { display: none; }
  .fq__h { font-size: 30px; }
  .fq__in { gap: var(--s3); }
  .fq__stats { margin-top: 14px; gap: 6px; }
  .fq__stat { padding: 8px 10px; gap: 2px; }
  .fq__stat-v { font-size: 20px; }
  .fq-card__face { min-height: 380px; }
  .fq-card__food { justify-content: center; text-align: center; font-size: clamp(34px, 11vw, 48px); }
  .fq-card__food--sm { justify-content: flex-start; text-align: left; font-size: 24px; }
  .fq-card__ask { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fq-ans {
    flex-direction: column; justify-content: center; gap: 6px;
    min-height: 72px; padding: 8px 4px;
    font-size: 11px; letter-spacing: .06em; text-align: center;
  }
  .fq-ans__k { display: none; }
  .fq-ans__i { display: block; }
  .fq-ans--never   { order: 1; }
  .fq-ans--caution { order: 2; }
  .fq-ans--safe    { order: 3; }
  .fq-ans--safe:hover, .fq-ans--caution:hover, .fq-ans--never:hover { background: var(--white); color: var(--ink); border-color: var(--ink); }
  .fq-ans--safe:active    { background: var(--green); color: var(--on-ink); }
  .fq-ans--caution:active { background: var(--amber); color: var(--on-amber); }
  .fq-ans--never:active   { background: var(--red);   color: var(--on-ink); }
  .fq-stamp { top: 54px; font-size: 22px; }
  .fq-card__foot { flex-direction: column; align-items: stretch; }
  .fq-next { justify-content: center; margin-left: 0; }
  .fq-card__said { text-align: center; }
}

/* ---- Quiz end: share row ---- */
.fq-share { margin-top: var(--s3); padding-top: 16px; border-top: 1px solid var(--rule); }
.fq-share__h {
  margin: 0 0 10px; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--muted);
}
.fq-share__row { display: flex; flex-wrap: wrap; gap: 8px; }
.fq-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 14px; cursor: pointer;
  background: var(--white); border: 1px solid var(--ink); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.fq-share__btn:hover { background: var(--ink); color: var(--on-ink); text-decoration: none; }
.fq-share__btn--main { background: var(--ink); color: var(--on-ink); }
.fq-share__btn[hidden] { display: none; }
.fq-end__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: var(--s3); }
.fq-end__acts .fq-again { margin: 0; }
.fq-end__all {
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--blue); border-bottom: 1px solid var(--rule);
}
.fq-end__all:hover { color: var(--blue-d); text-decoration: none; border-bottom-color: var(--blue); }

/* ---- /food-quiz/, the share page ----
   The whole first screen is the game. svh, not vh, so a phone's collapsing
   address bar never pushes the answer dock below the fold. */
.fq--landing {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: center;
}
.fq--landing .fq__in {
  width: 100%; max-width: 620px; grid-template-columns: minmax(0, 1fr);
  gap: var(--s3); padding-top: var(--s4); padding-bottom: var(--s4);
}
.fq--landing .fq__in[hidden], .fql-start[hidden] { display: none; }
.fq--landing .fq__intro .k-kicker,
.fq--landing .fq__h,
.fq--landing .fq__lede,
.fq--landing .fq__keys { display: none; }
.fq--landing .fq__stats { margin-top: 0; }

.fql-start {
  width: 100%; max-width: var(--shell); margin-inline: auto; padding: var(--s5) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s5); align-items: center;
}
.fql-start__h {
  margin: 14px 0 0; font-family: var(--display); font-weight: var(--display-weight);
  text-transform: var(--display-transform); letter-spacing: var(--display-tracking);
  font-size: clamp(46px, 7.4vw, 104px); line-height: .9; color: var(--ink);
}
.fql-start__h span { display: block; color: var(--blue); }
.fql-start__lede { margin: 22px 0 0; max-width: 40ch; font-size: 18px; line-height: 1.55; color: var(--body); }
.fql-go {
  display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s4);
  min-height: 62px; padding: 0 30px; cursor: pointer; border: 0;
  background: var(--blue); color: var(--on-blue);
  font-family: var(--mono); font-size: 15px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.fql-go:hover { background: var(--blue-d); transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.fql-go:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.fql-go:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.fql-start__fine {
  margin: 18px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* A fanned hand of three cards: tells a reader from a feed "this is a card
   game" before they have read a word. */
.fql-fan { position: relative; height: 380px; }
.fql-fan__c {
  position: absolute; top: 50%; left: 50%; width: 250px; height: 320px; margin: -160px 0 0 -125px;
  display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center;
  background: var(--white); border: var(--border-w) solid var(--ink);
  font-family: var(--display); font-weight: var(--display-weight); text-transform: var(--display-transform);
  letter-spacing: -.03em; font-size: 34px; line-height: 1; color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}
.fql-fan__c--1 { transform: translate(-70px, 16px) rotate(-14deg); color: var(--muted); }
.fql-fan__c--2 { transform: translate(70px, 16px) rotate(12deg); color: var(--muted); }
.fql-fan__c--3 { transform: rotate(-2deg); background: var(--lime); animation: fqlFloat 3.6s ease-in-out infinite; }
@keyframes fqlFloat {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(1deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .fql-fan__c--3 { animation: none; } }

.fql-more { text-align: left; }
.fql-more__p { margin-top: 10px; }
.fql-more__p a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 900px) {
  .fql-start { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-top: var(--s3); }
  .fql-fan { order: -1; height: 230px; }
  .fql-fan__c { width: 160px; height: 200px; margin: -100px 0 0 -80px; font-size: 24px; box-shadow: 4px 4px 0 var(--ink); }
  .fql-fan__c--1 { transform: translate(-58px, 12px) rotate(-14deg); }
  .fql-fan__c--2 { transform: translate(58px, 12px) rotate(12deg); }
}
@media (max-width: 560px) {
  .fql-start__h { font-size: clamp(44px, 14vw, 60px); }
  .fql-start__lede { font-size: 16.5px; margin-top: 14px; }
  .fql-go { width: 100%; justify-content: center; margin-top: var(--s3); }
  .fq--landing { justify-content: flex-start; }
  .fq--landing .fq__in { padding-top: 16px; padding-bottom: 24px; gap: 14px; }
  .fq-share__row { display: grid; grid-template-columns: 1fr 1fr; }
  .fq-share__btn--main { grid-column: 1 / -1; }
  .fq-end__acts { flex-direction: column; align-items: stretch; }
  .fq-end__acts .fq-again { justify-content: center; }
  .fq-end__all { align-self: center; }
}

/* ---- Guides index promo ----
   The one banner on the guides index, pointing at the checker. Sits on --ink
   because it is competing with a grid of white cards directly beneath it and
   a tint would not separate from them. */
.g-promo {
  display: grid; gap: 6px; margin-top: var(--s4);
  padding: 26px 28px; background: var(--ink); color: var(--on-ink);
  border: var(--border-w) solid var(--ink);
  transition: background .16s var(--ease);
}
.g-promo:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); text-decoration: none; }
.g-promo__k {
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--band-sub);
}
.g-promo:hover .g-promo__k { color: var(--on-blue-soft, var(--on-blue)); }
.g-promo__t {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.6vw, 30px); line-height: 1.05; letter-spacing: var(--h2-tracking);
  text-transform: var(--heading-case);
}
.g-promo__p { font-size: 16px; line-height: 1.55; color: var(--band-sub); max-width: 62ch; }
.g-promo:hover .g-promo__p { color: var(--on-blue-soft, var(--on-blue)); }
.g-promo__cta {
  margin-top: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .g-promo { padding: 22px; }
}

/* Study banner: the light twin of the Food Checker promo, so the two never read as one block. */
.g-promo--study { background: var(--panel); color: var(--ink); border-color: var(--ink); }
.g-promo--study .g-promo__k, .g-promo--study .g-promo__p { color: var(--body); }
.g-promo--study:hover .g-promo__k, .g-promo--study:hover .g-promo__p { color: var(--on-blue-soft, var(--on-blue)); }
.hr-study .g-promo { margin-top: var(--s3, 24px); }


/* ── Discontinued notice (functions/discontinued.php) ── */
.pdisc { margin: 0 0 28px; padding: 18px 20px; border: 1px solid var(--warn-line); border-left: 3px solid var(--amber); background: var(--warn-bg); border-radius: var(--radius); }
.pdisc-kicker { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink); }
.pdisc-title { margin: 6px 0 6px; font-size: 20px; line-height: 1.3; color: var(--ink-hi); }
.pdisc-note { margin: 0; color: var(--body-2); font-size: 15px; }
.pdisc-note a { color: var(--blue); }
.pdisc-alts { margin-top: 16px; }
.pdisc-alts__label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--muted); }
.pdisc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pdisc-card a { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; align-items: center; height: 100%; padding: 10px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.pdisc-card a:hover { border-color: var(--blue); }
.pdisc-card__img { grid-row: span 2; width: 56px; height: 56px; }
.pdisc-card__img img { width: 56px; height: 56px; object-fit: contain; }
.pdisc-card__name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pdisc-card__nums { font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .pdisc-list { grid-template-columns: minmax(0, 1fr); } }

/* Brand identity row links to the brand / line archives. */
.ph-brand__link { display: flex; }
.ph-brand__link:hover .ph-brand__logo { border-color: var(--ink); }
.ph-brand__name a { color: inherit; text-decoration: none; }
.ph-brand__name a:hover, .ph-brand__name a:focus-visible { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Brand dossier (functions/brand-page.php) on /brands/ archives
   ============================================================ */
.bp-hero { padding: 6px 0 26px; }
.bp-hero .pd-crumbs { margin-bottom: 22px; }
.bp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 36px; align-items: start; }
.bp-hero__top { display: flex; align-items: center; gap: 20px; }
.bp-logo {
  width: 84px; height: 84px; flex: 0 0 84px; overflow: hidden;
  border: 1px solid var(--rule); background: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.bp-logo img { width: 100%; height: 100%; object-fit: contain; }
.bp-logo__mono { font-size: 34px; font-weight: 800; color: var(--muted); }
.bp-title {
  margin: 6px 0 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px); line-height: .98; letter-spacing: -.04em;
}
.bp-meta { margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: var(--body); }
.bp-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bp-meta a:hover { color: var(--blue); }
.bp-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; border: 1px solid var(--rule); }
.bp-stat { padding: 16px 20px; border-left: 1px solid var(--rule); }
.bp-stat:first-child { border-left: 0; }
.bp-stat__k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.bp-stat__v { margin-top: 8px; font-family: var(--mono); font-size: 25px; font-weight: 700; letter-spacing: -.02em; }
.bp-jump { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.bp-jump a { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.bp-jump a:hover { color: var(--blue); border-color: var(--blue); text-decoration: none; }

.bp-links { border: 1px solid var(--ink); background: var(--white); padding: 20px 22px; }
.bp-links__group + .bp-links__group { margin-top: 18px; }
.bp-links__k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--muted); }
.bp-links ul { list-style: none; margin: 8px 0 0; padding: 0; }
.bp-links li a {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--rule); color: var(--ink); font-size: 15px; font-weight: 600;
}
.bp-links li a:hover { color: var(--blue); text-decoration: none; }
.bp-links__host { font-family: var(--mono); color: var(--muted); }
.bp-links li a:hover .bp-links__host { color: var(--blue); }
.bp-links__note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }

.bp-lines { margin-top: 26px; }
.bp-lines .k-chips { margin-top: 10px; }

/* Deep dive */
.bp-dive { margin-top: 54px; }
.bp-read { margin-top: 22px; max-width: var(--measure); background: var(--warm); padding: 20px 24px; border-left: var(--border-w) solid var(--blue); }
.bp-read p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.bp-read p + p { margin-top: 8px; }
.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; align-items: start; }
.bp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bp-h4 { margin: 26px 0 4px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }

.bp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.bp-legend > span { white-space: nowrap; }
.bp-key { display: inline-block; width: 18px; height: 10px; margin-left: 6px; vertical-align: middle; }
.bp-key:first-child { margin-left: 0; }
.bp-key--band { background: var(--lime); border: 1px solid var(--ink); }
.bp-key--avg { width: 4px; height: 14px; background: var(--blue); }
.bp-key--site { width: 0; height: 14px; border-left: 2px dashed var(--ink); }

.bp-range { margin-top: 22px; }
.bp-range__label { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bp-range__label b { font-family: var(--mono); font-size: 18px; color: var(--blue); }
.bp-range__span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.bp-range__track { position: relative; display: block; height: 18px; margin-top: 8px; background: var(--panel); border: 1px solid var(--rule); }
.bp-range__band { position: absolute; top: 3px; bottom: 3px; background: var(--lime); border: 1px solid var(--ink); }
.bp-range__avg { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: var(--blue); }
.bp-range__site { position: absolute; top: -6px; bottom: -6px; margin-left: -1px; border-left: 2px dashed var(--ink); }
.bp-range__scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); }

.bp-share { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px 44px; gap: 12px; align-items: center; margin-top: 10px; }
.bp-share--head { margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--muted); }
.bp-share__label { font-size: 14px; font-weight: 600; }
.bp-share__track { position: relative; height: 12px; background: var(--panel); }
.bp-share__bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); }
.bp-share__site { position: absolute; top: -3px; bottom: -3px; margin-left: -1px; border-left: 2px dashed var(--ink); }
.bp-share__v { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: right; }
.bp-share__s { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }

.bp-cover { list-style: none; margin: 12px 0 0; padding: 0; }
.bp-cover li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.bp-cover b { font-family: var(--mono); font-size: 14px; }

.bp-standouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.bp-so { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--rule); background: var(--white); color: inherit; }
.bp-so:hover { border-color: var(--ink); text-decoration: none; color: inherit; }
.bp-so__img { width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: var(--panel); }
.bp-so__img img { width: 100%; height: 100%; object-fit: contain; }
.bp-so__name { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.bp-so:hover .bp-so__name { color: var(--blue); }
.bp-so__v { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

.bp-company { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 44px; align-items: start; }
.bp-facts { margin: 22px 0 0; }
.bp-facts div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); }
.bp-facts dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bp-facts dd { margin: 0; font-size: 14.5px; font-weight: 600; text-align: right; }
.bp-company__body { max-width: var(--measure); }
.bp-company__body .bp-h4:first-child { margin-top: 0; }
.bp-company__body p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--body); }
.bp-company__body sup { margin-left: 2px; font-family: var(--mono); font-size: 10.5px; }
.bp-cites { margin: 24px 0 0; padding-left: 22px; font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--muted); }
.bp-cites a { color: var(--muted); word-break: break-all; }
.bp-cites a:hover { color: var(--blue); }

.bp-news__kind { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; font-weight: 600; color: var(--blue); }
.bp-news__title { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.bp-news__title:hover { color: var(--blue); }
.bp-news__src { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

@media (max-width: 1100px) {
  .bp-hero__grid, .bp-company { grid-template-columns: 1fr; gap: 26px; }
  .bp-standouts, .bp-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .bp-stats { grid-template-columns: 1fr 1fr; }
  .bp-stat:nth-child(3) { border-left: 0; }
  .bp-stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .bp-grid, .bp-grid--3, .bp-standouts { grid-template-columns: 1fr; }
  .bp-share { grid-template-columns: 110px minmax(0, 1fr) 40px 40px; gap: 8px; }
  .bp-logo { width: 64px; height: 64px; flex-basis: 64px; }
}
/* Social accounts as a compact chip row, so the link panel stays shorter than the identity column. */
.bp-links__group--follow ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bp-links__group--follow li a { padding: 6px 10px; border: 1px solid var(--rule); font-size: 13.5px; gap: 6px; }
.bp-links__group--follow li a:hover { border-color: var(--ink); }

/* ---- Complete guaranteed analysis: button in the GA box, native <dialog> modal ---- */
.pd-ga__more {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; line-height: 1.65; color: var(--blue);
  text-decoration: underline; text-underline-offset: 2px;
}
.pd-ga__more:hover, .pd-ga__more:focus-visible { color: var(--blue-d); }
.pd-gamodal {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
  padding: 26px 24px; border: var(--border-w, 3px) solid var(--ink); border-radius: 0;
  background: var(--white); color: var(--ink);
}
.pd-gamodal::backdrop { background: rgba(20, 18, 16, .55); }
.pd-gamodal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pd-gamodal__close {
  flex: none; width: 40px; height: 40px; border: var(--border-w, 3px) solid var(--ink); background: var(--white);
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink);
}
.pd-gamodal__close:hover { background: var(--ink); color: var(--white); }
.pd-gamodal .pd-ga__row dt { font-weight: 500; }

/* ---- Homepage featured: format tabs + "show all" into the filtered archive ---- */
.k-ftabs { margin-top: 0; }
.k-ftabs .k-chip { cursor: pointer; }
.k-fall {
  display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; padding: 12px 18px;
  border: var(--border-w, 3px) solid var(--ink); background: var(--white); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
}
.k-fall:hover { background: var(--ink); color: var(--white); text-decoration: none; }

/* ============================================================
   Footer, reorganised 2026-09-29
   Sign-up band posts to recall alerts (see footer.php). Contact,
   privacy and terms moved out of SAFETY into the legal row.
   ============================================================ */
.itk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.k-band { position: relative; }
.k-band__msg {
  max-width: 470px; margin: 14px auto 0; font-family: var(--sans); font-size: 15px; line-height: 1.5;
  color: var(--bg);
}
.k-band__msg[data-tone="ok"]::before  { content: "\2713  "; color: var(--lime); font-weight: 700; }
.k-band__msg[data-tone="bad"]         { color: #F2B8A6; }
.k-band__fine {
  margin-top: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--dark-link);
}
.k-band__form button:disabled { opacity: .5; cursor: progress; }

.k-footer__cols nav { min-width: 0; }
.k-footer__disclose {
  margin: 40px 0 0; max-width: 88ch;
  font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--dark-link);
}
.k-footer__disclose + .k-footer__legal { margin-top: 18px; }
.k-footer__legal { align-items: center; }
.k-footer__legalnav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.k-footer__legalnav a {
  color: var(--dark-link); text-decoration: none; display: inline-flex; align-items: center; min-height: 34px;
}
.k-footer__legalnav a:hover { color: var(--bg); text-decoration: underline; text-underline-offset: 3px; }

/* The same alerts script writes into the light panel on the recall log. */
.p-panel .itk-alerts-msg { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.p-panel .itk-alerts-msg[data-tone="ok"]  { color: var(--green); font-weight: 600; }
.p-panel .itk-alerts-msg[data-tone="bad"] { color: var(--red); font-weight: 600; }

@media (max-width: 860px) {
  .k-footer__legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ============================================================
   Brand vs brand (/compare/<a>-vs-<b>/ and /compare/brands/)
   functions/brand-vs.php + brand-vs.php. Reuses the pd- product
   components for boxes, kickers and recalls; bvs- is layout only.
   Role tokens only, no hex.
   ============================================================ */
.bvs { max-width: var(--shell); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.bvs-hero { padding: 6px 0 10px; }
.bvs-hero__h { margin-top: 12px; }
.bvs-hero__h span { color: var(--blue); }
.bvs-hero__lede { margin: 18px 0 0; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--body); }

/* The arcade versus cover (product-research/bvs-cards). Its art is a picture, so no tokens apply inside it. */
.bvs-cover { margin: var(--s4) 0 0; max-width: 820px; border: var(--border-w) solid var(--ink); background: var(--ink); }
.bvs-cover img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }

.bvs-face {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px;
  margin-top: var(--s4); max-width: 760px;
}
.bvs-face__side {
  display: grid; justify-items: center; gap: 6px; padding: 22px 16px; text-align: center;
  background: var(--white); border: var(--border-w) solid var(--ink); color: var(--ink);
}
.bvs-face__side:hover { text-decoration: none; background: var(--panel); }
.bvs-face__logo { display: flex; align-items: center; justify-content: center; height: 72px; width: 100%; }
.bvs-face__img { max-height: 72px; max-width: 180px; width: auto; height: auto; object-fit: contain; }
.bvs-face__word { font-family: var(--display); font-weight: var(--display-weight); text-transform: var(--display-transform); font-size: 26px; letter-spacing: -.02em; }
.bvs-face__name { font-weight: 700; font-size: 17px; }
.bvs-face__meta { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bvs-face__vs {
  align-self: center; font-family: var(--display); font-weight: var(--display-weight);
  text-transform: uppercase; font-size: 26px; color: var(--blue);
}

.bvs-same { margin-top: var(--s4); }
.bvs-same p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--body-2); }

.bvs-sec { margin-top: var(--s5); }
.bvs-sec > .pd-h2 { margin-top: 10px; }
.bvs-sec__intro { max-width: 70ch; }

.bvs-reads { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 78ch; }
.bvs-reads li {
  position: relative; padding: 14px 16px 14px 44px; background: var(--warm); border: 1px solid var(--warm-line);
  font-size: 16.5px; line-height: 1.55; color: var(--body-2);
}
.bvs-reads li::before {
  content: ""; position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; background: var(--blue);
}
.bvs-reads--fit li::before { background: var(--green); }

/* The table scrolls sideways on its own on a phone rather than the page. */
.bvs-tablewrap { margin-top: 18px; overflow-x: auto; border: var(--border-w) solid var(--ink); background: var(--white); }
.bvs-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.bvs-table th, .bvs-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule-lt); }
.bvs-table thead th {
  border-top: 0; background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.bvs-table tbody th { width: 28%; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.bvs-table td { width: 27%; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.bvs-table .bvs-table__avg { width: 18%; color: var(--muted); font-size: 13.5px; }
.bvs-table thead .bvs-table__avg { color: var(--band-sub); }
.bvs-table tbody tr:nth-child(even) { background: var(--row-alt); }
.bvs-v { display: block; font-family: var(--mono); font-size: 17px; color: var(--ink); }
.bvs-range { display: block; margin-top: 2px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bvs-na { color: var(--muted); font-size: 13px; }

.bvs-h2h { display: grid; gap: 14px; margin-top: 18px; }
.bvs-h2h__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch;
  padding: 16px; background: var(--panel); border: 1px solid var(--rule);
}
.bvs-h2h__food {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 14px;
  padding: 12px; background: var(--white); border: 1px solid var(--ink); color: var(--ink);
}
.bvs-h2h__food:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink); }
.bvs-h2h__img { grid-row: 1 / span 2; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; }
.bvs-h2h__img img { max-width: 76px; max-height: 76px; width: auto; height: auto; object-fit: contain; }
.bvs-h2h__t { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.bvs-h2h__f { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.bvs-h2h__f b { color: var(--ink); font-weight: 600; }
.bvs-h2h__vs { align-self: center; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.bvs-h2h__go {
  grid-column: 1 / -1; justify-self: end;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); border-bottom: 1px solid var(--rule);
}
.bvs-h2h__go:hover { color: var(--blue-d); text-decoration: none; border-bottom-color: var(--blue); }

.bvs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.bvs-two .pd-recall:first-of-type { margin-top: 12px; }
.bvs-who { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--body-2); }

.bvs-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bvs-more__a { padding: 0 14px; border: 1px solid var(--rule); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 600; }
.bvs-more__a:hover { border-color: var(--ink); text-decoration: none; }
.bvs-more__all { color: var(--blue); }

.bvs-method { margin-top: var(--s4); padding-top: 16px; border-top: 1px solid var(--rule); max-width: 80ch; }

/* ---- Hub ---- */
.bvs-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: var(--s4); }
.bvs-hub__card {
  display: grid; gap: 6px; padding: 18px; background: var(--white); border: 1px solid var(--ink); color: var(--ink);
}
.bvs-hub__cover { display: block; width: calc(100% + 36px); max-width: none; height: auto; aspect-ratio: 3 / 2; margin: -18px -18px 6px; border-bottom: 1px solid var(--ink); }
.bvs-hub__card:hover { text-decoration: none; background: var(--panel); box-shadow: inset 0 0 0 1px var(--ink); }
.bvs-hub__names { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.bvs-hub__names em { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin: 0 4px; }
.bvs-hub__fig { font-family: var(--mono); font-size: 12.5px; color: var(--body); }
.bvs-hub__n { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  .bvs-face { gap: 8px; }
  .bvs-face__side { padding: 14px 8px; }
  .bvs-face__logo { height: 48px; }
  .bvs-face__img { max-height: 48px; max-width: 120px; }
  .bvs-face__word { font-size: 19px; }
  .bvs-face__vs { font-size: 18px; }
  .bvs-hero__lede { font-size: 16.5px; }
  .bvs-h2h__row { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .bvs-h2h__vs { justify-self: center; }
  .bvs-h2h__go { justify-self: center; }
  .bvs-two { grid-template-columns: minmax(0, 1fr); }
}
.bvs-archive { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 12px; }
.bvs-archive summary {
  cursor: pointer; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.bvs-archive summary:hover { color: var(--ink); }
.bvs-archive .pd-recall { opacity: .85; }
.bvs-onbrand { margin-top: 24px; }

/* ---- Flashcard photo: beside the name on desktop, above it on phones. White-ground photos multiply into the card. ---- */
.fq-card__mid { flex: 1; display: flex; align-items: center; gap: 24px; min-height: 0; }
.fq-card__mid .fq-card__food { flex: 1 1 auto; margin: 18px 0; }
.fq-card__pic { flex: 0 0 42%; max-width: 280px; align-self: center; }
.fq-card__pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 720px) {
  .fq-card__mid { flex-direction: column-reverse; justify-content: center; gap: 4px; }
  .fq-card__mid .fq-card__food { flex: none; margin: 6px 0 14px; }
  .fq-card__pic { flex: none; width: 62%; max-width: 240px; }
}

/* ---- Flashcard quiz: focus mode ----
   food-quiz.js pins the whole .fq section over the page as a full-screen
   stage (.is-focus) and locks scroll on <html>, not <body>, so the sticky
   header survives (see the My Dogs sheet trap). dvh with a vh fallback, and
   safe-area padding for notched phones. Sits above the My Dogs launcher
   (99990) and below its panel and sheet (100000+). Inside the stage the card
   takes whatever height is left, so the round never scrolls; only the end
   screen may, when the missed list is long. */
.fq-bar, .fq-open { display: none; }
.fq-dare[hidden], .fq.is-focus .fq-dare[hidden] { display: none; }
html.fq-locked { overflow: hidden; }
/* The collapsed reCAPTCHA badge would sit on top of the Safe button. It is
   only hidden while the stage is open; no form lives in the stage. */
html.fq-locked .grecaptcha-badge { visibility: hidden; }
.fq-fx { z-index: 99996; }

.fq--embed:not(.is-focus) { cursor: pointer; }
.fq--embed:not(.is-focus) .fq-open { display: inline-flex; margin-top: var(--s3); }
.fq--embed:not(.is-focus) .fq-card__fly { cursor: pointer; }
.fq--embed:not(.is-focus) .fq-swipe { display: none; }

.fq.is-focus {
  position: fixed; inset: 0; z-index: 99995;
  height: 100vh; height: 100dvh; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border: 0; overflow: hidden; overscroll-behavior: contain;
  background: var(--panel);
  animation: fqStage .32s var(--ease) both;
}
@keyframes fqStage {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .fq.is-focus { animation: none; } }

.fq.is-focus .fq-bar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 56px; padding: 0 var(--gutter);
  background: var(--bg); border-bottom: var(--border-w) solid var(--ink);
}
.fq-bar__t {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink);
}
.fq-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer;
  background: var(--white); border: 2px solid var(--ink); color: var(--ink);
  font-size: 28px; line-height: 1;
}
.fq-x:hover { background: var(--ink); color: var(--on-ink); }
.fq-x:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.fq.is-focus .fql-start { display: none; }
.fq.is-focus .fq__in {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 16px var(--gutter) 18px;
  display: flex; flex-direction: column; align-items: stretch; gap: 14px;
}
.fq.is-focus .fq__in[hidden] { display: none; }
.fq.is-focus .fq__intro { flex: none; }
.fq.is-focus .fq__intro .k-kicker,
.fq.is-focus .fq__h,
.fq.is-focus .fq__lede,
.fq.is-focus .fq__keys { display: none; }
.fq.is-focus .fq__stats { margin-top: 0; gap: 6px; }
.fq.is-focus .fq__stat { padding: 8px 12px; gap: 2px; }
.fq.is-focus .fq__stat-v { font-size: 22px; }
.fq.is-focus .fq__pips { margin-top: 10px; }

.fq.is-focus .fq__stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fq.is-focus .fq-card { flex: 1 1 auto; min-height: 0; max-height: 620px; grid-template-rows: minmax(0, 1fr); }
.fq.is-focus .fq-card[hidden] { display: none; }
.fq.is-focus .fq-card__fly { min-height: 0; grid-template-rows: minmax(0, 1fr); }
.fq.is-focus .fq-card__face { min-height: 0; overflow: hidden; padding: 22px 24px; }
.fq.is-focus .fq-card__mid { min-height: 0; }
.fq.is-focus .fq-card__pic img { max-height: min(28vh, 240px); max-height: min(28dvh, 240px); width: auto; max-width: 100%; margin-inline: auto; }
.fq.is-focus .fq-card__note { min-height: 0; overflow-y: auto; }
.fq.is-focus .fq-swipe { margin-top: 10px; }
.fq.is-focus .fq-end {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.fq.is-focus .fq-end__list { max-height: none; overflow: visible; }

/* The dare: the invitation that opens the stage. Copy on the left, the
   share page's fanned hand of cards on the right; one column on phones. */
.fq.is-focus .fq-dare {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: var(--s4) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s5); align-items: center;
  overflow-y: auto;
}
.fq-dare__copy { display: flex; flex-direction: column; align-items: flex-start; }
@media (max-width: 900px) {
  .fq.is-focus .fq-dare { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .fq-dare .fql-fan { display: none; }
}
.fq-dare__h {
  margin: 14px 0 0; font-family: var(--display); font-weight: var(--display-weight);
  text-transform: var(--display-transform); letter-spacing: var(--display-tracking);
  font-size: clamp(40px, 6.4vw, 84px); line-height: .92; color: var(--ink);
}
.fq-dare__h span { display: block; color: var(--blue); }
.fq-dare__lede { margin: 20px 0 0; max-width: 44ch; font-size: 18px; line-height: 1.55; color: var(--body); }
.fq-dare .fq-dare__go { margin-top: var(--s4); }
.fq-dare__no {
  margin-top: 14px; min-height: 44px; padding: 0; cursor: pointer; background: none; border: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.fq-dare__no:hover { color: var(--ink); }
.fq-dare__fine {
  margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* "Your friend scored 4/10", from a shared ?beat= link. */
.fq-beat {
  display: inline-block; margin: 14px 0 0; padding: 8px 14px;
  background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.fq-beat[hidden] { display: none; }

/* Short screens (landscape phones, small laptops): tighten before anything
   is allowed to spill. */
@media (max-height: 740px) {
  .fq.is-focus .fq-bar { height: 48px; }
  .fq.is-focus .fq__in { padding-top: 10px; padding-bottom: 12px; gap: 10px; }
  .fq.is-focus .fq__stat { padding: 6px 10px; }
  .fq.is-focus .fq__stat-v { font-size: 18px; }
  .fq.is-focus .fq-card__face { padding: 16px 18px; }
  .fq.is-focus .fq-card__food { font-size: clamp(28px, 9vw, 40px); margin: 8px 0; }
  .fq.is-focus .fq-card__pic img { max-height: min(22vh, 180px); max-height: min(22dvh, 180px); }
  .fq.is-focus .fq-ans { min-height: 56px; }
  .fq.is-focus .fq-card__verdict { font-size: clamp(30px, 8vw, 44px); }
  .fq.is-focus .fq-card__note { font-size: 15px; margin: 8px 0 12px; }
}
@media (max-width: 560px) {
  .fq-dare__copy { align-items: stretch; }
  .fq.is-focus .fq-dare .fq-dare__go { width: 100%; justify-content: center; }
  .fq.is-focus .fq-dare__no { align-self: center; }
  .fq-dare__lede { font-size: 16.5px; }
  .fq.is-focus .fq-card__face { padding: 18px 18px; }
  .fq.is-focus .fq-end__said { font-size: 13.5px; }
}
/* Desktop stage: room to spare, so a bigger name and photo, and the key hint
   back under the stats. */
@media (min-width: 901px) and (min-height: 741px) {
  .fq.is-focus .fq__keys { display: block; margin-top: 10px; text-align: center; }
  .fq.is-focus .fq-card__front .fq-card__food { font-size: clamp(48px, 4.6vw, 72px); }
  .fq.is-focus .fq-card__pic { flex-basis: 46%; max-width: 320px; }
  .fq.is-focus .fq-card__pic img { max-height: 300px; }
}
/* Share sits straight under the score, so it is on screen without scrolling;
   the missed list follows. */
.fq-end .fq-share { margin-top: 18px; }
/* Phones in landscape (under ~480px tall): the pips carry progress, the stat
   boxes and swipe hint go, and the back face tightens so Next stays on screen. */
@media (max-height: 480px) {
  .fq.is-focus .fq-bar { height: 44px; }
  .fq.is-focus .fq__in { padding-top: 8px; padding-bottom: 8px; gap: 8px; }
  .fq.is-focus .fq__stats, .fq.is-focus .fq__keys, .fq.is-focus .fq-swipe { display: none; }
  .fq.is-focus .fq__pips { margin-top: 0; }
  .fq.is-focus .fq-card__face { padding: 12px 18px; }
  .fq.is-focus .fq-card__food { font-size: 30px; margin: 4px 0; }
  .fq.is-focus .fq-card__food--sm { font-size: 20px; margin-top: 6px; }
  .fq.is-focus .fq-card__verdict { font-size: 30px; margin-top: 4px; }
  .fq.is-focus .fq-card__note { font-size: 14px; margin: 6px 0 8px; }
  .fq.is-focus .fq-card__pic img { max-height: 24vh; max-height: 24dvh; }
  .fq.is-focus .fq-ans { min-height: 44px; }
  .fq.is-focus .fq-next { min-height: 40px; }
  .fq.is-focus .fq-dare { padding-top: 16px; padding-bottom: 16px; }
  .fq.is-focus .fq-dare__h { font-size: 34px; }
  .fq.is-focus .fq-dare__lede { font-size: 15px; margin-top: 10px; }
  .fq.is-focus .fq-dare .fq-dare__go { margin-top: 14px; min-height: 50px; }
}

/* ============================================================
   Kibble scanner (/scan/, page-scan.php + assets/js/scan.js)
   Prefix sc-. The two big buttons reuse .fql-go from the quiz.
   ============================================================ */
.sc__intro { max-width: 760px; }
.sc__title { margin-top: 10px; }
.sc__hl { color: var(--blue); }
.sc__lede { margin-top: var(--s3); max-width: 620px; }
.sc__actions { display: flex; flex-wrap: wrap; gap: 18px 22px; margin-top: var(--s4); }
.sc__actions .sc__go { margin-top: 0; }
.sc__go--alt { background: var(--white); color: var(--ink); outline: var(--border-w) solid var(--ink); outline-offset: -2px; }
.sc__go--alt:hover { background: var(--panel); color: var(--ink); }
.sc__go--alt:focus-within { outline: 3px solid var(--ink); outline-offset: 4px; }
.sc__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sc__manual { margin-top: var(--s4); max-width: 460px; }
.sc__manual label {
  display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--muted);
}
.sc__manual-row { display: flex; gap: 10px; }
.sc__manual input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border: var(--border-w) solid var(--ink);
  background: var(--white); color: var(--ink); font-family: var(--mono); font-size: 16px; letter-spacing: .04em;
}
.sc__manual input:focus { outline: 3px solid var(--blue); outline-offset: 1px; }
.sc__find { justify-content: center; }
.sc__private { margin: var(--s3) 0 0; max-width: 560px; font-size: 14px; color: var(--muted); }

/* Live camera */
.sc-stage { margin-top: var(--s4); max-width: 560px; }
.sc-stage__view { position: relative; background: var(--ink); aspect-ratio: 4 / 3; overflow: hidden; border: var(--border-w) solid var(--ink); }
.sc-stage__view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-stage__frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sc-stage__frame span {
  width: 78%; height: 38%; border: 3px solid var(--lime);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38);
}
.sc-stage__frame span::after {
  content: ""; display: block; height: 2px; margin-top: calc(19% - 1px); background: var(--lime);
  animation: sc-sweep 1.6s ease-in-out infinite alternate;
}
@keyframes sc-sweep { from { transform: translateY(-30px); } to { transform: translateY(30px); } }
@media (prefers-reduced-motion: reduce) { .sc-stage__frame span::after { animation: none; } }
.sc-stage__hint { margin: 12px 0 0; font-size: 14px; color: var(--body); }
.sc-stage__cancel {
  margin-top: 8px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.sc-stage__cancel:hover { color: var(--ink); }

/* Progress */
.sc-status { margin-top: var(--s4); max-width: 560px; }
.sc-status__msg { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--body-2); }
.sc-status__bar { margin-top: 10px; height: 8px; background: var(--rule-lt); border: 1px solid var(--rule); }
.sc-status__bar span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .25s var(--ease); }

/* Results */
.sc-results:not(:empty) { margin-top: var(--s4); max-width: 760px; scroll-margin-top: 90px; }
.sc-results .k-kicker { margin-bottom: 12px; }
.sc-card {
  display: flex; gap: 18px; align-items: center; padding: 14px; margin-bottom: 12px;
  background: var(--white); border: 1px solid var(--rule); color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.sc-card:hover { border-color: var(--ink); text-decoration: none; }
.sc-card--best { border: var(--border-w) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 18px; }
.sc-card__pic { flex: 0 0 84px; height: 104px; display: flex; align-items: center; justify-content: center; background: var(--white); }
.sc-card--best .sc-card__pic { flex-basis: 120px; height: 150px; }
.sc-card__pic img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sc-card__noimg { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--panel-stripe-a) 0 8px, var(--panel-stripe-b) 8px 16px); }
.sc-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-card__brand { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--muted); }
.sc-card__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.sc-card--best .sc-card__title { font-size: 20px; }
.sc-card__go { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--blue); }
.sc-others { margin-top: 6px; }
.sc-others summary, .sc-read summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--body-2);
}
.sc-others .sc-list { margin-top: 8px; }
.sc-note { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.sc-miss { padding: 18px; border: var(--border-w) solid var(--ink); background: var(--white); }
.sc-miss p { margin: 0; color: var(--body); }
.sc-again { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: var(--s3); }
.sc-again .k-btn-dark { display: inline-flex; }
.sc-again__btn {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: var(--kicker-tracking);
  text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.sc-read { margin-top: var(--s3); max-width: 760px; }
.sc-read pre {
  max-height: 260px; overflow: auto; margin: 6px 0 0; padding: 12px; white-space: pre-wrap;
  background: var(--panel); border: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; color: var(--body-2);
}

.sc-tips { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule); max-width: 760px; }
.sc-tips ol { margin: 12px 0 0; padding-left: 22px; color: var(--body); }
.sc-tips li { margin-bottom: 6px; }
.sc-tips__more { margin: var(--s3) 0 0; color: var(--body); }

@media (max-width: 640px) {
  .sc__actions { flex-direction: column; }
  .sc__actions .sc__go { width: 100%; justify-content: center; min-height: 58px; padding: 0 18px; font-size: 14px; }
  .sc-card { gap: 14px; padding: 12px; }
  .sc-card--best { padding: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .sc-card--best .sc-card__pic { flex-basis: 92px; height: 116px; }
  .sc-card--best .sc-card__title { font-size: 17px; }
}
/* The header rule hides every .k-btn-dark under 900px; the scanner's own ones must stay. */
.sc .sc__find, .sc .sc-again .k-btn-dark { display: inline-flex; }
@media (max-width: 640px) {
  .sc__actions .sc__go { letter-spacing: .05em; font-size: 13.5px; gap: 10px; }
}
/* Bag photo is the main path; the ingredient list is the fallback link under the buttons. */
.sc__more {
  flex-basis: 100%; cursor: pointer; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px;
}
.sc__more:hover { color: var(--blue-d); }
/* Desktop: no camera worth using, so hand off to the phone with a QR code. Any wide screen whose main
   input isn't touch; phones and tablets keep the camera buttons. Not (hover: hover) and (pointer: fine):
   some desktop browsers report neither and lost the QR entirely. */
.sc-desk { display: none; }
@media (min-width: 900px) and (not (pointer: coarse)) {
  .sc__actions { display: none; }
  .sc-desk {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: center;
    margin-top: var(--s4); padding: var(--s4); border: var(--border-w) solid var(--ink);
    background: var(--white); box-shadow: 6px 6px 0 var(--ink); max-width: 720px;
  }
  .sc-desk__lede { margin: 10px 0 0; max-width: 380px; color: var(--body); }
  .sc-desk__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: var(--s3); }
  .sc .sc-desk .k-btn-dark { display: inline-flex; cursor: pointer; }
  .sc-desk__link { cursor: pointer; font-size: 14px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
  .sc-desk__link:hover { color: var(--blue-d); }
  .sc-qr { width: 196px; padding: 10px; background: var(--white); border: var(--border-w) solid var(--ink); }
  .sc-qr__code { display: block; width: 100%; height: auto; }
  .sc-qr__bg { fill: var(--white); }
  .sc-qr__fg { fill: var(--ink); }
}

/* ============================================================
   Homepage rails (front-page.php + assets/js/rails.js)
   Featured Reviews, Just Released and Guides swipe as carousels on phones.
   Centre snap with the neighbours peeking; each card scales and
   brightens as it reaches the centre, and its bag shot drifts
   against the swipe. Both effects are scroll-driven animations,
   so they run on the compositor and track the finger exactly;
   browsers without animation-timeline get a plain snap rail.
   Desktop and tablet keep the grid.
   ============================================================ */
.k-railbar { display: none; }

/* Tablets (iPad portrait and landscape): the food rails stay four across
   instead of the generic two-column .k-grid4 step, so a tab of eight reads
   as two rows. Cards get tighter type and padding to fit ~170px columns. */
@media (min-width: 761px) and (max-width: 1180px) {
  .k-grid4.k-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .k-grid4.k-rail .k-food__body { padding: 12px 12px 14px; gap: 8px; }
  .k-grid4.k-rail .k-food__brand { font-size: 10.5px; letter-spacing: .1em; }
  .k-grid4.k-rail .k-food__name { font-size: 15px; }
  .k-grid4.k-rail .k-food__meta { gap: 8px; }
  .k-grid4.k-rail .k-food__brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .k-grid4.k-rail .k-food__price { font-size: 12px; }
  .k-grid4.k-rail .k-food__foot { gap: 6px; padding-top: 10px; }
  .k-grid4.k-rail .k-food__metric { font-size: 9.5px; letter-spacing: .06em; }
  .k-grid4.k-rail .k-food__metric b { font-size: 13px; }
  .k-grid4.k-rail .k-food__score { font-size: 24px; }
}

@media (max-width: 760px) {
  .k-rail {
    display: flex; gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 6px 12% 22px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .k-rail::-webkit-scrollbar { display: none; }
  .k-rail:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
  .k-rail > * {
    flex: 0 0 76%; max-width: 320px;
    scroll-snap-align: center; scroll-snap-stop: always;
    transform-origin: 50% 60%;
  }
  .k-rail .k-food__shot { height: 190px; }

  .k-railbar {
    display: flex; align-items: center; gap: 14px; margin-top: 4px;
    font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--muted);
  }
  .k-railbar__count b { color: var(--ink); font-weight: 600; }
  .k-railbar__track { position: relative; flex: 1; height: 3px; background: var(--rule); overflow: hidden; }
  .k-railbar__fill {
    position: absolute; inset: 0 auto 0 0; width: 25%;
    background: var(--ink); transition: width .2s var(--ease);
  }
  .k-new .k-railbar { color: var(--dark-muted); }
  .k-new .k-railbar__count b { color: var(--bg); }
  .k-new .k-railbar__track { background: var(--dark-rule); }
  .k-new .k-railbar__fill { background: var(--bg); }

  /* First sight: slide a little toward the next card and settle back. */
  .k-rail.is-nudging > * { animation-name: k-rail-focus, k-rail-nudge; }
}

@keyframes k-rail-nudge {
  0%, 100% { translate: 0 0; }
  38%      { translate: -46px 0; }
  62%      { translate: -46px 0; }
}

@supports (animation-timeline: view()) {
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .k-rail > * {
      animation: k-rail-focus linear both;
      animation-timeline: view(inline);
    }
    .k-rail .k-food__shot img, .k-rail .g-card__shot img {
      animation: k-rail-drift linear both;
      animation-timeline: view(inline);
    }
    .k-rail.is-nudging > * {
      animation-duration: auto, 1s;
      animation-timing-function: linear, cubic-bezier(.3, .7, .2, 1);
      animation-timeline: view(inline), auto;
      animation-fill-mode: both, none;
    }
  }
}
@keyframes k-rail-focus {
  0%, 100% { transform: scale(.9); opacity: .82; }
  50%      { transform: scale(1);   opacity: 1; }
}
@keyframes k-rail-drift {
  0%   { transform: translateX(9%) scale(1.06); }
  100% { transform: translateX(-9%) scale(1.06); }
}

/* No scroll-driven animations: the nudge still runs on its own. */
@supports not (animation-timeline: view()) {
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .k-rail.is-nudging > * { animation: k-rail-nudge 1s cubic-bezier(.3, .7, .2, 1); }
  }
}

/* ============================================================
   News (/news/, page-news.php + functions/news.php)
   Role tokens only. The tag colour repeats what the label already
   says, so the type survives greyscale.
   ============================================================ */
.nw-filters { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.nw-brand { display: flex; align-items: center; gap: 10px; margin-top: var(--s3); }
.nw-brand__label { font-family: var(--mono); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.nw-brand select {
  font: inherit; font-size: 14px; padding: 8px 12px; min-width: 200px; max-width: 100%;
  border: 1px solid var(--ink); border-radius: var(--btn-radius); background: var(--white); color: var(--ink);
}

.nw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-top: var(--s4); align-items: start; }
.nw-aside { display: grid; gap: 18px; position: sticky; top: 24px; }
.nw-aside .pd-note:first-of-type { margin-top: 10px; }

.nw-month {
  margin: var(--s4) 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.nw-month:first-child { margin-top: 0; }

.nw-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.nw-item:target { background: var(--warm); box-shadow: -12px 0 0 var(--warm), 12px 0 0 var(--warm); }
.nw-item__date { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); padding-top: 3px; }
.nw-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.nw-item__brand { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.nw-item__brand:hover { color: var(--blue); }
.nw-item__title { margin: 8px 0 0; font-family: var(--display); font-size: clamp(18px, 1.7vw, 21px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.nw-item__sum { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted-2); max-width: 68ch; }
.nw-item__unlisted { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.nw-item__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.nw-item__foot a { color: var(--blue); }

.nw-tag {
  display: inline-block; padding: 3px 8px; border: 1px solid currentColor;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2);
}
.nw-tag:hover { text-decoration: none; background: var(--rule-lt); }
.nw-tag--launches { color: var(--green); }
.nw-tag--discontinued { color: var(--amber); }
.nw-tag--recalls { color: var(--red); }
.nw-tag--changes { color: var(--blue); }

.nw-prods { margin-top: 14px; padding: 14px 16px; background: var(--panel); }
.nw-prods__k { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nw-prods ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.nw-prods li { font-size: 14px; line-height: 1.4; }
.nw-prods li > a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.nw-prods li > a:hover { color: var(--blue); text-decoration-color: currentColor; }
.nw-prods__note { display: block; font-size: 12.5px; color: var(--muted); }
.nw-prods__note a { color: var(--blue); }
.nw-round { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 18px; }
.nw-round .nw-prods__note { display: inline; margin-left: 6px; }
.nw-item__unlisted a { color: var(--blue); }
.nw-more { margin-top: 8px; }
.nw-more summary { cursor: pointer; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--blue); }

.nw-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--s4); font-size: 13px; letter-spacing: .08em; }
.nw-pager a { color: var(--blue); }

@media (max-width: 1000px) {
  .nw-layout { grid-template-columns: 1fr; gap: 32px; }
  .nw-aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 560px) {
  /* One swipeable row: six wrapped chips cost four rows of a phone screen. */
  .nw-filters .k-chips { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gutter, 20px)); margin-right: calc(-1 * var(--gutter, 20px)); padding: 0 var(--gutter, 20px) 4px; scrollbar-width: none; }
  .nw-filters .k-chips::-webkit-scrollbar { display: none; }
  .nw-filters .k-chip { flex: none; white-space: nowrap; }
  .nw-item { grid-template-columns: 1fr; gap: 6px; }
  .nw-brand { width: 100%; }
  .nw-brand select { flex: 1; min-width: 0; }
}

/* News: written stories (single.php in the News section, and the /news/ lead). */
.nw-item__title a { color: inherit; }
.nw-item__title a:hover { color: var(--blue); }
.nw-top { margin-top: var(--s4); }
.nw-wire-h { margin: var(--s5) 0 0; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nw-story-box { margin-top: var(--s4); padding: 20px 22px; background: var(--panel); }
.nw-story-foods { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.nw-story-foods a { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 8px; background: var(--white); border: 1px solid var(--rule-lt); color: var(--ink); }
.nw-story-foods a:hover { text-decoration: none; border-color: var(--ink); }
.nw-story-foods__shot { grid-row: span 2; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--white); }
.nw-story-foods__shot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.nw-story-foods__t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.nw-story-foods__s { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--amber); }
.nw-sources { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.nw-sources a { color: var(--blue); }
.nw-sources__h { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.nw-latest li { line-height: 1.35; }
.g-box .nw-latest + .p-btn { margin-top: 14px; }

/* Homepage Section 04 (News) and Section 05 (Guides checker box). */
.hn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; margin-top: var(--s4); align-items: start; }
.hn-lead .g-card { height: 100%; }
.hn-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.hn-list li { border-bottom: 1px solid var(--rule); }
.hn-item { display: grid; gap: 6px; padding: 18px 0; color: var(--ink); }
.hn-item:hover { text-decoration: none; }
.hn-item:hover .hn-item__title { color: var(--blue); }
.hn-item__meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.hn-item__title { font-family: var(--display); font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; line-height: 1.28; letter-spacing: -.01em; }
.hn-item__dek { font-size: 14px; line-height: 1.5; color: var(--muted-2); }

.hg-check {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 16px;
  margin-top: var(--s4); padding: 18px 20px; background: var(--white); border: var(--border-w) solid var(--ink);
}
.hg-check__k { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: -.02em; text-transform: uppercase; }
.hg-check__in {
  font: inherit; font-size: 17px; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink);
}
.hg-check__in:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--ink); }
.hg-check__go { white-space: nowrap; }
.hg-check__n { grid-column: 1 / -1; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 900px) {
  .hn-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
  .hg-check { grid-template-columns: minmax(0, 1fr) auto; }
  .hg-check__k { grid-column: 1 / -1; }
}

/* In-body photos placed by product-research/post-images.php. */
.g-body .g-photo { margin: 34px 0; }
.g-body .g-photo img { display: block; width: 100%; height: auto; margin: 0; border: 0; }
.g-body .g-photo figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* Flashcard food name: wrap between words only. food-quiz.js fitFood() steps the size down when one word is wider
   than its column (it was breaking "CHEES / E?" and "WATERME / LON"). min-width lets the column shrink so the
   overflow is measurable instead of squeezing the photo. */
.fq-card__food { overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 0; }

/* The Kibble logo (itk_v4_brand_logo). Height drives it; the file keeps its own brand colours. */
.k-brand--img { align-items: center; }
.k-brand--img .k-logo__img { display: block; height: 46px; width: auto; }
.k-footer .k-brand--img .k-logo__img { height: 44px; }
@media (max-width: 420px) { .k-brand--img .k-logo__img { height: 38px; } }

/* ---- Hero type, 2026-10-03 ----
   The masthead is warm charcoal with "Dog Food" in the logo's dark kibble brown.
   Brick against the near-black ink sat too close in darkness to read as an
   accent; charcoal + masthead-accent are pitched as a pair instead.
   The lede is ~11% smaller, tighter and on a narrower measure so it matches the
   density of the headline instead of filling the column. Overrides the
   --measure rule above on purpose. */
.k-hero__lede {
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
}
html[data-itk-theme] .k-hero__title { color: var(--charcoal, var(--ink)); }
.k-hero__accent { color: var(--masthead-accent, var(--blue)); }

/* Quick format chips at the top of the brand-page filter rail (2026-10-04).
   Sized for the 278px rail: they wrap two or three to a row. */
.r-quick { margin: 0 0 20px; gap: 6px; }
.r-quick .k-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; font-size: 13.5px; }
.r-quick .k-chip__n { padding: 2px 6px; font-size: 11px; }
.r-quick .k-chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.r-quick .k-chip.is-active .k-chip__n { background: transparent; color: var(--bg); }

/* reCAPTCHA badge hidden site-wide (owner request 2026-10-04). Google's terms
   allow this because every CF7 form prints the notice below its submit button
   (wpcf7_form_elements filter in functions.php). `visibility`, not `display`:
   display:none stops reCAPTCHA v3 from working. */
.grecaptcha-badge { visibility: hidden !important; }
.itk-recaptcha-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.itk-recaptcha-note a { color: inherit; text-decoration: underline; }

/* Phone "My dogs" button beside the burger (2026-10-04): same 44px box, two
   paws. Replaces the plugin's floating name-tag launcher, which only appears
   when no [data-itk-dogs-nav] in the page is visible. */
.k-dogs-btn {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 0; background: var(--white); color: var(--ink);
}
.k-dogs-btn:hover { border-color: var(--ink); text-decoration: none; }
.k-dogs-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 1080px) {
  .k-dogs-btn { display: inline-flex; }
}

/* Caps toggle hidden (owner request 2026-10-04). The footer script still
   un-hides it, so this has to win over the removed `hidden` attribute. A visitor
   who had already picked a casing keeps it (itkCase in localStorage). */
.caps-toggle { display: none !important; }

/* Hero search focus on phones (front-page.php script): the sticky header slides
   up out of view so the search box can sit at the very top of the screen. */
.k-header { transition: transform .22s var(--ease); }
@media (max-width: 760px) {
  html.k-search-up .k-header { transform: translateY(-100%); }
}

/* ============================================================
   Scanner v2 (2026-10-04): one-tap camera, answer card, my-dog
   check, recent scans. Overrides parts of the sc- block above.
   ============================================================ */
.sc__start { min-width: 280px; justify-content: center; }
.sc__how { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.sc-other { margin-top: var(--s4); max-width: 560px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sc-other summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  min-height: 52px; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink);
}
.sc-other summary::-webkit-details-marker { display: none; }
.sc-other summary::after { content: "+"; font-size: 20px; font-weight: 400; }
.sc-other[open] summary::after { content: "\2212"; }
.sc-other__body { display: grid; gap: 10px; padding-bottom: var(--s3); }
.sc-other__opt {
  display: grid; gap: 2px; cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--rule); background: var(--white);
}
.sc-other__opt:hover { border-color: var(--ink); }
.sc-other__opt b { font-size: 15px; }
.sc-other__opt span { font-size: 13.5px; color: var(--muted); }
.sc-other .sc__manual { margin-top: 6px; }

/* Live camera: shutter in the middle, cancel on the left. */
.sc-stage__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: 14px; }
.sc-stage__controls .sc-stage__cancel { justify-self: start; margin: 0; }
.sc-stage__shutter {
  width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
  border: 4px solid var(--ink); background: var(--white); box-shadow: inset 0 0 0 4px var(--white), inset 0 0 0 40px var(--blue);
}
.sc-stage__shutter:active { transform: scale(.94); }
.sc-stage__shutter:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Candidate cards are buttons now. */
button.sc-card { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }

/* Answer card */
.sc-ans { border: var(--border-w) solid var(--ink); background: var(--white); box-shadow: 6px 6px 0 var(--ink); padding: 18px; }
.sc-ans__top { display: flex; gap: 16px; align-items: center; }
.sc-ans__top .sc-card__pic { flex: 0 0 96px; height: 120px; }
.sc-ans__title { margin: 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.sc-ans__dogs { margin-top: 16px; }
.sc-dogs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sc-dog { padding: 10px 12px; font-size: 14.5px; line-height: 1.45; border-left: 4px solid var(--rule); background: var(--panel); color: var(--body); }
.sc-dog b { display: block; font-size: 12px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sc-dog--ok { border-left-color: var(--green); }
.sc-dog--bad { border-left-color: var(--red); background: var(--warn-bg); color: var(--ink); }
.sc-dog--bad strong { color: var(--red); }
.sc-dogs--none { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px; background: var(--panel); }
.sc-dogs--none p { margin: 0; flex: 1 1 220px; font-size: 14px; color: var(--body); }
.sc-dogs__add {
  min-height: 44px; padding: 0 16px; cursor: pointer; font: 600 14px var(--sans);
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
}
.sc-dogs__add:hover { background: var(--ink); color: var(--bg); }
.sc-ans__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--ink); }
.sc-ans__figs div { padding: 12px 10px 10px 0; display: grid; gap: 2px; }
.sc-ans__figs dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sc-ans__figs dd { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.sc-ans__figs span { font-size: 12px; color: var(--muted); }
.sc-ans__figs .is-ok dd { color: var(--green); }
.sc-ans__figs .is-warn dd { color: var(--red); }
.sc-ans__sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.sc-ans__sec h3 { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sc-ans__sec ol { margin: 0; padding-left: 22px; color: var(--ink); }
.sc-ans__sec li { margin-bottom: 2px; }
.sc-ans__flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sc-ans__flags span { font-family: var(--mono); font-size: 12px; padding: 4px 8px; background: var(--warn-bg); color: var(--red); border: 1px solid currentColor; }
.sc-ans__none { margin: 0; font-size: 14px; color: var(--body); }
.sc-ans__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.sc .sc-ans__go .k-btn-dark { display: inline-flex; }
.sc-ans__cmp { font-size: 14px; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .sc-ans { padding: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .sc-ans__top .sc-card__pic { flex-basis: 76px; height: 96px; }
  .sc-ans__title { font-size: 17px; }
  .sc-ans__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-ans__figs dd { font-size: 22px; }
  .sc-ans__go .k-btn-dark { flex: 1 1 100%; justify-content: center; min-height: 50px; }
}

/* Recent scans */
.sc-hist { margin-top: var(--s5); max-width: 760px; }
.sc-hist__head { display: flex; justify-content: space-between; align-items: center; }
.sc-hist__head .k-kicker { margin: 0; font-size: 12px; }
.sc-hist__clear { background: none; border: 0; cursor: pointer; font-size: 13px; color: var(--muted); text-decoration: underline; min-height: 44px; }
.sc-hist__note { margin: 4px 0 10px; font-size: 14px; color: var(--muted); }
.sc-hist__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sc-hist__item { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); }
.sc-hist__item label { flex: 1; display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; min-width: 0; }
.sc-hist__item input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }
.sc-hist__pic { flex: 0 0 40px; height: 50px; display: flex; align-items: center; justify-content: center; }
.sc-hist__pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sc-hist__t { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.sc-hist__t small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sc-hist__open { flex: none; min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--rule); cursor: pointer; font: 600 13px var(--sans); color: var(--ink); }
.sc-hist__open:hover { border-color: var(--ink); }
.sc .sc-hist__go { display: inline-flex; margin-top: 14px; }
.sc-hist__go[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Live camera is an open view (owner 2026-10-04): no target box or dark mask.
   The barcode reader already scans the whole frame. Taller on phones. */
.sc-stage__frame { display: none; }
@media (max-width: 640px) {
  .sc-stage__view { aspect-ratio: 3 / 4; }
}

/* AI final check on bag-photo candidate lists (2026-10-04). */
.sc-ai {
  margin: 0 0 12px; padding: 10px 12px 10px 38px; position: relative;
  font-size: 14px; line-height: 1.45; color: var(--body); background: var(--panel); border-left: 4px solid var(--blue);
}
.sc-ai::before {
  content: ""; position: absolute; left: 12px; top: 13px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--rule); border-top-color: var(--blue); animation: sc-spin .8s linear infinite;
}
.sc-ai.is-done { padding-left: 12px; }
.sc-ai.is-done::before { display: none; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-ai::before { animation: none; } }
.sc-card--ai { border: var(--border-w) solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.sc-card__ai {
  align-self: flex-start; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: var(--bg);
}
.sc-keep { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--body); cursor: pointer; }
.sc-keep input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--ink); }

/* Like + Share bar at the end of posts (functions/engage.php, 2026-10-04). */
.eng { margin-top: var(--s4); padding: 18px 0 0; border-top: var(--border-w) solid var(--ink); position: relative; }
.eng__q { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--ink); }
.eng__row { display: flex; flex-wrap: wrap; gap: 10px; }
.eng__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; cursor: pointer;
  font: 600 15px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 0;
}
.eng__btn[hidden] { display: none; }
.eng__btn:hover { background: var(--ink); color: var(--bg); }
.eng__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.eng__btn svg { flex: none; fill: none; }
.eng__like[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.eng__like[aria-pressed="true"] svg { fill: currentColor; }
.eng__n { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.eng__n:empty { display: none; }
.eng__like.is-pop svg { animation: eng-pop .35s var(--ease); }
@keyframes eng-pop { 50% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .eng__like.is-pop svg { animation: none; } }
.eng__menu {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 12px;
  background: var(--panel); border: 1px solid var(--rule);
}
.eng__menu[hidden] { display: none; }
.eng__opt {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; cursor: pointer;
  font: 600 14px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule); text-decoration: none;
}
.eng__opt:hover { border-color: var(--ink); text-decoration: none; }

/* Reader comments (functions/comments.php, 2026-10-04). */
.cm { margin-top: var(--s5); }
.cm__title { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.cm__n { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--muted); }
.cm__list { list-style: none; margin: 0; padding: 0; }
.cm__item { padding: 14px 0; border-top: 1px solid var(--rule); }
.cm__who { margin: 0 0 6px; font-size: 14px; }
.cm__who time { margin-left: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cm__text p { margin: 0 0 8px; color: var(--body); }
.cm__empty { margin: 0 0 14px; color: var(--body); }
.cm__form { display: grid; gap: 12px; margin-top: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--rule); }
.cm__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm__form label { display: grid; gap: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cm__form label small { text-transform: none; letter-spacing: 0; }
.cm__form input, .cm__form textarea {
  font: 16px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule);
  border-radius: 0; padding: 10px 12px; min-height: 46px; text-transform: none; letter-spacing: 0;
}
.cm__form input:focus, .cm__form textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--ink); }
.cm__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cm__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cm .cm__send { display: inline-flex; border: 0; cursor: pointer; }
.cm__send:disabled { opacity: .6; cursor: wait; }
.cm__msg { margin: 0; font-size: 14px; color: var(--body); }
.cm__note { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .cm__row { grid-template-columns: 1fr; }
  .cm .cm__send { width: 100%; justify-content: center; min-height: 50px; }
}

/* "On this page" (2026-10-04): under the short version on phones and tablets,
   in the rail on desktop. Jumps scroll smoothly and stop below the sticky header. */
.g-toc-inline { display: none; }
@media (max-width: 1080px) {
  .g-toc-inline { display: block; margin-top: var(--s3); }
  .g-toc-rail { display: none; }
}
html:has(.g-wrap) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.g-wrap) { scroll-behavior: auto; } }
.g-body h2[id], .g-body h3[id] { scroll-margin-top: calc(var(--header-h) + 18px); }

/* Bottom like/share/comment dock (2026-10-04): slides up on scroll down, away on scroll up. */
.eng-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(110%); transition: transform .28s var(--ease); pointer-events: none;
}
.eng-dock[hidden] { display: none; }
.eng-dock.is-up { transform: translateY(0); }
.eng-dock__in {
  pointer-events: auto; max-width: 460px; margin: 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--white); border: var(--border-w) solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.eng-dock__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 52px; padding: 0 10px;
  font: 600 14.5px var(--sans); color: var(--ink); background: none; border: 0; border-left: 1px solid var(--rule);
  cursor: pointer; text-decoration: none;
}
.eng-dock__btn:first-child { border-left: 0; }
.eng-dock__btn:hover { background: var(--panel); text-decoration: none; }
.eng-dock__btn:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.eng-dock__btn svg { flex: none; fill: none; }
.eng-dock .eng__like[aria-pressed="true"] { background: var(--blue); color: var(--on-blue); }
.eng-dock .eng__like[aria-pressed="true"] svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .eng-dock { transition: none; } }

/* Dock, thinner and quicker (owner 2026-10-04). */
.eng-dock { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transition: transform .14s ease-out; }
.eng-dock__in { max-width: 400px; border-width: 1.5px; box-shadow: 3px 3px 0 var(--ink); }
.eng-dock__btn { min-height: 38px; gap: 6px; font-size: 13.5px; }
.eng-dock__btn svg { width: 16px; height: 16px; }
.eng-dock .eng__n { font-size: 12px; }

/* ============================================================
   Quiz magnet (functions/quiz-magnet.php, 2026-10-04)
   ============================================================ */
/* The invisible stage copy only exists while it is open. */
.fq--stage:not(.is-focus) { display: none !important; }

.fqt[hidden] { display: none; }
.fqt { display: grid; gap: 14px; background: var(--ink); color: var(--bg); padding: 20px; position: relative; overflow: hidden; }
.fqt__k { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--feature, #EDC4CA); }
.fqt__live { color: var(--bg); opacity: .7; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.fqt__h { margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.02; letter-spacing: -.03em; text-transform: uppercase; }
.fqt__p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--bg); opacity: .82; max-width: 46ch; }
.fqt__card { background: var(--white); color: var(--ink); padding: 14px; display: grid; gap: 10px; box-shadow: 5px 5px 0 var(--blue); }
.fqt__q { display: grid; gap: 2px; }
.fqt__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fqt__food { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.fqt__food b { color: var(--blue); }
.fqt__pic { height: 110px; display: flex; align-items: center; justify-content: center; }
.fqt__pic[hidden] { display: none; }
.fqt__pic img { max-height: 100%; width: auto; mix-blend-mode: multiply; }
.fqt__ask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fqt__a {
  min-height: 44px; padding: 0 4px; cursor: pointer; border: 2px solid var(--ink); background: var(--white);
  font: 700 13px var(--sans); color: var(--ink); text-transform: uppercase; letter-spacing: .04em;
  transition: transform .12s ease, background .12s ease;
}
.fqt__a:hover { transform: translateY(-2px); }
.fqt__a--safe:hover { background: var(--ok-bg, #E3F1EA); }
.fqt__a--caution:hover { background: var(--feature-cream, #F4E8D6); }
.fqt__a--never:hover { background: var(--warn-bg); }
.fqt__a:focus-visible { outline: 3px solid var(--feature, #EDC4CA); outline-offset: 2px; }
.fqt__foot { margin: 0; font-size: 13px; color: var(--bg); opacity: .75; }

/* Band: copy left, card right on wide screens. */
.fqt--band { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: center; gap: 18px 28px; padding: 28px; }
.fqt--band .fqt__foot { grid-column: 1 / -1; }
.fqt--band .fqt__h { font-size: clamp(26px, 3.2vw, 38px); }
/* Two set lines on desktop; phones wrap naturally. */
.fqt__br { display: none; }
@media (min-width: 761px) { .fqt--band .fqt__br { display: inline; } }
@media (max-width: 760px) {
  .fqt--band { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
}
.fqt-wrap { max-width: var(--shell); margin: 0 auto; padding: var(--s5) var(--gutter); }
.fqt--inline { margin-top: var(--s4); }
.fqt--product { margin: var(--s4) 0 0; }
/* Articles: rail card on desktop; under 1080px the rail drops below the article, so the end-of-article band takes over. */
.fqt--rail .fqt__h { font-size: 24px; }
@media (max-width: 1080px) { .fqt--rail { display: none !important; } }
@media (min-width: 1081px) { .fqt--inline { display: none !important; } }

/* End screen additions */
.fq-end__duel { margin: 8px 0 0; font-weight: 700; font-size: 17px; color: var(--ink); }
.fq-end__rank { margin: 6px 0 0; font-size: 15px; color: var(--body); }
.fq-end__duel[hidden], .fq-end__rank[hidden] { display: none; }
.fq-share__sign { display: grid; gap: 4px; margin: 6px 0 10px; font-size: 13px; color: var(--body); }
.fq-share__sign small { color: var(--muted); }
.fq-share__sign input { min-height: 42px; padding: 0 12px; font: 16px var(--sans); border: 1px solid var(--rule); background: var(--white); max-width: 260px; }
.fqt__a { font-size: 12px; letter-spacing: 0; padding: 0 2px; }
@media (min-width: 761px) { .fqt__a { font-size: 13px; letter-spacing: .03em; } }
/* Teasers ask Safe or Never only (owner 2026-10-04). */
.fqt__ask { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fqt__a { font-size: 14px; letter-spacing: .06em; min-height: 48px; }
.fqt__a--safe { border-color: var(--green); color: var(--green); }
.fqt__a--never { border-color: var(--red); color: var(--red); }

/* Quiz end screen: email capture (own list, itk-recall-desk). */
.fq-mail { margin-top: 18px; padding: 16px; background: var(--ink); color: var(--bg); display: grid; gap: 8px; }
.fq-mail__h { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; text-transform: uppercase; }
.fq-mail__p { margin: 0; font-size: 14px; opacity: .85; }
.fq-mail__row { display: flex; gap: 8px; flex-wrap: wrap; }
.fq-mail__row input { flex: 1 1 200px; min-height: 46px; padding: 0 12px; font: 16px var(--sans); border: 0; background: var(--white); color: var(--ink); }
.fq-mail__go { min-height: 46px; padding: 0 18px; border: 0; cursor: pointer; font: 700 14px var(--sans); background: var(--feature, #EDC4CA); color: var(--ink); }
.fq-mail__go:disabled { opacity: .6; }
.fq-mail__opt { display: flex; gap: 8px; align-items: center; font-size: 13.5px; opacity: .9; cursor: pointer; }
.fq-mail__opt input { width: 18px; height: 18px; accent-color: var(--feature, #EDC4CA); }
.fq-mail__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; }
.fq-mail__msg { margin: 0; font-size: 14px; min-height: 1em; }
.fq-mail.is-done .fq-mail__row, .fq-mail.is-done .fq-mail__opt { display: none; }
.fq-mail__pet { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
.fq-mail__pet legend { padding: 0; margin-bottom: 4px; font-size: 13px; opacity: .9; }
.fq-mail__pet legend small { opacity: .75; }
.fq-mail__pet input, .fq-mail__pet select { min-height: 42px; padding: 0 10px; font: 15px var(--sans); border: 0; background: var(--white); color: var(--ink); min-width: 0; border-radius: 0; }
.fq-mail.is-done .fq-mail__pet { display: none; }
.fq-mail__pet { grid-template-columns: 1fr 1fr; }
.fq-mail__pet legend { grid-column: 1 / -1; }
.fq-mail__pet #fq-pet-name { grid-column: 1 / -1; }

/* Reviews filters: basis switches + ingredient filters (2026-10-04). */
.r-basis { display: grid; grid-template-columns: 1fr 1fr; margin: 6px 0 4px; border: 1px solid var(--rule); }
.r-basis label { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 34px; margin: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--body); }
.r-basis input { position: absolute; opacity: 0; pointer-events: none; }
.r-basis label:has(input:checked) { background: var(--ink); color: var(--bg); font-weight: 600; }
.r-basis label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: -2px; }
.r-ing__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.r-ing__chip { min-height: 32px; padding: 0 10px; cursor: pointer; font: 600 12.5px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule); }
.r-ing__chip:hover { border-color: var(--ink); }
.r-ing__chip.is-on { background: var(--blue); border-color: var(--blue); color: var(--on-blue); text-decoration: line-through; }
.r-ing input[type="text"] { width: 100%; padding: 10px 12px; min-height: 44px; border: 1px solid var(--rule); border-radius: 0; background: var(--white); font-size: 15px; }
.r-ing input[type="text"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Basis switch: one button showing the current basis; tap to flip (owner 2026-10-04). */
.r-basis-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; min-height: 32px; padding: 0 10px; cursor: pointer;
  font: 600 13px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--ink); border-radius: 0;
}
.r-basis-btn:hover { background: var(--ink); color: var(--bg); }
.r-basis-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.r-basis-btn svg { flex: none; }

/* Phones: one-tap quick filters above the collapsed panel (archive-product.php, 2026-10-04). */
.r-mchips { display: none; }
@media (max-width: 1024px) {
  .r-mchips {
    display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter, 20px)) 10px; padding: 2px var(--gutter, 20px) 6px; grid-column: 1 / -1;
  }
  .r-mchips::-webkit-scrollbar { display: none; }
  .r-mchip {
    flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; white-space: nowrap;
    font: 600 13.5px var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule); text-decoration: none;
  }
  .r-mchip:hover { border-color: var(--ink); text-decoration: none; }
  .r-mchip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .r-mchip--ex.is-on { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
  .r-mchips__sep { flex: none; width: 1px; background: var(--rule); margin: 6px 4px; }
  /* The brand format chips already sit in the quick row on phones. */
  .r-quick { display: none; }
}
/* The basis switch is the text under the slider itself (owner 2026-10-04: no separate button). */
.r-basis-tog {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; margin: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--ink); background: none; border: 0;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.r-basis-tog:hover { color: var(--blue); }
.r-basis-tog:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---- Quiz end: shame stamp + big share button (2026-10-06). Copy lives in itk_v4_quiz_tiers(). ---- */
.fq-end__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fq-end__top .fq-end__score { flex: 0 0 auto; }
.fq-shame {
  flex: 0 1 auto; max-width: 50%; margin: 0 6px 0 auto; padding: 8px 12px; text-align: center;
  font-family: var(--mono); font-weight: 600; font-size: clamp(15px, 4.4vw, 22px); line-height: 1.1;
  letter-spacing: .08em; text-transform: uppercase; color: var(--red);
  border: 4px double var(--red); transform: rotate(-8deg);
  animation: fq-shame .45s cubic-bezier(.2,.9,.3,1.3) .55s both;
}
.fq-shame--good { color: var(--green); border-color: var(--green); }
.fq-shame[hidden] { display: none; }
@keyframes fq-shame { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .fq-shame { animation: none; } }
.fq-end__line { font-weight: 500; color: var(--ink); }
.fq-share__h { font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.fq-share__sub { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--body-2); }
.fq-share__big {
  display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: center; cursor: pointer;
  background: var(--red); color: #fff; border: 0;
  font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.fq-share__big:hover { filter: brightness(1.08); }
.fq-share__copied { margin: 8px 0 0; font-size: 14px; color: var(--green); }
.fq-share__copied[hidden] { display: none; }
.fq-share__sign { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 10px; }
.fq-share__sign input { flex: 1 1 160px; }

/* Quiz end screen additions (2026-10-07): food lookup, daily challenge email copy, pinned "Dare a friend" bar. */
.fq-look { margin: 22px 0 0; padding: 20px; background: var(--panel); border: 1px solid var(--rule); }
.fq-look__h { margin: 0 0 6px; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); }
.fq-look__p { margin: 0 0 12px; color: var(--body); font-size: 15px; line-height: 1.45; }
.fq-look__row { display: flex; gap: 8px; }
.fq-look__row input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--rule); background: var(--white); font-size: 16px; }
.fq-look__go { min-height: 48px; padding: 0 18px; background: var(--ink); color: #fff; border: 0; cursor: pointer; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.fq-darebar { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; min-height: 56px; border: 0; cursor: pointer; background: var(--red); color: #fff;
  font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 28px rgba(20,18,16,.28); }
.fq-darebar[hidden] { display: none; }
@media (min-width: 900px) { .fq-darebar { left: auto; right: 24px; bottom: 24px; padding: 0 26px; } }

/* ---- Digital guides (2026-10-08): quiz end-screen offer and order-page upsell. Landing page CSS is inline
   in template-parts/digital-landing.php. Prefix dg-. ---- */
.dg-offer { margin: 22px 0 6px; border: var(--border-w, 2px) solid var(--ink); background: var(--white); padding: 18px; text-align: left; }
.dg-offer__miss { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.dg-offer__v { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.dg-offer__v--c { grid-template-columns: 1fr; }
/* The class sets display:grid, which beats the browser's own [hidden] rule: hide explicitly. */
.dg-offer[hidden], .dg-offer__v[hidden] { display: none; }
.dg-offer__v--c .dg-offer__img { max-width: 360px; }
.dg-offer__img { width: 100%; height: auto; border-radius: 4px; }
.dg-offer__h { font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 8px; }
.dg-offer__p { margin: 0 0 14px; line-height: 1.5; }
.dg-offer__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dg-offer__go { display: inline-block; background: var(--blue); color: #fff; font-weight: 700; font-size: 16px; padding: 13px 20px; border-radius: 4px; text-decoration: none; }
.dg-offer__go:hover { filter: brightness(.88); color: #fff; }
.dg-offer__go--alt { background: var(--ink); }
.dg-offer__more { font-weight: 600; }
.dg-offer__fine { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
@media (max-width: 560px) { .dg-offer__v { grid-template-columns: 1fr; } .dg-offer__img { max-width: 220px; } }
.dg-upsell { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; margin: 28px 0; padding: 20px; background: var(--panel); border-radius: 6px; }
.dg-upsell img { width: 100%; height: auto; border-radius: 4px; }
.dg-upsell__k { font-size: 14px; color: var(--muted); margin: 0 0 6px; }
.dg-upsell__h { font-family: var(--display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 8px; }
@media (max-width: 560px) { .dg-upsell { grid-template-columns: 1fr; } .dg-upsell img { max-width: 180px; } }

/* ---- Digital guides site promos (2026-10-08): itk_v4_digital_promo() in functions/digital-guides.php.
   One look everywhere, the homepage band. "band" stacks by its own width (container queries), so the same markup
   works full width and in an article column; "side" is the stacked sidebar unit. Prefix dg-p. ---- */
.dg-p { margin: 32px 0; text-align: left; container-type: inline-size; }
.dg-home .dg-p, .dg-fc-end .dg-p, .dg-band-wrap .dg-p { margin: 0; }
.dg-p a { text-decoration: none; }
.dg-p__k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin: 0 0 8px; }
.dg-p__h { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 12px; color: var(--ink); }
.dg-p__h--s { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.dg-p__go { display: inline-block; background: var(--blue); color: var(--on-blue); font-weight: 700; font-size: 15px; padding: 12px 18px; border-radius: 4px; }
.dg-p__go:hover { background: var(--blue-d); color: var(--on-blue); }
.dg-p__go--alt { background: var(--ink); color: var(--on-ink); }
.dg-p__go--alt:hover { background: var(--ink-hi); color: var(--on-ink); }
.dg-p__fine { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.dg-p__band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 32px; }
.dg-p__shot img { display: block; width: 100%; height: auto; border-radius: 6px; }
.dg-p__lede { font-size: 18px; line-height: 1.5; color: var(--body); margin: 0 0 20px; }
.dg-p__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dg-p__item { background: var(--white); border: 1px solid var(--rule); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dg-p__item p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--body); flex: 1; }
.dg-p__item .dg-p__name { font-weight: 700; color: var(--ink); font-size: 16px; flex: 0; }
.dg-p__name span { font-family: var(--mono); font-weight: 600; color: var(--blue); margin-left: 4px; white-space: nowrap; }
.dg-p__item .dg-p__go { align-self: flex-start; }
@container (max-width: 860px) {
	.dg-p__band { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
	.dg-p__shot img { max-height: 340px; object-fit: contain; background: transparent; }
}
@container (max-width: 520px) {
	.dg-p__band { padding: 18px; }
	.dg-p__pair { grid-template-columns: 1fr; }
	.dg-p__lede { font-size: 16.5px; }
	.dg-p__go { font-size: 14.5px; padding: 11px 14px; }
}
/* Sidebar unit: the band's parts, stacked and tighter. */
.dg-p--side { margin: 0; }
.dg-p--side .dg-p__band { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
.dg-p--side .dg-p__h { font-size: 22px; margin-bottom: 6px; }
.dg-p--side .dg-p__lede { font-size: 14.5px; margin-bottom: 12px; }
.dg-p--side .dg-p__pair { grid-template-columns: 1fr; gap: 8px; }
.dg-p--side .dg-p__item { padding: 10px 12px; gap: 8px; }
.dg-p--side .dg-p__name { font-size: 15px; }
.dg-p--side .dg-p__go { width: 100%; text-align: center; font-size: 14.5px; padding: 10px 12px; }
.dg-p--side .dg-p__fine { font-size: 12px; margin-top: 10px; }
.r-filters .dg-p--side { margin-top: 18px; }
.r-filters .dg-p--side .dg-p__band { border-radius: 0; }
/* The sidebars drop under the content at these widths; phones get the band only. */
@media (max-width: 1080px) { .g-rail .dg-p--side { display: none; } }
@media (max-width: 1024px) { .r-filters .dg-p--side { display: none; } }
.dg-band-wrap { margin-top: 48px; }
/* Some page templates reset paragraph margins (the ingredient file does); keep the band's spacing everywhere. */
.dg-p p.dg-p__k { margin: 0 0 8px; }
.dg-p p.dg-p__h { margin: 0 0 12px; }
.dg-p p.dg-p__lede { margin: 0 0 20px; }
.dg-p p.dg-p__fine { margin: 14px 0 0; }
.dg-p.dg-p--side p.dg-p__h { margin-bottom: 6px; }
.dg-p.dg-p--side p.dg-p__lede { margin-bottom: 12px; }
.dg-p.dg-p--side p.dg-p__fine { margin-top: 10px; }
/* Phones: the product rows keep name, price and button; the description lines go, so the band stays near one screen. */
@container (max-width: 520px) { .dg-p__item p:not(.dg-p__name) { display: none; } .dg-p__shot img { max-height: 220px; } }
/* "Get both" under the two product rows (functions/digital-offers.php prices it). */
.dg-p a.dg-p__both { display: block; margin-top: 14px; padding: 12px 16px; border: 1.5px dashed var(--ink); border-radius: 6px; background: var(--white); color: var(--ink); font-weight: 700; font-size: 16px; text-align: center; }
.dg-p a.dg-p__both:hover { border-style: solid; color: var(--ink); }
.dg-p__both span { color: var(--blue); font-weight: 600; }
.dg-p--side a.dg-p__both { font-size: 14.5px; padding: 10px 12px; margin-top: 8px; }

/* ---- Quiz end screen, simplified (2026-10-08) ----
   Smaller e-book offer, Ajax Search Pro in the lookup box (styled by the
   :is(#search-bar, #fq-look-asp) block under Search), email-only newsletter. */
.dg-offer { padding: 14px; }
.dg-offer__miss { font-size: 11px; margin-bottom: 10px; }
.dg-offer__h { font-size: 17px; margin-bottom: 6px; }
.dg-offer__p { font-size: 14px; line-height: 1.45; margin-bottom: 12px; }
.dg-offer__go { font-size: 14px; padding: 10px 16px; }
.dg-offer__more { font-size: 14px; }
.dg-offer__fine { font-size: 12px; margin-top: 8px; }
@media (min-width: 561px) { .dg-offer__v:not(.dg-offer__v--c) { grid-template-columns: 110px 1fr; gap: 14px; } }
@media (max-width: 560px) { .dg-offer__img { max-width: 180px; } }
.fq-look__asp .asp_w_container { max-width: 100%; }
#fq-look-asp div.asp_m .probox .proinput input.orig,
#fq-look-asp div.asp_m .probox .proinput input.autocomplete { font-size: 16px; }
/* The end screen sits in the fixed quiz stage (z 99995); the results panel is on <body>. */
body div.asp_r.asp_r_1 { z-index: 99996 !important; }
.fq-mail { gap: 10px; }
.fq-mail__h { font-size: 18px; }
.fq-mail__msg:empty { display: none; }
/* Share row grew to ten buttons (2026-10-08): three across on phones. */
@media (max-width: 560px) {
  .fq-share__row { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .fq-share__btn { padding: 0 4px; letter-spacing: .04em; font-size: 11.5px; }
}
/* Guides band above the footer, every page (2026-10-08). */
.dg-foot-wrap { max-width: var(--shell); margin: 0 auto; padding: var(--s5) var(--gutter) 0; }
.dg-foot-wrap .dg-p { margin: 0; }

/* ---- Homepage map (2026-10-08): functions/home-map.php. Explore tiles, Brand vs Brand peek, sneak peeks.
   Prefix hm-. Theme tokens only. ---- */
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.hm-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
a.hm-tile:hover, .hm-tile--lead:hover { border-color: var(--ink); }
a.hm-tile:hover { transform: translateY(-2px); }
.hm-tile__a { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.hm-tile__n { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.hm-tile__t { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -.015em; }
.hm-tile__p { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.hm-tile--lead { grid-column: span 2; grid-row: span 2; background: var(--panel); justify-content: space-between; gap: 18px; }
.hm-tile--lead .hm-tile__t { font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -.03em; }
.hm-tile--lead .hm-tile__n { font-size: 13px; }
.hm-tile--lead .hm-tile__p { font-size: 16px; color: var(--body); }
.hm-formats { display: flex; flex-wrap: wrap; gap: 8px; }

.hm-bvs__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.hm-bvs__card { display: flex; flex-direction: column; gap: 8px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); text-decoration: none; padding-bottom: 16px; overflow: hidden; }
.hm-bvs__card:hover { border-color: var(--ink); }
.hm-bvs__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid var(--rule-lt); }
.hm-bvs__t, .hm-bvs__stat, .hm-bvs__n { padding: 0 16px; }
.hm-bvs__t { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.015em; margin-top: 6px; }
.hm-bvs__t em, .hm-bvs__stat em { font-style: normal; color: var(--muted); font-weight: 500; }
.hm-bvs__stat { display: flex; flex-direction: column; gap: 2px; }
.hm-bvs__stat b { font-size: 18px; }
.hm-bvs__n { font-size: 13.5px; color: var(--muted); }

.hm-peeks__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.hm-peek { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--panel); border: 1px solid var(--rule); }
.hm-peek p { margin: 0; }
.hm-peek .k-morelink { margin-top: auto; align-self: flex-start; }
.hm-peek__t { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--ink); }
.hm-peek__big { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.hm-peek__p { font-size: 15px; line-height: 1.5; color: var(--body); }
.hm-ings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-ings a { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.hm-ings a:hover span { text-decoration: underline; }
.hm-ings img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; background: var(--white); flex: none; }

@media (max-width: 1080px) {
	.hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-peeks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.hm-tile { padding: 12px; gap: 4px; }
	.hm-tile__t { font-size: 16px; }
	.hm-tile__p { font-size: 13px; }
	.hm-tile__n { font-size: 10.5px; letter-spacing: .06em; }
	.hm-tile--lead { grid-row: auto; padding: 16px; }
	.hm-bvs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.hm-bvs__t { font-size: 16px; }
	.hm-bvs__stat b { font-size: 15px; }
	.hm-bvs__t, .hm-bvs__stat, .hm-bvs__n { padding: 0 10px; }
	.hm-bvs__n { font-size: 12px; }
	.hm-peeks__grid { grid-template-columns: 1fr; gap: 10px; }
	.hm-peek__big { font-size: 36px; }
}
.hm-tile--wide { grid-column: span 2; background: var(--panel); }
.hm-tile--wide .hm-tile__t { font-size: 24px; }

/* Free cheat sheet for an email (functions/free-cheatsheet.php, 2026-10-09) */
.dg-free { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; margin: 0; padding: 18px; background: var(--panel); border-radius: 6px; text-align: left; }
.dg-free--inline { display: block; padding: 14px; margin: 0 0 14px; }
.dg-free__img { width: 100%; height: auto; border-radius: 4px; }
.dg-free__k { margin: 0 0 4px; font: 700 13px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dg-free__k s { font-weight: 600; }
.dg-free__k span { color: var(--blue); margin-left: 4px; }
.dg-free__h { margin: 0 0 6px; font: 700 20px/1.2 var(--sans); color: var(--ink); }
.dg-free--inline .dg-free__h { font-size: 17px; }
.dg-free__p { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.dg-free__row { display: flex; gap: 8px; flex-wrap: wrap; }
.dg-free__row input { flex: 1 1 190px; min-height: 46px; padding: 0 12px; font: 16px var(--sans); border: 1px solid var(--line, #ccc); border-radius: 4px; background: var(--white); color: var(--ink); }
.dg-free__go, .dg-free__dl { min-height: 46px; padding: 0 18px; border: 0; border-radius: 4px; cursor: pointer; font: 700 15px var(--sans); background: var(--blue); color: var(--on-blue, #fff); display: inline-flex; align-items: center; text-decoration: none; }
.dg-free__go:hover, .dg-free__dl:hover { background: var(--blue-d, var(--blue)); color: var(--on-blue, #fff); }
.dg-free__go:disabled { opacity: .6; }
.dg-free__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.dg-free__fine { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.dg-free__msg { margin: 6px 0 0; font-size: 14px; color: var(--ink); }
.dg-free__msg:empty { display: none; }
.dg-free__ok { margin: 0; flex-basis: 100%; font-size: 14px; color: var(--muted); }
.dg-free.is-done .dg-free__fine { display: none; }
.dg-offer__v--free .dg-offer__fine { margin-top: 10px; }
.dg-p__buy { display: inline-block; font-size: 14px; font-weight: 600; }
@media (max-width: 560px) { .dg-free { grid-template-columns: 1fr; } .dg-free__img { max-width: 160px; } }

/* Story media (2026-10-09): real brand + creator posts in News stories (functions/story-media.php). Prefix sm-. */
.sm-wrap { margin: 40px 0 44px; padding: 26px 0 6px; border-top: var(--border-w, 2px) solid var(--ink); }
.sm-wrap h2 { margin-top: 0; }
.sm-intro { color: var(--muted); font-size: 15px; margin: -4px 0 20px; }
.sm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sm-head h2 { flex: 1 1 auto; min-width: 0; }
.sm-nav { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-bottom: 4px; }
.sm-count { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.sm-arrow { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--bg, #fff); color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.sm-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-arrow:hover:not(:disabled), .sm-arrow:focus-visible { background: var(--ink); color: var(--bg, #fff); }
.sm-arrow:disabled { opacity: .3; cursor: default; }
.sm-track { display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; overscroll-behavior-x: contain; padding-bottom: 14px; scrollbar-width: thin; }
.sm-track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.sm-card { flex: 0 0 min(320px, 82%); scroll-snap-align: start; margin: 0; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius, 10px); overflow: hidden; }
.sm-card figcaption { padding: 12px 14px 14px; }
.sm-src { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sm-paid { display: inline-block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--rule-md, var(--rule)); padding: 2px 6px; border-radius: 4px; }
.sm-note { margin: 8px 0 8px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.sm-link { font-size: 14px; font-weight: 600; }
.sm-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; overflow: hidden; }
.sm-yt--short .sm-play { aspect-ratio: auto; height: min(560px, 150vw); }
.sm-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.sm-btn { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 14px; background: var(--red, #c8202b); }
.sm-btn::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.sm-play:hover .sm-btn, .sm-play:focus-visible .sm-btn { transform: scale(1.08); }
.sm-yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.sm-yt--short iframe { aspect-ratio: 9 / 16; max-height: 560px; }
.sm-embed { min-height: 120px; background: #fff; }
.sm-embed .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.sm-embed blockquote:not(.instagram-media-rendered) { padding: 18px; font-size: 14px; }

/* ============================================================
   Wet food product pages (2026-10-14): functions/wet-page.php
   ============================================================ */
.ph-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.ph-badge { padding: 6px 12px; border: 1px solid var(--rule); background: var(--white); font-size: 14px; line-height: 1.3; color: var(--body-2); }
.ph-badge span { color: var(--muted); font-size: 12.5px; }
.ph-badge--complete { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.ph-badge--topper { border-color: var(--amber); color: var(--ink); font-weight: 600; background: var(--warm); }
.ph-badge--meal { border-color: var(--ink); color: var(--ink); }
.ph-stats--4 { grid-template-columns: repeat(4, 1fr); }
.ph-stats--4 .ph-stat { padding: 16px 16px; }
.ph-stats--4 .ph-stat__v { font-size: 23px; }
.ph-stats__note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ph-stats__note a { color: inherit; text-decoration: underline; }
@media (max-width: 1100px) { .ph-stats--4 { grid-template-columns: repeat(2, 1fr); } .ph-stats--4 .ph-stat:nth-child(3) { border-left: 0; } .ph-stats--4 .ph-stat:nth-child(n+3) { border-top: 1px solid var(--rule); } }
@media (max-width: 860px) { .ph-stats--4 { grid-template-columns: repeat(2, 1fr); } .ph-stats--4 .ph-stat:nth-child(2n) { border-left: 1px solid var(--rule); } .ph-stats--4 .ph-stat:nth-child(2) { border-top: 0; } }

.pd-wread { margin-top: 36px; }
.pd-wread__rows { margin: 18px 0 0; }
.pd-wread__rows > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid var(--rule); }
.pd-wread__rows > div:first-child { border-top: 0; padding-top: 4px; }
.pd-wread__rows dt { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.pd-wread__rows dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body-2); }
@media (max-width: 700px) { .pd-wread__rows > div { grid-template-columns: 1fr; gap: 4px; } }

.pd-wnut__why { margin: 8px 0 14px; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--body-2); }
.pd-wcmp { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); }
.pd-wcmp__row { display: grid; grid-template-columns: 190px 120px minmax(120px, 1fr) 230px; align-items: center; gap: 18px; padding: 10px 0; }
.pd-wcmp__k { font-size: 15px; font-weight: 600; color: var(--ink); }
.pd-wcmp__v { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.pd-wcmp__bar { position: relative; height: 8px; background: var(--rule); border-radius: 4px; }
.pd-wcmp__mid { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--muted); }
.pd-wcmp__dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ink); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--ink); }
.pd-wcmp__note { font-size: 13.5px; color: var(--muted); }
@media (max-width: 900px) { .pd-wcmp__row { grid-template-columns: 1fr auto; gap: 6px 14px; } .pd-wcmp__bar { grid-column: 1 / -1; } .pd-wcmp__note { grid-column: 1 / -1; } }

/* Brand vs brand: as fed / dry matter switch (brand-vs.php). The basis text is
   the switch, as on the reviews filter (owner 2026-10-04: no separate button). */
.bvs-basis { margin: 4px 0 14px; font-size: 14.5px; color: var(--muted); }
.bvs-basis__tog {
  padding: 2px 0; margin: 0; cursor: pointer; font: inherit; font-weight: 600;
  color: var(--ink); background: none; border: 0;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.bvs-basis__tog:hover { color: var(--blue); }
.bvs-basis__tog:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Product-line rows (2026-10-17, owner: "put the products on the same product line in a carousel ... on mobile").
   Desktop: the wrapper and heading drop away, so the cards stack exactly as before. Phones: one swipeable row per line. */
.r-line, .r-line__track { display: contents; }
.r-line__head { display: none; }
@media (max-width: 760px) {
  /* The results column is a grid item: without min-width 0 a scrolling row widens it to the row's full scroll width. */
  .r-grid > *, .r-list { min-width: 0; }
  .r-line { display: block; min-width: 0; }
  .r-line__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px;
  }
  .r-line__name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--ink); }
  .r-line__n { flex: none; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
  .r-line__n a { color: var(--blue); }
  .r-line__track {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -18px; padding: 0 18px 4px; scroll-padding: 0 18px;
  }
  .r-line__track::-webkit-scrollbar { display: none; }
  .r-line__track > .r-card { flex: 0 0 82%; scroll-snap-align: start; }
  .r-line__track .r-card__shot { min-height: 150px; padding: 12px; }
  .r-line__track .r-card__shot img { max-height: 130px; }
  .r-line__track .r-card__name { font-size: 18px; }
}

/* ============================================================
   Line reviews (functions/line-review.php, 2026-10-17)
   Brand page: one card per line. Line page: review, table, recipe by recipe.
   ============================================================ */
.lr { margin-top: 46px; }
.lr-verdict { margin-top: 22px; max-width: var(--measure); background: var(--warm); padding: 20px 24px; border-left: var(--border-w) solid var(--blue); }
.lr-verdict p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.lr-verdict p + p { margin-top: 10px; }
.lr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
.lr-list { margin: 12px 0 0; padding: 0; list-style: none; }
.lr-list li { position: relative; padding: 9px 0 9px 18px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; }
.lr-list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; background: var(--blue); }

.lr-group { margin-top: 40px; }
.lr-group__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.lr-table { margin-top: 14px; overflow-x: auto; border: 1px solid var(--rule); background: var(--white); }
.lr-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.lr-table th, .lr-table td { padding: 10px 12px; text-align: left; border-top: 1px solid var(--rule); vertical-align: top; }
.lr-table thead th { border-top: 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; background: var(--panel); }
.lr-table tbody th { font-weight: 700; min-width: 180px; }
.lr-table tbody th a { color: var(--ink); }
.lr-table tbody th a:hover { color: var(--blue); }
.lr-num { font-family: var(--mono); white-space: nowrap; text-align: right !important; }
.lr-num.is-hi { font-weight: 800; color: var(--blue); }
.lr-num.is-lo { font-style: italic; color: var(--muted); }
.lr-ing { min-width: 220px; color: var(--body); font-size: 13.5px; }
.lr-avg th, .lr-avg td { background: var(--panel); font-weight: 600; }

.lr-recipes { margin-top: 18px; display: grid; gap: 14px; }
.lr-r { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; padding: 16px; border: 1px solid var(--rule); background: var(--white); scroll-margin-top: 90px; }
.lr-r__shot { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; background: var(--panel); }
.lr-r__shot img { width: 100%; height: 100%; object-fit: contain; }
.lr-r__name { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.lr-r__name a { color: var(--ink); }
.lr-r__name a:hover { color: var(--blue); }
.lr-r__figs { margin: 6px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.lr-r__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lr-r__text { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--body); max-width: var(--measure); }
.lr-r__more { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.lr-faq { margin-top: 40px; max-width: var(--measure); }
.lr-faq details { border-top: 1px solid var(--rule); padding: 12px 0; }
.lr-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.lr-faq details p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }

.lr-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 22px; }
.lr-line { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--rule); background: var(--white); }
.lr-line header { display: flex; flex-direction: column; gap: 4px; }
.lr-line__name { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.lr-line__name a { color: var(--ink); }
.lr-line__name a:hover { color: var(--blue); }
.lr-line__figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 0; }
.lr-line__figs div { padding: 8px 0; border-top: 2px solid var(--ink); }
.lr-line__figs dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lr-line__figs dd { margin: 3px 0 0; font-family: var(--mono); font-size: 17px; font-weight: 700; }
.lr-line__basis { margin: 6px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.lr-line__text { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.lr-line__fit { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.lr-line__more { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.lr-choose { margin-top: 22px; }
.lr-choose li a { font-weight: 700; }

@media (max-width: 760px) {
	.lr-two { grid-template-columns: 1fr; }
	.lr-verdict { padding: 16px 18px; }
	.lr-r { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
	.lr-r__shot { width: 64px; height: 64px; }
	.lr-lines { grid-template-columns: minmax(0, 1fr); }
	.lr-table tbody th { min-width: 150px; }
}
.lr-tag { display: inline-block; padding: 3px 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--panel); border-left: 3px solid var(--blue); }
.lr-table tbody th, .lr-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); }
.lr-table thead th:first-child, .lr-avg th { background: var(--panel); }
@media (max-width: 760px) { .lr-table tbody th { min-width: 132px; max-width: 150px; } }

/* ---- Line vs line (B-271 pilot): two lines of one brand on the brand-vs template ---- */
.lvs-picks { display: grid; gap: 10px; align-content: start; }
.lvs-picks > .pd-h2 a { color: var(--ink); }
.lvs-pick {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 12px; background: var(--white); border: 1px solid var(--ink); color: var(--ink);
}
.lvs-pick:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--ink); }
.lvs-pick__img { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.lvs-pick__img img { max-width: 84px; max-height: 84px; width: auto; height: auto; object-fit: contain; }
.lvs-pick__body { display: grid; gap: 4px; min-width: 0; }
.lvs-pick__why { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.lvs-pick__t { font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.lvs-matrix { width: 100%; border-collapse: collapse; min-width: 720px; }
.lvs-matrix th, .lvs-matrix td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--rule-lt); font-size: 14px; color: var(--body); }
.lvs-matrix td { font-family: var(--mono); font-size: 13.5px; }
.lvs-matrix thead th {
  border-top: 0; background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.lvs-matrix tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.lvs-matrix tbody tr:nth-child(even) { background: var(--row-alt); }
.lvs-matrix tbody tr.is-cur { background: var(--warm); }
.lvs-matrix tbody tr.is-cur th { box-shadow: inset 4px 0 0 var(--blue); }
.lvs-matrix .lvs-matrix__na { font-family: inherit; font-size: 13px; color: var(--muted); }
.lvs-matrix__vet th { color: var(--muted); }
.lvs-more__h { margin-top: 26px; }
@media (max-width: 720px) {
  .lvs-pick { grid-template-columns: 64px minmax(0, 1fr); }
  .lvs-pick__img { width: 64px; height: 64px; }
  .lvs-pick__img img { max-width: 64px; max-height: 64px; }
}
.lvs-note { color: var(--blue); }
.lvs-gone { margin-top: 10px; max-width: 70ch; }

/* ============================================================
   Product page: similar recipes from other brands + lower-priced
   alternative (B-295, 2026-10-24). Same .k-food card as the homepage.
   ============================================================ */
.pd-simgrid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pd-simcard .k-food__name { font-size: 16.5px; }
.pd-simcard .k-food__shot { height: 160px; }
.pd-cheaper__row { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 26px; align-items: center; }
.pd-cheaper__vs { margin: 0; font-size: 17px; line-height: 1.5; color: var(--body); }
.pd-cheaper__vs b { font-family: var(--mono); color: var(--ink); white-space: nowrap; }
.pd-cheaper__vs b:first-child { color: var(--feature-red, #C8202B); }
.pd-cheaper__vs span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted-2); }
@media (max-width: 1100px) { .pd-simgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pd-simgrid { gap: 12px; }
  .pd-simcard .k-food__shot { height: 120px; padding: 8px; }
  .pd-simcard .k-food__body { padding: 12px 12px 14px; gap: 8px; }
  .pd-simcard .k-food__name { font-size: 14.5px; }
  .pd-simcard .k-food__meta { flex-wrap: wrap; gap: 2px 8px; }
  .pd-simcard .k-food__brand { font-size: 11px; }
  .pd-simcard .k-food__metric { font-size: 10px; letter-spacing: .06em; }
  .pd-simcard .k-food__metric b { font-size: 13px; }
  .pd-cheaper__row { grid-template-columns: 1fr; gap: 14px; }
}
.pd-cheaper__row .pd-simcard { max-width: 420px; }