/* Evora Enrich, v7: restrained editorial storefront */
:root {
  --obsidian: #080909;
  --obsidian-2: #121313;
  --obsidian-3: #1c1d1c;
  --ivory: #f5f1ea;
  --ivory-2: #ede7dc;
  --stone: #ddd5c8;
  --stone-line: #e2dbcf;
  --ink: #141413;
  --ink-soft: #5f5a52;
  --ink-faint: #8a847a;
  --light: #f5f1ea;
  --light-soft: #b3ab9f;
  --line-dark: rgb(245 241 234 / .14);
  --gold: #c6a15b;
  --gold-text: #8a6a2f; /* gold that passes 4.5:1 on ivory */

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
  --t-h3: clamp(1.375rem, 1.2rem + .5vw, 1.625rem);
  --t-h2: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
  --t-h1: clamp(2.75rem, 1.7rem + 3.6vw, 5rem);

  --wrap: 1280px;
  --pad: clamp(20px, 4vw, 48px);
  --section: clamp(88px, 10vw, 144px);
  --radius: 2px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--ivory); color: var(--ink); font: 400 var(--t-md)/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
h1, h2, .serif { font-family: var(--serif); line-height: 1.08; letter-spacing: -0.01em; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--gold); color: var(--obsidian); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ivory); color: var(--ink); }
.skip:focus { top: 16px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; }
.dark { background: var(--obsidian); color: var(--light); }
.white { background: #fff; }
.soft { color: var(--ink-soft); }
.dark .soft { color: var(--light-soft); }
.eyebrow { font-size: var(--t-xs); font-weight: 500; color: var(--gold-text); }
.dark .eyebrow { color: var(--gold); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border: 1px solid var(--obsidian); border-radius: var(--radius); cursor: pointer;
  background: var(--obsidian); color: var(--ivory); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 140ms var(--ease);
}
.button:active { transform: scale(.98); }
.button.gold { background: var(--gold); border-color: var(--gold); color: var(--obsidian); }
.button.outline { background: transparent; color: var(--ink); border-color: var(--stone); }
.dark .button.outline { color: var(--light); border-color: var(--line-dark); }
.button.block { width: 100%; }
.button[aria-disabled], .button:disabled { opacity: .45; pointer-events: none; }
.text-link { font-size: var(--t-sm); font-weight: 500; text-decoration: underline; text-decoration-color: var(--stone); text-underline-offset: .35em; transition: text-decoration-color 200ms; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #2a2b2a; border-color: #2a2b2a; }
  .button.gold:hover { background: #d4b273; border-color: #d4b273; }
  .button.outline:hover { border-color: var(--ink); background: transparent; }
  .dark .button.outline:hover { border-color: var(--light); }
  .text-link:hover { text-decoration-color: currentColor; }
}

/* Header */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; color: var(--light); transition: background-color 300ms ease; }
.bar.scrolled, .bar.solid { background: rgb(8 9 9 / .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.logo img { height: 40px; width: auto; }
.bar nav { display: flex; gap: 36px; font-size: var(--t-sm); }
.bar nav a { opacity: .8; transition: opacity 200ms; }
.bar nav a:hover, .bar nav a[aria-current] { opacity: 1; }
.bar-right { justify-self: end; display: flex; align-items: center; gap: 28px; font-size: var(--t-sm); }
.bar-right a { opacity: .8; transition: opacity 200ms; }
.bar-right a:hover { opacity: 1; }
.bag { display: inline-flex; align-items: center; }
.bag output { font-variant-numeric: tabular-nums; }
.bump { animation: bump 380ms var(--ease); }
@keyframes bump { 40% { transform: scale(1.3); } }

/* Hero */
.hero { position: relative; height: 92svh; min-height: 620px; max-height: 960px; display: flex; align-items: flex-end; overflow: hidden; background: var(--obsidian); color: var(--light); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 9 9 / .72) 0%, rgb(8 9 9 / .3) 45%, rgb(8 9 9 / 0) 70%); } /* taste-skill-ignore: neutral legibility scrim */
.hero .wrap { position: relative; z-index: 1; padding-bottom: clamp(64px, 10vh, 120px); }
.hero h1 { font-size: var(--t-h1); max-width: 16ch; }
.hero .hero-sub { margin-top: 20px; max-width: 38ch; font-size: var(--t-lg); color: rgb(245 241 234 / .78); }
.hero .button { margin-top: 36px; }

/* Service line under hero */
.service { background: var(--obsidian); color: var(--light-soft); border-top: 1px solid var(--line-dark); }
.service ul { list-style: none; margin: 0 auto; padding: 18px var(--pad); display: flex; justify-content: space-between; gap: 24px; font-size: var(--t-xs); }
.service b { color: var(--light); font-weight: 500; }

/* Section head */
.head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px 48px; margin-bottom: 48px; }
.head h2 { margin-top: 10px; font-size: var(--t-h2); }
.head p { margin-top: 12px; max-width: 46ch; }

/* Collection */
.filters { display: flex; gap: 8px; }
.filters button { min-height: 40px; padding: 0 18px; border: 1px solid var(--stone); border-radius: var(--radius); background: transparent; cursor: pointer; font-size: var(--t-sm); color: var(--ink-soft); transition: color 200ms, border-color 200ms, background-color 200ms; }
.filters button:hover { color: var(--ink); border-color: var(--ink-faint); }
.filters button[aria-pressed="true"] { background: var(--obsidian); border-color: var(--obsidian); color: var(--ivory); }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 24px; }
.grid > li[hidden] { display: none; }
.pcard { display: flex; flex-direction: column; }
.pcard .media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--obsidian-2); }
.pcard .media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; transform: scale(1.32); transform-origin: 50% 88%; transition: transform 900ms var(--ease); }
.badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: var(--ivory); color: var(--ink); font-size: var(--t-xs); }
.pcard.sold .media img { opacity: .45; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding-top: 18px; }
.pcard-type { font-size: var(--t-xs); color: var(--ink-faint); }
.pcard h3 { margin-top: 4px; font-family: var(--serif); font-size: var(--t-h3); font-weight: 500; line-height: 1.15; }
.pcard-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: var(--t-sm); color: var(--ink-soft); }
.pcard-meta b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.pcard .button { margin-top: auto; }
.pcard-body > .button { margin-top: 18px; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .pcard:hover .media img { transform: scale(1.38); } }
.grid-foot { display: flex; justify-content: center; margin-top: 56px; }
.grid-foot[hidden] { display: none; }
.ruo-note { margin-top: 40px; font-size: var(--t-xs); color: var(--ink-faint); text-align: center; }

/* Quality and transparency */
.quality { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
.quality-side { position: sticky; top: 104px; }
.quality-side h2 { margin-top: 10px; font-size: var(--t-h2); }
.quality-side > p { margin-top: 16px; max-width: 40ch; }
.preview { display: grid; place-items: center; margin-top: 32px; padding: 24px; background: var(--ivory-2); }
.preview img { grid-area: 1 / 1; width: auto; max-width: 100%; max-height: min(44svh, 440px); height: auto; opacity: 0; transition: opacity 300ms ease; }
.preview img.on { opacity: 1; }
.reports { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone-line); }
.reports li { border-bottom: 1px solid var(--stone-line); }
.report-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 28px 0; }
.report-row img { display: none; }
.report-row h3 { font-family: var(--serif); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 500; line-height: 1.1; transition: color 200ms; }
.report-row p { margin-top: 4px; font-size: var(--t-sm); color: var(--ink-soft); }
.report-row .text-link { white-space: nowrap; }
.report-row.active h3 { color: var(--gold-text); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.facts div { padding-top: 16px; border-top: 1px solid var(--stone-line); }
.facts b { display: block; font-weight: 500; }
.facts span { display: block; margin-top: 4px; font-size: var(--t-sm); color: var(--ink-soft); }

/* Brand philosophy */
.philosophy { display: grid; grid-template-columns: 1fr 1fr; min-height: min(90svh, 860px); background: var(--obsidian); color: var(--light); }
.philosophy-media { position: relative; overflow: hidden; }
.philosophy-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.philosophy-text { display: flex; flex-direction: column; justify-content: center; padding: var(--section) clamp(24px, 7vw, 112px); }
.philosophy-text h2 { margin-top: 12px; font-size: var(--t-h2); max-width: 14ch; }
.philosophy-text > p { margin-top: 24px; max-width: 44ch; color: var(--light-soft); }
.principles { list-style: none; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--line-dark); }
.principles li { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font-size: var(--t-sm); color: var(--light-soft); }
.principles b { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--light); }

/* Footer */
.foot { background: var(--obsidian); color: var(--light-soft); padding: 80px 0 32px; font-size: var(--t-sm); border-top: 1px solid var(--line-dark); }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 40px; }
.foot-brand img { height: 48px; width: auto; }
.foot-brand p { margin-top: 20px; max-width: 32ch; }
.foot h2 { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--light); margin-bottom: 16px; letter-spacing: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a:hover { color: var(--light); }
.foot-ship { margin-top: 56px; padding: 20px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px 40px; }
.foot-ship b { color: var(--light); font-weight: 500; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; margin-top: 28px; font-size: var(--t-xs); color: var(--ink-faint); }
.foot-bottom p { max-width: 80ch; }

/* Dialogs */
dialog { border: 0; padding: 0; background: var(--ivory); color: var(--ink); max-width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(8 9 9 / .72); }
dialog[open] { animation: fade 240ms ease; }
@keyframes fade { from { opacity: 0; } }
.age { padding: 48px 40px; text-align: center; background: var(--obsidian); color: var(--light); }
.age img { height: 48px; width: auto; margin: 0 auto 28px; }
.age h2 { font-size: 2rem; }
.age p { margin: 14px auto 0; max-width: 40ch; color: var(--light-soft); font-size: var(--t-sm); }
.age p a { color: var(--light); text-decoration: underline; text-underline-offset: .2em; }
.age-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.drawer { margin: 0 0 0 auto; height: 100svh; max-height: 100svh; width: min(420px, 100vw); max-width: 100vw; }
.drawer[open] { display: flex; flex-direction: column; animation: slide 300ms var(--ease); }
@keyframes slide { from { transform: translateX(32px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 24px; border-bottom: 1px solid var(--stone-line); }
.drawer-head h2 { font-size: 1.75rem; }
.close { min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font-size: var(--t-sm); color: var(--ink-soft); }
.close:hover { color: var(--ink); }
.lines { list-style: none; margin: 0; padding: 24px; flex: 1; overflow: auto; display: grid; gap: 20px; align-content: start; }
.line { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; font-size: var(--t-sm); }
.line img { width: 64px; height: 64px; object-fit: cover; object-position: 50% 82%; }
.line b { font-weight: 500; }
.line span { display: block; color: var(--ink-soft); }
.qty { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--stone); }
.qty button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; }
.qty output { min-width: 20px; text-align: center; }
.empty { color: var(--ink-soft); }
.drawer-foot { padding: 24px; border-top: 1px solid var(--stone-line); display: grid; gap: 10px; }
.meter { height: 2px; background: var(--stone); overflow: hidden; }
.meter::before { content: ''; display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform 400ms var(--ease); }
.sum { display: flex; justify-content: space-between; font-size: var(--t-sm); color: var(--ink-soft); }
.sum.total { font-size: var(--t-lg); color: var(--ink); }
.sum.total b { font-weight: 500; }
.small { font-size: var(--t-sm); }

/* Inner pages */
.page-top { padding-top: 76px; }
.crumbs { font-size: var(--t-xs); color: var(--ink-faint); }
.crumbs a:hover { color: var(--ink); }

/* Product page */
.pdp { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: start; padding-top: 40px; }
.pdp-media { position: sticky; top: 100px; aspect-ratio: 1 / 1; max-height: calc(100svh - 128px); width: 100%; overflow: hidden; background: var(--obsidian-2); }
.pdp-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; transform: scale(1.3); transform-origin: 50% 88%; }
.pdp-info { padding-bottom: 40px; }
.pdp-info h1 { margin-top: 20px; font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.75rem); }
.pdp-type { margin-top: 8px; color: var(--ink-soft); }
.pdp-price { margin-top: 24px; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pdp-label { margin: 32px 0 12px; font-size: var(--t-sm); font-weight: 500; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; }
.opt span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 1px solid var(--stone); cursor: pointer; transition: border-color 200ms, background-color 200ms, color 200ms; }
.opt input:checked + span { background: var(--obsidian); border-color: var(--obsidian); color: var(--ivory); }
.opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.buy-row { display: flex; gap: 10px; margin-top: 24px; }
.buy-row input { width: 80px; min-height: 50px; border: 1px solid var(--stone); background: transparent; text-align: center; }
.buy-row .button { flex: 1; }
.dispatch { margin-top: 14px; font-size: var(--t-sm); color: var(--ink-soft); }
.pdp-acc { margin-top: 40px; border-top: 1px solid var(--stone-line); }
.qa { border-bottom: 1px solid var(--stone-line); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 60px; cursor: pointer; font-weight: 500; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; position: relative; width: 12px; height: 12px; transition: transform 250ms var(--ease); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 0; top: 5.5px; width: 12px; height: 1px; background: currentColor; }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { transform: rotate(45deg); }
.qa > p, .qa > div { padding: 0 0 22px; max-width: 64ch; font-size: var(--t-sm); color: var(--ink-soft); }
.pdp-acc dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 24px; margin: 0; }
.pdp-acc dt { color: var(--ink-faint); }
.pdp-acc dd { margin: 0; color: var(--ink); }
.pdp-acc a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.related h2 { font-size: var(--t-h2); margin-bottom: 40px; }

/* Checkout and confirmation */
.checkout { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 80px); padding-top: 40px; padding-bottom: var(--section); align-items: start; }
.co-main h1 { font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem); }
.trail { display: flex; gap: 20px; margin: 12px 0 36px; font-size: var(--t-sm); color: var(--ink-faint); }
.trail [aria-current] { color: var(--ink); font-weight: 500; }
.co-main h2 { font-family: var(--sans); font-size: 1.125rem; font-weight: 500; margin: 40px 0 16px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-sm); font-weight: 500; }
.field label small { font-weight: 400; color: var(--ink-faint); }
.field input, .field select, .field textarea { min-height: 50px; padding: 0 14px; border: 1px solid var(--stone); border-radius: var(--radius); background: #fff; color: var(--ink); }
.field textarea { min-height: 100px; padding: 12px 14px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.check { display: flex; gap: 12px; align-items: start; margin-top: 16px; font-size: var(--t-sm); color: var(--ink-soft); }
.check a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--obsidian); }
.co-side { background: #fff; border: 1px solid var(--stone-line); padding: 32px; position: sticky; top: 100px; }
.co-side-inner { display: grid; gap: 14px; }
.co-side h2 { font-size: 1.75rem; }
.co-side .lines { padding: 0; }
.pay { border: 1px solid var(--stone-line); padding: 18px; display: grid; gap: 4px; }
.pay b { font-weight: 500; }
.pay p { color: var(--ink-soft); font-size: var(--t-sm); }
.text-link-inline, .co-main .text-link { text-decoration: underline; text-underline-offset: .2em; }
.confirm { max-width: 720px; margin: 0 auto; padding: 72px 0 var(--section); text-align: center; }
.confirm h1 { margin-top: 12px; font-size: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem); }
.confirm > p { margin: 16px auto 0; max-width: 48ch; color: var(--ink-soft); }
.confirm-box { margin-top: 40px; text-align: left; background: #fff; border: 1px solid var(--stone-line); padding: 28px; display: grid; gap: 12px; }
.confirm .button { margin-top: 32px; }

/* Motion: quiet entrances, content visible without JS */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* Tablet */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .quality { grid-template-columns: 1fr; }
  .quality-side { position: static; }
  .preview { display: none; }
  .report-row { grid-template-columns: 72px 1fr auto; }
  .report-row img { display: block; width: 72px; height: auto; background: #fff; }
  .philosophy { grid-template-columns: 1fr; }
  .philosophy-media { min-height: 70vw; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
/* Phone */
@media (max-width: 820px) {
  .bar nav { display: none; }
  .bar-in { grid-template-columns: 1fr auto; height: 64px; }
  .bar-right .account { display: none; }
  .logo img { height: 34px; }
  .page-top { padding-top: 64px; }
  .hero { height: 86svh; min-height: 560px; }
  .hero::after { background: linear-gradient(0deg, rgb(8 9 9 / .85) 0%, rgb(8 9 9 / .35) 55%, rgb(8 9 9 / .1) 100%); }
  .service ul { flex-direction: column; gap: 6px; }
  .head { margin-bottom: 32px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 36px 12px; }
  .pcard h3 { font-size: 1.25rem; }
  .pcard-meta { flex-direction: column; gap: 0; }
  .facts { grid-template-columns: 1fr; }
  .report-row { grid-template-columns: 56px 1fr; padding: 20px 0; }
  .report-row img { width: 56px; }
  .report-row .text-link { display: none; }
  .principles li { grid-template-columns: 1fr; gap: 4px; }
  .pdp, .checkout { grid-template-columns: 1fr; }
  .pdp-media { position: static; max-height: none; }
  .fields { grid-template-columns: 1fr; }
  .co-side { position: static; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
.age .button.outline { color: var(--light); border-color: var(--line-dark); }
h1, h2, h3, .serif { font-variant-numeric: lining-nums; }

/* ===== v8: alive, editorial (inspired by Augustinus Bader, The Ordinary, SkinCeuticals) ===== */
@view-transition { navigation: auto; }

/* Header hides on scroll down, returns on scroll up */
.bar { transition: background-color 300ms ease, transform 450ms var(--ease); }
.bar.hide { transform: translateY(-100%); }

/* Hero: slow settle on the photo, headline lines rise from a mask */
.hero .mask { display: block; overflow: hidden; padding-bottom: .06em; }
.hero .mask > span { display: block; }
.hero-sub { margin-top: 20px; max-width: 38ch; font-size: var(--t-lg); color: rgb(245 241 234 / .78); }
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: settle 2600ms var(--ease) both; }
  .hero .mask > span { animation: rise 1100ms var(--ease) both; }
  .hero .mask:nth-child(2) > span { animation-delay: 120ms; }
  .hero-sub { animation: up 900ms var(--ease) 380ms both; }
  .hero-cta { animation: up 900ms var(--ease) 500ms both; }
}
@keyframes settle { from { transform: scale(1.08); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }

/* Buttons: fill sweeps up on hover */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--obsidian); transform: translateY(101%); transition: transform 450ms var(--ease); }
.button.gold::before { background: var(--ivory); }
.button.outline::before { background: var(--obsidian); }
@media (hover: hover) and (pointer: fine) {
  .button:hover::before { transform: none; }
  .button.gold:hover { background: var(--gold); color: var(--obsidian); }
  .button.outline:hover { color: var(--ivory); border-color: var(--obsidian); }
  .dark .button.outline:hover, .age .button.outline:hover { color: var(--obsidian); }
  .dark .button.outline::before, .age .button.outline::before { background: var(--ivory); }
}

/* Service ticker */
.service { overflow: hidden; }
.ticker { display: flex; width: max-content; }
.ticker ul { list-style: none; margin: 0; padding: 18px 0; display: flex; flex-direction: row !important; gap: 0 !important; font-size: var(--t-xs); }
.ticker li { padding: 0 48px; white-space: nowrap; position: relative; }
.ticker li::after { content: ''; position: absolute; right: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); transform: translateY(-50%); }
@media (prefers-reduced-motion: no-preference) {
  .ticker { animation: tick 40s linear infinite; }
  .service:hover .ticker { animation-play-state: paused; }
}
@keyframes tick { to { transform: translateX(-50%); } }

/* Category panels that open on hover */
.panels { display: flex; gap: 12px; height: min(72svh, 680px); }
.panel { position: relative; flex: 1; overflow: hidden; background: var(--obsidian-2); color: var(--light); transition: flex-grow 800ms var(--ease); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; transition: transform 1400ms var(--ease); }
.panel img.panel-doc { object-position: 50% 0; background: #fff; }
.panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 9 9 / .85) 0%, rgb(8 9 9 / .25) 45%, rgb(8 9 9 / 0) 70%); } /* taste-skill-ignore: legibility scrim */
.panel-text { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 1; }
.panel-kicker { font-size: var(--t-xs); color: var(--gold); }
.panel h2 { margin-top: 6px; font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); }
.panel-more { max-width: 30ch; margin-top: 8px; font-size: var(--t-sm); color: rgb(245 241 234 / .8); opacity: 0; transform: translateY(10px); transition: opacity 400ms ease, transform 600ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .panels:hover .panel { flex-grow: .8; }
  .panels .panel:hover, .panels .panel:focus-visible { flex-grow: 1.9; }
  .panel:hover img { transform: scale(1.04); }
  .panel:hover .panel-more, .panel:focus-visible .panel-more { opacity: 1; transform: none; transition-delay: 150ms; }
}
@media (hover: none) { .panel-more { opacity: 1; transform: none; } }

/* Collection carousel (transform based, never traps page scroll) */
.collection .section, .collection { padding-top: 0; }
.car { overflow: hidden; }
.track { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; transition: transform 800ms var(--ease); touch-action: pan-y; cursor: grab; user-select: none; }
.track.dragging { transition: none; cursor: grabbing; }
.track > li { flex: 0 0 calc((100% - 72px) / 4); }
.track > li[hidden] { display: none; }
.track img { -webkit-user-drag: none; pointer-events: none; }
.car-foot { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.progress { flex: 1; height: 1px; background: var(--stone); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--obsidian); transform-origin: left; transform: scaleX(var(--p, .25)); transition: transform 600ms var(--ease); }
.car-count { font-size: var(--t-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 4ch; }
.arrows { display: flex; gap: 8px; }
.arrows button { width: 48px; height: 48px; border: 1px solid var(--stone); border-radius: var(--radius); background: transparent; cursor: pointer; transition: background-color 250ms, color 250ms, border-color 250ms, transform 140ms var(--ease); }
.arrows button:hover { background: var(--obsidian); color: var(--ivory); border-color: var(--obsidian); }
.arrows button:active { transform: scale(.95); }
.arrows button:disabled { opacity: .35; pointer-events: none; }
.pcard .media::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--gold); transition: box-shadow 400ms var(--ease); } /* taste-skill-ignore: hover frame */
@media (hover: hover) and (pointer: fine) { .pcard:hover .media::after { box-shadow: inset 0 0 0 1px var(--gold); } }

/* Story: sticky image, steps scroll past */
.story { display: grid; grid-template-columns: 1fr 1fr; background: var(--obsidian); color: var(--light); }
.story-media { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 900ms ease, transform 1600ms var(--ease); }
.story-media img.doc { object-fit: contain; background: var(--ivory-2); padding: 8%; }
.story-media img.on { opacity: 1; transform: none; }
.story-steps .step { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(24px, 7vw, 112px); opacity: .25; transition: opacity 600ms ease; }
.story-steps .step.on { opacity: 1; }
.story-steps h2 { margin-top: 12px; font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem); }
.story-steps .step > p:last-child { margin-top: 20px; max-width: 40ch; font-size: var(--t-lg); color: var(--light-soft); }

/* Reveal: slightly richer, staggered children */
@media (prefers-reduced-motion: no-preference) {
  .js .track > li { opacity: 0; transform: translateY(24px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  .js .car.is-in .track > li { opacity: 1; transform: none; }
  .js .car.is-in .track > li:nth-child(2) { transition-delay: 80ms; }
  .js .car.is-in .track > li:nth-child(3) { transition-delay: 160ms; }
  .js .car.is-in .track > li:nth-child(4) { transition-delay: 240ms; }
  .js .car[data-reveal] { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  .track > li { flex-basis: calc((100% - 48px) / 3); }
  .story { grid-template-columns: 1fr; }
  .story-media { height: 60svh; top: 64px; z-index: 0; }
  .story-steps .step { min-height: 70svh; position: relative; z-index: 1; background: rgb(8 9 9 / .88); }
}
@media (max-width: 820px) {
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 64vw; min-height: 260px; }
  .track > li { flex-basis: 78%; }
  .car-foot .car-count { display: none; }
  .ticker li { padding: 0 28px; }
}
.track a { -webkit-user-drag: none; }

/* ===== v9 refinements ===== */
:root { --fast: 280ms; --mid: 520ms; }

/* Hero, refined: copy left, featured product card right */
.hero { height: 100svh; max-height: 1000px; min-height: 640px; }
.hero-media { position: absolute; inset: -12px; will-change: transform; }
.hero-media .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::after { background: linear-gradient(90deg, rgb(8 9 9 / .8) 0%, rgb(8 9 9 / .35) 45%, rgb(8 9 9 / .05) 72%), linear-gradient(0deg, rgb(8 9 9 / .55) 0%, rgb(8 9 9 / 0) 35%); } /* taste-skill-ignore: legibility scrim */
.hero-grid { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; width: 100%; }
.hero .wrap.hero-grid { padding-bottom: clamp(48px, 8vh, 96px); }
.hero-kicker { display: flex; align-items: center; gap: 14px; font-size: var(--t-xs); color: rgb(245 241 234 / .75); }
.hero-kicker span { width: 40px; height: 1px; background: var(--gold); }
.hero h1 { margin-top: 22px; font-size: clamp(3rem, 1.6rem + 4.4vw, 5.75rem); line-height: 1.02; max-width: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 36px; }
.hero-actions .button { margin-top: 0; }
.hero-link { position: relative; font-size: var(--t-sm); color: var(--light); padding: 6px 0; }
.hero-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; opacity: .4; transform-origin: right; transition: transform var(--mid) var(--ease), opacity var(--fast); }
.hero-link:hover::after { opacity: 1; animation: line var(--mid) var(--ease); }
@keyframes line { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 51% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.hero-card { flex: none; display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; width: 330px; padding: 12px 18px 12px 12px; background: rgb(245 241 234 / .96); color: var(--ink); transition: transform var(--mid) var(--ease); }
.hero-card img { width: 84px; height: 84px; object-fit: cover; object-position: 50% 82%; transform: scale(1.3); transform-origin: 50% 88%; }
.hero-card-text { display: grid; gap: 2px; font-size: var(--t-xs); color: var(--ink-soft); }
.hero-card-text small { font-size: .75rem; color: var(--gold-text); }
.hero-card-text b { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--ink); line-height: 1.15; }
.hero-card-text em { font-style: normal; margin-top: 4px; color: var(--ink); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--stone); }
@media (hover: hover) and (pointer: fine) { .hero-card:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker { animation: up 700ms var(--ease) 80ms both; }
  .hero-actions { animation: up 700ms var(--ease) 420ms both; }
  .hero-card { animation: up 800ms var(--ease) 600ms both; }
  .hero-sub, .hero-cta { animation: none; }
  .hero-sub { animation: up 700ms var(--ease) 320ms both; }
}

/* Faster, smoother entrances */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition-duration: 560ms; }
  .js .track > li { transition-duration: 560ms; }
  .panel { transition-duration: 600ms; }
  .story-media img { transition: opacity 600ms ease, transform 1000ms var(--ease); }
}

/* Story, tighter and fuller */
.story { position: relative; }
.story-steps .step { min-height: 82svh; justify-content: center; opacity: .2; transition: opacity var(--mid) ease; }
.story-steps .step > * { transform: translateY(14px); transition: transform 700ms var(--ease); }
.story-steps .step.on > * { transform: none; }
.story-steps .step.on > *:nth-child(2) { transition-delay: 40ms; }
.story-steps .step.on > *:nth-child(3) { transition-delay: 80ms; }
.story-steps .step.on > *:nth-child(4) { transition-delay: 120ms; }
.step-lead { margin-top: 18px; max-width: 40ch; font-size: var(--t-lg); color: var(--light-soft); }
.step-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 40px 0 0; max-width: 520px; border-top: 1px solid var(--line-dark); }
.step-facts div { padding: 18px 16px 0 0; }
.step-facts div + div { padding-left: 16px; border-left: 1px solid var(--line-dark); }
.step-facts dt { font-family: var(--serif); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.375rem); line-height: 1; color: var(--light); font-variant-numeric: lining-nums; }
.step-facts dd { margin: 8px 0 0; font-size: var(--t-xs); color: var(--light-soft); }
.dark-link { margin-top: 36px; align-self: flex-start; }
.story-dots { position: absolute; right: 28px; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; transform: translateY(-50%); }
.story-dots li { width: 6px; height: 6px; border-radius: 50%; background: rgb(245 241 234 / .35); transition: transform var(--fast) var(--ease), background-color var(--fast); }
.story-dots li.on { background: var(--gold); transform: scale(1.5); }

/* Product cards: snappier hover */
.pcard .media img { transition-duration: 700ms; }
.button::before { transition-duration: 360ms; }

@media (max-width: 1080px) {
  .hero-card { display: none; }
  .story-dots { display: none; }
  .step-facts { max-width: none; }
}
@media (max-width: 820px) {
  .hero h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-actions { gap: 20px; }
  .step-facts { grid-template-columns: 1fr 1fr 1fr; }
  .story-steps .step { min-height: 70svh; }
}

/* ===== v10 ===== */
/* Hero: centred */
.hero { align-items: center; }
.hero::after { background: radial-gradient(ellipse at center, rgb(8 9 9 / .62) 0%, rgb(8 9 9 / .42) 45%, rgb(8 9 9 / .2) 100%); } /* taste-skill-ignore: legibility scrim */
.hero-media .hero-img { object-position: center; }
.hero .wrap.hero-grid { justify-content: center; align-items: center; padding-bottom: 0; padding-top: 76px; text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 900px; }
.hero-kicker span:first-child { width: 32px; }
.hero-kicker::after { content: ''; width: 32px; height: 1px; background: var(--gold); }
.hero .hero-sub { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }

/* Product grid: clean, whole card clickable, full photos */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 28px; }
.pgrid > li[hidden] { display: none; }
.pc > a { display: block; }
.pc-img { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--obsidian-2); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 700ms var(--ease); }
.pc-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; background: var(--ivory); font-size: var(--t-xs); }
.pc.sold .pc-img img { opacity: .45; }
.pc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; }
.pc-name { font-family: var(--serif); font-size: 1.375rem; font-weight: 500; line-height: 1.15; font-variant-numeric: lining-nums; }
.pc-price { white-space: nowrap; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.pc-sub { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--ink-faint); }
.pc-cta { display: inline-flex; gap: 6px; margin-top: 14px; font-size: var(--t-sm); font-weight: 500; border-bottom: 1px solid var(--stone); padding-bottom: 2px; transition: border-color 250ms; }
.pc-cta span { transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .pc > a:hover .pc-img img { transform: scale(1.04); }
  .pc > a:hover .pc-cta { border-color: var(--ink); }
  .pc > a:hover .pc-cta span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: no-preference) { .pc.in { animation: up 520ms var(--ease) both; } }

/* Images: keep the subject in frame */
.panel img { object-position: center; }
.story-media img { object-position: 62% center; }
.story-media img.doc { object-position: center; }

/* Lab reports: obvious, directional preview change */
.preview { display: block; position: relative; padding: 24px 24px 0; overflow: hidden; }
.preview-stage { position: relative; display: grid; place-items: center; height: min(44svh, 440px); }
.preview-stage img { position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: 100%; opacity: 0; transform: translate(-50%, 0) scale(.96); transition: opacity 420ms var(--ease), transform 520ms var(--ease); box-shadow: 0 14px 40px rgb(20 18 15 / .14); } /* taste-skill-ignore: paper sheet */
.preview-stage img.from-down { transform: translate(-50%, 18%) scale(.96); opacity: 0; transition: none; }
.preview-stage img.from-up { transform: translate(-50%, -18%) scale(.96); opacity: 0; transition: none; }
.preview-stage img.on { opacity: 1; transform: translate(-50%, 0); transition: opacity 420ms var(--ease), transform 520ms var(--ease); }
.preview-stage img.out-up { opacity: 0; transform: translate(-50%, -14%) scale(.94); }
.preview-stage img.out-down { opacity: 0; transform: translate(-50%, 14%) scale(.94); }
.preview-cap { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 18px; font-size: var(--t-sm); }
.preview-cap span:first-child { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; font-variant-numeric: lining-nums; }
.preview-cap span:last-child { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.preview.flash .preview-cap span:first-child { animation: up 420ms var(--ease) both; }
.report-row { position: relative; transition: padding 400ms var(--ease); }
.report-row::before { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--gold); transition: width 400ms var(--ease); }
.report-row.active { padding-left: 32px; }
.report-row.active::before { width: 20px; }
/* Left column stays put while the list scrolls past */
.quality { align-items: start; }
.quality-side { position: sticky; top: 96px; align-self: start; }

/* Product page: clean */
.pdp { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); padding-top: 32px; }
.pdp-media { position: static; aspect-ratio: 2 / 3; max-height: none; background: var(--obsidian-2); }
.pdp-media img { object-fit: cover; object-position: center; transform: none; }
.pdp-sticky { position: sticky; top: 100px; padding-bottom: 40px; }
.pdp-info h1 { margin-top: 16px; }
.pdp-price { margin-top: 18px; font-family: var(--serif); font-size: 2rem; font-weight: 500; font-variant-numeric: lining-nums; }
.buy-row { margin-top: 28px; }
.stepper { display: flex; border: 1px solid var(--stone); }
.stepper button { width: 44px; border: 0; background: none; cursor: pointer; font-size: 1.125rem; transition: background-color 200ms; }
.stepper button:hover { background: var(--ivory-2); }
.stepper input { width: 44px; border: 0; background: none; text-align: center; -moz-appearance: textfield; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row > .button { flex: 1; }
.dispatch { display: flex; align-items: center; gap: 10px; }
.dispatch i { width: 7px; height: 7px; border-radius: 50%; background: #4f9a6a; box-shadow: 0 0 0 4px rgb(79 154 106 / .15); }
.pdp-trust { list-style: none; margin: 24px 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid var(--stone-line); font-size: var(--t-xs); color: var(--ink-soft); }
.pdp-acc { margin-top: 28px; }
.related .pgrid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
  .pgrid, .related .pgrid { grid-template-columns: repeat(3, 1fr); }
  .quality-side { position: static; }
}
@media (max-width: 820px) {
  .pgrid, .related .pgrid { grid-template-columns: repeat(2, 1fr); gap: 36px 14px; }
  .pc-row { flex-direction: column; gap: 2px; }
  .pc-name { font-size: 1.125rem; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-sticky { position: static; }
}
.preview-cap { width: 100%; }
.preview-stage { height: min(38svh, 380px); }

/* ===== v11 ===== */
/* Lab preview: simple, robust stacking (fixes blank preview) */
.preview-stage { display: block; position: relative; width: 100%; height: min(40svh, 400px); }
.preview-stage img { position: absolute; inset: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; box-shadow: none; filter: drop-shadow(0 12px 28px rgb(20 18 15 / .16)); transform: translateY(0) scale(.97); }
.preview-stage img.from-down { transform: translateY(16%) scale(.97); }
.preview-stage img.from-up { transform: translateY(-16%) scale(.97); }
.preview-stage img.on { transform: translateY(0) scale(1); }
.preview-stage img.out-up { transform: translateY(-12%) scale(.94); }
.preview-stage img.out-down { transform: translateY(12%) scale(.94); }

/* Spotlight section */
.spot { display: grid; grid-template-columns: 1fr 1fr; background: var(--obsidian); color: var(--light); }
.spot-media { position: relative; min-height: min(92svh, 860px); overflow: hidden; }
.spot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform 1400ms var(--ease); }
.spot:hover .spot-media img { transform: scale(1.03); }
.spot-text { display: flex; flex-direction: column; justify-content: center; padding: var(--section) clamp(24px, 7vw, 112px); }
.spot-text h2 { margin-top: 12px; font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem); }
.spot-lead { margin-top: 20px; max-width: 42ch; font-size: var(--t-lg); color: var(--light-soft); }
.spot-options { list-style: none; margin: 36px 0 0; padding: 0; max-width: 460px; border-top: 1px solid var(--line-dark); }
.spot-options li { border-bottom: 1px solid var(--line-dark); }
.spot-options a { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; transition: padding 350ms var(--ease), color 250ms; }
.spot-options span { color: var(--light-soft); transition: color 250ms; }
.spot-options b { font-family: var(--serif); font-size: 1.375rem; font-weight: 500; font-variant-numeric: lining-nums; }
.spot-options a:hover { padding-left: 10px; padding-right: 10px; }
.spot-options a:hover span { color: var(--light); }
.spot-cert { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; max-width: 460px; margin-top: 28px; padding: 12px; border: 1px solid var(--line-dark); transition: border-color 250ms, background-color 250ms; }
.spot-cert img { width: 52px; height: 68px; object-fit: cover; object-position: top; background: #fff; }
.spot-cert span { display: grid; font-size: var(--t-xs); color: var(--light-soft); }
.spot-cert b { font-size: var(--t-sm); font-weight: 500; color: var(--light); }
.spot-cert i { font-style: normal; color: var(--gold); transition: transform 300ms var(--ease); }
.spot-cert:hover { border-color: var(--gold); }
.spot-cert:hover i { transform: translate(2px, -2px); }
.spot-actions { margin-top: 32px; }

/* Product cards: matted image, reveal panel on hover */
.pc-img { background: var(--ivory-2); padding: 0; }
.pc-img img { transition: transform 700ms var(--ease), filter 500ms ease; }
.pc-badge.gold { background: var(--obsidian); color: var(--gold); }
.pc-over { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; padding: 18px; background: rgb(8 9 9 / .86); color: var(--light); transform: translateY(101%); transition: transform 450ms var(--ease); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips span { padding: 4px 10px; border: 1px solid var(--line-dark); font-size: var(--t-xs); }
.pc-go { font-size: var(--t-sm); font-weight: 500; color: var(--gold); }
.pc-type { display: block; margin-top: 16px; font-size: var(--t-xs); color: var(--ink-faint); }
.pc-row { margin-top: 4px; }
.pc-sub, .pc-cta { display: none; }
@media (hover: hover) and (pointer: fine) {
  .pc > a:hover .pc-over, .pc > a:focus-visible .pc-over { transform: none; }
  .pc > a:hover .pc-img img { transform: scale(1.05); }
}
@media (hover: none) { .pc-over { position: static; transform: none; background: transparent; color: var(--ink); padding: 10px 0 0; } .pc-chips span { border-color: var(--stone); } .pc-go { color: var(--gold-text); } }

/* Product page polish */
.opt span { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 58px; gap: 0; line-height: 1.25; }
.opt small { font-size: var(--t-xs); color: var(--ink-faint); }
.opt input:checked + span small { color: var(--light-soft); }
.pdp-free { margin-top: 14px; font-size: var(--t-sm); color: var(--ink); }
.pdp-cert { margin-top: 24px; }
.pdp-cert .spot-cert { max-width: none; margin-top: 0; border-color: var(--stone-line); background: #fff; }
.pdp-cert .spot-cert span { color: var(--ink-soft); }
.pdp-cert .spot-cert b { color: var(--ink); }
.pdp-cert .spot-cert:hover { border-color: var(--gold); }
.pdp-nocert { font-size: var(--t-sm); color: var(--ink-soft); }
.pdp-media { position: sticky; top: 96px; max-height: calc(100svh - 120px); aspect-ratio: auto; height: calc(100svh - 120px); }
.pdp-media img { object-fit: contain; background: var(--obsidian-2); }

@media (max-width: 1080px) { .spot { grid-template-columns: 1fr; } .spot-media { min-height: 90vw; } }
@media (max-width: 820px) { .pdp-media { position: static; height: auto; max-height: none; aspect-ratio: 2 / 3; } }

/* ===== v12: wider layout, centred story images ===== */
:root { --wrap: 1560px; --pad: clamp(20px, 3.5vw, 64px); }
.pgrid { gap: 64px 32px; }
/* Lab reports stay at a reading width: long lines hurt the list */
.wrap.quality { max-width: 1320px; }
/* Story: wider image column, subject centred */
.story { grid-template-columns: 1.15fr .85fr; }
.story-media img, .story-media img.doc { object-position: center center; }
.story-media img.doc { padding: 6%; }
@media (max-width: 1080px) { .story { grid-template-columns: 1fr; } }

/* ===== v13 ===== */
/* Bigger header logo */
.logo img { height: 54px; }
.bar-in { height: 84px; }
.page-top { padding-top: 84px; }
@media (max-width: 820px) { .logo img { height: 42px; } .bar-in { height: 68px; } .page-top { padding-top: 68px; } }

/* Home: logo starts large in the hero and settles into the header on scroll */
.hero-logo-slot { width: clamp(220px, 24vw, 360px); aspect-ratio: 860 / 304; margin-bottom: 36px; }
.home .logo { transform-origin: 0 0; will-change: transform; }
.home .logo img { transition: none; }

/* Wider product areas */
.wrap.wide { max-width: 1800px; }

/* Spotlight, now in the site's ivory language */
.spot { background: var(--ivory); color: var(--ink); grid-template-columns: 1.05fr .95fr; }
.spot-media { margin: clamp(24px, 4vw, 64px) 0 clamp(24px, 4vw, 64px) clamp(20px, 3.5vw, 64px); min-height: min(84svh, 820px); background: var(--obsidian); }
.spot-media img { object-fit: cover; object-position: center 45%; }
.spot-text .eyebrow { color: var(--gold-text); }
.spot-text h2 { font-size: clamp(3rem, 2rem + 3.2vw, 5rem); }
.spot-lead { color: var(--ink-soft); }
.spot-options { border-top-color: var(--stone-line); }
.spot-options li { border-bottom-color: var(--stone-line); }
.spot-options span { color: var(--ink-soft); }
.spot-options a:hover span { color: var(--ink); }
.spot-options a:hover { background: #fff; }
.spot-cert { border-color: var(--stone-line); background: #fff; }
.spot-cert span { color: var(--ink-soft); }
.spot-cert b { color: var(--ink); }
.spot-actions .button.gold { background: var(--obsidian); border-color: var(--obsidian); color: var(--ivory); }
.spot-actions .button.gold::before { background: var(--gold); }
@media (hover: hover) and (pointer: fine) { .spot-actions .button.gold:hover { color: var(--obsidian); background: var(--obsidian); } }
@media (max-width: 1080px) { .spot-media { margin: 20px var(--pad) 0; min-height: 100vw; } }

/* Story: whole product visible in every image */
.story-media { background: var(--obsidian); }
.story-media img:not(.doc) { object-fit: contain; object-position: center; }

/* ===== v14 ===== */
/* Range reel: two slow rows of the real product photos */
.reel { padding: var(--section) 0; background: var(--ivory); overflow: hidden; }
.reel-head { text-align: center; max-width: 820px; }
.reel-head h2 { margin-top: 12px; font-size: clamp(2.5rem, 1.7rem + 2.8vw, 4.25rem); }
.reel-head p.soft { margin: 18px auto 0; max-width: 52ch; }
.reel-rows { display: grid; gap: 16px; margin-top: 64px; }
.reel-row { display: flex; width: max-content; }
.reel-row ul { list-style: none; margin: 0; padding: 0 8px 0 0; display: flex; gap: 16px; }
.reel-row li { width: clamp(150px, 13vw, 220px); flex: none; }
.reel-row a { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--obsidian-2); }
.reel-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.reel-row span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; background: linear-gradient(0deg, rgb(8 9 9 / .8), rgb(8 9 9 / 0)); color: var(--light); font-size: var(--t-xs); opacity: 0; transition: opacity 300ms ease; } /* taste-skill-ignore: label scrim */
@media (hover: hover) and (pointer: fine) { .reel-row a:hover img { transform: scale(1.05); } .reel-row a:hover span { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .reel-row { animation: reel 70s linear infinite; }
  .reel-row.rev { animation-direction: reverse; animation-duration: 80s; }
  .reel-rows:hover .reel-row { animation-play-state: paused; }
}
@keyframes reel { to { transform: translateX(-50%); } }
.reel-foot { display: flex; justify-content: center; margin-top: 56px; }
.reel-rows a { pointer-events: auto; }

/* Footer logo larger */
.foot-brand img { height: 76px; }
@media (max-width: 820px) { .foot-brand img { height: 60px; } }

/* ===== v15 ===== */
/* Cart in header */
.cart { display: inline-flex; align-items: center; gap: 10px; opacity: .9; transition: opacity 200ms; }
.cart:hover { opacity: 1; }
.cart-ico { position: relative; display: grid; place-items: center; width: 36px; height: 36px; }
.cart-badge { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--gold); color: var(--obsidian); font-size: .6875rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.cart-total { font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.cart-badge.bump { animation: bump 380ms var(--ease); }

/* Logo: docks into the header with one smooth transition */
.home .logo { transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }

/* Featured: one large card, four small */
.feat { padding: var(--section) 0; background: var(--ivory); }
.feat-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.feat-head h2 { margin-top: 10px; font-size: var(--t-h2); }
.ink-link { color: var(--ink); }
.feat-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 24px; }
.feat-card { display: flex; flex-direction: column; background: #fff; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.feat-card.big { grid-row: span 2; }
.feat-img { position: relative; display: block; flex: 1; min-height: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--obsidian-2); }
.feat-card.big .feat-img { aspect-ratio: auto; }
.feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transition: transform 900ms var(--ease); }
.feat-info { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 18px 20px 20px; }
.feat-info > span:first-child { display: grid; gap: 2px; }
.feat-info small { font-size: var(--t-xs); color: var(--ink-faint); }
.feat-info b { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums; }
.feat-card.big .feat-info b { font-size: 2.25rem; }
.feat-info em { font-style: normal; font-size: var(--t-xs); color: var(--ink-soft); }
.feat-price { display: grid; justify-items: end; gap: 4px; white-space: nowrap; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.feat-price i { font-style: normal; font-size: var(--t-xs); color: var(--gold-text); opacity: 0; transform: translateX(-6px); transition: opacity 300ms ease, transform 400ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .feat-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgb(20 18 15 / .08); } /* taste-skill-ignore: lifted card */
  .feat-card:hover .feat-img img { transform: scale(1.05); }
  .feat-card:hover .feat-price i { opacity: 1; transform: none; }
}
@media (hover: none) { .feat-price i { opacity: 1; transform: none; } }

/* Story: portrait product photos fill the column */
.story-media img, .story-media img:not(.doc) { object-fit: cover; object-position: center 58%; padding: 0; background: none; }

/* Product page: image fills its frame, thumbnails, cleaner info */
.pdp { grid-template-columns: 1.05fr .95fr; align-items: start; }
.pdp-gallery { position: sticky; top: 100px; display: grid; gap: 12px; }
.pdp-media { position: relative; top: auto; height: auto; max-height: calc(100svh - 200px); aspect-ratio: 2 / 3; width: auto; margin: 0 auto; background: var(--obsidian-2); overflow: hidden; }
.pdp-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; background: none; transition: opacity 300ms ease; }
.pdp-thumbs { display: flex; justify-content: center; gap: 10px; }
.pdp-thumbs button { width: 64px; height: 84px; padding: 0; border: 1px solid var(--stone); background: #fff; cursor: pointer; overflow: hidden; transition: border-color 200ms, transform 160ms var(--ease); }
.pdp-thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.pdp-thumbs button:active { transform: scale(.96); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pdp-sticky { top: 108px; }
.pdp-info h1 { font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); }
.pdp-price { font-size: 2.25rem; }
.buy-row > .button { min-height: 52px; font-size: var(--t-md); }
@media (max-width: 820px) { .pdp-gallery { position: static; } .pdp-media { max-height: none; width: 100%; } }
.pdp-media { width: 100%; max-width: calc((100svh - 200px) * 2 / 3); max-height: none; height: auto; }
@media (max-width: 820px) { .pdp-media { max-width: none; } }
.feat-img { aspect-ratio: 1 / 1; } .feat-card.big .feat-img { aspect-ratio: auto; } .feat-img img { object-position: center 66%; }

/* ===== v16: story images shown whole ===== */
.story { grid-template-columns: min(calc(100svh * 2 / 3), 52vw) 1fr; }
.story-media { height: 100svh; }
.story-media img, .story-media img:not(.doc) { object-fit: cover; object-position: center; }
@supports not (height: 100svh) { .story { grid-template-columns: min(66.6vh, 52vw) 1fr; } }
@media (max-width: 1080px) {
  .story { grid-template-columns: 1fr; }
  .story-media { height: auto; aspect-ratio: 2 / 3; max-height: 80svh; width: min(100%, calc(80svh * 2 / 3)); margin: 0 auto; position: relative; top: 0; }
}
@media (max-width: 1080px) { .feat-grid { grid-template-columns: 1fr 1fr; } .feat-card.big { grid-column: 1 / -1; grid-row: auto; } .feat-card.big .feat-img { aspect-ratio: 4 / 5; } }
@media (max-width: 560px) { .feat-grid { gap: 12px; } .feat-info { flex-direction: column; align-items: flex-start; padding: 14px; } .feat-price { justify-items: start; } .feat-info b { font-size: 1.25rem; } .feat-head { flex-direction: column; align-items: flex-start; } }

/* ===== v17: cart drawer ===== */
dialog.drawer { width: min(460px, 100vw); background: #fff; box-shadow: -24px 0 60px rgb(8 9 9 / .18); } /* taste-skill-ignore: overlay */
dialog.drawer::backdrop { background: rgb(8 9 9 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer[open] { animation: drawer-in 420ms cubic-bezier(.32, .72, 0, 1); }
@keyframes drawer-in { from { transform: translateX(100%); } }
.drawer-head { align-items: flex-start; padding: 28px 28px 20px; border-bottom: 0; }
.drawer-head h2 { font-size: 2rem; line-height: 1; }
.drawer-count { margin-top: 6px; font-size: var(--t-xs); color: var(--ink-faint); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--stone-line); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: transform 300ms var(--ease), border-color 200ms; }
.icon-btn:hover { border-color: var(--ink); transform: rotate(90deg); }
.drawer-ship { margin: 0 28px; padding: 14px 16px; background: var(--ivory); font-size: var(--t-xs); color: var(--ink-soft); }
.drawer-ship[hidden], .drawer-foot[hidden] { display: none; }
.drawer-ship .meter { margin-top: 10px; }
.lines { padding: 8px 28px 24px; gap: 0; }
.line { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--stone-line); }
.line:last-child { border-bottom: 0; }
.line-img { display: block; width: 80px; height: 100px; overflow: hidden; background: var(--obsidian-2); }
.line-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; transform: scale(1.15); transition: transform 500ms var(--ease); }
.line-img:hover img { transform: scale(1.22); }
.line-main { display: grid; gap: 4px; align-content: start; }
.line-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.line-name { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.15; font-variant-numeric: lining-nums; }
.line-top b { font-weight: 500; font-size: var(--t-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-opt { font-size: var(--t-xs); color: var(--ink-faint); }
.line-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.line .qty { margin-top: 0; border-color: var(--stone); }
.line .qty button { width: 32px; height: 32px; transition: background-color 150ms; }
.line .qty button:hover { background: var(--ivory); }
.line-remove { padding: 4px 0; border: 0; background: none; cursor: pointer; font-size: var(--t-xs); color: var(--ink-faint); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: transparent; transition: color 200ms, text-decoration-color 200ms; }
.line-remove:hover { color: var(--ink); text-decoration-color: currentColor; }
.lines .empty { display: grid; justify-items: center; gap: 8px; padding: 64px 0; text-align: center; color: var(--ink-soft); }
.lines .empty p { font-family: var(--serif); font-size: 1.75rem; color: var(--ink); }
.lines .empty .button { margin-top: 16px; }
.drawer-foot { padding: 20px 28px 24px; background: #fff; border-top: 1px solid var(--stone-line); gap: 8px; }
.drawer-foot .sum.total { margin: 6px 0 8px; font-size: 1.25rem; }
.drawer-foot .button { min-height: 54px; font-size: var(--t-md); }
.secure-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--t-xs); color: var(--ink-faint); }
.drawer-continue { min-height: 40px; border: 0; background: none; cursor: pointer; font-size: var(--t-sm); color: var(--ink-soft); }
.drawer-continue:hover { color: var(--ink); }

/* ===== v17: checkout ===== */
.co-page { background: #f6f4f0; }
.co-page .wrap { max-width: 1180px; }
.co-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; padding: 48px 0 32px; }
.co-top h1 { font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem); }
.co-steps { list-style: none; display: flex; gap: 0; margin: 0; padding: 0; font-size: var(--t-sm); color: var(--ink-faint); }
.co-steps li { display: flex; align-items: center; }
.co-steps li + li::before { content: ''; width: 40px; height: 1px; margin: 0 14px; background: var(--stone); }
.co-steps li.done { color: var(--ink-soft); }
.co-steps li[aria-current] { color: var(--ink); font-weight: 500; }
.checkout { grid-template-columns: 1fr 400px; gap: 32px; padding-top: 0; }
.co-main { display: grid; gap: 16px; }
.co-card { margin: 0; padding: 28px 28px 24px; border: 0; background: #fff; border-radius: 12px; }
.co-card legend { float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 0; font-family: var(--serif); font-size: 1.625rem; font-weight: 500; }
.co-card legend + * { clear: both; }
.co-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--obsidian); color: var(--ivory); font-family: var(--sans); font-size: .75rem; }
.co-card .fields { gap: 12px; }
/* Floating labels */
.fl { position: relative; }
.fl.full { grid-column: 1 / -1; }
.fl input, .fl select, .fl textarea { width: 100%; min-height: 56px; padding: 22px 14px 8px; border: 1px solid var(--stone); border-radius: 8px; background: #fff; color: var(--ink); font-size: var(--t-md); transition: border-color 200ms, box-shadow 200ms; -webkit-appearance: none; appearance: none; }
.fl textarea { min-height: 96px; padding-top: 26px; resize: vertical; }
.fl label { position: absolute; left: 15px; top: 17px; font-size: var(--t-md); color: var(--ink-faint); pointer-events: none; transform-origin: 0 0; transition: transform 200ms var(--ease), color 200ms; }
.fl label small { font-size: inherit; }
.fl input:focus, .fl select:focus, .fl textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(198 161 91 / .18); }
.fl input:focus + label, .fl input:not(:placeholder-shown) + label, .fl textarea:focus + label, .fl textarea:not(:placeholder-shown) + label, .fl.is-select label { transform: translateY(-9px) scale(.75); }
.fl.is-select select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23141413' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.fl input:user-invalid { border-color: #b4543a; }
.co-card .check { margin-top: 14px; }
.co-notes { margin-top: 14px; }
.co-notes summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-soft); list-style: none; }
.co-notes summary::-webkit-details-marker { display: none; }
.co-notes summary::before { content: '+ '; }
.co-notes[open] summary { margin-bottom: 12px; }
.co-ship { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding: 16px; border: 1px solid var(--ink); border-radius: 8px; font-size: var(--t-sm); }
.co-ship div { display: grid; }
.co-ship span { font-size: var(--t-xs); color: var(--ink-soft); }
.co-ship b { font-weight: 500; }
.pay-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 18px 16px; border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; }
.pay-opt input { width: 18px; height: 18px; accent-color: var(--obsidian); }
.pay-opt span { display: grid; }
.pay-opt b { font-weight: 500; }
.pay-opt small { font-size: var(--t-xs); color: var(--ink-soft); }
.pay-opt em { font-style: normal; font-size: var(--t-xs); padding: 4px 10px; border-radius: 20px; background: var(--ivory); }
.co-mobile-pay { display: none; margin-top: 20px; }
.co-side { padding: 0; border: 0; background: none; top: 104px; }
.co-side-inner { background: #fff; border-radius: 12px; padding: 28px; gap: 14px; }
.co-side-head { display: flex; justify-content: space-between; align-items: baseline; }
.co-side-head h2 { font-size: 1.625rem; }
.lines.compact { padding: 0; }
.lines.compact .line { grid-template-columns: 64px 1fr; padding: 14px 0; }
.lines.compact .line-img { width: 64px; height: 80px; }
.lines.compact .line-name { font-size: 1.0625rem; }
.lines.compact .line-ctl { margin-top: 6px; }
.lines.compact .empty { padding: 24px 0; }
.coupon summary { cursor: pointer; list-style: none; font-size: var(--t-sm); color: var(--ink-soft); padding: 4px 0; }
.coupon summary::-webkit-details-marker { display: none; }
.coupon summary::before { content: '+ '; }
.coupon-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.coupon-row .button { min-height: 56px; border-radius: 8px; }
.co-totals { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--stone-line); }
.co-totals .sum.total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--stone-line); font-size: 1.375rem; }
.co-totals .sum.total b { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; font-variant-numeric: lining-nums; }
.co-vat { text-align: right; font-size: var(--t-xs); color: var(--ink-faint); }
.co-side .button { min-height: 56px; border-radius: 8px; font-size: var(--t-md); }
.co-side .proto { font-size: var(--t-xs); text-align: center; }
@media (max-width: 960px) {
  .checkout { grid-template-columns: 1fr; }
  .co-side { position: static; order: -1; }
  .co-side .button[type="submit"] { display: none; }
  .co-mobile-pay { display: flex; }
  .co-card { padding: 22px 18px; }
}
@media (max-width: 560px) { .co-card .fields { grid-template-columns: 1fr; } .co-steps li + li::before { width: 20px; margin: 0 8px; } }

/* ===== v18: story text column uses its width ===== */
.story-steps .step { display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: clamp(32px, 4vw, 72px); padding: 0 clamp(32px, 6vw, 112px); }
.story-steps .step > * { transform: none; }
.step-text > * { transform: translateY(14px); transition: transform 700ms var(--ease); }
.story-steps .step.on .step-text > * { transform: none; }
.story-steps h2 { font-size: clamp(3.5rem, 2.2rem + 4vw, 6.5rem); }
.step-lead { max-width: 46ch; }
.step-facts { max-width: 600px; }
.step-pic { display: grid; gap: 4px; padding: 22px 22px 20px; border: 1px solid var(--line-dark); opacity: 0; transform: translateY(18px); transition: opacity 600ms ease 120ms, transform 700ms var(--ease) 120ms, border-color 250ms; }
.story-steps .step.on .step-pic { opacity: 1; transform: none; }
.step-pic small { font-size: var(--t-xs); color: var(--gold); }
.step-pic b { margin-top: 6px; font-family: var(--serif); font-size: 1.625rem; font-weight: 500; line-height: 1.1; font-variant-numeric: lining-nums; }
.step-pic span { font-size: var(--t-sm); color: var(--light-soft); }
.step-pic em { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-dark); font-style: normal; font-size: var(--t-sm); color: var(--light); display: flex; justify-content: space-between; }
.step-pic em i { font-style: normal; transition: transform 300ms var(--ease); }
.step-pic:hover { border-color: var(--gold); }
.step-pic:hover em i { transform: translateX(4px); }
@media (max-width: 1280px) { .story-steps .step { grid-template-columns: 1fr; align-content: center; } .step-pic { max-width: 320px; } }
.step-text { display: flex; flex-direction: column; } .step-text .dark-link { margin-top: 40px; }

/* v19 — checkout, modelled on the original: flat form + soft order panel */
.co2 { background: var(--ivory, #F5F1EA); padding-bottom: 96px; }
.co2 .page-top { padding-top: 132px; }
.co2-steps { list-style: none; display: flex; justify-content: center; gap: 0; margin: 0 0 40px; padding: 0; font: 500 .8125rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9a9389; }
.co2-steps li { display: flex; align-items: center; }
.co2-steps li + li::before { content: ""; width: 48px; height: 1px; background: #d6cec1; margin: 0 20px; }
.co2-steps a { color: inherit; text-decoration: none; transition: color .2s; }
.co2-steps a:hover { color: #080909; }
.co2-steps [aria-current] { color: #080909; }
.co2-steps [aria-current]::after { content: ""; }
.co2-coupon { max-width: 1240px; margin: 0 auto 40px; border-top: 1px solid #ddd5c8; border-bottom: 1px solid #ddd5c8; padding: 16px 0; font-size: .9375rem; color: #5d5850; }
.co2-coupon summary { cursor: pointer; list-style: none; }
.co2-coupon summary::-webkit-details-marker { display: none; }
.co2-coupon summary span { color: #8A6A2F; text-decoration: underline; text-underline-offset: 3px; }
.co2-coupon-row { display: flex; gap: 12px; margin-top: 16px; max-width: 520px; }
.co2-coupon-row input { flex: 1; }
.co2-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) 440px; gap: 72px; align-items: start; }
.co2 h2 { font-family: var(--sans); font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 24px; color: #080909; }
.co2-form h2 + .co2-fields { margin-top: 0; }
.co2-form h2:not(:first-child) { margin-top: 48px; }
.co2-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.cf { display: flex; flex-direction: column; gap: 8px; }
.cf.full { grid-column: 1 / -1; }
.cf label { font-size: .875rem; font-weight: 500; color: #242424; }
.cf label small { font-weight: 400; color: #8b857c; font-size: .8125rem; }
.req { color: #8A6A2F; text-decoration: none; }
.co2 input[type=text], .co2 input[type=email], .co2 input[type=tel], .co2 select, .co2 textarea {
  width: 100%; height: 48px; padding: 0 14px; font: 400 .9375rem var(--sans); color: #080909;
  background: #fff; border: 1px solid #ddd5c8; border-radius: 0; outline: none; transition: border-color .15s, box-shadow .15s; }
.co2 textarea { height: auto; padding: 12px 14px; resize: vertical; }
.co2 select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23080909' stroke-width='1.4'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.co2 #address2 { margin-top: 8px; }
.co2 input:hover, .co2 select:hover, .co2 textarea:hover { border-color: #b9ae9c; }
.co2 input:focus-visible, .co2 select:focus-visible, .co2 textarea:focus-visible { border-color: #080909; box-shadow: 0 0 0 3px rgba(198,161,91,.22); }
.co2 .was-validated :invalid { border-color: #a23b2a; }
.co2 ::placeholder { color: #a39c92; }
.co2-ship-diff { margin-top: 28px; }
.co2 .check { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; line-height: 1.5; color: #3a3631; cursor: pointer; }
.co2 .check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #080909; flex: none; }
.co2 .check a { color: #8A6A2F; }
.co2-review { position: sticky; top: 104px; }
.co2-review-in { background: #fff; border: 1px solid #e6dfd3; padding: 36px 36px 28px; }
.co2-table-head, .co2-row { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; }
.co2-table-head { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #8b857c; padding-bottom: 12px; border-bottom: 1px solid #ece6dc; }
.co2-items { list-style: none; margin: 0; padding: 0; }
.co2-items li { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid #ece6dc; font-size: .9375rem; }
.co2-items img { width: 56px; height: 70px; object-fit: cover; background: #f2eee7; }
.co2-item-name { display: flex; flex-direction: column; gap: 4px; }
.co2-item-name b { font-weight: 500; }
.co2-item-name small { color: #8b857c; font-size: .8125rem; }
.co2-items li > span:last-child { font-variant-numeric: tabular-nums; }
.co2-items .co2-empty { display: block; color: #5d5850; }
.co2-row { padding: 14px 0; border-bottom: 1px solid #ece6dc; color: #3a3631; font-variant-numeric: tabular-nums; }
.co2-row small { color: #8b857c; }
.co2-row.total { border-bottom: 0; padding-top: 18px; align-items: baseline; }
.co2-row.total span { font-weight: 600; }
.co2-row.total b { font-family: var(--serif); font-size: 1.875rem; font-weight: 500; font-variant-numeric: lining-nums; }
.co2-free { font-size: .8125rem; color: #8A6A2F; margin: 0 0 20px; }
.co2-free:empty { display: none; }
.co2-pay { background: #faf8f4; border: 1px solid #e6dfd3; padding: 18px 20px; margin-bottom: 20px; }
.co2-pay-head { display: flex; gap: 10px; align-items: center; font-size: .9375rem; }
.co2-pay-head input { accent-color: #080909; width: 16px; height: 16px; margin: 0; }
.co2-pay p { margin: 10px 0 0 26px; font-size: .8125rem; line-height: 1.55; color: #6b655c; }
.co2-review .check + .check { margin-top: 12px; }
.co2-pay-btn { margin-top: 24px; height: 56px; width: 100%; letter-spacing: .14em; }
.co2-note { margin: 20px 0 0; font-size: .8125rem; line-height: 1.6; color: #6b655c; }
.co2-secure { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #ece6dc; font-size: .75rem; color: #8b857c; }
@media (max-width: 960px) {
  .co2-grid { grid-template-columns: 1fr; gap: 48px; }
  .co2-review { position: static; }
}
@media (max-width: 560px) {
  .co2 .page-top { padding-top: 104px; }
  .co2-fields { grid-template-columns: 1fr; }
  .co2-steps { font-size: .6875rem; letter-spacing: .1em; }
  .co2-steps li + li::before { width: 20px; margin: 0 10px; }
  .co2-review-in { padding: 24px 20px; }
  .co2-coupon-row { flex-direction: column; }
}

/* v20 — FAQ: heading left, answers right */
.faq-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq-side h2 { font-size: var(--t-h2); margin: 0 0 20px; }
.faq-side p { max-width: 40ch; }
.faq-side a { color: var(--gold-ink, #8A6A2F); }
.faq-list .qa summary { font-size: 1.0625rem; padding: 6px 0; }
.faq-list .qa p { margin: 0 0 24px; max-width: 62ch; color: var(--ink); }
.faq-list .qa a { color: #8A6A2F; }
@media (max-width: 860px) { .faq-in { grid-template-columns: 1fr; } .faq-side { position: static; } }
.pdp-about { margin: 20px 0 4px; max-width: 52ch; font-size: .9375rem; line-height: 1.6; color: var(--ink); }
.pdp-info { min-width: 0; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }
.faq-side a[href^="mailto"] { white-space: nowrap; }

/* v21 — phone menu */
.menu-btn { display: none; width: 44px; height: 44px; margin-right: 4px; place-content: center; gap: 6px; color: inherit; background: none; border: 0; cursor: pointer; }
.menu-btn span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 180ms var(--ease); }
.menu-btn:active span { transform: scaleX(.8); }
@media (max-width: 820px) { .menu-btn { display: grid; } }
dialog.menu { margin: 0; width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; padding: 0; border: 0; background: var(--obsidian); color: var(--light); }
dialog.menu[open] { display: flex; flex-direction: column; animation: menu-in 320ms var(--ease); }
dialog.menu::backdrop { background: transparent; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes menu-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.menu-head { display: flex; justify-content: space-between; align-items: center; height: 68px; padding: 0 20px; }
.menu-logo img { height: 42px; width: auto; }
.menu-close { color: var(--light); width: 44px; height: 44px; }
.menu-links { display: flex; flex-direction: column; padding: 32px 20px 0; }
.menu-links a { font-family: var(--serif); font-size: 2.5rem; line-height: 1; padding: 14px 0; letter-spacing: -0.02em; animation: menu-up 420ms var(--ease) both; }
.menu-links a:nth-child(2) { animation-delay: 40ms; } .menu-links a:nth-child(3) { animation-delay: 80ms; }
.menu-links a:nth-child(4) { animation-delay: 120ms; } .menu-links a:nth-child(5) { animation-delay: 160ms; }
.menu-links a:active { color: var(--gold); }
.menu-foot { margin-top: auto; display: grid; gap: 14px; padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); font-size: 1rem; color: rgb(245 241 234 / .72); }
@media (prefers-reduced-motion: reduce) { dialog.menu[open], .menu-links a { animation: none; opacity: 1; } }

/* v22 — premium pass: calmer hero, legible small text, fewer lines, consistent motion */
:root { --ink-faint: #6e695f; --t-sm: 1rem; --d-fast: 180ms; --d-ui: 300ms; --d-big: 600ms; }
/* Hero: deeper, even scrim where the words sit so the photo stays a backdrop */
.hero::after { background: radial-gradient(ellipse 60% 55% at 50% 56%, rgb(8 9 9 / .74) 0%, rgb(8 9 9 / .5) 55%, rgb(8 9 9 / .28) 100%); } /* taste-skill-ignore: legibility scrim */
.hero h1 { letter-spacing: -0.02em; }
h1, h2, .serif { letter-spacing: -0.015em; }
/* Filters: plain tabs with an underline instead of boxes */
.filters { gap: 28px; }
.filters button { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-faint); font-size: var(--t-sm); position: relative; transition: color var(--d-fast) ease; }
.filters button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--d-ui) var(--ease); }
.filters button[aria-pressed="true"] { background: none; color: var(--ink); }
.filters button[aria-pressed="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .filters button:hover { color: var(--ink); border-color: transparent; } }
/* Certificate preview: no drop shadow, the page sits on its tone */
.preview-stage img { box-shadow: none; }
/* Story "pictured" card: filled surface, no outline */
.step-pic { border: 0; background: rgb(245 241 234 / .05); }
/* Press feedback on everything pressable */
.button, .filters button, .opt span, .stepper button, .icon-btn, .menu-btn, .report-row, .pc a, .feat a, .step-pic { -webkit-tap-highlight-color: transparent; }
.button, .stepper button, .icon-btn { transition: transform 140ms var(--ease), background-color var(--d-fast) ease, color var(--d-fast) ease, border-color var(--d-fast) ease; }
.button:active, .stepper button:active, .icon-btn:active { transform: scale(.97); }
.pc a:active .pc-img, .feat a:active img { transform: scale(.985); transition: transform 140ms var(--ease); }
/* Phone buy bar */
.buybar { display: none; }
@media (max-width: 820px) {
  .buybar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; transform: translateY(105%); transition: transform var(--d-ui) var(--ease); }
  .buybar.on { transform: none; }
  .buybar span { display: grid; min-width: 0; }
  .buybar b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar small { color: var(--ink-faint); font-size: .875rem; }
  .buybar .button { flex: none; min-height: 48px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
.feat + .collection { padding-top: calc(var(--section) * .45); }
.menu .menu-close { background: transparent; border: 1px solid rgb(245 241 234 / .25); border-radius: 50%; color: var(--light); }

/* v23 — lab rows: shift only while hovered; the chosen certificate stays in the preview */
.report-row, .report-row.active { padding-left: 0; transition: none; }
.report-row > * { transition: transform 280ms var(--ease); }
.report-row::before { width: 20px; transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease); }
.report-row.active::before { width: 20px; }
.report-row.active h3 { color: inherit; }
.report-row h3 { transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .report-row:hover > * { transform: translateX(32px); }
  .report-row:hover > .text-link { transform: none; }
  .report-row:hover::before { transform: scaleX(1); }
  .report-row:hover h3 { color: var(--gold-text); }
}
.report-row:focus-visible > * { transform: translateX(32px); }
.report-row:focus-visible > .text-link { transform: none; }
.report-row:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .report-row > *, .report-row::before { transition: none; } }

/* v24 — lab section: the certificate fills its own column, no empty frame around it */
.wrap.quality { max-width: 1400px; }
.quality { grid-template-columns: auto minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.quality-side { position: sticky; top: 104px; }
.preview { margin: 0; padding: 0; background: none; overflow: visible; }
.preview-stage { height: min(calc(100svh - 200px), 700px); width: auto; aspect-ratio: 1388 / 2048; background: var(--ivory); overflow: hidden; }
.preview-stage img { inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; filter: none; }
.preview-cap { padding: 18px 0 0; }
.quality-main h2 { font-size: var(--t-h2); margin: 0; }
.quality-intro { margin: 20px 0 48px; max-width: 52ch; }
@media (max-width: 1080px) { .quality { grid-template-columns: 1fr; } .quality-side { display: none; } }
.preview-stage { padding: 14px; box-sizing: border-box; } .preview-stage img { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
/* v25 — no cream mat: the white report sits on the white section, lifted by a soft neutral shadow instead of a frame */
.preview-stage { padding: 0; background: none; overflow: visible; }
.preview-stage img { inset: 0; width: 100%; height: 100%; }
.preview-stage img.on { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 16px 40px -12px rgb(0 0 0 / .16); } /* taste-skill-ignore: paper sheet edge */