:root {
  --bg: #faf7f2;
  --ink: #1f1d1a;
  --muted: #6f6a62;
  --wine: #5d1a26;
  --hairline: rgba(31, 29, 26, 0.14);
  /* Fraunces is the type family for everything on the site (display and
     body alike); Sora is reserved for buttons and other interactive
     controls, so tappable things read distinctly from running text. */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-btn: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Cellar Light tokens (Direction A) */
  --deep: #2c0a12;            /* dark trust band, footer */
  --surface: #ffffff;         /* cards, inputs */
  /* ── The gold accent is retired (2026-08-09) ──────────────────────────
     Founder: "remove the orange from the website, some texts are in orange,
     I don't want that in my website."

     The token NAMES are kept deliberately. They are referenced in ~35 places
     across three stylesheets, and renaming all of them would be a large,
     risky diff for no visual gain — redefining the three values changes every
     one of those call sites at once, which is the whole reason they were
     tokens. If the names ever read as misleading, rename them in one pass;
     do not reintroduce the hues.

     What replaced them, and why the split still matters: --gold was only ever
     used on DARK surfaces and --gold-ink was its light-surface twin, so the
     two need different answers.
       · on dark  → the brightest cream. It still reads as emphasis, because
                    body copy on those surfaces is --cream-60 (62%), so the
                    accent now separates by LUMINANCE instead of hue.
       · on light → the existing wine. Deep red, unambiguously not orange,
                    and ~11:1 against the cream background. */
  --gold: #faf7f2;            /* accent on dark surfaces (was #c9a227) */
  --gold-ink: #5d1a26;        /* accent on light surfaces (was #8a6d1a) */
  --gold-soft: rgba(93, 26, 38, 0.07); /* tint fills, e.g. age chips (was #f3e9d2) */

  /* Wine either side of --wine, so the gradients and sheens that used to be
     carried by the gold can be rebuilt in the brand colour. Removing the hue
     was the ask; removing the depth was collateral. */
  --wine-lift: #7d2937;       /* lit face of a wine gradient */
  --wine-deep: #45111c;       /* shaded face */
  --tint: rgba(93, 26, 38, 0.06);
  --cream-60: rgba(250, 247, 242, 0.62);
  --cream-30: rgba(250, 247, 242, 0.3);
  --positive: #2f5711;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow-card: 0 4px 24px rgba(59, 10, 20, 0.08);
  --shadow-pill: 0 2px 8px rgba(59, 10, 20, 0.1);

  /* ═══════════════════════════════════════════════════════════════════
     APPLE-DESIGN FOUNDATIONS — added 2026-08-09
     Values are taken verbatim from the apple-design skill; the §
     references point at the section each one comes from. Nothing here is
     rounded to a "nicer" number — where the skill gives a figure, that
     figure is what is used.
     ═══════════════════════════════════════════════════════════════════ */

  /* ── Motion: spring parameters (§4, §11–13) ───────────────────────────
     Apple's two designer-facing parameters, not mass/stiffness/damping.
     `damping` is the damping ratio: 1.0 = critically damped, no overshoot.
     `response` is how fast the value reaches target, in seconds — it is
     NOT a duration; a spring has no fixed duration.
     Consumed by js/spring.js, which reads them off :root so the CSS and
     the JS motion system cannot drift apart. */
  --spring-default-damping: 1;      /* §11 default: no overshoot          */
  --spring-default-response: 0.4;   /* §13 move/reposition                */
  --spring-rotate-damping: 0.8;     /* §13 rotation                       */
  --spring-rotate-response: 0.4;
  --spring-sheet-damping: 0.8;      /* §13 drawer/sheet — momentum, so bounce */
  --spring-sheet-response: 0.3;
  --spring-momentum-damping: 0.8;   /* §12 bounce ONLY after a flick      */
  --spring-momentum-response: 0.4;

  /* Deceleration rate for momentum projection (§6). 0.998 = normal scroll
     feel, 0.99 = snappier. Used by project() in js/spring.js. */
  --momentum-deceleration: 0.998;

  /* ── Motion: CSS curves, for non-gesture transitions only ─────────────
     §8 forbids CSS transitions for anything gesture-driven — those go
     through the spring engine. These are for state changes a finger never
     touches (hover, colour, focus ring).
     --ease-out-soft and --ease-in-soft are exact inverses of each other so
     a reversible transition mirrors its own path (§19). */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-soft: cubic-bezier(0.7, 0, 0.84, 0);

  /* Durations. --dur-press is the §1 press highlight: it must read as
     instant, so it is the shortest value on the site. */
  --dur-press: 0.1s;
  --dur-quick: 0.2s;
  --dur-sheet: 0.3s;      /* matches --spring-sheet-response  */
  --dur-standard: 0.4s;   /* matches --spring-default-response */

  /* ── Typography: tracking is size-specific (§35) ──────────────────────
     "A fixed letter-spacing is wrong somewhere." Large display text takes
     NEGATIVE tracking because letters read too far apart as they grow;
     small text takes slightly positive tracking for legibility. */
  --track-display: -0.022em;
  --track-title: -0.014em;
  --track-body: 0em;        /* §35: body sits near zero */
  --track-caption: 0.01em;
  --track-micro: 0.06em;    /* uppercase eyebrows/labels */

  /* ── Typography: leading tracks size inversely (§36) ──────────────── */
  --lead-display: 1.04;
  --lead-title: 1.14;
  --lead-body: 1.6;
  --lead-caption: 1.5;

  /* ── Spacing in rem, not px (§38) ─────────────────────────────────────
     So a larger system text size scales the layout with the text instead
     of breaking it. 1rem = 16px at default settings. */
  --s-025: 0.125rem;
  --s-05: 0.25rem;
  --s-1: 0.5rem;
  --s-15: 0.75rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-10: 5rem;
  --s-12: 6rem;
  --s-16: 8rem;

  /* ── Materials (§12) ──────────────────────────────────────────────────
     Translucent chrome that content scrolls underneath. Bigger surfaces
     read as thicker: stronger blur, deeper shadow (§26).
     NOTE: the previous code deliberately refused backdrop-filter over
     scrolling content as a jank source. That concern is real and is
     answered rather than ignored — see .topbar in the chrome layer, which
     only promotes to a blurred material once scrolled, keeps the blurred
     strip short, and is disabled wholesale under
     prefers-reduced-transparency (§32). */
  --material-thin-bg: rgba(250, 247, 242, 0.72);
  --material-thin-blur: blur(20px) saturate(180%);
  --material-thick-bg: rgba(250, 247, 242, 0.6);
  --material-thick-blur: blur(30px) saturate(180%);
  --material-deep-bg: rgba(44, 10, 18, 0.72);
  --material-edge: rgba(255, 255, 255, 0.4); /* §12 bright top edge */
  --shadow-material: 0 8px 40px rgba(59, 10, 20, 0.16);
  --scrim: rgba(28, 7, 16, 0.45);            /* §27 modal dimming */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
}

/* Hide the classic vertical scrollbar. It renders as a light gutter on the
   right that stands out over the dark sections (and shows inside the phone
   frame's iframe); real mobile uses invisible overlay scrollbars anyway. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* §35: let the face pick its optical size rather than scaling one master. */
  font-optical-sizing: auto;
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
  overflow-x: hidden;
}

/* ── Layers ──────────────────────────────────────────────────
   The stage wraps sections 1–2. The canvas is STICKY inside it:
   pinned full-screen while the scroll animation plays, released
   exactly when section 2 has fully arrived (stage bottom reaches
   the viewport bottom) — after that the bottle scrolls away with
   the page like normal content. The negative margin lets the
   sections flow over the canvas. Text stays above it (z-index)
   and tappable (pointer-events: none).                          */
.stage {
  position: relative;
}

/* Out-of-flow rail spanning the whole stage: the sticky canvas can
   travel inside it, and the sections below flow normally. */
.canvas-holder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 182svh;
  z-index: 1;
  pointer-events: none;
}

.bottle-canvas {
  position: sticky;
  top: 0;
  height: 100svh;
}

.bottle-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

main {
  position: relative;
  z-index: 2;
}

/* 100svh = small viewport height: stable on iOS while the address
   bar collapses, so the layout never reflows mid-scroll. */
section {
  min-height: 100svh;
  position: relative;
  z-index: 2; /* content always paints above the bottle canvas */
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ── Section 1 — hero ──────────────────────────────────────── */
/* Fixed so the brand + menu stay reachable down the page; visually
   identical at the top, frosted cream once you scroll. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(20px, env(safe-area-inset-top)) 24px 12px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.topbar--scrolled {
  /* Solid translucent instead of backdrop-filter: a blur over scrolling
     content re-samples every frame and is a common scroll-jank source. */
  background: rgba(250, 247, 242, 0.96);
  box-shadow: 0 1px 0 var(--hairline);
}

.brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* The wordmark is a link on every page now, the homepage included — it used to
   be an inert <span> there, so clicking it did nothing. Without this it would
   pick up the browser's default blue and underline the moment it became an <a>.
   `inherit` matters: the same class sits on cream in the bar and on wine-dark
   in the drawer, and must take its colour from whichever it is in. */
a.brand {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.menu-btn {
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 0 12px 12px; /* generous tap target */
  cursor: pointer;
}

.menu-btn span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ET / EN language toggle (visual only for now — translations later) */
.lang {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(31, 29, 26, 0.22);
}

.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-btn);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 6px 11px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.lang__btn.is-active {
  background: var(--wine);
  color: #faf7f2;
}

.hero {
  display: flex;
  flex-direction: column;
  padding-top: 11.5svh;
}

.eyebrow {
  font-size: 0.6875rem; /* §38 rem so it scales with the user text size */
  font-weight: 600;
  letter-spacing: 0.28em; /* §35 small + uppercase: well above --track-micro */
  text-transform: uppercase;
  color: var(--wine);
  margin-bottom: 16px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.375rem, 11vw, 3rem);
  /* §36 leading tightens as size grows; §35 display takes negative tracking */
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  max-width: 8em; /* safety net — the <br> sets the intended break */
}

.hero .sub {
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
  color: var(--muted);
  max-width: 23ch; /* keeps body copy clear of the bottle neck */
}

.cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: 30px;
  padding: 13px 22px;
  color: var(--wine);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  --oc: var(--wine);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}

/* Scroll cue — a bold, bouncing double-chevron in the clear space below the
   copy (left column, clear of the bottle). `.hero` is a flex column, so this
   spacer claims the leftover vertical room and centres the cue in it. The
   bounce is what makes it noticeable; it fades out once the user scrolls, and
   holds a static chevron under reduced-motion. */
.scroll-cue-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 42%; /* reserve the right side for the bottle */
  pointer-events: none;
}

.scroll-cue {
  color: var(--wine);
  animation: cue-bob 1.5s ease-in-out infinite;
}

.scroll-cue svg {
  display: block;
  width: 34px;
  height: 32px;
}

.scroll-cue.is-hidden {
  opacity: 0;
  transition: opacity 0.45s ease;
}

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none;
  }
}

/* ── Section 2 — benefits ──────────────────────────────────── */
.benefits {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 114svh;
}

.benefits-copy {
  width: 55%;
  min-width: 185px;
  transform: translateY(-32svh); /* nudge the block up from dead-centre */
}

.benefits h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.875rem, 8.6vw, 2.25rem);
  line-height: var(--lead-title);
  letter-spacing: var(--track-title);
  max-width: 6.5em;
  margin: 0 0 26px;
}

.benefits ul {
  list-style: none;
}

.benefit-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  position: relative;
}

.benefit-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 18px);
  height: 1px;
  background: var(--hairline);
}

.benefit-row:last-child {
  border-bottom: 0;
}

.benefit-row:last-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 18px);
  height: 1px;
  background: var(--hairline);
}

.benefit-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--wine);
}

.benefit-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.benefit-label {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ── Shared section scaffolding (sections 3+) ──────────────── */
.sec {
  min-height: auto;
  padding-top: 84px;
  padding-bottom: 84px;
}

/* The first section after the stage (now the year finder) pulls up to
   follow the bottle off-screen, removing the dead cream space below the
   benefits section. Tuned to start just as the bottle clears; the stage
   geometry/timing is untouched. */
.sec--lift {
  /* -32svh is derived, not tuned by eye. The stage is 2.14svh and the sticky
     canvas releases with its bottom pinned at 1.82svh, so a lift of exactly
     0.32svh puts this section's top edge ON that line (2.14 − 0.32 = 1.82).

     That matters because the bottle CANNOT extend past the canvas bottom — the
     canvas clips it — so the only way the bottle's base can meet this section
     is for the canvas floor and this top edge to be the same line. The bottle
     then stands on the floor (see POSES in config.js) and the two touch.

     Was -30svh, which left the section 0.02svh below the floor.
     Keep this in step with .canvas-holder's height if that ever changes. */
  margin-top: -32svh;
  padding-top: 40px;
}

.sec--tint {
  background: var(--tint);
}

.sec--deep {
  position: relative;
  overflow: hidden; /* clips the corner-fill circle until it scales up */
  background: var(--bg);
  transition: color 1.4s ease-in-out 0.5s;
}

/* The wine colour floods in from a corner once the section scrolls into
   view: a small dot scales up to cover the whole section — same mechanic
   as a Uiverse-style hover-reveal card, but scroll-triggered and
   direction-aware: entering while scrolling DOWN floods from the top-right
   (the default below); re-entering while scrolling UP floods from the
   bottom-left (site.js adds .fill-from-bl based on the entry edge). The
   moment a section fully leaves the viewport it snap-resets to cream
   (.fill-snap), so coming back always replays the flood. */
.sec--deep::before {
  content: '';
  position: absolute;
  top: -8%;
  right: -8%;
  width: 40px;
  height: 40px;
  background: var(--deep);
  border-radius: 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 2s ease-in-out;
  z-index: -1;
  pointer-events: none;
}

/* Scrolling up? The dot re-anchors to the bottom-left corner before the
   flood starts (corner position isn't transitioned, only the scale is). */
.sec--deep.fill-from-bl::before,
.footer.footer--fill.fill-from-bl::before {
  top: auto;
  right: auto;
  bottom: -8%;
  left: -8%;
}

/* Held for a couple of frames while a section resets off-screen: kills all
   transitions so the un-fill is an instant snap (never a visible rewind),
   and the next entry replays from clean cream. */
.fill-snap,
.fill-snap::before,
.fill-snap * {
  transition: none !important;
}

.sec--deep.is-inview {
  color: #faf7f2;
}

.sec--deep.is-inview::before {
  transform: scale(100);
}

.sec--deep .sec-sub,
.sec--deep .sec-note {
  color: var(--cream-60);
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .sec-sub,
.sec--deep:not(.is-inview) .sec-note {
  color: var(--muted);
}

.eyebrow--gold {
  color: var(--gold);
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .eyebrow--gold,
.footer.footer--fill:not(.is-inview) .eyebrow--gold {
  color: var(--gold-ink);
}

.sec-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.875rem, 8.6vw, 2.375rem);
  line-height: var(--lead-display);
  letter-spacing: var(--track-display);
  max-width: 12em;
  transition: color 1s ease-in-out 0.5s; /* only visible where an ancestor's
    own colour actually changes (the corner-fill sections) — inert elsewhere */
}

.sec-sub {
  margin-top: var(--s-15);
  font-size: 0.9375rem;
  line-height: var(--lead-body);
  letter-spacing: var(--track-body);
  color: var(--muted);
  max-width: 34ch;
}

.sec-note {
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
}

.sec-foot {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

/* ── Pills & chips ─────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 13px 20px;
  font-family: var(--font-btn);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.pill--wine {
  color: var(--wine);
  --oc: var(--wine);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}

.pill--gold {
  color: var(--gold-ink);
  --oc: var(--gold-ink);
  --fill: var(--gold);
  --fill-ink: var(--deep);
}

/* The footer turns dark once the corner-fill triggers — swap to the
   brighter, dark-safe gold for the outline/text once that happens. */
.footer.footer--fill.is-inview .pill--gold {
  color: var(--gold);
  --oc: var(--gold);
}

.pill--ghost {
  color: var(--ink);
  --oc: rgba(31, 29, 26, 0.3);
  --fill: var(--ink);
  --fill-ink: #faf7f2;
}

.pill--ghost-dark {
  color: #faf7f2;
  --oc: var(--cream-30);
  --fill: #faf7f2;
  --fill-ink: var(--deep);
}

.footer.footer--fill:not(.is-inview) .pill--ghost-dark {
  color: var(--ink);
  --oc: rgba(31, 29, 26, 0.3);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}

.pill--sm {
  padding: 9px 13px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* ══ Uiverse-style "fill" buttons — one shared mechanism for every button
   on the site (pills, chips, steppers, the hero CTA, the shop Add button).
   Transparent + outlined at rest; the accent colour floods in from the
   bottom on interaction and the text flips to match. This is mobile-first
   with no mouse, so touch gets the same reveal on :active (a tap) — a
   hover-only effect would never be seen on a phone. Each button only sets
   --oc (outline), --fill (flood colour) and --fill-ink (text once filled);
   the flood itself lives here once. */
.pill,
.cta,
.chip,
.year-step,
.qty__btn,
.shop-card__add {
  font-family: var(--font-btn);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--oc), inset 0 0 0 0 var(--fill);
  transition: color 0.4s ease-out, box-shadow 0.4s ease-out, transform 0.15s ease;
}

@media (hover: hover) {
  .pill:hover,
  .cta:hover,
  .chip:hover,
  .year-step:hover,
  .qty__btn:hover,
  .shop-card__add:hover {
    color: var(--fill-ink);
    box-shadow: inset 0 0 0 1.5px var(--oc), inset 0 -100px 0 0 var(--fill);
  }
}

.pill:active,
.cta:active,
.chip:active,
.year-step:active,
.qty__btn:active,
.shop-card__add:active {
  color: var(--fill-ink);
  box-shadow: inset 0 0 0 1.5px var(--oc), inset 0 -100px 0 0 var(--fill);
  transform: scale(0.94);
}

:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 2px;
}

.sec--deep :focus-visible,
.footer :focus-visible,
.drawer :focus-visible {
  outline-color: var(--gold);
}

.sec--deep:not(.is-inview) :focus-visible,
.footer.footer--fill:not(.is-inview) :focus-visible {
  outline-color: var(--wine);
}

.chip-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 22px -24px 0;
  padding: 4px 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.chip-rail::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 0;
  color: #faf7f2;
  border-radius: 999px;
  padding: 12px 16px;
  font-family: var(--font-btn);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  --oc: var(--cream-30);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}

.sec--deep:not(.is-inview) .chip {
  color: var(--ink);
  --oc: rgba(31, 29, 26, 0.3);
}

/* ── Year finder ───────────────────────────────────────────── */
.year-form {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--shadow-card);
  max-width: 300px;
}

.year-form .pill {
  padding: 10px 15px;
  font-size: 11px;
}

.year-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink);
  height: 40px;
}

.year-step {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: var(--wine);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  --oc: var(--wine);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}

.year-form input::placeholder {
  color: rgba(31, 29, 26, 0.35);
  font-weight: 500;
}

.year-form input:focus {
  outline: none; /* the pill itself shows focus */
}

.year-form:focus-within {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--gold);
}

/* "Or by age" — a second, smaller way into the same search: typing an age
   computes the birth year and runs it through the same findYear() as the
   year field above (site.js keeps them in sync), so the two never disagree. */
.year-or {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-60);
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .year-or {
  color: var(--muted);
}

.age-form {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 18px 5px 18px;
  box-shadow: var(--shadow-card);
}

.age-form input {
  width: 58px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  height: 30px;
}

.age-form input::placeholder {
  color: rgba(31, 29, 26, 0.35);
  font-weight: 500;
}

.age-form input:focus {
  outline: none; /* the pill itself shows focus */
}

.age-form:focus-within {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--gold);
}

.age-form__suffix {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.year-result {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cream-60);
  max-width: 34ch;
  min-height: 1.5em;
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .year-result {
  color: var(--muted);
}

.year-result strong {
  color: var(--gold);
  font-weight: 600;
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .year-result strong {
  color: var(--gold-ink);
}

.year-result a {
  color: #faf7f2;
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .year-result a {
  color: var(--wine);
}

/* The bottles the finder surfaces — the same cards as the cellar, on a
   short scroll row so 2–3 sit comfortably on a phone. */
.year-bottles {
  display: flex;
  gap: 14px;
  margin: 20px -24px 0;
  padding: 4px 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.year-bottles::-webkit-scrollbar {
  display: none;
}

.year-bottles:empty {
  display: none;
}

.year-bottles .bottle-card {
  flex: 0 0 auto;
  width: 135px;
  scroll-snap-align: start;
}

/* In the finder the card is trimmed to the essentials: a shorter photo,
   the age, the name and Enquire — year, region and price are hidden here
   (the cellar cards above keep the full set). */
.year-bottles .bottle-card__img {
  aspect-ratio: 1 / 1;
}

.year-bottles .bottle-card__year,
.year-bottles .bottle-card__region,
.year-bottles .bottle-card__price {
  display: none;
}

.year-bottles .bottle-card__top,
.year-bottles .bottle-card__row {
  justify-content: flex-start;
}

@media (prefers-reduced-motion: no-preference) {
  .year-bottles .bottle-card {
    animation: bottle-pop 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .year-bottles .bottle-card:nth-child(2) {
    animation-delay: 0.06s;
  }
  .year-bottles .bottle-card:nth-child(3) {
    animation-delay: 0.12s;
  }
}

@keyframes bottle-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Keep the finder compact — one small result shouldn't fill the screen. */
#find-year {
  padding-top: 48px;
  padding-bottom: 52px;
}

#find-year .sec-title {
  font-size: clamp(23px, 6.4vw, 28px);
}

#find-year .sec-sub {
  margin-top: 10px;
  max-width: 30ch;
}

#find-year .year-form {
  margin-top: 16px;
}

/* Result text and the bottle sit side by side — uses the width instead of
   stacking, so the section stays short and feels balanced, not empty. */
#find-year .year-out {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
}

#find-year .year-result {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}

#find-year .year-bottles {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  order: -1; /* photo on the left, result text to its right */
}

#find-year .chip-rail {
  margin-top: 20px;
}

/* ── Section 4 — the cellar ────────────────────────────────── */
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  margin: 30px -24px 0;
  padding: 8px 24px 20px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.bottle-card {
  flex: 0 0 46%;
  max-width: 210px;
  scroll-snap-align: start;
  background: var(--surface);
  color: var(--ink); /* own the text colour so the card reads correctly on
                        any section background (e.g. the dark finder) */
  cursor: pointer;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.bottle-card.is-match {
  box-shadow: var(--shadow-card), 0 0 0 2px var(--gold);
}

.bottle-card__img {
  margin: 7px 7px 0;
  border-radius: calc(var(--r-lg) - 8px);
  overflow: hidden;
  /* square-ish frame; the whole bottle shows via contain, with a
     per-card background (set inline) matching each photo's field */
  aspect-ratio: 4 / 5;
  background: var(--tint);
}

.bottle-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.bottle-card__body {
  padding: 12px 13px 14px;
}

.bottle-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}

.bottle-card__year {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.bottle-card__age {
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}

.bottle-card__name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.bottle-card__region {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  min-height: 2.8em; /* keeps the price rows aligned across cards */
}

.bottle-card__row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.bottle-card__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
}

/* ── Section 5 — steps ─────────────────────────────────────── */
.steps {
  list-style: none;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 480px;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.step__num {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-pill);
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--wine);
}

.step h3 {
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 4px;
}

.step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 36ch;
}

/* ── Section 6 — promise / stats ───────────────────────────── */
.stats {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 12px;
}

.stat__num {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .stat__num {
  color: var(--gold-ink);
}

.stat__label {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream-60);
  max-width: 12ch;
  transition: color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .stat__label {
  color: var(--muted);
}

.promise-list {
  list-style: none;
  margin-top: 34px;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
  transition: border-color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .promise-list {
  border-top-color: var(--hairline);
}

.promise-list li {
  padding: 13px 0;
  font-size: 13.5px;
  color: var(--cream-60);
  border-bottom: 1px solid rgba(250, 247, 242, 0.14);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 1s ease-in-out 0.5s, border-color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .promise-list li {
  color: var(--muted);
  border-bottom-color: var(--hairline);
}

.promise-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
  transition: background-color 1s ease-in-out 0.5s;
}

.sec--deep:not(.is-inview) .promise-list li::before {
  background: var(--gold-ink);
}

/* ── Section 7 — instagram ─────────────────────────────────── */
.ig-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.ig-grid a {
  display: block;
  aspect-ratio: 1;
}

.ig-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Section 8 — FAQ ───────────────────────────────────────── */
.sec--faq {
  padding-bottom: 88px;
}

.faq {
  margin-top: 18px;
  border-top: 1px solid var(--hairline);
}

.faq details {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq-mark {
  position: relative;
  flex: 0 0 16px;
  height: 16px;
}

.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: var(--wine);
  transition: transform 0.25s ease;
}

.faq-mark::after {
  transform: rotate(90deg);
}

.faq details[open] .faq-mark::after {
  transform: rotate(0deg);
}

.faq details p {
  padding: 0 24px 18px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Store coming soon ─────────────────────────────────────── */
.store-band {
  background: var(--tint);
  padding: 64px 24px;
  text-align: center;
}

.store-band__inner {
  max-width: 440px;
  margin: 0 auto;
}

.store-band__tag {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 14px;
}

.store-band__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 7.5vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-top: 16px;
}

.store-band__text {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  background: var(--deep);
  color: #faf7f2;
  padding: 80px max(24px, env(safe-area-inset-right)) 40px
    max(24px, env(safe-area-inset-left));
}

/* footer--fill is the homepage footer only (the shop/product footers stay
   plain, always-dark) — same corner-fill mechanic as .sec--deep above. */
.footer.footer--fill {
  position: relative;
  z-index: 2; /* establishes its own stacking context — without this the
    ::before's z-index:-1 escapes to <main>'s context instead of just
    sitting behind the footer's own text, the way section's global
    z-index:2 already does for .sec--deep */
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  transition: color 1.4s ease-in-out 0.5s;
}

.footer.footer--fill::before {
  content: '';
  position: absolute;
  top: -8%;
  right: -8%;
  width: 40px;
  height: 40px;
  background: var(--deep);
  border-radius: 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 2s ease-in-out;
  z-index: -1;
  pointer-events: none;
}

.footer.footer--fill.is-inview {
  color: #faf7f2;
}

.footer.footer--fill.is-inview::before {
  transform: scale(100);
}

.footer .sec-sub {
  color: var(--cream-60);
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .sec-sub {
  color: var(--muted);
}

.footer__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__mail {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--cream-60);
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__mail {
  color: var(--muted);
}

.footer__mail a {
  color: #faf7f2;
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__mail a {
  color: var(--wine);
}

.footer__bottom {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
  transition: border-color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__bottom {
  border-top-color: var(--hairline);
}

.footer__brand {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: color 1s ease-in-out 0.5s;
}

.footer__line {
  margin-top: 8px;
  font-size: 13px;
  color: var(--cream-60);
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__line {
  color: var(--muted);
}

.footer__links {
  margin-top: 16px;
  font-size: 13px;
  color: var(--cream-60);
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__links {
  color: var(--muted);
}

.footer__links a {
  color: #faf7f2;
  text-decoration: none;
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__links a {
  color: var(--wine);
}

.footer__links a:hover {
  text-decoration: underline;
}

.footer__legal {
  margin-top: 18px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(250, 247, 242, 0.45);
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__legal {
  color: rgba(31, 29, 26, 0.45);
}

.footer__copy {
  margin-top: 18px;
  font-size: 11.5px;
  color: rgba(250, 247, 242, 0.45);
  transition: color 1s ease-in-out 0.5s;
}

.footer.footer--fill:not(.is-inview) .footer__copy {
  color: rgba(31, 29, 26, 0.45);
}

/* ── Menu drawer (right-side panel) ────────────────────────── */
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(20, 8, 12, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.menu-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(80vw, 320px);
  z-index: 60;
  background: var(--deep);
  color: #faf7f2;
  display: flex;
  flex-direction: column;
  padding: max(20px, env(safe-area-inset-top)) 26px
    max(24px, env(safe-area-inset-bottom));
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s ease;
  box-shadow: -16px 0 48px rgba(20, 8, 12, 0.4);
  overflow-y: auto;
}

.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-close {
  background: none;
  border: 0;
  position: relative;
  width: 36px;
  height: 36px;
  margin-right: -8px;
  cursor: pointer;
}

.menu-close span {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 20px;
  height: 1.5px;
  background: #faf7f2;
}

.menu-close span:first-child {
  transform: rotate(45deg);
}

.menu-close span:last-child {
  transform: rotate(-45deg);
}

.drawer__links {
  list-style: none;
  margin-top: 7svh;
}

.drawer__links a {
  display: block;
  padding: 11px 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  color: #faf7f2;
  text-decoration: none;
}

.lang--drawer {
  align-self: flex-start;
  margin-top: 28px;
  box-shadow: inset 0 0 0 1px rgba(250, 247, 242, 0.25);
}

.lang--drawer .lang__btn {
  color: rgba(250, 247, 242, 0.7);
  padding: 8px 14px;
  font-size: 12px;
}

.lang--drawer .lang__btn.is-active {
  background: var(--gold);
  color: var(--deep);
}

.drawer__note {
  margin-top: auto;
  padding-top: 28px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(250, 247, 242, 0.45);
}

/* ═══════════════════════════════════════════════════════════════
   STORE — shop / product / cart (added for the e-commerce build)
   ═══════════════════════════════════════════════════════════════ */
.page {
  min-height: 100vh;
}

/* These pages use semantic <section>s, which must NOT inherit the site's
   global `section { min-height: 100svh }` (that would leave huge gaps). */
.shop-head,
.shop-grid,
.pd-panel,
.pd-info {
  min-height: auto;
}

/* Solid top bar for the plain pages (shop) */
.topbar--solid {
  position: sticky;
  background: var(--bg);
  box-shadow: 0 1px 0 var(--hairline);
  padding-top: max(14px, env(safe-area-inset-top));
}
.topbar--solid .brand {
  text-decoration: none;
  color: var(--ink);
}
.topbar__link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
}

/* Star rating (shared) */
.stars {
  color: var(--gold-ink);
  letter-spacing: 2px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.pd-info .stars {
  color: var(--gold-ink);
}

/* ── Cart button + badge ─────────────────────────────────────── */
.cart-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.cart-btn svg {
  width: 22px;
  height: 22px;
}
.cart-btn--float {
  position: fixed;
  right: 16px;
  top: max(14px, env(safe-area-inset-top));
  z-index: 45;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
}
.cart-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: none;
  place-items: center;
  background: var(--wine);
  color: #faf7f2;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
}
.cart-count.is-visible {
  display: grid;
}
.cart-count.bump {
  animation: cart-bump 0.35s ease;
}
@keyframes cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* ── Shop / catalogue ────────────────────────────────────────── */
.shop {
  padding: 16px 0 60px;
}
.shop-head {
  text-align: center;
  padding: 22px 24px 4px;
}
.shop-head .eyebrow {
  color: var(--gold-ink);
}
.shop-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.shop-sub {
  margin: 12px auto 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.shop-tabs {
  display: flex;
  gap: 2px;
  margin: 22px 0 2px;
  padding: 0 20px 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-tabs::-webkit-scrollbar {
  display: none;
}
.shop-tab {
  flex: 0 0 auto;
  position: relative;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-btn);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 8px 12px;
  transition: color 0.2s ease;
}
.shop-tab::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-ink);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.shop-tab.is-active {
  color: var(--wine);
}
.shop-tab.is-active::after {
  transform: scaleX(1);
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding: 14px 24px 0;
}
.shop-count {
  text-align: center;
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: card-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (hover: hover) {
  .shop-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card), 0 16px 34px rgba(59, 10, 20, 0.15);
  }
  .shop-card:hover .shop-card__media img {
    transform: scale(1.06);
  }
}
.shop-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  margin: 7px 7px 0;
  border-radius: calc(var(--r-lg) - 8px);
  overflow: hidden;
}
.shop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  /* Was a gold gradient (#d8b44a → #a9821c) — the most orange thing on the
     site. The HUE is gone; the DEPTH is not. Flattening it to a solid colour
     threw away the sheen too, which is what made the classification read like
     a pressed seal rather than a flat sticker.
     Same 135° light direction as the original, in wine. */
  background: linear-gradient(135deg, var(--wine-lift), var(--wine-deep));
  color: #faf7f2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  /* Real classifications run long — "1er Grand Cru Classé", "Cru Bourgeois
     Supérieur". Without a ceiling the pill grew past the left edge of the
     card. Wraps inside the card instead; the radius softens on two lines. */
  max-width: calc(100% - 16px);
  line-height: 1.3;
  text-align: center;
  border-radius: 12px;
}
.shop-card__body {
  padding: 11px 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.shop-card__producer {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.shop-card__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.12;
}
.shop-card__meta {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}
.shop-card .stars {
  margin-top: 3px;
  font-size: 12px;
}
.shop-card__row {
  margin-top: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.shop-card__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
}
.shop-card__add {
  border: 0;
  cursor: pointer;
  color: var(--wine);
  font-family: var(--font-btn);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  --oc: var(--wine);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}
.shop-card__add.added,
.pd-add.added {
  animation: added-pulse 0.55s ease;
}
@keyframes added-pulse {
  0%, 100% {
    color: var(--oc);
    box-shadow: inset 0 0 0 1.5px var(--oc), inset 0 0 0 0 var(--fill);
    transform: scale(1);
  }
  40% {
    color: #faf7f2;
    box-shadow: inset 0 0 0 1.5px var(--positive), inset 0 -100px 0 0 var(--positive);
    transform: scale(1.06);
  }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ── Product detail ──────────────────────────────────────────── */
.page--pd {
  background: var(--bg);
  padding-bottom: 96px;
}
.pd-panel {
  position: relative;
  overflow: hidden;
  color: #faf7f2;
  background: linear-gradient(160deg, #3a0f1b 0%, var(--deep) 55%, #1c0710 100%);
  border-radius: 0 0 34px 34px;
  padding: max(14px, env(safe-area-inset-top)) 22px 34px;
}
.pd-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-bar__title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-60);
}
.pd-back {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -8px;
  color: #faf7f2;
  text-decoration: none;
}
.pd-back svg {
  width: 22px;
  height: 22px;
}
.pd-bar .cart-btn {
  color: #faf7f2;
}
.pd-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.pd-hero__glow {
  position: absolute;
  left: -14%;
  top: 6%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.42), transparent 66%);
  z-index: -1;
}
.pd-hero__img {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
  animation: pd-float 6s ease-in-out infinite;
}
.pd-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes pd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.pd-specs {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 18px;
}
.pd-specs::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  border-left: 1px dashed rgba(250, 247, 242, 0.35);
}
.pd-specs__k {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.pd-specs__v {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  font-weight: 500;
}
.pd-info {
  padding: 22px 24px 10px;
}
.pd-rating {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pd-reviews {
  font-size: 12px;
  color: var(--muted);
}
.pd-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}
.pd-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.pd-fav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
}
.pd-fav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--wine);
  stroke-width: 1.6;
  transition: fill 0.2s ease;
}
.pd-fav.is-fav svg {
  fill: var(--wine);
}
.pd-fav.pop {
  animation: fav-pop 0.4s ease;
}
@keyframes fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.pd-region {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.pd-price {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 30px;
  color: var(--wine);
}
.pd-rule {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 18px 0;
}
.pd-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.pd-assure {
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pd-assure li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: var(--muted);
}
.pd-assure li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
}
.pd-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  background: rgba(250, 247, 242, 0.98);
  box-shadow: 0 -1px 0 var(--hairline);
}
.pd-buybar__price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.pd-buybar__price span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pd-buybar__price strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
}
.pd-add {
  flex: 1;
}

/* ── Cart drawer ─────────────────────────────────────────────── */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(20, 8, 12, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}
.cart-scrim.is-open {
  opacity: 1;
  visibility: visible;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  height: 100%;
  width: min(90vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.32s ease;
  box-shadow: -16px 0 48px rgba(20, 8, 12, 0.34);
}
.cart-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 20px 14px;
  border-bottom: 1px solid var(--hairline);
}
.cart-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
}
.cart-close {
  position: relative;
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
}
.cart-close span {
  position: absolute;
  top: 50%;
  left: 7px;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
}
.cart-close span:first-child { transform: rotate(45deg); }
.cart-close span:last-child { transform: rotate(-45deg); }
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 20px;
}
.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.cart-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
  animation: card-in 0.3s ease both;
}
.cart-item__img {
  flex: 0 0 64px;
  width: 64px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
}
.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cart-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cart-item__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
}
.cart-item__price {
  font-size: 14px;
  font-weight: 600;
  color: var(--wine);
}
.qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.qty__btn {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--wine);
  --oc: var(--wine);
  --fill: var(--wine);
  --fill-ink: #faf7f2;
}
.qty__n {
  min-width: 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}
.cart-item__rm {
  margin-left: auto;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-btn);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: underline;
}
.cart-foot {
  padding: 16px 20px max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  background: var(--surface);
}
.cart-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cart-total span {
  font-size: 13px;
  color: var(--muted);
}
.cart-total strong {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
}
.cart-checkout {
  width: 100%;
}
.cart-note {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}
.cart-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-btn);
  font-size: 12px;
  color: var(--muted);
}
.checkout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0;
}
.checkout__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.checkout__row span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.checkout__row input {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
}
.checkout__row input:focus {
  outline: none;
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.2);
}
.checkout__gift {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
}
.cart-done {
  text-align: center;
  padding: 44px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cart-done__mark {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--positive);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 30px;
  animation: fav-pop 0.5s ease;
}
.cart-done h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
}
.cart-done p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30ch;
}
.cart-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--deep);
  color: #faf7f2;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(20, 8, 12, 0.4);
  font-size: 13px;
  max-width: min(90vw, 360px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cart-toast.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.cart-toast strong {
  color: var(--gold);
  font-weight: 600;
}
.cart-toast__view {
  border: 0;
  background: none;
  color: #faf7f2;
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--font-btn);
  font-size: 13px;
  white-space: nowrap;
}
.footer--slim {
  text-align: center;
  padding: 40px 24px max(30px, env(safe-area-inset-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .shop-card,
  .cart-item,
  .pd-hero__img,
  .cart-done__mark {
    animation: none;
  }

  /* Corner-fill sections: JS adds .is-inview immediately for these (see
     site.js), so just make sure nothing tries to interpolate on the way. */
  .sec--deep,
  .sec--deep::before,
  .sec--deep .sec-title,
  .sec--deep .sec-sub,
  .sec--deep .sec-note,
  .sec--deep .eyebrow--gold,
  .sec--deep .chip,
  .sec--deep .year-result,
  .sec--deep .year-result strong,
  .sec--deep .year-result a,
  .sec--deep .stat__num,
  .sec--deep .stat__label,
  .sec--deep .promise-list,
  .sec--deep .promise-list li,
  .sec--deep .promise-list li::before,
  .sec--deep :focus-visible,
  .footer.footer--fill,
  .footer.footer--fill::before,
  .footer.footer--fill .sec-title,
  .footer.footer--fill .footer__brand,
  .footer.footer--fill .sec-sub,
  .footer.footer--fill .eyebrow--gold,
  .footer.footer--fill .pill--ghost-dark,
  .footer.footer--fill .footer__mail,
  .footer.footer--fill .footer__mail a,
  .footer.footer--fill .footer__bottom,
  .footer.footer--fill .footer__line,
  .footer.footer--fill .footer__links,
  .footer.footer--fill .footer__links a,
  .footer.footer--fill .footer__legal,
  .footer.footer--fill .footer__copy,
  .footer.footer--fill :focus-visible {
    transition: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   ADDED 2026-08-12 — SEO/a11y remediation pass.

   Two rules only, both cleared with Rocco before touching this file
   (it is the frozen mobile design). Proven with a 375px layout
   fingerprint diff across index/shop/product — see
   docs/SEO-AUDIT-2026-08-12.md §8 Phase 0.
   ───────────────────────────────────────────────────────────── */

/* 1. Screen-reader-only utility.
      A brand-new class name — grepped and confirmed to appear nowhere in
      the CSS, HTML or JS before this was added — so it cannot alter the
      layout of any existing element. It exists so a heading can be
      restored to the document outline without being drawn on the page. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 2. THE YEAR-FINDER MOBILE DEFECT.
      .year-out is a flex ROW. .year-bottles is flex: 0 0 auto, so a
      multi-bottle year measures 880px inside a 375px viewport and pushes
      .year-result to x = 922, width 0 — the sentence "1975 — 6 bottles in
      the cellar, 51 years old." was invisible on a phone for 26 of the 40
      vintages, while still being announced through its aria-live region.
      Stacking is also how the desktop layer already renders this block.

      Scoped to the mobile case on purpose: desktop.css sets its own
      .year-out rules inside @media (min-width: 960px), which load after
      this file and continue to win. */
@media (max-width: 959px) {
  #find-year .year-out {
    flex-direction: column;
    align-items: flex-start;
  }
  #find-year .year-bottles {
    order: 0;
    max-width: 100%;
  }
}