/* ============================================================================
   IBRAHIM Fragrances — Version STRUCTURE
   ---------------------------------------------------------------------------
   versions.css changes the palette and type. This file changes the LAYOUT:
   navigation pattern, hero composition, and how the collection is arranged.
   The three versions are meant to read as three different sites, not as one
   site with three colour schemes.

       V1  The Ledger        vertical left rail · hero index · specimen rows
       V2  Contact Sheet     all five scents at once · no carousel · 2-up grid
       V3  The Vitrine       centred stacked nav · arched frames · offset grid

   Paired with scripts/structure.js, which does the few moves CSS cannot.
   ========================================================================= */


/* ###########################################################################
   V1 — THE LEDGER
   A perfumer's specimen catalogue. Navigation leaves the top edge entirely
   and becomes a fixed vertical rail; the collection stops being a card grid
   and becomes rows in a ledger, scannable down the page.
   ######################################################################## */

@media (min-width: 901px) {
  [data-t="t1"] body { padding-left: 84px; }

  [data-t="t1"] .site-header {
    position: fixed; inset: 0 auto 0 0;
    width: 84px; height: 100vh;
    border-right: 1px solid var(--line); border-bottom: 0;
    background: var(--bg-2);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  [data-t="t1"] .site-header.is-scrolled { background: var(--bg-2); }
  [data-t="t1"] .nav-inner {
    height: 100%; padding: 26px 0;
    display: grid; grid-template-columns: none; grid-template-rows: auto 1fr auto;
    justify-items: center; align-items: center; gap: 18px;
  }
  /* the link list moves into the existing full-screen overlay menu */
  [data-t="t1"] .nav-links { display: none; }
  [data-t="t1"] .menu-toggle { display: inline-flex; order: -1; }
  [data-t="t1"] .nav-left, [data-t="t1"] .nav-right { flex-direction: column; gap: 14px; }

  [data-t="t1"] .nav-brand { flex-direction: column; gap: 18px; }
  [data-t="t1"] .brand-word {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 1.05rem; letter-spacing: 0.44em; padding: 0.44em 0 0;
  }
  [data-t="t1"] .is-scrolled .brand-word { font-size: 1.05rem; }

  /* the rail owns the left edge, so the announcement bar starts after it */
  [data-t="t1"] .announce { position: relative; z-index: 60; }
}

/* --- V1 hero: static frame, type anchored low-left, index down the right ---
   Desktop only. Below 900px main.css stacks the hero into a photo-over-copy
   column, which is already the right answer on a phone; leaving these rules
   unscoped fought that layout and squashed the photo to a 390x260 letterbox
   that cut the top and bottom off the bottle. */
@media (min-width: 901px) {
  [data-t="t1"] .hero-carousel .hero-media { left: 0; }
  /* the scrim colour comes from the theme (--scrim-rgb), so this one rule
     serves V1, V4 and V2's light ledger top without being hard-coded */
  [data-t="t1"] .hero-carousel .hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(var(--scrim-rgb), 0.92) 0%, rgba(var(--scrim-rgb), 0.55) 46%,
        rgba(var(--scrim-rgb), 0.15) 74%, transparent 100%),
      linear-gradient(0deg, rgba(var(--scrim-rgb), 0.95), transparent 52%);
  }
  [data-t="t1"] .hero-carousel { align-items: flex-end; }
  [data-t="t1"] .hero-carousel .hero-inner { padding-bottom: clamp(40px, 7vw, 96px); }
  [data-t="t1"] .hero-carousel .hero-content { max-width: 640px; }
  [data-t="t1"] .hero-controls { display: none; }
}

/* the five fragrances, listed — replaces the dot carousel with a real index */
.v1-index { display: none; }
[data-t="t1"] .v1-index {
  display: block; position: absolute; z-index: 4;
  right: clamp(20px, 4vw, 56px); top: 50%; transform: translateY(-50%);
  width: min(300px, 32vw);
  border-top: 1px solid var(--line-strong);
}
[data-t="t1"] .v1-index-row {
  /* name on its own line with the family beneath — the two ran into each
     other side by side once the longer names were set */
  width: 100%; display: grid; grid-template-columns: 2.4rem 1fr;
  align-items: baseline; column-gap: 12px; row-gap: 4px;
  padding: 14px 0; background: none; border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--faint); text-align: left; cursor: pointer;
  transition: color 0.35s var(--ease), padding 0.35s var(--ease);
}
[data-t="t1"] .v1-index-row:hover { color: var(--ink); padding-left: 8px; }
[data-t="t1"] .v1-index-row[aria-current="true"] { color: var(--ink); }
[data-t="t1"] .v1-index-row[aria-current="true"] .v1-i-rule { width: 26px; }
[data-t="t1"] .v1-i-num {
  font-size: 0.62rem; letter-spacing: 0.12em; color: var(--gold); font-variant-numeric: tabular-nums;
}
[data-t="t1"] .v1-i-name {
  font-size: 0.98rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 300;
}
[data-t="t1"] .v1-i-fam {
  grid-column: 2; font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.72;
}
[data-t="t1"] .v1-i-rule {
  display: block; height: 1px; width: 0; background: var(--gold);
  transition: width 0.45s var(--ease-out); grid-column: 1 / -1;
}
@media (max-width: 900px) { [data-t="t1"] .v1-index { display: none; } }

/* --- V1 collection: ledger rows, not cards ------------------------------- */
@media (min-width: 761px) {
  [data-c="c1"] .product-grid {
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--line-strong);
    counter-reset: ledger;
  }
  [data-c="c1"] .product-card {
    counter-increment: ledger;
    display: grid;
    grid-template-columns: 3.4rem 96px minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center; gap: clamp(14px, 2.4vw, 34px);
    border: 0; border-bottom: 1px solid var(--line);
    padding: 16px 8px; background: transparent;
  }
  [data-c="c1"] .product-card::before {
    content: counter(ledger, decimal-leading-zero);
    font-size: 0.66rem; letter-spacing: 0.14em; color: var(--gold);
    font-variant-numeric: tabular-nums;
  }
  [data-c="c1"] .product-card:hover { background: var(--panel); }
  [data-c="c1"] .pcard-media { aspect-ratio: 3 / 4; border-radius: 0; }
  [data-c="c1"] .pcard-glow { display: none; }
  [data-c="c1"] .pcard-body {
    display: contents;               /* let the row own the columns */
  }
  [data-c="c1"] .pcard-family {
    grid-row: 1; order: 0;
    font-size: 0.58rem; letter-spacing: 0.2em;
  }
  [data-c="c1"] .pcard-name { font-size: 1.05rem; margin: 0; }
  [data-c="c1"] .pcard-desc { color: var(--muted); font-size: 0.82rem; }
  [data-c="c1"] .pcard-meta, [data-c="c1"] .pcard-notes { display: none; }
  [data-c="c1"] .pcard-foot { justify-content: flex-end; }
  [data-c="c1"] .pcard-price { font-size: 1.05rem; }
  [data-c="c1"] .pcard-actions { flex-direction: row; gap: 8px; }
  [data-c="c1"] .pcard-actions .btn { padding: 10px 18px; letter-spacing: 0.14em; }

  /* name + family stack in one column, description in the next */
  [data-c="c1"] .v1-cell-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  [data-c="c1"] .v1-cell-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  [data-c="c1"] .v1-cell-buy {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  }
}
/* left-align the section heads; centred headings are the reference's rhythm */
[data-s="s1"] .section-head--center { text-align: left; align-items: flex-start; }
[data-s="s1"] .eyebrow--center::before, [data-s="s1"] .eyebrow--center::after { display: none; }
[data-s="s1"] .section-title--center { text-align: left; }
[data-s="s1"] .filters { justify-content: flex-start; }


/* ###########################################################################
   V2 — CONTACT SHEET
   The reference opens with one bottle on a rotating carousel. This opens with
   all five at once, as a photographic contact sheet, so the range is the
   first thing you see. No carousel, no hero split.
   ######################################################################## */

/* --- V2 nav: everything left, utility right (no centred wordmark) -------- */
@media (min-width: 901px) {
  [data-t="t2"] .nav-inner { grid-template-columns: auto 1fr auto; gap: 34px; }
  [data-t="t2"] .nav-brand { order: -1; justify-self: start; }
  [data-t="t2"] .nav-left { justify-self: start; }
  [data-t="t2"] .nav-links { gap: clamp(10px, 1.4vw, 22px); }
}

/* --- V2 hero: five panels, all visible ---------------------------------- */
@media (min-width: 761px) {
  [data-t="t2"] .hero-carousel {
    min-height: 0; display: block; border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  [data-t="t2"] .hero-carousel .hero-media {
    position: relative; inset: auto; left: 0;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1px; background: var(--line-strong);
    /* shallower than a half-viewport: the taller the panel, the more of the
       square source gets cropped off the sides of each bottle */
    height: min(46vh, 420px);
  }
  /* every slide is shown; the carousel's opacity toggle is overridden */
  [data-t="t2"] .hero-slide-img {
    position: relative; inset: auto; opacity: 1;
    overflow: hidden; background: var(--media-bg);
    transition: flex 0.5s var(--ease);
  }
  [data-t="t2"] .hero-slide-img img {
    filter: grayscale(0.34) contrast(1.04);
    transition: filter 0.5s var(--ease), transform 0.7s var(--ease-out);
  }
  [data-t="t2"] .hero-slide-img:hover img { filter: none; transform: scale(1.04); }
  [data-t="t2"] .hero-slide-img.is-active img { filter: none; }
  [data-t="t2"] .hero-carousel .hero-overlay { display: none; }
  [data-t="t2"] .hero-carousel::after { display: none; }
  [data-t="t2"] .hero-carousel .hero-inner {
    padding-block: clamp(30px, 4.5vw, 62px);
  }
  [data-t="t2"] .hero-carousel .hero-content { max-width: none; }
  /* headline and supporting data sit side by side beneath the sheet */
  [data-t="t2"] .hero-content {
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: end; gap: clamp(20px, 4vw, 64px);
  }
  [data-t="t2"] .hero-title { grid-column: 1; margin: 0; }
  [data-t="t2"] .hero-carousel .eyebrow { grid-column: 1; }
  [data-t="t2"] .hero-copy { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: end; }
  [data-t="t2"] .hero-now { grid-column: 2; margin: 0; }
  [data-t="t2"] .hero-actions { grid-column: 1 / -1; margin-top: 8px; }
  [data-t="t2"] .hero-controls { display: none; }
  /* the display line is on paper here, not on a photo */
  [data-t="t2"] .hero-title .l1 { display: inline; }
  [data-t="t2"] .hero-title .l2 {
    display: inline; -webkit-text-fill-color: currentColor; background: none;
    color: var(--ink); letter-spacing: -0.04em;
  }
}

/* --- Collection C2: two large plates per row ----------------------------
   Written palette-agnostically so it can be worn by any theme: V2 renders it
   as white cards on paper, V4 as dark panels on black. Every colour comes
   from a token, and the type treatment is restated here so it does not
   inherit a different family's heading style. */
@media (min-width: 761px) {
  [data-c="c2"] .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px; background: var(--line);
    display: grid;
  }
  [data-c="c2"] .product-card {
    border: 0; background: var(--panel);
    display: flex; flex-direction: column;
  }
  [data-c="c2"] .product-card::before { content: none; }
  [data-c="c2"] .product-card:hover { transform: none; }
  /* the product shots are square, so a 21:9 full-width plate cropped 57% off
     the top and bottom and sliced the bottle. The odd last card keeps the
     normal plate and simply sits alone on its row. */
  [data-c="c2"] .product-card:last-child:nth-child(odd) { grid-column: auto; }
  /* 4:3 still took 25% off a 1:1 photograph, which cut through the cap and the
     base plinth. The frame matches the source instead, so the whole bottle
     shows with no letterboxing. */
  [data-c="c2"] .pcard-media { aspect-ratio: 1 / 1; border-radius: 0; }
  [data-c="c2"] .pcard-glow { display: none; }
  [data-c="c2"] .pcard-body { display: flex; padding: 22px 24px 26px; }
  [data-c="c2"] .pcard-name {
    font-size: 1.9rem; text-transform: none; letter-spacing: -0.02em; margin: 0;
  }
  [data-c="c2"] .pcard-meta, [data-c="c2"] .pcard-notes { display: flex; }
  [data-c="c2"] .pcard-actions { flex-direction: row; }
}
/* section heads left-aligned with a rule, in the Swiss register */
[data-s="s2"] .section-head--center { text-align: left; align-items: flex-start; }
[data-s="s2"] .section-title--center { text-align: left; }
[data-s="s2"] .eyebrow--center::before, [data-s="s2"] .eyebrow--center::after { display: none; }
[data-s="s2"] .section-head { border-top: 1px solid var(--ink); padding-top: 18px; }
[data-s="s2"] .filters { justify-content: flex-start; }


/* ###########################################################################
   V3 — THE VITRINE
   Symmetrical and centred where the others are asymmetric, and built on the
   pointed arch — a form from the architecture the house takes its name from,
   used as the frame for every piece of product photography.
   ######################################################################## */

/* --- V3 nav: wordmark on its own line, links centred beneath ------------- */
@media (min-width: 901px) {
  [data-t="t3"] .site-header { text-align: center; }
  /* a flex column stacks brand over links; the icon cluster is lifted out to
     the corner so it does not force the wordmark off centre */
  [data-t="t3"] .nav-inner {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    height: auto; padding: 18px 0 12px; gap: 11px;
  }
  [data-t="t3"] .nav-brand { order: 1; justify-self: auto; }
  [data-t="t3"] .nav-left {
    order: 2; width: 100%; justify-content: center;
    border-top: 1px solid var(--line); padding-top: 11px;
  }
  [data-t="t3"] .nav-right { position: absolute; right: 0; top: 20px; }
  [data-t="t3"] .brand-word { font-size: 1.75rem; }
  [data-t="t3"] .is-scrolled .nav-inner { padding: 10px 0 8px; gap: 8px; }
  [data-t="t3"] .is-scrolled .nav-right { top: 12px; }
}

/* --- V3 hero: centred, with the bottle inside an arch -------------------- */
@media (min-width: 761px) {
  [data-t="t3"] .hero-carousel { text-align: center; min-height: min(96vh, 940px); }
  /* the arch occupies the upper two thirds so the display type below it sits
     on clean ground instead of across the bottle */
  [data-t="t3"] .hero-carousel .hero-media {
    left: 50%; transform: translateX(-50%);
    width: min(38vw, 505px); right: auto;
    top: clamp(16px, 2.6vw, 38px); bottom: 52%;
    border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px;
    overflow: hidden;
    border: 1px solid var(--gold-line);
  }
  [data-t="t3"] .hero-carousel .hero-overlay {
    background: linear-gradient(0deg,
      rgba(16,5,7,0.98) 34%, rgba(16,5,7,0.82) 46%,
      rgba(16,5,7,0.30) 58%, transparent 74%);
  }
  [data-t="t3"] .hero-carousel .hero-inner { position: relative; z-index: 3; }
  [data-t="t3"] .hero-carousel .hero-content {
    max-width: 780px; margin-inline: auto;
    display: flex; flex-direction: column; align-items: center;
  }
  [data-t="t3"] .hero-actions { justify-content: center; margin-bottom: 30px; }
  [data-t="t3"] .hero-copy { margin-inline: auto; }
  /* the arch reads better with the display line beneath it */
  [data-t="t3"] .hero-carousel { align-items: flex-end; }
  [data-t="t3"] .hero-carousel .hero-inner { padding-bottom: clamp(30px, 4vw, 58px); }
  /* the full-scale display line is too tall to clear the arch once the rest
     of the block is stacked under it */
  [data-t="t3"] .hero-carousel .hero-title .l2 { font-size: clamp(2.6rem, 6.4vw, 4.8rem); }
  [data-t="t3"] .hero-carousel .hero-title .l1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
  [data-t="t3"] .hero-carousel .hero-controls { bottom: 14px; }
  [data-t="t3"] .hero-carousel .hero-arrow { display: none; }
}

/* --- V3 collection: arched plates on an offset grid ---------------------- */
[data-c="c3"] .pcard-media {
  border-radius: 46% 46% 4px 4px / 28% 28% 4px 4px;
  border: 1px solid var(--gold-line);
}
[data-c="c3"] .disc-sample-media, [data-c="c3"] .gift-media, [data-c="c3"] .rv-media {
  border-radius: 44% 44% 4px 4px / 26% 26% 4px 4px;
}
@media (min-width: 901px) {
  [data-c="c3"] .product-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); align-items: start; }
  /* a gentle stagger so the row does not read as a filmstrip */
  [data-c="c3"] .product-card:nth-child(2) { margin-top: 46px; }
  [data-c="c3"] .product-card:nth-child(3) { margin-top: 92px; }
  [data-c="c3"] .product-card:nth-child(5) { margin-top: 46px; }
  [data-c="c3"] .product-card { background: transparent; border: 0; box-shadow: none; text-align: center; }
  [data-c="c3"] .product-card:hover { transform: translateY(-6px); box-shadow: none; }
  [data-c="c3"] .pcard-body { align-items: center; text-align: center; }
  [data-c="c3"] .pcard-foot, [data-c="c3"] .pcard-actions { justify-content: center; width: 100%; }
  [data-c="c3"] .pcard-meta { justify-content: center; }
}
[data-s="s3"] .section-head--center { align-items: center; }


/* ###########################################################################
   Mobile: the rail, the contact sheet and the arch grid all collapse back to
   a single readable column. The version still reads distinctly through type,
   colour and the card treatment.
   ######################################################################## */
/* Shared fix: on narrow phones the hero CTA label is wider than the button,
   and `.btn` clips it with overflow:hidden — the leading letter is cut off
   ("ISCOVER SULTAN OUD"). Present in the original build. Stacking the two
   actions full-width gives the label the room it needs. */
@media (max-width: 460px) {
  [data-v] .hero-actions { flex-direction: column; align-items: stretch; }
  [data-v] .hero-actions .btn { width: 100%; }
  [data-v] .hero-actions .btn__label { white-space: normal; }
}

@media (max-width: 760px) {
  [data-v] .product-card { display: flex; }
  [data-v] .product-card::before { display: none; }
  [data-v] .pcard-body { display: flex; }
  [data-s="s3"] .product-card:nth-child(n) { margin-top: 0; }
  [data-s="s2"] .hero-slide-img { position: absolute; opacity: 0; }
  [data-s="s2"] .hero-slide-img.is-active { opacity: 1; }
}


/* ###########################################################################
   PART 2 — every remaining section
   ---------------------------------------------------------------------------
   The reference builds almost every section on the same two devices: a centred
   heading block, and an even N-column grid of centred cards. Below, each
   version replaces both with its own device, so no band, stat strip, trust
   row, offer, journal card, footer or product page repeats the reference's
   arrangement.
   ######################################################################## */


/* ======================= V1 — ruled, asymmetric, listed ================== */

/* Editorial bands: a 50/50 centred split becomes an asymmetric column with a
   caption rail, and the reversal alternates the rail rather than the image. */
@media (min-width: 861px) {
  [data-s="s1"] .band-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4.5vw, 68px); align-items: start;
  }
  [data-s="s1"] .editorial-band.is-reverse .band-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  [data-s="s1"] .band-media { aspect-ratio: 3 / 4; border-radius: 0; }
  [data-s="s1"] .band-body { border-top: 1px solid var(--gold-line); padding-top: 22px; }
}

/* Stats: a centred 5-across strip becomes a left-aligned ruled spec sheet. */
[data-s="s1"] .stats-grid {
  grid-template-columns: 1fr; gap: 0; text-align: left;
  border-top: 1px solid var(--line-strong);
}
[data-s="s1"] .stat {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: 20px; padding: 15px 2px; border-bottom: 1px solid var(--line);
}
[data-s="s1"] .stat-num { font-size: clamp(1.5rem, 2.4vw, 2rem); min-width: 5.5ch; }
[data-s="s1"] .stat-label { margin-top: 0; text-align: right; }

/* Trust: centred icon-over-text columns become inline ruled rows. */
@media (min-width: 761px) {
  [data-s="s1"] .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 4vw, 60px); }
  [data-s="s1"] .trust-item {
    text-align: left; display: grid; grid-template-columns: 30px 1fr;
    gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--line);
  }
  [data-s="s1"] .trust-ico { width: 26px; height: 26px; margin: 2px 0 0; grid-row: span 2; }
  /* both text nodes belong in the second column — without this the copy falls
     into an implicit third track and collapses to the icon's width */
  [data-s="s1"] .trust-title, [data-s="s1"] .trust-copy { grid-column: 2; }
}

/* Newsletter: centred column becomes a left-aligned band with an inline form. */
@media (min-width: 761px) {
  [data-s="s1"] .news-inner {
    max-width: none; text-align: left; margin-inline: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end; gap: clamp(24px, 4vw, 60px);
  }
  [data-s="s1"] .news-inner .eyebrow--center::before,
  [data-s="s1"] .news-inner .eyebrow--center::after { display: none; }
  [data-s="s1"] .news-inner .section-title--center,
  [data-s="s1"] .news-inner .section-sub { text-align: left; margin-inline: 0; }
  [data-s="s1"] .news-form { margin: 0; max-width: none; }
  [data-s="s1"] .news-note { text-align: left; }
}

/* Footer: five even columns become a rail-echoing two-block layout. */
@media (min-width: 861px) {
  [data-s="s1"] .footer-top {
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 46px); border-top: 1px solid var(--line-strong); padding-top: 44px;
  }
  [data-s="s1"] .footer-brand { border-right: 1px solid var(--line); padding-right: 28px; }
}

/* Journal / gift / discovery: card grids become ruled rows, matching the
   collection ledger so the whole site shares one organising idea. */
@media (min-width: 861px) {
  [data-s="s1"] .jr-grid, [data-s="s1"] .gift-grid {
    grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong);
  }
  [data-s="s1"] .jr-card, [data-s="s1"] .gift-card {
    flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 44px);
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: transparent; padding: 14px 4px;
  }
  [data-s="s1"] .jr-media, [data-s="s1"] .gift-media {
    width: 190px; flex: none; aspect-ratio: 4 / 3; border-radius: 0;
  }
  [data-s="s1"] .gift-media { width: 120px; aspect-ratio: 1; }
  [data-s="s1"] .jr-body, [data-s="s1"] .gift-body { flex: 1; padding: 0; }
  [data-s="s1"] .disc-sample {
    width: 100%; flex-direction: row; align-items: center; gap: 18px;
    text-align: left; border-radius: 0; border: 0; border-bottom: 1px solid var(--line);
    background: transparent;
  }
  [data-s="s1"] .disc-sample-media { width: 86px; flex: none; }
  [data-s="s1"] .disc-sample-fam { margin-bottom: 0; }
}

/* Offers + PDP + accordion */
[data-s="s1"] .offer-card { border-radius: 0; }
[data-s="s1"] .offers-head { text-align: left; }
@media (min-width: 861px) {
  [data-s="s1"] .pdp-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
[data-s="s1"] .accordion-btn { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; }


/* ======================= V2 — Swiss 12-column, hairlines ================= */

/* Bands become a 12-column editorial spread: image spans 7, text spans 4 and
   is offset, with a hairline above. Reversed bands flip the offset. */
@media (min-width: 861px) {
  [data-s="s2"] .band-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(18px, 2.4vw, 34px); align-items: start;
    border-top: 1px solid var(--ink); padding-top: 26px;
  }
  /* 4:3 rather than 16:11 — the source art is square, and the wider box was
     cropping 38% of it away */
  [data-s="s2"] .band-media { grid-column: 1 / span 7; aspect-ratio: 4 / 3; border-radius: 0; }
  [data-s="s2"] .band-body  { grid-column: 9 / span 4; }
  [data-s="s2"] .editorial-band.is-reverse .band-media { grid-column: 6 / span 7; grid-row: 1; }
  [data-s="s2"] .editorial-band.is-reverse .band-body  { grid-column: 1 / span 4; grid-row: 1; }
}

/* Stats: one rule, tabular figures, divided by hairlines — a data strip. */
[data-s="s2"] .stats-grid {
  text-align: left; gap: 0;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}
[data-s="s2"] .stat { padding: 22px 18px; border-left: 1px solid var(--line); }
[data-s="s2"] .stat:first-child { border-left: 0; padding-left: 0; }
[data-s="s2"] .stat-num {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 600;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--ink);
}
[data-s="s2"] .stat-label { letter-spacing: 0.04em; font-size: 0.66rem; margin-top: 8px; }

/* Trust: left-aligned with a small inline mark, hairline separated. */
@media (min-width: 761px) {
  [data-s="s2"] .trust-grid { gap: 0; }
  [data-s="s2"] .trust-item {
    text-align: left; padding: 0 20px; border-left: 1px solid var(--line);
  }
  [data-s="s2"] .trust-item:first-child { border-left: 0; padding-left: 0; }
  [data-s="s2"] .trust-ico { margin: 0 0 14px; width: 22px; height: 22px; }
  [data-s="s2"] .trust-title { font-weight: 600; letter-spacing: -0.02em; }
}

/* Newsletter: heading left, form right — no blurred photo backdrop. */
@media (min-width: 761px) {
  [data-s="s2"] .news-inner {
    max-width: none; text-align: left; margin-inline: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; gap: clamp(24px, 4vw, 64px);
  }
  [data-s="s2"] .news-inner .section-title--center,
  [data-s="s2"] .news-inner .section-sub { text-align: left; margin-inline: 0; }
  [data-s="s2"] .news-inner .eyebrow--center::before,
  [data-s="s2"] .news-inner .eyebrow--center::after { display: none; }
  [data-s="s2"] .news-form { margin: 0; max-width: none; }
  [data-s="s2"] .news-note { text-align: left; }
}
[data-s="s2"] .news-bg { display: none; }
[data-s="s2"] .newsletter { background: var(--panel-2); border-top: 1px solid var(--ink); }

/* Footer: asymmetric Swiss block, wordmark oversized. */
@media (min-width: 861px) {
  [data-s="s2"] .footer-top {
    grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2vw, 30px);
  }
  [data-s="s2"] .footer-brand { grid-column: 1 / span 4; }
  [data-s="s2"] .footer-top > *:not(.footer-brand):not(.footer-news) { grid-column: span 2; }
  [data-s="s2"] .footer-news { grid-column: 11 / span 2; }
  [data-s="s2"] .site-footer .brand-word { font-size: 1.9rem; letter-spacing: 0.02em; }
}

/* Journal / gift / discovery as flat plates on a hairline mesh. */
@media (min-width: 861px) {
  [data-s="s2"] .jr-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
  [data-s="s2"] .jr-card { border: 0; border-radius: 0; }
    /* 4:3, not 16:10 — square source art was losing 38% to the crop */
  [data-s="s2"] .jr-media { aspect-ratio: 4 / 3; }
  [data-s="s2"] .gift-grid { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
  [data-s="s2"] .gift-card { border: 0; border-radius: 0; }
  [data-s="s2"] .disc-sample {
    width: calc(20% - 12px); border-radius: 0; border-color: var(--line);
  }
}
[data-s="s2"] .offer-card { border-radius: 0; border-color: var(--line); }
[data-s="s2"] .accordion-btn { font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 861px) {
  [data-s="s2"] .pdp-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}


/* ======================= V3 — centred, arched, symmetric ================= */

/* Bands stop being side-by-side: the arch is centred with the copy beneath,
   so the rhythm down the page is a column of arches rather than a zig-zag. */
@media (min-width: 861px) {
  [data-s="s3"] .band-grid {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    gap: clamp(24px, 3.4vw, 48px); max-width: 900px; margin-inline: auto;
  }
  [data-s="s3"] .band-media {
    width: min(420px, 62%); aspect-ratio: 3 / 4;
    border-radius: 46% 46% 6px 6px / 28% 28% 6px 6px;
    border-color: var(--gold-line);
  }
  [data-s="s3"] .editorial-band.is-reverse .band-media { order: -1; }
  [data-s="s3"] .band-body { max-width: 620px; }
  [data-s="s3"] .band-body .hero-actions,
  [data-s="s3"] .band-body .btn { margin-inline: auto; }
  [data-s="s3"] .band-body > div { justify-content: center; }
}

/* Stats: medallions separated by a hairline arch motif. */
[data-s="s3"] .stat {
  padding: 10px 6px; border-left: 1px solid var(--gold-line);
}
[data-s="s3"] .stat:first-child { border-left: 0; }
[data-s="s3"] .stat-num { font-size: clamp(2rem, 3.6vw, 3rem); }

/* Trust: four arched medallions. */
[data-s="s3"] .trust-ico {
  width: 54px; height: 54px; padding: 13px;
  border: 1px solid var(--gold-line);
  border-radius: 50% 50% 8px 8px / 38% 38% 8px 8px;
}

/* Newsletter sits inside an arched panel rather than a full-bleed band. */
@media (min-width: 761px) {
  [data-s="s3"] .news-inner {
    max-width: 720px; padding: clamp(30px, 4vw, 56px) clamp(24px, 3vw, 48px);
    border: 1px solid var(--gold-line);
    border-radius: 32% 32% var(--radius-lg) var(--radius-lg) / 14% 14% var(--radius-lg) var(--radius-lg);
    background: color-mix(in srgb, var(--panel) 82%, transparent);
  }
}

/* Footer stays symmetric. */
@media (min-width: 861px) {
  [data-s="s3"] .footer-top { text-align: center; justify-items: center; }
  [data-s="s3"] .footer-brand { justify-items: center; }
  [data-s="s3"] .social { justify-content: center; }
}

/* Journal / gift / discovery inherit the arch. */
[data-s="s3"] .jr-media { border-radius: 40% 40% 4px 4px / 22% 22% 4px 4px; }
[data-s="s3"] .jr-card, [data-s="s3"] .gift-card, [data-s="s3"] .disc-sample {
  background: transparent; border-color: var(--gold-line); text-align: center;
}
@media (min-width: 861px) {
  [data-s="s3"] .jr-grid { align-items: start; }
  [data-s="s3"] .jr-card:nth-child(2) { margin-top: 38px; }
  [data-s="s3"] .jr-card:nth-child(3) { margin-top: 76px; }
  [data-s="s3"] .pdp-gallery .gallery-main { border-radius: 40% 40% 6px 6px / 24% 24% 6px 6px; overflow: hidden; }
}
[data-s="s3"] .offer-card { border-radius: var(--radius-lg); }


/* ###########################################################################
   QA fixes — applied to every version
   ######################################################################## */

/* Buttons sitting in a flex row (the footer newsletter form, the ledger row
   actions) were being shrunk below their own label width, and `.btn` clips
   with overflow:hidden — so "Join" rendered as "oi" and "Details" lost its
   last letter. Buttons never shrink below their content now. */
[data-v] .btn { flex-shrink: 0; }
[data-v] .news-form .btn,
[data-v] .pcard-actions .btn,
[data-v] .footer-news .btn { flex: 0 0 auto; }

/* The label itself must never be the thing that overflows. */
[data-v] .btn__label { max-width: 100%; }

/* …and the field beside it has to be allowed to give way. A flex item's
   default `min-width: auto` refuses to shrink below its content, so the
   footer's input (204px) + Join (106px) demanded 310px inside a 175px row
   and pushed the button off the edge. */
[data-v] .news-form { flex-wrap: wrap; }
[data-v] .news-form .news-input,
[data-v] .news-form input { min-width: 0; flex: 1 1 8ch; }

/* Long unbroken strings (the contact email) were setting a min-content width
   wider than the phone viewport and dragging the card past the right edge. */
[data-v] .contact-card,
[data-v] .contact-card a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  [data-v] .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Small buttons carry wide tracking; on a narrow column the label outgrew the
   box by a few pixels and `.btn` clipped it. Let it wrap instead. */
@media (max-width: 760px) {
  [data-v] .btn--sm { padding-inline: 14px; }
  [data-v] .btn--sm .btn__label { white-space: normal; }
}

/* The bundle-builder thumbnail is declared square, but its inner <picture> is
   an inline box, so the image's own height won out over the aspect-ratio and
   the tile grew to 136x232 — cropping 41% off the sides of the bottle.
   Making the wrapper a block that fills the tile restores the square. */
/* `.pick-card` is a <button> stretched to its grid row height, and button
   layout stretches the tile with it. An explicit column flow lets the media
   keep its square and hands the leftover height to the body instead. */
[data-v] .pick-card { display: flex; flex-direction: column; align-items: stretch; }
[data-v] .pick-card .pick-body { flex: 1 1 auto; }
[data-v] .pick-media { flex: 0 0 auto; aspect-ratio: 1 / 1; min-height: 0; overflow: hidden; }
[data-v] .pick-media picture,
[data-v] .pick-media > a { display: block; width: 100%; height: 100%; }
[data-v] .pick-media img { width: 100%; height: 100%; object-fit: cover; }


/* ###########################################################################
   V2 wearing the Ledger top section  (data-v="v2" + data-t="t1")
   ---------------------------------------------------------------------------
   The client kept V2's page but did not want its contact-sheet opening, so V2
   now takes V1's top section: the fixed vertical rail and the hero index.
   Everything below the hero is still V2 (s2), and the styling here stays V2 —
   pressed-paper grey, grotesque type, hairlines, no gold.

   The t1 hero was drawn for a dark theme: it scrims the photo toward the page
   colour on the left and leaves the right clean. On a light ground that means
   the title reads as ink on paper (good) but the index would sit on the raw
   photograph (bad), so the index gets its own frosted plate.
   ######################################################################## */

/* the rail: paper, not ink */
[data-v="v2"] .site-header { border-right-color: var(--line); }
[data-v="v2"] .brand-word { letter-spacing: 0.24em; padding-top: 0.24em; font-weight: 600; }

/* Full-bleed art behind a light wash reads as a ghost, and any gradient edge
   lands somewhere across the bottle. So on the light theme the photograph is
   given its own panel and a hairline: the copy sits on clean paper, the
   picture stays a picture, and nothing is scrimmed through the middle of the
   subject. It also lands the panel at ~1:1, which is the source's own ratio,
   so the bottle is not cropped at all.  */
@media (min-width: 901px) {
  [data-v="v2"] .hero-carousel .hero-media {
    left: 42%;
    border-left: 1px solid var(--line);
  }
  [data-v="v2"] .hero-carousel .hero-overlay { background: none; }
}
@media (max-width: 900px) {
  [data-v="v2"] .hero-carousel .hero-overlay {
    background: linear-gradient(0deg,
      rgba(var(--scrim-rgb), 0.97) 24%, rgba(var(--scrim-rgb), 0.72) 44%,
      rgba(var(--scrim-rgb), 0.15) 68%, transparent 84%);
  }
}
/* the type block lives inside the paper, so it is bounded by it */
[data-v="v2"] .hero-carousel .hero-content { max-width: 460px; }
[data-v="v2"] .hero-actions { gap: 12px; }
[data-v="v2"] .hero-carousel [data-hero-cta] { min-width: 0; }
[data-v="v2"] .hero-carousel { border-bottom: 1px solid var(--line); }
[data-v="v2"] .hero-title .l1,
[data-v="v2"] .hero-title .l2 { display: block; }
[data-v="v2"] .hero-title .l2 { letter-spacing: -0.04em; }

/* the index sits over open photograph, so it carries its own paper plate */
[data-v="v2"] .v1-index {
  background: rgba(var(--scrim-rgb), 0.92);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid var(--line);
  border-top-color: var(--ink);
  padding: 2px 20px 8px;
}
[data-v="v2"] .v1-index-row { border-bottom-color: var(--line); }
[data-v="v2"] .v1-index-row:last-child { border-bottom: 0; }
[data-v="v2"] .v1-i-num { color: var(--muted); font-weight: 600; }
/* grotesque, not V1's light tracked-out caps */
[data-v="v2"] .v1-i-name {
  font-weight: 600; letter-spacing: -0.01em; text-transform: none;
  font-size: 1.02rem; color: var(--ink);
}
[data-v="v2"] .v1-index-row { color: var(--muted); }
[data-v="v2"] .v1-index-row:hover { color: var(--ink); }
[data-v="v2"] .v1-i-fam { letter-spacing: 0.08em; font-size: 0.6rem; font-weight: 500; }
[data-v="v2"] .v1-i-rule { background: var(--ink); }


/* ###########################################################################
   V4 section refinements
   ---------------------------------------------------------------------------
   V4 is the shipped design, so per-section adjustments are made against the
   version directly rather than by inventing another layout family. These come
   last in the file so they win over the family rules above.
   ######################################################################## */

/* Stats: take V3's centred strip instead of the Ledger's stacked ruled list.
   The Ledger rule sets a single column at every width, which would otherwise
   beat main.css's own 5 → 3 → 2 ladder, so that ladder is restated here. */
[data-v="v4"] .stats-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px; text-align: center; border-top: 0;
}
[data-v="v4"] .stat {
  display: block; padding: 10px 6px;
  border-bottom: 0; border-left: 1px solid var(--gold-line);
}
[data-v="v4"] .stat:first-child { border-left: 0; }
[data-v="v4"] .stat-num {
  font-size: clamp(2rem, 3.6vw, 3rem); min-width: 0; color: var(--gold-soft);
}
[data-v="v4"] .stat-label { margin-top: 12px; text-align: center; }

@media (max-width: 1000px) {
  [data-v="v4"] .stats-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  /* dividers only make sense within a row, so reset them at each wrap point */
  [data-v="v4"] .stat:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 760px) {
  [data-v="v4"] .stats-grid { grid-template-columns: repeat(2, 1fr); }
  [data-v="v4"] .stat:nth-child(n) { border-left: 1px solid var(--gold-line); }
  [data-v="v4"] .stat:nth-child(2n + 1) { border-left: 0; }
  [data-v="v4"] .stats-grid .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
}


/* ###########################################################################
   Timed offer dialog (scripts/promo.js)
   ---------------------------------------------------------------------------
   Styled entirely from theme tokens, so it wears whichever version is active
   without a per-version rule.
   ######################################################################## */
.offer[hidden] { display: none; }
.offer {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 40px);
}
.offer-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.32s var(--ease);
}
.offer.is-open .offer-backdrop { opacity: 1; }

.offer-panel {
  position: relative; z-index: 1;
  width: min(560px, 100%);
  max-height: calc(100dvh - 2 * clamp(16px, 4vw, 40px));
  overflow-y: auto;
  background: var(--elevated);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: clamp(26px, 4vw, 44px);
  text-align: center;
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.32s var(--ease), transform 0.38s var(--ease-out);
}
.offer.is-open .offer-panel { opacity: 1; transform: none; }

.offer-close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 0; color: var(--faint);
  border-radius: 50%; cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.offer-close:hover { color: var(--ink); background: var(--line); }
.offer-close .icon { width: 20px; height: 20px; }

.offer .eyebrow { justify-content: center; display: flex; }
.offer-title {
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  line-height: 1.08; margin: 6px 0 10px; color: var(--ink);
}
.offer-copy {
  color: var(--muted); font-size: 0.95rem; line-height: 1.6;
  max-width: 42ch; margin: 0 auto 22px;
}
.offer-form { margin: 0 auto; max-width: 420px; }
.offer .news-msg { margin-top: 10px; }

.offer-alt {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 22px;
}
.offer-or {
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--faint);
}
.offer-alt .btn { width: 100%; max-width: 420px; }
.offer .news-note { margin-top: 18px; text-align: center; }

/* the page must not scroll behind the dialog */
body.offer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .offer-backdrop, .offer-panel { transition: none; }
  .offer-panel { transform: none; }
}
@media (max-width: 460px) {
  .offer-panel { padding: 26px 20px 24px; }
  .offer-form { flex-direction: column; }
  .offer-form .btn, .offer-form .news-input { width: 100%; }
}


/* ---------- product plates: show the whole bottle ----------
   Every product photograph is a square 900x900 frame with the bottle filling
   it. Any non-square plate with object-fit:cover therefore slices the cap and
   the base off, which is what the client saw on the phone: the mobile deck's
   3:2 plate discarded 33% of the image height. Matching the frame to the source
   keeps the whole bottle without letterboxing it on a black card. */
@media (max-width: 760px) {
  [data-c] .is-deck .pcard-media,
  [data-c] .is-deck .product-card:last-child:nth-child(odd) .pcard-media {
    aspect-ratio: 1 / 1;
  }
}

/* The quiz result stretches its media column to match the copy beside it
   (align-self:stretch + height:100%), which overrode the img's own 1:1 and
   squeezed a square photograph into a tall narrow slot, cropping 51% of it.
   The plate keeps its square and centres instead. */
[data-v] .quiz-result-media { align-self: center; }
[data-v] .quiz-result-media img { height: auto; aspect-ratio: 1 / 1; }

/* Search result thumbnails were 60x72 against a square source, trimming the
   sides off the bottle. */
[data-v] .search-result img { height: 60px; }

/* ---------- "try the sample set" band on every fragrance page ----------
   A customer hesitating over a 100 mL bottle had no route to the sample box
   from the product page; the only links to it were the nav and the announce
   bar. Built from the same tokens as the rest of the design. */
.try-sample { border-top: 1px solid var(--line); }
.try-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.try-media {
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--panel); aspect-ratio: 1 / 1;
}
.try-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* stand-in until the box photograph lands: the five bottles, evenly set.
   Flex rather than a 3-column grid, so the trailing row of two centres itself
   instead of hanging off the left with a hole beside it. */
.try-vials {
  height: 100%; display: flex; flex-wrap: wrap;
  justify-content: center; align-content: center;
  gap: 10px; padding: 18px;
}
.try-vials picture { display: block; flex: 0 0 calc(33.333% - 7px); }
.try-vials img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line);
}
.try-desc { color: var(--muted); margin-top: 10px; max-width: 46ch; }
.try-meta {
  margin-top: 14px; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
}
.try-price {
  margin-top: 8px; font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem); color: var(--gold-soft);
}
.try-price small { font-size: 0.5em; color: var(--faint); letter-spacing: 0.1em; }
.try-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.try-actions .btn { flex: 0 1 auto; }

@media (max-width: 760px) {
  .try-grid { grid-template-columns: 1fr; }
  .try-media { max-width: 420px; margin-inline: auto; }
  .try-actions .btn { flex: 1 1 100%; }
}

/* the Discovery page led with the five bottles but never showed the box being
   sold; the photograph sits above them */
.disc-box {
  border: 1px solid var(--gold-line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--panel); margin-bottom: 18px;
}
.disc-box img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------- product gallery: five thumbnails must not widen the page ----------
   .gallery-thumbs lays its 74px thumbs in one row. With five images its
   min-content width exceeded a 375px phone, and because it sits in a grid the
   whole .pdp-grid column grew with it: the gallery, the buy panel and the
   specification table all ran 63px past the right edge. Products with three
   images happened to fit, so the fault only showed on Blue Chill and Glamorous. */
.pdp-grid > * { min-width: 0; }
.gallery-thumbs { flex-wrap: wrap; }
@media (max-width: 760px) {
  .pdp-gallery, .pdp-info { max-width: 100%; }
  .gallery-thumbs { justify-content: flex-start; }
}