/* Self-hosted fonts (latin subset): no extra origins, no render-blocking Google Fonts request. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/cormorant.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/cormorant-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/outfit.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Zulal Parfums — Design System
   ---------------------------------------------------------------------------
   Direction: editorial fragrance house. Warm paper / espresso surfaces (user
   selectable, light by default), one restrained antique-gold accent used as
   punctuation rather than fill, hairline rules instead of boxes, and a
   high-contrast serif display paired with a clean geometric sans for UI.

   Spacing is grouped, not uniform: elements that belong together sit close
   (4–16px), distinct content groups are separated by the section rhythm
   (--section-y). Avoid inventing new one-off values — use the scale.
   ========================================================================== */

:root {
  /* --- Surfaces: light theme (default) --- */
  --bg: hsl(38 33% 97%);
  --surface: hsl(36 26% 94%);
  --surface-raised: hsl(34 22% 90%);
  --border: hsl(32 16% 82%);
  --border-soft: hsl(34 20% 90%);
  --border-strong: hsl(30 12% 62%);
  --text-muted: hsl(28 8% 42%);
  --text-body: hsl(28 12% 24%);
  --text-heading: hsl(26 22% 11%);
  --header-bg: hsl(38 33% 97% / 0.88);

  /* --- Accent: antique gold. Deep enough to pass contrast on paper; the
     decorative --gold-line is for hairlines and marks only, never text. --- */
  --accent: hsl(33 62% 33%);
  --accent-hover: hsl(33 68% 26%);
  --accent-dim: hsl(33 40% 72%);
  --accent-contrast: hsl(40 40% 98%);
  --accent-tint: hsl(33 62% 33% / 0.09);
  --gold-line: hsl(36 48% 52%);

  /* --- Fixed chips for controls floating on photography (slider arrows,
     quick-add): constant across themes since they sit on a darkened image. --- */
  --overlay-chip-bg: hsl(30 16% 8% / 0.55);
  --overlay-chip-border: hsl(0 0% 100% / 0.3);
  --overlay-chip-fg: hsl(36 26% 97%);

  /* --- Semantic --- */
  --danger: hsl(6 52% 46%);
  --success: hsl(146 42% 30%);
  --success-tint: hsl(146 42% 30% / 0.10);

  /* --- Type: Cormorant Garamond (editorial display) + Outfit (UI/body) --- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Outfit", "Segoe UI", Helvetica, Arial, sans-serif;

  --step--2: 0.6875rem;  /* 11px — micro labels */
  --step--1: 0.8125rem;  /* 13px — UI, meta */
  --step-0:  0.9375rem;  /* 15px — body */
  --step-1:  1.0625rem;  /* 17px — lead */
  --step-2:  1.375rem;   /* 22px */
  --step-3:  1.75rem;    /* 28px */
  --step-4:  2.25rem;    /* 36px */
  --step-5:  3rem;       /* 48px */
  --step-6:  3.75rem;    /* 60px */

  /* --- Spacing (4px scale) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Rhythm: one knob for the vertical beat between sections --- */
  --section-y: var(--sp-10);
  --header-h: 56px;

  /* --- Radius (tight, architectural) --- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 6px;
  --r-pill: 9999px;

  --container: 1280px;
  --measure: 62ch;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 700px) {
  :root { --section-y: var(--sp-16); --header-h: 64px; }
}

/* --- Surfaces: dark theme, opted into via [data-theme="dark"] on <html> --- */
:root[data-theme="dark"] {
  --bg: hsl(30 14% 8%);
  --surface: hsl(30 13% 11%);
  --surface-raised: hsl(30 11% 15%);
  --border: hsl(30 9% 24%);
  --border-soft: hsl(30 11% 18%);
  --border-strong: hsl(30 8% 36%);
  --text-muted: hsl(32 8% 64%);
  --text-body: hsl(34 12% 84%);
  --text-heading: hsl(38 26% 96%);
  --header-bg: hsl(30 14% 8% / 0.9);

  --accent: hsl(38 58% 60%);
  --accent-hover: hsl(38 66% 68%);
  --accent-dim: hsl(38 40% 30%);
  --accent-contrast: hsl(30 16% 9%);
  --accent-tint: hsl(38 58% 60% / 0.12);
  --gold-line: hsl(38 48% 52%);

  --danger: hsl(6 62% 62%);
  --success: hsl(146 40% 62%);
  --success-tint: hsl(146 40% 62% / 0.12);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.005em;
  /* Even line lengths — stops display type stranding a single word. */
  text-wrap: balance;
}

::selection { background: var(--accent); color: var(--accent-contrast); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}
@media (min-width: 700px)  { .container { padding: 0 var(--sp-8); } }
@media (min-width: 1400px) { .container { padding: 0 var(--sp-10); } }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Small tracked label that opens a section or a block of copy. */
.eyebrow {
  display: block;
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 46px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out),
              color 180ms var(--ease-out), transform 120ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }

/* Outline that fills on hover — the default commerce CTA. Keeps grids of
   several buttons calm instead of a wall of solid gold. */
.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-heading);
}
.btn-secondary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* For use over photography. */
.btn-onimage {
  background: transparent;
  border-color: hsl(0 0% 100% / 0.55);
  color: hsl(0 0% 100%);
  backdrop-filter: blur(2px);
}
.btn-onimage:hover { background: hsl(0 0% 100%); border-color: hsl(0 0% 100%); color: hsl(26 22% 11%); }

.btn-ghost { background: transparent; color: var(--text-body); height: 36px; padding: 0 var(--sp-3); }
.btn-ghost:hover { color: var(--accent); }

.btn-block { width: 100%; }
.btn-sm { height: 38px; padding: 0 var(--sp-4); font-size: var(--step--2); }
.btn-lg { height: 52px; padding: 0 var(--sp-8); }

/* Quiet text link with a gold rule that draws in on hover. */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-heading);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--border-strong);
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.link-more:hover { color: var(--accent); border-color: var(--accent); }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.announce-bar {
  background: var(--text-heading);
  overflow: hidden;
  position: relative;
}
.announce-track { position: relative; display: block; height: 32px; }
.announce-track span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 0 var(--sp-5);
  font-size: var(--step--2);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.announce-track span.is-active { opacity: 0.92; visibility: visible; }
/* Inverting to a bright strip works on paper but shouts above a dark header,
   so the dark theme keeps it as a quiet raised surface instead. */
:root[data-theme="dark"] .announce-bar { background: var(--surface-raised); }
:root[data-theme="dark"] .announce-track span { color: var(--text-body); }
@media (prefers-reduced-motion: reduce) { .announce-track span { transition: none; } }

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 65;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--sp-6);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-heading);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-logo em { color: var(--accent); font-style: italic; font-weight: 500; }
@media (min-width: 700px) { .nav-logo { font-size: 1.625rem; } }

.nav-links { display: none; align-items: center; gap: var(--sp-8); }
.nav-links a {
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body);
  font-weight: 400;
  position: relative;
  padding: var(--sp-2) 0;
  transition: color 160ms var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav-links a:hover { color: var(--text-heading); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  color: var(--text-heading);
  background: transparent;
  border: none;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav-icon-btn svg { width: 18px; height: 18px; }
.nav-icon-btn:hover { color: var(--accent); background: var(--accent-tint); }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.cart-badge {
  position: absolute;
  top: 3px; right: 1px;
  min-width: 15px; height: 15px;
  padding: 0 3px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

.nav-toggle {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-heading);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline-flex; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .nav-actions { gap: var(--sp-2); }
}

/* ---- Mobile drawer ---- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: hsl(26 22% 8% / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 55;
}
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 82vw);
  background: var(--bg);
  border-left: 1px solid var(--border-soft);
  padding: calc(var(--header-h) + var(--sp-8)) var(--sp-6) var(--sp-6);
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s var(--ease-out), visibility 0s linear 0.32s;
  z-index: 60;
}
.mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s var(--ease-out);
}
.mobile-menu a {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--text-heading);
  border-bottom: 1px solid var(--border-soft);
}
.mobile-menu a.active { color: var(--accent); }
body.menu-open { overflow: hidden; }
@media (min-width: 900px) { .mobile-menu, .mobile-menu-overlay { display: none; } }

/* ==========================================================================
   Hero slider
   ========================================================================== */

.hero-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: hsl(30 16% 8%);
}
.slider-track {
  display: flex;
  width: 100%;
  transition: transform 550ms var(--ease-out);
  will-change: transform;
  touch-action: pan-y;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}
.slide-media {
  position: relative;
  width: 100%;
  height: clamp(400px, 62vh, 480px);
  overflow: hidden;
}
.slide-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.06);
  opacity: 0;
  transition: transform 7000ms linear, opacity 700ms var(--ease-out);
}
.slide.is-active .slide-media img { transform: scale(1); opacity: 1; }

/* Scrim: strongest where the copy sits, so the headline is always legible
   without flattening the whole photograph. */
.slide-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, hsl(28 22% 6% / 0.5) 0%, hsl(28 22% 6% / 0.2) 34%, hsl(28 22% 6% / 0.86) 100%);
}
/* No headline/body/CTA on this slide means nothing needs to stay legible
   over the photo, so skip the scrim entirely. */
.slide-media--plain::after { display: none; }

/* ---- Hero copy ---- */
.slide-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--sp-12);
  pointer-events: none;
}
.slide-copy .container { width: 100%; }
.slide-copy > .container > * { pointer-events: auto; }
.hero-inner { max-width: 30ch; }
.slide-copy .eyebrow { color: hsl(38 60% 74%); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  color: hsl(40 30% 98%);
  font-size: clamp(2.25rem, 8vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: var(--sp-3) 0 0;
}
.hero-title em { font-style: italic; color: hsl(38 62% 72%); }
.hero-sub {
  color: hsl(38 18% 88%);
  font-size: var(--step-0);
  margin-top: var(--sp-3);
  max-width: 42ch;
}
/* Stacked CTAs share a width on small screens so they read as a pair rather
   than a ragged left edge of two different lengths. */
.hero-cta { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); }
@media (min-width: 560px) {
  .hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
}

/* Copy rises into place as its slide becomes active. */
.slide-copy .eyebrow,
.slide-copy .hero-title,
.slide-copy .hero-sub,
.slide-copy .hero-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.slide.is-active .slide-copy .eyebrow    { opacity: 1; transform: none; transition-delay: 120ms; }
.slide.is-active .slide-copy .hero-title { opacity: 1; transform: none; transition-delay: 200ms; }
.slide.is-active .slide-copy .hero-sub   { opacity: 1; transform: none; transition-delay: 280ms; }
.slide.is-active .slide-copy .hero-cta   { opacity: 1; transform: none; transition-delay: 360ms; }

@media (min-width: 700px) {
  .slide-media { height: clamp(480px, 74vh, 620px); }
  .slide-media::after {
    background:
      linear-gradient(90deg, hsl(28 22% 5% / 0.86) 0%, hsl(28 22% 5% / 0.64) 42%, hsl(28 22% 5% / 0.12) 74%, transparent 100%),
      linear-gradient(180deg, hsl(28 22% 5% / 0.3) 0%, transparent 40%, hsl(28 22% 5% / 0.4) 100%);
  }
  .slide-copy { align-items: center; padding-bottom: 0; }
  /* Wide enough for the two CTAs to share a row; the headline still wraps
     to two lines at this measure. */
  .hero-inner { max-width: 33rem; }
  .hero-title { font-size: clamp(3rem, 4.4vw, 3.75rem); max-width: 13ch; }
  .hero-sub { font-size: var(--step-1); margin-top: var(--sp-4); max-width: 40ch; }
}

/* ---- Slider controls ---- */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px; height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--overlay-chip-bg);
  border: 1px solid var(--overlay-chip-border);
  color: var(--overlay-chip-fg);
  backdrop-filter: blur(6px);
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.slider-arrow svg { width: 16px; height: 16px; }
.slider-arrow:hover { background: hsl(0 0% 100% / 0.94); border-color: transparent; color: hsl(26 22% 11%); }
.slider-arrow.prev { left: var(--sp-4); }
.slider-arrow.next { right: var(--sp-4); }
@media (min-width: 900px) {
  .slider-arrow.prev { left: var(--sp-6); }
  .slider-arrow.next { right: var(--sp-6); }
}
/* On mobile the hero is swipeable, so its arrows are noise — the compact
   product-row arrows stay, since those rows scroll horizontally. */
@media (max-width: 699px) {
  .hero-slider .slider-arrow { display: none; }
}

.slider-dots {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 3;
  display: flex;
  gap: var(--sp-2);
}
.slider-dots button {
  width: 26px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}
.slider-dots button::after {
  content: "";
  width: 22px;
  height: 2px;
  background: hsl(0 0% 100% / 0.35);
  transition: background 200ms var(--ease-out);
}
.slider-dots button.active::after { background: var(--gold-line); }
@media (min-width: 700px) {
  .slider-dots { left: 50%; transform: translateX(-50%); bottom: var(--sp-6); }
}

/* ==========================================================================
   Section rhythm & headers
   ========================================================================== */

.section { padding: var(--section-y) 0; }
.section-tight { padding: calc(var(--section-y) * 0.6) 0; }
/* Consecutive sections share one beat rather than stacking two paddings —
   this is what kept the old page feeling half-empty. A section that follows
   a band (hero, assurance strip, tinted quote) keeps its own top padding. */
.section + .section { padding-top: 0; }
.section-flush { padding-top: 0; }

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
}
.section-header h2 {
  font-size: var(--step-3);
  margin-top: var(--sp-1);
}
.section-header h2 em { font-style: italic; color: var(--accent); }
.section-header p { color: var(--text-muted); margin-top: var(--sp-2); max-width: var(--measure); }
.section-header .btn, .section-header .link-more { flex-shrink: 0; }
@media (min-width: 700px) {
  .section-header { margin-bottom: var(--sp-8); }
  .section-header h2 { font-size: var(--step-4); }
}

/* Centred variant for editorial moments. */
.section-header-center {
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
}

/* ==========================================================================
   Assurance strip — quiet trust signals under the hero
   ========================================================================== */

.assurance {
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}
.assurance-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.assurance-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
  min-width: 0;
}
.assurance-list li + li { border-left: 1px solid var(--border-soft); padding-left: var(--sp-4); }
.assurance-list li:nth-child(3) { border-left: none; padding-left: 0; }
.assurance-list li:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
.assurance-list svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent); }
.assurance-list strong {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-heading);
  letter-spacing: 0.01em;
}
.assurance-list span {
  display: block;
  font-size: var(--step--2);
  color: var(--text-muted);
  line-height: 1.4;
}
@media (min-width: 900px) {
  .assurance-list { grid-template-columns: repeat(4, 1fr); }
  .assurance-list li { padding: var(--sp-5) var(--sp-6) var(--sp-5) 0; }
  .assurance-list li + li { padding-left: var(--sp-6); }
  .assurance-list li:nth-child(3) { border-left: 1px solid var(--border-soft); padding-left: var(--sp-6); }
  .assurance-list li:nth-child(-n+2) { border-bottom: none; }
}

/* ==========================================================================
   Product cards & grid
   ========================================================================== */

/* Row gap is larger than the column gap so rows read as rows, not a mesh. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-10);
}
@media (min-width: 700px)  { .product-grid { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-6); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card { display: flex; flex-direction: column; height: 100%; }
.product-media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  aspect-ratio: 1 / 1;
  margin-bottom: var(--sp-3);
}
.product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.product-card:hover .product-media img { transform: scale(1.04); }

/* Sits on photography, so both colours are fixed — a theme-flipping text
   colour would go white-on-white in dark mode. */
.product-badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  z-index: 1;
  background: hsl(38 30% 98% / 0.94);
  color: hsl(26 22% 11%);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px var(--sp-2);
  border-radius: var(--r-sm);
}

.product-quickadd {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--overlay-chip-bg);
  border: 1px solid var(--overlay-chip-border);
  color: var(--overlay-chip-fg);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), background 160ms;
}
.product-quickadd svg { width: 15px; height: 15px; }
.product-card:hover .product-quickadd { opacity: 1; transform: translateY(0); }
.product-quickadd:hover { background: hsl(0 0% 100% / 0.95); color: hsl(26 22% 11%); border-color: transparent; }
/* Touch devices have no hover, so keep quick-add permanently reachable. */
@media (hover: none) { .product-quickadd { opacity: 1; transform: none; } }

.product-info { flex: 1; display: flex; flex-direction: column; }
.product-cat {
  font-size: var(--step--2);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.product-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.15;
  color: var(--text-heading);
  margin-top: var(--sp-1);
}
.product-name a { transition: color 160ms var(--ease-out); }
.product-name a:hover { color: var(--accent); }
.product-meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--sp-2); }
.product-price {
  color: var(--text-heading);
  font-weight: 500;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Shared by the card price and the product-detail price. */
.old {
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  margin-right: var(--sp-2);
  font-size: 0.8em;
}
.product-stars { color: var(--gold-line); font-size: 11px; letter-spacing: 2px; margin-top: var(--sp-1); }

.price-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; row-gap: var(--sp-1); }
.product-discount {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--success-tint);
  color: var(--success);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px var(--sp-2);
  border-radius: var(--r-sm);
  line-height: 1.5;
}

/* ---- Deal card: the one card that carries its own CTA (promo rows) ---- */
.deal-card { display: flex; flex-direction: column; height: 100%; }
.deal-media {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  aspect-ratio: 4 / 3;
  margin-bottom: var(--sp-3);
}
.deal-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.deal-card:hover .deal-media img { transform: scale(1.04); }
.deal-info { display: flex; flex-direction: column; flex: 1; }
.deal-info .product-name { margin: 0; }
.deal-info .price-row { margin-top: var(--sp-2); }
.deal-info .btn { margin-top: var(--sp-4); }

/* ---- Horizontal peek rows on small screens, grid from 700px up ---- */
.deals-slider, .product-slider { position: relative; }
.deals-slider .slider-track, .product-slider .slider-track {
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: auto;
  transition: none;
  will-change: auto;
}
.deals-slider .slider-track::-webkit-scrollbar,
.product-slider .slider-track::-webkit-scrollbar { display: none; }

.deals-slider .slide   { flex: 0 0 74%; width: 74%; min-width: 0; }
.product-slider .slide { flex: 0 0 62%; width: 62%; min-width: 0; }
@media (min-width: 480px) {
  .deals-slider .slide   { flex-basis: 52%; width: 52%; }
  .product-slider .slide { flex-basis: 44%; width: 44%; }
}

.deals-slider .slider-dots, .product-slider .slider-dots { display: none; }

/* Mobile overlay scrollbars only flash during a touch scroll, so this gives a
   persistent cue that the row keeps going. */
.scroll-progress {
  height: 2px;
  margin-top: var(--sp-5);
  background: var(--border-soft);
  overflow: hidden;
}
.scroll-progress-bar {
  height: 100%;
  width: 40%;
  background: var(--gold-line);
  transition: transform 0.1s linear;
}

@media (min-width: 700px) {
  .deals-slider, .product-slider { overflow: visible; }
  .deals-slider .slider-track, .product-slider .slider-track {
    transform: none !important;
    display: grid;
    column-gap: var(--sp-6);
    row-gap: var(--sp-10);
    overflow: visible;
  }
  /* Deals run three-up; the browse rows run four, so they pair 2×2 at tablet
     rather than stranding a fourth card alone on its own row. */
  .deals-slider .slider-track { grid-template-columns: repeat(3, 1fr); }
  .product-slider .slider-track { grid-template-columns: repeat(2, 1fr); }
  .deals-slider .slide, .product-slider .slide { flex: none; width: auto; min-width: 0; }
  .scroll-progress { display: none; }
}
/* Four-up as soon as there's room: at 2-up these cards grow to ~390px and
   start reading as oversized containers rather than product tiles. */
@media (min-width: 900px) {
  .product-slider .slider-track { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   Collection tiles
   ========================================================================== */

.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 700px) { .collection-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } }

.collection-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 3 / 2;
  background: var(--surface);
}
@media (min-width: 700px) { .collection-tile { aspect-ratio: 4 / 5; } }
.collection-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}
.collection-tile:hover img { transform: scale(1.05); }
.collection-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, hsl(28 22% 6% / 0.8) 0%, hsl(28 22% 6% / 0.15) 55%, transparent 100%);
}
.collection-label {
  position: absolute;
  left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-5);
  z-index: 1;
}
.collection-name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: hsl(40 30% 98%);
  line-height: 1.15;
}
.collection-link {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(38 55% 76%);
  border-bottom: 1px solid hsl(38 55% 76% / 0.45);
  padding-bottom: 2px;
}

/* ==========================================================================
   Quote / testimonial
   ========================================================================== */

/* A tinted band makes its own separation, so it carries its padding rather
   than relying on the section rhythm around it. */
.quote-section {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: var(--section-y) 0;
}
.quote { max-width: 46ch; margin: 0 auto; text-align: center; }
.quote-mark {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 0.5;
  color: var(--gold-line);
  opacity: 0.7;
  margin-bottom: var(--sp-5);
}
.quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1.32;
  color: var(--text-heading);
}
@media (min-width: 700px) { .quote p { font-size: var(--step-4); } }
.quote cite {
  display: block;
  margin-top: var(--sp-5);
  font-style: normal;
  color: var(--text-muted);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ==========================================================================
   Promo banner
   ========================================================================== */

.promo-banner {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
}
.promo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, hsl(28 22% 6% / 0.9) 0%, hsl(28 22% 6% / 0.55) 45%, hsl(28 22% 6% / 0.25) 100%);
}
.promo-banner-copy {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-5);
  max-width: 34ch;
}
.promo-banner-copy .eyebrow { color: hsl(38 60% 74%); }
.promo-banner-copy h2 {
  color: hsl(40 30% 98%);
  font-size: var(--step-3);
  margin: var(--sp-2) 0 var(--sp-3);
}
.promo-banner-copy h2 em { font-style: italic; color: hsl(38 62% 74%); }
.promo-banner-copy p { color: hsl(38 16% 87%); margin-bottom: var(--sp-5); font-size: var(--step-0); }
@media (min-width: 700px) {
  .promo-banner { min-height: 400px; align-items: center; }
  .promo-banner::after {
    background: linear-gradient(90deg, hsl(28 22% 5% / 0.88) 0%, hsl(28 22% 5% / 0.6) 45%, hsl(28 22% 5% / 0.1) 80%, transparent 100%);
  }
  .promo-banner-copy { padding: var(--sp-12); max-width: 40ch; }
  .promo-banner-copy h2 { font-size: var(--step-4); }
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-10) 0;
  border-top: 1px solid var(--border-soft);
}
.newsletter h2 { font-size: var(--step-3); max-width: 18ch; }
.newsletter h2 em { font-style: italic; color: var(--accent); }
.newsletter p { color: var(--text-muted); margin-top: var(--sp-2); max-width: 46ch; font-size: var(--step--1); }
.newsletter-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.newsletter-form input {
  flex: 1;
  height: 46px;
  min-width: 220px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-body);
  font-family: inherit;
  font-size: var(--step--1);
}
.newsletter-form input::placeholder { color: var(--text-muted); }
.newsletter-form input:focus { border-color: var(--accent); outline: none; }
@media (min-width: 900px) {
  /* Capped and centred so the copy and the form stay in conversation instead
     of drifting to opposite edges of a 1280px container. */
  .newsletter {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: var(--sp-12);
    padding: var(--sp-12) 0;
    max-width: 1000px;
    margin: 0 auto;
  }
  .newsletter h2 { font-size: var(--step-4); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* The tinted band and rule separate the footer on their own — an extra
   top margin here was most of the dead air at the bottom of every page. */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: var(--sp-10) 0 var(--sp-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  padding-bottom: var(--sp-8);
}
@media (min-width: 700px) {
  .site-footer { padding: var(--sp-12) 0 var(--sp-6); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-8); padding-bottom: var(--sp-10); }
}
.footer-brand { margin-bottom: var(--sp-4); }
@media (min-width: 700px) { .footer-brand { margin-bottom: 0; } }
.footer-brand .nav-logo { display: block; margin-bottom: var(--sp-3); }
.footer-brand p { color: var(--text-muted); max-width: 34ch; font-size: var(--step--1); }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--text-heading);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-col ul { display: grid; gap: 0; }
.footer-col li { color: var(--text-muted); font-size: var(--step--1); }
.footer-col a {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--step--1);
  transition: color 160ms var(--ease-out);
}
.footer-col a:hover { color: var(--accent); }

/* Mobile: collapsible columns with full 44px tap targets.
   Desktop: static lists on a compact 28px rhythm. */
.footer-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 48px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-soft);
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.footer-accordion-icon { flex-shrink: 0; color: var(--text-muted); transition: transform 0.24s var(--ease-out); }
.footer-accordion-toggle[aria-expanded="true"] .footer-accordion-icon { transform: rotate(180deg); }
.footer-accordion ul { display: none; padding-bottom: var(--sp-3); }
.footer-accordion-toggle[aria-expanded="true"] + ul { display: grid; }
.footer-accordion li, .footer-accordion a { min-height: 40px; align-items: center; }
.footer-accordion li { display: flex; }
@media (min-width: 700px) {
  .footer-accordion-toggle {
    cursor: default;
    pointer-events: none;
    min-height: auto;
    border-top: none;
    margin-bottom: var(--sp-4);
  }
  .footer-accordion-icon { display: none; }
  .footer-accordion ul { display: grid !important; padding-bottom: 0; gap: var(--sp-2); }
  .footer-accordion li, .footer-accordion a { min-height: 0; }
}

.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.footer-social a {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-body);
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.footer-social a:hover { border-color: var(--accent); color: var(--accent); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: space-between;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Breadcrumb / page header
   ========================================================================== */

.breadcrumb {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-4) 0 0;
}
.breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; transition: color 160ms var(--ease-out); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.45; }
.breadcrumb .current { color: var(--text-body); }

.page-header { padding: var(--sp-5) 0 var(--sp-6); }
.page-header h1 { font-size: var(--step-4); }
.page-header h1 em { font-style: italic; color: var(--accent); }
.page-header p { color: var(--text-muted); margin-top: var(--sp-2); max-width: 52ch; font-size: var(--step-0); }
@media (min-width: 700px) {
  .page-header { padding: var(--sp-6) 0 var(--sp-8); }
  .page-header h1 { font-size: var(--step-5); }
}

/* ==========================================================================
   Shop: filters + grid
   ========================================================================== */

.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--section-y);
}

.filters { display: grid; gap: var(--sp-6); align-content: start; }
.filter-group + .filter-group { padding-top: var(--sp-6); border-top: 1px solid var(--border-soft); }
.filter-group h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-heading);
  margin-bottom: var(--sp-3);
}
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-1) 0;
  min-height: 32px;
  color: var(--text-muted);
  font-size: var(--step--1);
  cursor: pointer;
  transition: color 140ms var(--ease-out);
}
.filter-option:hover { color: var(--text-heading); }

/* Custom control marks — the native ones are the wrong scale and colour. */
.filter-option input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 15px; height: 15px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  border-radius: var(--r-sm);
  display: grid;
  place-content: center;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.filter-option input[type="radio"] { border-radius: 50%; }
.filter-option input::after {
  content: "";
  width: 7px; height: 7px;
  transform: scale(0);
  transition: transform 140ms var(--ease-out);
  background: var(--accent-contrast);
  clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 9%, 38% 70%);
}
.filter-option input[type="radio"]::after { clip-path: none; border-radius: 50%; width: 5px; height: 5px; }
.filter-option input:checked { background: var(--accent); border-color: var(--accent); }
.filter-option input:checked::after { transform: scale(1); }
.filter-option:has(input:checked) { color: var(--text-heading); }

.filters-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-heading);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.filters-toggle .cs-chevron { color: var(--text-muted); transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.filters-toggle.open .cs-chevron { transform: rotate(180deg); color: var(--accent); }
.filters-toggle .active-count {
  display: none;
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 10px; font-weight: 600;
  align-items: center; justify-content: center;
  margin-right: auto; margin-left: var(--sp-3);
}
.filters-toggle .active-count.show { display: inline-flex; }

@media (max-width: 949px) {
  .filters {
    display: none;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    padding: var(--sp-5);
    margin-top: var(--sp-3);
  }
  .filters.mobile-open { display: grid; }
}
@media (min-width: 950px) {
  .shop-layout { grid-template-columns: 220px 1fr; gap: var(--sp-10); }
  .filters-toggle { display: none; }
  .filters {
    grid-column: 1; grid-row: 1;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
  .shop-layout > div:last-child { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1200px) { .shop-layout { grid-template-columns: 240px 1fr; gap: var(--sp-12); } }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.shop-toolbar .count {
  color: var(--text-muted);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.empty-state {
  grid-column: 1 / -1;
  padding: var(--sp-16) 0;
  text-align: center;
  color: var(--text-muted);
}

/* ==========================================================================
   Custom select (replaces native <select> for consistent theming)
   ========================================================================== */

.custom-select { position: relative; display: inline-block; }
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 180px;
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-body);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out);
}
.custom-select-trigger:hover { border-color: var(--border-strong); }
.custom-select.open .custom-select-trigger,
.custom-select-trigger:focus-visible { border-color: var(--accent); outline: none; }
.custom-select-chevron {
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.custom-select.open .custom-select-chevron { transform: rotate(180deg); color: var(--accent); }

.custom-select-options {
  list-style: none;
  margin: 0;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px hsl(28 22% 6% / 0.16);
  padding: var(--sp-1);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out), visibility 0.15s;
}
.custom-select.open .custom-select-options { opacity: 1; visibility: visible; transform: translateY(0); }
.custom-select-options [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--step--1);
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
}
.custom-select-options [role="option"]:hover,
.custom-select-options [role="option"].cs-active { background: var(--surface); color: var(--text-heading); }
.custom-select-options [role="option"]:focus-visible {
  background: var(--surface);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--accent);
}
.custom-select-options [role="option"][aria-selected="true"] { color: var(--accent); font-weight: 500; }
.custom-select-options [role="option"][aria-selected="true"]::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ==========================================================================
   Product detail page
   ========================================================================== */

.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding: var(--sp-4) 0 var(--section-y);
}
@media (min-width: 900px) {
  .product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-12); padding-top: var(--sp-5); }
}
@media (min-width: 1200px) { .product-detail { grid-template-columns: 1.05fr 1fr; gap: var(--sp-16); } }

/* Sticky so the bottle stays with the buying decision instead of leaving a
   tall empty column beside the spec content. */
.pd-gallery-main {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
@media (min-width: 900px) {
  .pd-gallery-main { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.pd-gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.pd-cat {
  display: block;
  color: var(--text-muted);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.pd-title { font-size: var(--step-4); margin: var(--sp-2) 0 0; }
@media (min-width: 700px) { .pd-title { font-size: var(--step-5); } }
.pd-rating { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.pd-rating .stars { color: var(--gold-line); letter-spacing: 2px; font-size: var(--step--1); }
.pd-rating span { color: var(--text-muted); font-size: var(--step--1); }
.pd-price {
  font-size: var(--step-3);
  color: var(--text-heading);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.pd-info .price-row { margin-top: var(--sp-4); }
.pd-advance-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--text-heading);
  font-size: var(--step--1);
  width: fit-content;
}
.pd-advance-badge svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.pd-advance-badge strong { color: var(--accent); }
.pd-stock-line .pd-stock { margin-top: var(--sp-3); padding: 0; }
.pd-desc { color: var(--text-muted); margin-top: var(--sp-4); max-width: 52ch; }

/* One rule separates "what it is" from "what you're buying". */
.pd-buy {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-soft);
}
.pd-option-group + .pd-qty-row { margin-top: var(--sp-5); }
.pd-option-group label.title,
.pd-qty-row label.title {
  display: block;
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-heading);
  margin-bottom: var(--sp-2);
}
.pd-size-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pd-size-btn {
  min-width: 68px;
  height: 42px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-body);
  font-size: var(--step--1);
  font-weight: 400;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.pd-size-btn:hover { border-color: var(--border-strong); }
.pd-size-btn.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }

.pd-qty-row { display: flex; align-items: center; gap: var(--sp-4); }
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  height: 42px;
  overflow: hidden;
}
.qty-stepper button {
  width: 38px; height: 100%;
  background: transparent;
  border: none;
  color: var(--text-heading);
  font-size: var(--step-1);
  line-height: 1;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.qty-stepper button:hover { background: var(--surface-raised); color: var(--accent); }
.qty-stepper input {
  width: 38px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text-heading);
  font-family: inherit;
  font-size: var(--step-0);
  height: 100%;
  font-variant-numeric: tabular-nums;
}

.pd-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.pd-actions .btn { flex: 1; min-width: 190px; }

/* Mirrors the real Add to Cart button, but stays hidden until that button
   scrolls out of view (see the IntersectionObserver in product.html) — so
   there's never a moment with two visible "Add to Cart" controls at once. */
.pd-sticky-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(100%);
  transition: transform 180ms var(--ease-out, ease);
}
@media (max-width: 899px) {
  .pd-sticky-bar.is-visible { display: block; transform: translateY(0); }
}
.pd-sticky-bar-inner { display: flex; align-items: center; gap: var(--sp-3); }
.pd-sticky-price { flex: none; font-size: var(--step-0); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.pd-sticky-bar .btn { flex: 1; }

/* A soft, continuous glow draws the eye to the primary action without ever
   feeling urgent — it pauses on hover/focus so it never fights the button's
   own interaction feedback, and stops the moment there's nothing to add. */
#add-to-bag:not(:disabled) { animation: add-to-cart-glow 2.4s ease-in-out infinite; }
#add-to-bag:hover, #add-to-bag:focus-visible { animation-play-state: paused; }
@keyframes add-to-cart-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.pd-reassure {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.pd-reassure li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--step--1);
}
.pd-reassure svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

.pd-meta-list {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}
.pd-meta-list div { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--step--1); }
.pd-meta-list dt { color: var(--text-muted); }
.pd-meta-list dd { margin: 0; color: var(--text-body); }

/* The scent pyramid, read top to base. */
.pd-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--sp-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pd-note { padding: var(--sp-4) var(--sp-3); text-align: center; }
.pd-note + .pd-note { border-left: 1px solid var(--border-soft); }
.pd-note .label {
  display: block;
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.pd-note .val {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-size: var(--step-1);
  line-height: 1.25;
}

.pd-scent-profile { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--border-soft); }
.pd-scent-profile h3 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-heading);
  margin-bottom: var(--sp-4);
}
.scent-bar + .scent-bar { margin-top: var(--sp-3); }
.scent-bar-label { display: flex; justify-content: space-between; font-size: var(--step--1); margin-bottom: var(--sp-2); }
.scent-bar-label span:first-child { color: var(--text-body); }
.scent-bar-label span:last-child { color: var(--text-muted); }
.scent-bar-track { height: 3px; background: var(--border-soft); overflow: hidden; }
/* The real value lives in the inline width, so the bar reads correctly even
   if the intro animation never runs; the grow is purely decorative. */
.scent-bar-fill {
  height: 100%;
  background: var(--gold-line);
  transform-origin: left;
  animation: scent-grow 900ms var(--ease-out) both;
}
@keyframes scent-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ==========================================================================
   Cart page
   ========================================================================== */

.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding-bottom: var(--section-y);
}
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-12); }
}

.cart-table { display: grid; border-top: 1px solid var(--border-soft); }
.cart-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-soft);
}
.cart-row img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border-soft);
}
.cart-row-name { font-family: var(--font-display); color: var(--text-heading); font-size: var(--step-2); line-height: 1.2; }
.cart-row-name:hover { color: var(--accent); }
.cart-row-meta { color: var(--text-muted); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--sp-1); }
.cart-row-unit { color: var(--text-muted); font-size: var(--step--1); margin-top: var(--sp-2); }
.cart-row-total {
  color: var(--text-heading);
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cart-row-actions {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.cart-row .qty-stepper { height: 36px; }
.cart-row .qty-stepper button { width: 32px; font-size: var(--step-0); }
.cart-row .qty-stepper input { width: 32px; font-size: var(--step--1); }
.cart-remove {
  color: var(--text-muted);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: var(--sp-2) 0;
  transition: color 140ms var(--ease-out);
}
.cart-remove:hover { color: var(--danger); }

@media (min-width: 640px) {
  .cart-row { grid-template-columns: 84px 1fr auto; align-items: center; }
  .cart-row img { width: 84px; height: 84px; }
  /* Group the three controls instead of letting space-between fling them to
     the top and bottom of a row whose height the image sets. */
  .cart-row-actions {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: var(--sp-2);
  }
}

.cart-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-top: var(--sp-5); flex-wrap: wrap; }

.cart-empty { text-align: center; padding: var(--sp-16) 0; }
.cart-empty svg { margin: 0 auto var(--sp-5); color: var(--border-strong); }
.cart-empty h2 { font-size: var(--step-3); }
.cart-empty p { color: var(--text-muted); margin: var(--sp-2) 0 var(--sp-6); }

.summary-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-5);
  align-self: start;
}
@media (min-width: 900px) {
  .summary-card { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
.summary-card h3 {
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--step--1);
  color: var(--text-muted);
  padding: var(--sp-2) 0;
}
.summary-row span:last-child { color: var(--text-body); font-variant-numeric: tabular-nums; }
.summary-row.total {
  color: var(--text-heading);
  font-size: var(--step-1);
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-2);
  padding-top: var(--sp-4);
}
.summary-row.total span:last-child { color: var(--text-heading); font-family: var(--font-display); font-size: var(--step-2); }
.summary-note { font-size: var(--step--2); color: var(--text-muted); margin-top: var(--sp-3); line-height: 1.5; }
.summary-card .btn { margin-top: var(--sp-4); }
.promo-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.promo-row input {
  flex: 1; min-width: 0; height: 38px; padding: 0 var(--sp-3);
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg); color: var(--text-body);
  font-family: inherit; font-size: var(--step--1);
}
.promo-row input:focus { border-color: var(--accent); outline: none; }

/* ==========================================================================
   WhatsApp floating action button
   ========================================================================== */

.whatsapp-fab { display: none; }
@media (max-width: 899px) {
  .whatsapp-fab {
    display: flex;
    position: fixed;
    right: var(--sp-4);
    bottom: var(--sp-4);
    z-index: 90;
    width: 48px; height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 20px hsl(0 0% 0% / 0.24);
    transition: transform 160ms var(--ease-out);
  }
  .whatsapp-fab svg { width: 24px; height: 24px; }
  .whatsapp-fab:hover { transform: scale(1.06); }
}

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--text-heading);
  color: var(--bg);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 8px 28px hsl(28 22% 6% / 0.24);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toast svg { color: var(--gold-line); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .slide-copy .eyebrow, .slide-copy .hero-title, .slide-copy .hero-sub, .slide-copy .hero-cta {
    opacity: 1; transform: none;
  }
}

/* ==========================================================================
   Checkout, order tracking, reviews & the pages added with the store backend
   ---------------------------------------------------------------------------
   These extend the system above rather than restate it: same hairlines, same
   spacing scale, same restrained use of gold. Forms are the one place that
   earns extra breathing room — a checkout that feels cramped feels unsafe.
   ========================================================================== */

.container-narrow { max-width: 860px; }

/* ---------- Shared form controls ---------- */

.field { margin-bottom: var(--sp-4); }
.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-heading);
}
.field .req { color: var(--accent); }
.field .optional { font-weight: 400; color: var(--text-muted); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="search"],
.field textarea,
.filter-search,
.track-form input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--text-body);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { resize: vertical; line-height: 1.6; }

.field input:focus-visible,
.field textarea:focus-visible,
.filter-search:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field input.has-error,
.field textarea.has-error { border-color: var(--danger); }

.field-error {
  display: block;
  margin-top: 5px;
  font-size: var(--step--2);
  color: var(--danger);
}
.field-error:empty { margin-top: 0; }

.form-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--step--2);
  color: var(--text-muted);
  line-height: 1.6;
}
.form-error {
  margin: var(--sp-4) 0 0;
  padding: 11px 13px;
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  background: hsl(6 52% 46% / 0.07);
  color: var(--danger);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* ---------- Shop filter additions ---------- */

.filter-search { font-size: var(--step--1); padding: 9px 11px; }
.filter-count { margin-left: auto; font-size: var(--step--2); color: var(--text-muted); }
.filter-option { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- Sold-out treatment ---------- */

.product-card.is-soldout .product-media img,
.deal-card.is-soldout .deal-media img { opacity: 0.55; }

.product-badge-muted {
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.cart-row-warn {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--step--2);
  color: var(--danger);
}

/* ---------- Free-delivery progress ---------- */

.ship-progress {
  height: 3px;
  margin: var(--sp-3) 0 var(--sp-4);
  background: var(--border-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ship-progress-bar {
  height: 100%;
  background: var(--gold-line);
  transition: width 0.4s var(--ease-out);
}

/* ==========================================================================
   Product detail additions
   ========================================================================== */

.pd-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }

.pd-thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pd-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }

.pd-size-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  justify-content:center;
}
.pd-size-price { font-size: var(--step--2); color: var(--text-muted); }
.pd-size-btn.selected .pd-size-price { color: inherit; opacity: 0.85; }
.pd-size-btn[disabled] {
  opacity: 0.42;
  cursor: not-allowed;
  text-decoration: line-through;
}

.pd-stock {
  padding:5px;
  font-size: var(--step--1);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pd-stock::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pd-stock.in { color: var(--success); }
.pd-stock.low { color: hsl(36 62% 40%); }
.pd-stock.out { color: var(--danger); }
:root[data-theme="dark"] .pd-stock.low { color: hsl(38 62% 62%); }

/* A live, available-now feel on the one state that means "go ahead and
   buy" — the dot pulses outward and fades, like a radar ping. */
.pd-stock.in::before { animation: pd-stock-ping 1.8s ease-out infinite; }
@keyframes pd-stock-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 6px transparent; }
}

.pd-story {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-soft);
}
.pd-story h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}
.pd-story p { margin: 0; max-width: var(--measure); line-height: 1.75; }

/* Three collapsible, per-product sections — full description, shipping
   info, and FAQs — sharing one +/- toggle style. Each is emptied by its
   render function when the admin has turned it off or left it blank, so
   .pd-fulldesc, .pd-shipping and .pd-faqs never leave a stray rule on a
   simple listing. */
.pd-fulldesc:empty, .pd-shipping:empty, .pd-faqs:empty { display: none; }
.pd-fulldesc, .pd-shipping, .pd-faqs {
  max-width: var(--measure);
  margin: 0 auto var(--sp-8);
  border-top: 1px solid var(--border-soft);
}
.pd-fulldesc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
  text-align: left;
}
.pd-fulldesc-icon { position: relative; width: 16px; height: 16px; flex: none; }
.pd-fulldesc-icon::before,
.pd-fulldesc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.pd-fulldesc-icon::before { width: 16px; height: 1.5px; }
.pd-fulldesc-icon::after { width: 1.5px; height: 16px; transition: transform 0.16s ease; }
.pd-fulldesc-toggle[aria-expanded="true"] .pd-fulldesc-icon::after,
.pd-faq-question[aria-expanded="true"] .pd-fulldesc-icon::after { transform: translate(-50%, -50%) rotate(90deg) scale(0); }
.pd-fulldesc-body { padding-bottom: var(--sp-6); color: var(--text-body); line-height: 1.75; }
.pd-fulldesc-body h1, .pd-fulldesc-body h2, .pd-fulldesc-body h3 {
  margin: 1.2em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text-heading);
}
.pd-fulldesc-body h1:first-child, .pd-fulldesc-body h2:first-child, .pd-fulldesc-body h3:first-child { margin-top: 0; }
.pd-fulldesc-body p { margin: 0 0 1em; }
.pd-fulldesc-body ul, .pd-fulldesc-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.pd-fulldesc-body blockquote {
  margin: 0 0 1em;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--border-soft);
  color: var(--text-muted);
}
.pd-fulldesc-body img { max-width: 100%; height: auto; border-radius: var(--r-md); margin: 0.5em 0; }
.pd-fulldesc-body a { color: var(--accent); }

.pd-faqs-title {
  padding: var(--sp-5) 0 var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}
.pd-faq-item { border-bottom: 1px solid var(--border-soft); }
.pd-faq-item:last-child { border-bottom: 0; }
.pd-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--step-0);
  color: var(--text-heading);
  text-align: left;
}
.pd-faq-answer { padding: 0 0 var(--sp-4); max-width: var(--measure); color: var(--text-body); line-height: 1.7; white-space: pre-line; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.review-card {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--border-soft);
}
.review-card:first-child { padding-top: 0; }

.review-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.review-head .product-stars { color: var(--gold-line); }
.review-date { font-size: var(--step--2); color: var(--text-muted); }

.review-card h4 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}
.review-card p { margin: 0 0 var(--sp-3); max-width: var(--measure); line-height: 1.75; }
.review-card cite { font-style: normal; font-size: var(--step--1); color: var(--text-muted); }
.verified { color: var(--success); }

.rating-picker { display: flex; gap: 2px; }
.rating-picker button {
  padding: 0 3px;
  border: 0;
  background: none;
  font-size: var(--step-3);
  line-height: 1;
  color: var(--border-strong);
  cursor: pointer;
  transition: color 0.12s ease;
}
.rating-picker button.on { color: var(--gold-line); }

/* The write-a-review form lives in a native <dialog> instead of a permanent
   sidebar card, so the reviews section is just the list of what people have
   already said — full width, no empty space reserved for a form most
   visitors will never fill in. */
.review-dialog {
  position: fixed;
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text-body);
  width: min(440px, calc(100vw - var(--sp-8)));
  max-height: calc(100vh - var(--sp-8));
  overflow-y: auto;
}
.review-dialog::backdrop { background: hsl(28 18% 8% / 0.5); }
.review-dialog h3 {
  margin: 0 var(--sp-8) var(--sp-5) 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}
.review-dialog-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.review-dialog-close:hover { background: var(--surface-raised); color: var(--text-body); }
.review-dialog-close svg { width: 18px; height: 18px; }

/* ==========================================================================
   Checkout
   ========================================================================== */

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--sp-10);
  align-items: start;
  margin-bottom: var(--section-y);
}

.checkout-section {
  padding-bottom: var(--sp-8);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border-soft);
}
.checkout-section:last-of-type { border-bottom: 0; margin-bottom: var(--sp-4); }

.checkout-section h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  color: var(--text-heading);
}

/* The step number is here because checkout genuinely is a sequence — it is
   not a numbered marker borrowed from a marketing page. */
.step-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--accent);
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.field-wide { grid-column: 1 / -1; }

.payment-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.payment-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.payment-option:hover { border-color: var(--border-strong); }
.payment-option.selected {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.payment-option input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.payment-option-body { display: block; }
.payment-option-title { display: block; font-weight: 500; color: var(--text-heading); }
.payment-option-detail {
  display: block;
  margin-top: 3px;
  font-size: var(--step--1);
  color: var(--text-muted);
  line-height: 1.55;
}

.payment-detail {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--step--1);
}
.payment-detail strong { display: block; margin-bottom: var(--sp-2); color: var(--text-heading); }
.payment-detail p { margin: 0 0 var(--sp-2); line-height: 1.65; }
.payment-detail p:last-child { margin-bottom: 0; }

.pay-discount-note {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--text-heading);
  font-size: var(--step--1);
}
.pay-discount-note strong { color: var(--accent); }

.pay-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 640px) {
  .pay-channel-grid { grid-template-columns: 1fr; }
}
.pay-channel-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.pay-channel-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
}
.pay-channel-icon svg { width: 20px; height: 20px; }
.pay-channel-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-channel-label { font-weight: 600; color: var(--text-heading); }
.pay-channel-name { font-size: var(--step--1); color: var(--text-muted); }
.pay-channel-number-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px; flex-wrap: wrap; }
.pay-channel-number { font-family: var(--font-mono, monospace); font-size: var(--step--1); letter-spacing: 0.02em; word-break: break-all; }
.pay-channel-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm, 6px);
  background: transparent;
  color: var(--text-heading);
  font-size: var(--step--2);
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.pay-channel-copy svg { width: 12px; height: 12px; }
.pay-channel-copy:hover { border-color: var(--accent); color: var(--accent); }
.pay-channel-note { font-size: var(--step--2); color: var(--text-muted); margin-top: 2px; }

.checkout-submit { padding-top: var(--sp-2); }
.btn-lg { padding: 15px 24px; font-size: var(--step-1); }
.btn.is-loading { opacity: 0.7; pointer-events: none; }

/* ---------- Order summary (checkout + confirmation) ---------- */

.checkout-summary {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.checkout-summary-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.checkout-summary h2 {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}

/* Mobile-only disclosure control: collapsed, it shows just the running
   total so the customer isn't scrolling past the whole order before
   reaching the form. Desktop never renders it — the summary there stays
   permanently expanded — so it is hidden by default and only switched on
   inside the max-width query below. */
.checkout-summary-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-heading);
  cursor: pointer;
}
.checkout-summary-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}
.checkout-summary-toggle[aria-expanded="true"] .checkout-summary-chevron { transform: rotate(180deg); }

.summary-items { display: flex; flex-direction: column; }
.summary-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-soft);
}
.summary-item:last-child { border-bottom: 0; }

.summary-item-media { position: relative; flex: none; }
.summary-item-media img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border-soft);
  background: var(--surface-raised);
  display: block;
}
.summary-item-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: var(--step--2);
  font-weight: 600;
}

.summary-item-body { flex: 1; min-width: 0; }
.summary-item-body a {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-heading);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-item-body a:hover { color: var(--accent); }
.summary-item-body span { font-size: var(--step--2); color: var(--text-muted); }
.summary-item-price { flex: none; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.summary-item-remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--r-sm, 6px);
  transition: color 0.14s ease, background-color 0.14s ease;
}
.summary-item-remove svg { width: 15px; height: 15px; }
.summary-item-remove:hover { color: var(--danger); background: var(--surface-raised); }

.summary-totals { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.summary-row.discount span:last-child { color: var(--success); }

.coupon-message { margin: var(--sp-2) 0 0; font-size: var(--step--2); line-height: 1.5; }
.coupon-message.error { color: var(--danger); }
.coupon-message.success { color: var(--success); }

.checkout-reassure {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--step--2);
  color: var(--text-muted);
}
.checkout-reassure li { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.5; }
.checkout-reassure svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--gold-line); }

@media (max-width: 900px) {
  /* The summary collapses to a slim total bar above the form, so it no
     longer needs the wide breathing room a full-height sidebar did. */
  .checkout-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  .checkout-summary { position: static; order: -1; padding: var(--sp-4); cursor: pointer; }
  .checkout-summary-toggle { display: flex; margin-bottom: 0; pointer-events: none; }
  .checkout-summary-head h2 { margin: 0; }
  .checkout-summary-body {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
    cursor: auto;
  }
  .checkout-summary-body.is-collapsed { display: none; }
  .field-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Order confirmation & tracking
   ========================================================================== */

.order-confirm { margin-bottom: var(--section-y); }

.order-confirm-head { padding: var(--sp-8) 0 var(--sp-10); text-align: center; }
.order-tick { width: 44px; height: 44px; color: var(--success); margin-bottom: var(--sp-4); }
.order-confirm-head h1 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  line-height: 1.05;
  color: var(--text-heading);
}
.order-confirm-head p { margin: 0 auto; max-width: 52ch; line-height: 1.7; color: var(--text-muted); }

.order-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 0 var(--sp-10);
  padding: 0;
}
.order-timeline li {
  position: relative;
  padding: var(--sp-6) var(--sp-3) 0;
  text-align: center;
  color: var(--text-muted);
}

/* The connecting rule sits behind the dots and stops at each end. */
.order-timeline li::after {
  content: "";
  position: absolute;
  top: calc(var(--sp-6) - 14px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
.order-timeline li:first-child::after { left: 50%; }
.order-timeline li:last-child::after { right: 50%; }

.order-timeline .dot {
  position: absolute;
  top: calc(var(--sp-6) - 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border-strong);
  z-index: 1;
}
.order-timeline li.done .dot,
.order-timeline li.current .dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.order-timeline li.current .dot { box-shadow: 0 0 0 4px var(--accent-tint), 0 0 0 1px var(--accent); }

.order-timeline strong {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}
.order-timeline li.done strong,
.order-timeline li.current strong { color: var(--text-heading); }
.order-timeline span { display: block; margin-top: 3px; font-size: var(--step--2); line-height: 1.45; }
.order-timeline li:not(.current) span { display: none; }

.order-status-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
  border: 1px solid var(--border);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-md);
  background: var(--surface);
}
.order-status-banner strong { color: var(--text-heading); text-transform: capitalize; }
.order-status-banner span { font-size: var(--step--1); color: var(--text-muted); }

.order-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); }
.order-card {
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.order-card h2 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}
.order-card address { font-style: normal; line-height: 1.75; font-size: var(--step--1); }
.order-card address strong { color: var(--text-heading); }

.order-meta {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  font-size: var(--step--1);
}
.order-meta > div { display: flex; gap: var(--sp-3); padding: 3px 0; }
.order-meta dt { color: var(--text-muted); min-width: 84px; }
.order-meta dd { margin: 0; }
/* Statuses arrive lowercase from the API and are capitalised for display;
   the customer's own note is left exactly as they typed it. */
.order-meta dd.status-value { text-transform: capitalize; }

.order-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-10); }

.track-form {
  max-width: 420px;
  margin: 0 auto var(--section-y);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

@media (max-width: 760px) {
  .order-grid { grid-template-columns: 1fr; }
  .order-timeline { grid-template-columns: 1fr; gap: 0; }
  .order-timeline li {
    display: flex;
    gap: var(--sp-4);
    text-align: left;
    padding: 0 0 var(--sp-5) var(--sp-5);
  }
  .order-timeline li::after {
    top: 6px;
    bottom: -6px;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .order-timeline li:first-child::after { left: 4px; top: 6px; }
  .order-timeline li:last-child::after { display: none; }
  .order-timeline .dot { top: 6px; left: 4px; transform: translateX(-50%); }
  .order-timeline li:not(.current) span { display: block; }
  .order-actions { flex-direction: column; }
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found { padding: var(--sp-24) 0; text-align: center; }
.not-found .eyebrow { color: var(--text-muted); }
.not-found h1 {
  margin: var(--sp-3) 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  line-height: 1.05;
  color: var(--text-heading);
}
.not-found h1 em { font-style: italic; color: var(--accent); }
.not-found p {
  margin: 0 auto var(--sp-8);
  max-width: 48ch;
  line-height: 1.75;
  color: var(--text-muted);
}
.not-found .hero-cta { justify-content: center; }

/* ---------- Toast variant ---------- */

.toast.toast-error { border-color: var(--danger); color: var(--danger); }
.toast.toast-error svg { color: var(--danger); }

/* ==========================================================================
   Information pages (/pages/{slug})
   ---------------------------------------------------------------------------
   Owner-written prose: shipping policy, FAQs, about. Set for reading — one
   column, generous leading, a measure that stops well short of the container.
   ========================================================================== */

.info-page { padding: var(--sp-6) 0 var(--sp-12); }

.info-page h1 {
  margin: 0 0 var(--sp-8);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.info-body { max-width: var(--measure); }

.info-body p {
  margin: 0 0 var(--sp-5);
  line-height: 1.8;
  color: var(--text-body);
}

.info-body h2 {
  margin: var(--sp-10) 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-heading);
}
.info-body h2:first-child { margin-top: 0; }

/* A hairline above each sub-heading gives a long policy page a scannable
   rhythm without turning every section into a boxed card. */
.info-body h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin-bottom: var(--sp-4);
  background: var(--gold-line);
}

.info-body ul {
  margin: 0 0 var(--sp-5);
  padding-left: var(--sp-5);
  list-style: none;
}
.info-body li {
  position: relative;
  margin-bottom: var(--sp-2);
  line-height: 1.75;
  color: var(--text-body);
}
.info-body li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-4));
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-line);
}

.info-body em { font-style: italic; color: var(--accent); }

.info-help {
  margin: 0 0 var(--section-y);
  padding: var(--sp-8);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.info-help h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--text-heading);
}
.info-help p {
  margin: 0 0 var(--sp-5);
  max-width: 52ch;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ==========================================================================
   Navigation dropdowns
   ---------------------------------------------------------------------------
   The menu is built in /admin and may carry one level of children. On desktop
   those open as a panel on hover or keyboard focus; in the mobile drawer they
   are simply indented under their parent, because a collapsible inside a
   slide-out panel is one interaction too many on a phone.
   ========================================================================== */

.nav-item { position: relative; display: flex; align-items: center; }

/* The parent shares the nav link's type treatment whether it is rendered as a
   link or, when it has no destination of its own, as a button. */
.nav-links .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: var(--sp-2) 0;
  font-family: inherit;
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-body);
  cursor: pointer;
  position: relative;
  transition: color 160ms var(--ease-out);
}

.nav-chevron {
  width: 11px;
  height: 11px;
  /* The uppercase tracking pushes the chevron away from its word; pulling it
     back keeps the pair reading as one label. */
  margin-left: -2px;
  transition: transform 180ms var(--ease-out);
}
.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 200px;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px hsl(28 20% 10% / 0.16);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), visibility 160ms;
  z-index: 60;
}

/* A small invisible bridge over the gap, so the panel does not close while the
   pointer travels from the parent down into it. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown entries drop the tracked-out uppercase: it is a list to read, not a
   row of section labels. */
.nav-links .nav-dropdown a {
  padding: 9px var(--sp-3);
  font-size: var(--step--1);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-body);
  border-radius: var(--r-md);
  white-space: nowrap;
}
.nav-links .nav-dropdown a::after { display: none; }
.nav-links .nav-dropdown a:hover { background: var(--surface); color: var(--text-heading); }
.nav-links .nav-dropdown a.active { color: var(--accent); }

.nav-links .nav-parent.active { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown,
  .nav-chevron { transition: none; }
}

/* ---------- Drawer ---------- */

.mobile-menu-heading {
  display: block;
  padding: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--text-muted);
}

.mobile-submenu {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--sp-2) var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border-soft);
}
.mobile-submenu a {
  padding: var(--sp-3) 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--text-body);
  border-bottom: 0;
}
.mobile-submenu a.active { color: var(--accent); }