/* ==========================================================================
   Moo's Cookies — stylesheet
   Tokens first, then base, then components, then sections.
   Colour decisions are contrast-checked; see docs/AUDIT.md before changing them.
   ========================================================================== */

/* ---------- fonts (self-hosted: no third-party font CDN, no IP leak) ------ */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  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: 'Playfair Display';
  src: url('../fonts/playfair-display-latin-ext-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* ---------- tokens ------------------------------------------------------- */
/* Brand v3 — owner's redesign brief (2026-09-25). Two changes on top of v2.1:
   body type is now #3B1410 (a deeper red-brown, 13.6:1 on cream), and the old
   cacao is gone as a BLOCK colour: every dark panel (footer, dialog head, club
   band) is now the brand red #B62A22 with cream type on it (5.25:1).
   That reverses v2's "never an accent field with cream type" rule — at the
   owner's explicit request. --cacao is kept as a token name so the older
   components pick the change up, but it now resolves to the red.
   The notes below are the v2.1 history. */
/* Brand v2.1 — colour correction (2026-09-16). The owner flagged the coral as
   too light/salmon; the definitive accent is now #B62A22, a deeper red-brown.
   Two colours carry the brand: a cream ground and this accent, with a cacao
   ink for type and line art. The guide's one hard rule still holds: cream is
   always the dominant ground and the accent is always the accent — never an
   accent field with cream type on it. Every value below is contrast-checked;
   see docs/AUDIT.md. */
:root {
  /* brand surfaces */
  --cream:       #f8e8db;   /* brand base — the page ground everywhere */
  --cream-2:     #fdf5ec;   /* lighter cream for alternating blocks */
  --cacao:       #b62a22;   /* v3: the dark-panel colour is the brand red now */
  --cacao-soft:  #9e241d;

  /* One exact accent, per the correction — #B62A22 everywhere it appears as
     a fill or as coral-toned text. It happens to be dark enough that
     --accent-ink and --accent-ink-2 (kept separate for the tinted-ground
     case) collapse to the same value without losing the AA margin either
     existed for. --accent-soft stays a lighter *tint* of the new accent —
     it is not the brand colour itself, it is what makes coral-toned text
     legible on the dark cacao panels, so it cannot be the same flat hex. */
  --accent:       #b62a22;
  --accent-ink:   #b62a22;
  --accent-ink-2: #b62a22;
  --accent-soft:  #fdf5ec;  /* v3: "accent" text on a red panel is cream — 5.82:1 */
  --accent-deep:  #9e241d;  /* hover state of red fills — cream on it 6.45:1 */

  /* Type ON an accent fill. The old bright coral used a dark cacao label
     (4.75:1); the new accent is dark enough itself that cacao-on-accent
     drops to ~2.3:1, so the label has to go light instead — cream reads at
     5.25:1 on the new accent. */
  --on-accent:   #f8e8db;   /* 5.25:1 on --accent */

  /* text */
  --ink:         #3b1410;                     /* 13.6:1 on cream */
  /* v3.1: running text is the ink itself — the owner asked for #3B1410 body
     text, no lighter grey-brown. --ink-muted stays one notch lighter for
     meta lines only (per-cookie price, notes) and is still 9.6:1. */
  --ink-2:       #3b1410;                     /* 13.6:1 on cream */
  --ink-muted:   #5a2c24;                     /*  9.6:1 on cream */
  /* "on-dark" now means on the red panel. No translucent or greyed cream
     here: cream is only 5.25:1 on the red, so any tint of it drops under AA. */
  --on-dark:     #f8e8db;                     /* 5.25:1 on red */
  --on-dark-2:   #fdf5ec;                     /* 5.82:1 on red */
  --on-dark-3:   #fdf5ec;                     /* 5.82:1 on red */

  --line:        rgba(59, 20, 16, .14);
  --line-strong: rgba(59, 20, 16, .30);
  --line-dark:   rgba(248, 232, 219, .35);

  /* type — the wordmark is a serif, so the display face is too. Anton was the
     v1 identity and is gone; a condensed grotesque next to this logo reads as
     two different companies. Playfair is wider than Anton at the same size,
     which is why every display step below is smaller than it was. */
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* v3: display sizes up a full step — the brief asks for the headings to read
     big on desktop. Body is 17px on phones and 18px from desktop up; the
     "small" step used for card and FAQ copy is 17px from 60rem, so no running
     text on a desktop is under 17px. Only notes and meta lines stay smaller. */
  --step-hero: clamp(2.25rem, 7.2vw, 5.5rem);
  --step-xxl:  clamp(2.125rem, 5.6vw, 5rem);
  --step-xl:   clamp(1.75rem, 5.2vw, 4.5rem);  /* 28px floor: "MAATWERKDOZEN" must fit a 320px phone */
  --step-lg:   clamp(1.5rem, 3.2vw, 2.5rem);
  --step-md:   1.25rem;
  --step-body: clamp(1.0625rem, .9rem + .45vw, 1.125rem);
  --step-sm:   0.9375rem;
  --step-xs:   0.8125rem;
  --step-label:0.75rem;

  /* space */
  --gutter:      clamp(1.25rem, 5vw, 3rem);   /* 48px from ~960px up */
  --section-y:   clamp(4.5rem, 10vw, 8.5rem);
  --radius-lg:   28px;
  --radius-md:   20px;
  --radius-sm:   14px;
  --radius-pill: 999px;

  --shadow-lift: 0 30px 60px -24px rgba(59, 20, 16, .40);
  --shadow-card: 0 20px 40px -24px rgba(59, 20, 16, .35);

  --maxw:        1280px;
  --maxw-narrow: 760px;

  --ease: cubic-bezier(.2, .7, .3, 1);
}
/* desktop: nothing that is running text below 18px */
@media (min-width: 60rem) { :root { --step-sm: 1.125rem; --step-body: 1.125rem; } }

/* ---------- reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto is not cosmetic: the width/height attributes on every <img>
   and <video> (there to reserve space and stop layout shift) otherwise act
   as a fixed used height and beat every aspect-ratio rule below. */
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
/* v3.2: a heading NEVER breaks inside a word — no hyphenation, no emergency
   wrapping. Every display size below is a clamp() sized so the longest word
   in its slot fits its column at 320px and at 1920px; npm run verify fails
   on any heading whose text is wider than its box. */
h1, h2, h3, h4, h5, h6, .display { hyphens: none; word-break: normal; overflow-wrap: normal; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--ink); }

/* One visible focus style for the whole site. Never remove it. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--cacao); color: var(--on-dark);
  padding: .875rem 1.25rem; font-weight: 700; font-size: var(--step-sm);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { transform: translateY(0); color: var(--on-dark); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* max-width counts the padding too (border-box), so add it back: the
   content itself gets the full 1280px, plus 48px each side on desktop. */
.shell { max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* v3.2: every page uses the same 1280px container; long-form text keeps a
   readable measure through max-width on the paragraphs themselves. */
.shell--narrow { max-width: calc(var(--maxw) + 2 * var(--gutter)); }

/* ---------- type helpers ------------------------------------------------- */
.display {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .97;
  letter-spacing: .005em;
}
.eyebrow {
  font-size: var(--step-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 .875rem;
}
.eyebrow--on-dark { color: var(--accent-soft); }
.lede { font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.55; }
.note { font-size: var(--step-xs); color: var(--ink-muted); }
.note--on-dark { color: var(--on-dark-3); }

/* ---------- buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 700; font-size: var(--step-sm);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 1rem 2rem;
  min-height: 48px;                 /* touch target */
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* Primary: hot pink fill with chocolate ink — 4.82:1.
   White-on-pink was 3.50:1 and failed AA, which is why this is brown. */
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-deep); color: var(--cream); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }

.btn--ghost-dark { background: transparent; color: var(--on-dark); border-color: rgba(248, 232, 219,.6); }
.btn--ghost-dark:hover { background: var(--cream); color: var(--cacao); border-color: var(--cream); }

.btn--sm { padding: .625rem 1.25rem; font-size: var(--step-xs); min-height: 40px; }
.btn--block { width: 100%; }

/* ---------- nav ---------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  /* equal side columns are what actually centres the mark on the page --
     space-between only centres it when both sides happen to be equal width */
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1rem;
  padding: .75rem var(--gutter);
  background: rgba(248, 232, 219, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__side { display: flex; align-items: center; gap: .25rem; min-width: 0; }
/* Explicit column placement, not source order: when the menu is hidden on
   mobile it releases its grid track, and the mark slides out of centre unless
   it is pinned to column 2. */
.nav__side--start { grid-column: 1; }
.nav__brand { grid-column: 2; justify-self: center; }
.nav__side--end { grid-column: 3; justify-content: flex-end; }
.nav__brand { display: flex; align-items: center; gap: .625rem; color: var(--ink); }
.nav__brand:hover { color: var(--ink); }
/* One image, not a badge plus a text wordmark: the v2 logo is a single lockup
   and the guide only lets the icon stand alone as a favicon or app icon. */
.nav__brand img { width: 190px; height: auto; }
@media (max-width: 30rem) { .nav__brand img { width: 150px; } }

.nav__link {
  color: var(--ink); font-size: var(--step-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .625rem .75rem; border-radius: var(--radius-pill);
}
.nav__link:hover { color: var(--accent-ink); background: rgba(182, 42, 34, .07); }
/* Below 48rem the links cannot share a line with the centred mark without
   squeezing the wordmark onto two lines, so they drop to a second row of the
   same grid instead of disappearing. They used to be `display: none` here,
   which left a phone with no navigation at all above the fold — the footer was
   the only way to reach another page. No disclosure button and no script: a
   menu that needs JS to exist is the same failure in a nicer coat. */
@media (max-width: 48rem) {
  /* The mark stops being centred here. Centring it costs two equal side columns,
     and two columns each as wide as the "Get your box" pill leaves the logo
     about 80px — the pill wrapped onto three lines and the lockup shrank to
     nothing. Logo left, action right, links underneath. */
  .nav { grid-template-columns: auto 1fr; row-gap: .4375rem; padding-bottom: .4375rem; }
  .nav__brand { grid-column: 1; justify-self: start; }
  .nav__side--end { grid-column: 2; }
  .nav__side--end .btn { white-space: nowrap; }
  .nav__side--start {
    grid-column: 1 / -1; grid-row: 2;
    flex-wrap: wrap; justify-content: center; gap: .125rem;
    border-top: 1px solid var(--line); padding-top: .4375rem;
  }
  .nav__link { padding: .5rem .5625rem; font-size: var(--step-label); }
  /* scroll-padding must clear the taller two-row bar, or an in-page anchor
     lands with its heading tucked underneath it */
  html { scroll-padding-top: 7.5rem; }
}

/* ---------- hero --------------------------------------------------------- */
/* The source clips are 720x1280 portrait. Stretching one edge-to-edge on a
   desktop crops it to a narrow strip and upscales it into mush, so on wide
   screens the video sits in its own portrait frame beside the type instead. */
/* Cream, not cacao. The brand guide's one hard rule is that cream is always the
   dominant ground and coral is always the accent — and the hero is the largest
   single surface on the site, so a full-bleed dark one broke that rule on its
   own. The dark treatment is kept for the story band, the statement band and
   the footer, where it stays a punctuation mark instead of the default. */
.hero { background: var(--cream); color: var(--ink); overflow: hidden; }
.hero__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(3.5rem, 8vw, 5.5rem);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; }
}
.hero__badge {
  display: inline-block;
  font-size: var(--step-label); font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid rgba(182, 42, 34, .45);
  border-radius: var(--radius-pill);
  padding: .4375rem 1rem; margin-bottom: 1.25rem;
}
.hero__title { font-size: var(--step-hero); color: var(--ink); margin-bottom: 1.125rem; }
.hero__title em { font-style: normal; color: var(--accent); }
.hero__lede { color: var(--ink-2); max-width: 34ch; margin-bottom: 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- media mats ----------------------------------------------------
   Measured, not guessed: the product photos are shot on a beige ground that is
   almost exactly the brand cream (hero #F8E7D3 vs page #F8E8DB — a delta of 9
   across all three channels). On the old dark hero they popped; on a cream page
   they have no edge at all, and hero + photo + golden cookie collapse into one
   flat beige mass with pink as the only contrast.

   The page ground stays cream, as the brand guide requires. What changes is
   that every photo gets a cacao mat around it, the way a print is matted —
   which is also the thing that gives the gold in the cookies something to be
   gold *against*. Border, not padding: with box-sizing:border-box the frame
   costs no layout maths and the radius still clips the image inside it. */
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 10px solid var(--cacao);
  box-shadow: var(--shadow-lift);
  aspect-ratio: 9 / 16;
  max-height: 78vh;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 60rem) { .hero__media { max-width: 30rem; } }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ---------- marquee ------------------------------------------------------ */
/* The band that used to be coral. Moving it to cacao keeps the hard horizontal
   rule under the hero — the page still needs one — while leaving coral for what
   the guide reserves it for: buttons, links and highlights. */
.marquee {
  background: var(--cacao); color: var(--on-dark);
  overflow: hidden; padding: .875rem 0;
  border-block: 2px solid var(--cacao);
}
.marquee span { color: var(--on-dark); }
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee span {
  font-family: var(--font-display); font-size: 1rem;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- generic section --------------------------------------------- */
.section { padding-block: var(--section-y); }
.section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__head--center { text-align: center; }
.section__title { font-size: var(--step-xl); }

.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 50rem) { .split { grid-template-columns: 1fr 1fr; } }
.split__media {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.split__media--portrait { aspect-ratio: 9/16; max-width: 26rem; margin-inline: auto; }
.split__media--portrait video { width: 100%; height: 100%; object-fit: cover; }
.split__body .body-copy { color: var(--ink-2); max-width: 46ch; }

/* dark panel (story, statement, footer share this ground) */
.panel-dark {
  background: var(--cacao); color: var(--on-dark);
  border-radius: clamp(1.5rem, 4vw, 2.75rem);
  margin-inline: clamp(.75rem, 2vw, 1.5rem);
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
}
.panel-dark .section__title { color: var(--cream); }
.panel-dark .story__text p { color: var(--on-dark-2); }

/* ---------- story -------------------------------------------------------- */
.story__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; max-width: 1180px; margin-inline: auto; }
@media (min-width: 50rem) { .story__grid { grid-template-columns: 1fr 1fr; } }
.story__title { font-size: var(--step-xxl); margin-bottom: 1.5rem; }
/* --accent-soft, not --accent: this sits on the cacao panel, and the
   corrected #b62a22 measures 2.33:1 there — --accent is for cream grounds. */
.story__title em { font-style: normal; color: var(--accent-soft); }
.story__text { display: flex; flex-direction: column; gap: .875rem; max-width: 48ch; line-height: 1.7; }
.story__portrait { position: relative; }
.story__portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); }
.story__stamp {
  position: absolute; bottom: 1.125rem; left: 1.125rem;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: .875rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .625rem 1.125rem; border-radius: var(--radius-pill);
  transform: rotate(-3deg);
}

/* ---------- craft cards -------------------------------------------------- */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem;
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--accent-ink); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.card__num {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--cacao); color: var(--accent-soft);
  font-family: var(--font-display); font-size: 1.125rem;
  display: flex; align-items: center; justify-content: center;
}
.card__title { font-family: var(--font-display); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.card__text { font-size: var(--step-sm); color: var(--ink-2); }

/* ---------- statement ---------------------------------------------------- */
.statement {
  position: relative; overflow: hidden;
  background: var(--cacao); color: var(--on-dark);
  display: grid; place-items: center;
  min-height: 70vh;
  padding: clamp(4rem, 10vw, 7.5rem) var(--gutter);
  text-align: center;
}
.statement__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.statement__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(59, 20, 16,.55), rgba(59, 20, 16,.72));
}
.statement__inner { position: relative; max-width: 60rem; }
.statement__title { font-size: var(--step-hero); color: var(--cream); margin-bottom: 1.25rem; }
/* --accent-soft, not --accent: this panel is cacao, and the corrected
   #b62a22 measures 2.33:1 there — --accent is for cream grounds. */
.statement__title em { font-style: normal; color: var(--accent-soft); }
.statement .lede { color: var(--on-dark-2); max-width: 34rem; margin-inline: auto; }

/* ---------- order -------------------------------------------------------- */
.steps { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 2rem; }
.step { display: flex; align-items: flex-start; gap: 1rem; }
.step__num {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.step b { color: var(--ink); }
.step > span:not(.step__num) { color: var(--ink-muted); }
.order__media img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-lg); border: 10px solid var(--cacao);
  box-shadow: var(--shadow-lift);
}

/* ---------- gallery ------------------------------------------------------ */
.gallery {
  display: grid; gap: .875rem;
  grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr));
  max-width: 1400px; margin-inline: auto;
}
/* The gallery tiles sit edge to edge, so they mat as a group rather than each
   getting its own frame — a grid of individually framed thumbnails reads as a
   contact sheet, not a brand. */
.gallery figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--cacao); }
.gallery img, .gallery video { border-radius: var(--radius-md); }
.gallery img, .gallery video { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- FAQ ---------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: .625rem; }
.faq__item { background: var(--cream-2); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.faq__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.125rem 1.375rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink);
}
.faq__trigger:hover { color: var(--accent-ink); }
.faq__icon {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cream); color: var(--ink);
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 600;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.faq__trigger[aria-expanded="true"] .faq__icon {
  background: var(--accent); color: var(--on-accent); transform: rotate(180deg);
}
.faq__panel { padding: 0 1.375rem 1.25rem; }
.faq__panel p { font-size: var(--step-sm); color: var(--ink-2); }
.faq__panel[hidden] { display: none; }

/* ---------- pending media --------------------------------------------------
   Every existing product photo/video was shot for the old hot-pink-chocolate
   concept, which the 2026-09 flavour change retires. Rather than keep showing
   a photo of a cookie Moo no longer sells, these slots say plainly that new
   photography is coming — the same honesty the giving-back and certificates
   sections on about.html already use for content that isn't ready yet. */
.media-pending {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .875rem; text-align: center; padding: 1.5rem;
  background: var(--cream-2);
}
.media-pending img { width: 56px; height: 56px; opacity: .6; }
.media-pending p {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted); max-width: 18rem;
}
.hero__media--pending, .order__media--pending {
  border-style: dashed; border-color: var(--line-strong); border-width: 2px;
  box-shadow: none;
}
.split__media--pending {
  border: 2px dashed var(--line-strong); box-shadow: none;
}

/* ---------- assurance strip -----------------------------------------------
   Trust, right before the ask. A visitor who has scrolled this far is close
   to reserving a box; this is the last thing they read before the footer's
   newsletter form, so it answers "is this real / will it actually arrive"
   rather than repeating what the hero already said. */
.assurance { padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
.assurance__list {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  max-width: 1180px; margin-inline: auto;
}
.assurance__item { display: flex; align-items: center; gap: 1rem; }
.assurance__icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: var(--cream-2); border: 1.5px solid var(--line);
  color: var(--accent-ink);
  display: grid; place-items: center;
}
.assurance__icon svg { width: 26px; height: 26px; }
.assurance__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.0625rem; letter-spacing: .02em; color: var(--ink); }
.assurance__text { font-size: var(--step-xs); color: var(--ink-muted); }

/* ---------- footer ------------------------------------------------------- */
.footer {
  background: var(--cacao); color: var(--on-dark);
  border-radius: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 2.75rem) 0 0;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem) 2.25rem;
  margin-top: var(--section-y);
}
.footer__inner { max-width: 1180px; margin-inline: auto; display: flex; flex-direction: column; gap: 2.25rem; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.footer__brand { display: flex; align-items: center; gap: .875rem; }
.footer__brand img { width: 56px; height: 56px; border-radius: 50%; }
.footer__name { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cream); }
.footer__tag { font-size: var(--step-xs); color: var(--on-dark-3); }
.footer__links { display: flex; flex-wrap: wrap; gap: .75rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  border-top: 1px solid var(--line-dark); padding-top: 1.5rem;
  font-size: var(--step-xs); color: var(--on-dark-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer__legal a { padding: .25rem .5rem; }
.footer__legal a { color: var(--on-dark-3); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--accent-soft); }

/* ---------- reservation dialog ------------------------------------------ */
.dialog {
  border: none; padding: 0; max-width: 39rem; width: min(100% - 1.5rem, 39rem);
  background: var(--cream); color: var(--ink);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  box-shadow: 0 40px 80px -20px rgba(59, 20, 16, .6);
  overflow: hidden;
}
.dialog::backdrop { background: rgba(59, 20, 16, .72); backdrop-filter: blur(6px); }
.dialog__head {
  background: var(--cacao); color: var(--on-dark);
  padding: 1.625rem clamp(1.25rem, 4vw, 2.25rem);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.dialog__title { font-family: var(--font-display); font-size: clamp(1.625rem, 4.5vw, 2.375rem); text-transform: uppercase; color: var(--cream); line-height: 1; }
.dialog__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(248, 232, 219, .14); color: var(--on-dark);
  border: none; cursor: pointer; font-size: 1.125rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.dialog__close:hover { background: var(--accent); color: var(--on-accent); }
.dialog__body { padding: clamp(1.375rem, 4vw, 2rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.5rem, 4vw, 2rem); }

.field { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.375rem; }
.field__label { font-size: var(--step-label); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.field__hint { font-size: var(--step-xs); color: var(--ink-muted); }
.field__row { display: grid; gap: .625rem; }
.field__row--2 { grid-template-columns: 2fr 1fr; }
.field__row--3 { grid-template-columns: 1fr 2fr; }
.field__row--even { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.input, .textarea {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--cream-2);
  border: 2px solid rgba(59, 20, 16, .18);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
  min-height: 48px;
  transition: border-color .18s var(--ease);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 3px rgba(182, 42, 34, .18); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--accent-ink); background: rgba(182, 42, 34, .05); }
.textarea { resize: vertical; min-height: 6rem; }
.input--short { max-width: 11rem; text-transform: uppercase; letter-spacing: .04em; }
.input--upper { text-transform: uppercase; letter-spacing: .04em; }
/* A label + input pair sitting in one cell of a .field__row grid. */
.field__cell { display: flex; flex-direction: column; gap: .625rem; }

/* Netlify's spam honeypot. Off-screen rather than display:none — a bot that
   skips hidden fields would otherwise sail past it. aria-hidden + tabindex="-1"
   on the markup keep it away from screen readers and the tab order. */
.honeypot {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
.choice__opt { position: relative; }
.choice__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__opt span {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--cream-2); color: var(--ink);
  border: 2px solid rgba(59, 20, 16, .18);
  border-radius: 18px; padding: 1rem .875rem;
  transition: all .18s var(--ease);
}
.choice__opt b { font-family: var(--font-display); font-size: 1.1875rem; text-transform: uppercase; letter-spacing: .02em; font-weight: 400; }
.choice__opt small { font-size: var(--step-xs); color: var(--ink-muted); }
.choice__opt input:checked + span { background: var(--cacao); color: var(--cream); border-color: var(--accent); }
.choice__opt input:checked + span small { color: var(--on-dark-3); }
.choice__opt input:focus-visible + span { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.choice__opt--popular span { border-color: var(--accent); }
.choice__badge {
  position: absolute; top: -.625rem; right: .75rem; z-index: 2;
  background: var(--accent); color: var(--on-accent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .625rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .25rem .625rem; border-radius: var(--radius-pill);
  pointer-events: none;
}

/* ---------- box picker (product page) ------------------------------------- */
.box-picker { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.box-card { text-align: center; align-items: center; position: relative; }
.box-card--popular { border-color: var(--accent); box-shadow: var(--shadow-card); }
.box-card__ribbon {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .6875rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .375rem .875rem;
  border-radius: var(--radius-pill); white-space: nowrap;
}
.box-card__qty { font-family: var(--font-display); font-size: 2rem; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.box-card__qty span { display: block; margin-top: .25rem; font-size: .8125rem; letter-spacing: .1em; color: var(--ink-muted); }
.box-card__price { font-size: var(--step-sm); font-weight: 700; color: var(--ink); }
.box-card__unit { font-size: var(--step-xs); color: var(--ink-muted); }
.box-card .btn { width: 100%; margin-top: .25rem; }

/* ---------- comparison table ------------------------------------------------ */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.compare {
  width: 100%; min-width: 34rem; border-collapse: separate; border-spacing: 0;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare th, .compare td {
  padding: .875rem 1.125rem; text-align: left; font-size: var(--step-sm);
  color: var(--ink-2); border-bottom: 1px solid var(--line); vertical-align: top;
}
.compare thead th {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  font-size: .9375rem; color: var(--ink); background: var(--cream);
}
.compare tbody th[scope="row"] { font-weight: 700; color: var(--ink); white-space: nowrap; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: none; }
.compare td.compare__win { background: rgba(182, 42, 34, .07); color: var(--ink); font-weight: 600; }
.compare th.compare__win { background: var(--accent); color: var(--on-accent); }

/* ---------- post-order upsell (success states) ------------------------------ */
.upsell {
  background: var(--cream-2);
  border-left: 4px solid var(--accent-ink);
  border-radius: var(--radius-md);
  padding: 1.125rem 1.375rem;
  margin-top: 1.5rem;
  text-align: left;
  max-width: 32rem;
}
.upsell__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.0625rem; letter-spacing: .02em; color: var(--ink); margin-bottom: .375rem; }
.upsell__text { font-size: var(--step-sm); color: var(--ink-2); }
.upsell .btn { margin-top: .875rem; }

.stepper { display: flex; align-items: center; gap: .875rem; }
.stepper button {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  border: 2px solid rgba(59, 20, 16, .2); background: var(--cream-2);
  color: var(--ink); font-size: 1.375rem; line-height: 1; cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.stepper button:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.stepper output { font-family: var(--font-display); font-size: 1.625rem; min-width: 2.75rem; text-align: center; }

.form-error {
  background: rgba(182, 42, 34, .10);
  border: 1.5px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem; margin-bottom: 1.375rem;
  font-size: var(--step-sm); color: var(--ink);
}
.form-success { display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start; }
.form-success__title { font-size: var(--step-lg); margin: 0; color: var(--ink); }
/* A class selector outranks the UA's [hidden] { display: none }, so without
   this the "thanks, it's sent" panel sits under the order form on page load,
   before anyone has submitted anything. */
.form-success[hidden] { display: none; }
.form-success__tick {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 1.5rem;
}


/* ---------- scroll reveal ------------------------------------------------
   CSS-only, on purpose. The previous version set opacity:0 from a stylesheet
   and relied on JavaScript to take it off again — so any JS failure left the
   content permanently invisible. That is exactly what happened on iOS.

   A view() timeline cannot fail that way: browsers that support it animate the
   element as it scrolls in, and browsers that do not simply never apply the
   rule, so the content is visible from the first paint. No JS involved. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :is(.section__head, .split__body, .split__media, .card,
        .story__text, .story__portrait, .gallery figure,
        .step, .statement__inner, .faq__item, .order__media, .flavour,
        .assurance__item) {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 16%;
    }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- motion preferences ------------------------------------------ */
/* Everything that moves on its own must stop here. Videos are paused in JS. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
}

/* ---------- legal pages -------------------------------------------------- */
.legal { padding-block: clamp(2.5rem, 6vw, 4rem) var(--section-y); }
.legal h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.375rem, 5.6vw, 3.75rem); /* "TERUGBETALINGSBELEID" is 20 capitals and must fit 320px */ line-height: 1; margin-bottom: .75rem; }
.legal h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.375rem; letter-spacing: .02em; margin: 2.5rem 0 .75rem; }
/* :where() keeps this at zero specificity for the p/li part, so a component
   class placed on one of those elements still wins. Written as a plain
   descendant selector it scores (0,1,1) and silently overrides every
   .contact-card__label, .pending__tag and .legal__updated inside it —
   which is exactly the bug that put cream-on-brown text at 1.4:1. */
.legal :where(p, li) { color: var(--ink-2); max-width: 68ch; }
.legal p + p { margin-top: .75rem; }
.legal ul { list-style: disc; padding-left: 1.25rem; margin-top: .5rem; display: flex; flex-direction: column; gap: .375rem; }
.legal dl { margin: .5rem 0 0; display: grid; gap: .375rem; }
.legal dt { font-weight: 700; color: var(--ink); }
.legal dd { margin: 0 0 .625rem; color: var(--ink-2); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__updated { color: var(--ink-muted); font-size: var(--step-sm); }
.legal__todo {
  background: rgba(182, 42, 34, .08);
  border: 1.5px dashed var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 1rem 1.125rem; margin: 1rem 0;
  font-size: var(--step-sm); color: var(--ink);
}
.legal__todo b { display: block; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .12em; font-size: var(--step-label); color: var(--accent-ink-2); }
/* Links inside the coral-tinted callouts: the 7-8% coral wash darkens the
   ground just enough to push --accent-ink under AA (4.36:1 measured). */
.legal__todo a, .pending a { color: var(--accent-ink-2); }
.legal__back { display: inline-block; margin-bottom: 2rem; padding: .375rem .125rem; font-weight: 600; font-size: var(--step-sm); }

/* ---------- allergen declaration ----------------------------------------
   A legally required statement (EU 1169/2011), so it gets a quiet panel of
   its own rather than a footnote — present on the flavour page without
   shouting like the dashed to-do callouts. */
.allergens {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 1.125rem 1.25rem;
}
.allergens__title {
  margin: 0 0 .5rem;
  font-family: var(--font-body);
  font-size: var(--step-label); text-transform: uppercase;
  letter-spacing: .12em; color: var(--accent-ink-2);
}
.allergens__text { margin: 0; max-width: 68ch; font-size: var(--step-sm); color: var(--ink-2); }
.allergens__text + .allergens__text { margin-top: .625rem; }
.allergens a { color: var(--accent-ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- waitlist landing page ---------------------------------------
   /binnenkort and /en/coming-soon. One centred column on the brand cream, no
   nav and no footer grid: it is a bio-link destination, and the only job on
   the page is the one form. Everything here reuses the site's tokens, so the
   page cannot drift away from the rest of the brand on its own. */
.waitlist {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 7vw, 4.5rem) var(--gutter);
  background: var(--cream);
}
.waitlist__inner {
  width: 100%; max-width: 34rem;
  text-align: center;
  position: relative;
}
/* .lang-switch pins itself mid-right from 48rem up, which is right inside the
   announce bar and wrong here — on this page it sits in the flow. */
.waitlist__lang { justify-content: center; margin-bottom: clamp(1.5rem, 5vw, 2.5rem); }
@media (min-width: 48rem) {
  .waitlist__lang { position: static; transform: none; right: auto; top: auto; }
}
.waitlist__brand { display: inline-block; }
.waitlist__logo {
  width: clamp(200px, 46vw, 260px); height: auto;
}
.waitlist__eyebrow { margin-top: clamp(1.75rem, 5vw, 2.5rem); color: var(--accent-ink); }
.waitlist__title {
  font-size: clamp(2.125rem, 7.5vw, 3.25rem);
  margin: .625rem 0 0;
  color: var(--ink);
}
.waitlist__title em { font-style: normal; color: var(--accent-ink); }
.waitlist__lede {
  color: var(--ink-2);
  max-width: 28rem;
  margin: 1.125rem auto 0;
}

/* The perks are the offer, so they get room and a left edge to scan down —
   centred list items would make three different-length lines wander. */
.waitlist__perks {
  list-style: none;
  margin: clamp(1.75rem, 5vw, 2.25rem) auto 0;
  padding: 0;
  display: inline-flex; flex-direction: column; gap: .75rem;
  text-align: left;
}
.waitlist__perk {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--step-body);
  color: var(--ink);
}
.waitlist__icon {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  font-size: 1.125rem; line-height: 1;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: 50%;
}

.waitlist__form {
  margin-top: clamp(1.875rem, 5vw, 2.5rem);
  display: flex; flex-direction: column; gap: .75rem;
}
.waitlist__form .input { text-align: center; }
.waitlist__form .input[aria-invalid="true"] { border-color: var(--accent); }
.waitlist__submit { font-family: var(--font-display); font-size: 1.0625rem; }
.waitlist__status { margin-top: .875rem; }

/* Confirmation. Replaces the form in place — no page load, and no live form
   left on screen inviting a duplicate submission. */
.waitlist__done {
  margin-top: clamp(1.5rem, 5vw, 2rem);
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: clamp(1.5rem, 5vw, 2rem) clamp(1.25rem, 4vw, 1.75rem);
}
.waitlist__done:focus { outline: none; }
.waitlist__tick {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 1.125rem;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-size: 1.5rem;
}
.waitlist__donetitle { font-size: var(--step-lg); margin: 0 0 .75rem; color: var(--ink); }
.waitlist__donebody { margin: 0; color: var(--ink-2); font-size: var(--step-body); line-height: 1.6; }
.waitlist__code {
  margin: 1.125rem 0 0;
  font-family: 'Times New Roman', Times, var(--font-display);
  font-size: 1.375rem; font-weight: 700; letter-spacing: .1em;
  color: var(--accent-ink);
  background: var(--cream);
  border: 2px dashed var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
}
.waitlist__donenote { margin: .875rem 0 0; }

.waitlist__legal {
  margin: clamp(2rem, 6vw, 3rem) 0 0;
  font-size: var(--step-xs); line-height: 1.8; color: var(--ink-muted);
}
.waitlist__legal a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.waitlist__legal a:hover { color: var(--accent-ink); }

/* ---------- 404 --------------------------------------------------------- */
.error-page { padding-block: clamp(4rem, 12vw, 9rem) var(--section-y); text-align: center; }
.error-page__title { font-size: var(--step-xxl); margin: 0 0 1rem; }
.error-page__title em { font-style: normal; color: var(--accent-ink); }
.error-page__lede { color: var(--ink-2); max-width: 34rem; margin: 0 auto 2rem; }
.error-page .hero__actions { justify-content: center; }
.error-page__links { margin-top: 2.5rem; }
.error-page__links a { display: inline-block; padding: .375rem .25rem; }

/* ---------- pending-content marker --------------------------------------- */
/* Deliberately loud. This is a page that must not go live as-is. */
.pending {
  background: rgba(182, 42, 34, .07);
  border: 2px dashed var(--accent-ink);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin: 1.5rem 0 2rem;
}
.pending__tag {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); font-weight: 700; letter-spacing: .06em;
  color: var(--accent-ink-2); margin-bottom: .875rem;
}
.pending p + p { margin-top: .75rem; }

/* ---------- contact card -------------------------------------------------- */
.contact-card {
  background: var(--cacao); color: var(--on-dark);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  margin-bottom: 2.5rem;
}
.contact-card__label {
  font-size: var(--step-label); font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: .625rem;
}
.contact-card__value {
  display: inline-block;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.5rem, 4.5vw, 2.25rem); line-height: 1.05;
  color: var(--cream); word-break: break-word; margin-bottom: .75rem;
}
.contact-card__value:hover { color: var(--accent-soft); }
.contact-card .note { color: var(--on-dark-3); }

/* ---------- footer columns ------------------------------------------------ */
.footer__cols {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--line-dark);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
}
.footer__coltitle {
  font-size: var(--step-label); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: .875rem;
  font-family: var(--font-body);
}
.footer__col ul { display: flex; flex-direction: column; gap: .125rem; }
.footer__col a {
  display: inline-block; padding: .3125rem 0;
  color: var(--on-dark-2); font-size: var(--step-sm);
}
.footer__col a:hover { color: var(--accent-soft); }

/* ---------- flavours ------------------------------------------------------ */
.flavours { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.flavour {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: .75rem;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.flavour:hover { border-color: var(--accent-ink); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.flavour--signature { background: var(--cacao); color: var(--on-dark); border-color: var(--cacao); }
.flavour--signature .flavour__name { color: var(--cream); }
.flavour--signature .flavour__desc { color: var(--on-dark-2); }
.flavour--signature .flavour__tag { color: var(--accent-soft); }
.flavour--soon { border-style: dashed; }
.flavour__tag {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.flavour__tag--new { color: var(--accent-ink); }
.flavour__name { font-size: clamp(1.5rem, 3vw, 2rem); }
.flavour__desc { font-size: var(--step-sm); color: var(--ink-2); }

/* ---------- options ------------------------------------------------------- */
.options { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.options__block { display: flex; flex-direction: column; gap: .875rem; }
.options__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.375rem; letter-spacing: .02em; }
.options__lede { font-size: var(--step-sm); color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  background: var(--cream-2);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: .5rem 1rem;
  font-size: var(--step-sm); font-weight: 600; color: var(--ink);
  white-space: nowrap;               /* a chip label must never break in two */
}
.chip--alt { border-color: var(--accent-ink); color: var(--accent-ink); }

/* ---------- newsletter ---------------------------------------------------- */
.newsletter {
  background: var(--cacao); color: var(--on-dark);
  border-radius: clamp(1.5rem, 4vw, 2.75rem);
  margin-inline: clamp(.75rem, 2vw, 1.5rem);
}
.newsletter__inner { text-align: center; }
.newsletter__title { font-size: var(--step-xl); color: var(--cream); margin-bottom: .875rem; }
.newsletter__lede { color: var(--on-dark-2); max-width: 34rem; margin: 0 auto 1.75rem; }
.newsletter__form {
  display: flex; flex-wrap: wrap; gap: .625rem;
  justify-content: center; margin-bottom: 1rem;
}
.newsletter__form .input { max-width: 20rem; }
.newsletter__form .input[aria-invalid="true"] { border-color: var(--accent); }
.newsletter .note--on-dark { color: var(--on-dark-3); }
/* FAQ page uses h2 for each question (the home page nests them under an h2,
   the dedicated page does not — a skipped level is a real navigation problem
   for screen-reader users, not a cosmetic one). */
.faq__q { margin: 0; font-weight: 400; }

/* ---------- announcement bar --------------------------------------------- */
/* Cream, not a coral band. Two reasons, one of them the brand guide's own:
   "cream is altijd de dominante ondergrond ... nooit coral-achtergrond" — and a
   full-width coral strip across the top of the page was the single biggest
   coral field on the site. The other reason is that it is exactly the silhouette
   hetkoekemannetje.nl leads with (coral band, centred serif caps wordmark), and
   the top 60px is what a visitor reads in the first second. The measured
   palettes are far apart — their salmon #FD8B75 against this #B62A22 is a
   delta of 251 — but nobody compares hex values, they compare shapes. */
.announce {
  background: var(--cream-2); color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: .5rem var(--gutter);
  text-align: center;
}
.announce__text {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); letter-spacing: .04em;
  text-transform: uppercase;
}
/* The only tappable thing in the bar, so it gets a real target rather than
   relying on the inline-link exemption — 15px tall is not a thumb target. */
.announce a {
  display: inline-block; padding: .25rem .375rem; margin: -.25rem 0;
  color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px;
}
.announce a:hover { color: var(--ink); }

/* ---------- language switch ----------------------------------------------
   Dutch is the site's primary language; English is the alternate. The switch
   sits in the announce bar because that is the first thing on the page, and
   it is a plain link per language rather than a <select> so it works without
   JavaScript and so each language is a real, crawlable URL.
   On phones it sits under the bar's text; from tablet up it pins right, where
   it does not push the centred announcement off-centre. */
.announce { position: relative; }
.lang-switch {
  display: flex; align-items: center; justify-content: center; gap: .125rem;
  margin-top: .25rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); letter-spacing: .04em;
}
.lang-switch__sep { color: var(--line-strong); }
/* the active language is stated, not linked — a link to the page you are on
   is a dead end for anyone tabbing through */
.lang-switch__current {
  padding: .375rem .5rem; font-weight: 700; color: var(--ink);
  text-transform: uppercase;
}
.lang-switch a {
  padding: .375rem .5rem; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid currentColor;
}
@media (min-width: 48rem) {
  .lang-switch {
    position: absolute; top: 50%; right: var(--gutter);
    transform: translateY(-50%); margin-top: 0;
  }
}

/* ---------- taped sticker label ------------------------------------------ */
.sticker {
  display: inline-block;
  background: var(--cream-2);
  border: 1px solid var(--line);
  box-shadow: 2px 3px 0 rgba(59, 20, 16, .10);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); padding: .4375rem 1.125rem;
  transform: rotate(-1.4deg);
  margin-bottom: 1.25rem;
}

/* ---------- page head ----------------------------------------------------- */
.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.page-head__title { font-size: var(--step-xxl); max-width: 22ch; margin: 0 auto .875rem; }
.page-head__lede { color: var(--ink-2); max-width: 40rem; margin: 0 auto .5rem; }
.page-head__note { font-size: var(--step-sm); color: var(--ink-muted); }
.page-head__note b { color: var(--ink); }

.section--tight { padding-block: clamp(1.5rem, 4vw, 3rem) var(--section-y); }
.section__title--left { text-align: left; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- cookie cards --------------------------------------------------- */
.cookie-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cookie-card { display: flex; flex-direction: column; gap: .625rem; }
.cookie-card__media {
  position: relative;
  background: var(--cream-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: .375rem;
}
.cookie-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cookie-card__media--empty {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-strong);
}
.cookie-card__pending {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.cookie-card__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.375rem; letter-spacing: .02em; }
.cookie-card__desc { font-size: var(--step-sm); color: var(--ink-2); }
.cookie-card__meta {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); color: var(--ink-muted); margin-top: auto; padding-top: .25rem;
}

/* Oval sticker slapped on the tile, like the reference's Best Seller mark. */
.badge {
  position: absolute; top: .875rem; left: .875rem; z-index: 2;
  background: var(--cream); color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 50% / 46%;
  padding: .5rem 1rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.15; text-align: center;
  transform: rotate(-8deg);
}
.badge--new { background: var(--accent); border-color: var(--cacao); color: var(--on-accent); }
.badge--soon { border-style: dashed; color: var(--ink-muted); }

/* ---------- footer block --------------------------------------------------- */
.footer {
  background: none; color: inherit;
  /* the preceding section already carries its own bottom padding — matching it
     here again produced a dead band above the block */
  padding: clamp(1rem, 2vw, 2rem) clamp(.75rem, 2vw, 1.5rem) 1.5rem;
  margin-top: 0; border-radius: 0;
}
.footer__block {
  background: var(--cacao); color: var(--on-dark);
  border-radius: clamp(1.5rem, 4vw, 2.75rem);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  /* the reference keeps the panel well inside the page rather than letting it
     run to the edges — without this cap the side columns hug the rim */
  max-width: 1400px; margin-inline: auto;
}
.footer__grid {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  align-items: start; max-width: 1280px; margin-inline: auto;
}
@media (min-width: 56rem) { .footer__grid { grid-template-columns: 1fr 1.4fr 1fr; } }
/* Stacked, the newsletter is the reason the block exists — it should not sit
   between two link lists. */
@media (max-width: 55.99rem) { .footer__center { order: -1; } }
.footer__center { text-align: center; display: flex; flex-direction: column; align-items: center; }
/* The footer panel is cacao, and the brand rule is that the logo always sits
   on a flat cream ground — so it gets one of its own rather than a recoloured
   variant. It also sidesteps the faint halo that keyed line art picks up when
   it is composited onto a dark field. */
.footer__logo {
  display: inline-block; margin-bottom: 1.25rem;
  background: var(--cream); border-radius: var(--radius-sm);
  padding: .75rem 1.125rem;
}
.footer__mark { width: 170px; height: auto; }
.footer__title { font-size: clamp(1.625rem, 3.5vw, 2.25rem); color: var(--cream); margin-bottom: .75rem; }
.footer__lede { color: var(--on-dark-2); max-width: 32rem; margin-bottom: 1.5rem; font-size: var(--step-sm); }
/* The reference runs these columns bare — the links are self-evident and a
   coloured label above each one competes with the newsletter headline. The
   heading stays in the DOM for screen readers; the <nav aria-label> names the
   landmark either way. */
.footer__coltitle {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* In the reference the first link sits level with the bottom of the mark, not
   its top — without this offset the columns ride high against the logo. */
.footer__col { text-align: center; }
@media (min-width: 56rem) { .footer__col { padding-top: 4rem; } }
.footer__col ul { display: flex; flex-direction: column; gap: .125rem; }
.footer__col a { display: block; padding: .4375rem .25rem; color: var(--on-dark-2); font-size: var(--step-sm); }
.footer__col a:hover { color: var(--accent-soft); }

.newsletter__form {
  display: flex; flex-wrap: wrap; gap: .625rem;
  justify-content: center; margin-bottom: .875rem;
  width: 100%; max-width: 30rem;
}
/* The input has to be allowed to shrink, or field + button overflow the centre
   column and wrap onto two lines at exactly the widths that matter most. */
.newsletter__form .input { flex: 1 1 9rem; width: auto; max-width: 18rem; }
.newsletter__form .btn { flex: 0 0 auto; }

.socials { display: flex; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.social {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--on-dark);
  border: 1.5px solid var(--line-dark);
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.social:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem;
  /* lines up with the block's own edges, as in the reference — capped at 1180
     it sat 110px further in than the panel above it, which read as a mistake */
  max-width: 1400px; margin: 1.5rem auto 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
  border: 0;
  font-size: var(--step-xs); color: var(--ink-muted);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer__legal a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; padding: .25rem .375rem; }
.footer__legal a:hover { color: var(--accent-ink); }

/* ---------- welcome / discount popup --------------------------------------
   Injected by main.js (not hand-copied into every page), so there is nothing
   here to drift between the eleven HTML files. */
.dialog--promo { max-width: 27rem; }
.promo__body { text-align: center; }
/* One flat colour block, not a gradient — cream-on-accent is the pairing
   that carries an AA contrast check elsewhere in this file (--on-accent),
   so nothing here needs a fresh check of its own. Cacao-on-accent used to
   work here at the old, brighter coral (3.94:1); the corrected #b62a22 is
   dark enough that pairing drops to ~2.3:1, so this block now inherits
   --on-accent instead of overriding to cacao. */
.promo__top {
  position: relative;
  background: var(--accent); color: var(--on-accent);
  padding: 2.5rem clamp(1.5rem, 6vw, 2.5rem) 2rem;
}
.promo__close {
  position: absolute; top: .875rem; right: .875rem;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(59, 20, 16, .14); color: var(--on-accent);
  border: none; cursor: pointer; font-size: 1.125rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.promo__close:hover { background: var(--accent-deep); color: var(--cream); }
.promo__eyebrow { margin-bottom: .375rem; }
.promo__percent {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.75rem, 10vw, 4rem); line-height: .95;
  margin: 0;
}
.promo__lede { font-family: var(--font-display); text-transform: uppercase; font-size: var(--step-md); margin: .25rem 0 0; }
.promo__bottom { padding: 1.75rem clamp(1.5rem, 6vw, 2.5rem) 2.25rem; }
.promo__copy { font-size: var(--step-xs); color: var(--ink-muted); max-width: 22rem; margin: 0 auto 1.25rem; }
.promo__form { display: flex; flex-direction: column; gap: .75rem; }
.promo__form .input { text-align: center; }
.promo__status { min-height: 1.125rem; margin-top: .75rem; }
.promo__code {
  display: inline-block; margin-top: .25rem;
  font-family: var(--font-display); letter-spacing: .06em;
  font-size: var(--step-lg); color: var(--accent-ink);
  background: var(--cream-2); border: 2px dashed var(--accent-ink);
  border-radius: var(--radius-sm); padding: .5rem 1.25rem;
}
.promo__skip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; margin-top: 1.25rem;
  background: none; border: none; padding: .375rem .5rem;
  font-size: var(--step-xs); color: var(--ink-muted); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.promo__skip:hover { color: var(--accent-ink); }

/* ==========================================================================
   v3 — premium homepage (2026-09-25)
   Full-width sections, content capped at 1280px, imagery allowed to bleed.
   Everything below is mobile-first; the desktop layouts switch on at 48rem
   (tablet) and 64rem (desktop).
   ========================================================================== */

/* ---------- red panels ----------------------------------------------------
   Every surface that used to be cacao is the brand red now, which means the
   red fills that sat ON those panels (buttons, badges, hovers, focus rings)
   would vanish into them. Inside a red panel the roles flip: cream fill, red
   type — the same 5.25:1 pair, the other way round. */
:is(.band-red, .panel-dark, .footer__block, .contact-card, .dialog__head) .btn--primary {
  background: var(--cream); color: var(--accent);
}
:is(.band-red, .panel-dark, .footer__block, .contact-card) .btn--primary:hover {
  background: var(--ink); color: var(--cream);
}
:is(.band-red, .panel-dark, .footer__block, .contact-card, .dialog__head) :focus-visible {
  outline-color: var(--cream);
}
:is(.band-red, .panel-dark, .footer__block) .input { background: var(--cream); border-color: transparent; }
:is(.band-red, .panel-dark, .footer__block) .input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(248, 232, 219, .45); }
:is(.band-red, .panel-dark, .footer__block) .input[aria-invalid="true"] { border-color: var(--ink); }
.social:hover { background: var(--cream); border-color: var(--cream); color: var(--accent); }
.dialog__close:hover { background: var(--cream); color: var(--accent); }
.footer__legal a:hover, .footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- layout primitives ---------------------------------------------- */
.wrap { max-width: calc(1280px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--section-y); }
.band--alt { background: var(--cream-2); }
.band-red { background: var(--accent); color: var(--on-accent); padding-block: var(--section-y); }
.band-red .eyebrow { color: var(--on-accent); }
.band-red .note { color: var(--on-accent); }

.head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); max-width: 46rem; }
.head--center { text-align: center; margin-inline: auto; }
.head__title { font-size: var(--step-xl); }
.head__lede { margin-top: 1.125rem; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); }
.head--center .head__lede { margin-inline: auto; max-width: 36rem; }
.band-red .head__lede { color: var(--on-dark-2); }

/* ---------- photo slots ----------------------------------------------------
   Every photo on the home page lives at a fixed name in /images/ so Moo can
   drop a file in without touching code. Until a file exists the slot shows a
   plain cream tile with a small red mark — no dashed border, no "coming soon".
   The slot reserves its own space with aspect-ratio, so a photo arriving (or
   not) never moves the layout.

   Missing-file handling has two layers so it never depends on one browser
   feature: main.js adds .ph--empty on the image's error event, and without JS
   the ::after below paints the same tile over Chrome's / Firefox's broken-
   image glyph (a failed <img> renders its pseudo-elements; a loaded one does
   not). color:transparent hides the alt text that would otherwise print
   across the tile. */
.ph {
  position: relative; overflow: hidden;
  background: var(--cream-2) url('../img/logo-mark-alpha-128.png') center / 56px auto no-repeat;
}
.band--alt .ph { background-color: var(--cream); }
.ph > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  color: transparent;
}
.ph > img::after {
  content: ''; position: absolute; inset: 0;
  background: inherit;
  background: var(--cream-2) url('../img/logo-mark-alpha-128.png') center / 56px auto no-repeat;
}
.ph--empty > img { visibility: hidden; }

/* ---------- 1 · hero --------------------------------------------------------
   Full-bleed: hero.jpg covers the whole block, a dark gradient keeps the cream
   headline readable on any photo, and the text sits straight on the image.
   The block's own ground is the brand red, so without hero.jpg (main.js adds
   .ph--empty on the image's error) it reads as a solid red hero with cream
   type — no tile, no stray mark. The gradient only runs over a real photo. */
.home-hero {
  position: relative; isolation: isolate;
  min-height: 85vh; min-height: 85svh;
  display: flex; align-items: flex-end;
  background: var(--accent); color: var(--cream);
  overflow: hidden;
}
.home-hero__media { position: absolute; inset: 0; z-index: -1; background: var(--accent); }
.home-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; color: transparent; }
/* without JS a missing file would paint the broken-image glyph: cover it red */
.home-hero__media > img::after { content: ''; position: absolute; inset: 0; background: var(--accent); }
.home-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(20, 6, 4, .86) 0%, rgba(20, 6, 4, .58) 45%, rgba(20, 6, 4, .18) 80%),
    linear-gradient(90deg, rgba(20, 6, 4, .55) 0%, rgba(20, 6, 4, .1) 65%);
}
.home-hero__media.ph--empty::after { display: none; }
.home-hero__media.ph--empty > img { visibility: hidden; }
.home-hero__inner { width: 100%; padding-block: clamp(4rem, 12vh, 7rem) clamp(3rem, 9vh, 5.5rem); }
.home-hero__eyebrow { color: var(--cream); margin-bottom: 1.25rem; }
.home-hero__title {
  font-size: clamp(2.5rem, 7.6vw, 6rem); line-height: .93;
  color: var(--cream); max-width: 12ch; margin-bottom: 1.5rem;
  text-wrap: balance;
}
.home-hero__lede { font-size: clamp(1.125rem, 1.7vw, 1.375rem); color: var(--cream); max-width: 34ch; margin-bottom: 2rem; }
.home-hero .btn { padding-inline: 2.75rem; min-height: 58px; font-size: 1rem; }
.home-hero .btn--primary { background: var(--cream); color: var(--accent); }
.home-hero .btn--primary:hover { background: var(--ink); color: var(--cream); }
.home-hero :focus-visible { outline-color: var(--cream); }

/* ---------- 2 · this week --------------------------------------------------- */
.weekly__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) { .weekly__grid { grid-template-columns: 1.3fr 1fr; } }
.weekly__media { aspect-ratio: 5 / 4; border-radius: var(--radius-lg); }
.weekly__pill {
  display: inline-block; margin-bottom: 1.25rem;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--step-label); font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  padding: .5rem 1rem; border-radius: var(--radius-pill);
}
.weekly__name { font-size: var(--step-xxl); margin-bottom: 1.25rem; }
.weekly__desc { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--ink-2); max-width: 36ch; margin-bottom: 2rem; }

/* ---------- 3 · the regular flavours ---------------------------------------- */
.fcards { display: grid; gap: clamp(2rem, 3vw, 2.5rem); }
@media (min-width: 48rem) { .fcards { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 2rem); } }
.fcard__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); margin-bottom: 1.375rem; }
.fcard__media > img { transition: transform .6s var(--ease); }
.fcard:hover .fcard__media > img { transform: scale(1.035); }
.fcard__name { font-size: clamp(1.625rem, 2.6vw, 2.25rem); margin-bottom: .625rem; }
.fcard__desc { color: var(--ink-2); }
.fcard__meta {
  margin-top: .875rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--step-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted);
}
.fcards__more { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- 4 · boxes ------------------------------------------------------- */
.boxgrid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 30rem) { .boxgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .boxgrid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.boxcard {
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 2.75rem) 1.5rem 1.5rem;
}
.boxcard--popular { border: 2px solid var(--accent); box-shadow: var(--shadow-card); }
.boxcard__ribbon {
  position: absolute; top: -.8125rem; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--step-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .375rem 1rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.boxcard__qty { font-family: var(--font-display); font-size: clamp(3.5rem, 6vw, 5rem); line-height: 1; color: var(--accent); }
.boxcard__label { font-size: var(--step-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-top: .5rem; }
.boxcard__price { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 1.875rem); color: var(--ink); margin-top: 1.25rem; }
.boxcard__per { font-size: var(--step-sm); color: var(--ink-muted); margin: .25rem 0 1.5rem; }
.boxcard .btn { margin-top: auto; width: 100%; padding-inline: 1rem; letter-spacing: .04em; white-space: nowrap; }
.boxes__note { text-align: center; margin: clamp(2rem, 4vw, 2.75rem) auto 0; max-width: 44rem; color: var(--ink-2); }
.boxes__note b { color: var(--ink); }

/* ---------- 5 · how it works ------------------------------------------------ */
.how__grid { display: grid; gap: clamp(2.25rem, 4vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 48rem) { .how__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 2rem); } }
.how__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); margin-bottom: 1.375rem; }
.how__num {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; margin-bottom: 1rem;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: 1.125rem;
}
.how__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.5rem, 2.3vw, 1.875rem); line-height: 1.05; margin-bottom: .625rem; }
.how__text { color: var(--ink-2); max-width: 34ch; }

/* ---------- 6 · reviews (feature flag: config.js -> reviews.enabled) -------- */
.reviews[hidden] { display: none; }
.reviews__list { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .reviews__list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.review {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1rem;
}
.review__quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.3; color: var(--ink); }
.review__who { font-size: var(--step-sm); color: var(--ink-muted); font-style: normal; }

/* ---------- 7 · about Moo --------------------------------------------------- */
.moo__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 60rem) { .moo__grid { grid-template-columns: 1fr 1.1fr; } }
.moo__media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.moo__title { font-size: var(--step-xxl); margin-bottom: 1.5rem; }
.moo__title em { font-style: normal; color: var(--accent); }
.moo__text { display: flex; flex-direction: column; gap: 1rem; max-width: 50ch; color: var(--ink-2); line-height: 1.7; margin-bottom: 2rem; }

/* ---------- 8 · club -------------------------------------------------------- */
.club { text-align: center; }
.club__title { font-size: var(--step-hero); color: var(--on-accent); }
.club .newsletter__form { margin: 2rem auto 0; max-width: 34rem; }
.club .newsletter__form .input { max-width: none; flex: 1 1 14rem; min-height: 56px; }
.club .newsletter__form .btn { min-height: 56px; }
.club__status { margin-top: 1rem; }
.club .form-success { align-items: center; margin-top: 1.75rem; }
.club .form-success__tick { background: var(--cream); color: var(--accent); }
.club .form-success__title { color: var(--on-accent); }
.club__done-body { font-size: 1.0625rem; line-height: 1.65; max-width: 32rem; margin-inline: auto; color: var(--on-dark-2); }

/* ---------- 9 · FAQ on the home page ---------------------------------------- */
.home-faq .faq { max-width: 52rem; margin-inline: auto; }
@media (min-width: 64rem) {
  .home-faq__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .home-faq__grid .head { text-align: left; margin: 0; position: sticky; top: 8rem; }
  .home-faq .faq { max-width: none; margin: 0; }
}
.home-faq .faq__trigger { font-size: 1.0625rem; padding: 1.375rem 1.5rem; }
.home-faq .faq__panel { padding: 0 1.5rem 1.5rem; }
.home-faq .faq__panel p + p { margin-top: .75rem; }
.todo-inline {
  background: rgba(182, 42, 34, .08); border: 1.5px dashed var(--accent-ink);
  border-radius: 6px; padding: 0 .375rem; color: var(--ink); font-weight: 700;
}

/* ---------- footer: the Club link that replaced the second form ----------- */
.footer__cta { margin-bottom: 1.25rem; }
.footer__area { max-width: 30rem; font-size: var(--step-xs); color: var(--on-dark-2); }


/* ---------- scroll reveal for the new blocks --------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :is(.head, .fcard, .boxcard, .how__step, .weekly__body, .moo__body, .review) {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 16%;
    }
  }
}
.boxes__media[hidden] { display: none; }
.boxes__media { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
@media (min-width: 48rem) { .boxes__media { aspect-ratio: 5 / 2; } }

/* ==========================================================================
   v3.2 (2026-09-25)
   ========================================================================== */
/* Buttons are UI, not running text: they keep their own size when the body
   steps up to 18px on desktop. */
.btn { font-size: 1rem; }

/* FAQ heading in the two-column desktop layout: its column is ~400px at a
   1280px container, and "QUESTIONS" at the full section size is ~470px. */
@media (min-width: 64rem) {
  .home-faq__grid .head__title { font-size: clamp(2rem, 3.5vw, 3.5rem); }
}

/* running text everywhere: the ink, at the body size */
/* (.legal p/li already use --ink-2, which IS the ink now — no extra rule
   there: a .legal-scoped selector outranks .contact-card__label inside it,
   the trap docs/AUDIT.md describes.) */
.body-copy, .card__text, .options__lede, .cookie-card__desc, .faq__panel p, .step > span:not(.step__num) { color: var(--ink); }
.split__body .body-copy { max-width: 56ch; }

/* ---------- placeholders: one look everywhere -------------------------------- */
.cookie-card__media.ph { aspect-ratio: 1; }
.cookie-card__media.ph > img { z-index: 0; }
.cookie-card__media.ph .badge { z-index: 2; }
.gift__media { aspect-ratio: 1; border-radius: var(--radius-lg); }

/* ---------- gifting: for every occasion -------------------------------------- */
.occasions { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 40rem) { .occasions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .occasions { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.occasion {
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .75rem;
}
.occasion__title { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.05; color: var(--accent); }
.occasion__text { color: var(--ink); }
.occasions__note { text-align: center; margin: clamp(2rem, 4vw, 2.75rem) auto 0; max-width: 44rem; font-weight: 600; color: var(--ink); }
.gift__need { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 60rem) { .gift__need { grid-template-columns: 1fr 1.3fr; } }

.split__body .section__title { margin-bottom: 1.25rem; }
/* the 1rem button size above must not reach the small buttons (nav pill,
   card buttons) — at 375px it pushed the nav pill over the logo */
.btn--sm { font-size: var(--step-xs); }
/* 320px phones: logo 150 + gap + pill 168 did not fit a 280px row, so the
   pill ran over the wordmark. Both give a little at this width only. */
@media (max-width: 22.5rem) {
  .nav__brand img { width: 118px; }
  .nav__side--end .btn { padding-inline: .8125rem; letter-spacing: .02em; }
}

/* ==========================================================================
   v3.3 (2026-09-26) — ordering opens later
   ========================================================================== */
/* The nav pill says "Binnenkort te bestellen"; on a phone that does not fit
   next to the logo, so it shortens to "Binnenkort". The full wording is the
   link's aria-label, so a screen reader always hears the whole thing. */
.nav__cta .cta-short { display: none; }
@media (max-width: 30rem) {
  .nav__cta .cta-long { display: none; }
  .nav__cta .cta-short { display: inline; }
}
.boxes__soon {
  text-align: center; margin: clamp(2rem, 4vw, 2.75rem) auto 0; max-width: 40rem;
  font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.25; color: var(--ink);
}
.boxes__soon a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.boxes__soon + .boxes__note { margin-top: 1rem; }
/* "Binnenkort te bestellen" is longer than "Bestel 12 cookies" was: in a
   four-up row the card button may take two lines instead of pushing the page
   sideways. */
.boxcard .btn { white-space: normal; font-size: .875rem; line-height: 1.25; }