/* =============================================================
   BROKEN WINGS APPAREL — THE AISLE AFTER HOURS
   =============================================================
   One stylesheet, no build step, no runtime imports. build.mjs
   copies it as-is, every storefront page links it, and /admin
   inherits its tokens and base components (.btn, .field, .drop,
   .clock, .spec, .box) — so those class contracts are kept even
   where their look changed.

   THE WORLD
   Still the aisle: the tagline is "Wear Your Breakfast. Feed Your
   Weird." and the flagship is three cereal-box tees, so products
   are boxed goods, prices sit on shelf talkers, sold out is an
   empty slot and a drop is a delivery. What changed in the 2026-10
   facelift is the EXECUTION: an art-directed end-cap lit like a
   product shoot, packaging-scale type, editorial rhythm instead
   of a uniform stack of bordered boxes, and one signature mark —
   the slime drip — that re-liveries with every product line.

   COLOUR POLICY
   Every value that carries text was MEASURED, not chosen: run
   `node _tools/contrast.mjs`, which exits non-zero if a pairing
   drops below WCAG AA. Ratios are against that line's --ground.

   See DESIGN.md for the full record.
   ============================================================= */

/* ---------------------------------------------- 1. Typefaces */
/* Two families, self-hosted Latin subsets (~41KB together).
   Archivo Black  — the display voice: headlines, statements, featured prices.
   Space Grotesk  — everything you read or press: body, nav, buttons, labels.
   Each has a metric-matched fallback (Arial Black / Arial, with size and
   line metrics measured from the woff2 files), so the swap when the web
   font lands does not move the layout. */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/archivo-black-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo Black Fallback';
  src: local('Arial Black'), local('ArialMT-Black'), local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 99.99%;
  ascent-override: 87.81%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Space Grotesk Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 108.78%;
  ascent-override: 90.45%;
  descent-override: 26.84%;
  line-gap-override: 0%;
}

/* -------------------------------------- 2. Lines (the themes) */
/*
   Three product lines. `data-line` is set on <html> by the inline
   snippet in layout.html BEFORE first paint. Slime is written on
   :root too, so a page that never got the attribute is still whole.
   lib/theme.mjs DEFAULT_THEMES is a transcription of these blocks
   and the build writes the owner's edits to lines.css, which loads
   after this file and wins.

   Two dark lines and one light one. Bleach is the light theme.
*/
:root,
[data-line='slime'] {
  --ground:      #04070B;
  --surface:     #0A1108;
  --surface-hi:  #131C0F;
  --line:        #25341C;  /* 1.53:1 — a rule, never text */
  --accent:      #B6FF00;  /* 16.62:1 */
  --accent-2:    #5BE36B;  /* 12.15:1 */
  --text:        #E4F5DA;  /* 17.66:1 */
  --muted:       #9DB78C;  /*  9.21:1 */
  --on-accent:   #04070B;  /* 16.62:1 on --accent */
  --warn:        #FF7A1A;  /*  7.74:1 */

  --line-name: 'Slime';
  --line-kin:  'Fly Toons';
  --logo-full: url('/assets/img/brand/logo.webp');
  --logo-mark: url('/assets/img/brand/logo-mark.webp');
  --box-mat: #0E1A09;
  --glow: 0 0 0 1px var(--accent), 0 0 24px -4px color-mix(in srgb, var(--accent) 55%, transparent);
  --grain-op: .05;
  --scheme: dark;
}

/* BLEACH — the light line. Red and black on bleached paper. The selector
   keeps the 'oilspill' id it has always had: that string is in LINE_IDS,
   bw-core, the header chip, and every browser that already remembered a
   choice. The ground moved off pure #FFF onto a warm paper so the light
   grey product photography (shot on #DEDEDE) reads as printed stock on a
   page rather than a hole punched in a white screen. */
[data-line='oilspill'] {
  --ground:      #F4F2EE;
  --surface:     #EAE7E1;
  --surface-hi:  #DFDBD3;
  --line:        #C2BBB1;  /*  1.68:1 — a rule, never text */
  --accent:      #C8102E;  /*  5.34:1 */
  --accent-2:    #141414;  /* 16.9:1 */
  --text:        #141414;  /* 16.9:1 */
  --muted:       #55524D;  /*  7.0:1 */
  --on-accent:   #FFFFFF;  /*  5.88:1 on --accent */
  --warn:        #963A00;

  --line-name: 'Bleach';
  --line-kin:  'Chrome Dip & Galaxy Gloss';
  --logo-full: url('/assets/img/brand/logo-ink.webp');
  --logo-mark: url('/assets/img/brand/logo-mark.webp');
  --box-mat: #DEDEDE;
  --glow: 0 0 0 1px var(--accent), 0 0 14px -4px color-mix(in srgb, var(--accent) 30%, transparent);
  --grain-op: .035;
  --scheme: light;
}

[data-line='hazmat'] {
  --ground:      #0B0A05;
  --surface:     #141206;
  --surface-hi:  #1F1C0A;
  --line:        #3A3413;  /* 1.59:1 */
  --accent:      #EBFF00;  /* 17.77:1 */
  --accent-2:    #FF7A1A;  /*  7.60:1 */
  --text:        #F2EFDC;  /* 17.13:1 */
  --muted:       #B2AC86;  /*  8.62:1 */
  --on-accent:   #0B0A05;  /* 17.77:1 on --accent */
  --warn:        #FF7A1A;

  --line-name: 'Hazmat';
  --line-kin:  'Swarms & Leather Cuts';
  --logo-full: url('/assets/img/brand/logo.webp');
  --logo-mark: url('/assets/img/brand/logo-mark.webp');
  --box-mat: #1A1707;
  --glow: 0 0 0 1px var(--accent), 0 0 22px -6px color-mix(in srgb, var(--accent) 50%, transparent);
  --grain-op: .09;
  --scheme: dark;
}

/* Native controls (scrollbars, form widgets, date pickers) follow the line.
   The light line is the only one that is not dark. */
:root { color-scheme: dark; }
[data-line='oilspill'] { color-scheme: light; }

/* ---------------------------------- 3. Non-colour foundations */
:root {
  --f-display: 'Archivo Black', 'Archivo Black Fallback', 'Arial Black', system-ui, sans-serif;
  --f-text:    'Space Grotesk', 'Space Grotesk Fallback', system-ui, -apple-system, sans-serif;
  /* Labels, nav, buttons, spec rows and figures. Same family as the text,
     set small, tracked and upper-case; Space Grotesk carries tabular
     figures, so measured numbers still line up. */
  --f-data:    var(--f-text);
  /* Kept as an alias so older rules resolve: the outlined face is gone,
     and "outline" lines are now solid display type in the accent. */
  --f-outline: var(--f-display);

  /* Type ramp. Archivo Black sets ~10% wider than the old signage face
     with a lower cap height, so the display steps come down a notch and
     track tighter: big and confident, not shouting. Text steps are
     unchanged; the smallest label step grows a hair because Space
     Grotesk caps are narrower than the old mono. */
  --t-hero: clamp(3rem, 11.5vw, 11rem);
  --t-mega: clamp(2.5rem, 8.6vw, 6.25rem);
  --t-xxl:  clamp(2rem, 5.6vw, 4rem);
  --t-xl:   clamp(1.5rem, 3.5vw, 2.35rem);
  --t-lg:   clamp(1.125rem, 2vw, 1.35rem);
  --t-md:   1rem;
  --t-sm:   0.875rem;
  --t-xs:   0.75rem;
  --t-xxs:  0.71875rem;

  /* Display tracking and leading, shared so every headline agrees. */
  --track-display: -.03em;
  --lead-display: .9;

  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;

  --shell: 88rem;
  --gut: clamp(1rem, 3.6vw, 2.75rem);
  --hdr-h: 64px;

  --r-none: 0;
  --r-tag: 2px;
  --r-pill: 999px;

  --lift-1: 0 2px 6px -2px rgb(0 0 0 / .45), 0 1px 2px rgb(0 0 0 / .3);
  --lift-2: 0 14px 30px -12px rgb(0 0 0 / .6), 0 4px 8px -4px rgb(0 0 0 / .4);
  --lift-3: 0 30px 70px -24px rgb(0 0 0 / .75), 0 8px 16px -8px rgb(0 0 0 / .5);

  /* Motion language: weighty and snappy. Confident expo-out arrivals,
     a hard ease-in for things leaving, and one long scene duration for
     the few authored moments (the relabel, the hero, the shelf). */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 560ms;
  --dur-scene: 1100ms;
  --stagger: 55ms;

  /* Printer's grain, as an inline SVG turbulence. No request. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------- 4. Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 1rem); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* --------------------------------------- 5. Browser surfaces */
::selection { background: var(--accent); color: var(--on-accent); text-shadow: none; }
html { scrollbar-color: var(--line) var(--ground); scrollbar-width: thin; caret-color: var(--accent); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ground); }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
a { text-underline-offset: .22em; text-decoration-thickness: from-font; }
::placeholder { color: var(--muted); opacity: 1; }
.tabular, .spec, .count, .price, td, th { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- 6. Base type */
body {
  background-color: var(--ground);
  color: var(--text);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}
/* The grain sits over everything at a per-line opacity, fixed so it does
   not scroll — print texture, not wallpaper. pointer-events:none so it can
   never eat a click. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  background-image: var(--grain);
  /* Plain opacity, not mix-blend-mode: a fixed full-screen BLENDED layer is
     recomposited on every scroll frame and cost phones ~1.5s of main thread
     in a throttled Lighthouse run. Half the strength reads the same. */
  opacity: calc(var(--grain-op) * .6);
}

h1, h2, .display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); line-height: .95; }
/* h3 is the supporting voice: product names, card and column heads.
   Space Grotesk at semibold keeps the black display for the statements. */
h3 {
  font-family: var(--f-text);
  font-size: var(--t-lg);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }
.prose { max-width: 68ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: var(--s4); }
.prose a { color: var(--accent); text-decoration: underline; }
.prose a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.prose strong { font-weight: 700; }

.lede { font-size: var(--t-lg); line-height: 1.4; color: var(--text); max-width: 46ch; }
.muted { color: var(--muted); }

/* The lockup: solid display type. It used to carry a hollow keyline layer
   (data-text is still in the markup, unused); the editorial direction is
   solid lettering, with the accent doing the work the outline did. */
.lockup {
  position: relative;
  display: inline-block;
  font-family: var(--f-display);
  text-transform: uppercase;
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
}
/* The second line of a two-line statement: solid, in the accent, so the
   pair still reads ink / colour. */
.outline { font-family: var(--f-display); color: var(--accent); }

.label {
  font-family: var(--f-data);
  font-size: var(--t-xxs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* ------------------------------------------------ 7. Skeleton */
.shell { width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; }
.shell--wide { width: min(100% - (var(--gut) * 2), 110rem); margin-inline: auto; }
.section { padding-block: clamp(var(--s7), 8vw, var(--s9)); }
.section--tight { padding-block: var(--s6); }
.section--flush-top { padding-top: 0; }

.skip-link {
  position: absolute; left: var(--s4); top: -100%;
  z-index: 100; padding: var(--s3) var(--s4);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f-data); font-size: var(--t-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
}
.skip-link:focus { top: var(--s4); }

/* A section head: heading left, note and action right, one hairline under.
   No eyebrow above the heading. */
.head {
  display: flex; flex-wrap: wrap; align-items: end;
  gap: var(--s3) var(--s5);
  margin-bottom: var(--s6);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.head h2, .head h1 { margin-right: auto; }
.head__note { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); letter-spacing: .06em; }

/* ---------------------------------- 8. Tape and the slime drip */
/* Hazard tape: the aisle's structural rule. Inherits the accent. */
.tape {
  --tape-h: 18px;
  height: var(--tape-h);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 14px, var(--ground) 14px 28px);
  border-block: 1px solid var(--line);
}
.tape--thin { --tape-h: 8px; }

/* THE DRIP — the signature mark. The silhouette is the brand's own slime
   divider, cut to an alpha mask by _tools (assets/img/brand/drip.png) and
   painted in whatever the line's accent is, so the same drip is green on
   Slime, red on Bleach and yellow on Hazmat. */
.tape[data-kind='drip'], .drip {
  height: clamp(36px, 6vw, 84px);
  border: 0;
  background: var(--accent);
  -webkit-mask: url('/assets/img/brand/drip.png') top left / auto 100% repeat-x;
          mask: url('/assets/img/brand/drip.png') top left / auto 100% repeat-x;
}
.drip--flip { transform: scaleY(-1); }

/* ------------------------------------------------ 9. Controls */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: var(--s3) var(--s5);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-data);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--btn-bg);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
/* A hard offset shadow in the text colour: the press-proof misregister of a
   printed box, and it moves on press like a real key. */
.btn:not([disabled]):hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--text); }
.btn:not([disabled]):active { transform: translate(0, 0); box-shadow: 0 0 0 var(--text); }
.btn[disabled], .btn[aria-disabled='true'] {
  --btn-bg: var(--surface-hi);
  --btn-fg: var(--muted);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--text); }
.btn--ghost:not([disabled]):hover { --btn-bg: var(--text); --btn-fg: var(--ground); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line); }
.btn--quiet:not([disabled]):hover { border-color: var(--accent); box-shadow: none; transform: none; color: var(--accent); }
.btn--wide { width: 100%; }
.btn--lg { min-height: 56px; font-size: var(--t-md); padding-inline: var(--s6); }
.btn--sm { min-height: 38px; padding: var(--s2) var(--s3); font-size: var(--t-xs); }
.btn__arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding-block: var(--s2);
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.link-arrow::after { content: '\2192'; transition: transform var(--dur-2) var(--ease); }
.link-arrow:hover { background-size: 100% 1px; color: var(--accent); }
.link-arrow:hover::after { transform: translateX(3px); }

.field { display: grid; gap: var(--s2); }
.field > label { font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%;
  min-height: 48px;
  padding: var(--s3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-none);
  font-family: var(--f-text);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.input:hover { border-color: var(--muted); }
.input:focus { border-color: var(--accent); background: var(--surface-hi); }
.input[aria-invalid='true'] { border-color: var(--warn); }
textarea.input { min-height: 8rem; resize: vertical; }

.hint { font-size: var(--t-xs); color: var(--muted); }
.err { font-size: var(--t-xs); color: var(--warn); font-family: var(--f-data); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 40px; padding: var(--s2) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--text); }
.chip[aria-current='page'], .chip[aria-pressed='true'] { background: var(--text); color: var(--ground); border-color: var(--text); }
.chip small { font-size: 10px; opacity: .7; }

/* ------------------------------------------------ 10. Header */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: transform var(--dur-3) var(--ease), background-color var(--dur-3) var(--ease);
}
/* Hidden while scrolling DOWN through content, back the moment the visitor
   scrolls up. Never hidden at the top, with a drawer open, or with focus
   inside it (site.js owns the attribute). */
.hdr[data-tucked='true'] { transform: translateY(-100%); }

.hdr__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s4);
  min-height: var(--hdr-h);
}
.hdr__mark { display: flex; align-items: center; text-decoration: none; }
.hdr__mark-art {
  display: block;
  height: 42px;
  aspect-ratio: 276 / 292;
  background: var(--logo-mark) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease);
}
.hdr__mark:hover .hdr__mark-art { transform: rotate(-6deg) scale(1.05); }
@media (min-width: 30rem) {
  .hdr__mark-art { aspect-ratio: 1200 / 292; background-image: var(--logo-full); height: 40px; }
}

.nav { display: none; justify-content: center; gap: clamp(var(--s4), 2vw, var(--s6)); }
.nav a, .nav__more {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
/* The underline is drawn, not toggled: it grows out from the left. */
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 8px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-2) var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { color: var(--accent); }
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav__group { display: inline-flex; align-items: center; }
.nav__more { width: 28px; justify-content: center; color: var(--muted); }
.nav__more svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform var(--dur-2) var(--ease); }
.nav__more[aria-expanded='true'] svg { transform: rotate(180deg); }
.nav__more:hover { color: var(--accent); }

.hdr__tools { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-pill);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.icon-btn:hover { background: var(--surface-hi); color: var(--accent); }
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn__count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f-data); font-size: 10px; font-weight: 700;
}
.icon-btn__count[hidden] { display: none; }
.icon-btn.is-bumped .icon-btn__count { animation: bump var(--dur-3) var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.6); } 100% { transform: scale(1); } }

@media (min-width: 64rem) {
  .nav { display: flex; }
  .hdr__nav-toggle { display: none; }
}

/* The line switcher in the header: three chips in a pill, with the current
   line's name beside them on wide screens. Each chip is a real button. */
.line-mini {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  margin-right: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.line-mini button {
  width: 22px; height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.line-mini button:hover { transform: scale(1.18); }
.line-mini button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3.5px var(--text); }
.line-mini__name {
  display: none;
  padding-inline: 6px 8px;
  font-family: var(--f-data); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.line-mini__name::before { content: var(--line-name); }
@media (min-width: 80rem) { .line-mini__name { display: inline; } }

/* ---------------------------------------- 11. The shop mega panel */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--lift-3);
  visibility: hidden; opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.mega[data-open='true'] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.mega__grid {
  display: grid; gap: var(--s6);
  grid-template-columns: 1fr 1fr 1.3fr;
  padding-block: var(--s6) var(--s7);
}
.mega h2 { font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .14em; color: var(--muted); margin-bottom: var(--s3); }
.mega ul { display: grid; gap: 2px; }
.mega__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
  padding-block: 6px;
  font-family: var(--f-text); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; line-height: 1.2;
  transition: color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease);
}
.mega__list a small { font-family: var(--f-data); font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.mega__list a:hover { color: var(--accent); transform: translateX(6px); }
.mega__feature { position: relative; display: block; text-decoration: none; overflow: hidden; background: var(--box-mat); }
.mega__feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--dur-scene) var(--ease); }
.mega__feature:hover img { transform: scale(1.04); }
.mega__feature span {
  position: absolute; left: 0; bottom: 0;
  padding: var(--s3) var(--s4);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f-text); font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* --------------------------------------------- 12. Drawers & sheets */
.drawer { position: fixed; inset: 0; z-index: 70; display: none; }
.drawer[open] { display: block; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgb(0 0 0 / .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fade-in var(--dur-2) var(--ease);
}
.drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(28rem, 100vw);
  display: flex; flex-direction: column;
  background: var(--ground);
  border-left: 1px solid var(--line);
  box-shadow: var(--lift-3);
  animation: drawer-in var(--dur-3) var(--ease);
}
.drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--s5) var(--s5); overscroll-behavior: contain; }
.drawer__foot { padding: var(--s4) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  min-height: var(--hdr-h);
  border-bottom: 1px solid var(--line);
}
.drawer__title { font-family: var(--f-text); font-size: var(--t-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.drawer__title small { font-family: var(--f-data); font-size: var(--t-xxs); color: var(--muted); margin-left: var(--s2); letter-spacing: .08em; }

/* The menu is its own composition on a phone: full screen, numbered aisle
   signs at packaging scale, then the collections as chips. */
.drawer--menu .drawer__panel { width: 100vw; border-left: 0; }
.drawer__links { counter-reset: aisle; display: grid; padding-block: var(--s4); }
.drawer__links a {
  counter-increment: aisle;
  display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s2) 0;
  font-family: var(--f-display); font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.drawer__links a::before {
  content: counter(aisle, decimal-leading-zero);
  font-family: var(--f-data); font-size: var(--t-xxs); color: var(--muted); letter-spacing: .1em;
  min-width: 2.2em;
}
.drawer__links a:hover, .drawer__links a:focus-visible { color: var(--accent); }
.drawer[open] .drawer__links a { animation: menu-in var(--dur-3) var(--ease) backwards; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(16px); } }
.drawer__chips { display: flex; flex-wrap: wrap; gap: var(--s2); padding-block: var(--s5); }

/* ---------------------------------------------------- 13. Search */
.search .drawer__panel {
  inset: 0 0 auto 0; width: 100%;
  max-height: min(88vh, 46rem);
  border-left: 0; border-bottom: 1px solid var(--line);
  animation: sheet-down var(--dur-3) var(--ease);
}
@keyframes sheet-down { from { transform: translateY(-100%); } }
.search__bar {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 88px;
  border-bottom: 1px solid var(--line);
}
.search__bar svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.search__input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  font-family: var(--f-text); font-size: clamp(1.4rem, 4.5vw, 2.4rem); font-weight: 500; letter-spacing: -.02em;
  color: var(--text);
}
.search__input::-webkit-search-cancel-button { display: none; }
.search__body { overflow-y: auto; padding-block: var(--s5) var(--s7); }
.search__meta { margin-bottom: var(--s4); }
.search__results { display: grid; gap: var(--s2) var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.search__hit { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); align-items: center; text-decoration: none; padding: var(--s2); transition: background var(--dur-1) var(--ease); }
.search__hit:hover, .search__hit:focus-visible { background: var(--surface-hi); }
.search__hit img { width: 72px; height: 72px; object-fit: cover; background: var(--box-mat); }
.search__hit b { display: block; font-family: var(--f-text); font-size: var(--t-sm); font-weight: 700; line-height: 1.25; }
.search__hit > span > span { display: block; margin-top: 4px; font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); }
.search__hit mark { background: none; color: var(--accent); }
.search__empty { padding-block: var(--s6); color: var(--muted); }
.search__suggest { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }

/* --------------------------------------------------- 14. The box */
/*
   A product is a boxed good: front panel art, a flash carrying a TRUE
   scarcity fact, and a SHELF TALKER underneath — the strip clipped to a
   supermarket shelf edge with the name on the left and the price set big
   on the right. No border soup: the image sits on its mat and the talker
   does the framing.
*/
.shelf {
  display: grid;
  gap: var(--s6) var(--s4);
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
@media (min-width: 48rem) { .shelf { --cols: 3; } }
@media (min-width: 72rem) { .shelf { --cols: 4; } }
.shelf[data-density='1'] { --cols: 1; }
@media (min-width: 48rem) {
  .shelf[data-density='2'] { --cols: 2; }
  .shelf[data-density='3'] { --cols: 3; }
  .shelf[data-density='4'] { --cols: 4; }
  .shelf[data-density='6'] { --cols: 6; gap: var(--s4) var(--s3); }
}
.shelf--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* The rail scrolls sideways with snap on every width — a row of stock on a
   shelf. Real markup, so a blocked script still shows all ten. */
.shelf--rail {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: clamp(14.5rem, 70vw, 19rem);
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  padding: var(--s2) var(--gut) var(--s5);
  margin-inline: calc(var(--gut) * -1);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.shelf--rail::-webkit-scrollbar { display: none; }
.shelf--rail > * { scroll-snap-align: start; }
@media (min-width: 64rem) { .shelf--rail { grid-auto-columns: clamp(16rem, 22vw, 21rem); } }
.shelf--rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.shelf--rail.is-dragging a { pointer-events: none; }

.rail-ctl { display: flex; align-items: center; gap: var(--s3); }
.rail-ctl__btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.rail-ctl__btn:hover:not([disabled]) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.rail-ctl__btn[disabled] { opacity: .35; cursor: default; }
.rail-ctl__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-progress { position: relative; height: 2px; background: var(--line); margin-top: var(--s2); overflow: hidden; }
.rail-progress i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, .1)); transition: transform var(--dur-1) linear; }

.box { position: relative; display: flex; flex-direction: column; height: 100%; container-type: inline-size; }
.box__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }

.box__panel {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--box-mat);
  overflow: hidden;
  isolation: isolate;
}
.box__panel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-scene) var(--ease); }
.box__link:hover .box__panel > img { transform: scale(1.045); }

/* A drop's banner is shown whole at its own proportions: no crop, no bars. */
.box__panel--banner { aspect-ratio: auto; background: none; }
.box__panel--banner img { height: auto; object-fit: initial; }

/* The second shot (usually the back print) wipes in from the bottom like a
   box being turned, rather than cross-fading. */
.box__flip { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); transition: clip-path var(--dur-3) var(--ease); }
.box__flip img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
  .box__link:hover .box__flip, .box__link:focus-visible .box__flip { clip-path: inset(0 0 0 0); }
}

/* The flash. A tag, or — for a real edition number or a 1 of 1 — a
   starburst sticker slapped on the corner of the box. */
.flash {
  position: absolute; top: var(--s3); left: var(--s3);
  z-index: 2;
  display: inline-block;
  padding: 6px 10px 6px 12px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-data);
  font-size: var(--t-xxs);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
  padding-right: 16px;
}
.flash--heat {
  top: var(--s2); left: auto; right: var(--s2);
  display: grid; place-items: center;
  width: 78px; height: 78px; padding: 12px;
  background: var(--accent-2);
  color: var(--ground);
  font-size: 10px; line-height: 1.05; text-align: center;
  rotate: 12deg;
  clip-path: polygon(50% 0%, 59% 10%, 71% 4%, 75% 16%, 89% 15%, 87% 28%, 99% 34%, 92% 45%, 100% 55%, 90% 63%, 95% 76%, 82% 79%, 80% 92%, 67% 89%, 59% 100%, 50% 92%, 41% 100%, 33% 89%, 20% 92%, 18% 79%, 5% 76%, 10% 63%, 0% 55%, 8% 45%, 1% 34%, 13% 28%, 11% 15%, 25% 16%, 29% 4%, 41% 10%);
  transition: rotate var(--dur-3) var(--ease);
}
.box__link:hover .flash--heat { rotate: -6deg; }
.flash--gone { background: var(--ground); color: var(--muted); border: 1px solid var(--line); clip-path: none; padding-right: 10px; }

/* The shelf talker. */
.box__talker {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--s1) var(--s3);
  padding-top: var(--s3);
  margin-top: 0;
  border-top: 3px solid var(--text);
  flex: 1;
}
.box__title {
  font-family: var(--f-text);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  transition: color var(--dur-1) var(--ease);
}
.box__link:hover .box__title { color: var(--accent); }
.box__tag {
  font-family: var(--f-display);
  font-size: 1.2rem;
  line-height: 1;
  white-space: nowrap;
}
.box__tag small { display: block; margin-top: 4px; font-family: var(--f-data); font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.box__meta { grid-column: 1 / -1; font-family: var(--f-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* A phone's two-up grid leaves a card ~165px wide. Beside the price the
   name got ~85px and wrapped to as many as seven lines, so narrow cards
   stack: the name takes the full width, the price sits under it. */
@container (max-width: 230px) {
  .box__talker { grid-template-columns: 1fr; gap: var(--s2); }
  .box__tag { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s2); }
  .box__tag small { margin-top: 0; text-align: left; }
}

/* Save for later — a real button beside the link, never inside it. */
.save-btn {
  position: absolute; z-index: 3; right: var(--s2);
  /* The panel is square and as wide as the card, so 100cqw is its height:
     this pins the button to the panel's bottom corner, not the card's. */
  top: calc(100cqw - 48px);
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  color: var(--text);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), color var(--dur-1) var(--ease);
}
.save-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.save-btn[aria-pressed='true'] { opacity: 1; transform: none; color: var(--accent); }
.save-btn[aria-pressed='true'] svg { fill: currentColor; }
.box:hover .save-btn, .save-btn:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .save-btn { opacity: 1; transform: none; } }
.save-btn.is-popped svg { animation: bump var(--dur-3) var(--ease); }

/* Sold out is an EMPTY SLOT, not a hidden card. */
.box--gone .box__panel > img { filter: grayscale(1) contrast(.85) brightness(.92); }
.box--gone .box__panel::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 12px, color-mix(in srgb, var(--ground) 50%, transparent) 12px 24px);
}
.box--gone .box__title { color: var(--muted); }
.box--gone .box__tag { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.box--gone .box__talker { border-top-color: var(--line); }

/* -------------------------------------------- 15. Spec panel */
/* Nutrition-facts format carrying REAL facts. */
.spec {
  background: var(--surface);
  border: 2px solid var(--text);
  padding: var(--s4);
  font-family: var(--f-data);
  font-size: var(--t-xs);
  line-height: 1.4;
}
.spec__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  text-transform: uppercase;
  line-height: .9;
  padding-bottom: var(--s2);
  border-bottom: 8px solid var(--text);
}
.spec__row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding-block: var(--s2);
  border-bottom: 1px solid var(--line);
}
.spec__row:last-child { border-bottom: 0; }
.spec dl { margin: 0; }
.spec__row dt { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.spec__row dd { margin: 0; font-weight: 700; text-align: right; }
.spec__rule { height: 5px; background: var(--text); margin-block: var(--s2); }
.spec__foot { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-xxs); }

/* ------------------------------------------- 16. The delivery */
/* A drop. Four states as distinct as slack cord from stressed cord. */
.drop {
  position: relative;
  display: grid;
  gap: var(--s5);
  padding: var(--s6) var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.drop::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0; height: 4px;
  background: var(--drop-hue, var(--muted));
}
.drop[data-state='counting'] { --drop-hue: var(--accent); }
.drop[data-state='live']     { --drop-hue: var(--accent-2); border-color: var(--accent-2); }
.drop[data-state='announced']{ --drop-hue: var(--muted); }
.drop[data-state='gone']     { --drop-hue: var(--line); opacity: .66; }
[data-line='oilspill'] .drop[data-state='live'] { --drop-hue: var(--accent); border-color: var(--accent); }

.drop__state {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--drop-hue);
}
.drop__state::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--drop-hue); }
.drop[data-state='live'] .drop__state::before { animation: pulse 1.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.drop__name { display: block; font-size: var(--t-xxl); margin-block: var(--s2) var(--s3); }
.drop__grid { display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .drop__grid { grid-template-columns: 1.15fr .85fr; align-items: center; } }

.clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); max-width: 30rem; }
.clock__cell { min-width: 0; padding: var(--s3) var(--s2); background: var(--ground); border: 1px solid var(--line); text-align: center; }
.clock__num { display: block; font-family: var(--f-display); font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.clock__unit { display: block; margin-top: var(--s2); font-family: var(--f-data); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.clock[data-done='true'] .clock__num { color: var(--accent-2); }

/* ------------------------------------------------- 17. The end-cap */
/*
   The home page's first viewport, composed like a box front laid flat: the
   slogan at packaging scale and the current drop on the page ground to the
   left, the three boxes as rendered in the studio bleeding off the right
   edge, and a shelf talker for each clipped along the bottom of the shot.
   The image is the brand's own 3D render, not a mood photograph.
*/
.endcap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 60rem) {
  .endcap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); min-height: calc(100svh - var(--hdr-h)); }
}
.endcap__copy {
  display: flex; flex-direction: column; gap: var(--s5);
  padding: var(--s5) var(--gut) var(--s7);
  container-type: inline-size;
}
@media (min-width: 60rem) {
  .endcap__copy {
    justify-content: space-between;
    padding-block: clamp(var(--s5), 3vw, var(--s7)) clamp(var(--s5), 3vw, var(--s7));
    padding-left: max(var(--gut), (100vw - var(--shell)) / 2);
  }
}
/* Sized from the copy column (cqi), not the window: the column stops
   growing at the shell width while the window keeps going, and a vw size
   clipped "BREAKFAST." on wide screens. That line is 6.76em in Archivo
   Black at this tracking, so 14cqi fits it with ~5% to spare. */
.endcap__slogan {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 14cqi, 7.4rem);
  line-height: .84;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.endcap__slogan .ln { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.endcap__slogan .ln > span { display: inline-block; }
/* The second phrase is solid display type in the accent: ink then
   colour, the same rhythm the old keylined lockup had, without the
   hollow letters. */
.endcap__slogan .lockup { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .endcap__slogan .ln > span { animation: line-up 1s var(--ease) backwards; }
  .endcap__slogan .ln:nth-child(2) > span { animation-delay: 70ms; }
  .endcap__slogan .ln:nth-child(3) > span { animation-delay: 140ms; }
  .endcap__slogan .ln:nth-child(4) > span { animation-delay: 210ms; }
}
@keyframes line-up { from { transform: translateY(105%); } }

/* The drop card on the end-cap is the delivery, ruled rather than boxed. */
.endcap .drop {
  background: none; border: 0; padding: var(--s4) 0 0;
  border-top: 1px solid var(--line);
  overflow: visible;
}
.endcap .drop::before { height: 3px; top: -2px; right: auto; width: 4.5rem; }
.endcap .drop__name { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-block: var(--s2); }
.endcap .lede { font-size: var(--t-md); max-width: 50ch; color: var(--muted); }

.endcap__media {
  position: relative;
  overflow: hidden;
  background: #2b2b2b;
  aspect-ratio: 1 / 1.02;
  order: -1;
}
@media (min-width: 60rem) { .endcap__media { aspect-ratio: auto; order: 0; } }
.endcap__media > img, .endcap__media > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
/* Top right, clear of the talkers along the bottom edge. */
.endcap__toggle { top: var(--s4); bottom: auto; right: var(--s4); }
@media (prefers-reduced-motion: no-preference) {
  .endcap__media > img { animation: endcap-in 2.4s var(--ease) both; transform-origin: 50% 60%; }
}
@keyframes endcap-in { from { transform: scale(1.12); } }

.endcap__talkers {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: var(--s3) clamp(var(--s2), 2vw, var(--s5));
  gap: clamp(var(--s2), 1.6vw, var(--s5));
  background: linear-gradient(#3a3a3a, #1d1d1d);
  border-top: 4px solid #4a4a4a;
  box-shadow: 0 -18px 40px rgb(0 0 0 / .45);
}
.talker {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px var(--s2);
  padding: var(--s2) var(--s3);
  background: #F4F2EE; color: #141414;
  border-left: 6px solid var(--t-accent, #B6FF00);
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.talker:hover, .talker:focus-visible { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 10px 20px -8px rgb(0 0 0 / .7); }
.talker b { grid-column: 1 / -1; font-family: var(--f-text); font-weight: 700; letter-spacing: .02em; font-size: clamp(.7rem, 1.1vw, 1rem); line-height: 1; text-transform: uppercase; }
.talker span { font-family: var(--f-data); font-size: clamp(8px, .8vw, 10px); letter-spacing: .04em; color: #4a4a4a; text-transform: uppercase; }
.talker i { font-style: normal; font-family: var(--f-display); font-size: clamp(.95rem, 1.8vw, 1.6rem); line-height: .9; }
@media (max-width: 30rem) { .talker span { display: none; } .talker { grid-template-columns: 1fr; } }

/* --------------------------------------------- 18. Ticker */
.marquee {
  overflow: hidden;
  background: var(--accent);
  color: var(--on-accent);
  padding-block: var(--s2);
}
.marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee__list {
  display: flex; align-items: center; gap: var(--s4);
  padding-inline: var(--s3);
  font-family: var(--f-display); font-size: var(--t-sm);
  text-transform: uppercase; white-space: nowrap;
}
.marquee__list li { display: flex; align-items: center; gap: var(--s4); }
.marquee__star { opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--tilt { rotate: -1.4deg; margin-inline: -2vw; margin-block: var(--s4); box-shadow: var(--lift-2); }

/* ------------------------------------------ 19. The aisles index */
/*
   Collections as an index of aisle signs: one oversized line each, a count,
   and the collection's own artwork following the cursor on desktop. On a
   phone (no hover) every row carries its thumbnail instead.
*/
.aisles { counter-reset: aisle; border-top: 1px solid var(--line); }
.aisle {
  counter-increment: aisle;
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding-block: clamp(var(--s3), 1.6vw, var(--s5));
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease), padding var(--dur-3) var(--ease);
}
.aisle::before { content: counter(aisle, decimal-leading-zero); font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); }
.aisle__name { font-family: var(--f-display); font-size: clamp(1.6rem, 4.4vw, 3.75rem); line-height: .95; text-transform: uppercase; letter-spacing: var(--track-display); }
.aisle__meta { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); text-align: right; white-space: nowrap; }
.aisle__thumb { display: none; }
@media (hover: hover) and (min-width: 48rem) {
  .aisle:hover { color: var(--accent); padding-left: var(--s4); }
}
@media (hover: none), (max-width: 47.99rem) {
  .aisle { grid-template-columns: 2.4rem 1fr 64px; }
  .aisle__meta { grid-column: 2; text-align: left; }
  .aisle__thumb { display: block; grid-row: 1 / span 2; grid-column: 3; width: 64px; height: 64px; object-fit: cover; background: var(--box-mat); }
}
.aisle-peek {
  position: fixed; z-index: 40; left: 0; top: 0;
  width: clamp(14rem, 22vw, 22rem); aspect-ratio: 1;
  pointer-events: none;
  overflow: hidden;
  background: var(--box-mat);
  box-shadow: var(--lift-3);
  opacity: 0; scale: .8; rotate: -4deg;
  transition: opacity var(--dur-2) var(--ease), scale var(--dur-3) var(--ease), rotate var(--dur-3) var(--ease);
}
.aisle-peek.is-on { opacity: 1; scale: 1; rotate: 3deg; }
.aisle-peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------- 20. Feature splits */
.split { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s8); } .split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } .split--rev > :first-child { order: 2; } }
.split .big-h { font-size: clamp(2.4rem, 5vw, 5.2rem); }
.split__media { position: relative; display: block; overflow: hidden; background: var(--box-mat); }
.split__media img { width: 100%; height: auto; transition: transform var(--dur-scene) var(--ease); }
a.split__media:hover img { transform: scale(1.03); }
.split__media .flash { top: auto; bottom: var(--s3); }
.big-h { font-size: var(--t-mega); line-height: .86; letter-spacing: -.03em; }

/* ----------------------------------- 21. The line switcher (home) */
.lines { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.line-pick {
  --pg: #04070B; --pa: #B6FF00; --pt: #E4F5DA; --pm: #9DB78C;
  position: relative;
  display: grid; gap: var(--s3); align-content: start;
  min-height: 15rem;
  padding: var(--s5);
  background: var(--pg); color: var(--pt);
  text-align: left;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.line-pick:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--lift-3); }
.line-pick[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--ground), 0 0 0 6px var(--pa); }
.line-pick__swatch { display: flex; gap: 6px; }
.line-pick__swatch i { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .4); }
.line-pick__name { font-family: var(--f-display); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: .9; text-transform: uppercase; color: var(--pa); margin-top: auto; }
.line-pick__kin { font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .1em; text-transform: uppercase; color: var(--pm); }
.line-pick__desc { font-size: var(--t-sm); color: var(--pt); opacity: .85; }
.line-pick__on {
  position: absolute; top: var(--s4); right: var(--s4);
  font-family: var(--f-data); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--pa); color: var(--pg);
  opacity: 0; transition: opacity var(--dur-1) var(--ease);
}
.line-pick[aria-pressed='true'] .line-pick__on { opacity: 1; }
.line-pick::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46px;
  background: var(--pa);
  -webkit-mask: url('/assets/img/brand/drip.png') top left / auto 100% repeat-x; mask: url('/assets/img/brand/drip.png') top left / auto 100% repeat-x;
  transform: scaleY(-1); opacity: .9;
  transition: height var(--dur-3) var(--ease);
}
.line-pick:hover::after { height: 64px; }
.line-pick[data-line-pick='oilspill'] { --pg: #F4F2EE; --pa: #C8102E; --pt: #141414; --pm: #55524D; }
.line-pick[data-line-pick='hazmat'] { --pg: #0B0A05; --pa: #EBFF00; --pt: #F2EFDC; --pm: #B2AC86; }

/* ----------------------------------------- 22. Reviews strip */
.quotes { display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s4); border-top: 3px solid var(--text); }
.quote__stars { display: flex; gap: 2px; color: var(--accent); }
.quote__stars svg { width: 15px; height: 15px; fill: currentColor; }
.quote__title { font-family: var(--f-text); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.quote p { font-size: var(--t-md); line-height: 1.5; }
.quote cite { font-style: normal; font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------- 23. The mail-in offer */
/* Email capture as the coupon on the back of the box: die-cut edge,
   scissors on the cut line, a big mail-in headline. */
.coupon {
  position: relative;
  padding: clamp(var(--s5), 5vw, var(--s8)) clamp(var(--s4), 5vw, var(--s8));
  background: var(--surface);
  border: 2px dashed var(--accent);
}
.coupon::before {
  content: '\2702  cut along the line';
  position: absolute; top: -.8em; left: var(--s5);
  padding-inline: var(--s2);
  background: var(--ground);
  font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.coupon__grid { display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .coupon__grid { grid-template-columns: 1.1fr 1fr; align-items: end; } }
.coupon__form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; }
.coupon__form .field { flex: 1 1 15rem; }
.coupon__form .form-note { flex-basis: 100%; }
.coupon h2 { font-size: var(--t-xxl); }

.form-note { display: none; margin-top: var(--s3); font-family: var(--f-data); font-size: var(--t-xs); padding: var(--s3); border: 1px solid; }
.form-note.is-on { display: block; }
.form-note--ok { color: var(--text); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.form-note--bad { color: var(--text); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
/* Scripts that set data-state (review form, account page) instead of
   the is-on classes: shown whenever there is something to say. */
.form-note[data-state]:not(:empty) { display: block; border-color: var(--line); }
.form-note[data-state="ok"]:not(:empty) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.form-note[data-state="bad"]:not(:empty) { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.btn--danger { --btn-bg: var(--warn); --btn-fg: var(--ground); }

/* ------------------------------------------ 24. Listing pages */
.listing-hero { position: relative; padding-block: clamp(var(--s6), 6vw, var(--s8)) var(--s5); }
.listing-hero__title { font-size: var(--t-mega); line-height: .85; letter-spacing: -.03em; }
.listing-hero__count { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); letter-spacing: .08em; margin-top: var(--s3); }
.listing-hero__blurb { margin-top: var(--s4); }
.listing-banner { position: relative; overflow: hidden; background: var(--box-mat); margin-bottom: var(--s5); }
.listing-banner img { width: 100%; max-height: 62vh; object-fit: cover; }

/* ul.filters, not .filters: the reset's ul[class] { padding: 0 } outranks a
   bare class and would pin the first chip to the screen edge. */
ul.filters {
  display: flex; gap: var(--s2);
  overflow-x: auto; scrollbar-width: none;
  padding-block: var(--s2);
  margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
}
.filters::-webkit-scrollbar { display: none; }

.toolbar {
  position: sticky; top: var(--hdr-h); z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-block: var(--s3);
  margin-bottom: var(--s5);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-block: 1px solid var(--line);
  transition: top var(--dur-3) var(--ease);
}
.hdr[data-tucked='true'] ~ .main .toolbar { top: 0; }
.toolbar[data-pending] { visibility: hidden; }
.toolbar__group { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.toolbar select.input { min-height: 40px; width: auto; padding-block: 6px; font-family: var(--f-data); font-size: var(--t-xs); }
.toolbar__count { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); }
.toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; font-family: var(--f-data); font-size: var(--t-xs); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
.density { display: none; gap: 2px; }
@media (min-width: 48rem) { .density { display: flex; } }
.density button {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700;
}
.density button[aria-pressed='true'] { background: var(--text); color: var(--ground); border-color: var(--text); }
.empty { border: 1px dashed var(--line); padding: var(--s8) var(--s5); text-align: center; color: var(--muted); }
.empty a { color: var(--accent); }

/* -------------------------------------------- 25. Product page */
.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.pdp { display: grid; gap: var(--s6); padding-top: var(--s4); }
@media (min-width: 60rem) {
  .pdp { grid-template-columns: minmax(0, 1.3fr) minmax(22rem, .8fr); gap: clamp(var(--s6), 4vw, var(--s9)); align-items: start; }
  .pdp__info { position: sticky; top: calc(var(--hdr-h) + var(--s4)); }
}

/* The gallery is a scroll-snap track on every width — swipe on a phone,
   arrows and thumbnails on desktop, and the native scroll keeps working
   with a keyboard, a trackpad, or no script at all. */
.pdp__gallery { position: relative; }
.pdp__stage {
  position: relative;
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--box-mat);
  overscroll-behavior-x: contain;
}
.pdp__stage::-webkit-scrollbar { display: none; }
@media (max-width: 59.99rem) { .pdp__gallery { margin-inline: calc(var(--gut) * -1); } }
.pdp__slide { position: relative; scroll-snap-align: start; aspect-ratio: 1; overflow: hidden; }
.pdp__slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp__zoom { position: absolute; inset: 0; cursor: zoom-in; }
.pdp__flash { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pdp__arrows { position: absolute; inset-inline: var(--s3); top: 50%; display: none; justify-content: space-between; pointer-events: none; transform: translateY(-50%); z-index: 3; }
@media (min-width: 60rem) and (hover: hover) { .pdp__arrows { display: flex; } }
.pdp__arrows button {
  pointer-events: auto;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--ground) 80%, transparent); color: var(--text);
  opacity: 0; transition: opacity var(--dur-2) var(--ease), background var(--dur-1) var(--ease);
}
.pdp__gallery:hover .pdp__arrows button:not([disabled]) { opacity: 1; }
.pdp__arrows button:hover { background: var(--accent); color: var(--on-accent); }
.pdp__arrows svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pdp__dots { display: flex; justify-content: center; gap: 6px; padding-block: var(--s3); }
.pdp__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background var(--dur-1) var(--ease), width var(--dur-2) var(--ease); }
.pdp__dots span.is-active { background: var(--text); width: 18px; border-radius: 3px; }
@media (min-width: 60rem) { .pdp__dots { display: none; } }

.pdp__thumbs { display: none; gap: var(--s2); margin-top: var(--s3); overflow-x: auto; padding-bottom: var(--s2); }
@media (min-width: 60rem) { .pdp__thumbs { display: flex; } }
.pdp__thumb {
  flex: 0 0 auto; width: 76px; height: 76px;
  background: var(--box-mat);
  opacity: .55;
  outline-offset: -2px;
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb:hover { opacity: .9; }
.pdp__thumb.is-active { opacity: 1; box-shadow: inset 0 -3px 0 var(--accent); }

.pdp__title { font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: .95; margin-top: var(--s3); }
.pdp__priceline { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.pdp__price { font-family: var(--f-display); font-size: var(--t-xl); color: var(--text); }
.pdp__run { font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
[data-line='oilspill'] .pdp__run { color: var(--accent); }
.pdp__stock { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pdp__stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
.pdp__stock[data-gone]::before { background: var(--muted); }
.pdp__buy { display: grid; gap: var(--s3); margin-block: var(--s5); }
.pdp__buyrow { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.pdp__save { width: 56px; min-height: 56px; display: grid; place-items: center; border: 2px solid var(--text); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.pdp__save svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pdp__save[aria-pressed='true'] { color: var(--accent); }
.pdp__save[aria-pressed='true'] svg { fill: currentColor; }
.pdp__save:hover { background: var(--surface-hi); }
.pdp__desc { margin-top: var(--s5); font-size: var(--t-md); }
.pdp__desc p + p { margin-top: var(--s3); }

.sizes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.size {
  min-width: 56px; min-height: 48px; padding-inline: var(--s3);
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  font-family: var(--f-data); font-size: var(--t-sm); font-weight: 600;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.size:hover:not([disabled]) { border-color: var(--text); }
.size:active:not([disabled]) { transform: scale(.96); }
.size[aria-pressed='true'] { background: var(--text); color: var(--ground); border-color: var(--text); }
.size[disabled] {
  color: var(--muted); cursor: not-allowed; opacity: .55;
  background: linear-gradient(to top right, transparent calc(50% - .5px), var(--muted) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.sizes-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s2); }
.sizes.is-nudged { animation: nudge .4s var(--ease); }
@keyframes nudge { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Accordions: native <details>, so they work with no script. */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 56px;
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font-family: var(--f-text); font-weight: 500; font-size: 1.4rem; transition: transform var(--dur-2) var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc__body { padding-bottom: var(--s5); font-size: var(--t-sm); }
.acc__body p + p, .acc__body ul + p { margin-top: var(--s3); }
.acc__body ul { padding-left: 1.1em; display: grid; gap: 4px; }
.acc__body a { color: var(--accent); }

.pdp__chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }

/* The sticky buy bar on a phone, shown only once the real button has
   scrolled out of view. */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -10px rgb(0 0 0 / .5);
  transform: translateY(110%);
  transition: transform var(--dur-3) var(--ease);
}
.buybar.is-on { transform: none; }
.buybar b { display: block; font-size: var(--t-sm); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar span { font-family: var(--f-display); font-size: var(--t-md); }
.buybar .btn { white-space: nowrap; }
@media (min-width: 60rem) { .buybar { display: none; } }

/* The lightbox: the shot at full size, pan by moving the pointer. */
.zoom { position: fixed; inset: 0; z-index: 80; background: var(--box-mat); display: none; overflow: hidden; cursor: zoom-out; }
.zoom[open] { display: block; animation: fade-in var(--dur-2) var(--ease); }
.zoom img { position: absolute; left: 50%; top: 50%; width: min(200vmin, 2400px); max-width: none; height: auto; translate: -50% -50%; will-change: translate; }
.zoom__close { position: absolute; top: var(--s4); right: var(--s4); z-index: 2; background: var(--ground); }
.zoom__hint { position: absolute; bottom: var(--s4); left: 50%; translate: -50% 0; z-index: 2; padding: 6px 12px; background: var(--ground); font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .1em; text-transform: uppercase; }

/* Fly-to-bag: a clone of the product shot thrown at the bag icon. */
.flyer { position: fixed; z-index: 95; pointer-events: none; object-fit: cover; box-shadow: var(--lift-3); }

/* ------------------------------------------------- 26. Bag */
.cart__line {
  display: grid; grid-template-columns: 76px 1fr auto; gap: var(--s3); align-items: start;
  padding-block: var(--s4); border-bottom: 1px solid var(--line);
}
.cart__line img { width: 76px; height: 76px; object-fit: cover; background: var(--box-mat); }
.cart__name { font-size: var(--t-sm); font-weight: 700; line-height: 1.25; text-decoration: none; }
.cart__name:hover { color: var(--accent); }
.cart__sub { font-family: var(--f-data); font-size: var(--t-xxs); color: var(--muted); margin-top: 4px; letter-spacing: .04em; }
.cart__price { font-family: var(--f-text); font-weight: 700; font-size: var(--t-sm); white-space: nowrap; }
.cart__qty { display: inline-flex; align-items: center; margin-top: var(--s2); border: 1px solid var(--line); font-family: var(--f-data); font-size: var(--t-sm); }
.cart__qty button { width: 36px; height: 36px; display: grid; place-items: center; }
.cart__qty button:hover { color: var(--accent); background: var(--surface-hi); }
.cart__qty span { min-width: 28px; text-align: center; }
.cart__remove { margin-left: var(--s3); font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-decoration: underline; }
.cart__remove:hover { color: var(--warn); }
.cart__total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-data); font-weight: 700; font-size: var(--t-sm); margin-bottom: var(--s3); text-transform: uppercase; letter-spacing: .06em; }
.cart__total [data-cart-total] { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: 0; }
.cart__empty { display: grid; justify-items: center; gap: var(--s3); text-align: center; padding-block: var(--s8); }
.cart__empty b { font-family: var(--f-display); font-size: var(--t-xl); text-transform: uppercase; line-height: .95; }
.cart__empty p { color: var(--muted); max-width: 26ch; }
.cart__panel { display: grid; gap: var(--s3); }
.cart__panel .field { margin: 0; }

/* -------------------------------------------- 27. Footer */
.ftr {
  /* The footer is printed in the line's accent — the loudest panel on the
     box — with the page ground dripping down over its top edge. */
  --ftr-ink: var(--on-accent);
  position: relative; margin-top: var(--s9);
  background: var(--accent); color: var(--ftr-ink);
}
.ftr ::selection { background: var(--ftr-ink); color: var(--accent); }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr__drip { position: absolute; left: 0; right: 0; top: -1px; height: clamp(30px, 5vw, 70px); background: var(--ground); -webkit-mask: url('/assets/img/brand/drip.png') top left / auto 100% repeat-x; mask: url('/assets/img/brand/drip.png') top left / auto 100% repeat-x; }
.ftr__grid { display: grid; gap: var(--s6); padding-block: clamp(var(--s8), 8vw, var(--s10)) var(--s7); }
@media (min-width: 52rem) { .ftr__grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.ftr h3 { font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ftr-ink); margin-bottom: var(--s3); }
/* Full-strength ink only: white at 75% over the Bleach red measured 3.75:1. */
.ftr .muted { color: var(--ftr-ink); }
.ftr :focus-visible { outline-color: var(--ftr-ink); }
.ftr ul { display: grid; gap: var(--s2); }
.ftr a { font-size: var(--t-sm); text-decoration: none; color: var(--ftr-ink); }
.ftr a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.ftr__tag { font-family: var(--f-display); font-size: var(--t-xl); line-height: .95; text-transform: uppercase; max-width: 14ch; }
.ftr__tag .outline { display: block; color: var(--ftr-ink); }
.ftr__word {
  display: block;
  font-family: var(--f-display);
  /* Sized so the whole name fits the viewport: Archivo Black runs about
     8.4em for these twelve characters at this tracking (measured from the
     woff2), so 11vw leaves room for a scrollbar. */
  font-size: 11vw;
  line-height: .8;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--ftr-ink);
  white-space: nowrap;
  text-align: center;
  user-select: none;
  padding-bottom: .06em;
  overflow: hidden;
}
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; padding-block: var(--s4); border-top: 1px solid color-mix(in srgb, var(--ftr-ink) 30%, transparent); font-family: var(--f-data); font-size: var(--t-xxs); }
.ftr .socials a { border-color: color-mix(in srgb, var(--ftr-ink) 40%, transparent); }
.ftr .socials a:hover { background: var(--ftr-ink); color: var(--accent); border-color: var(--ftr-ink); }
.socials { display: flex; gap: var(--s2); }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.socials a:hover { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* -------------------------------------------- 28. The cereal shelf */
/*
   The flagship experience on /cereal-box-tees: the three boxes as rendered
   in the studio, standing on a shelf with a price talker clipped under each.
   Pick one and it is pulled off the shelf into an examine panel — four
   studio shots, the mascot, the edition facts, the order button — and,
   on request only, the real-time 3D viewer.
*/
.shelfx { position: relative; background: #121212; color: #F4F2EE; overflow: hidden; isolation: isolate; }
.shelfx__head { padding-block: clamp(var(--s7), 7vw, var(--s9)) var(--s5); }
.shelfx__head h2 { font-size: var(--t-mega); line-height: .85; }
.shelfx__head p { color: rgb(244 242 238 / .78); max-width: 52ch; margin-top: var(--s4); }
.shelfx__stage { position: relative; }
.shelfx__stage > img { width: 100%; height: auto; }
.shelfx__hot {
  position: absolute; top: 14%; height: 70%;
  width: var(--w, 20%); left: var(--x, 0%);
  border: 0; background: none;
  cursor: pointer;
}
.shelfx__hot::after {
  content: attr(data-label);
  position: absolute; left: 50%; bottom: -2px; translate: -50% 0;
  padding: 6px 12px; white-space: nowrap;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; translate: -50% 8px;
  transition: opacity var(--dur-2) var(--ease), translate var(--dur-2) var(--ease);
}
.shelfx__hot:hover::after, .shelfx__hot:focus-visible::after { opacity: 1; translate: -50% 0; }
.shelfx__hot:focus-visible { outline-offset: -3px; }
/* The live 3D stage (site.js). The viewer loads under the render and only
   takes over once it reports the boxes have drawn; the render stays as the
   poster, the no-script fallback and the save-data view. */
.stage3d { position: relative; }
.stage3d__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-scene) var(--ease);
}
.stage3d[data-live="on"] .stage3d__frame { opacity: 1; pointer-events: auto; }
.stage3d[data-live="on"] .shelfx__hot { display: none; }
.stage3d__load { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; }
/* At phone width a 16:9 stage is ~215px tall and the viewer's own controls
   bury the boxes, so the stage goes portrait from the start (no jump when
   the viewer takes over) and the render letterboxes inside it. */
@media (max-width: 47.99rem) {
  .stage3d { aspect-ratio: 4 / 5; background: #121212; }
  .stage3d > img, .stage3d > picture img { width: 100%; height: 100%; object-fit: contain; }
  /* The letterboxed render still spans the full width, so each box keeps
     its column; only the vertical band moves. */
  .stage3d .shelfx__hot { top: 0; height: 100%; }
}
@media (prefers-reduced-motion: reduce) { .stage3d__frame { transition: none; } }
/* The shelf edge with its three talkers. */
.shelfx__edge {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: linear-gradient(#2a2a2a, #1a1a1a);
  border-top: 3px solid #3a3a3a;
  box-shadow: 0 -12px 30px rgb(0 0 0 / .6);
}
.shelfx__talker {
  display: grid; gap: 2px;
  margin: var(--s3) clamp(4px, 2vw, var(--s5));
  padding: var(--s2) var(--s3);
  background: #F4F2EE; color: #141414;
  text-decoration: none; text-align: left;
  border-left: 6px solid var(--t-accent, #B6FF00);
  transition: transform var(--dur-2) var(--ease);
}
.shelfx__talker:hover { transform: translateY(-3px); }
.shelfx__talker b { font-family: var(--f-text); font-weight: 700; letter-spacing: .02em; font-size: clamp(.8rem, 1.6vw, 1.2rem); text-transform: uppercase; line-height: 1; }
.shelfx__talker span { font-family: var(--f-data); font-size: clamp(9px, 1vw, 11px); letter-spacing: .04em; color: #444; }
.shelfx__talker i { font-style: normal; font-family: var(--f-display); font-size: clamp(1rem, 2.4vw, 1.8rem); line-height: 1; }
.shelfx__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); padding-block: var(--s5) var(--s7); align-items: center; }
.shelfx__foot .btn--ghost { --btn-fg: #F4F2EE; border-color: #F4F2EE; }
.shelfx__foot .btn--ghost:not([disabled]):hover { --btn-bg: #F4F2EE; --btn-fg: #121212; }
.shelfx__foot p { font-family: var(--f-data); font-size: var(--t-xxs); color: rgb(244 242 238 / .7); letter-spacing: .06em; max-width: 52ch; }

/* The examine panel. A dialog; the box comes forward. */
.examine .drawer__panel { width: min(64rem, 100vw); border-top: 6px solid var(--box-hue, var(--accent)); }
.examine__grid { display: grid; gap: var(--s5); padding-block: var(--s5); }
@media (min-width: 56rem) { .examine__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }
/* minmax(0, …) throughout: the 1100px shots would otherwise set the grid's
   min-content width and push the panel off screen. */
.examine__shots { display: grid; gap: var(--s2); grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; }
.examine__shots img { width: 100%; }
.examine__main { grid-column: 1 / -1; aspect-ratio: 1; background: #1c1c1c; overflow: hidden; }
.examine__main img { width: 100%; height: 100%; object-fit: cover; animation: shot-in var(--dur-3) var(--ease); }
@keyframes shot-in { from { opacity: 0; transform: scale(1.04); } }
.examine__thumb { aspect-ratio: 1; background: #1c1c1c; opacity: .6; transition: opacity var(--dur-1) var(--ease); }
.examine__thumb img { width: 100%; height: 100%; object-fit: cover; }
.examine__thumb[aria-pressed='true'] { opacity: 1; box-shadow: inset 0 -3px 0 var(--accent); }
.examine__name { font-size: clamp(2rem, 4vw, 3.4rem); line-height: .88; }
.examine__mascot { font-family: var(--f-data); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: var(--s3); }
.examine__copy { margin-top: var(--s4); }
.examine__tees { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s4); }
.examine__tees img { background: var(--box-mat); width: 100%; aspect-ratio: 1; object-fit: contain; }
.examine__3d { position: relative; aspect-ratio: 16 / 10; background: #111; margin-top: var(--s4); display: grid; place-items: center; }
.examine__3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------- 29. The relabel */
/*
   The signature interaction. Switching line restocks the shelf: with View
   Transitions the new livery is wiped across the whole page from the chip
   that was pressed (site.js); without them, boxes re-livery in a staggered
   sweep. Reduced motion gets the swap instantly.
*/
.relabel .box__panel,
.relabel .drop,
.relabel .spec,
.relabel .coupon,
.relabel .line-pick {
  animation: relabel var(--dur-3) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 26ms);
}
@keyframes relabel {
  0%   { opacity: .15; transform: translateY(10px) scaleY(.97); filter: saturate(3) contrast(1.4); }
  55%  { opacity: 1; filter: saturate(1.6); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* During a relabel the new livery is revealed by a circle growing out of
   the chip that was pressed; site.js drives the clip-path. */
html.is-relabelling::view-transition-old(root), html.is-relabelling::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Cross-document transitions between pages, where supported: a short
   cross-fade, and the product shot morphs from its card into the product
   page (view-transition-name is set per slug in the markup). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 220ms var(--ease-in) both; }
  ::view-transition-new(root) { animation: vt-in 420ms var(--ease) both; }
  ::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease); }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
.hdr { view-transition-name: site-header; }

/* Entrances, from an ALREADY-VISIBLE default. The hiding class is added by
   JavaScript, one element at a time, only once it is observed — a blocked
   script or a crawler always gets the whole page. */
.rise { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rise--armed { opacity: 0; transform: translateY(26px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-scene) var(--ease); transition-delay: calc(var(--d, 0) * var(--stagger)); }
  .rise--armed.is-in { opacity: 1; transform: none; }
  /* Product cards in a grid rise without fading: their text is never
     transparent, so contrast holds at every frame (and audits agree). */
  .box.rise--armed { opacity: 1; transform: translateY(36px); }
  .box.rise--armed.is-in { transform: none; }
  /* Images unmask upward as they arrive. */
  .reveal--armed { clip-path: inset(18% 0 0 0); transition: clip-path var(--dur-scene) var(--ease); }
  .reveal--armed.is-in { clip-path: inset(0 0 0 0); }
  /* Headline lines rise out of their own baseline. site.js splits words
     into masked lines only for headings carrying data-split. */
  /* clip-path, not overflow:hidden — an inline-block with overflow other
     than visible takes its baseline from its bottom edge, which changed the
     heading's line height the moment site.js split it (0.16 CLS on /shop). */
  .split-ln { clip-path: inset(-20% -10% 0 -10%); }
  .split-ln > span { display: block; transform: translateY(105%); transition: transform var(--dur-scene) var(--ease); transition-delay: calc(var(--l, 0) * 90ms); }
  .is-in .split-ln > span, .split-ln.is-in > span { transform: none; }

  /* Scroll-driven parallax for editorial media, CSS only, where supported. */
  @supports (animation-timeline: view()) {
    .parallax img { animation: drift linear both; animation-timeline: view(); animation-range: cover; scale: 1.12; }
    @keyframes drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
  }
}
@media print { .rise, .rise--armed, .reveal--armed { opacity: 1 !important; transform: none !important; clip-path: none !important; } }

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

/* -------------------------------------------- 30. Utilities */
.sr-only, .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack { display: grid; gap: var(--s4); }
.stack--lg { gap: var(--s6); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* =============================================================
   31. THE LANDING PAGES
   =============================================================
   Fly Toons, the Cereal Box Tees, the Lottery: editorial surfaces with
   markup written before the rebuild. Their class names stay as hooks
   (rewriting the templates would risk the owner's copy); the look is
   redesigned here. `.container` and `.button` are the old names for
   `.shell` and `.btn`.
   ============================================================= */
.container { width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; }
.container--narrow { width: min(100% - (var(--gut) * 2), 48rem); margin-inline: auto; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: var(--s3) var(--s6);
  background: var(--accent); color: var(--on-accent);
  font-family: var(--f-data); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--accent);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--text); }
.button--outline, .button--secondary { background: transparent; color: var(--text); border-color: var(--text); }
.button--outline:hover, .button--secondary:hover { background: var(--text); color: var(--ground); }
.button--block { width: 100%; }
.button--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.button--order { background: #F4F2EE; color: #141414; border-color: #F4F2EE; min-width: 12rem; }
.button--order:hover { box-shadow: 4px 4px 0 var(--accent); }

.landing-art { display: grid; gap: var(--s3); width: min(100% - (var(--gut) * 2), var(--shell)); margin: var(--s6) auto; }
.landing-art__item { background: var(--box-mat); overflow: hidden; }
.landing-art__item img { width: 100%; height: 100%; object-fit: cover; }

/* Each cereal scene is a full-bleed painted world. The scene sits at full
   strength now (it was dimmed to 30%) — the art is the point. */
.cereal-scene { position: relative; overflow: hidden; color: #F4F2EE; isolation: isolate; }
.cereal-scene__bg { position: absolute; inset: 0; z-index: -1; }
.cereal-scene__bg img { width: 100%; height: 100%; object-fit: cover; }
.cereal-scene__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .25), rgb(0 0 0 / .55)); }
.cereal-scene__inner {
  position: relative;
  width: min(100% - (var(--gut) * 2), var(--shell));
  margin-inline: auto;
  padding-block: clamp(var(--s7), 9vw, var(--s10));
  display: grid; gap: var(--s5); justify-items: center; text-align: center;
}
.cereal-scene__brand { width: min(100%, 38rem); filter: drop-shadow(0 18px 30px rgb(0 0 0 / .5)); }
.cereal-scene__tees { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; width: min(100%, 60rem); }
.cereal-scene__tee { overflow: hidden; filter: drop-shadow(0 20px 30px rgb(0 0 0 / .45)); transition: transform var(--dur-3) var(--ease); }
.cereal-scene__tee:hover { transform: translateY(-6px) rotate(-1deg); }
.cereal-scene__cta { margin-top: var(--s2); }

.cereal-crew { display: grid; gap: var(--s6); padding-block: var(--s8); }
@media (min-width: 56rem) { .cereal-crew { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.cereal-crew__copy h2 { font-size: var(--t-xl); margin-bottom: var(--s4); }
.cereal-crew__copy ul { padding-left: 1.2em; margin-block: var(--s3); }
.cereal-crew__sticker { rotate: 4deg; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .35)); }
.cereal-crew__copy { max-width: 62ch; }

/* The intro under the film: one centred reading column, the opening
   paragraph set as the lede. */
.toon-intro__copy { max-width: 62ch; margin-inline: auto; display: grid; gap: var(--s4); text-align: center; }
.toon-intro__copy p:first-child { font-size: var(--t-lg); line-height: 1.45; color: var(--text); }
.toon-intro__copy p + p { color: var(--muted); line-height: 1.65; }

.toon-grid { display: grid; gap: var(--s5) var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(46%, 13rem), 1fr)); }
.toon-grid__item { margin: 0; }
.toon-tee { display: grid; gap: var(--s3); text-decoration: none; }
.toon-tee__shot { background: var(--box-mat); overflow: hidden; }
.toon-tee__shot img { transition: transform var(--dur-scene) var(--ease); }
.toon-tee:hover .toon-tee__shot img { transform: scale(1.06) rotate(-1.5deg); }
.toon-tee__label { font-family: var(--f-text); font-weight: 700; letter-spacing: .06em; font-size: var(--t-sm); text-transform: uppercase; border-top: 3px solid var(--text); padding-top: var(--s2); }
.toon-tee:hover .toon-tee__label { color: var(--accent); }

.toon-art { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(min(46%, 15rem), 1fr)); }
.toon-art__item { position: relative; display: block; background: var(--box-mat); overflow: hidden; text-decoration: none; }
.toon-art__item img { transition: transform var(--dur-scene) var(--ease); }
.toon-art__item:hover img { transform: scale(1.06); }
.toon-art__label { position: absolute; left: var(--s2); bottom: var(--s2); padding: 4px 8px; background: var(--accent); color: var(--on-accent); font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.toon-heading { margin-bottom: var(--s5); font-size: var(--t-xxl); }
.toon-circles { display: flex; flex-wrap: wrap; gap: var(--s3); }
.toon-circles a { display: block; width: clamp(72px, 12vw, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; outline-offset: 3px; transition: transform var(--dur-2) var(--ease); }
.toon-circles a:hover { transform: scale(1.08) rotate(-6deg); }
.toon-circles img { width: 100%; height: 100%; object-fit: cover; }

.toon-album { display: grid; gap: var(--s6); }
@media (min-width: 56rem) { .toon-album { grid-template-columns: 1fr 1fr; align-items: center; } }
.toon-album__art { overflow: hidden; box-shadow: var(--lift-3); rotate: -1.5deg; }
.toon-album__copy { max-width: 58ch; }
.toon-album__copy h2 { margin-bottom: var(--s4); }

/* The listening panel: a dark inner sleeve tilted against the album art. */
.toon-player { margin-top: var(--s6); }
.toon-player__label {
  display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.toon-player__eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.toon-player__eq i { width: 3px; height: 100%; background: var(--accent); transform-origin: bottom; }
.toon-player__eq i:nth-child(2) { height: 60%; }
.toon-player__eq i:nth-child(3) { height: 80%; }
@media (prefers-reduced-motion: no-preference) {
  .toon-player__eq i { animation: eq 1s var(--ease-io) infinite alternate; }
  .toon-player__eq i:nth-child(2) { animation-delay: -.4s; }
  .toon-player__eq i:nth-child(3) { animation-delay: -.7s; }
}
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.toon-player__frame {
  padding: 6px; background: #121212; border-radius: 16px;
  box-shadow: var(--lift-3); rotate: .8deg;
  border: 2px solid var(--accent);
}
.toon-player__frame iframe { display: block; border: 0; border-radius: 12px; background: #121212; }
.toon-player__foot { margin-top: var(--s3); font-size: var(--t-xs); color: var(--muted); }
.toon-player__foot a { color: var(--accent); font-weight: 600; }
.toon-cta { padding-block: var(--s9); background: var(--accent); color: var(--on-accent); text-align: center; }
.toon-cta .button--primary { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.toon-cta .button--primary:hover { box-shadow: 4px 4px 0 var(--ground); }
.toon-cta .toon-heading { font-size: var(--t-mega); }

.toon-photos { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(min(46%, 15rem), 1fr)); width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; padding: 0; list-style: none; }
.toon-photos li { margin: 0; }
.toon-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--box-mat); }

/* The film banner. Full 16:9 so the mascot is never cropped, capped at the
   viewport below the header on short, wide screens. */
.lottery-hero { position: relative; background: #000; }
.lottery-hero__video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; max-height: calc(100svh - var(--hdr-h));
  object-fit: cover;
}
/* A listing page's film banner (shop.html): full width above everything,
   16:9 so the title card is never cropped. */
.film-banner { position: relative; background: #000; }
.film-banner__video {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; max-height: calc(100svh - var(--hdr-h));
  object-fit: cover;
}

/* The pause/play control every looping hero film carries (site.js). */
.video-toggle {
  position: absolute; right: var(--gut); bottom: var(--s4); z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid rgb(255 255 255 / .35);
  background: rgb(0 0 0 / .55); color: #fff;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.video-toggle:hover { background: rgb(0 0 0 / .8); }
.video-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.video-toggle__pause, .video-toggle[data-state='playing'] .video-toggle__play { display: none; }
.video-toggle[data-state='playing'] .video-toggle__pause { display: block; }
.lottery-lead { display: grid; gap: var(--s4); text-align: center; }
.lottery-lead__line { font-size: var(--t-lg); line-height: 1.45; }
.lottery-lead__line--call { font-family: var(--f-display); font-size: var(--t-xxl); line-height: .9; text-transform: uppercase; color: var(--accent); }
.gamble { display: grid; gap: var(--s5); }
@media (min-width: 52rem) { .gamble { grid-template-columns: 1fr 1fr; } }
.gamble__card { display: grid; gap: var(--s4); padding: var(--s5); background: var(--surface); text-align: center; border-top: 4px solid var(--accent); transition: transform var(--dur-3) var(--ease), box-shadow var(--dur-2) var(--ease); }
.gamble__card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--lift-3); }
.gamble__card:nth-child(2):hover { transform: translateY(-6px) rotate(.5deg); }
.gamble__title { font-size: var(--t-xl); }
.gamble__title img { max-height: 8rem; width: auto; margin-inline: auto; }
.gamble__photo { background: var(--box-mat); overflow: hidden; }
.gamble__note { margin-top: var(--s4); text-align: center; font-family: var(--f-data); font-size: var(--t-xxs); color: var(--muted); letter-spacing: .04em; }
.gamble__cta { margin: 0; }
.gamble__button { width: 100%; }
.lottery-contents__heading { margin-bottom: var(--s5); font-size: var(--t-lg); line-height: 1.2; }
.lottery-contents { display: grid; gap: 0; counter-reset: prize; border-top: 3px solid var(--text); }
.lottery-contents li { counter-increment: prize; display: flex; gap: var(--s4); align-items: baseline; padding: var(--s3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
.lottery-contents li::before { content: counter(prize, decimal-leading-zero); font-family: var(--f-data); font-size: var(--t-xs); color: var(--accent); }

/* =============================================================
   32. THE READING PAGES, THE 404, AND THE REST
   ============================================================= */
.main { display: block; min-height: 50vh; }

.page-hero { padding-block: clamp(var(--s7), 8vw, var(--s9)) var(--s5); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: var(--t-mega); line-height: .86; letter-spacing: -.03em; max-width: 16ch; }
.page-body { max-width: 68ch; margin-top: var(--s6); font-size: 1.0625rem; line-height: 1.7; }
.page-body h2 { margin-top: var(--s7); margin-bottom: var(--s3); font-size: var(--t-xl); color: var(--accent); }
[data-line='oilspill'] .page-body h2 { color: var(--text); }
.page-body h3 { margin-top: var(--s5); margin-bottom: var(--s2); font-size: var(--t-lg); }
.page-body p + p { margin-top: var(--s4); }
.page-body ul, .page-body ol { margin: var(--s4) 0; padding-left: var(--s5); display: grid; gap: var(--s2); }
.page-body li { padding-left: var(--s1); }
.page-body ul { list-style: square; }
.page-body li::marker { color: var(--accent); }
.page-body a { color: var(--accent); text-decoration: underline; }
.page-body a:hover { background: var(--accent); color: var(--on-accent); text-decoration: none; }
.page-body strong { font-weight: 700; }
.page-body hr { margin-block: var(--s6); border: 0; border-top: 1px solid var(--line); }
.page-body img { margin-block: var(--s5); }

.page-layout { display: grid; gap: var(--s6); }
@media (min-width: 60rem) { .page-layout { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: var(--s8); align-items: start; } }
.page-figs { display: grid; gap: var(--s3); margin-top: var(--s6); }
@media (min-width: 60rem) { .page-figs { grid-template-columns: 1fr 1fr; align-items: start; } .page-fig:nth-child(2) { margin-top: var(--s9); } }
.page-fig { background: var(--box-mat); overflow: hidden; }
.page-fig img { width: 100%; }

.page-eyebrow { margin-bottom: var(--s3); }
.page-eyebrow a {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.page-eyebrow a::before { content: '\2190'; color: var(--accent); }
.page-eyebrow a:hover { color: var(--accent); }

.kicker {
  display: inline-block;
  margin-bottom: var(--s3);
  padding: var(--s1) var(--s3);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
[data-line='oilspill'] .kicker { color: var(--text); }
.lead { font-size: var(--t-lg); line-height: 1.45; color: var(--text); max-width: 56ch; }

.care-index { display: grid; gap: 0; margin-block: var(--s5); padding: 0; list-style: none; border-top: 3px solid var(--text); }
.care-index li { margin: 0; padding: 0; }
.care-index a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-text); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; text-decoration: none;
  transition: color var(--dur-1) var(--ease), padding var(--dur-3) var(--ease);
}
.care-index a::after { content: '\2192'; color: var(--accent); }
.care-index a:hover { color: var(--accent); padding-left: var(--s3); background: none; }

.notfound { display: grid; gap: var(--s5); justify-items: start; max-width: 50rem; padding-block: clamp(var(--s8), 12vw, var(--s10)); }
.notfound__code { font-family: var(--f-outline); font-size: clamp(6rem, 28vw, 20rem); line-height: .8; color: var(--accent); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.footer__heading { font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.footer__list { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; list-style: none; }
.footer__list a { display: inline-flex; align-items: center; min-height: 40px; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--f-data); font-size: var(--t-xs); text-decoration: none; }
.footer__list a:hover { border-color: var(--accent); color: var(--accent); }

/* The fly. One house fly lands somewhere on the page now and then and
   walks about. Click it and it is swatted. Decorative, aria-hidden,
   pointer devices only, never with reduced motion (site.js). */
.housefly {
  position: fixed; z-index: 85; left: 0; top: 0;
  width: 34px; height: 34px;
  cursor: crosshair;
  transition: translate 1.8s var(--ease-io), rotate .5s var(--ease);
  filter: drop-shadow(0 3px 2px rgb(0 0 0 / .35));
}
.housefly svg { width: 100%; height: 100%; }
.housefly .w { transform-origin: 50% 45%; animation: buzz .05s linear infinite alternate; }
.housefly.is-still .w { animation: none; }
@keyframes buzz { to { transform: scaleX(.6); } }
.housefly.is-swatted { transition: none; animation: splat .5s var(--ease) forwards; }
@keyframes splat { 0% { transform: scale(1); } 20% { transform: scale(1.4, .4); } 100% { transform: scale(1.4, .4); opacity: 0; } }

/* Edition-fact rows with longer values wrap under their label neatly; a
   Bonus row (e.g. Luresnap's gold coin) is called out in the accent. */
.pdp .spec__row dd { text-align: right; max-width: 34ch; text-wrap: pretty; }
.spec__row--bonus { margin-inline: calc(var(--s2) * -1); padding-inline: var(--s2); background: color-mix(in srgb, var(--accent) 16%, transparent); border-left: 3px solid var(--accent); }
.spec__row--bonus dt, .spec__row--bonus dd { color: var(--text); font-weight: 700; }

/* Reviews intro with the mail fly (reviews.html). The fly leans out over
   the top edge of the box, like it just flew in with the letter. */
.reviews-intro { display: grid; gap: var(--s4); align-items: center; overflow: visible; }
.reviews-intro__fly { width: min(15rem, 60vw); height: auto; justify-self: center; margin-top: calc(var(--s4) * -1); filter: drop-shadow(0 10px 18px rgb(0 0 0 / .25)); rotate: -3deg; }
@media (min-width: 48rem) {
  .reviews-intro { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); }
  .reviews-intro__fly { width: 17rem; margin-block: calc(var(--s8) * -1) calc(var(--s3) * -1); }
}
@media (prefers-reduced-motion: no-preference) {
  .reviews-intro__fly { animation: fly-bob 3.2s var(--ease-io) infinite alternate; }
}
@keyframes fly-bob { to { translate: 0 -6px; rotate: -1deg; } }

/* The fly is the way in to the form. */
.reviews-intro__fly-link { display: block; justify-self: center; border-radius: 50%; }
.reviews-intro__fly-link:hover .reviews-intro__fly { rotate: 2deg; scale: 1.04; }
.reviews-intro__fly { transition: rotate var(--dur-2) var(--ease), scale var(--dur-2) var(--ease); }

/* Photos on a review card. */
.review-pics { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.review-pics a { display: block; width: 72px; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--text); }
.review-pics img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-2) var(--ease); }
.review-pics a:hover img { scale: 1.08; }

/* /leave-a-review */
.review-form-page__head { display: grid; gap: var(--s5); align-items: center; margin-bottom: var(--s7); }
@media (min-width: 48rem) { .review-form-page__head { grid-template-columns: auto minmax(0, 1fr); gap: var(--s7); } }
.review-form-page__fly { width: min(16rem, 62vw); height: auto; justify-self: center; rotate: -3deg; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .25)); }
.review-form-page__title { font-size: var(--t-mega); margin-block: var(--s3) var(--s4); }
.review-form { display: grid; gap: var(--s5); max-width: 46rem; padding: clamp(var(--s5), 4vw, var(--s7)); border: 2px solid var(--text); background: var(--surface); }
.review-form .editor__pair { display: grid; gap: var(--s5); }
@media (min-width: 40rem) { .review-form .editor__pair { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.review-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.review-form__stars { border: 0; padding: 0; margin: 0; }
.review-form__stars legend { font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
/* Reverse order so CSS can light every star up to the hovered or chosen one. */
.stars-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; width: max-content; justify-self: start; align-self: start; }
.stars-input input { position: absolute; opacity: 0; pointer-events: none; }
.stars-input label {
  width: 40px; height: 40px; cursor: pointer;
  background: var(--line);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.6 6.1 20.7l1.2-6.6L2.5 9.5l6.6-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color var(--dur-1) var(--ease), scale var(--dur-1) var(--ease);
}
.stars-input input:checked ~ label, .stars-input label:hover, .stars-input label:hover ~ label { background: var(--accent); }
.stars-input label:hover { scale: 1.12; }
.stars-input input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.review-photos { display: flex; flex-wrap: wrap; gap: var(--s2); }
.review-photos__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.review-photos__add, .review-photos__item { width: 96px; aspect-ratio: 1; }
.review-photos__add {
  display: grid; place-content: center; justify-items: center; gap: 4px; cursor: pointer;
  border: 2px dashed var(--line); color: var(--muted);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.review-photos__add:hover { border-color: var(--accent); color: var(--accent); }
.review-photos__input:focus-visible ~ .review-photos .review-photos__add, .review-photos__add:focus-within { outline: 2px solid var(--accent); }
.review-photos__add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.review-photos__item { position: relative; border: 2px solid var(--text); overflow: hidden; }
.review-photos__item img { width: 100%; height: 100%; object-fit: cover; }
.review-photos__rm {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
  border: 0; background: rgb(0 0 0 / .7); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.review-sent { max-width: 46rem; padding: clamp(var(--s5), 4vw, var(--s7)); border: 2px solid var(--accent); }
.review-sent h2 { font-size: var(--t-xxl); margin-bottom: var(--s3); }

/* A retired piece: sold out for good (product.html). */
.pdp__retired { display: grid; gap: var(--s2); margin-top: var(--s3); padding: var(--s4); border: 2px solid var(--text); }
.pdp__retired b { font-weight: 700; }

/* -------------------------------------------------- Events */
/*
   /events (templates/events.html, drawn by events-render.mjs). Upcoming
   events are feature cards, image beside the details; the past are a
   tighter archive grid. The full write-up opens in place under Read more.
*/
.events-hero { padding-block: clamp(var(--s7), 8vw, var(--s9)) var(--s5); }
.events-hero__title { font-size: var(--t-mega); margin-top: var(--s4); }
.events-hero__count { margin-top: var(--s3); font-family: var(--f-data); font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.events-block { padding-block: var(--s6) var(--s8); border-top: 1px solid var(--line); }
.events-block__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s5); }
.events-block__head h2 { font-size: var(--t-xl); }

.ev-list { display: grid; gap: var(--s6); }
.ev-list--past { gap: var(--s6) var(--s5); }
@media (min-width: 40rem) { .ev-list--past { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 64rem) { .ev-list--past { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ev { display: grid; gap: var(--s4); align-content: start; scroll-margin-top: calc(var(--hdr-h) + var(--s4)); }
.ev--upcoming { gap: var(--s5); padding-bottom: var(--s6); border-bottom: 1px solid var(--line); }
@media (min-width: 52rem) {
  .ev--upcoming { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s7); align-items: start; }
}

.ev__media { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--box-mat); }
.ev__media img { width: 100%; height: 100%; object-fit: cover; }
.ev__media--none { background: var(--accent) var(--grain); opacity: .85; }

.ev__body { display: grid; gap: var(--s3); align-content: start; }
.ev__date { display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.ev__month, .ev__year { font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ev__day { font-family: var(--f-display); font-size: var(--t-xl); line-height: .9; letter-spacing: var(--track-display); }
.ev--upcoming .ev__day { font-size: var(--t-xxl); }
.ev__title { font-family: var(--f-display); font-weight: 400; font-size: var(--t-lg); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.ev--upcoming .ev__title { font-size: var(--t-xl); }
.ev__when { font-family: var(--f-data); font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em; }
.ev__where { font-size: var(--t-sm); color: var(--muted); }
.ev__where b { color: var(--text); font-weight: 600; }
.ev__where a { color: var(--accent); font-weight: 600; margin-left: var(--s1); }
.ev__summary { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; max-width: 62ch; }
.ev--upcoming .ev__summary { font-size: var(--t-md); color: var(--text); }
.ev__summary p + p { margin-top: var(--s2); }
.ev__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s2); }

.ev__more summary {
  display: inline-flex; align-items: center; gap: var(--s2);
  cursor: pointer; list-style: none;
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding-block: var(--s2);
}
.ev__more summary::-webkit-details-marker { display: none; }
.ev__more summary::after { content: '+'; font-size: 1.1rem; font-weight: 500; transition: transform var(--dur-2) var(--ease); }
.ev__more[open] summary::after { transform: rotate(45deg); }
.ev__more summary:hover { color: var(--accent); }
.ev__full { display: grid; gap: var(--s3); padding-top: var(--s3); font-size: var(--t-sm); line-height: 1.6; max-width: 68ch; }
.ev__full h2, .ev__full h3 { font-family: var(--f-text); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; text-transform: none; line-height: 1.2; margin-top: var(--s2); }
.ev__full h4 { font-family: var(--f-text); font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.ev__full ul, .ev__full ol { padding-left: 1.2em; display: grid; gap: var(--s1); }
.ev__full ul { list-style: disc; }
.ev__full ol { list-style: decimal; }
.ev__full li h4 { font-size: inherit; font-weight: 500; }
.ev__full a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.ev__full figure { margin: 0; }
.ev__full img { width: 100%; height: auto; background: var(--box-mat); }
.ev__full figcaption { margin-top: var(--s2); font-size: var(--t-xs); color: var(--muted); }
.ev-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.ev-gallery img { aspect-ratio: 1; object-fit: cover; }
.ev-button a {
  display: inline-flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s4);
  border: 2px solid currentColor; color: var(--text); text-decoration: none;
  font-family: var(--f-data); font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.ev-button a:hover { background: var(--text); color: var(--ground); }

.ev-empty { margin-top: var(--s2); }
.ev-empty__title { font-family: var(--f-display); font-weight: 400; font-size: var(--t-xl); text-transform: uppercase; line-height: .95; }

/* --------------------------------------------- The showroom */
/*
   The home page's cereal band (home.html, 5). The 3D trio gets a lit stage
   of its own: studio sweep, a spotlight in the line's accent, a floor glow
   and packaging crop marks. The viewer is drawn transparent (bg=transparent)
   over it, so the boxes stand in the stage. Dark on every line, so the band
   carries its own text tokens; the accent still follows the line.
*/
.cereal-show {
  --text: #F4F2EE;
  --muted: rgb(244 242 238 / .68);
  --line: rgb(244 242 238 / .16);
  --surface: #17140f;
  --show-ink: #0a0907;
  position: relative;
  color: var(--text);
  background:
    radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    var(--show-ink);
  padding-block: clamp(var(--s8), 9vw, var(--s10)) clamp(var(--s7), 7vw, var(--s9));
  overflow: hidden;
  isolation: isolate;
}
.cereal-show::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--grain); opacity: .05;
}
/* An accent hairline closes the band, so it ends on purpose against any
   line, light Bleach included. */
.cereal-show { border-bottom: 3px solid var(--accent); }

.cereal-show__head { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 60rem) { .cereal-show__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s8); } }
.cereal-show__head .kicker-row { color: var(--muted); justify-content: flex-start; gap: var(--s2) var(--s6); }
.cereal-show__live { display: inline-flex; align-items: center; gap: var(--s2); color: var(--accent); }
.cereal-show__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .cereal-show__live i { animation: live-ping 2.2s var(--ease) infinite; }
}
@keyframes live-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 10px transparent; } }
.cereal-show__h {
  margin-top: var(--s4);
  font-size: var(--t-mega);
  line-height: var(--lead-display);
}
.cereal-show__accent { color: var(--accent); }
.cereal-show__lede { font-size: var(--t-lg); line-height: 1.45; color: var(--muted); max-width: 44ch; }

/* The stage: wide, tall, lit. */
.cereal-show__stage-wrap { margin-top: clamp(var(--s6), 5vw, var(--s8)); }
.cereal-show__stage {
  width: min(100% - (var(--gut) * 2), 110rem);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  max-height: 82svh;
  background:
    radial-gradient(42% 30% at 50% 80%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(60% 70% at 50% 34%, #2c2822 0%, #16130f 55%, #0b0a08 100%);
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), inset 0 -120px 120px -80px rgb(0 0 0 / .7);
}
/* The still render, until the live trio has drawn over the stage. */
.cereal-show__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transition: opacity var(--dur-3) var(--ease); }
.stage3d--clear[data-live="on"] > img { opacity: 0; }
/* The viewer is dark-schemed; matching it keeps its transparency. */
.stage3d--clear .stage3d__frame { color-scheme: dark; background: transparent; }

.cereal-show__mark { position: absolute; z-index: 3; width: 22px; height: 22px; pointer-events: none; border-color: var(--accent); border-style: solid; border-width: 0; }
.cereal-show__mark--tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.cereal-show__mark--tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.cereal-show__mark--bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.cereal-show__mark--br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

.cereal-show__caption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5);
  margin-top: var(--s3);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

/* Facts, the three tees, the way in. */
.cereal-show__foot { display: grid; gap: var(--s6); margin-top: clamp(var(--s6), 5vw, var(--s8)); align-items: start; }
@media (min-width: 60rem) { .cereal-show__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } }
.cereal-show .spec { background: var(--surface); border-color: var(--text); color: var(--text); }
.cereal-show__side { display: grid; gap: var(--s5); }
.cereal-show__tees { display: grid; gap: var(--s3); }
.cereal-show__tees .talker { padding: var(--s3) var(--s4); }
.cereal-show__tees .talker b { font-size: var(--t-md); }
.cereal-show__tees .talker span { font-size: var(--t-xxs); }
.cereal-show__tees .talker i { font-size: var(--t-lg); }

@media (max-width: 47.99rem) {
  /* Portrait on phones, as every 3D stage is, so the viewer controls clear the boxes. */
  .cereal-show__stage { width: 100%; border-inline: 0; max-height: none; aspect-ratio: 4 / 5; }
  .cereal-show__stage > img { object-fit: contain; }
  .cereal-show__mark--tl, .cereal-show__mark--bl { left: 10px; }
  .cereal-show__mark--tr, .cereal-show__mark--br { right: 10px; }
}

/* ---------------------------------------------------------------
   Customer account (/account) — templates/account.html
   --------------------------------------------------------------- */
.acct__head { margin-bottom: var(--s7); }
.acct__title { font-size: var(--t-mega); margin-block: var(--s3) var(--s4); }
.acct__h2 { font-size: var(--t-lg); margin: 0 0 var(--s3); }
.acct__panel, .acct__form { display: grid; gap: var(--s4); max-width: 34rem; }
.acct__panel, .acct__signin .acct__form { padding: clamp(var(--s5), 4vw, var(--s7)); border: 2px solid var(--text); background: var(--surface); }
.acct__signin { max-width: 34rem; }
.acct__code { font-family: var(--f-data); font-size: var(--t-lg); letter-spacing: .3em; max-width: 12rem; }
.acct__grid { display: grid; gap: var(--s7); }
.acct__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; padding-bottom: var(--s4); border-bottom: 3px solid var(--text); }
.acct__nav a { font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text); text-decoration: none; padding-block: var(--s2); }
.acct__nav a:hover, .acct__nav a:focus-visible { color: var(--accent); }
.acct__nav [data-acct-signout] { margin-left: auto; background: none; border: 0; cursor: pointer; font: inherit; color: var(--muted); padding: var(--s2) 0; }
.acct__sections { display: grid; gap: var(--s8); min-width: 0; }
.acct__section { scroll-margin-top: 6rem; min-width: 0; }
.acct__form--wide { max-width: 44rem; }
.acct__pair { display: grid; gap: var(--s4); }
@media (min-width: 40rem) { .acct__pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .acct__grid { grid-template-columns: 14rem minmax(0, 1fr); align-items: start; }
  .acct__nav { position: sticky; top: 6rem; flex-direction: column; align-items: stretch; border-bottom: 0; border-right: 3px solid var(--text); padding: 0 var(--s4) 0 0; }
  .acct__nav [data-acct-signout] { margin-left: 0; text-align: left; margin-top: var(--s4); }
}
.acct__orders { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.acct__order { padding: var(--s4) var(--s5); border: 1px solid var(--line); background: var(--surface); }
.acct__order-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.acct__total { margin-left: auto; font-family: var(--f-display); font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.acct__pill { font-family: var(--f-data); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); }
.acct__pill[data-status="open"] { border-color: var(--accent); color: var(--accent); }
.acct__items { margin: var(--s3) 0 0; padding-left: var(--s5); display: grid; gap: var(--s1); font-size: var(--t-sm); }
.acct__saved { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.acct__saved li { display: grid; gap: var(--s2); align-content: start; }
.acct__saved a { display: grid; gap: var(--s1); color: inherit; text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.acct__saved img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--box-mat, var(--surface)); }
.acct__saved a:hover span:first-of-type { color: var(--accent); }
.acct__saved .link-arrow { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: var(--t-xs); color: var(--muted); }
.acct__toggle { display: flex; gap: var(--s3); align-items: flex-start; max-width: 40rem; cursor: pointer; }
.acct__toggle input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.acct__danger summary { cursor: pointer; font-weight: 600; color: var(--warn, #c8102e); padding-block: var(--s2); }
.acct__danger form { margin-top: var(--s4); }
.icon-btn.is-signed-in::after { content: ""; position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* =============================================================
   PROMOTIONS (assets/js/promo-live.mjs)
   A sale reads like a price sticker slapped over the shelf tag, not
   a banner ad: the old price struck through in the data face, the
   new one in the display face, and one die-cut flag on the box. The
   flag sits bottom-left so it never fights the scarcity flash.
   ============================================================= */
.was { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; font-family: var(--f-data); font-size: .72em; font-weight: 600; letter-spacing: .02em; }
.now { color: var(--text); }
.box[data-promo] .box__tag .now { color: var(--accent); }
.box__tag .was { margin-right: 4px; }

.promo-flag {
  position: absolute; left: var(--s3); bottom: var(--s3); z-index: 2;
  display: inline-block; padding: 5px 12px 5px 9px;
  background: var(--text); color: var(--ground);
  font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
  rotate: -3deg;
}
.promo-flag--inline { position: static; rotate: 0deg; background: var(--accent); color: var(--on-accent); }

.pdp__promo { display: grid; gap: var(--s2); margin-top: var(--s3); padding: var(--s3) var(--s4); border: 1px dashed var(--accent); }
.pdp__promo-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.pdp__saving { font-family: var(--f-data); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pdp__promo-msg { margin: 0; font-size: var(--t-sm); }
.pdp__promo-end { font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pdp__price .was { font-size: .5em; vertical-align: middle; }

.promo-clock { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .08em; text-transform: uppercase; }
.promo-clock b { font-size: var(--t-xs); letter-spacing: .04em; }

.promo-bar { background: var(--accent); color: var(--on-accent); font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.promo-bar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px var(--s3); min-height: 36px; padding-block: 6px; padding-right: 40px; position: relative; text-align: center; }
.promo-bar__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.promo-bar__x { position: absolute; right: 4px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: inherit; }
.promo-bar__x:focus-visible { outline: 2px solid var(--on-accent); outline-offset: -4px; }

.promo-slot { margin-block: var(--s6); }
.promo-slot[hidden] { display: none; }
.promo-banner { display: grid; overflow: hidden; border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.promo-banner--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.promo-banner--light { background: var(--text); color: var(--ground); border-color: var(--text); }
.promo-banner__img { width: 100%; height: 100%; max-height: 360px; object-fit: cover; display: block; }
.promo-banner__body { display: grid; gap: var(--s2); align-content: center; padding: var(--s5); }
.promo-banner__kicker { margin: 0; font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.promo-banner__title { margin: 0; font-family: var(--f-display); font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: .95; text-transform: uppercase; }
.promo-banner__text { margin: 0; max-width: 52ch; }
.promo-banner__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s2); }
@media (min-width: 48rem) { .promo-banner--img { grid-template-columns: 1.1fr 1fr; } }

/* The bag's money. */
.cart__sum { display: grid; gap: 2px; margin-bottom: var(--s3); }
.cart__sum .cart__total { margin-bottom: var(--s1); }
.cart__row { display: flex; justify-content: space-between; gap: var(--s3); font-family: var(--f-data); font-size: var(--t-xs); letter-spacing: .04em; }
.cart__row--off span:last-child, .cart__row--save span:last-child { color: var(--accent); font-weight: 700; }
.cart__row--save { text-transform: uppercase; font-weight: 700; letter-spacing: .08em; }
.cart__total--grand { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.cart__total--grand [data-cart-grand] { font-family: var(--f-display); font-size: var(--t-lg); letter-spacing: 0; }
.cart__hints { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: 4px; }
.cart__hints li { font-size: var(--t-xs); color: var(--muted); }
.cart__hints:empty { display: none; }
.cart__price .was { display: block; font-size: .8em; }
.cart__code { margin-bottom: var(--s2); }
.cart__code summary { cursor: pointer; font-family: var(--f-data); font-size: var(--t-xxs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-block: 8px; min-height: 36px; }
.cart__code summary:hover { color: var(--accent); }
.cart__code-form { display: flex; gap: var(--s2); margin-top: var(--s2); }
.cart__code-form .input { flex: 1; min-width: 0; text-transform: uppercase; font-size: 16px; }
.cart__chip { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--s2); padding: 2px 2px 2px 10px; border: 1px solid var(--accent); font-family: var(--f-data); font-size: var(--t-xxs); letter-spacing: .08em; text-transform: uppercase; }
.cart__chip[hidden] { display: none; }
.cart__chip-x { width: 32px; height: 32px; display: grid; place-items: center; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .promo-flag { rotate: 0deg; } }
/* With offers, a code and shipping in it, the bag's foot can outgrow a
   phone screen; keep the pieces themselves in view and let the foot scroll. */
.drawer__foot.cart__panel { max-height: 62dvh; overflow-y: auto; overscroll-behavior: contain; }
.cart__chip { border-color: var(--line); }

/* Cloudflare Turnstile bot check (bw-captcha.js). Invisible unless Cloudflare
   wants a click; then it needs room, and must never push the form sideways. */
.captcha:empty { display: none; }
.captcha { margin-block: 12px; max-width: 100%; overflow: hidden; }