/* ============================================================
   AURANDUS — Fragrance After Dark
   Design tokens
   ============================================================ */
:root{
  /* The light palette is a designed one. Without this, Chrome's
     "Auto Dark Mode for Web Contents" re-tints the beige to a dark
     brown and flips the type, while leaving photos untouched. The
     dark theme below declares `dark` instead, which exempts it too. */
  color-scheme: only light;

  /* Base — warm beige paper. --base is the page, --base-2 the alternating
     band, --clay the deepest sand the page settles into. */
  --base:      #F0E7D6;
  --base-2:    #E4D8C0;
  --clay:      #D9C9A9;
  --clay-2:    #CDBB98;
  --surface:   #F7F1E6;   /* cards lifted off the page */

  /* Ink — warm espresso rather than black, so nothing reads cold. */
  --ink:       #2A2119;
  --ink-dim:   rgba(42,33,25,0.68);

  /* Metals. --gold paints (borders, rules, fills); --gold-ink is the
     darkened version reserved for text, where it clears AA on beige. */
  --gold:      #9C7233;
  --gold-ink:  #7A5620;
  --gold-soft: rgba(156,114,51,0.45);
  --amber:     #A85F2A;

  /* The hero film is footage and stays dark; it reads as a lit panel set
     into the beige. These are the only dark-surface tokens left. */
  --film:         #14100C;
  --on-film:      #F4ECDC;
  --on-film-dim:  rgba(244,236,220,0.72);

  /* Triplets, so rgba() can be mixed from the same palette. */
  --base-rgb:  240,231,214;
  --ink-rgb:   42,33,25;
  --gold-rgb:  156,114,51;
  --amber-rgb: 168,95,42;
  --film-rgb:  20,16,12;


  /* ---- Typography ------------------------------------------------
     Three tracking tiers do all the work: --track-label for the small
     uppercase luxury labels, --track-ui for interface type, and a much
     finer --track-heading for headings, which are set in the same
     family and so lean on weight and tightened tracking to read as
     display. Inter takes a hair of negative tracking at body sizes,
     where it is otherwise a touch loose. */
  /* Body 400, small labels 500, headings and figures 600. Size alone
     is not enough to build hierarchy inside a single family. */
  --w-book:    400;
  --w-medium:  500;
  --w-display: 600;

  --track-brand:   0.2em;
  --track-label:   0.24em;
  --track-heading: -0.02em;
  --track-ui:      0.16em;
  --track-meta:    0.1em;
  --track-display: -0.02em;
  --track-body:    -0.005em;

  --lh-display: 1.14;
  --lh-heading: 1.22;
  --lh-body:    1.75;
  --lh-snug:    1.5;

  /* A tight, deliberate ramp — every size on the page resolves to one
     of these, and the display steps are fluid between mobile and desktop. */
  --fs-micro: 0.5625rem;                        /*  9px */
  --fs-3xs:   0.625rem;                         /* 10px */
  --fs-2xs:   0.6875rem;                        /* 11px */
  --fs-xs:    0.75rem;                          /* 12px */
  --fs-sm:    0.875rem;                         /* 14px */
  --fs-base:  1rem;                             /* 16px */
  --fs-md:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-xl:    clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  --fs-2xl:   clamp(1.625rem, 1.25rem + 1.9vw, 2.375rem);
  --fs-3xl:   clamp(1.875rem, 1.35rem + 2.4vw, 2.75rem);

  /* One family across the whole page. --display exists to carry the
     heading treatment (heavier cut, tighter tracking), not a second face. */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --header-h: 88px;
  --ease-slow: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   DARK THEME
   ------------------------------------------------------------
   Same token names, night values — so every rule that already
   reads a token flips for free. Only the places where a value is
   an image treatment (logo, footage grades, glows) need a real
   override, and those are listed below.
   ============================================================ */
:root[data-theme="dark"]{
  color-scheme: dark;

  --base:      #0B0908;
  --base-2:    #120E0A;
  --clay:      #1A0F0C;
  --clay-2:    #241511;
  --surface:   #17120D;

  --ink:       #EFE6D7;
  --ink-dim:   rgba(239,230,215,0.66);

  --gold:      #B89155;
  --gold-ink:  #CBA469;
  --gold-soft: rgba(184,145,85,0.5);
  --amber:     #B36A32;

  --base-rgb:  11,9,8;
  --ink-rgb:   239,230,215;
  --gold-rgb:  184,145,85;
  --amber-rgb: 179,106,50;
}

/* The logo artwork is dark ink: the light theme uses it as supplied,
   the dark theme has to flip it back. */
:root[data-theme="dark"] .brand-logo{
  filter: invert(1) sepia(0.26) saturate(0.6) brightness(1.02);
}

/* Product cards carry their own gradients rather than a flat token. */
:root[data-theme="dark"] .product-card--ivory{ background: linear-gradient(165deg, #16110c 0%, #0d0a08 60%); }
:root[data-theme="dark"] .product-card--amber{ background: linear-gradient(165deg, #1d120a 0%, #0d0906 60%); }
:root[data-theme="dark"] .product-card--noir{  background: linear-gradient(165deg, #120b0c 0%, #050405 60%); }

/* A dark drop-shadow is invisible on a dark card — glow instead. */
:root[data-theme="dark"] .product-card--ivory:hover .product-card-image img{
  filter: drop-shadow(-14px 10px 22px rgba(239,230,215,0.12));
}

/* Grain needs more presence on a dark ground. */
:root[data-theme="dark"] .grain{ opacity: 0.045; }

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.theme-toggle{
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.38);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.theme-toggle:hover{
  border-color: var(--gold);
  background: rgba(var(--gold-rgb),0.12);
}
.theme-toggle:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.theme-icon{
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Show the theme you would switch TO. */
.theme-icon--sun{ display: none; }
:root[data-theme="dark"] .theme-icon--sun{ display: block; }
:root[data-theme="dark"] .theme-icon--moon{ display: none; }

*, *::before, *::after{ box-sizing: border-box; }

/* An author `display` beats the UA rule behind the hidden attribute, so
   anything given display: grid/flex stays visible while marked hidden.
   The cart badge was showing "0" for exactly this reason. */
[hidden]{ display: none !important; }

/* Form controls opt out of font inheritance by default, which was leaving
   every <button> on the page set in the UA's Arial rather than Inter. */
button, input, select, textarea{
  font-family: inherit;
  letter-spacing: inherit;
}

html{
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--base);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .hero-text,
  .hero-text--left,
  .hero-text--right,
  .note-layer,
  .notes-visual,
  .combo-visual,
  .combo-builder{
    transition-property: opacity;
    transform: none !important;
  }
  .product-card:hover{ transform: none; }
  .product-card-image img,
  .product-card:hover .product-card-image img{ transition: none; transform: none; }
}

/* Custom scrollbar (WebKit / Chromium / Edge / Safari) */
::-webkit-scrollbar{
  width: 10px;
}
::-webkit-scrollbar-track{
  background: var(--base);
}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--gold), var(--amber));
  border-radius: 10px;
  border: 2px solid var(--base);
}
::-webkit-scrollbar-thumb:hover{
  background: var(--gold);
}
::-webkit-scrollbar-corner{
  background: var(--base);
}

body{
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: var(--w-book);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: var(--display);
  /* A sans has to earn display presence through weight and tight
     tracking rather than through letterform contrast. */
  text-wrap: balance;
  font-weight: var(--w-display);
  margin: 0;
  color: var(--ink);
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
  font-kerning: normal;
  font-feature-settings: "liga" 1, "calt" 1;
}

ul{ list-style: none; margin: 0; padding: 0; }

/* Focus visibility */
a:focus-visible,
button:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.eyebrow{
  font-family: var(--sans);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 14px;
  font-weight: var(--w-medium);
}
.eyebrow--small{ font-size: var(--fs-3xs); letter-spacing: var(--track-label); margin-bottom: 10px; }

html.is-loading,
body.is-loading{
  overflow: hidden;
  height: 100%;
}

.site-loader{
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--base);
  opacity: 1;
  transition: opacity 0.7s var(--ease-slow);
}
.site-loader.is-hidden{
  opacity: 0;
  pointer-events: none;
}
.loader-word{
  font-family: var(--sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0;
}
.loader-percent{
  font-family: var(--display);
  font-weight: var(--w-display);
  font-size: var(--fs-3xl);
  line-height: 1;
  color: var(--ink);
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: var(--track-heading);
}
.loader-bar{
  width: 220px;
  height: 1px;
  background: rgba(var(--gold-rgb),0.3);
}
.loader-bar-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--gold));
  transition: width 0.25s var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .loader-bar-fill{ transition: none; }
}

/* Film grain overlay */
.grain{
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress rail — signature detail */
.progress-rail{
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 160px;
  background: rgba(var(--gold-rgb),0.3);
  z-index: 250;
}
.progress-fill{
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  transition: height 0.1s linear;
}
@media (max-width: 900px){ .progress-rail{ display: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.26);
  /* Kept tinted even at the top: the header overlaps the dark hero film,
     and espresso nav type needs the beige behind it to stay legible. */
  background: rgba(var(--base-rgb),0.84);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  transition: background 0.5s var(--ease-out), border-color 0.5s var(--ease-out), backdrop-filter 0.5s var(--ease-out);
}
.site-header.is-scrolled{
  background: rgba(var(--base-rgb),0.95);
  border-color: rgba(var(--gold-rgb),0.38);
}

.header-inner{
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The brand name is supplied as artwork (assets/aurandus-logo.png), so
   its spacing is baked into the image and these rules only take effect
   if the wordmark is ever set as live text. Kept on-system for that day. */
.wordmark{
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-brand);
  color: var(--ink);
  white-space: nowrap;
}

.main-nav{
  display: flex;
  gap: 46px;
}
.main-nav a{
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--ink-dim);
  position: relative;
  padding-bottom: 6px;
  transition: color 0.35s var(--ease-out);
  font-weight: var(--w-book);
}
.main-nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right 0.4s var(--ease-out);
}
.main-nav a:hover,
.main-nav a:focus-visible{
  color: var(--ink);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after{ right: 0; }

.header-actions{ display: flex; align-items: center; gap: 22px; }

.btn-discover{
  border: 1px solid var(--gold-soft);
  padding: 10px 26px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--ink);
  border-radius: 2px;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out);
  font-weight: var(--w-medium);
}
.btn-discover:hover,
.btn-discover:focus-visible{
  border-color: var(--gold);
  background: rgba(var(--gold-rgb),0.18);
  color: var(--gold-ink);
}
.btn-discover--mobile{ display: inline-block; margin-top: 22px; text-align: center; }

.nav-toggle{
  display: none;
  width: 34px;
  height: 26px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span{
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(12.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-12.5px) rotate(-45deg); }

.mobile-menu{
  display: none;
  flex-direction: column;
  padding: 10px 40px 34px;
  background: rgba(var(--base-rgb),0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.16);
}
.mobile-menu a{
  padding: 14px 0;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.16);
}
.mobile-menu.is-open{ display: flex; }

@media (max-width: 860px){
  .main-nav{ display: none; }
  .header-actions .btn-discover{ display: none; }
  .nav-toggle{ display: flex; }
  .header-inner{ padding: 0 22px; }
}

/* ============================================================
   HERO — scroll-controlled cinematic video
   ============================================================ */
.hero{
  position: relative;
  height: 700vh;
}
.hero-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--film);
}

.hero-video-stack{
  position: absolute;
  inset: 0;
}
.hero-video, .hero-video-fallback img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-video{
  transform-origin: center;
  /* The hero is scroll-scrubbed, so at rest it is a still frame and reads
     as a stuck image on open. A very slow tilt keeps it breathing until
     the first scroll. The baseline scale covers the corners the rotation
     would otherwise swing into view: at 0.8deg a 390x844 viewport needs
     ~1.030, so 1.05 leaves margin on every aspect. */
  animation: hero-idle-tilt 19s ease-in-out infinite;
  /* A gentle warm grade ties the footage to the beige palette. */
  filter: sepia(0.16) saturate(1.06) contrast(1.02);
  /* Only the segment covering the current scroll position is painted.
     No transition: consecutive parts are consecutive frames of one film,
     so the handover must be a hard cut, not a crossfade. */
  opacity: 0;
}
.hero-video.is-active{
  opacity: 1;
}
.hero-video.is-scrolling{
  animation-play-state: paused;
}
@keyframes hero-idle-tilt{
  0%   { transform: scale(1.05) rotate(-0.8deg); }
  50%  { transform: scale(1.065) rotate(0.8deg); }
  100% { transform: scale(1.05) rotate(-0.8deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-video{ animation: none; transform: none; }
}
.hero-video-fallback{ position: absolute; inset: 0; }
/* The film-new hero: in very wide, short windows a cover fit crops away the bottle's
   cap and base, so show the whole frame there; the film's own dark edges meet the backdrop. */
@media (min-aspect-ratio: 2/1){
  .hero-video-stack.is-film-new .hero-video{ object-fit: contain; }
}

.hero-vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(var(--film-rgb),0) 40%, rgba(var(--film-rgb),0.55) 100%),
    linear-gradient(180deg, rgba(var(--film-rgb),0.55) 0%, rgba(var(--film-rgb),0.05) 18%, rgba(var(--film-rgb),0.05) 78%, rgba(var(--film-rgb),0.65) 100%);
  pointer-events: none;
}

.hero-end-fade{
  position: absolute;
  inset: 0;
  /* Dissolves the film into the beige page rather than into black. */
  background: linear-gradient(180deg, rgba(var(--base-rgb),0) 0%, rgba(var(--base-rgb),0.72) 58%, var(--base) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.05s linear;
}

.hero-text{
  position: absolute;
  top: 50%;
  max-width: 460px;
  padding: 0 6vw;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-slow), transform 0.7s var(--ease-slow);
  pointer-events: none;
}
.hero-text.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.hero-text--left{ left: 0; transform: translateY(28px); }
.hero-text--left.is-visible{ transform: translateY(0); }
.hero-text--right{ right: 0; text-align: right; transform: translateY(28px); }
.hero-text--right.is-visible{ transform: translateY(0); }

.hero-text--upper{ top: 30%; }
.hero-text--mid{ top: 50%; }
.hero-text--lower{ top: 70%; }

.hero-text h2{
  font-size: var(--fs-xl);
  line-height: var(--lh-display);
  margin: 0 0 16px;
  color: var(--on-film);
  font-weight: var(--w-display);
}
.hero-body{
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--on-film-dim);
  max-width: 380px;
  text-wrap: pretty;
}
.hero-text--right .hero-body{ margin-left: auto; }

.scroll-cue{
  position: absolute;
  bottom: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--on-film-dim);
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  opacity: 1;
  transition: opacity 0.6s var(--ease-out);
}
.scroll-cue.is-hidden{ opacity: 0; }
.scroll-cue-line{
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, var(--on-film), transparent);
  animation: cue-pulse 2.4s ease-in-out infinite;
}
@keyframes cue-pulse{
  0%, 100%{ transform: scaleY(0.6); opacity: 0.5; }
  50%{ transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue-line{ animation: none; }
}

@media (max-width: 860px){
  .hero{ height: 560vh; }
  .hero-text{ max-width: 82vw; padding: 0 26px; }
}

/* ============================================================
   Shared section head
   ============================================================ */
.section-head{
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.section-head h2{
  font-size: var(--fs-2xl);
  margin-bottom: 18px;
  font-weight: var(--w-display);
}
.section-sub{
  color: var(--ink-dim);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  max-width: 520px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ============================================================
   COLLECTION — product cards
   ============================================================ */
/* ---- Per-product background wash ----------------------------------
   Each card carries a tone; the layer below picks it up as that card
   passes the middle of the screen, and clears once the last one is
   past. Alphas are deliberately low so body text keeps its contrast,
   and the dark theme needs its own, much lighter, set. */
.collection-tone{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: transparent;
  transition: background-color 0.85s var(--ease-out);
}
.collection-tone[data-tone="ivory"]{ background-color: rgba(228, 205, 154, 0.55); }
.collection-tone[data-tone="amber"]{ background-color: rgba(198, 118, 44, 0.30); }
.collection-tone[data-tone="noir"] { background-color: rgba(92, 58, 74, 0.26); }

:root[data-theme="dark"] .collection-tone[data-tone="ivory"]{ background-color: rgba(228, 205, 154, 0.09); }
:root[data-theme="dark"] .collection-tone[data-tone="amber"]{ background-color: rgba(198, 118, 44, 0.16); }
:root[data-theme="dark"] .collection-tone[data-tone="noir"] { background-color: rgba(126, 74, 98, 0.18); }

/* keep the content above the wash */
.collection > *:not(.collection-tone){ position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce){
  .collection-tone{ transition: none; }
  .product-card:active,
  .product-card.is-pressed{ transform: none; }
  .scent-card:active,
  .size-card:active .size-card-inner{ transform: none; }
}

.collection{
  position: relative;
  background: var(--base-2);
  padding: 140px 0 130px;
  scroll-margin-top: var(--header-h);
}
.product-grid{
  max-width: 1360px;
  margin: 80px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.product-card{
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(var(--gold-rgb),0.3);
  padding: 44px 36px 40px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 620px;
  transition: transform 0.6s var(--ease-out), border-color 0.4s var(--ease-out);
}
.product-card:hover{ transform: translateY(-6px); border-color: rgba(var(--gold-rgb),0.55); }

/* ---- Pressed: the card takes the same wash the section behind it uses,
   so pressing a card matches it to its background tone. The tone is
   composited over the card's own gradient with the identical rgba the
   .collection-tone layer uses, so the two agree exactly. `.is-pressed`
   is set from pointer events because :active is unreliable on non
   interactive elements in iOS Safari. ------------------------------ */
.product-card:active,
.product-card.is-pressed{ transform: scale(0.994); border-color: var(--gold); }

.product-card--ivory:active,
.product-card--ivory.is-pressed{
  background: linear-gradient(rgba(228,205,154,0.55), rgba(228,205,154,0.55)),
              linear-gradient(165deg, #FBF6EC 0%, #EFE5D0 60%);
}
.product-card--amber:active,
.product-card--amber.is-pressed{
  background: linear-gradient(rgba(198,118,44,0.30), rgba(198,118,44,0.30)),
              linear-gradient(165deg, #F9EFDC 0%, #EBDBBC 60%);
}
.product-card--noir:active,
.product-card--noir.is-pressed{
  background: linear-gradient(rgba(92,58,74,0.26), rgba(92,58,74,0.26)),
              linear-gradient(165deg, #F2E9D6 0%, #E2D3B4 60%);
}

:root[data-theme="dark"] .product-card--ivory:active,
:root[data-theme="dark"] .product-card--ivory.is-pressed{
  background: linear-gradient(rgba(228,205,154,0.09), rgba(228,205,154,0.09)),
              linear-gradient(165deg, #16110c 0%, #0d0a08 60%);
}
:root[data-theme="dark"] .product-card--amber:active,
:root[data-theme="dark"] .product-card--amber.is-pressed{
  background: linear-gradient(rgba(198,118,44,0.16), rgba(198,118,44,0.16)),
              linear-gradient(165deg, #1d120a 0%, #0d0906 60%);
}
:root[data-theme="dark"] .product-card--noir:active,
:root[data-theme="dark"] .product-card--noir.is-pressed{
  background: linear-gradient(rgba(126,74,98,0.18), rgba(126,74,98,0.18)),
              linear-gradient(165deg, #120b0c 0%, #050405 60%);
}

.product-card--ivory{ background: linear-gradient(165deg, #FBF6EC 0%, #EFE5D0 60%); }
.product-card--amber{ background: linear-gradient(165deg, #F9EFDC 0%, #EBDBBC 60%); }
.product-card--noir{ background: linear-gradient(165deg, #F2E9D6 0%, #E2D3B4 60%); border-color: rgba(var(--gold-rgb),0.45); }

.product-card-image{
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  margin-bottom: 30px;
}
.product-card-image::before{
  content: "";
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb),0.16), transparent 72%);
  filter: blur(6px);
}
.product-card-image img{
  position: relative;
  max-height: 340px;
  width: auto;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid rgba(var(--ink-rgb),0.10);
  box-shadow: 0 8px 22px rgba(20,16,12,0.13);
  transition: transform 1.1s var(--ease-slow), filter 1.1s var(--ease-slow);
}
.product-card:hover .product-card-image img{
  transform: scale(1.055);
}
.product-card--ivory:hover .product-card-image img{ filter: drop-shadow(-14px 10px 22px rgba(var(--ink-rgb),0.20)); }
.product-card--amber:hover .product-card-image img{ filter: drop-shadow(-14px 10px 22px rgba(var(--amber-rgb),0.34)); }
.product-card--noir:hover .product-card-image img{ filter: drop-shadow(-14px 10px 22px rgba(var(--gold-rgb),0.38)); }

.product-card-body h3{
  font-size: var(--fs-xl);
  margin: 2px 0 14px;
  font-weight: var(--w-display);
}
.product-desc{
  color: var(--ink-dim);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.product-notes{
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 26px;
}
.discover-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.55);
  padding-bottom: 4px;
  width: fit-content;
  transition: gap 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.discover-link span{ transition: transform 0.3s var(--ease-out); }
.discover-link:hover,
.discover-link:focus-visible{
  color: var(--gold-ink);
  border-color: var(--gold);
  gap: 12px;
}

@media (max-width: 1100px){
  .product-grid{ grid-template-columns: 1fr; max-width: 560px; }
  .product-card{ min-height: unset; }
  /* Stacked, the card is wider than the 272px the height cap allowed, which
     left blank card either side of the photo. Here the image spans the card
     instead and takes its height from the 4:5 source. */
  .product-card-image{ min-height: 0; }
  .product-card-image img{
    width: 100%;
    height: auto;
    max-height: none;
  }
}
@media (max-width: 860px){
  .collection{ padding: 100px 0 90px; }
  .product-grid{ margin-top: 56px; padding: 0 22px; gap: 22px; }
}

/* ============================================================
   FRAGRANCE NOTES
   ============================================================ */
.notes-section{
  background: linear-gradient(180deg, var(--base-2), var(--clay) 120%);
  padding: 150px 0;
  scroll-margin-top: var(--header-h);
}
.notes-grid{
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 90px;
  align-items: center;
}
.notes-copy h2{
  font-size: var(--fs-2xl);
  margin-bottom: 48px;
  font-weight: var(--w-display);
}
.note-layer{
  padding: 26px 0;
  border-top: 1px solid rgba(var(--gold-rgb),0.3);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-slow), transform 0.8s var(--ease-slow);
}
.note-layer.is-revealed{ opacity: 1; transform: translateY(0); }
.note-layer:last-child{ border-bottom: 1px solid rgba(var(--gold-rgb),0.3); }
.note-layer h3{
  font-size: var(--fs-lg);
  margin-bottom: 12px;
  color: var(--gold-ink);
  font-weight: var(--w-display);
}
.note-list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 12px;
}
.note-list li{
  font-size: var(--fs-base);
  color: var(--ink);
  position: relative;
  padding-left: 16px;
}
.note-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
}
.note-desc{
  color: var(--ink-dim);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  max-width: 420px;
  text-wrap: pretty;
}

.notes-visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow);
}
.notes-visual.is-revealed{ opacity: 1; transform: translateY(0); }
.notes-glow{
  position: absolute;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(var(--amber-rgb),0.24), transparent 70%);
  filter: blur(20px);
}
.notes-visual img{
  position: relative;
  max-height: 520px;
  width: auto;
  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(var(--ink-rgb),0.10);
  box-shadow: 0 8px 22px rgba(20,16,12,0.13);
}

@media (max-width: 980px){
  .notes-grid{ grid-template-columns: 1fr; gap: 56px; }
  .notes-visual{ order: -1; }
  .notes-visual img{ max-height: 380px; }
}
@media (max-width: 860px){
  .notes-section{ padding: 100px 0; }
  .notes-grid{ padding: 0 24px; }
}

/* ============================================================
   COMBO BUILDER
   ------------------------------------------------------------
   Two steps: a set size (radio) then the scents (checkboxes),
   capped at the chosen size. Real form controls do the state and
   the keyboard work; the visible card is drawn from :checked, and
   the native input is only visually hidden so focus still lands.
   ============================================================ */
.combo{
  /* .combo-glow is inset negatively so its halo bleeds past the image;
     clipping here keeps that bleed from widening the document. */
  overflow: hidden;
  background: radial-gradient(ellipse at 20% 30%, rgba(var(--gold-rgb),0.06), transparent 55%), var(--base);
  padding: 150px 0 160px;
  border-top: 1px solid rgba(var(--gold-rgb),0.22);
  scroll-margin-top: var(--header-h);
}
.combo-grid{
  max-width: 1300px;
  margin: 70px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 72px;
  align-items: center;
}

.combo-visual{
  position: relative;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-slow), transform 1s var(--ease-slow);
}
.combo-visual.is-revealed{ opacity: 1; transform: translateY(0); }
.combo-glow{
  position: absolute;
  inset: -12% -6%;
  background: radial-gradient(circle, rgba(var(--gold-rgb),0.2), transparent 68%);
  pointer-events: none;
}
.combo-visual img{
  position: relative;
  max-height: 520px;
  width: auto;
  border-radius: 18px;
  border: 1px solid rgba(var(--ink-rgb),0.10);
  box-shadow: 0 8px 22px rgba(20,16,12,0.13);
}

/* ---- The set itself: a 10 ml flacon per chosen scent ---- */
.combo-visual{ flex-direction: column; align-items: center; gap: 26px; }

.combo-tray{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--gold-rgb),0.28);
}
.tray-slot{
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 58px;
  /* A flex item defaults to min-width:auto, so a long caption like
     "MIDNIGHT" refuses to go below its min-content width and stretches its
     slot wider than the others. Pin it to 0 and let the caption wrap. */
  min-width: 0;
}
.tray-vial-frame{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 260 / 852;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(var(--ink-rgb),0.05);
}
.tray-vial{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Sized to the glass measured off the crop: the cap ends at 19.5%, the body
   holds a steady 28.8%-78.8% across, and the base meets the stone at 77%.
   The tint has to stop there or it paints a rectangle onto the plinth. */
.tray-juice{
  position: absolute;
  left: 30%;
  right: 23%;
  top: 22%;
  bottom: 24%;
  border-radius: 2px 2px 6px 6px;
  mix-blend-mode: multiply;
  opacity: 0.88;
  pointer-events: none;
  transition: background 0.5s var(--ease-out);
}
/* Filled slots arrive rather than blink in. */
.tray-slot--filled .tray-vial-frame{
  animation: flacon-in 0.42s var(--ease-out) both;
  box-shadow: 0 6px 16px rgba(var(--ink-rgb),0.18);
}
@keyframes flacon-in{
  from{ opacity: 0; transform: translateY(9px) scale(0.94); }
  to  { opacity: 1; transform: none; }
}
.tray-slot--empty .tray-vial-frame{
  background: none;
  border: 1px dashed rgba(var(--gold-rgb),0.35);
}

.tray-name{
  font-size: var(--fs-3xs);
  line-height: 1.35;
  /* 0.12em pushed "MIDNIGHT" past the 58px slot and widened that one tile. */
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-dim);
}
.tray-slot--empty .tray-name{ color: rgba(var(--ink-rgb),0.32); }
.tray-size{
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-meta);
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.tray-slot--empty .tray-size{ color: rgba(var(--ink-rgb),0.28); }

@media (prefers-reduced-motion: reduce){
  .tray-slot--filled .tray-vial-frame{ animation: none; }
  .tray-vial{ transition: none; }
}

.combo-builder{
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s var(--ease-slow) 0.15s, transform 1s var(--ease-slow) 0.15s;
}
.combo-builder.is-revealed{ opacity: 1; transform: translateY(0); }

.combo-step{
  border: 0;
  padding: 0;
  margin: 0 0 42px;
}
.combo-step legend{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
  margin-bottom: 20px;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.combo-step-n{
  font-family: var(--display);
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  color: var(--gold-ink);
  font-weight: var(--w-medium);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---- Step 1: set size ---- */
.size-card-list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.size-card{ cursor: pointer; }
.size-card input{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.size-card-inner{
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 10px 18px;
  border: 1px solid rgba(var(--gold-rgb),0.3);
  border-radius: 3px;
  background: var(--surface);
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.size-card:hover .size-card-inner{ transform: translateY(-3px); }
.size-card input:checked + .size-card-inner{
  border-color: var(--gold);
  background: var(--clay);
}
:root[data-theme="dark"] .size-card input:checked + .size-card-inner{
  background: rgba(var(--gold-rgb),0.16);
}
.size-card input:focus-visible + .size-card-inner{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.size-card-count{
  font-family: var(--display);
  letter-spacing: var(--track-heading);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--ink);
  font-weight: var(--w-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.size-card-label{
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.size-card-price{
  margin-top: 6px;
  font-size: var(--fs-sm);
  letter-spacing: var(--track-meta);
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Step 2: scents ---- */
.scent-group-list{
  display: grid;
  gap: 24px;
}
.scent-group-title{
  margin: 0 0 10px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}
.scent-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  margin-bottom: 8px;
  border: 1px solid rgba(var(--gold-rgb),0.22);
  border-radius: 3px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), opacity 0.3s var(--ease-out), transform 0.12s var(--ease-out);
}
.scent-card:hover{ border-color: rgba(var(--gold-rgb),0.5); }
.scent-card input{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.scent-card-box{
  flex: none;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(var(--gold-rgb),0.55);
  border-radius: 2px;
  position: relative;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.scent-card-box::after{
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--base);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s var(--ease-out);
}
.scent-card input:checked ~ .scent-card-box{
  background: var(--ink);
  border-color: var(--ink);
}
.scent-card input:checked ~ .scent-card-box::after{ transform: rotate(45deg) scale(1); }
/* Selected: the row itself changes, so the name stays at full-contrast
   ink rather than gold, which would only reach 4.1:1 on the clay fill. */
.scent-card.is-selected{
  background: var(--clay);
  border-color: var(--gold);
}
:root[data-theme="dark"] .scent-card.is-selected{
  background: rgba(var(--gold-rgb),0.16);
}
.scent-card.is-selected:hover{ border-color: var(--gold); }

/* A little give on press, on both the scent rows and the set cards. */
.scent-card:active,
.size-card:active .size-card-inner{ transform: scale(0.985); }
.scent-card input:focus-visible ~ .scent-card-box{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.scent-card-text{ display: grid; gap: 2px; }
.scent-card-name{
  font-size: var(--fs-base);
  letter-spacing: var(--track-body);
  color: var(--ink);
  transition: color 0.25s var(--ease-out);
}
.scent-card-notes{
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  color: var(--ink-dim);
}
/* Set is full: the unpicked ones step back rather than disappear. */
.scent-card.is-muted{
  opacity: 0.42;
  cursor: not-allowed;
}
.scent-card.is-muted:hover{ border-color: rgba(var(--gold-rgb),0.22); }

.combo-hint{
  margin: 14px 0 0;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-body);
  color: var(--gold-ink);
}

/* ---- Summary ---- */
.combo-summary{
  border-top: 1px solid rgba(var(--gold-rgb),0.3);
  padding-top: 26px;
}
.combo-summary-line{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.combo-count{
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.combo-price{
  font-family: var(--display);
  font-size: var(--fs-xl);
  line-height: 1;
  color: var(--ink);
  font-weight: var(--w-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: var(--track-heading);
}
.combo-picked{
  margin: 12px 0 26px;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  min-height: 1.65em;
  text-wrap: pretty;
}
.combo-actions{
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.combo-note{
  margin: 20px 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  max-width: 460px;
  text-wrap: pretty;
}
.combo-cta:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.combo-cta:disabled:hover{
  background: var(--ink);
  color: var(--base);
  border-color: var(--ink);
  transform: none;
}

.btn-primary{
  display: inline-block;
  padding: 16px 38px;
  border: 1px solid var(--ink);
  color: var(--base);
  background: var(--ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  border-radius: 2px;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  font-weight: var(--w-medium);
}
.btn-primary:hover,
.btn-primary:focus-visible{
  background: transparent;
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.btn-link{
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding-bottom: 3px;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.btn-link:hover,
.btn-link:focus-visible{ color: var(--gold-ink); border-color: var(--gold); }

@media (max-width: 980px){
  .combo-grid{ grid-template-columns: 1fr; gap: 50px; }
  .combo-visual img{ max-height: 420px; }
}
@media (max-width: 860px){
  .combo{ padding: 100px 0 110px; }
  .combo-grid{ padding: 0 24px; margin-top: 46px; }
  .size-card-list{ gap: 10px; }
  .size-card-inner{ padding: 16px 6px 14px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--base-2);
  border-top: 1px solid rgba(var(--gold-rgb),0.28);
  padding: 100px 0 50px;
}
.footer-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.footer-wordmark{
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  letter-spacing: 0.1em;
  margin: 0 0 10px;
}
.footer-tagline{
  color: var(--gold-ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin: 0 0 56px;
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin-bottom: 56px;
}
.footer-nav a{
  font-size: var(--fs-sm);
  letter-spacing: var(--track-meta);
  color: var(--ink-dim);
  transition: color 0.3s var(--ease-out);
}
.footer-nav a:hover,
.footer-nav a:focus-visible{ color: var(--gold-ink); }
.footer-statement{
  font-family: var(--display);
  letter-spacing: var(--track-body);
  font-style: normal;
  font-size: var(--fs-lg);
  color: var(--ink-dim);
  margin: 0 0 40px;
  font-weight: var(--w-book);
}
.footer-copyright{
  font-size: var(--fs-2xs);
  color: rgba(var(--ink-rgb),0.45);
  margin: 0;
  padding-top: 30px;
  border-top: 1px solid rgba(var(--gold-rgb),0.22);
  letter-spacing: var(--track-meta);
}

@media (max-width: 860px){
  .site-footer{ padding: 80px 0 40px; }
}

/* ============================================================
   SHOP BADGE — persistent rotating CTA
   ------------------------------------------------------------
   Cream disc so it holds against both grounds it crosses: the dark
   hero film at the top of the page, and the beige sections below.
   The ring turns; the core stays upright so the icon stays readable.
   ============================================================ */
.shop-badge{
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 260;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid rgba(var(--gold-rgb),0.45);
  box-shadow: 0 16px 38px rgba(var(--ink-rgb),0.30);
  color: var(--ink);
  opacity: 1;
  transition: opacity 0.6s var(--ease-slow), box-shadow 0.45s var(--ease-out);
}
.shop-badge:hover,
.shop-badge:focus-visible{
  box-shadow: 0 20px 46px rgba(var(--ink-rgb),0.40);
}
.shop-badge:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

/* the running total, worn on the badge */
.shop-badge-count{
  position: absolute;
  top: 4px; right: 4px;
  min-width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--base);
  font-size: 0.72rem;
  font-weight: var(--w-medium);
  line-height: 1;
}
.shop-badge.has-items{ border-color: var(--gold); }

/* The loader owns the screen until the film is in memory. */
body.is-loading .shop-badge{
  opacity: 0;
  pointer-events: none;
}

.shop-badge-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: shop-badge-spin 20s linear infinite;
}
.shop-badge-ring text{
  font-family: var(--sans);
  font-size: 8.4px;
  font-weight: 500;
  /* Tuned so the string's natural advance equals the 210.5-unit
     circumference — Chrome ignores textLength on a textPath, so the ring
     has to be closed by spacing rather than by stretching. */
  letter-spacing: 2.09px;
  text-transform: uppercase;
  fill: var(--gold-ink);
}
@keyframes shop-badge-spin{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

.shop-badge-core{
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.45s var(--ease-out);
}
.shop-badge:hover .shop-badge-core,
.shop-badge:focus-visible .shop-badge-core{
  transform: scale(1.09);
}
.shop-badge-core svg{
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--base);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px){
  .shop-badge{
    right: 16px;
    bottom: 16px;
    width: 84px;
    height: 84px;
  }
  .shop-badge-core{ width: 36px; height: 36px; }
  .shop-badge-core svg{ width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce){
  .shop-badge-ring{ animation: none; }
  .shop-badge-core,
  .shop-badge:hover .shop-badge-core{ transition: none; transform: none; }
}

/* ============================================================
   CART
   ------------------------------------------------------------
   A right-hand drawer over a backdrop. State lives in localStorage
   and is rendered by script.js; everything here is presentation.
   ============================================================ */
.cart-toggle{
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.38);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.cart-toggle:hover{ border-color: var(--gold); background: rgba(var(--gold-rgb),0.12); }
.cart-toggle:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.cart-toggle svg{
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.cart-count{
  position: absolute;
  top: -4px; right: -4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ink);
  color: var(--base);
  font-size: 0.5625rem;
  font-weight: var(--w-medium);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.cart-backdrop{
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(20,16,12,0.5);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.cart-backdrop.is-open{ opacity: 1; }

.cart{
  position: fixed;
  top: 0; right: 0;
  z-index: 420;
  width: min(420px, 100vw);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--base);
  border-left: 1px solid rgba(var(--gold-rgb),0.3);
  box-shadow: -18px 0 48px rgba(20,16,12,0.22);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out);
}
.cart.is-open{ transform: translateX(0); }

.cart-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 18px;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.26);
}
.cart-head h2{ font-size: var(--fs-lg); }
.cart-close{
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.cart-close:hover{ border-color: var(--gold); background: rgba(var(--gold-rgb),0.12); }
.cart-close:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.cart-close svg{ width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.cart-body{ flex: 1; overflow-y: auto; padding: 22px 26px 26px; }
.cart-lines{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.cart-line{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.2);
}
.cart-line-name{ font-size: var(--fs-base); font-weight: var(--w-medium); color: var(--ink); }
.cart-line-meta{
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-dim);
}
.cart-line-price{ font-size: var(--fs-base); color: var(--ink); font-variant-numeric: tabular-nums; }
.cart-line-controls{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.cart-qty{
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 3px;
  overflow: hidden;
}
.cart-qty button{
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease-out);
}
.cart-qty button:hover{ background: rgba(var(--gold-rgb),0.14); }
.cart-qty button:focus-visible{ outline: 2px solid var(--gold); outline-offset: -2px; }
.cart-qty-value{
  min-width: 26px;
  text-align: center;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.cart-remove{
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink-dim);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.4);
  transition: color 0.3s var(--ease-out);
}
.cart-remove:hover{ color: var(--gold-ink); }
.cart-remove:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

.cart-empty{
  margin: 8px 0 0;
  font-size: var(--fs-base);
  color: var(--ink-dim);
}

.cart-upsell{
  margin-top: 26px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(var(--gold-rgb),0.34);
  border-radius: 4px;
  background: var(--clay);
}
:root[data-theme="dark"] .cart-upsell{ background: rgba(var(--gold-rgb),0.14); }
.cart-upsell-eyebrow{
  margin: 0 0 6px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}
.cart-upsell-text{
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink);
}
.cart-upsell-link{ background: none; border: 0; padding: 0 0 3px; cursor: pointer; }

.cart-foot{
  padding: 20px 26px 26px;
  border-top: 1px solid rgba(var(--gold-rgb),0.26);
  background: var(--base-2);
}
.cart-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cart-total-value{
  font-size: var(--fs-xl);
  font-weight: var(--w-display);
  letter-spacing: var(--track-heading);
  text-transform: none;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cart-checkout{ width: 100%; }
.cart-note{
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-dim);
  min-height: 1.6em;
}

/* Condensed combo summary */
.combo-summary-head{
  margin: 0 0 6px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}
.combo-cta{ width: 100%; margin-top: 18px; }

/* Product card buy row */
.product-buy{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 16px;
}
/* Add is the quiet choice, Buy Now the loud one — outline against solid,
   so the pair reads as a preference rather than two equal commands. */
.product-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.product-actions .product-add,
.product-actions .product-now{ padding: 13px 22px; cursor: pointer; }
.product-add.is-added{
  border-color: var(--gold);
  background: rgba(var(--gold-rgb),0.16);
  color: var(--gold-ink);
}
@media (max-width: 520px){
  .product-actions{ width: 100%; }
  .product-actions .product-add,
  .product-actions .product-now{ flex: 1 1 auto; text-align: center; }
}
.product-price{
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--w-display);
  letter-spacing: var(--track-heading);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.product-add{ padding: 12px 24px; }

body.cart-open{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .cart, .cart-backdrop{ transition: none; }
}
@media (max-width: 620px){
  .cart-head, .cart-body, .cart-foot{ padding-left: 20px; padding-right: 20px; }
}

/* ---- Page-side summary of the sets (selection happens in the cart) ---- */
.combo-offer{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-slow) 0.15s, transform 1s var(--ease-slow) 0.15s;
}
.combo-offer.is-revealed{ opacity: 1; transform: translateY(0); }
.combo-offer-list{
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 2px;
}
.combo-offer-list li{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.26);
}
.combo-offer-n{
  font-size: var(--fs-lg);
  font-weight: var(--w-display);
  letter-spacing: var(--track-heading);
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.combo-offer-name{
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.combo-offer-price{
  font-size: var(--fs-base);
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}
.combo-offer-note{
  margin: 0 0 24px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ---- The builder, now hosted inside the cart drawer ---- */
.set-builder{
  margin-bottom: 24px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(var(--gold-rgb),0.34);
  border-radius: 4px;
  background: var(--base-2);
}
.set-builder-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.set-builder-head h3{ font-size: var(--fs-base); }
.set-builder-close{
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.set-builder-close:hover{ border-color: var(--gold); background: rgba(var(--gold-rgb),0.12); }
.set-builder-close:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.set-builder-close svg{ width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* the drawer is narrow, so the builder's own spacing tightens up */
.set-builder .combo-step{ margin-bottom: 22px; }
.set-builder .combo-step legend{ margin-bottom: 12px; }
.set-builder .size-card-list{ gap: 8px; }
.set-builder .size-card-inner{ padding: 12px 4px 10px; }
.set-builder .scent-card{ padding: 10px 12px; }
.set-builder .combo-tray{
  gap: 8px;
  padding-top: 16px;
  margin-top: 4px;
}
.set-builder .tray-slot{ width: 58px; }
.set-builder .combo-summary{ padding-top: 18px; }

/* ============================================================
   SHOP — sign-in and checkout form
   ============================================================ */
.auth-btn{
  flex: none;
  padding: 9px 16px;
  border: 1px solid rgba(var(--gold-rgb),0.38);
  border-radius: 3px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.auth-btn:hover:not(:disabled){ border-color: var(--gold); background: rgba(var(--gold-rgb),0.12); }
.auth-btn:disabled{ opacity: 0.45; cursor: not-allowed; }
.auth-btn:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.auth-user{
  flex: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  color: var(--gold-ink);
}

.checkout-form{ display: grid; gap: 12px; }
.checkout-form-head{
  margin: 0;
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}
.field{ display: grid; gap: 5px; }
.field-label{
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.field input{
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-base);
}
.field input:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}
.field input::placeholder{ color: rgba(var(--ink-rgb),0.4); }
.checkout-cancel{ justify-self: start; background: none; border: 0; padding: 0 0 3px; cursor: pointer; }

@media (max-width: 620px){
  .auth-btn, .auth-out{ display: none; }   /* the drawer is where checkout happens on a phone */
}

/* ---- Order receipt (shown after a payment returns) ---- */
.cart-receipt{
  margin-bottom: 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(var(--gold-rgb),0.4);
  border-radius: 4px;
  background: var(--clay);
}
:root[data-theme="dark"] .cart-receipt{ background: rgba(var(--gold-rgb),0.14); }
.cart-receipt-head{
  margin: 0 0 6px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--gold-ink);
}
.cart-receipt-id{
  margin: 0 0 12px;
  font-size: var(--fs-base);
  font-weight: var(--w-medium);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cart-receipt-lines{
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cart-receipt-lines li{
  font-size: var(--fs-xs);
  color: var(--ink);
}
.cart-receipt-lines span{ color: var(--ink-dim); }
.cart-receipt-note{
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ---- Sign-in form bits (used by the modal) ---- */
.signin-submit{ width: 100%; }
.signin-sent{
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.signin-back{ justify-self: start; background: none; border: 0; padding: 0 0 3px; cursor: pointer; }
.signin-or{
  margin: 14px 0 10px;
  text-align: center;
  font-size: var(--fs-3xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.signin-note{
  margin: 10px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--gold-ink);
  min-height: 1.7em;
  text-wrap: pretty;
}
/* a password box with its Show/Hide inside the right edge */
.field-pw{ position: relative; display: block; }
.field-pw input{ padding-right: 64px; }
.field-pw-show{
  position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-size: var(--fs-3xs); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-dim);
}
.field-pw-show:hover, .field-pw-show:focus-visible{ color: var(--gold-ink); }
.signin-forgot{
  justify-self: end; margin-top: -4px;
  background: none; border: 0; border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding: 0 0 2px; cursor: pointer; font-size: 0.78rem;
  letter-spacing: normal; text-transform: none;
}
#siCode{
  letter-spacing: 0.4em;
  text-align: center;
  font-size: var(--fs-lg);
  font-variant-numeric: tabular-nums;
}
/* the name reads as a label now — the sign-out icon beside it is the control */
.auth-out{
  flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.auth-out:hover, .auth-out:focus-visible{ color: var(--gold-ink); border-color: var(--gold); }
.auth-out svg{
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   SIGN-IN MODAL
   ============================================================ */
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(20,16,12,0.55);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.modal-backdrop.is-open{ opacity: 1; }

.modal{
  position: fixed;
  z-index: 520;
  top: 50%;
  left: 50%;
  width: min(400px, calc(100vw - 32px));
  max-height: min(88dvh, 640px);
  overflow-y: auto;
  padding: 28px 28px 26px;
  border: 1px solid rgba(var(--gold-rgb),0.34);
  border-radius: 6px;
  background: var(--base);
  box-shadow: 0 26px 60px rgba(20,16,12,0.34);
  transform: translate(-50%, -46%);
  opacity: 0;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.modal.is-open{ opacity: 1; transform: translate(-50%, -50%); }

.modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.modal-head h2{ font-size: var(--fs-lg); }
.modal-close{
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.modal-close:hover{ border-color: var(--gold); background: rgba(var(--gold-rgb),0.12); }
.modal-close:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
.modal-close svg{ width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.modal-lead{
  margin: 0 0 20px;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ink-dim);
  text-wrap: pretty;
}
.modal form{ display: grid; gap: 12px; }

body.modal-open{ overflow: hidden; }

@media (prefers-reduced-motion: reduce){
  .modal, .modal-backdrop{ transition: none; }
}

/* ============================================================
   AURANDUS LOGO
   ------------------------------------------------------------
   assets/aurandus-logo.png holds the supplied artwork on a
   transparent ground — run ./tools-make-logo.sh <file> to key the
   white out of a fresh export. It is dark artwork, which the beige
   page wants as-is — no invert. The sepia pass only warms the ink
   off pure black into the palette's espresso.
   ============================================================ */
.brand-logo{
  display: block;
  width: auto;
  filter: sepia(0.4) saturate(0.75) brightness(0.72);
}

/* The header logo overlaps the dark hero film only behind a beige,
   blurred bar, so it stays the dark mark everywhere on the page. */

.wordmark{ display: inline-flex; align-items: center; }
.brand-logo--header{
  height: 54px;
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
}
.wordmark:hover .brand-logo--header,
.wordmark:focus-visible .brand-logo--header{
  opacity: 0.78;
  transform: translateY(-2px);
}

.brand-logo--loader{
  height: 92px;
  animation: logo-breathe 3.4s var(--ease-slow) infinite;
}
@keyframes logo-breathe{
  0%   { opacity: 0.4; transform: translateY(4px); }
  50%  { opacity: 1;   transform: translateY(0); }
  100% { opacity: 0.4; transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce){
  .brand-logo--loader{ animation: none; opacity: 1; }
}

.brand-logo--footer{
  height: 74px;
  margin: 0 auto 10px;
}

@media (max-width: 620px){
  .brand-logo--header{ height: 40px; }
  .brand-logo--loader{ height: 68px; }
  .brand-logo--footer{ height: 58px; }
}

/* variant pills — the ml choice on a product card */
.variant-row{ display:flex; gap:8px; margin:2px 0 10px; flex-wrap:wrap; }
.variant-pill{
  font: inherit; font-size: 0.8rem; letter-spacing: .04em;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(60,48,36,0.28); background: transparent; color: inherit;
}
.variant-pill.is-on{ background: var(--ink, #241c15); color: var(--paper, #f3ead9); border-color: transparent; }

/* payment mode + charge preview in checkout */
.pay-mode{ border: 1px solid rgba(60,48,36,0.22); border-radius: 12px; padding: 12px 14px; margin: 4px 0 10px; }
.pay-mode legend{ font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; padding: 0 6px; opacity: .7; }
.pay-mode-opt{ display: flex; align-items: center; gap: 9px; padding: 5px 2px; cursor: pointer; }
.pay-mode-opt em{ font-style: normal; opacity: .65; font-size: 0.85em; }
.charge-note{ font-size: 0.85rem; opacity: .75; margin: 0 0 10px; line-height: 1.5; }

/* promo code row in checkout */
.promo-row{ display: block; margin: 2px 0 12px; }
.promo-row .pick-row{ display: flex; gap: 10px; align-items: stretch; margin-top: 7px; }
.promo-row input{
  flex: 1; font: inherit; color: inherit;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--gold-rgb),0.32);
  border-radius: 10px; padding: 12px 14px;
}
.promo-row input:focus-visible{ outline: 2px solid var(--gold); outline-offset: 1px; }
.promo-row .btn-link{
  font: inherit; letter-spacing: .08em; text-transform: uppercase; font-size: 0.72rem;
  border: 1px solid rgba(var(--gold-rgb),0.4); background: transparent; color: inherit;
  border-radius: 10px; padding: 0 18px; cursor: pointer;
}
.promo-row .btn-link:hover{ border-color: var(--gold); }
.promo-note{ display: block; font-style: normal; font-size: 0.83rem; margin-top: 5px; opacity: .8; }
.promo-note.ok{ color: #1f8a5a; }
.promo-note.bad{ color: #b4452f; }

/* The checkout grew (district, promo, payment mode) past the drawer's
   height. The foot shrinks and scrolls — but the item list keeps a floor,
   because a cart whose contents are invisible stops being a cart. */
/* ---- the cart drawer, and the full-screen checkout it opens into -------
   Two different jobs, two different shapes. Glancing at what you picked is
   a side-drawer task: it should not cover the shop you were browsing. TYPING
   an address is not — it is a form with a map, a promo box and a payment
   choice, and squeezing that into 420px is what produced the two duelling
   scrollbars. So the drawer stays a drawer, and pressing Checkout expands it
   to the full window for the details step. */
.cart{
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.45s var(--ease-out), width 0.4s var(--ease-out);
}
.cart-head{
  position: sticky; top: 0; z-index: 3;
  background: var(--base);
}
.cart-body{ flex: 1 0 auto; overflow: visible; min-height: 0; }
.cart-foot{ flex: none; overflow: visible; min-height: 0; }

/* ---- checkout: the same panel, taken full screen ---- */
.cart.is-checkout{
  width: 100%;
  max-width: none;
  border-left: 0;
}
.cart.is-checkout .cart-head{ padding: 20px clamp(20px, 5vw, 48px); }
.cart.is-checkout .cart-head h2{ font-size: var(--fs-xl); }
.cart.is-checkout .cart-stage{
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 48px) 64px;
  display: grid;
  /* the form leads; what you are buying rides along on the right */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 34px;
  align-items: start;
}
.cart.is-checkout .cart-body{
  order: 2;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb),0.24);
  border-radius: 5px;
  padding: 18px 20px;
}
.cart.is-checkout .cart-foot{
  order: 1;
  padding: 0;
  border-top: 0;
  background: transparent;
}
/* the upsell is a browsing nudge; at the address step it is just noise */
.cart.is-checkout .cart-upsell,
.cart.is-checkout .set-builder{ display: none; }
@media (max-width: 900px){
  .cart.is-checkout .cart-stage{ grid-template-columns: 1fr; gap: 22px; }
  .cart.is-checkout .cart-body{ order: 1; }
  .cart.is-checkout .cart-foot{ order: 2; }
}

/* ---- location: the pin button on the form, and the map popup ---- */
.locate-row{ display: grid; gap: 6px; }
.locate-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 12px 18px; cursor: pointer;
}
.locate-btn svg{
  flex: none;
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.btn-outline{
  display: inline-block;
  border: 1px solid rgba(var(--gold-rgb),0.5);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  border-radius: 2px;
  font-weight: var(--w-medium);
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.btn-outline:hover,
.btn-outline:focus-visible{ border-color: var(--gold); background: rgba(var(--gold-rgb),0.1); }
.locate-done{ margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--gold-ink); }

.map-modal{ width: min(560px, calc(100vw - 32px)); }
.map-tools{ display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.map-tools input{
  flex: 1 1 200px; min-width: 0; padding: 11px 13px;
  border: 1px solid rgba(var(--gold-rgb),0.32); border-radius: 3px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 0.9rem;
}
.map-gps{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer; white-space: nowrap;
}
.map-gps svg{
  flex: none;
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round;
}
.map-canvas{
  height: 300px; border-radius: 4px; overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb),0.28);
  background: rgba(var(--ink-rgb),0.05);
  display: grid; place-items: center;
}
.map-canvas .leaflet-container{ width: 100%; height: 100%; background: transparent; }
.map-loading{ margin: 0; font-size: 0.82rem; opacity: .6; }
.map-hint{ margin: 8px 0 0; font-size: 0.76rem; opacity: .6; }
.map-picked{
  margin: 6px 0 0; min-height: 1.2em;
  font-size: 0.82rem; line-height: 1.5; color: var(--gold-ink);
}
.map-actions{ display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.map-actions .btn-primary{ padding: 13px 26px; cursor: pointer; }
.map-actions .btn-primary:disabled{ opacity: .45; cursor: not-allowed; }
.map-actions .btn-link{
  background: none; border: 0; border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding: 0 0 3px; cursor: pointer;
}
.map-credit{ margin: 12px 0 0; font-size: 0.68rem; opacity: .5; }
.map-credit a{ color: inherit; text-decoration: underline; }
@media (max-width: 620px){
  .map-canvas{ height: 240px; }
}

/* ---- the guest way past the sign-in popup ---- */
.signin-guest{ display: grid; gap: 6px; margin-top: 14px; text-align: center; }
/* a .btn-link <button> keeps the UA's box unless it is told not to */
.signin-guest .btn-link{
  justify-self: center; background: none; border: 0;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding: 0 0 3px; cursor: pointer;
}
.signin-guest-note{ margin: 0; font-size: 0.76rem; line-height: 1.5; opacity: .6; }
/* a rule with the word set into it, rather than a bare floating "or" */
.gate-or{
  display: flex; align-items: center; gap: 12px;
  margin: 2px 0; font-size: var(--fs-3xs);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-dim);
}
.gate-or::before, .gate-or::after{
  content: ""; flex: 1; height: 1px; background: rgba(var(--gold-rgb),0.28);
}
/* the signed-in line that replaces the guest note inside the form */
.signed-note{
  margin: -6px 0 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  opacity: .8;
}
.signed-note b{ font-weight: var(--w-medium); color: var(--gold-ink); }
.signed-note .btn-link{
  font-size: inherit; background: none; border: 0;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding: 0 0 2px; cursor: pointer;
}

.signin-switch{
  margin: 10px 0 0; text-align: center;
  font-size: 0.82rem; opacity: .75;
}
.signin-switch .btn-link{
  font-size: inherit; background: none; border: 0;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding: 0 0 2px; cursor: pointer;
}
/* ---- orders, full screen ---------------------------------------------
   A list of past orders is something people READ — comparing dates, hunting
   the one with the tracking number. In a 480px box with its own scrollbar
   that means squinting, so it takes the window like the checkout does. Each
   row leads with a status dot, because "where is it" is the only question
   anyone opens this page to answer. */
.orders-modal{
  position: fixed; inset: 0;
  top: 0; left: 0;
  width: 100%; max-width: none;
  height: 100dvh; max-height: none;
  border: 0; border-radius: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* the shared .modal centres itself with a translate; a full-screen panel
     has nothing to centre, so it rises instead of sliding sideways */
  transform: translateY(2%);
}
.orders-modal.is-open{ transform: none; }
.orders-modal .modal-head{
  position: sticky; top: 0; z-index: 3;
  background: var(--base);
  padding: 20px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid rgba(var(--gold-rgb),0.26);
  margin: 0;
}
.orders-modal .modal-head h2{ font-size: var(--fs-xl); }
.orders-list{
  max-height: none; overflow: visible;
  max-width: 860px; margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 48px) 64px;
  display: grid; gap: 14px;
}
.orders-empty{ opacity: .7; padding: 18px 0; }
/* who is signed in, and the way to change the password, above the list */
.orders-account{
  max-width: 860px; margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 48px) 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  font-size: 0.82rem; color: var(--ink-dim);
}
.orders-account .btn-link{
  font-size: inherit; background: none; border: 0;
  border-bottom: 1px solid rgba(var(--gold-rgb),0.45);
  padding: 0 0 2px; cursor: pointer;
  letter-spacing: normal; text-transform: none;
}

.order-card{
  border: 1px solid rgba(var(--gold-rgb),0.28);
  border-radius: 6px;
  padding: 18px 20px;
  margin-bottom: 0;
  transition: border-color 0.3s var(--ease-out);
}
.order-card:hover{ border-color: rgba(var(--gold-rgb),0.55); }

/* the status line, first and largest — the reason the page was opened */
.order-state{
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm); color: var(--ink);
  margin: 0 0 4px;
}
.order-state::before{
  content: ""; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.order-state.is-delivered::before{ background: #4caf7d; }
.order-state.is-shipped::before{ background: #4a90d9; }
.order-state.is-packed::before{ background: var(--gold); }
.order-state.is-waiting::before{ background: rgba(var(--ink-rgb),0.3); }
.order-state-when{ opacity: .55; font-size: var(--fs-xs); }

.order-card-items{ font-size: 0.9rem; margin: 0 0 10px; line-height: 1.55; color: var(--ink); }
.order-card-track{ font-size: 0.82rem; margin: 0 0 10px; opacity: .85; }
.order-card-track a{ color: var(--gold); }
.order-card-track.delivered{ color: #4caf7d; }

/* id, money and payment sit last: reference detail, not headline */
.order-card-foot{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--gold-rgb),0.18);
  font-size: 0.75rem;
}
.order-card-id{ letter-spacing: .06em; opacity: .6; }
.order-card-amt{ font-weight: 600; font-size: 0.95rem; margin-left: auto; }
.order-bill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid rgba(var(--gold-rgb),0.4); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.order-bill:hover{ border-color: var(--gold); background: rgba(var(--gold-rgb),0.1); }
.order-bill:disabled{ opacity: .5; cursor: default; }
.order-bill svg{
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.order-chip{
  padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor;
  letter-spacing: .06em; text-transform: uppercase; font-size: 0.68rem;
}
.order-chip.paid{ color: #4caf7d; }
.order-chip.cod{ color: var(--gold); }
.order-chip.due{ opacity: .6; }
.order-card-date{ opacity: .6; }