/* ==========================================================================
   VECCIA — storefront stylesheet
   House style (shared with vecciacourse.com): cream paper, deep forest
   green, old gold, clay. Playfair Display / Source Serif 4 / JetBrains Mono.
   Every scent carries its own accent via --scent (set inline from the DB).
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/source-serif-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif 4';
    src: url('../fonts/source-serif-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Amiri';
    src: url('../fonts/amiri-400-arabic.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

/* ---------- Tokens (the Veccia house palette) ---------- */
:root {
    --cream: #FAF7F1;        /* page ground */
    --cream-dark: #F1EBE0;   /* raised surface */
    --green: #3D5636;        /* primary actions */
    --green-deep: #2C3F27;   /* dark surfaces: drawer, footer, set band */
    --green-label: #4E5A46;  /* secondary UI text */
    --green-mist: #E7EDE2;   /* tinted surface */
    --gold: #8A6A1F;         /* accents, eyebrows, prices */
    --gold-bright: #C9A24B;  /* highlights on dark green */
    --clay: #A34F3E;         /* warnings, low stock */
    --ink: #1C1A17;          /* headings */
    --text: #3D3A34;         /* body text */
    --text-soft: #625D52;    /* secondary text */
    --line: #DCD4C4;
    --line-soft: #E8E2D5;
    --scent: var(--gold);    /* overridden per product */

    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Source Serif 4', Georgia, serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
    --font-ar: 'Amiri', serif;
    --font-price: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-h: 102px; /* announcement bar (30) + nav row (72) */
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

/* Cross-document view transitions: bottles morph from card to product page */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.4s; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
a, button { -webkit-tap-highlight-color: transparent; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--green-deep);
    /* No rubber-band overscroll: iOS reveals the body colour below the footer
       as a strip of "white space" otherwise. */
    overscroll-behavior-y: none;
    /* Clip any decorative horizontal bleed (e.g. the large Arabic watermark on
       the rightmost scent card) so the green html background never peeks out as
       a strip down the right edge. 'clip' (not hidden) avoids making the root a
       scroll container, so smooth scrolling and the fixed nav stay intact. */
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--cream);
    overscroll-behavior-y: none;
    overflow-x: clip;
    /* Sticky footer: the page is a column at least as tall as the small
       viewport, with <main> taking the slack, so the footer always sits at the
       bottom and iOS can never reveal a strip of body colour beneath it (the
       old overscroll-behavior fix alone is not honoured on iOS document scroll). */
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, figure, fieldset, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; }

::selection { background: var(--gold-bright); color: var(--ink); }

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

/* ---------- Type helpers ---------- */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold);
}

.section-head {
    display: grid;
    gap: 0.9rem;
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}
.section-head__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.15;
    color: var(--ink);
}
.section-head--page { padding-top: calc(var(--nav-h) + clamp(2.5rem, 7vw, 5rem)); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 1.05em 2.1em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
                border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--solid {
    background: var(--green);
    color: var(--cream);
}
.btn--solid:hover { background: var(--green-deep); }
.btn--solid:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--gold {
    background: var(--gold-bright);
    color: var(--ink);
}
.btn--gold:hover { background: #d9b563; }

.btn--ghost {
    border-color: var(--line);
    color: var(--ink);
}
.btn--ghost:hover { border-color: var(--green); color: var(--green); }

.btn--block { width: 100%; }

/* ---------- Nav ---------- */
.site-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
                backdrop-filter 0.4s var(--ease);
    border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled,
.page-checkout .site-nav {
    background: rgba(250, 247, 241, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line-soft);
}

.site-nav__bar {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gutter);
    background: var(--green-deep);
    color: rgba(250, 247, 241, 0.85);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.site-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 72px;
    padding: 0 var(--gutter);
}

.site-nav__side { display: flex; gap: 1.8rem; align-items: center; }
.site-nav__side--right { justify-content: flex-end; }

.site-nav__link {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--green-label);
    transition: color 0.3s var(--ease);
}
.site-nav__link:hover { color: var(--ink); }

.site-nav__wordmark {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem 0.6rem;   /* 44px tap target, visually unchanged */
    margin: -0.5rem -0.6rem;
}
.site-nav__wordmark-img { height: 30px; width: auto; display: block; }
.site-nav__wordmark-img--cream { display: none; }
.page-quiz .site-nav__wordmark-img--green { display: none; }
.page-quiz .site-nav__wordmark-img--cream { display: block; }

.site-nav__cart {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* 44px tap target (audit): pad the hit area, pull it back with negative
       margin so the visual layout doesn't move. */
    padding: 0.75rem 0.6rem;
    margin: -0.35rem -0.6rem;
}
.site-nav__cart-label {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--green-label);
    transition: color 0.3s var(--ease);
}
.site-nav__cart:hover .site-nav__cart-label { color: var(--ink); }
.site-nav__cart-count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    background: var(--green);
    color: var(--cream);
    border-radius: 999px;
    transition: transform 0.3s var(--ease);
}
.site-nav__cart-count.is-empty { background: transparent; color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--line); }
.site-nav__cart-count.is-bump { transform: scale(1.35); }

/* Hamburger + mobile menu drawer (desktop hides both) */
.site-nav__menu { display: none; }
.site-nav__menu {
    width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
    padding: 0; flex-direction: column; justify-content: center; gap: 5px; align-items: center;
}
.site-nav__menu span { display: block; width: 21px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav-drawer { display: none; }
/* THE LAW: [hidden] always wins. Author display:flex/grid/inline-flex on a
   class otherwise overrides the attribute (bit us in the chat panel, the
   checkout state row, and the partner form's stuck SENDING button + phantom
   copy box). One global rule ends the whole bug class. */
[hidden] { display: none !important; }
.nav-drawer[hidden] { display: none; }
.nav-drawer {
    position: fixed; inset: 0; z-index: 75;
    background: rgba(20, 16, 11, 0);
    transition: background-color 0.34s var(--ease);
}
.nav-drawer.is-open { background: rgba(20, 16, 11, 0.42); }
.nav-drawer__panel {
    position: absolute; inset: 0 auto 0 0;
    width: min(78vw, 340px); height: 100%;
    background: var(--cream);
    padding: 4.5rem 1.6rem 2rem;
    box-shadow: 12px 0 40px rgba(28, 26, 23, 0.25);
    transform: translateX(-100%);
    transition: transform 0.34s var(--ease);
    display: flex; flex-direction: column;
}
.nav-drawer.is-open .nav-drawer__panel { transform: none; }
.nav-drawer__close {
    position: absolute; top: 1rem; right: 1.1rem;
    width: 40px; height: 40px; border: 0; background: none; cursor: pointer;
    font-size: 1.8rem; line-height: 1; color: var(--ink);
}
.nav-drawer__links { display: flex; flex-direction: column; gap: 0.2rem; }
.nav-drawer__links a {
    padding: 0.85rem 0.2rem;
    font-family: var(--font-display); font-size: 1.4rem; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--line-soft);
}
/* Segmented language toggle at the foot of the drawer — no label needed, the
   two pills speak for themselves. One line each, never wrapping. */
.nav-drawer__lang {
    margin-top: auto;
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    padding: 3px;
    background: color-mix(in srgb, var(--green-deep) 4%, transparent);
}
.nav-drawer__lang a {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    padding: 0.7rem 0.4rem;
    font-size: 0.9rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-drawer__lang a.is-active { background: var(--green-deep); color: var(--cream); }

/* First-visit language chooser */
.lang-splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(20, 16, 11, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.lang-splash__card {
    width: min(23rem, 100%);
    background: var(--cream);
    border-radius: 18px;
    padding: 2.2rem 1.8rem;
    text-align: center;
    box-shadow: 0 24px 70px rgba(28, 26, 23, 0.4);
}
.lang-splash__eyebrow { font-family: var(--font-display); font-size: 1.7rem; color: var(--green-deep); margin-bottom: 0.9rem; }
.lang-splash__title { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--ink); }
.lang-splash__sub { color: var(--text-soft); font-size: 1rem; margin: 0.15rem 0 1.5rem; }
.lang-splash__btns { display: grid; gap: 0.6rem; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(110% 80% at 80% 25%, color-mix(in srgb, var(--scent) 16%, transparent), transparent 62%),
        var(--cream);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(1rem, 4vw, 4rem);
    width: min(74rem, 100%);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
    flex: 1;
}

.hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    line-height: 1.06;
    margin: 1.2rem 0 1.4rem;
    color: var(--ink);
}
.hero__line { display: block; }
.hero__line--accent {
    color: var(--green);
    font-style: italic;
}

.hero__sub {
    max-width: 34ch;
    color: var(--text-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}
.hero__plain {
    max-width: 40ch;
    margin-top: 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: color-mix(in srgb, var(--text-soft) 78%, transparent);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.2rem;
}

.hero__media {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 380px;
}
.hero__media img {
    position: relative;
    z-index: 2;
    width: min(340px, 68%);
    /* The rotation swaps between bottles with slightly different proportions.
       A FIXED box (constant aspect ratio, contain inside) means the layout
       never moves — the headline stops nudging on every swap. */
    aspect-ratio: 5 / 11;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 26px 40px rgba(28, 26, 23, 0.28));
    transition: transform 0.8s var(--ease), opacity 0.55s var(--ease);
    will-change: opacity;
}
.hero__media a:hover img { transform: translateY(-10px); }
/* Rotating hero: each scent crossfades to the next; the aura colour swaps while
   the bottle is faded out so the change reads as one smooth beat. */
/* Pure opacity crossfade: no translate/scale during the swap, so the bottle
   never changes position mid-transition (the "jump" was the mismatched
   0.8s transform vs 0.5s opacity firing on every rotation). */
.hero__media.is-swapping img { opacity: 0; }
.hero__ar, .hero__glow { transition: opacity 0.6s var(--ease); }
.hero__media.is-swapping .hero__ar { opacity: 0; }

.hero__glow {
    position: absolute;
    inset: 8% 4%;
    z-index: 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--scent) 26%, transparent), transparent 72%);
    animation: glow-breathe 9s var(--ease) infinite alternate;
}

/* Liquid-glass shimmer: a soft light band sweeps across the bottle once, as it
   settles in. Transform + opacity only, so it rides the compositor at 60fps. */
.hero__media::after {
    content: '';
    position: absolute;
    inset: 6% 10%;
    z-index: 3;
    pointer-events: none;
    border-radius: 40% 40% 46% 46% / 55% 55% 45% 45%;
    background: linear-gradient(108deg, transparent 40%, rgba(255, 255, 255, 0.5) 49%, transparent 60%);
    mix-blend-mode: screen;
    transform: translateX(-130%);
    opacity: 0;
}
.hero__media.is-in::after { animation: hero-shine 1.6s var(--ease) 0.55s 1; }
@keyframes hero-shine {
    0%   { transform: translateX(-130%); opacity: 0; }
    28%  { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
}

.hero__ar {
    position: absolute;
    z-index: 1;
    font-family: var(--font-ar);
    font-size: clamp(11rem, 26vw, 21rem);
    line-height: 1;
    color: color-mix(in srgb, var(--scent) 32%, transparent);
    opacity: 0.5;
    transform: translateY(-6%);
    user-select: none;
    pointer-events: none;
}

@keyframes glow-breathe {
    from { opacity: 0.6; transform: scale(0.97); }
    to { opacity: 1; transform: scale(1.05); }
}

/* Ticker */
.ticker {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    background: var(--cream-dark);
    overflow: hidden;
    padding: 0.85rem 0;
}
.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-roll 46s linear infinite;
}
.ticker__seq {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--green-label);
    white-space: nowrap;
}
.ticker__seq i {
    font-style: normal;
    color: var(--gold);
    margin: 0 1.6rem;
}
@keyframes ticker-roll {
    to { transform: translateX(-50%); }
}

/* ---------- Scent grid / cards ---------- */
.collection { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); }

.scent-grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.4rem, 3.5vw, 3rem) clamp(0.9rem, 2.5vw, 2.2rem);
    width: min(74rem, 100%);
    margin: clamp(2.2rem, 5vw, 3.8rem) auto 0;
    padding: 0 var(--gutter);
}

.scent-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    /* Let the grid track shrink below the nowrap price's width, or the 1fr
       columns balloon past the viewport on mobile. */
    min-width: 0;
}
.scent-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}
/* Quick add straight from the card, no PDP needed. Adds a 10ml pair. */
.scent-card__quickadd {
    margin: 0.6rem auto 0;
    padding: 0.55em 1.1em;
    border: 1px solid color-mix(in srgb, var(--scent, var(--green-deep)) 40%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--scent, var(--green-deep)) 8%, #fff);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.scent-card__quickadd:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--cream); }
.scent-card__quickadd.is-added { background: var(--green-deep); border-color: var(--green-deep); color: var(--cream); }
.scent-card__quickadd:active { transform: scale(0.96); }

.scent-card__media {
    /* No box, no frame: the scent exists as a living cloud of its own
       color, and the bottle floats on it. Nothing here is rectangular. */
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: visible;
    background: none;
}
/* the color cloud: an irregular blob that visibly morphs and sways */
.scent-card__media::before {
    content: '';
    position: absolute;
    inset: 4% 0 8% 0;
    z-index: 0;
    will-change: transform;
    background:
        radial-gradient(85% 70% at 32% 24%, color-mix(in srgb, var(--scent) 40%, #FFFDF7) 0%, transparent 60%),
        linear-gradient(158deg, color-mix(in srgb, var(--scent) 72%, #FFF8EA) 0%, var(--scent) 46%, color-mix(in srgb, var(--scent) 78%, #1A150D) 100%);
    border-radius: 62% 38% 55% 45% / 52% 60% 40% 48%;
    box-shadow:
        0 34px 70px -24px color-mix(in srgb, var(--scent) 55%, transparent),
        0 0 90px -30px color-mix(in srgb, var(--scent) 60%, transparent);
    animation: blob-live 8s ease-in-out infinite alternate;
}
/* a second, softer cloud drifting behind it, out of phase */
.scent-card__media::after {
    content: '';
    position: absolute;
    inset: -4% -8% 0 -8%;
    z-index: -1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--scent) 34%, transparent), transparent 70%);
    border-radius: 45% 55% 40% 60% / 58% 44% 56% 42%;
    filter: blur(22px);
    will-change: transform;
    animation: blob-live 11s ease-in-out infinite alternate-reverse;
}
.scent-card:nth-child(3n)   .scent-card__media::before { animation-delay: -2.6s; }
.scent-card:nth-child(3n+1) .scent-card__media::before { animation-delay: -5.4s; }
.scent-card:nth-child(2n)   .scent-card__media::after  { animation-delay: -4s; }
@keyframes blob-live {
    /* transform-only: the compositor moves a pre-painted layer, no repaints */
    0%   { transform: rotate(-4deg) scale(0.96) translateY(1.5%); }
    100% { transform: rotate(4deg) scale(1.04) translateY(-1.5%); }
}
.scent-card__media img {
    position: relative;
    z-index: 3;
    width: 64%;
    max-height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 22px 30px color-mix(in srgb, var(--scent) 42%, rgba(20, 14, 6, 0.45)));
    will-change: transform;
    animation: bottle-float 5.5s ease-in-out infinite alternate;
}
.scent-card:nth-child(2n) .scent-card__media img { animation-delay: -2.7s; }
@keyframes bottle-float {
    0%   { transform: translateY(4px) rotate(-0.6deg); }
    100% { transform: translateY(-9px) rotate(0.6deg); }
}
.scent-card__glow {
    position: absolute;
    inset: 12%;
    z-index: 2;
    background: radial-gradient(closest-side, color-mix(in srgb, #FFF6DF 34%, transparent), transparent 70%);
    opacity: 0.55;
    will-change: transform;
    animation: glow-swell 5.5s ease-in-out infinite alternate;
    transition: opacity 0.65s var(--ease);
}
@keyframes glow-swell {
    0%   { transform: scale(0.94); }
    100% { transform: scale(1.08); }
}
.scent-card__ar {
    position: absolute;
    left: 50%;
    z-index: 2;
    /* Centred so a long name spreads both ways, not off one edge. NO overflow
       clip here — it was chopping the tall Arabic strokes and hiding the glyph. */
    white-space: nowrap;
    text-align: center;
    font-family: var(--font-ar);
    font-size: clamp(4.2rem, 12vw, 8.5rem);
    /* Not flat ink: light falls down the calligraphy, brightest where the
       strokes crest and fading toward their feet, with a soft press behind it
       so it sits IN the colour field rather than on top of it. (Was ~0.22
       effective — 40% mix x 0.55 — and near invisible.) */
    background: linear-gradient(176deg,
        color-mix(in srgb, #FFF9EC 96%, transparent) 10%,
        color-mix(in srgb, #FFF9EC 64%, transparent) 56%,
        color-mix(in srgb, #FFF9EC 36%, transparent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 8px 18px color-mix(in srgb, #1A150D 32%, transparent));
    opacity: 0.74;
    /* Pin the glyph INTO the aura at cap height. Its natural anchor floats
       with Arabic font metrics, which dropped short names (وهج، نسيم) into
       the cream zone above the blob — cream on cream, invisible. An explicit
       top makes every name land on colour, peeking beside the slim gold cap. */
    top: 7%;
    transform: translate(-50%, 0);
    pointer-events: none;
    user-select: none;
    transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
/* Set cards carry long Arabic words (اكتشاف, الأيقونات) — shrink them so they
   stay within the card WHEREVER a set card renders (shop, setband, PDP
   "also in the collection"), not just inside #collection-discovery. */
#collection-discovery .scent-card__ar,
.setband .scent-card__ar,
.scent-card--set .scent-card__ar { font-size: clamp(2.3rem, 7vw, 4rem); }

.scent-card:hover .scent-card__glow { opacity: 1; }
.scent-card:hover .scent-card__ar { opacity: 0.9; transform: translate(-50%, -4%); }

.scent-card__text { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 0.15rem 0; flex: 1; }
.scent-card__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem);
    color: var(--ink);
}
.scent-card__tagline {
    color: var(--text-soft);
    font-size: 0.9rem;
}
.scent-card__price {
    margin-top: auto;
    padding-top: 0.45rem;
    font-family: var(--font-price);
    font-weight: 600;
    font-size: clamp(0.72rem, 3.4vw, 0.95rem);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    /* Each price keeps itself whole, but the struck anchor may drop to its
       own line on narrow cards: forcing both onto one line overflowed the
       card and collided with the neighbour's price at 375px. */
    line-height: 1.45;
}
.scent-card__now { white-space: nowrap; }
.scent-card__was {
    white-space: nowrap;
    margin-left: 0.6rem;
    font-size: 0.78em;
    font-weight: 500;
    color: var(--clay);
    text-decoration: line-through;
}

/* ---------- Trust strip ---------- */
.trustrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0.85rem var(--gutter);
    background: color-mix(in srgb, var(--green-deep) 5%, transparent);
    border-block: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.trustrow li { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.trustrow__star { color: var(--gold-bright); }

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.9rem 1.4rem;
    padding: 1.1rem var(--gutter);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-label);
    text-align: center;
}
.trust-strip i { font-style: normal; color: var(--gold); }
.trust-strip a { color: var(--ink); text-underline-offset: 4px; }
.trust-strip a:hover { color: var(--green); }

/* ---------- Discovery set band (the dark green moment) ---------- */
.setband {
    position: relative;
    background: var(--green-deep);
    color: var(--cream);
    margin: clamp(4rem, 9vw, 7rem) 0 0;
    overflow: hidden;   /* the bottle fan stays inside its band */
}
.setband__stripes {
    position: absolute;
    inset: 0 0 auto 0;
    display: flex;
    height: 3px;
}
.setband__stripes i { flex: 1; }

.setband__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    width: min(70rem, 100%);
    margin: 0 auto;
    padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
}
.setband__media img { width: min(400px, 100%); margin: 0 auto; }
.setband .eyebrow { color: var(--gold-bright); }
.setband__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 1.12;
    margin: 1rem 0 1.2rem;
    color: var(--cream);
}
.setband__text {
    color: rgba(250, 247, 241, 0.75);
    max-width: 44ch;
    margin-bottom: 2rem;
}

/* ---------- Story ---------- */
.story {
    position: relative;
    display: grid;
    place-items: center;
    gap: 1.3rem;
    text-align: center;
    /* Quote + attribution only now — compact, close to the footer. */
    padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
}
.story__ar {
    position: absolute;
    font-family: var(--font-ar);
    font-size: clamp(9rem, 22vw, 16rem);
    color: color-mix(in srgb, var(--green) 10%, transparent);
    pointer-events: none;
    user-select: none;
}
.story__quote {
    position: relative;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 3.2vw, 2.1rem);
    line-height: 1.4;
    max-width: 44ch;
    color: var(--ink);
}
.story__attr { position: relative; color: var(--text-soft); font-size: 0.9rem; }

/* ---------- Shop page ---------- */
.shop-page { padding-bottom: clamp(3rem, 7vw, 6rem); }
.shop-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.6rem;
}
.shop-filter__chip {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.6em 1.3em;
    border: 1px solid rgba(60, 86, 54, 0.28);
    border-radius: 999px;
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.shop-filter__chip:hover { border-color: var(--green-deep); color: var(--ink); }
.shop-filter__chip.is-active { background: var(--green-deep); border-color: var(--green-deep); color: var(--cream); }
/* Filter transition: cards fade + shrink out rather than hard-cutting */
.scent-card { transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.scent-card.is-filtered-out { opacity: 0; transform: scale(0.93); pointer-events: none; }
/* One-shot "settle" pulse on cards that STAY visible when the filter changes,
   so switching Him/Her registers even when unisex cards never leave. Staggered
   per-card in JS via animation-delay for a soft cascade. */
.scent-card.is-filter-settle { animation: filterSettle 0.5s var(--ease) both; }
@keyframes filterSettle {
    0%   { opacity: 0.45; transform: translateY(9px) scale(0.93); }
    60%  { opacity: 1; transform: translateY(-3px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .scent-card.is-filter-settle { animation: none; }
}
.shop-collection { margin-top: clamp(3rem, 7vw, 5.5rem); scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.shop-collection__name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2rem);
    text-align: center;
    color: var(--ink);
}
.shop-collection__desc {
    color: var(--text-soft);
    text-align: center;
    margin-top: 0.5rem;
}

/* ---------- Product page ---------- */
.product { padding-top: calc(var(--nav-h) + 1.5rem); }

.crumbs {
    width: min(74rem, 100%);
    margin: 0 auto;
    padding: 0.5rem var(--gutter) 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-soft);
    display: flex;
    gap: 0.7rem;
    /* The way back rides along: read the whole page, leave from anywhere.
       Only the pill itself catches taps — the bar is a ghost. */
    position: sticky;
    top: calc(var(--nav-h, 102px) + 0.5rem);
    z-index: 55;
    pointer-events: none;
}
.crumbs .crumbs__back {
    pointer-events: auto;
    background: color-mix(in srgb, #FFFDF8 88%, var(--green) 12%);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px -6px rgba(28, 26, 23, 0.25);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
/* Steps aside while reading down the page; returns on scroll-up. */
.crumbs.is-away .crumbs__back { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.product__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 5rem);
    width: min(74rem, 100%);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.product__media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    align-self: start;
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
}
/* the viewer: frames stacked, cross-fading */
.pstage {
    position: relative;
    width: 100%;
    /* One var so children (the bottle img cap below) can track the stage
       height — a % max-height is IGNORED inside an auto-sized grid cell. */
    --pstage-h: clamp(360px, 44vw, 560px);
    min-height: var(--pstage-h);
}
.pstage__panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.99);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
}
.pstage__panel.is-current {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
/* Swipe direction: the incoming frame slides in from the sw/thumb side */
.pstage[data-dir="next"] .pstage__panel.is-current { animation: pstage-from-right 0.4s var(--ease); }
.pstage[data-dir="prev"] .pstage__panel.is-current { animation: pstage-from-left 0.4s var(--ease); }
@keyframes pstage-from-right { from { opacity: 0; transform: translateX(30px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes pstage-from-left  { from { opacity: 0; transform: translateX(-30px) scale(0.98); } to { opacity: 1; transform: none; } }
.pstage__panel--photo img {
    width: min(440px, 92%);
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
}
.product__media .pstage__panel[data-panel="bottle"] img {
    position: relative;
    z-index: 2;
    /* The cutouts are tall (~1:2). Cap by the stage HEIGHT as well as width,
       or a 380px-wide bottle renders ~745px tall and spills over the stage
       onto the thumbnails on desktop. The panel is inset:0, so 94% tracks
       the stage height. */
    width: auto;
    height: auto;
    max-width: min(380px, 76%);
    max-height: calc(var(--pstage-h, 560px) - 2.5rem);
    object-fit: contain;
    filter: drop-shadow(0 26px 40px rgba(28, 26, 23, 0.28));
}
.product__glow {
    position: absolute;
    inset: 8% 10% 12% 10%;
    z-index: 0;
    background:
        radial-gradient(80% 65% at 34% 26%, color-mix(in srgb, var(--scent) 34%, #FFFDF7) 0%, transparent 62%),
        linear-gradient(158deg, color-mix(in srgb, var(--scent) 52%, #FFF8EA) 0%, color-mix(in srgb, var(--scent) 78%, transparent) 55%, color-mix(in srgb, var(--scent) 64%, #221B10) 100%);
    border-radius: 62% 38% 55% 45% / 52% 60% 40% 48%;
    box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--scent) 55%, transparent);
    will-change: transform;
    animation: blob-live 9s ease-in-out infinite alternate;
    opacity: 0.9;
}
.product__ar {
    position: absolute;
    z-index: 0;
    font-family: var(--font-ar);
    font-size: clamp(6rem, 11vw, 10rem);
    color: color-mix(in srgb, var(--scent) 24%, transparent);
    opacity: 0.4;
    transform: translateY(-8%);
    pointer-events: none;
    user-select: none;
}

.product__panel { padding: 1rem 0 3rem; max-width: 34rem; }

.product__name {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1.05;
    margin: 0.9rem 0 0.5rem;
    color: var(--ink);
}
.product__name-ar {
    font-family: var(--font-ar);
    font-size: 0.55em;
    color: var(--green-label);
}
.product__tagline { color: var(--text-soft); font-size: 1.05rem; }

/* Buyer-proof chips: quick reassurance up top, before the price */
.proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.9rem 0 0.2rem;
    padding: 0;
    list-style: none;
}
.proof__chip {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5em 0.85em;
    border-radius: 999px;
    /* Neutral hairline, not scent-tinted — the coloured borders read cheap next
       to the serif type. Quiet trust marks, not loud badges. */
    background: color-mix(in srgb, var(--ink) 3.5%, transparent);
    border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
    color: var(--text-soft);
    white-space: nowrap;
}
.proof__chip--star { color: var(--gold-deep, #8A6A1F); }
.proof__chip--halal {
    color: var(--green-deep);
    background: color-mix(in srgb, var(--green-deep) 8%, transparent);
    border-color: color-mix(in srgb, var(--green-deep) 22%, transparent);
}
.proof__chip--star span { color: var(--gold-bright, #c2a06b); }
.proof__chip--hot {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: var(--cream);
}

/* Practical scent card: smells like / best for / strength / projection */
.scentcard {
    margin: 1.1rem 0 0.4rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--scent, var(--green-deep)) 4%, transparent);
    display: grid;
    gap: 0.5rem;
}
.scentcard__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.6rem; align-items: baseline; }
.scentcard__key {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep, #8A6A1F);
}
.scentcard__val { color: var(--ink); font-size: 0.95rem; line-height: 1.4; }
@media (max-width: 560px) {
    .scentcard__row { grid-template-columns: 1fr; gap: 0.1rem; }
}

.product__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.7rem;
    font-family: var(--font-price);
    font-weight: 650;
    font-size: 1.7rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 1.6rem 0 1.8rem;
}
.product__was {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--clay);
    text-decoration: line-through;
}
.product__anchor-note { font-size: 0.78rem; color: var(--text-soft); }
.product__price-size {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* Size selector */
.sizes__legend {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 0.8rem;
}
.sizes__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 0.6rem;
}
.size input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.size__box {
    position: relative;
    display: grid;
    gap: 0.15rem;
    justify-items: center;
    padding: 0.85rem 0.5rem 0.8rem;
    border: 1px solid var(--line);
    background: #fff;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.size__ml { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ink); }
.size__price { font-family: var(--font-price); font-weight: 600; font-size: 0.88rem; font-variant-numeric: tabular-nums; color: var(--text-soft); transition: color 0.3s var(--ease); }
.size__was { display: none; }
.size__tag {
    position: absolute;
    top: -0.55em;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    background: var(--cream);
    color: var(--gold);
    padding: 0 0.6em;
}
.size:hover .size__box { border-color: var(--green-label); }
.size input:checked + .size__box {
    border-color: color-mix(in srgb, var(--scent) 70%, var(--ink));
    background: color-mix(in srgb, var(--scent) 10%, #fff);
}
.size input:checked + .size__box .size__price { color: var(--ink); }
.size input:focus-visible + .size__box { outline: 2px solid var(--green); outline-offset: 3px; }
.size.is-out { opacity: 0.4; }
.size.is-out .size__box { text-decoration: line-through; cursor: not-allowed; }

/* Product gallery thumbnails */
/* the thumb rail beneath the viewer */
.pthumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
    position: relative;
    z-index: 3;
}
.pthumb {
    position: relative;
    width: 54px;
    height: 68px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    opacity: 0.7;
    cursor: pointer;
    overflow: hidden;
    transition: opacity 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.pthumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
/* Bottle + box are transparent cutouts — show the WHOLE item, not a zoomed-in
   crop. (Model/campaign photo thumbs keep cover so they fill the frame.) */
.pthumb[data-go="bottle"] img,
.pthumb--box img { object-fit: contain; }
.pthumb:hover { opacity: 1; transform: translateY(-2px); }
.pthumb.is-current { opacity: 1; border-color: var(--green); }
.pthumb__badge {
    position: absolute;
    bottom: 3px;
    right: 3px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(28, 26, 23, 0.78);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
/* the pyramid thumb: a little stack of tinted bars */
.pthumb--pyramid { display: grid; place-items: center; gap: 2px; background: color-mix(in srgb, var(--scent) 8%, #fff); }
.pthumb__pyr { display: grid; gap: 2px; justify-items: center; }
.pthumb__pyr i { display: block; height: 4px; border-radius: 2px; background: var(--scent); }
.pthumb__pyr i:nth-child(1) { width: 10px; opacity: 0.9; }
.pthumb__pyr i:nth-child(2) { width: 18px; opacity: 0.7; }
.pthumb__pyr i:nth-child(3) { width: 26px; opacity: 0.55; }
.pthumb__cap {
    font-family: var(--font-body);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-top: 3px;
}

/* the note pyramid inside its frame */
.pyramid {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: min(400px, 92%);
}
.pyramid__ar {
    position: absolute;
    top: -6%;
    z-index: 0;
    font-family: var(--font-ar);
    font-size: clamp(7rem, 16vw, 12rem);
    color: color-mix(in srgb, var(--scent) 16%, transparent);
    pointer-events: none;
    user-select: none;
}
.pyramid__tier {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    text-align: center;
    color: var(--ink);
    background: color-mix(in srgb, var(--scent) calc(16% + var(--tier) * 12%), #FFFDF8);
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--scent) 60%, transparent);
    animation: pyr-rise 0.6s var(--ease) both;
}
.pyramid__tier--1 { width: 62%; animation-delay: 0.05s; }
.pyramid__tier--2 { width: 80%; animation-delay: 0.15s; }
.pyramid__tier--3 { width: 100%; animation-delay: 0.25s; }
@keyframes pyr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pyramid__when {
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.pyramid__label { font-family: var(--font-display); font-size: 1.15rem; }
.pyramid__notes { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-soft); }
.pstage__panel--pyramid { padding: 1.5rem 0; }

/* ---------- The dry-down: scrub the 12 hours the scent spends on skin ----------
   Read top to bottom the tiers already ARE a timeline, so time is the control.
   Dimming only starts once JS adds .is-ready, so with no JS the pyramid still
   reads exactly as before. */
.drydown__clock {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--ink);
}
.pyramid[data-drydown].is-ready .pyramid__tier {
    opacity: 0.4;
    filter: saturate(0.5);
    transition: opacity 0.45s var(--ease), filter 0.45s var(--ease),
                box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.pyramid[data-drydown].is-ready .pyramid__tier.is-live {
    opacity: 1;
    filter: none;
    transform: scale(1.02);
    box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--scent) 78%, transparent),
                0 0 0 1px color-mix(in srgb, var(--scent) 45%, transparent);
}
.pyramid__note {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
    border-radius: 3px;
    padding: 0.1em 0.05em;
    margin: 0 0.1em;
    cursor: pointer;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pyramid__note:hover,
.pyramid__note.is-open { color: var(--ink); border-bottom-color: var(--scent); border-bottom-style: solid; }
.pyramid__note:focus-visible { outline: 2px solid var(--scent); outline-offset: 2px; }

.drydown__range {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 44px;              /* real thumb-size tap target on phones */
    margin: 0.15rem 0 0;
    background: none;
    cursor: pointer;
}
.drydown__range::-webkit-slider-runnable-track {
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--scent) calc(var(--pos, 0) * 100%),
        color-mix(in srgb, var(--ink) 15%, transparent) 0);
}
.drydown__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 26px; height: 26px;
    margin-top: -11.5px;
    border-radius: 50%;
    background: #FFFDF8;
    border: 2px solid var(--scent);
    box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--scent) 70%, transparent);
}
.drydown__range::-moz-range-track { height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 15%, transparent); }
.drydown__range::-moz-range-progress { height: 3px; border-radius: 999px; background: var(--scent); }
.drydown__range::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid var(--scent); border-radius: 50%; background: #FFFDF8; }
.drydown__range:focus-visible { outline: 2px solid var(--scent); outline-offset: 4px; }

.drydown__say {
    position: relative;
    z-index: 1;
    min-height: 2.4em;
    max-width: 30ch;
    text-align: center;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-soft);
}
.drydown__say b { font-weight: 600; color: var(--ink); }

/* the box viewer, centred inside its gallery frame */
.pstage__panel--box .box3d__stage {
    width: 100%;
    height: 100%;
    margin: 0;
    perspective: 1100px;
    display: grid;
    place-items: center;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.pstage__panel--box .box3d__stage:active { cursor: grabbing; }
.box3d__grab {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    pointer-events: none;
}

/* Discovery set picker */
.picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.picker__item input { position: absolute; opacity: 0; pointer-events: none; }
.picker__box {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 0.8rem 0.4rem 0.7rem;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.picker__box img {
    height: 72px;
    width: auto;
    /* each vial glows in its own scent colour, same language as the cards —
       strong enough to actually read as that scent at thumbnail size */
    background: radial-gradient(closest-side, color-mix(in srgb, var(--scent) 62%, transparent), color-mix(in srgb, var(--scent) 24%, transparent) 62%, transparent 88%);
    border-radius: 50%;
    padding: 6px 14px;
}
.picker__name { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); }
.picker__note { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.picker__item:hover .picker__box { border-color: var(--green-label); }
.picker__item input:checked + .picker__box {
    border-color: color-mix(in srgb, var(--scent) 70%, var(--ink));
    background: color-mix(in srgb, var(--scent) 10%, #fff);
    transform: translateY(-2px);
}
.picker__item input:focus-visible + .picker__box { outline: 2px solid var(--green); outline-offset: 3px; }
.picker__item.is-out { opacity: 0.4; }
.picker__item.is-out .picker__box { cursor: not-allowed; }

.buy__worth { margin-top: 1rem; font-size: 0.92rem; color: var(--text-soft); }
.buy__worth s { color: var(--clay); }

.buy__pairnote { margin-top: 0.8rem; font-size: 0.82rem; color: var(--text-soft); }

.cart-pairnudge {
    margin: 0.8rem 0 0.2rem;
    padding: 0.65rem 0.9rem;
    background: rgba(201, 162, 75, 0.14);
    border-left: 2px solid var(--gold-bright);
    font-size: 0.8rem;
    color: var(--cream);
}
.cart-page .cart-pairnudge { color: var(--ink); background: color-mix(in srgb, var(--gold-bright) 14%, #fff); }

/* Restock alert capture */
.restock { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--line); background: var(--cream-dark); }
.restock__note { font-size: 0.88rem; color: var(--text); margin-bottom: 0.7rem; }
.restock__row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.restock__row input {
    font: inherit; font-size: 0.9rem; padding: 0.6em 0.8em;
    border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.restock__row input:focus { outline: none; border-color: var(--green); }
.restock__btn {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0 1.1em; background: var(--green); color: var(--cream);
    transition: background-color 0.3s var(--ease);
}
.restock__btn:hover { background: var(--green-deep); }
.restock__done { color: var(--green-deep); font-size: 0.88rem; }

.buy__stock {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clay);
    margin-top: 0.9rem;
}

.buy__cta { margin-top: 1.4rem; padding-top: 1.25em; padding-bottom: 1.25em; }
.buy__cta.is-added { background: var(--gold); color: var(--cream); }

.assurance {
    display: grid;
    margin-top: 1.8rem;
    border-top: 1px solid var(--line-soft);
}
.assurance li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.85rem;
    color: var(--text-soft);
}

.product__desc {
    margin-top: 1.8rem;
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text);
    max-width: 46ch;
}

/* Wear timeline */
.wear { padding: clamp(4rem, 9vw, 7rem) 0 1rem; }
.wear__stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    width: min(64rem, 100%);
    margin: clamp(2.2rem, 5vw, 3.5rem) auto 0;
    padding: 0 var(--gutter);
}
.wear__stage {
    position: relative;
    padding-top: 1.4rem;
    border-top: 1px solid var(--line);
}

/* A droplet travels the timeline as it scrolls through view
   (CSS scroll-driven animation; browsers without support just skip it) */
@supports (animation-timeline: view()) {
    .wear__stages { position: relative; }
    .wear__stages::before {
        content: '';
        position: absolute;
        top: -5px;
        left: var(--gutter);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--scent);
        box-shadow: 0 0 14px color-mix(in srgb, var(--scent) 85%, transparent);
        z-index: 1;
        animation: droplet-travel linear both;
        animation-timeline: view();
        animation-range: entry 10% exit 90%;
    }
    @keyframes droplet-travel {
        from { left: var(--gutter); }
        to { left: calc(100% - var(--gutter) - 10px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .wear__stages::before { display: none; }
    }
}
.wear__stage::before {
    content: '';
    position: absolute;
    top: -3.5px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--scent);
    transform: scale(0.2);
    transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
    transition-delay: var(--d, 0s);
}
/* Each note's marker presses in with a soft halo as the stage scrolls in. */
.wear__stage.is-in::before {
    transform: scale(1);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--scent) 16%, transparent);
}
.wear__time {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gold);
}
.wear__label {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.35rem;
    margin: 0.5rem 0 0.4rem;
    color: var(--ink);
}
.wear__notes { color: var(--text-soft); font-size: 0.95rem; }

.related { padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.scent-grid--three { grid-template-columns: repeat(3, 1fr); }

/* Cart icon bump when a bottle glides in */
.site-nav__cart.is-bump { animation: cart-bump 0.42s var(--ease); }
@keyframes cart-bump {
    0% { transform: scale(1); }
    45% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* "Added to cart" bottom sheet */
.added-sheet {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(20, 16, 11, 0);
    visibility: hidden;
    transition: background-color 0.35s var(--ease), visibility 0s linear 0.35s;
}
.added-sheet.is-open {
    background: rgba(20, 16, 11, 0.4);
    visibility: visible;
    transition: background-color 0.35s var(--ease);
}
.added-sheet__card {
    width: min(30rem, 100%);
    margin: 0 0.6rem 0.6rem;
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--cream);
    border-radius: 20px 20px 14px 14px;
    box-shadow: 0 -12px 40px rgba(28, 26, 23, 0.28);
    transform: translateY(120%);
    transition: transform 0.4s var(--ease);
}
.added-sheet.is-open .added-sheet__card { transform: none; }
.added-sheet__msg { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; color: var(--ink); margin-bottom: 1rem; }
.added-sheet__tick {
    display: inline-grid; place-items: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: var(--green-deep); color: var(--cream); font-size: 0.8rem;
}
.added-sheet__actions { display: grid; gap: 0.5rem; }
@media (min-width: 560px) { .added-sheet__actions { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .added-sheet__card { transition: none; }
}

/* Sticky mobile buy bar */
.stickybuy {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem var(--gutter);
    padding-bottom: calc(0.8rem + env(safe-area-inset-bottom));
    background: rgba(250, 247, 241, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(110%);
    transition: transform 0.5s var(--ease);
}
.stickybuy.is-on { transform: translateY(0); }
.stickybuy__info { display: grid; }
.stickybuy__name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.stickybuy__price { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-soft); }
.stickybuy .btn { padding: 0.9em 1.6em; }

/* ---------- Cart drawer (deep green) ---------- */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(28, 26, 23, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.45s var(--ease);
}
.drawer-backdrop.is-open { opacity: 1; }

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: flex;
    flex-direction: column;
    width: min(420px, 94vw);
    background: var(--green-deep);
    color: var(--cream);
    border-left: 1px solid rgba(250, 247, 241, 0.12);
    transform: translateX(105%);
    transition: transform 0.55s var(--ease);
    visibility: hidden;
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; }

.cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.3rem 1.5rem 1.1rem;
    border-bottom: 1px solid rgba(250, 247, 241, 0.14);
}
.cart-drawer__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
}
.cart-drawer__close {
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(250, 247, 241, 0.6);
    padding: 0.2rem 0.4rem;
    transition: color 0.3s var(--ease);
}
.cart-drawer__close:hover { color: var(--cream); }

.cart-drawer__shipbar { padding: 1rem 1.5rem 0.4rem; }
.cart-drawer__shipbar-note {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 247, 241, 0.65);
    margin-bottom: 0.55rem;
    min-height: 1em;
}
.cart-drawer__shipbar-note strong { color: var(--gold-bright); font-weight: 500; }
.cart-drawer__shipbar-track { height: 2px; background: rgba(250, 247, 241, 0.18); }
.cart-drawer__shipbar-fill {
    height: 100%;
    width: 0;
    background: var(--gold-bright);
    transition: width 0.6s var(--ease);
}

.cart-drawer__body { flex: 1; overflow-y: auto; padding: 0.6rem 1.5rem; }

.cart-lines { display: grid; }
.cart-line {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(250, 247, 241, 0.12);
}
.cart-line__media {
    position: relative;
    aspect-ratio: 3 / 4;
    align-self: start;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--scent) 34%, transparent), transparent 78%);
}
/* The image is absolutely positioned so its natural size can NEVER feed back
   into the box (percentage heights in an aspect-ratio box are circular: the
   tall vial once inflated its own row to 331px). max-w/h keep both shapes
   honest: wide bottles and the slim 10ml vial. */
.cart-line__media img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 84%;
    max-height: 88%;
}
/* A 10ml vial drawn as tall as a 100ml bottle reads wrong: keep it visibly smaller. */
.cart-line__media img[src*="/vials/"] { max-height: 64%; }
.cart-line__name { font-family: var(--font-display); font-size: 1rem; }
.cart-line__variant {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    color: rgba(250, 247, 241, 0.6);
    margin-top: 0.2rem;
}
.cart-line__qty {
    display: inline-flex;
    align-items: center;
    margin-top: 0.6rem;
    border: 1px solid rgba(250, 247, 241, 0.22);
}
.cart-line__step {
    width: 28px;
    height: 26px;
    display: grid;
    place-items: center;
    color: rgba(250, 247, 241, 0.6);
    transition: color 0.25s var(--ease);
}
.cart-line__step:hover { color: var(--cream); }
.cart-line__count {
    min-width: 26px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.cart-line__right { display: grid; justify-items: end; gap: 0.5rem; }
.cart-line__total { font-family: var(--font-price); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.cart-line__remove {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 247, 241, 0.55);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s var(--ease);
}
.cart-line__remove:hover { color: var(--cream); }

.cart-empty {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
    padding: 3rem 1rem;
    color: rgba(250, 247, 241, 0.7);
}
.cart-empty__ar {
    font-family: var(--font-ar);
    font-size: 4rem;
    color: rgba(201, 162, 75, 0.4);
    line-height: 1;
}
.cart-empty .btn--ghost { border-color: rgba(250, 247, 241, 0.3); color: var(--cream); }
.cart-empty .btn--ghost:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

.cart-drawer__foot {
    padding: 1.1rem 1.5rem calc(1.3rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(250, 247, 241, 0.14);
}
.cart-drawer__subtotal {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}
.cart-drawer__shipnote {
    font-size: 0.76rem;
    color: rgba(250, 247, 241, 0.6);
    margin-bottom: 1rem;
}
.cart-drawer__foot .btn--solid { background: var(--gold-bright); color: var(--ink); }
.cart-drawer__foot .btn--solid:hover { background: #d9b563; }
.cart-drawer__continue {
    display: block;
    margin: 0.8rem auto 0;
    font-size: 0.74rem;
    color: rgba(250, 247, 241, 0.6);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cart-drawer__continue:hover { color: var(--cream); }

/* ---------- Cart page ---------- */
.cart-page {
    width: min(46rem, 100%);
    margin: 0 auto;
    padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem);
}
.cart-page__body { margin-top: clamp(2rem, 5vw, 3rem); }
.cart-page__foot { margin-top: 2rem; }

/* The cart PAGE reuses drawer line markup on cream: recolor */
.cart-page .cart-line { border-bottom-color: var(--line-soft); }
.cart-page .cart-line__name { color: var(--ink); }
.cart-page .cart-line__variant { color: var(--text-soft); }
.cart-page .cart-line__qty { border-color: var(--line); }
.cart-page .cart-line__step { color: var(--text-soft); }
.cart-page .cart-line__step:hover { color: var(--ink); }
.cart-page .cart-line__total { font-family: var(--font-price); color: var(--ink); }
.cart-page .cart-line__remove { color: var(--text-soft); }
.cart-page .cart-line__remove:hover { color: var(--ink); }
.cart-page .cart-drawer__subtotal { color: var(--ink); }
.cart-page .cart-drawer__shipnote { color: var(--text-soft); }
.cart-page .cart-empty { color: var(--text-soft); }

/* Cart page summary: the savings itemise here, so hide the inline promo list */
.cart-page .cart-promo { display: none; }
.cart-sum {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--green-deep) 3%, transparent);
}
.cart-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.cart-sum dt { color: var(--text-soft); font-size: 0.92rem; }
.cart-sum dd { color: var(--ink); font-family: var(--font-price); white-space: nowrap; }
.cart-sum__save dt, .cart-sum__save dd { color: var(--green-deep); }
.cart-sum__total {
    margin-top: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}
.cart-sum__total dt { color: var(--ink); font-weight: 600; font-size: 1rem; }
.cart-sum__total dd { font-size: 1.35rem; font-weight: 650; }
.cart-sum__note { margin-top: 0.7rem; text-align: center; font-size: 0.78rem; color: var(--text-soft); }

/* ---------- Checkout ---------- */
.page-checkout main { min-height: 100vh; }

.checkout {
    width: min(70rem, 100%);
    margin: 0 auto;
    padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem)) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.checkout__head { display: grid; gap: 0.8rem; }
.checkout__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    color: var(--ink);
}

.checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    margin-top: clamp(2rem, 5vw, 3.2rem);
    align-items: start;
}

.cofield { display: grid; gap: 0.9rem; margin-bottom: 2.4rem; }
.cofield legend {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
    margin-bottom: 1rem;
}
.cofield__row { display: grid; gap: 0.35rem; }
.cofield__row[hidden] { display: none; }  /* [hidden] must win over display:grid */
.cofield__row span {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.cofield__row input,
.cofield__row select {
    font: inherit;
    font-size: 0.95rem;
    padding: 0.75em 0.9em;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cofield__row input:focus,
.cofield__row select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.cofield__split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.9rem; }

.shipoption {
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}
.shipoption--pending { border-style: dashed; background: var(--cream-dark); }
.shipoption__note { color: var(--text-soft); font-size: 0.82rem; margin-top: 0.4rem; }

.checkout__summary {
    background: #fff;
    border: 1px solid var(--line);
    padding: 1.6rem;
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
}
.checkout__summary-head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: none;
    border: 0;
    padding: 0;
    margin-bottom: 1.2rem;
    cursor: default;
    font: inherit;
    text-align: left;
}
.checkout__summary-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.checkout__summary-save {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--green-deep);
    background: color-mix(in srgb, var(--green-deep) 11%, transparent);
    padding: 0.28em 0.75em;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.checkout__summary-peek { display: none; }   /* desktop: header is just a title */
.checkout__summary-body { display: block; }
.cosum { display: grid; }
.cosum__line {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line-soft);
}
/* Product cutouts are transparent — a solid block behind them reads as a
   broken image. A whisper of the scent colour grounds them instead. */
.cosum__line img {
    width: 44px;
    height: 62px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 14%, transparent), transparent 75%);
    object-fit: contain;
}
.cosum__name { font-size: 0.9rem; color: var(--ink); }
.cosum__name em { display: block; font-style: normal; font-size: 0.74rem; color: var(--text-soft); }
.cosum__amt { font-family: var(--font-price); font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Offers travel to checkout: quiet gold lines under the items. */
.cosum__offers {
    display: grid;
    gap: 0.4rem;
    margin: 0.9rem 0 0.2rem;
    padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--gold-bright) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--gold-bright) 30%, transparent);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--ink);
    list-style: none;
}
.cosum__offers a { color: var(--green-deep); font-weight: 600; }
.cosum__offers-won { color: var(--green-deep); font-weight: 600; }

.cosum__code { margin-top: 1.1rem; }
.cosum__code-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
.cosum__code-row input {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.55em 0.8em;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--ink);
    text-transform: uppercase;
}
.cosum__code-row input:focus { outline: none; border-color: var(--green); }
.cosum__code-apply {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 1.1em;
    border: 1px solid var(--green);
    color: var(--green);
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.cosum__code-apply:hover { background: var(--green); color: var(--cream); }
.cosum__code-error { color: var(--clay); font-size: 0.78rem; margin-top: 0.4rem; }
.cosum__code-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: var(--green-mist);
    font-size: 0.85rem;
    color: var(--green-deep);
}
.cosum__code-applied button {
    font-size: 0.72rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--green-deep);
}

.cosum__totals { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.cosum__totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; }
.cosum__totals dt { flex: 1; min-width: 0; }
.cosum__totals dd { white-space: nowrap; flex-shrink: 0; text-align: right; }
.cosum__totals dt { color: var(--text-soft); font-size: 0.85rem; }
.cosum__totals dd { margin: 0; font-family: var(--font-price); font-weight: 600; font-size: 0.92rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.cosum__grand { padding-top: 0.6rem; border-top: 1px solid var(--line); }
.cosum__grand dt, .cosum__grand dd { font-size: 1rem; color: var(--ink); }

.checkout__flash {
    margin-top: 1.4rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--gold-bright);
    background: color-mix(in srgb, var(--gold-bright) 12%, #fff);
    font-size: 0.9rem;
}

.checkout__errors {
    margin-bottom: 2rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--clay);
    background: color-mix(in srgb, var(--clay) 7%, #fff);
    font-size: 0.9rem;
    color: var(--clay);
}
.checkout__errors ul { list-style: disc; padding-left: 1.2rem; margin-top: 0.4rem; }

.checkout__paynote {
    font-size: 0.78rem;
    color: var(--text-soft);
    text-align: center;
    margin-top: 0.7rem;
}

/* Delivery options */
.shipopt { display: block; margin-bottom: 0.6rem; }
.shipopt input { position: absolute; opacity: 0; pointer-events: none; }
.shipopt__box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.shipopt__main { font-size: 0.9rem; color: var(--ink); }
.shipopt__eta { font-size: 0.78rem; color: var(--text-soft); }
.shipopt__price {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ink);
}
.shipopt:hover .shipopt__box { border-color: var(--green-label); }
.shipopt input:checked + .shipopt__box {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 6%, #fff);
}
.shipopt input:focus-visible + .shipopt__box { outline: 2px solid var(--green); outline-offset: 3px; }

/* Sandbox payment page */
.checkout--pay { display: grid; justify-items: center; }
.fakepay { max-width: 34rem; display: grid; gap: 0.9rem; justify-items: start; }
.fakepay__note { color: var(--text-soft); }
.fakepay__card {
    width: 100%;
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
}
.fakepay__order { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.fakepay__amount { font-family: var(--font-display); font-size: 2rem; color: var(--ink); }

/* Confirmation page */
.checkout--confirmed { display: grid; justify-items: center; }
.confirmed {
    position: relative;
    max-width: 40rem;
    display: grid;
    gap: 1rem;
    text-align: center;
    justify-items: center;
}
.confirmed__ar {
    position: absolute;
    top: -4rem;
    font-family: var(--font-ar);
    font-size: clamp(8rem, 20vw, 13rem);
    color: color-mix(in srgb, var(--green) 10%, transparent);
    pointer-events: none;
    user-select: none;
}
.confirmed__note { position: relative; color: var(--text-soft); max-width: 46ch; }
.confirmed__tip { position: relative; margin-top: 0.7rem; font-size: 0.84rem; color: var(--text-soft); max-width: 46ch; padding-left: 0.9rem; border-left: 2px solid var(--gold-bright, #c2a06b); }
.confirmed__card {
    position: relative;
    width: 100%;
    margin-top: 1rem;
    padding: 1.4rem 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    text-align: left;
}
.cosum__line--noimg { grid-template-columns: 1fr auto; }
.confirmed__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.4rem; }
/* Order summary: discount in green, waived shipping struck then "Free" */
.cosum__save-line dd { color: var(--green-deep); }
.cosum__totals s { color: var(--text-soft); font-weight: 400; margin-right: 0.35em; }
.cosum__free { color: var(--green-deep); font-weight: 600; }

.cart-empty--paper { color: var(--text-soft); padding: 4rem 1rem; }
.cart-empty--paper .cart-empty__ar { color: color-mix(in srgb, var(--gold) 30%, transparent); }
.cart-empty--paper .btn--ghost { border-color: var(--line); color: var(--ink); }

/* ---------- Footer (deep green) ---------- */
/* Sticky-footer companions to the flex body: main takes the slack, footer
   never shrinks, so short pages still push the footer to the bottom. */
body > main { flex: 1 0 auto; }
.site-footer {
    background: var(--green-deep);
    color: var(--cream);
    margin-top: clamp(3rem, 7vw, 5rem);
    flex-shrink: 0;
}
.page-checkout .site-footer { margin-top: 0; }
/* Home closes on the story section, which already carries its own bottom
   padding — the footer's own top margin on top of that read as an empty gap. */
.page-home .site-footer { margin-top: 0; }

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    width: min(74rem, 100%);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2.5rem;
}
.site-footer__brand { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.site-footer__wordmark-img { height: 44px; width: auto; opacity: 0.92; }
.site-footer__tagline { color: rgba(250, 247, 241, 0.7); font-size: 0.88rem; line-height: 1.7; }
/* The scent list signup */
.scentlist { margin-top: 0.6rem; max-width: 320px; }
.scentlist__pitch { font-size: 0.82rem; color: rgba(250, 247, 241, 0.75); margin-bottom: 0.6rem; }
.scentlist__row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; }
.scentlist__row input {
    font: inherit; font-size: 0.85rem; padding: 0.55em 0.8em;
    min-height: 44px;   /* comfortable tap + no iOS zoom-jump */
    border: 1px solid rgba(250, 247, 241, 0.25); background: rgba(250, 247, 241, 0.06);
    color: var(--cream);
}
.scentlist__row input::placeholder { color: rgba(250, 247, 241, 0.4); }
.scentlist__row input:focus { outline: none; border-color: var(--gold-bright); }
.scentlist__btn {
    font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0 1.2em; min-height: 44px; background: var(--gold-bright); color: var(--ink);
    transition: background-color 0.3s var(--ease);
}
.scentlist__btn:hover { background: #d9b563; }
.scentlist__done { color: var(--gold-bright); font-size: 0.85rem; }

.site-footer__col { display: grid; gap: 0.65rem; align-content: start; }
.site-footer__heading {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-bright);
    margin-bottom: 0.5rem;
}
.site-footer__col a {
    font-size: 0.88rem;
    color: rgba(250, 247, 241, 0.85);
    text-decoration: none;
    width: fit-content;
    /* 44px tap targets without stretching the visual rhythm: pad the hit
       area and pull half of it back with negative margin. */
    padding: 0.6rem 0.5rem;
    margin: -0.45rem -0.5rem;
    transition: color 0.25s var(--ease);
}
.site-footer__col a:hover { color: var(--gold-bright); }

/* Shop page: the occasion band closes the browse, centred and quiet */
.shop-more { text-align: center; margin: 3rem 0 1rem; }
.shop-more ul { justify-content: center; }
.site-footer__soon { font-size: 0.88rem; color: rgba(250, 247, 241, 0.4); }

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6rem 2rem;
    width: min(74rem, 100%);
    margin: 0 auto;
    padding: 1.2rem var(--gutter) 1.6rem;
    border-top: 1px solid rgba(250, 247, 241, 0.14);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: rgba(250, 247, 241, 0.55);
}

/* ---------- Find-your-scent quiz (the green world) ---------- */
body.page-quiz { background: var(--green-deep); }
.page-quiz main {
    background: var(--green-deep);
    color: var(--cream);
    min-height: 100svh;
}
.page-quiz .site-footer { display: none; }  /* the quiz is its own world */
.page-quiz .site-nav.is-scrolled {
    background: rgba(44, 63, 39, 0.88);
    border-bottom-color: rgba(250, 247, 241, 0.12);
}
.page-quiz .site-nav__name,
.page-quiz .site-nav__link,
.page-quiz .site-nav__lang,
.page-quiz .site-nav__lang a,
.page-quiz .site-nav__cart-label { color: var(--cream); }
.page-quiz .site-nav__lang a.is-active { color: var(--gold-bright); }
/* Hamburger + cart count are dark by default and vanish on the green quiz page. */
.page-quiz .site-nav__menu span { background: var(--cream); }
.page-quiz .site-nav__cart-count.is-empty { color: var(--cream); box-shadow: inset 0 0 0 1px rgba(250, 247, 241, 0.4); }
.page-quiz .site-nav__mark { filter: invert(1); }
.page-quiz .site-footer { margin-top: 0; border-top: 1px solid rgba(250, 247, 241, 0.12); }

.quiz {
    position: relative;
    display: grid;
    min-height: 100svh;
    padding: calc(var(--nav-h) + 2rem) var(--gutter) 4rem;
    overflow: hidden;
}

.quiz__stage {
    grid-area: 1 / 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.1rem;
    width: min(46rem, 100%);
    margin: 0 auto;
}
.quiz__stage.is-current { display: flex; animation: quiz-stage-in 0.7s var(--ease) both; }

@keyframes quiz-stage-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.quiz__ar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-family: var(--font-ar);
    font-size: clamp(14rem, 40vw, 30rem);
    color: rgba(201, 162, 75, 0.08);
    pointer-events: none;
    user-select: none;
    line-height: 1;
}

.eyebrow--onquiz { color: var(--gold-bright); }

.quiz__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 4.5vw, 3rem);
    line-height: 1.2;
    color: var(--cream);
    position: relative;
}
.quiz__sub {
    color: rgba(250, 247, 241, 0.7);
    max-width: 42ch;
    position: relative;
}
.quiz__skip {
    font-size: 0.82rem;
    color: rgba(250, 247, 241, 0.55);
    text-underline-offset: 4px;
}
.quiz__skip:hover { color: var(--cream); }

.quiz__progress { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
.quiz__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(250, 247, 241, 0.25);
    transition: background-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.quiz__dot.is-done { background: var(--gold-bright); }
.quiz__dot.is-now { background: var(--cream); transform: scale(1.4); }

.quiz__count {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.3em;
    color: rgba(250, 247, 241, 0.5);
}
.quiz__q {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--cream);
    margin-bottom: 1rem;
}

.quiz__answers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    width: 100%;
}
.quiz__answer {
    display: grid;
    gap: 0.25rem;
    padding: 1.3rem 1.4rem;
    border: 1px solid rgba(250, 247, 241, 0.2);
    text-align: left;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease),
                border-color 0.3s var(--ease), background-color 0.3s var(--ease);
    transition-delay: calc(var(--i) * 80ms), calc(var(--i) * 80ms), 0s, 0s;
}
.quiz__answer.is-in { opacity: 1; transform: none; }
.quiz__answer:hover {
    border-color: var(--gold-bright);
    background: rgba(201, 162, 75, 0.08);
}
.quiz__answer-label {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--cream);
}
.quiz__answer-sub { font-size: 0.82rem; color: rgba(250, 247, 241, 0.6); }

/* Result */
.quiz__match { display: grid; justify-items: center; gap: 0.6rem; }
.quiz__match-media {
    position: relative;
    display: grid;
    place-items: center;
    width: min(300px, 60vw);
    aspect-ratio: 3 / 4;
    margin-bottom: 0.4rem;
}
.quiz__match-media img {
    position: relative;
    z-index: 2;
    width: 78%;
    filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.4));
    animation: quiz-bottle-in 1.1s var(--ease) both 0.2s;
}
@keyframes quiz-bottle-in {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to { opacity: 1; transform: none; }
}
.quiz__match-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--scent) 50%, transparent), transparent 72%);
    animation: glow-breathe 7s var(--ease) infinite alternate;
}
.quiz__match-ar {
    position: absolute;
    z-index: 1;
    font-family: var(--font-ar);
    font-size: clamp(7rem, 18vw, 11rem);
    color: color-mix(in srgb, var(--scent) 55%, transparent);
    opacity: 0.55;
    transform: translateY(-10%);
    pointer-events: none;
}
.quiz__match-name {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    color: var(--cream);
}
/* The scent's name lands like a stamp pressed onto paper. */
.quiz__result-stamp.is-in { animation: quiz-stamp 0.6s var(--ease) both; }
@keyframes quiz-stamp {
    0%   { opacity: 0; transform: scale(1.55) rotate(-5deg); }
    55%  { opacity: 1; transform: scale(0.95) rotate(1.5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
/* The Arabic ghost name stamps in softly behind the bottle. */
.quiz__match-media.is-in .quiz__match-ar { animation: quiz-ar-stamp 0.9s var(--ease) 0.25s both; }
@keyframes quiz-ar-stamp {
    0%   { opacity: 0; transform: scale(1.3); }
    100% { opacity: 0.5; transform: scale(1); }
}
/* Notes appear one by one, like a scent unfolding. */
.quiz__notes.is-in span { animation: note-rise 0.5s var(--ease) both; }
.quiz__notes.is-in span:nth-child(1) { animation-delay: 0.05s; }
.quiz__notes.is-in span:nth-child(2) { animation-delay: 0.22s; }
.quiz__notes.is-in span:nth-child(3) { animation-delay: 0.39s; }
@keyframes note-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.quiz__match-tagline { color: var(--gold-bright); font-style: italic; font-family: var(--font-display); font-size: 1.1rem; }
.quiz__match-desc { color: rgba(250, 247, 241, 0.75); max-width: 46ch; }

.quiz__notes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
    margin: 0.8rem 0 0.4rem;
}
.quiz__notes span { display: grid; gap: 0.15rem; font-size: 0.85rem; color: rgba(250, 247, 241, 0.85); }
.quiz__notes em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-bright);
}

.quiz__match-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.1rem; }
.btn--ghost-onquiz { border-color: rgba(250, 247, 241, 0.3); color: var(--cream); }
.btn--ghost-onquiz:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

.quiz__runner { color: rgba(250, 247, 241, 0.7); font-size: 0.92rem; margin-top: 0.8rem; }
.quiz__runner a { color: var(--gold-bright); text-underline-offset: 4px; }
.quiz__set { color: rgba(250, 247, 241, 0.55); font-size: 0.85rem; }
.quiz__set a { color: rgba(250, 247, 241, 0.85); text-underline-offset: 4px; }
.quiz__set a:hover { color: var(--gold-bright); }
.quiz__again {
    margin-top: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(250, 247, 241, 0.45);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.quiz__again:hover { color: var(--cream); }

/* Quiz invitation band (home) */
.quizband {
    display: grid;
    justify-items: center;
    gap: 1.1rem;
    text-align: center;
    padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter);
    border-top: 1px solid var(--line-soft);
}
.quizband__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    color: var(--ink);
}
.quizband__title em { font-style: italic; color: var(--green); }
.quizband__sub { color: var(--text-soft); font-size: 0.95rem; }

/* ---------- Buyer voices ---------- */
.voices { padding: clamp(3.5rem, 8vw, 6rem) 0 1rem; }
.voices--pdp { padding-top: clamp(2.5rem, 6vw, 4rem); }
.voices__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    width: min(64rem, 100%);
    margin: clamp(1.8rem, 4vw, 2.8rem) auto 0;
    padding: 0 var(--gutter);
}
.voice {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: 1.4rem 1.5rem;
    background: #fff;
    border: 1px solid var(--line-soft);
}
.voice__stars { color: var(--gold); letter-spacing: 0.2em; font-size: 0.8rem; }
.voice__quote { font-size: 0.95rem; line-height: 1.65; color: var(--text); }
.voice__by {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
}
/* Collapse the review wall on phones so "The art of layering" is reachable —
   show 2, tuck the rest behind a tap. Desktop keeps the compact 3-col grid. */
.voices__more {
    display: none;
    margin: 1.3rem auto 0;
    padding: 0.72rem 1.5rem;
    min-height: 44px;
    align-items: center;
    gap: 0.55em;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    color: var(--green-deep);
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.voices__more::after {
    content: '';
    width: 0.5em; height: 0.5em;
    margin-top: -0.25em;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
}
.voices--pdp.is-expanded .voices__more::after { transform: rotate(-135deg); margin-top: 0.15em; }
.voices__more:hover { border-color: var(--green-deep); background: color-mix(in srgb, var(--green-deep) 5%, transparent); }
@media (max-width: 900px) {
    .voices__grid { grid-template-columns: 1fr; }
    .voices--pdp .voice--extra { display: none; }
    .voices--pdp.is-expanded .voice--extra { display: grid; }
    .voices__more { display: flex; }
}

/* ---------- Legal pages ---------- */
.legal {
    width: min(42rem, 100%);
    margin: 0 auto;
    padding: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem)) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.legal__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    color: var(--ink);
    margin: 0.6rem 0 1.6rem;
}
.legal h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--ink);
    margin: 2rem 0 0.6rem;
}
.legal p { margin-bottom: 0.9rem; line-height: 1.75; }
.legal a { color: var(--green); text-underline-offset: 3px; }
.legal__contact {
    margin-top: 2.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-size: 0.92rem;
}

/* ---------- International visitor ribbon ---------- */
.intl {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 65;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem var(--gutter);
    background: var(--green-deep);
    color: var(--cream);
    font-size: 0.82rem;
    text-align: center;
}
.intl.is-on { display: flex; }
.intl a { color: var(--gold-bright); text-underline-offset: 3px; }
.intl__close { color: rgba(250,247,241,0.6); font-size: 1.1rem; padding: 0 0.4rem; }

/* Language switcher */
.site-nav__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}
.site-nav__lang a {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0 0.35em;
    border-radius: 8px;
}
.site-nav__lang a.is-active { background: color-mix(in srgb, var(--green) 12%, transparent); }
.site-nav__lang a { color: var(--green-label); text-decoration: none; }
.site-nav__lang a.is-active { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The Lab ---------- */
.lab__items { display: grid; gap: 1.2rem; margin: 2rem 0 2.5rem; }
.lab__item {
    padding: 1.6rem 1.8rem;
    background: #fff;
    border: 1px solid var(--line);
    display: grid;
    gap: 0.6rem;
    justify-items: start;
}
.lab__badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid var(--gold-bright);
    padding: 0.25em 0.8em;
    border-radius: 999px;
}
.lab__item h2 { margin: 0 !important; }
.lab__price { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.lab__price span { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-soft); }

/* ---------- Reveal motion ---------- */
/* Gated on .has-js: without JS (and for crawlers) nothing is ever hidden.
   Below-the-fold scroll reveals fade in; above-the-fold hero content
   (data-load-reveal) is visible at first paint and only SLIDES into place,
   so the hero never reads blank while waiting on JS or image decode. */
.has-js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--d, 0s);
}
.has-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
}
.has-js [data-load-reveal] {
    transform: translateY(14px);
    transition: transform 0.6s var(--ease);
    transition-delay: var(--d, 0s);
}
.has-js [data-load-reveal].is-in {
    transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    /* Flow from the top (not bottom-anchored in a full-height hero) and tighten
       the media + headline so the first CTA lands above the fold with room to
       spare for the phone's address bar, clear of the chat FAB. */
    .hero { min-height: auto; justify-content: flex-start; }
    .hero__inner { grid-template-columns: 1fr; padding: calc(var(--nav-h) + 0.4rem) var(--gutter) 1.3rem; gap: 0; }
    .hero__media { order: -1; min-height: 150px; }
    .hero__media img { width: min(130px, 34%); }
    .hero__ar { font-size: clamp(6rem, 27vw, 8.5rem); }
    .hero__copy { text-align: center; padding-bottom: 1rem; }
    .hero__title { font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.02; }
    .hero__sub { margin: 0.5rem auto 0; font-size: 0.92rem; line-height: 1.5; }
    .hero__plain { margin: 0.75rem auto 0; }
    .hero__actions { justify-content: center; margin-top: 0.9rem; }

    .setband__inner { grid-template-columns: 1fr; text-align: center; }
    .setband__text { margin-left: auto; margin-right: auto; }
    .setband__media img { width: min(300px, 80%); }

    .product__grid { grid-template-columns: 1fr; }
    .product__media { position: relative; top: 0; min-height: 34vh; }
    /* Trim the dead space under the scent card ("smells like") and pull the
       next section up so the page does not feel gappy on a phone. */
    .product__panel { max-width: none; padding: 0 0 1.25rem; }
    .wear { padding: 2.5rem 0 0.75rem; }
    .voices--pdp { padding-top: 2.25rem; }

    .wear__stages { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
    .scent-grid--three { grid-template-columns: repeat(2, 1fr); }

    .checkout { padding-top: calc(var(--nav-h) + 1rem); }
    .checkout__grid { grid-template-columns: 1fr; gap: 1.2rem; }
    /* Tighter header so the collapsed summary + first input come up sooner. */
    .checkout__head { gap: 0.3rem; }
    .checkout__title { font-size: 1.5rem; }
    /* Collapse the summary to a total peek so the first input sits near the top;
       tap the header to expand the line items. */
    .checkout__summary { position: relative; top: 0; order: -1; padding: 1rem 1.2rem; }
    .checkout__summary-head { margin-bottom: 0; cursor: pointer; padding: 0.35rem 0; }
    .checkout__summary-peek {
        display: flex; align-items: center; gap: 0.45rem;
        font-family: var(--font-price); font-weight: 650; color: var(--ink);
    }
    .checkout__summary-chev { transition: transform 0.3s var(--ease); font-size: 0.85em; color: var(--text-soft); }
    .checkout__summary.is-expanded .checkout__summary-chev { transform: rotate(180deg); }
    .checkout__summary-body { display: none; margin-top: 1rem; }
    .checkout__summary.is-expanded .checkout__summary-body { display: block; }

    .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .site-nav__bar { font-size: 0.7rem; letter-spacing: 0.03em; height: auto; padding: 0.4rem var(--gutter); white-space: normal; line-height: 1.35; }

    /* Keep every purchase route reachable on phones: all four links stay,
       wrapping onto the second row instead of disappearing. */
    .site-nav__side--left { flex-wrap: wrap; gap: 0.5rem 1rem; row-gap: 0.35rem; transition: max-height 0.3s var(--ease), opacity 0.25s var(--ease); }
    .site-nav__side--left .site-nav__link { white-space: nowrap; font-size: 0.82rem; }
    .site-nav__side { gap: 1rem; }
    .site-nav__name { font-size: 1.15rem; }
    .site-nav__cart-label { display: none; }
    /* With the label hidden the cart shrank to ~39px — pad the hit area
       back up to 44px+ and grow the count so it reads as the button. */
    .site-nav__cart { padding: 0.8rem 0.85rem; margin: -0.5rem -0.55rem; }
    .site-nav__cart-count { min-width: 26px; height: 26px; font-size: 0.74rem; }

    /* Compact header once scrolling starts: the links row collapses so the logo,
       language and cart sit in one slim bar, giving buying controls more room.
       Scroll back to the top and the links return. */
    .site-nav.is-scrolled .site-nav__side--left { max-height: 0; opacity: 0; overflow: hidden; margin: 0; row-gap: 0; }
    .site-nav.is-scrolled .site-nav__inner { row-gap: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }

    .sizes__row { grid-template-columns: repeat(2, 1fr); }
    .scent-grid--three { grid-template-columns: 1fr 1fr; }
    .site-footer__inner { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (min-width: 901px) {
    .stickybuy { display: none; }
    .scent-grid { grid-template-columns: repeat(3, 1fr); }
    .scent-grid--three { grid-template-columns: repeat(3, 1fr); }
    /* Four-item collections (the Discovery sets) sit as one even row. */
    .scent-grid--four { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    [data-reveal],
    [data-load-reveal] { opacity: 1; transform: none; }
    .ticker__track { animation: none; }
    .scent-card__media::after { animation: none; }
    .hero__media::after { display: none; }
    .wear__stage { opacity: 1 !important; transform: none !important; }
    .quiz__result-stamp { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   The July push: urgency, promos, gift, partners, mist. (13 Jul 2026)
   ========================================================================== */

/* ---------- Numbers wear the serif, everywhere money appears ---------- */
.cart-drawer__subtotal span:last-child,
.lab__price {
    font-family: var(--font-price);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.lab__price { font-size: 1.15rem; }

/* ---------- Announcement bar: countdown + golden hour ---------- */
.site-nav__bar strong { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 0.35em; color: var(--gold-bright); }
.site-nav__bar { color: #F3E7C3; font-weight: 500; }
.site-nav__bar--golden {
    background: linear-gradient(90deg, #8A6A1F, #C9A24B 45%, #8A6A1F);
    color: #FFF9EC;
    animation: golden-sheen 4s linear infinite;
    background-size: 220% 100%;
}
@keyframes golden-sheen {
    0% { background-position: 0% 0; }
    100% { background-position: 220% 0; }
}

/* ---------- Hero mist: the invisible product, made visible ---------- */
.hero__mist { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__mist i {
    position: absolute;
    left: calc(38% + var(--m) * 5%);
    bottom: 58%;
    width: calc(34px + var(--m) * 9px);
    height: calc(34px + var(--m) * 9px);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--scent, #8A6A1F) 26%, #fff) 0%, transparent 68%);
    filter: blur(7px);
    opacity: 0;
    animation: mist-rise 7.5s ease-out infinite;
    animation-delay: calc(var(--m) * -1.1s);
}
@keyframes mist-rise {
    0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
    12%  { opacity: 0.55; }
    60%  { opacity: 0.22; }
    100% { transform: translate(calc(18px - var(--m) * 9px), -140px) scale(1.7); opacity: 0; }
}

/* ---------- Discovery set band: the four-bottle fan ---------- */
.setband__media--fan {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 300px;
    padding: 1rem 0 0.5rem;
}
.setband__media--fan img.setband__bottle {
    width: clamp(64px, 8vw, 104px);
    height: auto;
    margin: 0 -8px;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.45));
    transform: rotate(calc((var(--fi) - 1.5) * 7deg)) translateY(calc((var(--fi) - 1.5) * (var(--fi) - 1.5) * 7px));
    transform-origin: bottom center;
    animation: fan-sway 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--fi) * -1.6s);
}
@keyframes fan-sway {
    0%   { translate: 0 0; }
    100% { translate: 0 -6px; }
}

/* ---------- Cart drawer: nudges, named savings, the free gift ---------- */
.cart-nudge {
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--gold-bright) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-bright) 45%, transparent);
    border-radius: 6px;
    font-size: 0.82rem;
}
.cart-nudge a { color: var(--gold-bright); font-weight: 600; white-space: nowrap; }

.cart-promo {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.8rem 0.9rem;
    display: grid;
    gap: 0.4rem;
    border: 1px dashed color-mix(in srgb, var(--gold-bright) 50%, transparent);
    border-radius: 6px;
    font-size: 0.84rem;
}
.cart-promo li { display: flex; justify-content: space-between; gap: 1rem; }
.cart-promo li span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--gold-bright); }
.cart-promo__golden span:first-child { color: var(--gold-bright); }

.cart-gift {
    margin: 1rem 0 0;
    padding: 0.9rem;
    background: color-mix(in srgb, var(--gold-bright) 12%, transparent);
    border-radius: 8px;
    display: grid;
    gap: 0.6rem;
}
.cart-gift__head { font-size: 0.85rem; font-weight: 600; }
.cart-gift__row { display: flex; gap: 0.5rem; }
.cart-gift__row select {
    flex: 1;
    padding: 0.55em 0.7em;
    font: inherit;
    font-size: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--cream) 12%, transparent);
    color: inherit;
}
.cart-gift__btn {
    padding: 0.55em 1em;
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    border: 0;
    border-radius: 6px;
    background: var(--gold-bright);
    color: #1C1A17;
    font-weight: 600;
    cursor: pointer;
}
.cart-gift__chosen { font-size: 0.88rem; }
.cart-gift__chosen button {
    margin-left: 0.5em;
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.7;
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
}
.cart-drawer__savings {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--gold-bright);
    margin-bottom: 0.35rem;
}
.cart-drawer__savings span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Checkout: promo lines, payment methods ---------- */
.cosum__promo dt, .cosum__promo dd { color: var(--green) !important; }
.cosum__promo--golden dt, .cosum__promo--golden dd { color: var(--gold) !important; }
.cosum__note {
    margin-top: 0.8rem;
    font-size: 0.8rem;
    color: var(--green);
}
/* ---------- PDP: savings chip + golden hour note ---------- */
.product__save {
    display: inline-block;
    padding: 0.22em 0.7em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--clay) 14%, #fff);
    color: var(--clay);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.buy__golden {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--gold);
}
.buy__golden.is-live {
    color: #8A6A1F;
    font-weight: 600;
    animation: golden-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes golden-pulse { from { opacity: 0.75; } to { opacity: 1; } }

/* ---------- Voices: the silent five-stars ---------- */
/* Homepage caption under the review grid. Its own class so it never inherits
   the PDP "Read more reviews" pill/chevron (.voices__more) and stays visible
   on desktop as plain, un-clickable text. */
.voices__caption {
    text-align: center;
    margin-top: 1.6rem;
    font-size: 0.85rem;
    color: var(--text-soft);
    font-style: italic;
}

/* ---------- Story: who we are ---------- */
.story__who {
    width: min(44rem, 100%);
    margin: 2.2rem auto 0;
    display: grid;
    gap: 1rem;
    text-align: left;
    /* was cream — a relic of the old dark story band. On today's cream page
       the paragraphs were INVISIBLE, which read as a giant empty gap. */
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.75;
}

/* ---------- Quiz v2: progress bar, picked states, staged result ---------- */
[data-quiz-progress] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}
.quiz__count { white-space: nowrap; }
.quiz__bar {
    width: min(280px, 60%);
    height: 3px;
    margin: 0;
    background: color-mix(in srgb, var(--cream) 20%, transparent);
    border-radius: 999px;
    overflow: hidden;
}
.quiz__bar-fill {
    display: block;
    height: 100%;
    background: var(--gold-bright);
    border-radius: 999px;
    transition: width 0.5s var(--ease);
}
.quiz__answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
    margin-top: 2rem;
}
.quiz__answers .quiz__answer { flex: 0 1 240px; }
.quiz__answer.is-picked {
    border-color: var(--gold-bright);
    background: color-mix(in srgb, var(--gold-bright) 18%, transparent);
    animation: quiz-lock 0.34s var(--ease) 1;
    transform: scale(1.03);
}
/* The tactile "click" of a choice landing: a quick press, then it settles. */
@keyframes quiz-lock {
    0%   { transform: scale(1.05); }
    45%  { transform: scale(0.975); }
    100% { transform: scale(1.03); }
}
.quiz__answer.is-dimmed { opacity: 0.25; transform: scale(0.97); }

/* Turn the perfume card: the question leaves, the next one turns in. */
[data-quiz-question] { transition: opacity 0.28s var(--ease), transform 0.28s var(--ease); transform-origin: center; }
[data-quiz-question].is-swapping { opacity: 0; transform: translateX(-26px) rotateY(6deg); }
.quiz__q { opacity: 0; transform: translateX(24px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.quiz__q.is-in { opacity: 1; transform: none; }
.quiz__felt {
    font-style: italic;
    color: color-mix(in srgb, var(--cream) 75%, transparent);
    margin-bottom: 0.6rem;
}
.quiz__match [data-result-step] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: var(--d, 0s);
}
.quiz__match [data-result-step].is-in { opacity: 1; transform: none; }
.quiz__match-aura {
    position: absolute;
    inset: -12%;
    z-index: 0;
    background:
        radial-gradient(closest-side at 50% 62%, color-mix(in srgb, var(--scent) 55%, transparent), transparent 74%);
    filter: blur(16px);
    animation: aura-drift 12s ease-in-out infinite alternate;
    border-radius: 50%;
}
.quiz__match-media { position: relative; }
.quiz__match-media img { position: relative; z-index: 1; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45)); }

/* ---------- Partners page ---------- */
.partners {
    width: min(64rem, 100%);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 3rem) var(--gutter) 5rem;
}
.partners__head { text-align: center; max-width: 44rem; margin: 0 auto; }
.partners__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    line-height: 1.1;
    margin: 0.6rem 0 1rem;
}
.partners__title em { font-style: italic; color: var(--gold); }
.partners__sub { color: var(--text-soft); line-height: 1.7; }
.partners__grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: 3.2rem;
    align-items: start;
}
.partners__how {
    display: grid;
    gap: 1.6rem;
    padding-left: 1.2rem;
    line-height: 1.7;
    color: var(--text-soft);
}
.partners__how strong { display: block; color: var(--ink); font-weight: 600; }
.partners__tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 1.6rem;
    list-style: none;
    padding: 0;
}
.partners__tier {
    display: grid;
    gap: 0.15rem;
    padding: 0.9rem 0.6rem;
    text-align: center;
    border: 1px solid rgba(60, 86, 54, 0.18);
    border-radius: 12px;
    background: rgba(60, 86, 54, 0.04);
}
.partners__tier-pct { font-size: 1.5rem; font-weight: 600; color: var(--green-deep); font-family: var(--font-price, inherit); }
.partners__tier-name { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep, #8A6A1F); }
.partners__tier-req { font-size: 0.72rem; color: var(--text-soft); line-height: 1.35; }
.partners__form {
    display: grid;
    gap: 1rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}
.partners__form-title { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; }
/* "Get paid for it." lands on its own line under the question, always */
.earnband__title em { display: block; }

.partners__done { display: grid; gap: 0.8rem; justify-items: center; text-align: center; }
/* the green tick pops in when the submission lands */
.partners__done-check {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--green-deep);
    color: var(--cream);
    font-size: 1.5rem;
    font-weight: 700;
    animation: partner-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes partner-pop {
    from { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .partners__done-check { animation: none; }
}
.partners__done-msg { color: var(--green-deep); font-size: 0.95rem; font-weight: 600; }
.partners__error { color: #b3261e; font-size: 0.88rem; margin: 0; }
.partners__link { display: flex; gap: 0.5rem; align-items: stretch; }
.partners__link input {
    flex: 1; min-width: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--green) 5%, #fff);
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--ink);
}
.partners__link .btn { flex: 0 0 auto; padding-inline: 1.1rem; }
.partners__fine {
    margin-top: 3rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-soft);
}
@media (max-width: 800px) {
    .partners__grid { grid-template-columns: 1fr; }
}

/* ---------- Motion: new pieces respect reduced motion too ---------- */
@media (prefers-reduced-motion: reduce) {
    /* Soften, do not freeze: the color clouds are the brand. They keep
       morphing at a fifth of the speed; only the busy pieces stop. */
    .scent-card__media::before,
    .scent-card__media::after { animation-duration: 40s; }
    .scent-card__media img,
    .scent-card__glow,
    .hero__mist i,
    .setband__bottle,
    .quiz__match-aura,
    .site-nav__bar--golden { animation: none; }
    .hero__mist { display: none; }
}

/* ---------- Concierge chat ---------- */
.concierge { position: fixed; right: 18px; bottom: 18px; z-index: 80; font-size: 15px; }
.concierge__fab {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    min-height: 44px;   /* tap target */
    padding: 0.75em 1.25em;
    border: 0;
    border-radius: 999px;
    background: var(--green-deep, #2C3F27);
    color: var(--cream);
    font: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 4px 14px -4px rgba(28, 26, 23, 0.28);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.concierge__fab:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(28, 26, 23, 0.34); }
/* tucked away until the visitor scrolls, so it never covers the hero CTA */
.concierge.is-tucked .concierge__fab { opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.concierge__fab-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #7FBF8E;
    animation: golden-pulse 1.4s ease-in-out infinite alternate;
}
.concierge.is-open .concierge__fab { display: none; }
/* When the sticky buy bar is up (PDP), float the chat button just above it so
   both stay visible and reachable, instead of hiding the chat entirely. */
body.has-stickybuy .concierge { bottom: calc(78px + env(safe-area-inset-bottom)); }
/* Any open drawer (cart, mobile menu) owns the screen — the FAB steps out. */
body.has-overlay .concierge__fab { opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
/* The quiz result's last actions need clear air beneath the FAB. */
[data-quiz-result]:not(:empty) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.concierge__panel[hidden] { display: none; }
.concierge__panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(370px, calc(100vw - 24px));
    height: min(560px, calc(100vh - 90px));
    display: flex;
    flex-direction: column;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(28, 26, 23, 0.3);
}
.concierge__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.1rem;
    background: var(--green-deep, #2C3F27);
    color: var(--cream);
}
.concierge__head strong { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; display: block; }
.concierge__head span { font-size: 0.72rem; opacity: 0.75; }
.concierge__close { background: none; border: 0; color: inherit; font-size: 1.5rem; cursor: pointer; opacity: 0.8; }
.concierge__msgs { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: 0.55rem; align-content: start; }
.concierge__msg {
    max-width: 86%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.55;
    animation: msg-in 0.3s var(--ease);
}
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.concierge__msg--us { background: #fff; border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 4px; }
.concierge__msg--us a { color: var(--green); font-weight: 600; }
.concierge__msg--them { background: var(--green-deep, #2C3F27); color: var(--cream); justify-self: end; border-bottom-right-radius: 4px; }
.concierge__typing { display: inline-flex; gap: 4px; padding: 0.8rem 0.9rem; }
.concierge__typing i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft);
    animation: typing-dot 1s ease-in-out infinite;
}
.concierge__typing i:nth-child(2) { animation-delay: 0.15s; }
.concierge__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.concierge__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.6rem; }
.concierge__chip {
    padding: 0.4em 0.85em;
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
    border-radius: 999px;
    background: #fff;
    color: var(--green);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.concierge__chip:hover { background: var(--green); color: var(--cream); }
.concierge__form { display: flex; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--line); background: #fff; }
.concierge__form input {
    flex: 1;
    padding: 0.6em 0.8em;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: inherit;
    font-size: 0.85rem;
    background: var(--cream);
}
.concierge__form button {
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: var(--green-deep, #2C3F27);
    color: var(--cream);
    font-size: 1rem;
    cursor: pointer;
}
@media (max-width: 640px) {
    .concierge { right: 12px; bottom: 12px; }
    .concierge__fab { font-size: 0.8rem; }
}

/* ---------- Lab: why buy from us ---------- */
.lab__why {
    list-style: none;
    padding: 0;
    margin: 1.8rem 0 0.6rem;
    display: grid;
    gap: 0.9rem;
}
.lab__why li {
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--gold-bright);
    background: color-mix(in srgb, var(--gold-bright) 7%, transparent);
    font-size: 0.92rem;
    line-height: 1.65;
}
.lab__why strong { display: block; color: var(--ink); }

/* ---------- Phones: same life, lighter engine ----------
   Blur + big shadows are the expensive parts on mobile GPUs; shrink them
   and the clouds keep breathing without warming anyone's pocket. */
@media (max-width: 640px) {
    .scent-card__media::after { filter: blur(12px); inset: 0 -4% 2% -4%; }
    .scent-card__media::before {
        box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--scent) 50%, transparent);
        animation-duration: 10s;
    }
    .scent-card__media img { animation-duration: 7s; }
    .hero__mist i { filter: blur(5px); }
    .hero__mist i:nth-child(n+5) { display: none; }   /* 4 particles are plenty */
    .concierge__panel { border-radius: 12px; }
}

/* ---------- The interactive 3D box (lives inside a gallery frame) ---------- */
.box3d__stage { position: relative; }
.box3d__cube {
    position: relative;
    width: var(--bw);
    height: var(--bh);
    transform-style: preserve-3d;
    will-change: transform;
}
.box3d__face {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    backface-visibility: hidden;
}
.box3d__face--front,
.box3d__face--back { width: var(--bw); height: var(--bh); }
.box3d__face--left,
.box3d__face--right { width: var(--bd); height: var(--bh); }
.box3d__face--top,
.box3d__face--bottom { width: var(--bw); height: var(--bd); }
.box3d__face--front  { transform: translate(-50%, -50%) translateZ(calc(var(--bd) / 2)); }
.box3d__face--back   { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--bd) / 2)); }
.box3d__face--left   { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--bw) / 2)); }
.box3d__face--right  { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--bw) / 2)); }
.box3d__face--top    { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--bh) / 2)); }
.box3d__face--bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--bh) / 2)); }
.box3d__face--kraft {
    background:
        radial-gradient(120% 100% at 30% 20%, rgba(255, 245, 226, 0.25), transparent 60%),
        linear-gradient(160deg, #BE9A6C 0%, #A8825A 100%);
}

/* ---------- Home earn band ---------- */
.earnband {
    text-align: center;
    padding: clamp(3rem, 7vw, 5rem) var(--gutter);
    display: grid;
    gap: 0.9rem;
    justify-items: center;
    background: var(--green-mist);
}
.earnband__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    color: var(--ink);
}
.earnband__title em { font-style: italic; color: var(--gold); }
.earnband__sub { color: var(--text-soft); max-width: 34rem; }


/* ---------- Link-in-bio v3: the dark salon ---------- */
.page-links { background: var(--green-deep); }
.page-links main { min-height: 100vh; }
.page-links .site-nav__wordmark-img--green { display: none; }
.page-links .site-nav__wordmark-img--cream { display: block; }
.page-links .site-nav__link, .page-links .site-nav__cart-label,
.page-links .site-nav__lang, .page-links .site-nav__lang a { color: var(--cream); }
.page-links .site-nav__lang a.is-active { color: var(--gold-bright); }
.linkhub {
    position: relative;
    width: min(34rem, 100%);
    margin: 0 auto;
    padding: calc(var(--nav-h) + 2.2rem) var(--gutter) 4rem;
    text-align: center;
    color: var(--cream);
}
.linkhub__aura {
    position: absolute;
    inset: -10% -40% auto -40%;
    height: 480px;
    background:
        radial-gradient(55% 75% at 30% 30%, color-mix(in srgb, var(--gold-bright) 24%, transparent), transparent 70%),
        radial-gradient(50% 70% at 75% 15%, color-mix(in srgb, #6FAE8B 18%, transparent), transparent 70%);
    filter: blur(34px);
    pointer-events: none;
}
.linkhub__head { position: relative; display: grid; justify-items: center; gap: 0.55rem; }
.linkhub__avatar { display: none; }
.linkhub__mark { width: 118px; height: auto; }
.linkhub__tag { font-size: 0.82rem; letter-spacing: 0.05em; color: color-mix(in srgb, var(--cream) 72%, transparent); }
.linkhub__social {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 0.7rem;
}
.linkhub__social a {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cream) 28%, transparent);
    background: color-mix(in srgb, var(--cream) 8%, transparent);
    color: var(--cream);
    transition: transform 0.25s var(--ease), background 0.25s, color 0.25s;
}
.linkhub__social a:hover { transform: translateY(-3px); background: var(--gold-bright); color: var(--ink); }
.linkhub__list { position: relative; display: grid; gap: 0.75rem; margin-top: 2rem; }
.linkhub__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--cream) 96%, transparent);
    color: var(--ink);
    text-decoration: none;
    text-align: left;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.linkhub__item:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3); }
.linkhub__item--primary { background: var(--gold-bright); }
.linkhub__item--primary .linkhub__text span { color: color-mix(in srgb, var(--ink) 68%, transparent); }
.linkhub__thumb {
    flex: 0 0 48px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--green) 10%, transparent);
    overflow: hidden;
}
.linkhub__thumb img { max-height: 50px; width: auto; }
.linkhub__thumb--pyr { display: grid; gap: 3px; justify-items: center; align-content: center; }
.linkhub__thumb--pyr i { display: block; height: 5px; border-radius: 3px; background: var(--gold); }
.linkhub__thumb--pyr i:nth-child(1) { width: 12px; }
.linkhub__thumb--pyr i:nth-child(2) { width: 20px; opacity: 0.75; }
.linkhub__thumb--pyr i:nth-child(3) { width: 28px; opacity: 0.5; }
.linkhub__thumb--earn {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--green);
}
.linkhub__text { flex: 1; display: grid; gap: 0.1rem; }
.linkhub__text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; }
.linkhub__text span { font-size: 0.75rem; color: var(--text-soft); }
.linkhub__arrow { color: var(--gold); font-size: 1.1rem; transition: transform 0.25s var(--ease); }
.linkhub__item:hover .linkhub__arrow { transform: translateX(4px); }


/* Cards reveal quickly: the colour must be there when the page appears */
.scent-card[data-reveal] { transition-duration: 0.4s; }


/* ---------- Phone polish round (Abdul's screenshots, 14 Jul) ---------- */
.cart-drawer.is-open ~ .concierge { display: none; }

@media (max-width: 700px) {
    :root { --nav-h: 108px; }
    /* Compact header: menu | logo | cart. Nav links + language live in the
       drawer, so the whole header is one slim row plus the promo bar. */
    .site-nav__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: auto;
        padding: 0.45rem var(--gutter);
    }
    .site-nav__menu { display: flex; grid-column: 1; grid-row: 1; justify-self: start; }
    .site-nav__wordmark { grid-column: 2; grid-row: 1; justify-self: center; }
    .site-nav__side--right { grid-column: 3; grid-row: 1; justify-self: end; }
    .site-nav__side--left { display: none; }
    .site-nav__lang { display: none; }
    .nav-drawer { display: block; }

    /* hero: bottle centred, glyph behind it */
    .hero__media { display: grid; place-items: center; }
    .hero__media a, .hero__media img { margin: 0 auto; }
    .hero__ar { left: 50%; transform: translate(-50%, -10%); }

    /* PDP: ONE fixed stage height for every panel (bottle / box / notes /
       photos) so the thumbnail row never shifts up or down when you switch —
       the pyramid is compacted to fit this height instead of growing the stage. */
    .pstage { --pstage-h: 300px; min-height: 300px; }
    .pstage__panel--pyramid { padding: 0.25rem 0; }
    .pyramid { gap: 0.35rem; width: min(340px, 96%); }
    .pyramid__tier { padding: 0.5rem 0.85rem; }
    .pyramid__when { font-size: 0.54rem; }
    .pyramid__label { font-size: 0.95rem; }
    .pyramid__notes { font-size: 0.78rem; line-height: 1.25; }
    .product__media .pstage__panel[data-panel="bottle"] img {
        width: auto;
        max-width: 72%;
        max-height: 240px;
        height: auto;
        object-fit: contain;
    }
    /* The 300px box is scaled to fit the compressed stage so it never overflows
       onto the thumbnail row. Scaling the stage (not the JS-rotated cube). */
    .pstage__panel--box .box3d__stage { transform: scale(0.72); }
    .pstage__panel--photo img { max-height: 320px; width: auto; }
    .product__ar { font-size: 4.5rem; }
    .pstage__panel--photo img { max-height: 320px; }

    /* trust strip: stacked lines, no stray dots */
    .trust-strip { flex-direction: column; gap: 0.45rem; }
    .trust-strip i { display: none; }

    /* set band: copy first, fan snug beneath, no vacuum */
    .setband__inner { display: flex; flex-direction: column; }
    .setband__media--fan { order: 2; min-height: auto; padding: 0.6rem 0 0; }
}


/* ---------- Phone polish 2 (14 Jul: quiz fit, footer, chat keyboard) ---------- */
@media (max-width: 700px) {
    /* Quiz: pull content up and compact the cards so all answers fit */
    .quiz { padding-top: calc(var(--nav-h) + 0.5rem); }
    .quiz__stage { justify-content: flex-start; gap: 0.7rem; }
    .quiz__stage--intro { justify-content: center; }
    .quiz__title { font-size: clamp(1.5rem, 7vw, 2rem); }
    .quiz__q { font-size: clamp(1.5rem, 6.5vw, 2rem); }
    .quiz__answers { margin-top: 1rem; gap: 0.6rem; }
    .quiz__answer { padding: 0.85rem 1rem; }
    .quiz__answer-label { font-size: 1rem; line-height: 1.25; }
    .quiz__answer-sub { font-size: 0.76rem; }
    [data-quiz-progress] { margin-bottom: 0.2rem; }

    /* Footer: tighter, calmer, less towering */
    .site-footer { margin-top: 2.2rem; }
    .site-footer__inner {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.1rem 0.8rem !important;
        text-align: left;
        padding: 1.9rem var(--gutter) 1.4rem !important;
    }
    .site-footer__brand { grid-column: 1 / -1; gap: 0.7rem; }
    .site-footer__wordmark-img { width: 104px; height: auto; }
    .site-footer__tagline { font-size: 0.8rem; line-height: 1.55; }
    .scentlist { margin-top: 0.3rem; max-width: 100%; }
    .scentlist__pitch { font-size: 0.78rem; margin-bottom: 0.45rem; }
    .site-footer__col { gap: 0.42rem; }
    .site-footer__heading { margin-bottom: 0.15rem; font-size: 0.55rem; letter-spacing: 0.2em; }
    .site-footer__col a { font-size: 0.82rem; }
    .site-footer__legal { flex-direction: column; gap: 0.25rem; text-align: center; font-size: 0.64rem; padding: 0.9rem var(--gutter) 1.2rem; }
}

/* Chat on phones: a clean full-height sheet. Width locked to the screen
   (no horizontal scroll, the close button never drifts off), calmer spacing,
   messages scroll while the header and input stay put. */
@media (max-width: 640px) {
    /* Bottom-anchored sheet: a fixed element pinned to bottom:0 rides up
       above the iOS keyboard automatically when its input is focused, so the
       whole conversation stays visible. Not full-screen and not top-anchored,
       which is what made earlier versions vanish or hide the input. */
    .concierge__panel {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: 0;
        overflow: hidden;
        box-shadow: none;
    }
    .concierge__head { padding: 1.1rem 1.2rem; flex: 0 0 auto; }
    .concierge__close {
        width: 40px; height: 40px;
        display: grid; place-items: center;
        font-size: 1.7rem;
        opacity: 1;
        margin: -0.4rem -0.5rem -0.4rem 0;
    }
    .concierge__msgs {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        padding: 1.3rem 1.1rem;
        gap: 0.85rem;
    }
    .concierge__msg {
        max-width: 82%;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        line-height: 1.6;
        border-radius: 18px;
    }
    .concierge__msg--us { border-bottom-left-radius: 6px; }
    .concierge__msg--them { border-bottom-right-radius: 6px; }
    .concierge__chips { padding: 0.2rem 1.1rem 0.7rem; gap: 0.5rem; flex: 0 0 auto; }
    .concierge__chip { font-size: 0.85rem; padding: 0.5em 1em; }
    .concierge__form { flex: 0 0 auto; padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom)); gap: 0.6rem; }
    .concierge__form input { font-size: 1rem; padding: 0.75em 1em; }
    .concierge__form button { width: 46px; height: 46px; flex: 0 0 46px; }
}


/* ---------- Cart line: smooth collapse on remove ---------- */
.cart-line {
    transition: height 0.28s var(--ease), opacity 0.24s var(--ease),
                transform 0.28s var(--ease), margin 0.28s var(--ease), padding 0.28s var(--ease);
    overflow: hidden;
}
.cart-line.is-removing {
    opacity: 0;
    transform: translateX(-16px);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* re-rendered lines fade in softly (no harsh flash) */
[data-cart-lines] .cart-line { animation: cartline-in 0.3s var(--ease) both; }
@keyframes cartline-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .cart-line, [data-cart-lines] .cart-line { animation: none; transition: none; }
}


/* ---------- Layering cross-sell (PDP) ---------- */
.layering { width: min(74rem, 100%); margin: clamp(3rem, 7vw, 5rem) auto 0; padding: 0 var(--gutter); }
.layering__lead { color: var(--text-soft); max-width: 40rem; margin: 0.4rem auto 0; }
.layering__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.layering__card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink);
    background: #fff;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.layering__card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28,26,23,0.1); border-color: color-mix(in srgb, var(--scent) 55%, transparent); }
.layering__media {
    flex: 0 0 72px; height: 92px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--scent) 30%, #fff), transparent 78%);
}
.layering__media img { max-height: 84px; width: auto; filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--scent) 40%, transparent)); }
.layering__text { display: grid; gap: 0.25rem; }
.layering__text strong { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; }
.layering__text strong em { font-style: normal; color: var(--scent); padding: 0 0.15em; }
.layering__why { font-size: 0.84rem; color: var(--text-soft); line-height: 1.45; }

/* ---------- Curated set (The Icons) ---------- */
.curated { display: flex; gap: 0.8rem; margin: 0.5rem 0 1.2rem; }
.curated__item {
    flex: 1;
    display: grid; justify-items: center; gap: 0.25rem;
    padding: 0.9rem 0.4rem;
    border-radius: 12px;
    background: radial-gradient(closest-side at 50% 40%, color-mix(in srgb, var(--scent) 26%, #fff), transparent 80%);
}
.curated__item img { height: 70px; width: auto; filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--scent) 42%, transparent)); }
.curated__name { font-family: var(--font-display); font-size: 0.95rem; }
.curated__size { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--text-soft); }

/* ---------- Locate me (checkout) ---------- */
.cofield__legend-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.cofield__locate {
    display: inline-flex; align-items: center; gap: 0.35em;
    padding: 0.4em 0.8em;
    border: 1px solid var(--green);
    border-radius: 999px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.cofield__locate:hover { background: var(--green); color: var(--cream); }
.cofield__locate:disabled { opacity: 0.5; cursor: wait; }
.cofield__locate-note { font-size: 0.8rem; color: var(--green); margin: 0.2rem 0 0.6rem; }
.cofield__locate-note.is-error { color: var(--clay); }

/* ---------- Brand emblem ---------- */
.emblem { width: clamp(72px, 12vw, 104px); height: auto; color: var(--gold-bright); margin: 0 auto 1.4rem; display: block; }
.story .emblem { color: color-mix(in srgb, var(--gold-bright) 92%, #fff); position: relative; z-index: 1; }


/* A disabled CTA must read as disabled (set picker gates on 4 scents). */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Intent landing pages (/for/...) ---------- */
.intentpage { width: min(74rem, 100%); margin: 0 auto; padding: calc(var(--nav-h, 102px) + 2.5rem) var(--gutter) 4rem; }
.intentpage__head { max-width: 46rem; margin-bottom: 2.2rem; }
.intentpage__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); color: var(--ink); margin: 0.3rem 0 0.8rem; }
.intentpage__intro { color: var(--text-soft); font-size: 1.02rem; line-height: 1.65; }
.intentpage__quiz { margin: 2rem 0 2.6rem; padding: 0.9rem 1.1rem; background: color-mix(in srgb, var(--green) 7%, transparent); border-radius: 10px; font-size: 0.92rem; }
.intentpage__quiz a { color: var(--green-deep); font-weight: 600; }
.intentpage__body { max-width: 46rem; margin: 2.6rem 0; }
.intentpage__body h2 { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 1.6rem 0 0.5rem; }
.intentpage__body p { color: var(--text-soft); line-height: 1.75; }
.intentpage__faq { max-width: 46rem; margin-bottom: 2.6rem; }
.intentpage__faq h2, .intentpage__more h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin-bottom: 0.9rem; }
.intentpage__qa { border-bottom: 1px solid var(--line-soft); padding: 0.75rem 0; }
.intentpage__qa summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.intentpage__qa p { margin-top: 0.55rem; color: var(--text-soft); line-height: 1.6; }
.intentpage__more ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; }
.intentpage__more a {
    display: inline-block; padding: 0.5rem 0.95rem; border: 1px solid var(--line);
    border-radius: 999px; color: var(--green-deep); text-decoration: none; font-size: 0.85rem;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.intentpage__more a:hover { border-color: var(--green-deep); background: color-mix(in srgb, var(--green) 8%, transparent); }

/* ---------- Branded 404 ---------- */
.errpage {
    min-height: 60vh;
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    gap: 0.9rem;
    padding: calc(var(--nav-h, 102px) + 3rem) var(--gutter) 4rem;
    position: relative;
}
.errpage__ar {
    font-family: var(--font-arabic, serif);
    font-size: clamp(5rem, 16vw, 9rem);
    color: color-mix(in srgb, var(--gold) 26%, transparent);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -58%);
    pointer-events: none;
}
.errpage__title { font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 2.8rem); color: var(--ink); position: relative; }
.errpage__text { color: var(--text-soft); position: relative; }
.errpage__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; margin-top: 0.6rem; position: relative; }

/* ---------- Payment chips (checkout) ---------- */
.paymethods { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
/* Explicit CSS heights: the global img { height: auto } reset beats the HTML
   height attributes, so without these the SVG marks render at natural size. */
.paychip img { display: block; width: auto; height: 18px; }
.paychip img[alt="FPX"] { height: 16px; }
.paychip img[alt="Visa"] { height: 12px; }
.paychip img[alt="GrabPay"] { height: 14px; }
.paychip img[alt="Apple Pay"] { height: 15px; }
.paychip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 0.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(28,26,23,0.05);
}
.paychip svg { display: block; }
.paychip--tng {
    font-family: Arial, sans-serif;
    font-weight: 800; font-size: 0.72rem; letter-spacing: 0.02em;
    color: #fff; background: #013F81; border-color: #013F81;
    padding: 0 0.7rem;
}

/* ---------- Reviews headline: elegant stat, not a plain sentence ---------- */
.voices__statline {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.3rem;
}
.voices__stat {
    font-family: var(--font-price);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    font-size: 1.15em;
}
.voices__stat-label { color: var(--text-soft); font-size: 0.9rem; }
.voices__stars-lead { color: var(--gold-bright); letter-spacing: 0.1em; }



/* ---------- Round 6 phone fixes ---------- */
.trust-strip__star { color: var(--gold-bright); font-size: 1.15em; }
.voices__stars-lead { font-size: 1.1rem; }

/* concierge FAB must never sit over the checkout / pay button */
.page-checkout .concierge { display: none; }
/* The quiz IS guided discovery — the concierge is redundant here and its
   fixed bubble otherwise floats over the result copy while scrolling. */
.page-quiz .concierge { display: none; }

/* cart savings + promo amounts: never wrap, always right-aligned */
.cart-promo li span:last-child,
.cart-drawer__savings span:last-child { white-space: nowrap; }
.cart-promo li { align-items: baseline; }

/* shipping option: struck real price then Free */
.shipopt__price s { color: var(--text-soft); font-weight: 400; margin-right: 0.3em; }
.shipopt__was { color: var(--text-soft); font-size: 0.78em; font-weight: 400; }
/* optional-field hint on checkout labels */
.cofield__opt { font-style: normal; font-size: 0.82em; color: var(--text-soft); font-weight: 400; opacity: 0.8; }

/* story who-we-are: ensure it reads, tighter on phones */
.story__who { position: relative; z-index: 1; }

@media (max-width: 700px) {
    /* phones: the closing section should end close to the footer, not float
       above a field of cream */
    .story { padding-top: 2.25rem; padding-bottom: 1rem; gap: 0.9rem; }
    .story__who { font-size: 0.9rem; gap: 0.7rem; margin-top: 1rem; }
    /* footer: tighter, the scent-list sits inline not towering */
    .site-footer { margin-top: 2rem; }
    .scentlist__row { flex-wrap: nowrap; }
}

/* ---------- Layering-aware free gift recommendation ---------- */
.cart-gift__suggest {
    display: grid;
    gap: 0.2rem;
    width: 100%;
    text-align: left;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--gold-bright);
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold-bright) 14%, transparent);
    cursor: pointer;
}
.cart-gift__suggest-label { font-size: 0.85rem; }
.cart-gift__suggest-label strong { color: var(--green); }
.cart-gift__suggest-why { font-size: 0.75rem; color: var(--text-soft); line-height: 1.4; }
.cart-gift__suggest-cta { font-size: 0.72rem; font-weight: 600; color: var(--gold-deep, #8A6A1F); letter-spacing: 0.04em; }
.cart-gift__or { text-align: center; font-size: 0.72rem; color: var(--text-soft); margin: 0.5rem 0 0.4rem; }
/* The gift picker also renders inside the dark-green cart DRAWER, where the
   light-background colours above turn gray/invisible. Force readable light text. */
.cart-drawer .cart-gift__head,
.cart-drawer .cart-gift__suggest-label { color: var(--cream); }
.cart-drawer .cart-gift__suggest-label strong { color: var(--gold-bright); }
.cart-drawer .cart-gift__suggest-why { color: rgba(250, 247, 241, 0.82); }
.cart-drawer .cart-gift__suggest-cta { color: var(--gold-bright); }
.cart-drawer .cart-gift__or { color: rgba(250, 247, 241, 0.7); }

/* Set cards carry full-bleed photos (not cutouts). The photo IS the organic
   shape: it fills the media box, clipped to the same blob language as the
   auras, edges feathered by mask so it melts into the card. No floating
   rectangle, no frame-in-a-frame. */
.scent-card--set .scent-card__media img {
    width: 96%;
    height: 96%;
    object-fit: cover;
    border-radius: 58% 42% 55% 45% / 52% 48% 45% 55%;
    -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 58%, transparent 99%);
            mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 58%, transparent 99%);
}

/* Set PDP stage: same organic-blob photo treatment as the cards. The photo
   IS the shape — the generic glow blob and ghost glyph behind it would just
   double up, so they step aside and the photo breathes larger. */
.pstage__panel--setphoto img {
    object-fit: cover;
    width: min(94%, 520px);
    max-height: none;
    aspect-ratio: 3 / 4;
    border-radius: 58% 42% 55% 45% / 52% 48% 45% 55%;
    -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 58%, transparent 99%);
            mask-image: radial-gradient(ellipse 74% 74% at 50% 50%, #000 58%, transparent 99%);
}
.pstage__panel--setphoto .product__glow,
.pstage__panel--setphoto .product__ar { display: none; }

/* Set photos in carts and summaries: cover + soft corners, never a raw
   rectangle next to transparent bottle cutouts. */
img[src*="/sets/"] {
    object-fit: cover;
    border-radius: 12px;
}

/* Savings ladder under the PDP CTA: quiet rows, real numbers */
.buy__ladder {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    display: grid;
    gap: 0.35rem;
    border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--gold) 5%, transparent);
    font-size: 0.8rem;
}
.buy__ladder li { display: flex; justify-content: space-between; gap: 1rem; color: var(--text-soft); }
.buy__ladder em { font-style: normal; font-weight: 600; color: var(--green-deep); white-space: nowrap; }

/* ---------- Size-to-vial swap: picking 10ml shows the real vial ---------- */
[data-panel="bottle"] [data-bottle-img] {
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
[data-panel="bottle"] [data-bottle-img].is-size-swap {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
}

/* ---------- Confirmation earn card (post-purchase advocate recruit) ---------- */
.confirmed__earn {
    width: 100%;
    margin-top: 1.4rem;
    padding: 1.6rem 1.5rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--gold-bright) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--gold-bright) 28%, transparent);
    text-align: center;
}
.confirmed__earn-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.5rem;
}
.confirmed__earn-head {
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--ink);
}
.confirmed__earn-body {
    max-width: 34ch;
    margin: 0.5rem auto 1.1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-soft);
}
.confirmed__earn-btn {
    display: inline-block;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    background: var(--green-deep);
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.confirmed__earn-btn:hover { background: var(--green); transform: translateY(-1px); }


/* ---------- Round 7 phone fixes ---------- */
/* Lock the page behind the mobile chat sheet so it can't scroll away */
/* Scroll-lock only (no position change: position:fixed on body collapsed the
   layout and made the chat sheet disappear). The 90dvh sheet + backdrop cover
   the screen anyway. */
body.concierge-open { overflow: hidden; }
.concierge.is-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 11, 0.45);
    z-index: -1;
    pointer-events: none; /* decorative dimming only; never trap taps */
}

/* EN/BM: adequate tap target without looking oversized */
.site-nav__lang { font-size: 0.68rem; gap: 0.1rem; }
.site-nav__lang a { min-width: 26px; min-height: 26px; padding: 0 0.3em; border-radius: 6px; }


/* ---------- Links page: a clean standalone (no store chrome) ---------- */
.page-links .site-nav,
.page-links .site-footer,
.page-links .intl { display: none !important; }
.page-links main { padding-top: 0; }
.page-links .linkhub { padding-top: clamp(2rem, 6vw, 3.5rem); }

/* PDP: a clear way back to browse the rest */
/* The way back to the twelve. Was near-invisible: `.crumbs a` (0,1,1) beat
   `.crumbs__back` (0,1,0) and greyed it out, at 0.68rem with no affordance —
   shoppers could not find it, which killed browsing several scents in one go.
   Now a real pill, and specific enough to win. */
.crumbs .crumbs__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-deep);
    text-decoration: none;
    min-height: 44px;
    padding: 0.55rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--green-deep) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--green) 5%, transparent);
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.crumbs .crumbs__back:hover {
    color: var(--green-deep);
    border-color: var(--green-deep);
    background: color-mix(in srgb, var(--green) 12%, transparent);
}
.crumbs__arrow { transition: transform 0.2s var(--ease); }
.crumbs .crumbs__back:hover .crumbs__arrow { transform: translateX(-3px); }

/* Cart drawer: the 10ml pair block note */
.cart-drawer__blocknote {
    font-size: 0.8rem;
    color: var(--gold-bright);
    margin-bottom: 0.6rem;
    text-align: center;
}

/* Admin action cells: buttons in one aligned row, never cut off */
.adm-rowactions--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
}
.adm-rowactions--inline form { display: inline-flex; margin: 0; }
.adm-panel { overflow-x: auto; }
.adm-table { min-width: 100%; }

/* Dashboard P&L */
.adm-pnl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
/* Traffic panel: three quiet columns under the stat cards */
.adm-traffic__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-top: 1rem; }
.adm-traffic__cols h3 { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #625D52; margin-bottom: 0.4rem; }
.adm-traffic__cols p { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; padding: 0.25rem 0; border-bottom: 1px dashed var(--line, #E5DFD2); }
.adm-traffic__cols code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-pnl__grid div { display: grid; gap: 0.15rem; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--line, #E5DFD2); border-radius: 10px; }
.adm-pnl__grid span { font-size: 0.72rem; color: #625D52; letter-spacing: 0.04em; }
.adm-pnl__grid strong { font-size: 1.05rem; }
.adm-pnl__profit { border-color: #3D5636 !important; background: #F2F5EF !important; }
.adm-details summary { cursor: pointer; list-style: revert; }
.adm-details:not([open]) { opacity: 0.75; }