/* ====================================================================
   STAGR storefront stylesheet: the design's base.css (build/base.css).
   Page-specific CSS lives in css/pages/*.css, one per design page module.
   ==================================================================== */
/* ==========================================================================
   STAGR — base stylesheet v2 (bone / ink system, Söhne + Tiempos)
   Inlined into every page by build/build.py. Mobile-first.
   ========================================================================== */

@font-face { font-family: "Söhne"; src: url(/assets/fonts/soehne-buch.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Söhne"; src: url(/assets/fonts/soehne-buch-kursiv.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Söhne"; src: url(/assets/fonts/soehne-kraftig.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Söhne"; src: url(/assets/fonts/soehne-halbfett.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Söhne"; src: url(/assets/fonts/soehne-extrafett.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Söhne Breit"; src: url(/assets/fonts/soehne-breit-extrafett.woff2) format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url(/assets/fonts/tiempos-headline-light.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Headline"; src: url(/assets/fonts/tiempos-headline-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url(/assets/fonts/tiempos-text-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tiempos Text"; src: url(/assets/fonts/tiempos-text-regular-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Local fallbacks sized to the web fonts' measured widths and vertical metrics, so a late font swap moves text as little as possible (CLS). */
@font-face { font-family: "Söhne Fallback"; src: local("Arial"); size-adjust: 99.1%; ascent-override: 118.2%; descent-override: 42.7%; line-gap-override: 0%; }
@font-face { font-family: "Söhne Breit Fallback"; src: local("Arial Black"); size-adjust: 105.5%; ascent-override: 98.3%; descent-override: 27.4%; line-gap-override: 0%; }
@font-face { font-family: "Tiempos Headline Fallback"; src: local("Times New Roman"); size-adjust: 105.3%; ascent-override: 91.4%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "Tiempos Text Fallback"; src: local("Times New Roman"); size-adjust: 115.5%; ascent-override: 83.3%; descent-override: 21.6%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  --bone: #EFEDE6;
  --ink: #1A1B1D;
  --mist: #6A6965;
  --line: rgba(26, 27, 29, .12);
  --line-strong: rgba(26, 27, 29, .3);
  --accent: #C58B4A;        /* saddle tan: the one accent, used like the reference's pale blue */
  --accent-deep: #8B4A1F;   /* cognac */
  --oxblood: #5C1F1F;
  --tan: #D9B07A;
  --bg: var(--bone);
  --fg: var(--ink);
  --fg-2: var(--mist);
  --surface: #F6F4EE;
  --focus: #B5702E;
  --success: #2F6B3A;
  --error: #A32D2D;

  --font-sans: "Söhne", "Söhne Fallback", "Inter", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Söhne Breit", "Söhne Breit Fallback", "Söhne", "Arial Black", sans-serif;
  --font-display: "Tiempos Headline", "Tiempos Headline Fallback", "Times New Roman", Georgia, serif;
  --font-serif: "Tiempos Text", "Tiempos Text Fallback", "Times New Roman", Georgia, serif;

  --nav-h: 72px;
  --nav-top: 72px;
  --gutter: clamp(20px, 1rem + 3.4vw, 64px);
  --max: 1440px;
  --section: clamp(96px, 7rem + 5vw, 180px);
  --section-sm: clamp(64px, 4rem + 3vw, 120px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
@media (max-width: 767px) { :root { --gutter: 14px; } }
:root[data-theme="dark"] {
  --bg: var(--ink);
  --fg: var(--bone);
  --fg-2: #A9A7A0;
  --line: rgba(239, 237, 230, .14);
  --line-strong: rgba(239, 237, 230, .32);
  --surface: #232426;
  --focus: #E0B377;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: var(--ink); --fg: var(--bone); --fg-2: #A9A7A0; --line: rgba(239, 237, 230, .14); --line-strong: rgba(239, 237, 230, .32); --surface: #232426; --focus: #E0B377; color-scheme: dark; }
}
.on-ink { --bg: var(--ink); --fg: var(--bone); --fg-2: rgba(239, 237, 230, .6); --line: rgba(239, 237, 230, .14); --line-strong: rgba(239, 237, 230, .35); --surface: #232426; background: var(--bg); color: var(--fg); }
.on-bone { --bg: var(--bone); --fg: var(--ink); --fg-2: var(--mist); --line: rgba(26, 27, 29, .12); --line-strong: rgba(26, 27, 29, .3); --surface: #F6F4EE; background: var(--bg); color: var(--fg); }

/* ---------- reset ---------- */
*, *::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-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; min-height: 100%; display: flex; flex-direction: column; }
main { flex: 1; display: flex; flex-direction: column; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
address { font-style: normal; }
::selection { background: var(--accent); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--gutter); top: -100px; z-index: 1000; background: var(--ink); color: var(--bone); padding: 12px 18px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
@media (max-width: 767px) { .desk-only { display: none !important; } }
@media (min-width: 768px) { .mob-only { display: none !important; } }

/* ---------- typography ---------- */
.wordmark { font-family: var(--font-wordmark); font-weight: 800; letter-spacing: -.03em; line-height: .8; text-transform: uppercase; }
.wordmark .dot { display: inline-block; width: .22em; height: .22em; background: var(--accent); margin-left: .06em; vertical-align: baseline; }
.display { font-family: var(--font-display); font-weight: 300; letter-spacing: -.015em; line-height: 1.02; }
.h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; }
.h4 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); line-height: 1.25; }
.serif { font-family: var(--font-serif); }
.serif-i { font-family: var(--font-serif); font-style: italic; }
.lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.6; color: var(--fg-2); max-width: 40em; text-wrap: pretty; }
.body { font-size: 1rem; line-height: 1.65; max-width: 46ch; text-wrap: pretty; }
.small { font-size: .875rem; line-height: 1.5; }
.muted { color: var(--fg-2); }
.label { font-family: var(--font-sans); font-size: .875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--fg-2); }
.label b, .label strong { color: var(--fg); font-weight: 500; }
.label .slash { margin: 0 .5em; opacity: .4; }
.num { font-family: var(--font-display); font-weight: 400; font-variant-numeric: tabular-nums; }
.rule { height: 1px; width: 72px; background: var(--accent); }
.link { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.link:hover { color: var(--accent-deep); }
.nav-underline { position: relative; }
.nav-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.nav-underline:hover::after, .nav-underline:focus-visible::after, .nav-underline.is-active::after { transform: scaleX(1); transform-origin: left; }
.price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.price s { color: var(--fg-2); margin-left: .45em; font-size: .85em; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: clamp(16px, 2vw, 32px); }
.col-12 { grid-column-start: auto; grid-column-end: span 12; }
@media (min-width: 768px) { .md\:col-4 { grid-column-end: span 4; } .md\:col-5 { grid-column-end: span 5; } .md\:col-6 { grid-column-end: span 6; } .md\:col-7 { grid-column-end: span 7; } .md\:col-8 { grid-column-end: span 8; } .md\:start-7 { grid-column-start: 7; } }
@media (min-width: 1024px) { .lg\:col-3 { grid-column-end: span 3; } .lg\:col-4 { grid-column-end: span 4; } .lg\:col-5 { grid-column-end: span 5; } .lg\:col-6 { grid-column-end: span 6; } .lg\:col-7 { grid-column-end: span 7; } .lg\:col-8 { grid-column-end: span 8; } .lg\:start-2 { grid-column-start: 2; } .lg\:start-7 { grid-column-start: 7; } .lg\:start-8 { grid-column-start: 8; } }
.section { padding-block: var(--section); }
.section-sm { padding-block: var(--section-sm); }
.between { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stack > * + * { margin-top: var(--stack, 1rem); }

/* ---------- media ---------- */
.media { position: relative; overflow: hidden; background: rgba(26, 27, 29, .045); aspect-ratio: var(--ar, 4 / 5); }
.media > img, .media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-1 { --ar: 1; } .ar-45 { --ar: 4 / 5; } .ar-34 { --ar: 3 / 4; } .ar-32 { --ar: 3 / 2; } .ar-169 { --ar: 16 / 9; } .ar-21 { --ar: 21 / 9; }

/* product cutout on a bloom */
.cut { position: relative; display: grid; place-items: center; }
.cut img { position: relative; z-index: 1; width: var(--cut-w, 80%); height: auto; max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(26, 27, 29, .22)); transform: translateZ(0); }
.bloom { position: absolute; inset: 0; margin: auto; width: var(--bloom-s, 60vh); height: var(--bloom-s, 60vh); border-radius: 50%; pointer-events: none; opacity: .85; filter: blur(6px); background: radial-gradient(circle, var(--bloom, #D9B07A) 0%, color-mix(in srgb, var(--bloom, #D9B07A) 80%, transparent) 20%, color-mix(in srgb, var(--bloom, #D9B07A) 40%, transparent) 45%, color-mix(in srgb, var(--bloom, #D9B07A) 12%, transparent) 65%, transparent 80%); }
.ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-wordmark); font-weight: 800; font-size: clamp(14rem, 44vh, 30rem); line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(26, 27, 29, .18); pointer-events: none; white-space: nowrap; }
.on-ink .ghost { -webkit-text-stroke-color: rgba(239, 237, 230, .14); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--ink); color: var(--bone); border: 1px solid var(--ink); font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease-out), opacity .3s ease; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bone); }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.on-ink .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.on-ink .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.on-ink .btn--ghost { background: transparent; color: var(--bone); border-color: rgba(239, 237, 230, .35); }
.on-ink .btn--ghost:hover { background: var(--bone); color: var(--ink); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .75rem; }
.btn--text { background: none; border: 0; padding: 0; min-height: 0; color: var(--fg); gap: 8px; border-radius: 0; }
.btn--text:hover { background: none; color: var(--accent-deep); }
.btn--text svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.btn--text:hover svg { transform: translateX(4px); }
.btn--wide { width: 100%; }
.btn .arrow { width: 14px; height: 14px; }
.btn.is-added { background: var(--success); border-color: var(--success); color: #fff; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: inherit; transition: background-color .3s ease; }
.icon-btn:hover { background: rgba(127, 127, 127, .14); }
.icon-btn svg { width: 20px; height: 20px; }
[data-magnetic] { will-change: transform; }

/* ---------- forms ---------- */
.field { display: grid; gap: 8px; }
.field > label { font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: 10px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; color: var(--fg); font-size: 1rem; transition: border-color .3s ease; }
.input::placeholder, .textarea::placeholder { color: var(--fg-2); }
.input:focus, .select:focus, .textarea:focus { border-bottom-color: var(--fg); outline: none; }
.textarea { min-height: 100px; resize: vertical; }
.input-row { display: flex; gap: 16px; align-items: flex-end; }
.input-row .input { flex: 1; }

/* ---------- pills / chips ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); opacity: .8; transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease; }
.pill:hover { opacity: 1; border-color: var(--fg); }
.pill[aria-pressed="true"], .pill.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); opacity: 1; }
.pill .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 10px; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.chip::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.tag--solid { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* option choosers (colour / size) */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.opt:hover { border-color: var(--fg); }
.opt:has(input:checked) { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.opt.is-out { opacity: .4; text-decoration: line-through; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; height: 40px; }
.qty button { width: 36px; height: 100%; display: grid; place-items: center; color: var(--fg-2); }
.qty button:hover { color: var(--fg); }
.qty span { min-width: 28px; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; }

/* spec rows */
.spec { border-top: 1px solid var(--line); }
.spec > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .875rem; }
.spec dt { color: var(--fg-2); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.spec dd { text-align: right; }
.spec .num { font-size: 1.05rem; }

/* ---------- product card (shop) ---------- */
.pcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); padding: clamp(18px, 2vw, 28px); min-height: 100%; }
.on-ink .pcard { background: rgba(239, 237, 230, .04); }
.pcard-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; transition: transform .5s var(--ease-out); }
.pcard-quick { position: absolute; top: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); z-index: 2; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--bg); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s var(--ease-out), background-color .3s ease, color .3s ease; }
.pcard:hover .pcard-quick, .pcard:focus-within .pcard-quick { opacity: 1; transform: none; }
.pcard-quick:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: none) { .pcard-quick { opacity: 1; transform: none; } }
.dotc { color: var(--accent); }
.pcard:hover .pcard-media { transform: translateY(-6px); }
.pcard-media .bloom { --bloom-s: 72%; opacity: .7; }
.pcard-media img { position: relative; z-index: 1; width: 78%; height: auto; max-height: 86%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(26, 27, 29, .18)); transition: transform .6s var(--ease-out), opacity .4s ease; }
.pcard-media img.alt { position: absolute; opacity: 0; }
.pcard.has-alt:hover .pcard-media img.main { opacity: 0; }
.pcard.has-alt:hover .pcard-media img.alt { opacity: 1; }
.pcard-media img.alt { position: absolute; inset: 0; margin: auto; }
.pcard--compact { padding: clamp(14px, 1.6vw, 20px); }
.pcard--compact .pcard-media { aspect-ratio: 5 / 4; }
.pcard--compact .pcard-media img { width: 70%; }
.pcard--compact .pcard-head { margin-top: 14px; }
.pcard--compact .pcard-name { font-size: 1.35rem; }
.pcard--compact .pcard-opts { margin-top: 12px; }
.pcard--compact .pcard-foot { padding-top: 14px; grid-template-columns: 1fr auto; align-items: end; }
.pcard--compact .pcard-price { border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcard--compact .pcard-price .num { font-size: 1.25rem; }
.pcard--compact .pcard-price > span { display: flex; flex-direction: column; white-space: nowrap; }
.pcard--compact .pcard-price s { margin-left: 0 !important; }
/* horizontal rail of cards, one screen at a time */
.rail { position: relative; }
.rail-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.rail-track::-webkit-scrollbar { display: none; }
.rail-track > * { flex: 0 0 var(--rail-w, 78vw); scroll-snap-align: start; min-height: 0; }
.rail-nav { display: flex; gap: 8px; }
.rail-btn { width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; color: var(--fg); transition: background-color .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease; }
.rail-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rail-btn[disabled] { opacity: .3; pointer-events: none; }
.rail-btn svg { width: 16px; height: 16px; }
.rail-dots { display: flex; gap: 6px; }
.rail-dots i { width: 18px; height: 2px; background: var(--line-strong); transition: background-color .3s ease; }
.rail-dots i.is-on { background: var(--fg); }
.pcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; }
.pcard-num { font-family: var(--font-wordmark); font-weight: 800; font-size: .875rem; letter-spacing: -.01em; }
.pcard-name { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; line-height: 1.1; margin-top: 6px; }
.pcard-sub { font-family: var(--font-serif); font-style: italic; color: var(--fg-2); margin-top: 4px; }
.pcard-copy { font-size: .875rem; color: var(--fg-2); margin-top: 12px; }
.pcard-opts { margin-top: 16px; }
.pcard-foot { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.pcard-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.pcard-price .num { font-size: 1.5rem; }
.pcard-price .cur { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); margin-left: .4em; }
.pcard-link { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); display: inline-flex; gap: 8px; align-items: center; }
.pcard-link:hover { color: var(--fg); }

/* ---------- accordion ---------- */
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 1rem; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .plus { position: relative; width: 12px; height: 12px; flex: none; }
.acc summary .plus::before, .acc summary .plus::after { content: ""; position: absolute; background: var(--fg); transition: transform .35s var(--ease-out), opacity .3s ease; }
.acc summary .plus::before { left: 0; right: 0; top: 5.5px; height: 1px; }
.acc summary .plus::after { top: 0; bottom: 0; left: 5.5px; width: 1px; }
.acc details[open] summary .plus::after { transform: rotate(90deg); opacity: 0; }
.acc .acc-body { padding: 0 0 20px; color: var(--fg-2); max-width: 60ch; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee .track { display: flex; width: max-content; align-items: baseline; will-change: transform; }
.marquee .track > span { padding-right: clamp(28px, 4vw, 64px); }
.marquee .outline { color: transparent; -webkit-text-stroke: 1px currentColor; }

/* ---------- top bar: scrolls away, the nav sits beneath it ---------- */
.topbar { position: relative; z-index: 51; background: var(--accent-deep); color: var(--bone); font-size: .8125rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--bone); }
.topbar-badge { display: inline-grid; place-items: center; padding: 3px 9px; border-radius: 4px; background: var(--accent); color: var(--ink); font-weight: 600; font-size: .75rem; letter-spacing: .02em; }
.topbar-note { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.topbar-note svg, .topbar-contact svg { width: 16px; height: 16px; flex: 0 0 auto; }
.topbar-dot { margin: 0 4px; opacity: .6; }
.topbar-contact { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--bone); }
.topbar-contact:hover, .topbar-brand:hover { color: var(--accent); }
@media (max-width: 767px) { .topbar-inner { justify-content: center; min-height: 36px; font-size: .75rem; } .topbar-brand, .topbar-contact { display: none; } .topbar-note { text-align: center; } }
/* ---------- nav (one line + mega panels) ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color .35s ease, border-color .35s ease, transform .5s var(--ease-out); border-bottom: 1px solid transparent; color: var(--fg); }
.nav.is-solid, .nav.is-mega { background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: var(--line); }
.nav.on-dark:not(.is-solid):not(.is-mega) { color: var(--bone); }
.nav .nav-top { height: var(--nav-top); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nav .brand { font-family: var(--font-wordmark); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; display: inline-flex; align-items: baseline; justify-self: center; }
.nav .brand .dot { display: inline-block; width: .3em; height: .3em; background: var(--accent); margin-left: .12em; }
.nav .right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.nav .nav-contact { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); transition: color .3s ease; }
.nav .nav-contact:hover { color: var(--fg); }
.nav .burger { display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; justify-self: start; }
.nav .burger i { display: block; width: 20px; height: 1.5px; background: currentColor; }
@media (min-width: 1024px) { .nav .burger { display: none; } }
@media (max-width: 1023px) { .nav .nav-main, .nav .nav-contact { display: none !important; } }
.nav .nav-main { display: flex; justify-content: flex-start; gap: 32px; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
.nav .nav-main > li { position: relative; display: flex; align-items: center; height: var(--nav-top); }
.nav .nav-main a { color: var(--fg-2); transition: color .3s ease; padding: 4px 0; }
.nav .nav-main a:hover, .nav .nav-main a.is-active, .nav .nav-main li.is-open a { color: var(--fg); }
.nav .nav-main .nav-underline::after { bottom: -2px; height: 2px; background: var(--accent-deep); }
.nav.on-dark:not(.is-solid):not(.is-mega) .nav-contact, .nav.on-dark:not(.is-solid):not(.is-mega) .nav-main a { color: rgba(239,237,230,.75); }
.nav.on-dark:not(.is-solid):not(.is-mega) .nav-main a:hover, .nav.on-dark:not(.is-solid):not(.is-mega) .nav-contact:hover { color: var(--bone); }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: var(--bone); font-size: 10px; font-weight: 500; display: grid; place-items: center; transform: scale(0); transition: transform .3s var(--ease-out); }
.nav.on-dark:not(.is-solid):not(.is-mega) .cart-count { background: var(--bone); color: var(--ink); }
.cart-count.is-on { transform: scale(1); }
/* mega panel */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(26,27,29,.25); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .4s var(--ease-out), visibility 0s linear .3s; padding: 20px 0 28px; }
.mega.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
@media (max-width: 1023px) { .mega { display: none; } }
.mega-tabs { display: flex; justify-content: center; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.mega-tabs button { position: relative; padding: 12px 18px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); transition: color .3s ease; }
.mega-tabs button + button::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.mega-tabs button::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; background: var(--accent-deep); transform: scaleX(0); transition: transform .35s var(--ease-out); }
.mega-tabs button[aria-selected="true"] { color: var(--fg); }
.mega-tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.mega-row { display: flex; justify-content: center; gap: clamp(16px, 2vw, 32px); flex-wrap: wrap; }
.mega-item { display: grid; justify-items: center; gap: 12px; width: 132px; text-align: center; }
.mega-thumb { width: 132px; height: 132px; display: flex; align-items: center; justify-content: center; background: rgba(26,27,29,.045); transition: background-color .3s ease; }
.mega-thumb img { width: auto; height: auto; max-width: 84%; max-height: 84%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(26,27,29,.18)); transition: transform .5s var(--ease-out); }
.mega-item:hover .mega-thumb { background: rgba(26,27,29,.08); }
.mega-item:hover .mega-thumb img { transform: translateY(-4px) scale(1.04); }
.mega-name { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.mega-item:hover .mega-name { color: var(--fg); }
.mega-links { gap: 12px 40px; }
.mega-links a { font-family: var(--font-display); font-weight: 300; font-size: 1.25rem; text-decoration: none; }
.mega-links a:hover { color: var(--accent-deep); }
.mega-all { text-align: center; margin-top: 28px; font-family: var(--font-serif); font-size: 1rem; }
.mega-all .link { text-underline-offset: .3em; }

/* fullscreen menu */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--bg); color: var(--fg); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; display: grid; grid-template-rows: var(--nav-h) 1fr auto; padding: 0 var(--gutter) 32px; }
.menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-links { align-self: center; display: grid; gap: 6px; }
.menu-link { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 2rem + 4vw, 5rem); line-height: 1.08; letter-spacing: -.015em; display: inline-flex; align-items: baseline; gap: 18px; opacity: 0; transform: translateY(18px); }
.menu.is-open .menu-link { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s var(--ease-out); }
.menu.is-open .menu-link:nth-child(1) { transition-delay: .08s; } .menu.is-open .menu-link:nth-child(2) { transition-delay: .14s; } .menu.is-open .menu-link:nth-child(3) { transition-delay: .2s; } .menu.is-open .menu-link:nth-child(4) { transition-delay: .26s; } .menu.is-open .menu-link:nth-child(5) { transition-delay: .32s; }
.menu-link sup { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .14em; color: var(--accent); font-weight: 500; }
.menu-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.menu-sub a { display: block; padding: 4px 0; color: var(--fg-2); }
.menu-sub .label { margin-bottom: 8px; }
@media (min-width: 1024px) { .menu-sub { display: none; } }
.menu { grid-template-rows: var(--nav-top) 1fr auto auto; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; font-size: .875rem; color: var(--fg-2); }

/* ---------- cursor ---------- */
.cursor { position: fixed; inset: 0; z-index: 200; pointer-events: none; display: none; }
/* custom cursor disabled: the native cursor is used everywhere */
.cursor .ring { position: absolute; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); mix-blend-mode: difference; display: grid; place-items: center; opacity: 0; }
.cursor .ring span { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); opacity: 0; white-space: nowrap; }
.cursor .dot { position: absolute; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--accent); opacity: 0; }

/* ---------- cart drawer ---------- */
.cart-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(26, 27, 29, .35); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(100%, 440px); background: var(--bone); color: var(--ink); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .55s var(--ease-out); border-left: 1px solid var(--line); }
.cart.is-open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.cart-head .t { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; }
.cart-body { flex: 1; overflow-y: auto; padding: 0 24px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 64px 24px; height: 100%; }
.cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-item .thumb { position: relative; flex: none; width: 64px; height: 76px; border: 1px solid var(--line); background: rgba(26,27,29,.03); display: grid; place-items: center; overflow: hidden; }
.cart-item .thumb img { width: 88%; height: auto; max-height: 90%; object-fit: contain; position: relative; z-index: 1; }
.cart-item .thumb .bloom { --bloom-s: 90%; opacity: .6; }
.cart-item .ci-name { font-family: var(--font-display); font-weight: 300; font-size: 1.05rem; line-height: 1.2; }
.cart-item .ci-meta { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-top: 4px; }
.cart-item .ci-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.cart-item .ci-remove { font-size: .75rem; color: var(--mist); }
.cart-item .ci-remove:hover { color: var(--ink); }
.cart-foot { padding: 18px 24px 28px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.ship-bar { height: 2px; background: var(--line); overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: var(--accent-deep); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-out); }

/* checkout dialog */
.checkout { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(26, 27, 29, .55); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.checkout.is-open { opacity: 1; pointer-events: auto; }
.checkout-panel { position: relative; width: 100%; max-width: 460px; background: var(--bone); color: var(--ink); padding: clamp(24px, 4vw, 40px); text-align: center; transform: translateY(12px); transition: transform .45s var(--ease-out); display: grid; gap: 16px; }
.checkout.is-open .checkout-panel { transform: none; }
.checkout-panel .close { position: absolute; top: 10px; right: 10px; }
.checkout-panel .order { text-align: left; font-size: .875rem; border-top: 1px solid var(--line); }
.checkout-panel .order div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--bone); color: var(--ink); }
.loader .pills { position: absolute; inset: 0; }
.loader .pop { position: absolute; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--bone); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; opacity: 0; }
.loader .pop.light { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.loader .pop::before { content: ""; width: 6px; height: 6px; background: var(--accent); }
.loader .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: baseline; }
.loader .word { font-family: var(--font-wordmark); font-weight: 800; font-size: clamp(44px, 6vw, 72px); letter-spacing: -.03em; line-height: 1; color: transparent; background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 0%, rgba(26,27,29,.12) 0%); -webkit-background-clip: text; background-clip: text; }
.loader .ldot { display: inline-block; width: .22em; height: .22em; font-size: clamp(44px, 6vw, 72px); background: var(--accent); margin-left: .08em; opacity: 0; }
.loader .count { position: absolute; left: var(--gutter); bottom: 32px; font-size: 12px; letter-spacing: .24em; color: var(--mist); font-variant-numeric: tabular-nums; }
.loader .skip-btn { position: absolute; right: var(--gutter); bottom: 28px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); padding: 8px; }
.loader .skip-btn:hover { color: var(--ink); }
html.no-loader .loader { display: none; }

/* page fade (cross-page) */
.fade { position: fixed; inset: 0; z-index: 90; background: var(--bone); opacity: 0; pointer-events: none; }
html.is-entering .fade { opacity: 1; }

/* ---------- scroll hint ---------- */
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-hint .t { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--fg-2); }
.scroll-hint .mouse { position: relative; width: 22px; height: 38px; border: 1px solid var(--line-strong); border-radius: 11px; }
.scroll-hint .mouse i { position: absolute; left: 50%; top: 7px; width: 5px; height: 5px; margin-left: -2.5px; background: var(--accent); opacity: 0; }

/* ---------- footer ---------- */
.footer { position: relative; background: #232426; color: var(--bone); padding: clamp(36px, 5vw, 56px) 0 24px; overflow: hidden; }
.footer::before { content: ""; position: absolute; left: -200px; bottom: -160px; width: 670px; height: 770px; border-radius: 50%; filter: blur(90px); background: radial-gradient(circle, #8B4A1F, transparent 70%); opacity: .6; pointer-events: none; }
.footer .wrap { position: relative; }
.fcta { position: relative; display: grid; gap: 20px; align-items: center; overflow: hidden; border-radius: 16px; background: var(--accent-deep); padding: clamp(26px, 3.5vw, 46px) clamp(22px, 3.5vw, 52px); }
.fcta-pic { position: absolute; inset: 0 0 0 40%; pointer-events: none; }
.fcta-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.fcta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(139,74,31,0) 55%, rgba(60,30,12,.35) 100%); pointer-events: none; }
.fcta-copy { position: relative; z-index: 1; }
.fcta-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.6rem); line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
.fcta-copy p { margin-top: 10px; font-size: .9375rem; color: rgba(239, 237, 230, .86); max-width: 44ch; }
.fcta-btn.btn { position: relative; z-index: 1; justify-self: start; background: var(--ink); border-color: var(--ink); color: var(--bone); }
.fcta-btn.btn:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
@media (min-width: 1024px) { .fcta { grid-template-columns: 1fr auto; gap: 40px; } .fcta-btn.btn { justify-self: end; } }
.fpills { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: 1fr; }
.fpill { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-radius: 12px; background: rgba(239, 237, 230, .06); border: 1px solid rgba(239, 237, 230, .08); font-size: .9375rem; font-weight: 600; }
.fpill svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
@media (min-width: 768px) { .fpills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fcols { display: grid; gap: 32px 28px; grid-template-columns: 1fr 1fr; padding: clamp(40px, 5vw, 60px) 0 32px; }
@media (min-width: 768px) { .fcols { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.fbrand img { height: 72px; width: auto; display: block; }
.fbrand p { margin-top: 18px; max-width: 30ch; font-size: .9375rem; line-height: 1.55; color: rgba(239, 237, 230, .68); }
.fbrand .socials { margin-top: 20px; }
.fcols h3 { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 16px; }
.fcols li { font-size: .9375rem; color: rgba(239, 237, 230, .86); line-height: 1.4; }
.fcols li + li { margin-top: 10px; }
.fcols a:hover { color: var(--accent); }
.flegal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(239, 237, 230, .12); font-size: .8125rem; color: rgba(239, 237, 230, .6); }
.flegal span:last-child { display: flex; gap: 20px; }
.flegal a:hover, .flegal button:hover { color: var(--bone); }
.flegal .theme-toggle { font-size: .8125rem; color: inherit; }
.socials { display: flex; gap: 6px; }
.socials a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(239, 237, 230, .22); border-radius: 50%; transition: border-color .3s ease, color .3s ease; }
.socials a:hover { border-color: var(--accent); color: var(--accent); }
.socials svg { width: 16px; height: 16px; }
@media (max-width: 767px) { .fcols .fbrand, .fcols > div:last-child { grid-column: 1 / -1; } .fpill { font-size: .875rem; } }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 120; background: var(--ink); color: var(--bone); padding: 12px 18px; border-radius: 999px; font-size: .8125rem; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s var(--ease-out); max-width: calc(100vw - 32px); text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveal primitives ---------- */
.js [data-reveal] { opacity: 0; }
.js [data-text-reveal], .js [data-illuminate] { opacity: 0; }
.js .is-revealed { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; scroll-behavior: auto !important; }
  .js [data-reveal], .js [data-text-reveal], .js [data-illuminate] { opacity: 1; }
  .cursor { display: none !important; }
}

/* ---------- quick view ---------- */
.qv-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(26,27,29,.45); opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.qv-backdrop.is-open { opacity: 1; pointer-events: auto; }
.qv { position: fixed; z-index: 101; inset: auto 0 0 0; max-height: 92svh; overflow: auto; background: var(--bone); color: var(--ink); transform: translateY(102%); visibility: hidden; transition: transform .55s var(--ease-out), visibility 0s linear .55s; }
.qv.is-open { transform: none; visibility: visible; transition-delay: 0s; }
@media (min-width: 1024px) { .qv { inset: 50% auto auto 50%; width: min(980px, 92vw); max-height: 86vh; transform: translate(-50%, -50%) scale(.97); opacity: 0; transition: transform .45s var(--ease-out), opacity .35s ease, visibility 0s linear .45s; } .qv.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.qv-inner { display: grid; }
@media (min-width: 1024px) { .qv-inner { grid-template-columns: 1fr 1fr; } }
.qv-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: rgba(26,27,29,.03); overflow: hidden; }
@media (min-width: 1024px) { .qv-media { aspect-ratio: auto; min-height: 100%; } }
.qv-media .bloom { --bloom-s: 70%; }
.qv-media img { position: relative; z-index: 1; width: 72%; height: auto; max-height: 80%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(26,27,29,.22)); }
.qv-thumbs { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.qv-thumbs button { width: 52px; height: 52px; border: 1px solid var(--line-strong); background: var(--bone); display: grid; place-items: center; }
.qv-thumbs button[aria-pressed="true"] { border-color: var(--ink); }
.qv-thumbs img { width: 80%; height: auto; }
.qv-body { padding: clamp(20px, 3vw, 40px); display: grid; gap: 16px; align-content: start; }
.qv-close { position: absolute; top: 10px; right: 10px; z-index: 3; }
.dotc { color: var(--accent); }

/* ---------- catalogue card + grid (shop page, home collection) ---------- */
.sh-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1200px) { .sh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.scard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: box-shadow .4s ease, transform .4s var(--ease-out); }
.scard:hover { box-shadow: 0 18px 40px rgba(26,27,29,.1); transform: translateY(-2px); }
.scard.is-hidden { display: none; }
.scard-media { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; background: rgba(26,27,29,.02); }
.scard-media .bloom { --bloom-s: 70%; opacity: .7; }
.scard-media img { position: relative; z-index: 1; width: 76%; height: auto; max-height: 84%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(26,27,29,.18)); transition: transform .6s var(--ease-out), opacity .4s ease; }
.scard-media img.alt { position: absolute; inset: 0; margin: auto; opacity: 0; }
.scard.has-alt:hover .scard-media img.main { opacity: 0; }
.scard.has-alt:hover .scard-media img.alt { opacity: 1; }
.scard-wish { position: absolute; top: 10px; left: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg); transition: color .3s ease, border-color .3s ease, transform .3s var(--ease-out); }
.scard-wish svg { width: 18px; height: 18px; }
.scard-wish:hover { border-color: var(--fg); transform: scale(1.06); }
.scard-wish[aria-pressed="true"] { color: var(--accent-deep); border-color: var(--accent-deep); }
.scard-wish[aria-pressed="true"] svg { fill: currentColor; }
.scard-badge { position: absolute; top: 10px; right: 0; z-index: 2; padding: 6px 12px; background: var(--ink); color: var(--bone); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border-radius: 6px 0 0 6px; }
.scard-quick { position: absolute; z-index: 2; left: 50%; top: calc(50% + 34%); transform: translate(-50%, -50%); min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--fg); font-size: .6875rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .3s ease, background-color .3s ease, color .3s ease; }
.scard-media { --h: 1; }
.scard:hover .scard-quick, .scard:focus-within .scard-quick { opacity: 1; }
.scard-quick:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.scard-body { padding: 14px 14px 16px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.scard-name { font-family: var(--font-display); font-weight: 300; font-size: 1.35rem; line-height: 1.1; }
.scard-style { font-size: .75rem; color: var(--fg-2); letter-spacing: .04em; }
.scard-swatches { gap: 6px; align-items: center; margin-top: 4px; }
.opt--dot { min-height: 0; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid transparent; display: grid; place-items: center; }
.opt--dot .sw { width: 16px; height: 16px; }
.opt--dot:hover { border-color: var(--fg); }
.opt--dot:has(input:checked) { background: transparent; border-color: var(--fg); }
.scard-ncol { font-size: .6875rem; color: var(--fg-2); margin-left: 4px; }
.scard-meta { font-size: .75rem; color: var(--fg-2); }
.scard-meta span { margin: 0 6px; opacity: .5; }
.scard-price { margin-top: 2px; font-size: .9375rem; }
.scard-price b { font-weight: 500; }
.scard-price s { color: var(--fg-2); font-size: .8125rem; margin-left: 8px; }
.scard-body .btn { margin-top: 8px; }
.sh-empty { display: none; padding: 64px 0; text-align: center; }
.sh-empty.is-on { display: block; }
@media (max-width: 767px) { .scard-body { padding: 12px 10px 14px; } .scard-name { font-size: 1.15rem; } .scard-meta { display: none; } .scard-quick { display: none; } .scard-body .btn { min-height: 36px; font-size: .6875rem; } }

/* ---------- catalogue card (home rail, collection pages, shop) ---------- */
.cc-track { --rail-w: calc((100% - 12px) / 1); gap: 12px; padding-bottom: 6px; scroll-padding-left: 0; }
@media (min-width: 590px) { .cc-track { --rail-w: calc((100% - 18px) / 2); gap: 15px; } }
@media (min-width: 768px) { .cc-track { --rail-w: calc((100% - 36px) / 3); gap: 18px; } }
@media (min-width: 1200px) { .cc-track { --rail-w: calc((100% - 60px) / 4); gap: 20px; } }
.cc-track > .ccard { flex: 0 0 var(--rail-w); scroll-snap-align: start; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.rail:not(.has-overflow) .rail-nav { visibility: hidden; }
.ccard { display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 12px; box-shadow: 0 1px 2px rgba(26,27,29,.04), 0 10px 30px -18px rgba(26,27,29,.18); transition: transform .4s var(--ease-out), box-shadow .4s ease; }
.ccard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(26,27,29,.04), 0 24px 40px -20px rgba(26,27,29,.28); }
.ccard.is-hidden { display: none; }
.cc-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: #F3F1EC; overflow: hidden; }
.cc-media img { position: relative; z-index: 1; width: 82%; height: auto; max-height: 86%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(26,27,29,.16)); transition: opacity .4s ease, transform .6s var(--ease-out); }
.cc-media img.alt { position: absolute; inset: 0; margin: auto; opacity: 0; }
.ccard.has-alt:hover .cc-media img.main { opacity: 0; }
.ccard.has-alt:hover .cc-media img.alt { opacity: 1; }
.cc-badges { position: absolute; left: 10px; top: 10px; z-index: 2; display: grid; gap: 6px; justify-items: start; }
.cc-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 4px; font-size: .6875rem; font-weight: 600; line-height: 1; }
.cc-sale { background: #5A1E1A; color: var(--bone); }
.cc-best { background: #D9A866; color: #3A2410; }
.cc-new { background: var(--ink); color: var(--bone); }
.cc-body { padding: 14px 6px 6px; display: grid; gap: 6px; }
.cc-price { display: flex; align-items: baseline; gap: 8px; }
.cc-price b { font-weight: 700; font-size: 1.1rem; color: var(--accent-deep); }
.cc-price s { font-size: .75rem; color: var(--fg-2); }
.cc-name { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.cc-name a { color: var(--ink); }
.cc-meta { font-size: .75rem; color: var(--fg-2); }
.cc-meta i { font-style: normal; margin: 0 4px; opacity: .6; }
.cc-opts { gap: 6px; }
.cc-sw { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid transparent; display: grid; place-items: center; cursor: pointer; }
.cc-sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-sw i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.cc-sw:has(input:checked) { border-color: var(--ink); }
.cc-stock { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 500; color: #1F7A3A; }
.cc-stock i { width: 6px; height: 6px; border-radius: 50%; background: #1F7A3A; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.cc-add { min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--accent-deep); color: var(--bone); font-size: .875rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: background-color .3s ease, color .3s ease; }
.cc-add:hover { background: var(--ink); }
.cc-wish { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; color: var(--fg-2); background: #fff; transition: color .3s ease, border-color .3s ease; }
.cc-wish svg { width: 16px; height: 16px; }
.cc-wish:hover { color: var(--ink); border-color: var(--ink); }
.cc-wish[aria-pressed="true"] { color: var(--accent-deep); border-color: var(--accent-deep); }
.cc-wish[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 767px) { .ccard { padding: 8px; border-radius: 12px; } .cc-body { padding: 10px 4px 4px; } .cc-name { font-size: .875rem; } .cc-price b, .cc-price s, .cc-add { white-space: nowrap; } .cc-price b { font-size: 1rem; } .cc-add { padding: 0 10px; font-size: .75rem; min-height: 36px; } .cc-wish { width: 32px; height: 32px; flex: 0 0 auto; } }

/* ---------- why people choose Stagr ---------- */
.why { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); background: var(--bone); color: var(--ink); }
.why-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(32px, 4vw, 56px); }
.why-head .explore-title { white-space: normal; }
.why-head .explore-sub { margin-top: 14px; font-size: 1rem; }
.why-grid { display: grid; gap: 28px 32px; grid-template-columns: 1fr; }
.why-grid li { display: flex; gap: 14px; align-items: flex-start; }
.why-ic { flex: 0 0 auto; width: 28px; height: 28px; color: var(--accent-deep); }
.why-ic svg { width: 100%; height: 100%; }
.why-grid b { display: block; font-weight: 600; font-size: 1rem; }
.why-grid p { margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--fg-2); }
@media (min-width: 640px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.explore-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.012em; }
.explore-sub { margin-top: 12px; color: var(--fg-2); font-size: .9375rem; }