/* ============================================================================
   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-head--center .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-head--center .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; }
}

/* ================= PHONE FIRST =================
   Client direction, 18 Aug 2026: "Put the phone UI first."

   The mobile layer had been built around one constraint, "one section = one
   screen", and everything the phone lost was paid to that constraint. Its own
   comments say so: tighten so each page actually fits one screen; the
   collection sheds its sub-line; long band copy is trimmed to four lines;
   deck cards go leaner so a whole card sits on one page. The result was a
   phone that showed strictly less than the desktop - product descriptions
   gone, the quiz call to action gone, editorial copy cut mid-sentence.

   The pager goes, and the content it was squeezing comes back. The horizontal
   swipe decks stay: those are a phone gesture that costs the reader nothing. */
@media (max-width: 760px) {
  /* an ordinary document that scrolls, not a slide deck */
  html[data-page="home"] { scroll-snap-type: none; }
  [data-page="home"] main > section {
    min-height: 0;
    scroll-snap-align: none;
    scroll-snap-stop: normal;
    display: block;
    padding-top: clamp(48px, 12vw, 72px);
    padding-bottom: clamp(40px, 10vw, 64px);
  }
  /* a hidden seasonal band must still take no room */
  [data-page="home"] main > section[hidden] { display: none; }

  /* type no longer has to shrink to make a section fit */
  [data-page="home"] main > section .section-title { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  [data-page="home"] main > section .section-sub { font-size: 0.95rem; margin-top: 12px; }

  /* the editorial copy the client pointed at: read it all, on any screen */
  .band-body .lede {
    display: block; -webkit-line-clamp: none; -webkit-box-orient: unset; overflow: visible;
  }

  /* the collection keeps its sub-line and its quiz route on a phone */
  .collection .section-sub { display: block; }
  .collection .section-head > .btn { display: inline-flex; }

  /* a product card says what the fragrance is and what you are buying */
  .is-deck .pcard-desc { display: block; }
  .is-deck .pcard-meta { display: flex; }
  .is-deck .pcard-body { padding: 16px 18px 18px; gap: 8px; }
  /* the plate stays square so the whole bottle shows, as agreed earlier */
  .is-deck .pcard-media,
  .is-deck .product-card:last-child:nth-child(odd) .pcard-media { aspect-ratio: 1 / 1; }
  /* a deck card can now be taller than the old one-screen budget allowed */
  .is-deck > * { align-self: stretch; }
  .is-deck .pcard-body { flex: 1 1 auto; }

  /* the hero no longer has to share a fixed screen with its copy */
  .hero-carousel .hero-media { aspect-ratio: 4 / 5; }
}

@media (max-width: 760px) {
  /* The mobile layer centres the editorial bands, which reads well for an
     eyebrow and a title. Once the copy was un-clamped the paragraphs ran to
     ninety words, and ninety centred words on a 375px screen give a ragged
     left edge on every line, which is the hardest possible way to read a
     phone. Headings stay centred; the prose sets left. */
  .band-body .lede,
  .band-body p:not(.eyebrow) {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- widget hosts must not sit in the layout ----------
   The importer leaves an empty element where each interactive block used to
   be, and React portals the real control into it. That host was becoming the
   layout box: in the editorial bands the button row is a flex container, so
   the <a> beside it picked up the stylesheet's centring while the portalled
   button sat inside a shrink-wrapped host the rules never reached, left
   aligned and a different width from its neighbour.

   display:contents removes the host from the box tree, so the control it
   carries is a sibling of whatever is next to it and is styled identically. */
[data-widget] { display: contents; }

@media (max-width: 760px) {
  /* Stacked calls to action in an editorial band read as one control when they
     share a width. Sized to content they came out at 261px and 174px, centred
     on the same axis but visibly mismatched. */
  /* display:contents removes the widget host from the box tree but NOT from
     the selector tree, so the portalled button is still div > span > .btn and
     a child combinator alone misses it. */
  .band-body > div:has(.btn) { flex-direction: column; align-items: center; }
  .band-body > div > .btn,
  .band-body > div > [data-widget] > .btn { flex: 0 0 auto; width: 100%; max-width: 320px; }
}

/* The announcement bar cross-fades between messages, but every message stays in
   the DOM at full size underneath the visible one, so a tap anywhere on the bar
   hit whichever link happened to be last in source order rather than the one
   being read. Inactive messages already carry aria-hidden and tabindex="-1", so
   only pointer handling was missing. Not visibility:hidden: main.css transitions
   opacity alone, and hiding would replace the cross-fade with a jump cut. */
.announce-item { pointer-events: none; }
.announce-item.is-active { pointer-events: auto; }

/* ---------- 320px: the bag was off the screen entirely ----------
   .nav-inner is a three-track grid and the middle 1fr track keeps the default
   min-width:auto, so it cannot shrink below the wordmark's min-content width.
   The icon cluster therefore had a hard floor and laid out identically at 320
   and 360: on a 320px phone the bag's LEFT edge was at 324px, past the viewport,
   and body{overflow-x:hidden} clipped it away with no scrollbar. There was no
   way to reach the cart on any page. */
@media (max-width: 374px) {
  .site-header .nav-inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-header .brand-word { font-size: 0.84rem; letter-spacing: 0.1em; }
  .site-header .brand-mark { width: 18px; height: 18px; }
  .site-header .nav-brand { gap: 6px; }
}


/* ================= mobile QA sweep, 19 Aug 2026 =================
   Findings verified by measurement at 320-430px. main.css stays byte-identical,
   so every correction lives here. */
@media (max-width: 760px) {
  /* .hero-actions turns to a column on a phone, but its children keep the row
     layout's flex-basis:0. On a column axis that basis governs HEIGHT, so both
     hero buttons collapsed to 34px against their 54px siblings, and at 320px the
     content box went to zero and the label wrapped inside a clipped button.
     Neutralising the basis is the only thing that works: height and min-height
     lose to a flex used-value. */
  [data-v] .hero-actions > * { flex: 0 0 auto; }

  /* The quantity field sat 25.6px tall between two 50px steppers, so the row
     read as broken and the smallest target was the one you aim at most. */
  .pdp-buy .qty input { width: 64px; align-self: stretch; min-height: 50px; }

  /* The header icons were 36x36 with no gap at all, three tap targets touching. */
  .site-header .nav-right { gap: 6px; padding-right: 2px; }
  .site-header .icon-btn { width: 44px; height: 44px; }

  /* Footer navigation ran 14 links at 18px with 7.6px between them. */
  .site-footer .footer-top p a,
  .site-footer .fb-links a { display: inline-block; padding: 7px 0; }

  /* Breadcrumbs were 19px tall on every subpage. */
  .breadcrumb a { display: inline-block; padding: 6px 0; }

  /* "$89.99" and "AUD" broke across two lines, so the price read as two facts. */
  .pdp-price-row { flex-wrap: wrap; }
  .pdp-price { white-space: nowrap; }

  /* Micro-labels fell as low as 9.3px with heavy tracking, which on a phone is
     past the point of reading and into guessing. Lifted to a floor rather than
     resized individually, so the type hierarchy is unchanged and only the
     bottom of it moves. The design's 11.2px button labels and unit marks are
     left alone: they are legible, and raising them would resize every button on
     the site. */
  .eyebrow, .pcard-family, .stat-label, .sr-fam, .meta, .pdp-subhead,
  .offer-badge, .pair-label, .disc-sample-fam, .jr-tag, .pdp-specs dt {
    font-size: max(0.72rem, 11.5px);
  }
  /* these four are set by more specific rules elsewhere, so the floor has to
     match that specificity rather than out-shout it with !important */
  [data-v] .hero-now .hn-label,
  [data-v] .v1-index .v1-i-num,
  [data-v] .v1-index .v1-i-fam,
  [data-v] .pick-body .pf {
    font-size: max(0.72rem, 11.5px);
  }

  /* A collapsed accordion kept its link focusable at zero height, so keyboard
     focus disappeared underneath the header it belongs to. */
  .accordion-panel { visibility: hidden; }
  .accordion-btn[aria-expanded="true"] + .accordion-panel { visibility: visible; }
}

@media (max-width: 760px) {
  /* The overlay's field was 25.6px tall: an anti-zoom rule elsewhere forced a
     16px font on it while its own clamp asked for 38.4px, and the box collapsed
     around the smaller value. It is the only control on that screen. */
  .search-overlay .search-input { font-size: 1.15rem; min-height: 48px; }
  /* name and family ran together as one string with nothing between them */
  .search-result .sr-fam { display: block; margin-top: 2px; }
  /* the clear control and the close control sat 16px apart, both live */
  .search-top .drawer-close { width: 44px; height: 44px; margin-left: 8px; }
}

@media (max-width: 760px) {
  /* The quiz result stacked its two calls to action at different widths, the one
     pattern every other phone CTA on the site had already been given. */
  .quiz-result-actions { flex-direction: column; align-items: center; }
  .quiz-result-actions > .btn { width: 100%; max-width: 320px; }
  /* The checkout stepper was scaled to 85%, making it the smallest target here. */
  .qty { transform: none; }
}

/* The header is authored position:sticky, but overflow-x:hidden on html and body
   makes each of them a scroll container, and a sticky element cannot stick to an
   ancestor that scrolls. The header therefore scrolled away on every route and
   its scrolled state was never seen. overflow:clip suppresses sideways panning
   without establishing that container, so sticky works again and no horizontal
   scrolling returns. (Safari 16+; the decks set their own overflow and are
   unaffected.) */
html, body { overflow-x: clip; }

/* Anchor targets have to clear the fixed header, or the thing you followed the
   link for sits underneath it. */
[id] { scroll-margin-top: 88px; }

@media (max-width: 760px) {
  /* Stacked calls to action anywhere in imported prose, not just the editorial
     bands: the journal article had the same mismatched pair. */
  .cms-body .prose > div:has(> .btn),
  .cms-body .story-body > div:has(> .btn) { display: flex; flex-direction: column; align-items: center; }
  .cms-body .prose > div > .btn,
  .cms-body .story-body > div > .btn { width: 100%; max-width: 320px; }

  /* The deck card's action row stopped short of the card edge its siblings use. */
  .is-deck .pcard-actions { padding-inline: 0; }
  .is-deck .pcard-actions > * { flex: 1 1 0; min-width: 0; }

  /* The drawer wordmark sat 8px inside the left edge every nav link shares. */
  .mobile-nav .mnav-head .brand-word { padding-left: 0; }

  /* "30-second" was breaking across two lines mid-term. */
  .collection .section-head > .btn .btn__label { text-wrap: balance; }
}

/* ---------- saving a fragrance for later ----------
   The wishlist page and its empty state were designed and shipped, but nothing
   ever wrote to the list and there was no save control anywhere on the site, so
   the page could only ever be empty. The heart sits on the product plate, where
   people look for it, and beside Add to Bag on a fragrance page, which is where
   the original design put its 52px square. */
.wish-btn {
  display: inline-grid; place-items: center; gap: 6px;
  border: 1px solid var(--line-strong); background: rgba(8, 8, 10, 0.55);
  color: var(--paper, #f2efe9); cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.wish-btn .icon { width: 20px; height: 20px; }
.wish-btn:hover { border-color: var(--gold-line); color: var(--gold-soft); }
.wish-btn.is-saved { color: var(--gold); border-color: var(--gold-line); }

/* on a plate: top right, over the photograph */
.wish-btn--card {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  backdrop-filter: blur(6px);
}
.product-card { position: relative; }

/* beside Add to Bag */
.wish-btn--pdp {
  grid-auto-flow: column; min-height: 50px; padding: 0 16px; border-radius: 4px;
  flex: 0 0 auto;
}
.wish-btn-label {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
}

@media (max-width: 760px) {
  /* the buy row stacks on a phone, so the save control spans it like its
     neighbour rather than sitting in a lonely half-width box */
  .pdp-buy { flex-wrap: wrap; }
  .wish-btn--pdp { order: 3; width: 100%; }
}

/* ---------------------------------------------------------------------------
   An uploaded photograph keeps its own shape.

   The editorial frames were cut to fit the photography that shipped with the
   design: .story-media is a 1:1 square on a wide screen and 4:3 on a phone,
   with the image inside set to object-fit: cover. That is right for shots that
   were composed for those crops. It is wrong for a photograph the client
   uploads. The About page portrait is 952x1653; forced into a square it loses
   well over half of itself, and into the phone's 4:3 it loses more still. That
   is what "it's cut" means, on the laptop and on the phone both.

   So anything served from /media/ sets the frame's shape from the picture,
   rather than the picture being cut to the frame.

   Scoped to the editorial frames on purpose. Product cards, pickers and
   thumbnails keep a fixed ratio, because a grid of mismatched heights reads as
   broken rather than as respectful of the photograph.

   The :has() carries enough specificity to beat the per-version layers above
   ([data-s="s2"] .band-media and friends), which is why it is written this way
   rather than with !important.
   ------------------------------------------------------------------------ */
/* The fragrance banner is deliberately NOT in this list.
   It is a full-bleed band pinned to the edges of the page, not a frame that can
   grow with its picture: letting the image take its own height there made it
   overflow the band, which clipped it from the bottom. On a short laptop window
   only the top 58% of the photograph survived, so the foot of the bottle was
   cut off while the empty sky above it was kept. It fills its band and takes
   its crop from the middle instead, which is what a banner is for. */
:is(.story-media, .band-media, .jr-hero):has(img[src^="/media/"]) {
  aspect-ratio: auto;
}
:is(.story-media, .band-media, .jr-hero):has(img[src^="/media/"]) img {
  height: auto;
  object-fit: contain;
}

/* Frames that hold a grid together keep their shape, but stop cutting.

   A product plate, a gallery thumbnail, a bundle pick: these sit in rows, so
   letting each one take its photograph's shape would stagger the grid and read
   as broken. They keep their ratio and show the whole picture inside it
   instead. Every one of these frames already paints itself black, and the
   photography is dark, so the letterboxing is not visible as a border, it just
   stops the bottle losing its cap and base.

   The hero carousel is deliberately not in this list. It is a full-bleed band
   whose whole job is to fill the width of the screen, and a photograph fitted
   inside it with bars down both sides would look like a mistake rather than
   like respect for the image. A hero slide wants a wide photograph. */
/* These frames fill again.
   Fitting an uploaded photograph inside them stopped the bottle being sliced,
   but the client reads the dark bar down each side as the picture being broken,
   and he is not wrong: a square frame with a portrait photograph fitted into it
   looks like a mistake. The frames fill, and the admin now states the shape
   each slot wants, so the photographs arriving in them are the right shape and
   there is nothing to lose. Where a crop is unavoidable it is biased above
   centre, off the plinth rather than off the cap. */
:is(.pcard-media, .gallery-main, .pick-media, .pair-media, .pdp-cta-media,
    .disc-sample-media, .rv-media, .gift-media, .quiz-result-media,
    .try-media, .jr-media, .gallery-thumb) img[src^="/media/"] {
  object-fit: cover;
  object-position: center 38%;
}
/* .offer-bottles is deliberately not in those lists. It is a row of small
   chips, not one frame around one photograph, so painting it black drew a band
   the width of the card with two thumbnails adrift in the middle of it. It gets
   its own treatment below. */

/* ===========================================================================
   HERO
   One photograph, filling the frame, with the bottle whole.

   What it replaces: a photograph inset to the right 66% of the screen, a
   two-line headline, a paragraph, a "featured" pill, two competing buttons and
   a five-row fragrance index printed over the picture. The 34% offset cropped
   every bottle to a middle slice, and the index was pale type on photography,
   which is unreadable the moment a slide is light.

   What it is now: the picture edge to edge, the house line small above the name
   of the fragrance on screen, one way in, and the carousel reduced to dots in
   the corner.

   The photograph is contained rather than cropped. These frames hold a single
   object and the whole point is the bottle, so nothing is cut off the top or
   the bottom, and the frame's own near-black shows at the sides where the
   picture is a different shape from the screen. That also absorbs the client's
   own uploads, which are portrait and would otherwise lose most of themselves
   to a wide band.
   ======================================================================== */

.hero-carousel.hero--feature {
  /* the screen, less whatever sits above the hero; --hero-offset is measured */
  min-height: calc(100svh - var(--hero-offset, 0px));
  display: flex;
  align-items: center;
  padding-block: 0;
  background: var(--bg);
}
@supports not (min-height: 100svh) {
  .hero-carousel.hero--feature { min-height: calc(100vh - var(--hero-offset, 0px)); }
}

/* edge to edge, not inset to the right of the copy */
.hero-carousel.hero--feature .hero-media { position: absolute; inset: 0; left: 0; }
.hero-carousel.hero--feature .hero-slide-img,
.hero-carousel.hero--feature .hero-slide-img img {
  width: 100%; height: 100%;
}
/* The photograph fills the frame, edge to edge, the way the reference does it.
   No backdrop, no fitting: a hero band is meant to be filled by its picture.

   Biased above centre. A wide band showing a portrait bottle shot has to lose
   the top and the bottom of it, and what it should lose is the plinth and the
   reflection, not the cap. */
.hero-carousel.hero--feature .hero-slide-img img {
  object-fit: cover;
  object-position: center 34%;
}

/* A landscape photograph is already composed for this band, with room around
   the bottle. Pushing its window up then takes twice as much off the base as
   off the top, which is what cut the foot off the Glamorous bottle on a short
   laptop window. Those share the crop evenly instead. The class is set from the
   file's own proportions, so both kinds of photograph can sit in this slot. */
.hero-carousel.hero--feature .hero-slide-img.is-wide img { object-position: center; }


/* a wash from the bottom so type stays legible over a bright slide, without
   greying out the middle of the photograph */
.hero-carousel.hero--feature .hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(6, 6, 8, 0.92) 0%, rgba(6, 6, 8, 0.55) 26%, transparent 58%),
    linear-gradient(to right, rgba(6, 6, 8, 0.75) 0%, rgba(6, 6, 8, 0.25) 34%, transparent 62%);
}
.hero-carousel.hero--feature::after { display: none; }

.hero-carousel.hero--feature .hero-inner {
  position: relative; z-index: 3; width: 100%;
  /* the block sits just below the middle of the frame, not on its floor */
  padding-inline: clamp(20px, 2.5vw, 48px);
  padding-block: 0;
  max-width: none;
}
.hero-carousel.hero--feature .hero-content {
  max-width: 46ch; text-align: left; margin-top: 12vh;
}

.hero--feature .hero-statement {
  margin: 0 0 20px;
  font-size: clamp(0.62rem, 0.62vw, 0.72rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero--feature .hero-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(1.6rem, 2.1vw, 2.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero--feature .hero-family {
  margin: 12px 0 26px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* one way in, outlined rather than filled: a solid gold slab under a
   photograph reads as an advert pasted on top of it */
.hero--feature .hero-cta {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #fff;
  border-radius: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.hero--feature .hero-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #0b0b0d;
}

.hero-carousel.hero--feature .hero-dots {
  position: absolute; z-index: 4;
  right: clamp(20px, 4vw, 54px);
  bottom: clamp(24px, 5vh, 54px);
  left: auto;
  display: flex; align-items: center; gap: 12px;
}
.hero-carousel.hero--feature .hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  padding: 0; border: 1px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.hero-carousel.hero--feature .hero-dot.is-active {
  background: var(--ink); border-color: var(--ink);
}

/* phone: the photograph takes the upper part of the screen and the words sit
   under it, so neither is laid over the other and the bottle stays whole */
@media (max-width: 860px) {
  .hero-carousel.hero--feature {
    min-height: calc(100svh - var(--hero-offset, 0px));
    /* the words sit at the foot of the frame and the bottle stands above them:
       centred, they landed across the label and neither could be read.
       The small-screen rules stack this as a column, where the vertical axis is
       justify-content and align-items only moves things sideways. */
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
  }
  /* the photograph fills the phone the same way it fills a laptop; the words
     sit on it under a wash rather than in a black strip beneath it */
  /* The small-screen design turned this into a 4:5 block in the flow, stacked
     above the words. That is the layout being replaced: it is a layer behind
     them now, so every one of those properties has to be put back. */
  .hero-carousel.hero--feature .hero-media {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    order: 0;
  }
  /* the phone frame is filled by the small-screen crop, same as the wide one */
  .hero-carousel.hero--feature .hero-slide-img img {
    object-fit: cover;
    object-position: center 38%;
  }
  .hero-carousel.hero--feature .hero-overlay {
    /* enough to read white type over a bright slide, not so much that the
       lower third turns into a black band under the photograph */
    background: linear-gradient(to top, rgba(6, 6, 8, 0.88) 0%, rgba(6, 6, 8, 0.62) 20%, rgba(6, 6, 8, 0.2) 40%, transparent 62%);
  }
  .hero-carousel.hero--feature .hero-inner { padding-bottom: clamp(84px, 15vh, 132px); }
  .hero-carousel.hero--feature .hero-content {
    max-width: none; margin-top: 0; text-align: center;
  }
  .hero--feature .hero-statement { letter-spacing: 0.26em; }
  .hero-carousel.hero--feature .hero-dots {
    right: 0; left: 0; bottom: clamp(22px, 4vh, 40px); justify-content: center;
  }
  .hero--feature .hero-cta {
    display: inline-block; text-align: center; min-width: min(100%, 340px);
  }
}

/* ===========================================================================
   SIGNUP DIALOG
   Shown once the visitor has read a little of the page. One field, because
   every extra one costs signups and nothing here uses a birthday.
   ======================================================================== */
.signup-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6, 6, 8, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: signup-fade 0.3s var(--ease, ease) both;
  overflow-y: auto;
}
@keyframes signup-fade { from { opacity: 0; } to { opacity: 1; } }

.signup-panel:focus { outline: none; }
.signup-panel {
  position: relative;
  width: min(100%, 460px);
  margin: auto;
  padding: clamp(30px, 6vw, 44px) clamp(22px, 5vw, 40px) clamp(24px, 5vw, 34px);
  background: var(--bg-2, #101012);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  text-align: center;
  animation: signup-rise 0.36s var(--ease, ease) both;
}
@keyframes signup-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.signup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted, #9a9a9a);
  cursor: pointer;
}
.signup-close:hover { color: var(--ink, #fff); }
.signup-close svg { width: 20px; height: 20px; }

.signup-title {
  margin: 6px 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
}
.signup-copy {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

/* the field above the button, not beside it: side by side in a 460px dialog
   leaves an email box too narrow to read what you typed */
.signup-panel .news-form--stacked {
  display: grid;
  gap: 10px;
  max-width: none;
  margin: 0 0 6px;
}
.signup-panel .news-form--stacked .btn { width: 100%; justify-content: center; }
.signup-panel .news-input { width: 100%; text-align: center; }
.signup-panel .news-msg { margin: 0 0 4px; }

/* under the button, for somebody not ready to hand over an address */
.signup-quiz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 18px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--gold-soft, #e4c583);
  border-bottom: 1px solid rgba(228, 197, 131, 0.4);
  padding-bottom: 3px;
}
.signup-quiz:hover { border-bottom-color: var(--gold-soft, #e4c583); }
.signup-quiz .icon { width: 15px; height: 15px; flex: none; }

.signup-consent {
  margin: 0 0 14px;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--faint, #6f6f6f);
}
.signup-decline {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.signup-decline:hover { color: var(--ink); }

/* a short screen scrolls the dialog rather than trapping its foot off-screen */
@media (max-height: 680px) {
  .signup-scrim { place-items: start center; }
  .signup-panel { margin-block: 12px; padding-block: 26px 22px; }
  .signup-copy { margin-bottom: 16px; }
}

/* ===========================================================================
   NAVBAR ACROSS THE TOP

   The theme layer above turns the header into an 84px rail down the left edge
   and pads the body to clear it. This puts it back across the top, to the
   measurements of the site the client asked us to match: a 96px bar, no
   background of its own, the menu 48px in from the left, the wordmark on the
   centre line of the screen, and the icons ending 48px from the right.

   It is transparent and the hero runs up behind it, which is why the bar has to
   pick up a background once the page scrolls: over photography white type reads
   perfectly, over the collection below it would not. .is-scrolled is already
   toggled by the header component.
   ======================================================================== */

@media (min-width: 901px) {
  :root { --nav-h: 96px; }

  [data-t="t1"] body { padding-left: 0; }

  [data-t="t1"] .site-header {
    position: sticky;
    inset: 0 0 auto 0;
    width: auto;
    height: var(--nav-h);
    z-index: 40;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
  }
  [data-t="t1"] .site-header.is-scrolled {
    background: rgba(6, 6, 8, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* three tracks, so the wordmark sits on the centre line of the screen and not
     merely in the space left over between the menu and the icons */
  [data-t="t1"] .nav-inner {
    height: var(--nav-h);
    max-width: none;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: none;
    align-items: center;
    justify-items: stretch;
    gap: 0;
  }

  [data-t="t1"] .nav-left {
    flex-direction: row;
    justify-self: start;
    align-items: center;
    gap: 26px;
  }
  [data-t="t1"] .nav-right {
    flex-direction: row;
    justify-self: end;
    align-items: center;
    gap: 22px;
  }
  [data-t="t1"] .nav-brand {
    flex-direction: row;
    justify-self: center;
    align-items: center;
    gap: 12px;
  }

  /* the wordmark reads across again, not up the rail */
  [data-t="t1"] .brand-word {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-size: 1.05rem;
    letter-spacing: 0.34em;
    padding: 0;
  }
  [data-t="t1"] .is-scrolled .brand-word { font-size: 1.05rem; }

  /* the links live in the drawer, same as the rail did it: five fragrances and
     six pages will not sit across a bar that also holds a centred wordmark */
  [data-t="t1"] .nav-links { display: none; }
  /* block, not inline-flex: the three bars are plain spans that stack on their
     own margins, and laying them out as flex items put them side by side, so
     the menu button rendered as a single dash */
  [data-t="t1"] .menu-toggle { display: block; order: 0; }

  [data-t="t1"] .announce { position: relative; z-index: 60; }

  /* the photograph runs up behind the bar rather than starting under it */
  [data-t="t1"] .hero-carousel.hero--feature { margin-top: calc(-1 * var(--nav-h)); }
}


/* ===========================================================================
   OFFER CARDS
   The bottles in each offer were a row of 46px squares floating in a band the
   width of the card, with a gap above the button where the shorter cards ran
   out of content. Two changes: the bottles overlap into one cluster that reads
   as a set rather than as leftover thumbnails, and that cluster is pinned to
   the button so every card's lower half lines up and the slack collects as
   breathing room under the description instead of as a hole.
   ======================================================================== */

.offer-bottles {
  /* the cluster and the button travel together at the foot of the card.
     The negative inline margin lends it the card's own padding: five chips at
     full size came within two pixels of the text column, and the card clips its
     own overflow anyway, so there is nothing to escape. */
  margin: auto -14px 20px;
  min-height: 0;
  gap: 0;
  align-items: flex-end;
  padding: 0;
  background: none;
}
.offer-card .btn { margin-top: 0; }

/* "Add Discovery Set" wrapped to two lines at four across, which made that one
   card's button taller and lifted its cluster out of line with the rest. The
   label is held on one line and given the room to do it. */
@media (min-width: 901px) {
  .offer-card .btn { white-space: nowrap; padding-inline: 10px; }
  .offer-card .btn__label { letter-spacing: 0.12em; }
}

.offer-bottles {
  /* One size drives the chip and its overlap together, so the cluster grows
     without ever outrunning the card: five chips come to --chip * 3.5. */
  --chip: clamp(52px, 4.6vw, 68px);
}
.offer-bottles img {
  /* upright, like the bottle: a square crop of a tall photograph cuts the cap
     off, where a portrait chip holds almost the whole thing */
  width: var(--chip);
  height: auto;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  object-fit: cover;
  object-position: center 34%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  /* the ring separates each chip from the one it overlaps; a box-shadow rather
     than an outline, because it follows the corner radius everywhere */
  box-shadow: 0 0 0 3px var(--panel-2), 0 12px 24px -12px rgba(0, 0, 0, 0.9);
  margin-left: calc(var(--chip) * -0.375);
  transition: transform 0.5s var(--ease-out), margin-left 0.5s var(--ease-out);
}
.offer-bottles img:first-child { margin-left: 0; }

/* they open a little as the card lifts */
.offer-card:hover .offer-bottles img { margin-left: calc(var(--chip) * -0.22); }
.offer-card:hover .offer-bottles img:first-child { margin-left: 0; }
.offer-card:hover .offer-bottles img:nth-child(odd) { transform: translateY(-3px); }

/* the feature card carries the house colour on its cluster too */
.offer-card.is-feature .offer-bottles img { border-color: var(--gold-line); }

@media (max-width: 900px) {
  /* one or two cards across, so there is room for a larger chip */
  .offer-bottles { --chip: clamp(58px, 15vw, 76px); }
  /* no hover on a touch screen, so the cluster stays as it is */
  .offer-card:hover .offer-bottles img { margin-left: calc(var(--chip) * -0.375); }
}