@charset "UTF-8";
/* ==========================================================================
   ARISTIC PARFUMS
   One hand-written stylesheet. No build step, no preprocessor, no framework.

   Order: fonts -> tokens -> reset -> base -> layout -> components -> utilities
   Media queries live next to the component they modify, never in a block
   at the bottom.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted. Never the Google Fonts CDN (render-blocking + GDPR).
   NOTE: Fraunces is banned across all projects. Do not substitute it here.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-400italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorantgaramond-600italic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* Metric-matched fallbacks. Without these the swap from Times/Arial to the
   real faces shifts layout and costs roughly 0.05 CLS on its own. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Times New Roman'), local('Times'), local('Liberation Serif');
  size-adjust: 88%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Jost Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 97%; ascent-override: 92%; descent-override: 23%; line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* palette — from SKILL.md */
  --cream:       #F2EDE4;
  --cream-alt:   #EDE8DF;
  --cream-deep:  #E4DDD1;
  --dark:        #0E0D0B;
  --dark-soft:   #191714;
  --green:       #1A3028;
  --green-deep:  #12211B;
  --gold:        #C9A04B;
  --gold-dark:   #A07828;
  --gold-light:  #E8C87A;
  --ink:         #1C1A16;
  --ink-muted:   #6B6258;
  --white:       #FFFFFF;
  --rule:        #D8D0C4;

  /* semantic aliases — components reference these, never a raw colour */
  --bg:        var(--cream);
  --fg:        var(--ink);
  --fg-muted:  var(--ink-muted);
  --accent:    var(--gold);
  --accent-hover: var(--gold-dark);
  --hairline:  var(--rule);

  /* type */
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, serif;
  --font-body:    'Jost', 'Jost Fallback', system-ui, -apple-system, Arial, sans-serif;

  /* fluid scale, 360px -> 1440px viewport */
  --step--2: clamp(0.6875rem, 0.660rem + 0.12vw, 0.750rem);   /* 11 -> 12  eyebrow      */
  --step--1: clamp(0.8125rem, 0.790rem + 0.10vw, 0.875rem);   /* 13 -> 14  nav, links   */
  --step-0:  clamp(0.9375rem, 0.910rem + 0.12vw, 1.000rem);   /* 15 -> 16  body         */
  --step-1:  clamp(1.0625rem, 1.020rem + 0.20vw, 1.1875rem);  /* 17 -> 19  lead, quote  */
  --step-2:  clamp(1.2500rem, 1.160rem + 0.40vw, 1.500rem);   /* 20 -> 24  card title   */
  --step-3:  clamp(1.5000rem, 1.300rem + 0.90vw, 2.000rem);   /* 24 -> 32  price, h3    */
  --step-4:  clamp(1.8750rem, 1.500rem + 1.65vw, 3.000rem);   /* 30 -> 48  h2           */
  --step-5:  clamp(2.2500rem, 1.600rem + 2.90vw, 4.250rem);   /* 36 -> 68  h1           */

  --track-eyebrow: 0.20em;
  --track-caps:    0.16em;
  --track-btn:     0.04em;
  --lead-display:  1.08;
  --lead-title:    1.2;
  --lead-body:     1.7;

  /* rhythm — 8px grid */
  --s1: 0.5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4rem; --s7: 6rem;   --s8: 8rem;
  --section-y:      clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --section-y-dark: clamp(5rem, 3.0rem + 8vw, 9rem);
  --container: 1280px;
  --gutter:    clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --measure:   34ch;

  /* surface + motion */
  --radius-btn:  3px;
  --radius-card: 2px;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms; --dur: 360ms; --dur-slow: 640ms;
  --z-header: 40; --z-scrim: 50; --z-drawer: 60;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lead-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible,
.section--green :focus-visible { outline-color: var(--gold-light); }

/* --------------------------------------------------------------------------
   4. Typography
   The mockups follow a contextual rule the written spec does not state:

     SERIF (Cormorant) = product, commerce and editorial voice
       headings, prices, scent notes, CTA labels, trust-strip claims,
       pull quotes, the utility bar
     SANS (Jost) = interface voice
       navigation, footer links, form labels, cart UI, prose body, eyebrows

   Changing this is the single most likely source of "it doesn't match the
   design" feedback. Keep the split intact.
   -------------------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lead-title);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--step-5); line-height: var(--lead-display); }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-2); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: var(--measure);
}
.muted { color: var(--fg-muted); }
.measure { max-width: var(--measure); }

/* Editorial body copy — serif, used inside product and story sections. */
.copy {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: var(--measure);
}

/* Interface / legal prose — sans. */
.prose { font-family: var(--font-body); max-width: 62ch; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { margin-top: var(--s6); }
.prose h3 { margin-top: var(--s5); }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose ul { list-style: none; }
.prose li { padding-left: var(--s3); position: relative; }
.prose li + li { margin-top: var(--s1); }
.prose li::before {
  content: '·'; position: absolute; left: var(--s1);
  color: var(--gold); font-size: 1.4em; line-height: 1;
}

/* Gold eyebrow label.
   Gold on cream is ~2.8:1 and fails AA, so an eyebrow is never the sole
   carrier of meaning — it always duplicates the heading beneath it. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s3);
}

/* Short gold hairline used under headings in the design. */
.rule-gold {
  width: 44px; height: 1px; border: 0;
  background: var(--gold);
  margin: var(--s3) 0;
}
.rule-gold--center { margin-inline: auto; }

/* "Roze peper · Cederhout · Amber" — centre dots, never commas or bullets. */
.notes-line {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

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

.skip-link {
  position: absolute; left: var(--s2); top: -100vh;
  z-index: 100; background: var(--gold); color: var(--white);
  padding: var(--s2) var(--s3); border-radius: var(--radius-btn);
}
.skip-link:focus { top: var(--s2); }

/* --------------------------------------------------------------------------
   5. Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--alt   { background: var(--cream-alt); }
.section--dark  { background: var(--dark);  color: var(--white); padding-block: var(--section-y-dark); }
.section--green { background: var(--green); color: var(--white); }
.section--dark .lead,
.section--green .lead,
.section--dark .muted { color: rgba(255, 255, 255, 0.72); }
.section--dark .notes-line { color: rgba(255, 255, 255, 0.72); }

.stack > * + * { margin-top: var(--s3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.split {
  display: grid;
  gap: clamp(var(--s4), 5vw, var(--s7));
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}

.grid-3 { display: grid; gap: var(--s5); }
@media (min-width: 760px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   6. Buttons
   Serif labels — per the mockups, not the written spec.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: var(--track-btn);
  line-height: 1;
  padding: 0.95em 1.9em;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-lux),
              color var(--dur-fast) var(--ease-lux),
              border-color var(--dur-fast) var(--ease-lux);
}

.btn--primary { background: var(--gold); color: var(--white); }
.btn--primary:hover { background: var(--gold-dark); }

.btn--ghost {
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
}
.btn--ghost:hover { background: var(--gold); color: var(--white); }

.btn--text {
  padding: 0.4em 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--fg);
}
.btn--text:hover { border-bottom-color: var(--gold); color: var(--gold-dark); }
.section--dark .btn--text,
.section--green .btn--text { color: var(--white); border-bottom-color: rgba(255,255,255,0.35); }
.section--dark .btn--text:hover { color: var(--gold-light); border-bottom-color: var(--gold-light); }

/* Interface buttons (cart, drawer, forms) use the sans voice. */
.btn--ui {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: var(--track-btn);
}

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

.btn[disabled], .btn--disabled {
  opacity: 0.45; pointer-events: none; cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   7. Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--s1); }
.field__label {
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field__input {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  padding: 0.85em 1em;
  font-size: var(--step-0);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-lux);
}
.field__input:hover { border-color: var(--gold-light); }
.field__input:focus-visible { border-color: var(--gold); outline-offset: 1px; }
.field__error { color: #A2352B; font-size: var(--step--1); }
.field__hint  { color: var(--fg-muted); font-size: var(--step--1); }

/* Inline email + button, joined at the seam as the design shows. */
.inline-form { display: flex; flex-wrap: wrap; gap: 0; max-width: 30rem; }
.inline-form .field__input {
  flex: 1 1 14rem; border-right: 0;
  border-radius: var(--radius-btn) 0 0 var(--radius-btn);
}
.inline-form .btn { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }
@media (max-width: 30rem) {
  .inline-form .field__input { border-right: 1px solid var(--rule); border-radius: var(--radius-btn); }
  .inline-form .btn { border-radius: var(--radius-btn); margin-top: var(--s1); width: 100%; }
}

/* --------------------------------------------------------------------------
   8. Utility bar — near-black in the mockup, not the forest green the spec
   claims. Green is correct for the trust strip and footer.
   -------------------------------------------------------------------------- */

.utility-bar {
  background: var(--dark);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--step--1);
  text-align: center;
  padding: 0.7rem var(--gutter);
}
.utility-bar__inner { display: inline-flex; align-items: center; gap: var(--s1); }
.utility-bar svg { width: 1.05em; height: 1.05em; color: var(--gold); }

/* --------------------------------------------------------------------------
   9. Header / navigation — deliberately NOT sticky (luxury convention).
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  z-index: var(--z-header);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
}
.site-nav { display: flex; gap: var(--s5); font-size: var(--step--1); }
.site-nav a { text-decoration: none; padding-block: 0.25rem; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--gold); }

.site-header__brand { justify-self: center; color: var(--gold); }
.site-header__brand svg { width: auto; height: 52px; }

.site-header__actions {
  justify-self: end;
  display: flex; align-items: center; gap: var(--s4);
  font-size: var(--step--1);
}
.site-header__actions a,
.site-header__actions button {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em;
  white-space: nowrap;
}
.site-header__actions a:hover,
.site-header__actions button:hover { color: var(--gold-dark); }
.site-header__actions svg { width: 1.05em; height: 1.05em; flex: none; }

.nav-toggle { display: none; }

@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--step--1); }
  .nav-toggle svg { width: 1.2em; height: 1.2em; }
  .site-header__brand svg { height: 42px; }
  .site-header__actions { gap: var(--s3); }
  .site-header__actions .label { display: none; }
}

/* --------------------------------------------------------------------------
   10. Drawers (mobile nav + mini cart)
   -------------------------------------------------------------------------- */

.scrim {
  position: fixed; inset: 0; background: rgba(14, 13, 11, 0.55);
  opacity: 0; visibility: hidden; z-index: var(--z-scrim);
  transition: opacity var(--dur) var(--ease-lux), visibility var(--dur);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; bottom: 0; right: 0;
  width: min(24rem, 88vw);
  background: var(--cream);
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease-lux);
  overflow-y: auto;
}
.drawer--left { right: auto; left: 0; transform: translateX(-100%); }
.drawer.is-open { transform: translateX(0); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--hairline);
}
.drawer__title {
  font-family: var(--font-body); font-size: var(--step--2);
  letter-spacing: var(--track-caps); text-transform: uppercase;
}
.drawer__body { padding: var(--s4); flex: 1; }
.drawer__foot { padding: var(--s4); border-top: 1px solid var(--hairline); }
.drawer__close svg { width: 1.1rem; height: 1.1rem; }

.drawer-nav { display: grid; gap: var(--s3); font-size: var(--step-2); font-family: var(--font-display); }
.drawer-nav a { text-decoration: none; }

/* --------------------------------------------------------------------------
   11. Trust strip — forest green, gold line icons, serif claims
   -------------------------------------------------------------------------- */

.trust-strip { background: var(--green); color: var(--white); }
.trust-strip__list {
  display: flex; flex-wrap: wrap; justify-content: center;
  padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
}
.trust-strip__item {
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}
.trust-strip__item + .trust-strip__item { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.trust-strip svg { width: 1.7rem; height: 1.7rem; color: var(--gold); flex: none; }
@media (max-width: 720px) {
  .trust-strip__list { flex-direction: column; align-items: center; gap: var(--s2); }
  .trust-strip__item + .trust-strip__item { border-left: 0; }
}

/* --------------------------------------------------------------------------
   12. Hero
   One full-bleed photograph with a diagonal light-to-dark transition, copy
   over the pale stone at left — not the 50/50 column split the spec describes.
   The scrim keeps the copy legible at every width.
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--cream); overflow: hidden; }

/* The photograph occupies the right side and dissolves into the cream at its
   left edge, reproducing the mockup's diagonal without ever letting the
   headline run onto the dark bottle. */
.hero__media { position: absolute; inset: 0 0 0 auto; width: 62%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; }
.hero__scrim {
  position: absolute; inset: 0 0 0 auto; width: 66%;
  background: linear-gradient(96deg,
    var(--cream) 0%,
    rgba(242, 237, 228, 0.86) 18%,
    rgba(242, 237, 228, 0.32) 38%,
    rgba(242, 237, 228, 0) 58%);
}
.hero__inner {
  position: relative;
  display: grid; align-items: center;
  min-height: clamp(32rem, 82vh, 50rem);
  padding-block: var(--section-y);
}
.hero__content { max-width: 30rem; }

@media (max-width: 760px) {
  /* Stack: the bottle sits behind a near-solid cream wash so copy stays AAA. */
  .hero__media { inset: 0; width: 100%; }
  .hero__media img { object-position: 50% 40%; }
  .hero__scrim {
    inset: 0; width: 100%;
    background: linear-gradient(180deg,
      rgba(242, 237, 228, 0.97) 0%,
      rgba(242, 237, 228, 0.9) 52%,
      rgba(242, 237, 228, 0.4) 100%);
  }
  .hero__inner { min-height: 0; }
}
.hero h1 { margin-bottom: var(--s3); }
.hero .lead { margin-bottom: var(--s4); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.hero__meta {
  margin-top: var(--s6);
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .hero__media img { object-position: 70% 50%; }
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(242,237,228,0.96) 0%, rgba(242,237,228,0.88) 46%, rgba(242,237,228,0.35) 100%);
  }
  .hero__inner { min-height: 0; }
}

/* --------------------------------------------------------------------------
   13. Product showcase (homepage)
   -------------------------------------------------------------------------- */

/* The photograph bleeds to the left viewport edge and carries most of the
   width, as drawn — boxing it inside the container makes it read as a stock
   product grid instead of an editorial spread. */
.showcase { display: grid; align-items: center; gap: var(--s5); }
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(var(--s5), 6vw, var(--s8)); }
}
.showcase__media { position: relative; }
.showcase__media > img { width: 100%; border-radius: 0 var(--radius-card) var(--radius-card) 0; }

.showcase__inset {
  position: absolute; right: -8%; bottom: 14%;
  width: 30%; max-width: 13rem;
  border: 8px solid var(--cream);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 46px rgba(14, 13, 11, 0.2);
}
@media (max-width: 959px) {
  .showcase__inset { right: 5%; bottom: -6%; width: 30%; }
}

.showcase__info { padding-right: var(--gutter); }
@media (min-width: 960px) { .showcase__info { max-width: 27rem; } }
@media (max-width: 959px) { .showcase__info { padding-inline: var(--gutter); margin-top: var(--s6); } }

.showcase__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
}

/* --------------------------------------------------------------------------
   14. Pull quote — cream card straddling the seam of the dark panel
   -------------------------------------------------------------------------- */

.verhaal { display: grid; align-items: stretch; padding-block: 0; }
@media (min-width: 960px) { .verhaal { grid-template-columns: 1fr 1fr; } }
.verhaal__media { position: relative; min-height: clamp(24rem, 46vw, 40rem); }
.verhaal__media > img { width: 100%; height: 100%; object-fit: cover; }

.pullquote {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(var(--s4), 4vw, var(--s5));
  border-radius: var(--radius-card);
  max-width: 26rem;
}
.pullquote-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  line-height: 0.7;
  color: var(--gold);
  display: block;
  margin-bottom: var(--s2);
}
.pullquote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.5;
}
.pullquote__attrib {
  margin-top: var(--s4);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* On wide screens the card straddles the seam — it sits at the left edge of
   the photo and extends back over the dark panel, exactly as drawn. */
@media (min-width: 960px) {
  .verhaal__quote-wrap {
    z-index: 2;
    display: flex; align-items: center; justify-content: flex-start;
  }
  .verhaal__quote-wrap .pullquote {
    margin-left: -28%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  }
}

/* The dark text panel sits in the left half and is right-aligned to the seam,
   so the copy column lines up with the site container on wide screens. */
.verhaal__text { display: grid; align-items: center; padding-block: var(--section-y-dark); }
.verhaal__text > div {
  width: min(100% - 2 * var(--gutter), calc(var(--container) / 2));
  margin-left: auto;
}
@media (min-width: 960px) { .verhaal__text > div { padding-right: var(--s5); } }
.verhaal__quote-wrap { position: absolute; inset: 0; }
@media (max-width: 959px) {
  /* Stacked: the photo keeps its own aspect and the quote card follows it as
     a normal block. Without releasing min-height and the 100% image height,
     the static card overflows the media box onto the next section. */
  .verhaal__media { min-height: 0; }
  .verhaal__media > img { height: auto; }
  .verhaal__quote-wrap { position: static; padding: var(--s5) var(--gutter) var(--s6); }
  .verhaal__quote-wrap .pullquote { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   15. Filosofie — numbered 01 / 02 / 03 with thin dividers
   -------------------------------------------------------------------------- */

.filosofie__item { position: relative; padding-inline: var(--s2); }
@media (min-width: 760px) {
  .filosofie__item + .filosofie__item { border-left: 1px solid var(--hairline); padding-left: var(--s5); }
}
.filosofie__num {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--gold);
  display: block;
  margin-bottom: var(--s2);
}
.filosofie__item h3 { margin-bottom: var(--s2); }

/* --------------------------------------------------------------------------
   16. Product cards
   -------------------------------------------------------------------------- */

.product-card { display: flex; flex-direction: column; }
.product-card__media {
  position: relative;
  background: var(--cream-alt);
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.product-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-lux);
}
.product-card:hover .product-card__media img { transform: scale(1.035); }
.product-card__body { padding-top: var(--s3); display: grid; gap: var(--s1); }
.product-card__title { font-family: var(--font-display); font-size: var(--step-2); }
.product-card__title a { text-decoration: none; }
.product-card__title a::after { content: ''; position: absolute; inset: 0; }
.product-card { position: relative; }
.product-card__notes { font-size: var(--step--1); color: var(--fg-muted); }
.product-card__price { font-family: var(--font-display); font-size: var(--step-2); }

.badge {
  position: absolute; top: var(--s2); left: var(--s2);
  background: var(--gold); color: var(--white);
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--step--2); letter-spacing: var(--track-caps);
  text-transform: uppercase;
  padding: 0.4em 0.85em; border-radius: 2px;
}

/* --------------------------------------------------------------------------
   16b. Discovery / Mystery Box band
   -------------------------------------------------------------------------- */

.discovery { display: grid; }
@media (min-width: 960px) { .discovery { grid-template-columns: 1fr 1fr; } }
.discovery__panel {
  background: var(--green); color: var(--white);
  display: grid; align-items: center;
  padding: var(--section-y-dark) var(--gutter);
}
.discovery__panel > div { max-width: 30rem; width: 100%; }
@media (min-width: 960px) { .discovery__panel > div { margin-left: auto; } }
.discovery__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 959px) {
  /* Single column: height:100% resolves against an auto-height row and
     collapses the photo, so let it keep its own aspect ratio. */
  .discovery__media img { height: auto; }
}

/* --------------------------------------------------------------------------
   16c. Cart lines (drawer + cart page)
   -------------------------------------------------------------------------- */

.cart-list { display: grid; gap: var(--s4); }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--s3); align-items: start; }
.cart-line__thumb { border-radius: var(--radius-card); background: var(--cream-alt); }
.cart-line__title { font-family: var(--font-display); font-size: var(--step-1); text-decoration: none; }
.cart-line__title:hover { color: var(--gold-dark); }
.cart-line__right { text-align: right; display: grid; gap: var(--s1); justify-items: end; }
.cart-line__price { font-family: var(--font-display); font-size: var(--step-1); }
.link-quiet {
  font-size: var(--step--1); color: var(--fg-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-quiet:hover { color: var(--fg); }

.drawer__total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: var(--step-2);
  margin-bottom: var(--s3);
}
.drawer__note { margin-top: var(--s2); text-align: center; }
.drawer__note svg { width: 1em; height: 1em; display: inline; vertical-align: -0.15em; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: var(--radius-btn); }
.qty button { padding: 0.4rem 0.6rem; display: inline-flex; }
.qty button svg { width: 0.9rem; height: 0.9rem; }
.qty input {
  width: 2.5rem; text-align: center; border: 0; background: none;
  font-size: var(--step--1); padding: 0.4rem 0;
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   16d. Product detail
   -------------------------------------------------------------------------- */

.breadcrumbs {
  padding-block: var(--s3);
  font-size: var(--step--1); color: var(--fg-muted);
  display: flex; gap: 0.6em; flex-wrap: wrap;
}
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--gold-dark); }

.pdp__grid { display: grid; gap: clamp(var(--s5), 5vw, var(--s7)); }
@media (min-width: 900px) { .pdp__grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.pdp__gallery { display: grid; gap: var(--s2); }
.pdp__gallery img { width: 100%; border-radius: var(--radius-card); background: var(--cream-alt); }
@media (min-width: 560px) {
  .pdp__gallery { grid-template-columns: 1fr 1fr; }
  .pdp__gallery img:first-child { grid-column: 1 / -1; }
}
.pdp__info { position: sticky; top: var(--s4); }
@media (max-width: 899px) { .pdp__info { position: static; } }

.pdp__price {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-3); margin-top: var(--s4);
  display: flex; align-items: baseline; gap: var(--s2);
}
.price--was { font-size: var(--step-1); color: var(--fg-muted); text-decoration: line-through; }

.buy-form { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); align-items: stretch; }
.buy-form .btn { flex: 1 1 12rem; }

.pdp__usps { margin-top: var(--s5); display: grid; gap: var(--s2); }
.pdp__usps li { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--step--1); }
.pdp__usps svg { width: 1.1em; height: 1.1em; color: var(--gold); flex: none; margin-top: 0.25em; }

.pdp__detail { display: grid; gap: clamp(var(--s5), 5vw, var(--s7)); }
@media (min-width: 900px) { .pdp__detail { grid-template-columns: 1fr 1fr; } }

.pyramid { display: grid; gap: var(--s3); margin-top: var(--s3); }
.pyramid__tier { display: grid; gap: 0.25rem; padding-bottom: var(--s3); border-bottom: 1px solid var(--hairline); }
.pyramid__label {
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-dark);
}
.pyramid__list { font-family: var(--font-display); font-size: var(--step-1); margin: 0; }

/* --------------------------------------------------------------------------
   16e. Cart page + checkout hand-off
   -------------------------------------------------------------------------- */

.cart-line--page { grid-template-columns: 96px 1fr auto; padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.cart-line__qty { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s2); }
.cart-summary { margin-top: var(--s6); margin-left: auto; max-width: 24rem; }

.handoff-wrap { max-width: 38rem; text-align: center; }
.handoff { margin-top: var(--s5); display: grid; gap: var(--s2); text-align: left; }
.handoff__step {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s2); align-items: center;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  font-size: var(--step--1);
}
.handoff__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.handoff__price { font-family: var(--font-display); }
.handoff__total { margin-top: var(--s4); }

/* --------------------------------------------------------------------------
   16f. Contact, notices, accordion, search
   -------------------------------------------------------------------------- */

.contact__grid { display: grid; gap: clamp(var(--s5), 5vw, var(--s7)); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact__details { margin-top: var(--s6); display: grid; gap: var(--s3); }
.contact__details dt {
  font-size: var(--step--2); font-weight: 500;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted);
}
.contact__details dd { margin: 0.25rem 0 0; font-family: var(--font-display); font-size: var(--step-1); }
.contact__details a { text-underline-offset: 3px; }

.form-stack { display: grid; gap: var(--s3); }
.form-stack textarea { resize: vertical; min-height: 8rem; font-family: var(--font-body); }

/* Honeypot — visually and programmatically gone, but still fillable by bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s3); border-radius: var(--radius-card);
  margin-bottom: var(--s4); font-size: var(--step--1);
}
.notice svg { width: 1.2em; height: 1.2em; flex: none; margin-top: 0.15em; }
.notice p { margin-top: 0.25rem; }
.notice--ok    { background: rgba(26, 48, 40, 0.08); border: 1px solid rgba(26, 48, 40, 0.25); color: var(--green); }
.notice--error { background: rgba(162, 53, 43, 0.07); border: 1px solid rgba(162, 53, 43, 0.3); color: #7E2A22; }
.notice ul { margin-top: 0.35rem; padding-left: 1rem; list-style: disc; }

.accordion { border-bottom: 1px solid var(--hairline); }
.accordion__trigger {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
  padding: var(--s3) 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--step-1);
  list-style: none;
}
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger svg {
  width: 1rem; height: 1rem; flex: none; color: var(--gold);
  transition: transform var(--dur-fast) var(--ease-lux);
}
.accordion[open] .accordion__trigger svg { transform: rotate(90deg); }
.accordion__panel { padding-bottom: var(--s3); color: var(--fg-muted); max-width: 62ch; }

.search-results { margin-top: var(--s5); display: grid; gap: var(--s5); }
.search-results li { padding-bottom: var(--s4); border-bottom: 1px solid var(--hairline); }
.search-results a { text-decoration: none; }
.search-results a:hover { color: var(--gold-dark); }

/* --------------------------------------------------------------------------
   17. Newsletter
   -------------------------------------------------------------------------- */

.newsletter { background: var(--cream-alt); text-align: center; }
.newsletter .inline-form { margin-inline: auto; }
.newsletter h2 { margin-bottom: var(--s1); }

/* --------------------------------------------------------------------------
   18. Footer — dark forest green in the mockup, NOT the cream both docs
   claim. Gold headings pass WCAG on green (~7:1) and fail on cream (~2.8:1).
   Swap .site-footer--cream if the client ever prefers the documented version.
   -------------------------------------------------------------------------- */

.site-footer { background: var(--green); color: var(--white); padding-block: var(--s7) var(--s4); }
/* brand + Shop + Informatie + Service + Volg ons = five columns */
.site-footer__grid { display: grid; gap: var(--s5); }
@media (min-width: 700px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.3fr repeat(4, 1fr); } }

.site-footer__brand { color: var(--gold); display: grid; gap: var(--s2); justify-items: start; }
.site-footer__brand svg { width: auto; height: 84px; }
.site-footer__wordmark {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.42em;
  color: var(--gold);
}

.footer-col h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s3);
}
.footer-col ul { display: grid; gap: var(--s2); }
.footer-col a {
  text-decoration: none; font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.footer-col a:hover { color: var(--white); }
.footer-col svg { width: 1.05em; height: 1.05em; flex: none; }

.site-footer__divider {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s7) 0 var(--s4);
}
.site-footer__divider::before,
.site-footer__divider::after {
  content: ''; height: 1px; flex: 1; background: rgba(201, 160, 75, 0.42);
}
.site-footer__divider svg { width: 1.1rem; height: 1.1rem; color: var(--gold); }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  font-family: var(--font-display);
  font-size: var(--step--1);
  color: rgba(255, 255, 255, 0.72);
}

.pay-row { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.pay-row svg { height: 1.6rem; width: auto; border-radius: 2px; }

/* --------------------------------------------------------------------------
   19. Scroll-stopper — see assets/js/main.js
   The section reserves its full height in normal flow from first paint, so
   CLS is structurally zero whether or not the scrubber ever initialises.
   -------------------------------------------------------------------------- */

.scroll-stopper { position: relative; background: var(--dark); color: var(--white); }
.js .scroll-stopper { height: 320vh; height: 320svh; }

.scroll-stopper__pin { position: relative; }
.js .scroll-stopper__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; align-items: center;
}

.scroll-stopper__poster,
.scroll-stopper__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.scroll-stopper__canvas { display: none; }
.scroll-stopper--live .scroll-stopper__canvas { display: block; }
.scroll-stopper--live .scroll-stopper__poster { opacity: 0; transition: opacity var(--dur) var(--ease-lux); }

.scroll-stopper__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(95deg,
    rgba(14,13,11,0.90) 0%, rgba(14,13,11,0.62) 32%, rgba(14,13,11,0) 62%);
}
@media (max-width: 900px) {
  /* The copy spans the full width here, so a left-weighted gradient leaves
     white serif sitting on a lit bottle. Wash the whole frame instead. */
  .scroll-stopper__scrim {
    background: linear-gradient(180deg,
      rgba(14,13,11,0.86) 0%, rgba(14,13,11,0.78) 45%, rgba(14,13,11,0.88) 100%);
  }
}

.scroll-stopper__copy { position: relative; display: grid; }
.ss-chapter { max-width: 32ch; }
.js .ss-chapter {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(16px);
  will-change: opacity, transform;
}
.js .ss-chapter.is-active { opacity: 1; transform: none; }
.ss-chapter__title { font-size: var(--step-4); margin-bottom: var(--s3); }
.ss-chapter__sub { color: rgba(255, 255, 255, 0.78); }

/* Static tier — unpinned, chapters stacked as ordinary editorial blocks. */
.scroll-stopper--static { height: auto !important; }
.scroll-stopper--static .scroll-stopper__pin {
  position: static; height: auto; padding-block: var(--section-y-dark);
}
.scroll-stopper--static .scroll-stopper__copy { gap: var(--s6); }
.scroll-stopper--static .ss-chapter {
  /* grid-area must be reset too — the pinned tier stacks every chapter into
     one cell, and without this the static tier renders them on top of each
     other instead of as three sequential blocks. */
  grid-area: auto;
  position: static; opacity: 1; transform: none;
}
.scroll-stopper--static .scroll-rail { display: none; }

.scroll-rail {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: var(--s3);
  font-family: var(--font-body); font-size: var(--step--2);
  letter-spacing: var(--track-caps);
  color: rgba(255, 255, 255, 0.8);
}
.scroll-rail__track { position: relative; width: 1px; height: 9rem; background: rgba(255,255,255,0.28); }
.scroll-rail__dot {
  position: absolute; left: 50%; top: 0;
  width: 5px; height: 5px; margin-left: -2px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(201, 160, 75, 0.6);
}
@media (max-width: 900px) { .scroll-rail { display: none; } }

/* --------------------------------------------------------------------------
   20. Utilities
   -------------------------------------------------------------------------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }
[hidden] { display: none !important; }