/* ============================================================
   DETAIL PAGE REDESIGN — v102
   Three-page snap-scroll detail: Hero / Facts / Story.
   Phone-first (390px). Desktop override at bottom.
   Uses only CSS vars from tokens.css — no hardcoded colors
   except where final.html uses them in SVG-level decorations.
   ============================================================ */

/* ── Page-indicator dots (right edge) ──────────────────────── */
.detail-page-dots {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: none;
}
.detail-page-dots .dp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(242, 237, 228, 0.18);
  transition: height 150ms ease, border-radius 150ms ease, background 150ms ease;
}
.detail-page-dots .dp-dot.active {
  background: var(--gold, var(--accent));
  height: 12px;
  border-radius: 3px;
}
/* Hide dots on desktop — unnecessary with the 2-col layout */
@media (min-width: 900px) { .detail-page-dots { display: none; } }

/* Right-column wrapper (facts + story). On mobile it must NOT generate a box,
   so the cards stay direct snap children of .cards — display:contents does
   exactly that. Desktop turns it into the scrolling right column. */
.detail-right { display: contents; }

/* Desktop-only F1 plate. Built unconditionally in product-detail.js but kept
   display:none on PHONE so it never paints or lays out below 900px — the phone
   DOM/CSS behaviour is byte-identical to shipped v105. Shown only inside the
   @media(min-width:900px) block at the bottom of this file (where the 3 phone
   cards are hidden). display:none (not visibility) = zero layout cost AND the
   F1 `.fplate { position:fixed }` can never overlay the phone snap cards. */
.detail-desktop { display: none; }

/* ── Hero card ─────────────────────────────────────────────── */
/* Overrides components.css .card-hero to match final.html:
   full-bleed photo, gradient to near-black, content at bottom. */
.card-hero {
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: calc(var(--safe-bottom, 0px) + 36px);
  padding-left: 22px;
  padding-right: 22px;
}
.card-hero .hero-image {
  position: absolute;
  inset: 0;
  /* phone-detail-3: resting brand fill behind the hero photo. The image is set
     via JS after resolveImage() resolves, so before it loads (or if it 404s)
     this area would otherwise flash whatever is behind it. --bg (#0a0a0a, the
     brand near-black the ::after gradient already fades into) keeps that gap on
     palette — no white/blank flash. Once the cover image paints it fully hides
     this fill, so there is no visual change after load. */
  background-color: var(--bg);
  background-size: cover;
  background-position: center top;
}
.card-hero .hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 15%, rgba(0,0,0,0.96) 88%);
}
.card-hero .hero-content {
  position: relative;
  z-index: 1;
  padding: 0;
}
.card-hero .cat-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
/* Category pill: transparent bg, fg border — matches final.html .cat-pill */
.card-hero .cat-pill {
  font-size: var(--text-xs); /* scale: 11px caption rung */
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(242, 237, 228, 0.4);
  color: var(--fg);
  background: transparent;
}
/* Stock chip on hero: no background color fill — icon style only */
.card-hero .stock-chip {
  font-size: var(--text-2xs); /* scale: 10px micro-badge rung */
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(242, 237, 228, 0.2);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
}
.card-hero .card-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: var(--text-3xl); /* scale: 28px section-hero rung */
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.card-hero .hero-loc {
  font-size: var(--text-lg); /* scale: 15px emphasis-body rung */
  color: rgba(242, 237, 228, 0.62);
  margin: 0;
  letter-spacing: 0;
  font-weight: 400;
}
.card-hero .hero-loc strong {
  color: var(--fg);
  font-weight: 800;
}
/* Scroll cue */
.card-hero .scroll-hint {
  margin-top: 14px;
  font-size: var(--text-2xs); /* scale: 10px micro-badge rung */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.32);
}

/* ════════════════════════════════════════════════════════════════════════════
   FACTS card (card-photostage) — PHONE page 3 = OPTION 3 "GOLD STANDARD"
   ----------------------------------------------------------------------------
   Price-forward plate. Five stacked flex regions inside .photostage-content;
   only the .plate (map) is the elastic spring (flex:1 1 auto) so it absorbs all
   slack — NO scroll AND no dead gap at 375x667 / 390x844 / 430x932. Every other
   region is flex:0 0 auto.
     1. .eyebrow   "THE SPIRIT" / distiller byline + gold rule
     2. .proof-bar BIG gold price | ABV  (or ABV-hero when price is null)
     3. .notes     gold-tinted Tasting Notes strip
     4. .plate     framed true-scale country map + caption rail  (THE SPRING)
     5. .ledger    Distiller / Region / Category — CENTERED, SECTIONED OFF,
                   pulled up off the bottom edge (owner refinements)
   ALL rules are BASE selectors scoped under .card-photostage, ABOVE the
   @media(min-width:900px) desktop F1 block — desktop F1 (.fplate/.f1-*) and the
   phone HERO/STORY cards are untouched. Serif = Georgia (the app's self-hosted
   serif; no remote font). Palette --gold #c49840 / --fg #f2ede4 / --bg #0a0a0a.
   ════════════════════════════════════════════════════════════════════════════ */
.card-photostage {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  padding: 0;        /* no base-card padding — .photostage-content tiles the card */
  background: var(--bg, #0a0a0a);   /* flat near-black, matches the rest of the app */
}
/* Category-backdrop layer removed 2026-06-15 (Devin): the facts card now uses
   the flat app background (var(--bg) on .card-photostage) like every other
   screen, instead of a filtered category silhouette + scrim overlays. */
/* The flex column. gap + padding from page3-3 (clamp on vw); every child
   min-height:0 so the elastic .plate can shrink. The bottom safe-area guard +
   pad pulls region 5 (.ledger) up off the very bottom edge (owner refinement). */
.photostage-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: clamp(8px, 2vw, 14px);
  padding: calc(var(--safe-top, 0px) + clamp(12px, 3.4vw, 18px))
           clamp(12px, 3.4vw, 18px)
           calc(var(--safe-bottom, 0px) + clamp(14px, 3.4vw, 18px));
}
.photostage-content > * { min-height: 0; }

/* ── 1. EYEBROW — "THE SPIRIT" + distiller byline, gold rule under ──────────── */
.card-photostage .eyebrow {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: clamp(7px, 1.8vw, 11px);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--gold, #c49840) 0%, rgba(196,152,64,0.18) 70%, transparent 100%) 1;
}
.card-photostage .eyebrow .kicker {
  font-size: clamp(9.5px, 2.7vw, 11.5px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold, #c49840);
  font-weight: 600;
  white-space: nowrap;
}
.card-photostage .eyebrow .maker {
  font-size: clamp(9.5px, 2.7vw, 11.5px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 237, 228, 0.55);
  font-weight: 500;
  text-align: right;
  /* Long distiller names ellipsis-guard so the eyebrow stays one tidy row. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── 2. PRICE-HERO BAR — big gold price | ABV  (or ABV-hero) ─────────────────── */
.card-photostage .proof-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(196, 152, 64, 0.45);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(196,152,64,0.07) 0%, rgba(196,152,64,0.02) 100%);
  overflow: hidden;
}
.card-photostage .proof-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(12px, 3.4vw, 18px) clamp(8px, 2.4vw, 14px);
  min-width: 0;
}
.card-photostage .cell-price {
  flex: 0 0 62%;
  border-right: 1px solid rgba(196, 152, 64, 0.45);
}
.card-photostage .cell-abv {
  flex: 1 1 38%;
}
/* price-only OR abv-only → single full-width cell, no divider, centred */
.card-photostage .proof-bar.price-hero .cell-price,
.card-photostage .proof-bar.abv-hero .cell-price {
  flex: 1 1 100%;
  border-right: none;
}
.card-photostage .price-fig {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(46px, 15vw, 62px);
  line-height: 1;
  color: var(--gold, #c49840);
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.card-photostage .price-fig .sym {
  font-size: 0.6em;
  vertical-align: baseline;
  position: relative;
  top: -0.16em;
  margin-right: 0.02em;
}
/* ABV-hero "%" — small raised glyph beside the big gold number */
.card-photostage .price-fig .pct {
  font-size: 0.42em;
  vertical-align: baseline;
  position: relative;
  top: -0.9em;
  margin-left: 0.04em;
  color: rgba(242, 237, 228, 0.7);
}
.card-photostage .abv-fig {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(28px, 9vw, 36px);
  line-height: 1;
  color: var(--fg, #f2ede4);
  white-space: nowrap;
}
.card-photostage .cap {
  font-size: clamp(9px, 2.6vw, 11px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #c49840);
  font-weight: 600;
  margin-top: clamp(5px, 1.4vw, 8px);
}
.card-photostage .cell-abv .cap { color: rgba(242, 237, 228, 0.55); }

/* ── 3. TASTING NOTES ───────────────────────────────────────────────────────── */
.card-photostage .notes {
  flex: 0 0 auto;
  border: 1px solid rgba(196, 152, 64, 0.18);
  border-radius: 12px;
  background: rgba(196, 152, 64, 0.045);
  padding: clamp(10px, 2.8vw, 14px) clamp(13px, 3.6vw, 17px);
}
.card-photostage .notes .cap {
  margin-top: 0;
  margin-bottom: clamp(4px, 1.2vw, 7px);
  display: block;
  color: var(--gold, #c49840);
}
.card-photostage .notes p {
  margin: 0;
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.35;
  color: var(--fg, #f2ede4);
  /* Long tasting notes (six-and-twenty, 135ch) clamp so they can never push the
     elastic plate off-screen. Cut lands on a line, never mid-glyph. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ── 4. MAP PLATE — the ELASTIC SPRING (flex:1) ─────────────────────────────── */
.card-photostage .plate {
  flex: 1 1 auto;
  position: relative;
  border: 1px solid rgba(196, 152, 64, 0.45);
  border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 30%, #100f0d 0%, #0a0a0a 70%, #060606 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.card-photostage .plate-stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
/* TRUE-SCALE: absolute-inset svg, meet + non-scaling pin strokes — shrinking the
   slot only letterboxes the country (never distorts). */
.card-photostage .plate-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Gold pin/label classes (shared shape with the F1 plate; scoped here so they
   never leak). The map outline stroke is baked #f2ede4 in the SVG file. */
.card-photostage .mx-dot-ring  { fill: none; stroke: var(--gold, #c49840); stroke-width: 1.2; opacity: 0.6; vector-effect: non-scaling-stroke; }
.card-photostage .mx-dot-ring2 { fill: none; stroke: var(--gold, #c49840); stroke-width: 1;   opacity: 0.3; vector-effect: non-scaling-stroke; }
.card-photostage .mx-dot       { fill: var(--gold, #c49840); }
.card-photostage .mx-leader    { stroke: var(--gold, #c49840); stroke-width: 1; opacity: 0.7; vector-effect: non-scaling-stroke; }
.card-photostage .mx-label     { fill: var(--gold, #c49840); font-family: "Georgia","Times New Roman",serif; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
/* corner brackets hug the FRAME, not the map */
.card-photostage .plate-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold, #c49840);
  opacity: 0.85;
  pointer-events: none;
}
.card-photostage .plate-bracket.tl { top: 8px; left: 8px;  border-right: none; border-bottom: none; }
.card-photostage .plate-bracket.tr { top: 8px; right: 8px; border-left: none;  border-bottom: none; }
.card-photostage .plate-bracket.bl { bottom: 8px; left: 8px;  border-right: none; border-top: none; }
.card-photostage .plate-bracket.br { bottom: 8px; right: 8px; border-left: none;  border-top: none; }
.card-photostage .plate-caption {
  flex: 0 0 auto;
  border-top: 1px solid rgba(196, 152, 64, 0.45);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  padding: clamp(6px, 1.7vw, 9px) 0;
  text-align: center;
}
.card-photostage .plate-caption span {
  font-size: clamp(8.5px, 2.5vw, 10.5px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold, #c49840);
  font-weight: 600;
}

/* ── 5. DETAILS LEDGER — CENTERED, SECTIONED OFF, pulled up (owner refinements) ─ */
.card-photostage .ledger {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  /* SECTION OFF: same bordered/radiused treatment as .notes / .proof-bar so it
     reads as a self-contained uniform block, not bottom-stuck loose rows. */
  border: 1px solid rgba(196, 152, 64, 0.18);
  border-radius: 12px;
  background: rgba(196, 152, 64, 0.03);
  padding: clamp(4px, 1.4vw, 8px) clamp(12px, 3.4vw, 16px);
}
.card-photostage .ledger .row {
  display: flex;
  align-items: baseline;
  /* LEFT-ALIGNED 2 columns (Devin, 2026-06-15): fixed-width label column + value
     column, both flush left, so Distiller/Region/Category first letters stack
     and the values line up under each other. */
  justify-content: flex-start;
  gap: 8px;
  padding: clamp(6px, 1.7vw, 9px) 2px;
  border-bottom: 1px solid rgba(196, 152, 64, 0.14);
}
.card-photostage .ledger .row:last-child { border-bottom: none; }
.card-photostage .ledger .k {
  flex: 0 0 auto;
  width: clamp(72px, 24vw, 96px);   /* fixed label column so all values align */
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, #c49840);
  font-weight: 600;
  white-space: nowrap;
}
.card-photostage .ledger .v {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(13px, 3.6vw, 16px);
  color: var(--fg, #f2ede4);
  text-align: left;
  line-height: 1.15;
  /* Long region/origin (caffo-maraschino) wraps to 2 lines, never overflows. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
}

/* NO-MAP samples (goslings Bermuda; ten-to-one Multi-Island Blend → resolveMap
   null): the JS omits the .plate, so nothing has flex:1. Make the .ledger the
   spring instead — grow it and distribute its rows so the card fills 100dvh with
   no dead bottom void (mirrors the old .spec-grid-wrap.no-map trick). Still leads
   with the price/ABV hero + notes + a full sectioned ledger. */
.photostage-content.no-map .ledger {
  flex: 1 1 auto;
  justify-content: space-evenly;
}

/* ── Story card ─────────────────────────────────────────────── */
.card-story-v2 {
  background: var(--bg);
  /* One fixed viewport, no internal scroll — the only scroll is page snap. */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  /* override base .card padding for this specific layout */
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}
.story-v2-header {
  padding: 20px 22px 16px;
  padding-top: calc(var(--safe-top, 0px) + 20px);
  border-bottom: 1px solid rgba(196, 152, 64, 0.30);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 5px;
  flex-shrink: 0;
}
.story-v2-header-title {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold, var(--accent));
}
.story-v2-header-name {
  font-size: var(--text-3xs); /* scale: 9px tiniest-caption rung */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.story-v2-scroll {
  flex: 1;
  min-height: 0;
  /* No nested scroller — content is sized to fit one screen and cropped
     cleanly. Flex column so the Fun Fact (margin-top:auto) pins to the bottom
     as a whole, intentional footer and the prose above absorbs the squeeze.
     KEEP the safe-area bottom guard so the home indicator never clips. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bottom, 0px) + 36px);
}
/* SHORT stories with NO Fun Fact (e.g. edradour): nothing is pinned to the
   card floor via margin-top:auto, so the prose top-anchors and leaves a tall
   blank gap at the bottom (the underfill). space-evenly distributes the lead +
   sections through the WHOLE viewport with equal gaps above, between, and below
   — so the content FILLS the card with consistent editorial rhythm instead of a
   single dead void at the bottom. (When a funFact exists this class is absent
   and margin-top:auto still pins it as the footer.) */
.story-v2-scroll-fill {
  justify-content: space-evenly;
}
/* Lead pull quote — clamps tighter on long stories so the body fits one screen */
.story-lead {
  padding: clamp(14px, 2.4vh, 22px) 22px 0;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.55;
  font-style: italic;
  font-weight: 400;
  color: var(--fg);
}
/* Story sections — CENTERED bold header, gold underline rule, NO numbers */
.story-section {
  padding: clamp(14px, 2.4vh, 22px) 22px 0;
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
}
.section-title-text {
  font-size: var(--text-base); /* scale: 14px base-UI rung */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant: small-caps;
  font-weight: 800;
  color: var(--fg);
  text-align: center;
}
.section-body {
  font-size: var(--text-base); /* scale: 14px base-UI rung */
  line-height: 1.6;
  font-weight: 300;
  color: var(--fg-dim);
  /* On long stories the middle prose absorbs the squeeze (the Fun Fact stays
     whole at the bottom). Clamp to keep the cut on a line, never mid-glyph. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
/* Fun fact — pinned to the card floor as a WHOLE, intentional footer.
   margin-top:auto pushes it to the bottom (the prose above absorbs the squeeze
   via .section-body line-clamp), so it never slices mid-line. flex:0 0 auto so
   it keeps its full height. */
.story-funfact {
  flex: 0 0 auto;
  margin: 24px 22px 0;
  margin-top: auto;
  padding: 16px 18px;
  border-left: 2px solid var(--gold, var(--accent));
  background: var(--gold-faint, rgba(196,152,64,0.12));
}
.funfact-eyebrow {
  font-size: var(--text-sm); /* scale: 12px secondary-caption rung */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold, var(--accent));
  font-weight: 800;
  margin-bottom: 8px;
}
.funfact-body {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: var(--text-base); /* scale: 14px base-UI rung */
  line-height: 1.6;
  font-style: italic;
  color: var(--fg-dim);
}

/* ════════════════════════════════════════════════════════════════════════════
   SHORTEST-PHONE TIER — keep the STORY Fun Fact WHOLE on 375x667
   ----------------------------------------------------------------------------
   On the shortest iPhone (375x667) the story content (lead + The Maker + How
   It's Made + Fun Fact) overflows the one-viewport card, so the Fun Fact box
   clips ~50-100px below the fold and reads incomplete. On 390x844 / 430x932
   it already fits perfectly, so this trim is gated to SHORT viewports only.

   SCOPING — this whole block is double-gated `max-width:480px` AND
   `max-height:740px`. The width gate guarantees it can NEVER touch the desktop
   F1 plate (which is `min-width:900px`); a desktop laptop at 1280x720 matches
   max-height:740 but is excluded by max-width:480. So desktop F1 stays byte-
   identical. The trim recovers the ~133px (worst case: fort-hamilton) by
   stepping the prose line-clamp to 4, tightening section/lead padding, shrinking
   the Fun Fact type + padding, and trimming the bottom safe-guard — enough that
   the Fun Fact pins whole to the floor with the squeeze absorbed by the middle
   prose (the v105 model), never sliced mid-line.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) and (max-height: 740px) {
  /* Less air above the lead + each section so the column packs tighter. */
  .story-lead   { padding-top: 9px; line-height: 1.4; }
  .story-section { padding-top: 9px; }
  .section-title-row { margin-bottom: 6px; padding-bottom: 6px; }

  /* Middle prose absorbs the squeeze: clamp to 4 lines on the shortest phone so
     the Fun Fact stays whole. Cut still lands on a line (never mid-glyph). */
  .section-body {
    -webkit-line-clamp: 4;
    line-height: 1.48;
  }

  /* Fun Fact: smaller box + type so it pins whole to the floor. */
  .story-funfact { margin-top: auto; padding: 10px 15px; }
  .funfact-eyebrow { margin-bottom: 5px; }
  .funfact-body { font-size: 13px; line-height: 1.4; }

  /* Reclaim the deep bottom safe-guard (still clears the home indicator). */
  .story-v2-scroll { padding-bottom: calc(var(--safe-bottom, 0px) + 16px); }
}

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP — OPTION F1 "DIVIDER-FORWARD PLATE"  (>= 900px)
   ----------------------------------------------------------------------------
   The owner's final pick, ported from _redesign/pc-options/option-f1.html. ALL
   of these rules are scoped INSIDE @media(min-width:900px) so the phone view
   (shipped v105) is untouched. On desktop the 3 phone snap-cards are hidden and
   the .detail-desktop F1 subtree (built in product-detail.js) is shown.

     • A fixed full-viewport grid — never scrolls, never short-pins.
     • Hero left (bigger bottle, smaller serif title, eyebrow + location).
     • THE SPIRIT facts (ABV | Our Price | Tasting Notes, thin gold dividers,
       NO Proof) over BEHIND THE BOTTLE (Maker / How It's Made / Fun Fact only).
     • Bottom band = framed true-scale MAP plate (gold brackets + caption +
       pin/label) + DETAILS ledger (Distiller / Region / Category only).

   Palette #0a0a0a / #f2ede4 / #c49840. Serif = Georgia (the app's existing
   serif — self-contained, no remote font dependency; replaces F1's Cormorant).
   ════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Hide dots handled above (line 34). */

  /* The detail container stops snap-scrolling and hard-clips — the F1 plate is
     position:fixed and fills the viewport, so there is nothing to scroll. */
  .detail {
    scroll-snap-type: none;
    overflow: hidden;
    touch-action: auto;
    animation: none;
  }
  /* Phantom-scroll lock: with the header hidden, #app(min-height:100dvh) plus
     #main(flex:1) can leave the document body fractionally scrollable behind
     the opaque fixed plate (the ~132px "phantom scroll"). Pin #app to exactly
     the viewport and clip its overflow on the desktop detail route ONLY. Scoped
     to #app[data-view="detail"] so the index/category/settings routes (other
     data-view values) and the phone view (this whole block is inside
     min-width:900px) are untouched. The .fplate is position:fixed, so clipping
     #app never affects it.
     UNIT: 100vh (the stable layout viewport), NOT 100dvh — .detail is
     position:fixed; inset:0 so vh == the container, and dvh (the dynamic/large
     viewport) can resolve TALLER than the layout viewport, leaving #main(flex:1)
     stretched a few px past the visible area = residual phantom scroll. max-height
     hard-clamps #main so it can never inherit a stale taller height. (Same
     vh-over-dvh fix proven for the sticky hero in the v105 detail work.) */
  #app[data-view="detail"] {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  /* Hide the phone snap-cards entirely on desktop; show the F1 subtree. */
  .detail .cards { display: none; }
  .detail-desktop { display: block; }

  /* Back + edit buttons stay fixed in the corners, above the plate. */
  .detail-back { position: fixed; top: 20px; left: 24px; z-index: 60; }
  .detail-edit { position: fixed; top: 20px; right: 24px; z-index: 60; }

  /* ── token system (every value a clamp) — scoped to the desktop plate ────── */
  .fplate {
    --f1-pad:    clamp(13px, 1.4vw, 22px);
    --f1-gap:    clamp(9px, 1.0vw, 16px);
    --f1-stack:  clamp(6px, 0.8vw, 12px);
    --f1-rule:   clamp(8px, 1.0vw, 14px);

    --f1-t-title:   clamp(28px, 2.6vw, 44px);
    --f1-t-big:     clamp(24px, 2.2vw, 40px);
    --f1-t-lead:    clamp(13px, 1.05vw, 17px);
    --f1-t-body:    clamp(11.5px, 0.86vw, 14px);
    --f1-t-eyebrow: clamp(9.5px, 0.74vw, 12px);
    --f1-t-label:   clamp(8.5px, 0.66vw, 11px);

    --f1-hair: rgba(196,152,64,0.22);
    --f1-divider: rgba(196,152,64,0.45);
    --f1-serif: "Georgia", "Times New Roman", serif;
  }

  /* ── STAGE — one fixed full-viewport grid (F1 verbatim geometry) ─────────── */
  .fplate {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--bg, #0a0a0a);
    display: grid;
    grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.46fr);
    grid-template-rows: 1.05fr 1fr clamp(170px, 22vh, 210px);
    grid-template-areas:
      "hero  facts"
      "hero  story"
      "origin origin";
    gap: var(--f1-gap);
    padding: var(--f1-pad);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }

  .fplate .panel {
    position: relative;
    border: 1px solid rgba(196,152,64,0.30);
    border-radius: var(--r-lg, 18px);
    background: linear-gradient(155deg, rgba(16,16,16,0.94) 0%, rgba(10,10,10,0.97) 100%);
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    overflow: hidden;
    min-height: 0;
  }

  .fplate .f1-eyebrow {
    font-size: var(--f1-t-eyebrow);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin: 0;
  }
  .fplate .f1-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
  }
  .fplate .f1-maker {
    font-size: var(--f1-t-label);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-dim, #a0998f);
    white-space: nowrap;
  }
  .fplate .f1-gold-rule {
    flex: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(196,152,64,0.5), transparent);
    margin: var(--f1-stack) 0 var(--f1-rule) 0;
  }

  /* ── HERO (left, rows 1-2) — bigger bottle, smaller title ───────────────── */
  .fplate .f1-hero {
    grid-area: hero;
    display: flex;
    flex-direction: column;
    padding: var(--f1-pad);
    background: radial-gradient(78% 52% at 50% 40%, #1a1a1a 0%, #0c0c0c 70%, #080808 100%);
    border-color: rgba(196,152,64,0.34);
  }
  .fplate .f1-hero-stage {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196,152,64,0.22);
    border-radius: 14px;
    background: radial-gradient(62% 60% at 50% 42%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 62%);
    overflow: hidden;
  }
  .fplate .f1-hero-stage img {
    height: 88%;
    max-width: 94%;
    object-fit: contain;
    filter: drop-shadow(0 26px 36px rgba(0,0,0,0.7));
  }
  .fplate .f1-hero-floor {
    position: absolute;
    left: 18%; right: 18%;
    bottom: 5%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,152,64,0.5), transparent);
  }
  .fplate .f1-hero-caption {
    flex: 0 0 auto;
    text-align: center;
    padding-top: var(--f1-rule);
    border-top: 1px solid var(--f1-hair);
    margin-top: var(--f1-stack);
  }
  .fplate .f1-hero-eyebrow {
    font-size: var(--f1-t-eyebrow);
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin-bottom: clamp(4px, 0.6vw, 9px);
  }
  .fplate .f1-hero-title {
    font-family: var(--f1-serif);
    font-size: var(--f1-t-title);
    line-height: 1.0;
    font-weight: 700;
    color: var(--fg, #f2ede4);
    letter-spacing: -0.01em;
    margin: 0;
  }
  .fplate .f1-hero-loc {
    font-size: var(--f1-t-body);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin-top: clamp(6px, 0.8vw, 12px);
  }

  /* ── THE SPIRIT (top-right) — ABV | Our Price | Tasting Notes ───────────── */
  .fplate .f1-facts {
    grid-area: facts;
    display: flex;
    flex-direction: column;
    padding: var(--f1-pad);
  }
  .fplate .f1-facts-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: auto auto 1fr;   /* ABV | Price | Notes */
    align-items: center;
    column-gap: 0;
  }
  /* When fewer than 3 cells are present, relax the track template so the
     remaining cells distribute cleanly (no empty phantom columns). */
  .fplate .f1-facts-body[data-cells="1"] { grid-template-columns: 1fr; }
  .fplate .f1-facts-body[data-cells="2"] { grid-template-columns: auto 1fr; }
  .fplate .f1-spec-cell { padding: 0 clamp(14px, 1.6vw, 28px); }
  .fplate .f1-spec-cell:first-child { padding-left: 0; }
  .fplate .f1-spec-cell.is-divided {
    border-left: 1px solid var(--f1-divider);   /* the gold vertical divider */
  }
  .fplate .f1-stat .f1-num {
    font-family: var(--f1-serif);
    font-size: var(--f1-t-big);
    line-height: 1;
    color: var(--fg, #f2ede4);
    font-weight: 600;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
  }
  .fplate .f1-stat .f1-num.is-price { color: var(--gold, #c49840); }
  .fplate .f1-stat .f1-num.is-price .f1-cur {
    font-size: 0.62em;
    vertical-align: 0.16em;
    margin-right: 0.02em;
    font-weight: 600;
  }
  .fplate .f1-stat .f1-cap {
    display: block;
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin-top: 5px;
  }
  .fplate .f1-notes-head {
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin-bottom: 6px;
  }
  .fplate .f1-notes-text {
    font-family: var(--f1-serif);
    font-style: italic;
    font-size: var(--f1-t-lead);
    line-height: 1.4;
    color: var(--fg, #f2ede4);
  }

  /* ── BEHIND THE BOTTLE (right, row 2) — Maker / How It's Made + Fun Fact ── */
  .fplate .f1-story {
    grid-area: story;
    display: flex;
    flex-direction: column;
    padding: var(--f1-pad);
    min-height: 0;
  }
  .fplate .f1-story-cols {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.6vw, 28px);
    align-content: start;
    min-height: 0;
  }
  .fplate .f1-story-cols[data-cols="1"] { grid-template-columns: 1fr; }
  .fplate .f1-story-col h4 {
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin: 0 0 6px 0;
  }
  .fplate .f1-story-col p {
    font-size: var(--f1-t-body);
    line-height: 1.42;
    color: var(--fg, #f2ede4);
    margin: 0;
  }
  .fplate .f1-funfact {
    flex: 0 0 auto;
    margin-top: var(--f1-rule);
    border: 1px solid rgba(196,152,64,0.4);
    border-radius: var(--r-md, 12px);
    background: rgba(196,152,64,0.07);
    padding: clamp(9px, 1vw, 15px) clamp(11px, 1.2vw, 18px);
  }
  .fplate .f1-funfact h4 {
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin: 0 0 5px 0;
  }
  .fplate .f1-funfact p {
    font-size: var(--f1-t-body);
    line-height: 1.45;
    color: var(--fg, #f2ede4);
    margin: 0;
  }

  /* ── ORIGIN ROW (full width, capped) — map plate + Details ledger ───────── */
  .fplate .f1-origin {
    grid-area: origin;
    display: grid;
    /* map column clamps toward F1's reference aspect; the SVG's xMidYMid meet
       letterboxes any country that is narrower (e.g. Italy) — never distorts. */
    grid-template-columns: clamp(311px, 41.6vh, 387px) minmax(0, 1fr);
    gap: var(--f1-gap);
    max-height: clamp(170px, 22vh, 210px);
    min-height: 0;
    overflow: hidden;
  }
  /* No-map samples (resolveMap → null): give DETAILS the full row width. */
  .fplate .f1-origin.no-map { grid-template-columns: minmax(0, 1fr); }

  /* framed map plate */
  .fplate .f1-map-plate {
    position: relative;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(155deg, #0d0d0d 0%, #090909 100%);
  }
  .fplate .f1-map-plate svg.f1-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;   /* NO transform anywhere — true-scale, un-stretchable */
  }
  /* pin + label (gold, baked colors — <image href> cannot use currentColor) */
  .fplate .f1-pin-ring   { fill: none; stroke: #c49840; stroke-width: 1.5; opacity: 0.6; vector-effect: non-scaling-stroke; }
  .fplate .f1-pin-ring-2 { fill: none; stroke: #c49840; stroke-width: 1;   opacity: 0.3; vector-effect: non-scaling-stroke; }
  .fplate .f1-pin-dot    { fill: #c49840; }
  .fplate .f1-pin-leader { stroke: #c49840; stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
  .fplate .f1-pin-label  {
    fill: #c49840;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  /* four gold corner brackets — inset 10px */
  .fplate .f1-bracket { position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 1; }
  .fplate .f1-bracket::before, .fplate .f1-bracket::after { content: ""; position: absolute; background: #c49840; opacity: 0.5; }
  .fplate .f1-bracket::before { width: 16px; height: 1px; }
  .fplate .f1-bracket::after  { width: 1px;  height: 16px; }
  .fplate .f1-bracket.tl { top: 10px; left: 10px; }
  .fplate .f1-bracket.tl::before { top: 0; left: 0; }
  .fplate .f1-bracket.tl::after  { top: 0; left: 0; }
  .fplate .f1-bracket.tr { top: 10px; right: 10px; }
  .fplate .f1-bracket.tr::before { top: 0; right: 0; }
  .fplate .f1-bracket.tr::after  { top: 0; right: 0; }
  .fplate .f1-bracket.bl { bottom: 10px; left: 10px; }
  .fplate .f1-bracket.bl::before { bottom: 0; left: 0; }
  .fplate .f1-bracket.bl::after  { bottom: 0; left: 0; }
  .fplate .f1-bracket.br { bottom: 10px; right: 10px; }
  .fplate .f1-bracket.br::before { bottom: 0; right: 0; }
  .fplate .f1-bracket.br::after  { bottom: 0; right: 0; }
  /* caption rail */
  .fplate .f1-map-caption {
    position: absolute;
    left: 10px; right: 10px;
    bottom: 0;
    padding: clamp(4px, 0.6vw, 7px) clamp(6px, 0.8vw, 12px);
    border-top: 1px solid var(--f1-hair);
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    text-align: center;
    background: linear-gradient(0deg, rgba(9,9,9,0.94), rgba(9,9,9,0));
  }

  /* details LEDGER — Distiller / Region / Category ONLY, 3 rows */
  .fplate .f1-spec-block {
    display: flex;
    flex-direction: column;
    padding: var(--f1-pad);
    min-height: 0;
  }
  .fplate .f1-spec-head { flex: 0 0 auto; }
  .fplate .f1-spec-name {
    font-family: var(--f1-serif);
    font-size: clamp(15px, 1.2vw, 20px);
    font-weight: 600;
    color: var(--fg, #f2ede4);
    line-height: 1.05;
    margin: 0;
  }
  .fplate .f1-spec-region {
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    margin-top: 4px;
  }
  .fplate .f1-spec-ledger {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: var(--f1-stack);
    padding-top: var(--f1-stack);
    border-top: 1px solid var(--f1-hair);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .fplate .f1-ledger-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(4px, 0.55vw, 8px) 0;
    border-bottom: 1px solid var(--f1-hair);
  }
  .fplate .f1-ledger-row:last-child { border-bottom: 0; }
  .fplate .f1-ledger-row .k {
    font-size: var(--f1-t-label);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold, #c49840);
    white-space: nowrap;
  }
  .fplate .f1-ledger-row .v {
    font-size: var(--f1-t-body);
    line-height: 1.2;
    color: var(--fg, #f2ede4);
    text-align: right;
  }

  /* ── SHORTEST-VIEWPORT TRIM — laptop heights (<= 920px) ──────────────────
     Trims pad/gap, drops the bottle, shrinks the fixed origin band, gives the
     STORY row a bigger share, and steps the story type + gaps + funfact down so
     .f1-story-cols genuinely fits at 1440x900 and below. Nested INSIDE
     min-width:900px → never touches phone. */
  @media (max-height: 920px) {
    .fplate {
      --f1-pad:   clamp(11px, 1.2vw, 16px);
      --f1-gap:   clamp(8px, 0.9vw, 13px);
      --f1-stack: clamp(5px, 0.6vw, 9px);
      --f1-rule:  clamp(7px, 0.8vw, 11px);
      grid-template-rows: 0.92fr 1fr clamp(150px, 20vh, 188px);
    }
    .fplate .f1-origin { max-height: clamp(150px, 20vh, 188px); }
    .fplate .f1-hero-stage img { height: 80%; }
    .fplate .f1-notes-text     { line-height: 1.3; }
    .fplate .f1-story-col p    { font-size: clamp(11px, 0.82vw, 13px); line-height: 1.32; }
    .fplate .f1-story-col h4   { margin-bottom: 4px; }
    .fplate .f1-story-cols     { gap: clamp(12px, 1.2vw, 20px); }
    .fplate .f1-funfact        { padding: clamp(6px, 0.7vw, 11px) clamp(10px, 1.0vw, 15px); }
    .fplate .f1-funfact p      { line-height: 1.3; }
    .fplate .f1-funfact h4     { margin-bottom: 3px; }
    .fplate .f1-ledger-row     { padding: clamp(3px, 0.4vw, 6px) 0; }
  }

  /* ── EXTRA-SHORT TIER — 1280x720 / 1366x768 (<= 780px) ───────────────────
     The tightest laptops. Cuts the story type/leading + funfact further, gives
     the story row an even larger share, so the columns clear with headroom. */
  @media (max-height: 780px) {
    .fplate {
      --f1-pad:   clamp(9px, 0.95vw, 13px);
      --f1-gap:   clamp(7px, 0.8vw, 11px);
      --f1-stack: clamp(4px, 0.5vw, 7px);
      --f1-rule:  clamp(5px, 0.6vw, 9px);
      grid-template-rows: 0.78fr 1.12fr clamp(152px, 19.5vh, 178px);
    }
    .fplate .f1-origin { max-height: clamp(152px, 19.5vh, 178px); }
    .fplate .f1-hero-stage img { height: 76%; }
    .fplate .f1-story-col p    { font-size: clamp(10px, 0.78vw, 12px); line-height: 1.26; }
    .fplate .f1-story-col h4   { margin-bottom: 3px; }
    .fplate .f1-story-cols     { gap: clamp(9px, 1.0vw, 16px); }
    .fplate .f1-funfact        { margin-top: clamp(5px, 0.6vw, 9px); padding: clamp(5px, 0.55vw, 8px) clamp(8px, 0.85vw, 12px); }
    .fplate .f1-funfact p      { font-size: clamp(10px, 0.78vw, 12px); line-height: 1.24; }
    .fplate .f1-funfact h4     { margin-bottom: 2px; }
    .fplate .f1-notes-text     { font-size: clamp(12px, 0.98vw, 15px); line-height: 1.24; }
    .fplate .f1-notes-head     { margin-bottom: 4px; }
    .fplate .f1-ledger-row     { padding: clamp(2px, 0.3vw, 5px) 0; }
    .fplate .f1-spec-region    { margin-top: 2px; }
    .fplate .f1-spec-ledger    { margin-top: clamp(4px, 0.5vw, 7px); padding-top: clamp(4px, 0.5vw, 7px); }
  }
}