/* Muse Scent Studio storefront styles - extracted verbatim from the client-provided design (index (1).html). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --ink: #181818; --ink-2: #424242; --ink-3: #7d7d7d;
  --bg: #dedede; --bg-2: #d7d7d7;
  --border: rgba(18,18,18,0.12); --border-strong: rgba(18,18,18,0.22);
  --accent: #ED4204; --accent-dark: #C3461E;
  --stories: #389751; --stories-dark: #67784E; --stories-tint: rgba(56,151,81,0.1);
  --white: #fafafa; --card-bg: #eeeeee; --radius: 2px;
  --mono: 'Space Grotesk', sans-serif; --serif: 'Cormorant Garamond', serif; --grotesk: 'Space Grotesk', sans-serif;
  /* ── 6-COLUMN GRID SYSTEM ── */
  --cols: 6;
  --col-gap: 1px;
  --gutter: 32px;
  --wrap: 1400px;
}
html { scroll-behavior: smooth; }
/* ── ANTI-FLASH GUARD ──────────────────────────────────────────
   Blocks every CSS transition/animation until the page has done
   its first paint and all init JS has run. Without this, any
   class toggle that happens during load (page-switch, drawer
   state, accordion state, etc.) plays its transition visibly,
   which reads as a "flicker" — e.g. the cart drawer's transform
   transition animating into view for a frame before JS settles
   it into the closed state. Removed by the init script below
   right after the first animation frame. ── */
html.preload *, html.preload *::before, html.preload *::after {
  transition: none !important;
  animation: none !important;
}
body { font-family: var(--mono); background: var(--bg); color: var(--ink); font-size: 13px; line-height: 1.6; min-height: 100vh; }

/* ── CONTAINER ── */
.wrap { width: 100%; max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { width: 100%; }

/* ── 6-COL GRID ── */
.g6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--col-gap); }
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }

/* ══════════════════════════════════════════════
   NAV — Three-tier editorial header
   T1: announcement ticker (dark band)
   T2: metadata-left | logo-center | actions-right
   T3: segmented category nav
   ══════════════════════════════════════════════ */

nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* ── Collapsed state: ticker + identity slide up, categories remain ── */
.nav-header-wrap {
  overflow: hidden;
  transition: max-height 0.32s cubic-bezier(0.22,1,0.36,1),
              opacity 0.26s ease;
  max-height: 110px; /* ticker 32 + identity 68 + buffer */
}
nav.nav--collapsed .nav-header-wrap {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Scroll-to-top button ── */
#stt-btn {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 150;
  width: 40px; height: 40px;
  background: var(--ink);
  color: #fff;
  border: none; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s;
  box-shadow: 0 2px 12px rgba(18,18,18,0.18);
}
#stt-btn.visible {
  opacity: 1; pointer-events: all;
  transform: translateY(0);
}@media (hover: hover) and (pointer: fine) {

#stt-btn:hover { background: var(--accent); }
}
#stt-btn svg { display: block; }
/* All page content above grid-lines z:0 */
.pg { position: relative; z-index: 1; }

/* ── TIER 1: Ticker bar ── */
.nav-ticker {
  background: var(--ink);
  height: 32px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}
.nav-ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  gap: 0;
}@media (hover: hover) and (pointer: fine) {

.nav-ticker-track:hover { animation-play-state: paused; }
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.nav-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(248,245,240,0.75);
  padding: 0 40px;
}
.nav-ticker-item .tk-sep {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0.7;
  flex-shrink: 0;
}
.nav-ticker-item .tk-hl { color: var(--accent); }
/* Fade masks on edges */
.nav-ticker::before,
.nav-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 48px;
  z-index: 2;
  pointer-events: none;
}
.nav-ticker::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.nav-ticker::after  { right: 0; background: linear-gradient(to left, var(--ink), transparent); }

/* ── TIER 2: Logo band ── */
.nav-identity {
  height: 68px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  max-width: var(--wrap);
  margin: 0 auto;
  gap: 20px;
  background: #ffffff;
}
.nav-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-meta-row {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-meta-row .meta-key { color: var(--ink-3); opacity: 0.6; }
.nav-meta-row .meta-val { color: var(--ink-2); }
.nav-meta-row .meta-edition { color: var(--accent-dark); }

.nav-logo-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.nav-logo-wordmark {
  font-family: var(--grotesk);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-wordmark span { font-weight: 700; font-family: var(--grotesk); }
.nav-logo-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
/* hairline rule above/below logo */
.nav-logo-center::before,
.nav-logo-center::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--border-strong);
  opacity: 0.6;
}

.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.nav-soc-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-link {
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none; transition: color 0.2s;
  font-family: var(--mono);
}@media (hover: hover) and (pointer: fine) {

.nav-link:hover { color: var(--ink); }
}
.nav-soc {
  display: flex; align-items: center;
  color: var(--ink); opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}@media (hover: hover) and (pointer: fine) {

.nav-soc:hover { opacity: 1; color: #ed4204; }
}

/* Wishlist icon */
.nav-wish-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  color: var(--ink-3); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out;
  position: relative;
}@media (hover: hover) and (pointer: fine) {

.nav-wish-btn:hover { border-color: var(--border-strong); color: var(--ink); }
}
.nav-wish-btn.has-items { border-color: #c8474a; color: #c8474a; }
.nav-wish-btn.has-items svg { fill: rgba(200,71,74,0.15); }
.nav-wish-count {
  position: absolute; top: -5px; right: -5px;
  background: #c8474a; color: #fff;
  font-size: 10px; font-family: var(--mono);
  width: 16px; height: 16px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.nav-wish-count.show { display: flex; }

/* ── WISHLIST DRAWER ── */
.wl-ov { position: fixed; inset: 0; background: rgba(18,18,18,0.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.wl-ov.on { opacity: 1; pointer-events: all; }
.wl-dr { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; background: var(--bg); z-index: 201; transform: translateX(100%); transition: transform 200ms cubic-bezier(0.23,1,0.32,1); display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.wl-dr.on { transform: translateX(0); transition: transform 350ms cubic-bezier(0.22,1,0.36,1); }
.wl-hd { padding: 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wl-ttl { font-family: var(--serif); font-size: 22px; font-weight: 300; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; }
.wl-ttl-count { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }
.wl-body { flex: 1; overflow-y: auto; }
.wl-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 260px; color: var(--ink-3); font-size: 12px; letter-spacing: 0.03em; text-align: center; gap: 14px; }
.wl-empty-ic { font-size: 40px; opacity: 0.2; }
.wl-empty p { font-family: var(--serif); font-size: 16px; font-weight: 300; color: var(--ink-2); line-height: 1.5; }
.wl-empty span { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

/* ── STORIES PAGE ── */
.st-body { display: flex; flex-direction: column; gap: 12px; }

.st-intro-block { margin-bottom: 4px; }
.st-intro-hl {
  font-family: var(--grotesk); font-size: 15px; font-weight: 700; letter-spacing: -0.2px;
  text-transform: uppercase; color: var(--stories-dark); margin-bottom: 4px;
}
.st-intro-tag { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-2); line-height: 1.4; }

.st-section-lbl {
  display: none; /* mobile-only — desktop keeps the plain card grid without a section header */
  align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--stories); padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.st-section-dash { color: var(--ink-3); opacity: 0.7; }

.st-card {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  text-align: left; width: 100%; background: var(--card-bg);
  border: none; border-radius: 0;
  padding: 0; cursor: pointer; overflow: hidden;
  transition: background 0.18s;
  animation: fu 0.4s ease both;
  position: relative;
}
.st-card:nth-child(2) { animation-delay: 40ms; }
.st-card:nth-child(3) { animation-delay: 80ms; }
.st-card:nth-child(4) { animation-delay: 120ms; }
.st-card:nth-child(5) { animation-delay: 160ms; }
.st-card:nth-child(6) { animation-delay: 200ms; }
/* accent left bar on hover — same mechanic as .pc::before */
.st-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 2px; height: 100%; background: var(--stories);
  opacity: 0; transition: opacity 0.18s; z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.st-card:hover { background: var(--white); }
.st-card:hover::before { opacity: 1; }
}
.st-card-icon { display: none; } /* mobile-only row icon */
.st-card-dot { display: none; } /* mobile-only featured marker */

/* ── Thumbnail — edge-to-edge, no inset padding ── */
.st-card-thumb {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(150deg, #232323 0%, #2d2d2d 55%, #383838 100%);
}
.st-card-thumb img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 320ms cubic-bezier(0.22,1,0.36,1);
}
@media (hover: hover) and (pointer: fine) {
.st-card:hover .st-card-thumb img { transform: scale(1.035); }
}
.st-card-thumb:has(img)::before { display: none; } /* synthetic grain is only for the icon fallback */
.st-card-thumb::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 8px);
  pointer-events: none;
}
.st-card-thumb::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  pointer-events: none;
}
.st-card-thumb-mono {
  position: absolute; left: -8px; bottom: -34px; z-index: 0;
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 150px;
  line-height: 1; color: rgba(255,255,255,0.07); pointer-events: none; user-select: none;
}
.st-card-thumb-icon {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0; color: #fff; backdrop-filter: blur(2px);
}
.st-card-thumb-icon svg { width: 17px; height: 17px; }
.st-card-cat-badge {
  position: absolute; top: 0; left: 0; z-index: 1;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: #fff; background: rgba(18,18,18,0.55); border: none; border-radius: 0;
  padding: 6px 10px; backdrop-filter: blur(3px);
}

/* ── Body — same padding rhythm and type scale as .pc (product card) ── */
.st-card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 18px 16px 0; flex: 1; }
.st-card-tag {
  font-size: 11px; letter-spacing: 0.02em; color: var(--ink-3);
  margin-bottom: 7px; text-transform: uppercase;
}
.st-card-title {
  font-family: var(--grotesk); font-size: 16px; font-weight: 500;
  line-height: 1.2; color: var(--ink); margin-bottom: 2px;
}
.st-card-excerpt {
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
  margin-top: 6px; margin-bottom: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-card-meta {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  margin-top: 12px; padding: 10px 0 12px; border-top: 1px solid var(--border);
}
.st-card-meta-row {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); opacity: 0.75;
}
.st-card-dot { opacity: 0.6; }
.st-card-soon-lbl { color: var(--ink-3); font-style: italic; font-family: var(--serif); text-transform: none; letter-spacing: 0; opacity: 0.85; }
.st-card-readmore {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--stories-dark); font-weight: 600; display: flex; align-items: center; gap: 5px;
  flex-shrink: 0; white-space: nowrap;
}
.st-card-readmore::after { content: '→'; transition: transform 0.15s; }
@media (hover: hover) and (pointer: fine) {
.st-card:hover .st-card-readmore::after { transform: translateX(3px); }
}

.st-card-soon { cursor: default; }
.st-card-soon .st-card-thumb { filter: grayscale(0.55) brightness(0.85); }
.st-card-soon .st-card-title { opacity: 0.6; }
.st-card-soon .st-card-excerpt { opacity: 0.55; }
@media (hover: hover) and (pointer: fine) {
.st-card-soon:hover { background: var(--card-bg); }
.st-card-soon:hover::before { opacity: 0; }
}

.st-back {
  align-self: flex-start; width: auto; height: 30px;
  display: flex; align-items: center;
  background: none; border: none; cursor: pointer;
  font-family: var(--grotesk); font-weight: 700; font-size: 18px; line-height: 22px;
  letter-spacing: -1px; text-transform: uppercase;
  color: #525252; padding: 0; margin: 0 0 18px; flex-shrink: 0;
  transition: color 0.15s, transform 150ms ease-out;
}@media (hover: hover) and (pointer: fine) {
.st-back:hover { color: #67784E; }
}
.st-back:active { transform: scale(0.98); }
.st-article-tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #67784E; font-weight: 600; margin-bottom: 8px;
}
.st-article-title {
  font-family: var(--grotesk); font-size: 24px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; line-height: 1.2; margin-bottom: 14px;
}
.st-article-body p { font-size: 14px; color: var(--ink-2); line-height: 1.75; margin-bottom: 14px; }
.st-article-body h4 {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; font-weight: 600;
  color: var(--stories-dark); margin: 20px 0 9px;
}
.st-article-body ul { margin: 0 0 14px 18px; }
.st-article-body li { font-size: 14px; color: var(--ink-2); line-height: 1.7; margin-bottom: 5px; }
.st-article-body strong { color: var(--ink); font-weight: 600; }

/* ── Stories page hero ── */
.story-hero { border-bottom: 1px solid var(--border); }
.story-hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 48px var(--gutter) 32px; background: var(--stories-tint); }
.story-hero-lbl {
  font-family: var(--grotesk); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700;
  letter-spacing: -1px; text-transform: uppercase; font-style: normal;
  color: var(--stories-dark); margin-bottom: 10px;
}
.story-hero h1 {
  font-family: var(--serif); font-size: 28px; font-weight: 300; line-height: 1.1;
  color: var(--ink); max-width: 720px; margin-bottom: 14px;
}
.story-hero h1 em { font-style: italic; color: var(--stories-dark); }
.story-hero-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; max-width: 560px; margin-bottom: 28px; }
#storyTabs .fp.on { background: var(--stories-dark); border-color: var(--stories-dark); }

/* ── Layout: 4-column grid — 3 card columns + dedicated sidebar column ── */
.story-layout { max-width: var(--wrap); margin: 0 auto; padding: 32px var(--gutter) 60px; display: grid; grid-template-columns: repeat(3, 1fr) minmax(260px, 300px); gap: 32px; align-items: start; }
.story-layout-article { grid-template-columns: 1fr 280px; }
#storyListView .story-layout { background: #E6E6E6; }
#storyArticleView .story-layout { background: #E6E6E6; }
.story-layout > div { min-width: 0; } /* grid items default to min-width:auto — without this, long content forces the track wider than its container, which is what was pushing paragraphs/lists past the mobile viewport edge */
.story-main { grid-column: 1 / span 3; min-width: 0; } /* spans the 3 card columns, leaving column 4 for the sidebar */
.story-article-panel {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0; overflow: hidden;
}
.story-article-main { min-width: 0; }
.story-article-content { padding: 24px 32px 32px; }
/* Nested grid gap matches the outer grid gap so cards line up exactly with the 3 virtual outer columns */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); }
.story-count { grid-column: 1 / -1; font-family: var(--mono); font-size: 14pt; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.story-empty { grid-column: 1 / -1; padding: 48px 20px; text-align: center; font-size: 13px; color: var(--ink-3); font-style: italic; font-family: var(--serif); }

/* ── Sidebar ── */
.story-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 160px; }
.story-side-block-lbl {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stories-dark); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.story-side-link {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: opacity 0.15s;
}
.story-side-link:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
.story-side-link:hover { opacity: 0.7; }
.story-side-link:hover .story-side-title { color: var(--stories-dark); }
}
.story-side-thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 0; overflow: hidden; position: relative;
  background: linear-gradient(150deg, #232323 0%, #2d2d2d 55%, #383838 100%);
  display: flex; align-items: center; justify-content: center;
}
.story-side-thumb-mono {
  font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px;
  color: rgba(255,255,255,0.55);
}
.story-side-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.story-side-title {
  font-family: var(--serif); font-size: 13.5px; color: var(--ink); line-height: 1.32;
  transition: color 0.15s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.story-side-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; display: block; }

/* ── Single article extras ── */
.story-article-hero-img {
  width: 100%; aspect-ratio: 16/9; border-radius: 0; overflow: hidden; position: relative;
  background: var(--stories-tint); display: flex; align-items: center; justify-content: center;
  color: #67784E; opacity: 0.5;
}
.story-article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.story-article-hero-img:has(img) { opacity: 1; }
.story-article-hero-img svg { width: 56px; height: 56px; }
.story-meta-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase;
  padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.story-meta-row span { display: flex; align-items: center; gap: 6px; }
.story-meta-row .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

.story-share-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.story-share-btn {
  display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--ink-2); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 150ms ease-out;
}
.story-share-btn svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) {
.story-share-btn:hover { border-color: #67784E; background: var(--stories-tint); color: var(--stories-dark); }
}
.story-share-btn:active { transform: scale(0.96); }
.story-share-btn.liked { background: #67784E; border-color: #67784E; color: #fff; }
.story-share-btn.liked svg { fill: #fff; }

.story-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.story-pn-btn {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  height: 50px; padding: 0 12px; justify-content: flex-start;
  background: #67784E; border: 1px solid #67784E; border-radius: var(--radius);
  cursor: pointer; overflow: hidden; transition: border-color 0.15s, background 0.15s, transform 0.15s ease-out;
}
.story-pn-btn.next { justify-content: flex-end; }
@media (hover: hover) and (pointer: fine) {
.story-pn-btn:hover { background: var(--ink); border-color: var(--ink); }
}
.story-pn-btn:active { transform: scale(0.97); }
.story-pn-arrow { font-family: var(--grotesk); font-size: 15px; color: #fff; flex-shrink: 0; }
.story-pn-title { font-family: var(--grotesk); font-size: 13px; color: #fff; line-height: 1.3; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.story-cta {
  margin-top: 8px; padding: 32px; text-align: center; background: var(--ink); border-radius: var(--radius);
}
.story-cta p { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--white); margin-bottom: 16px; }
.story-cta button {
  padding: 12px 28px; background: #67784E; color: #fff; border: none; border-radius: var(--radius);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer;
  transition: background 0.15s, transform 150ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
.story-cta button:hover { background: var(--stories-dark); }
}
.story-cta button:active { transform: scale(0.97); }

/* ── Tablet: 2 card columns, sidebar drops out of the grid ── */
@media (max-width: 1180px) {
  .story-layout { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .story-main { grid-column: 1 / -1; }
  .story-sidebar { display: none; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .st-article-title { font-size: 20px; }
}

@media (max-width: 900px) {
  .story-layout { grid-template-columns: 1fr; }
  .story-sidebar { display: none; }
  .story-hero-inner { padding: 36px var(--gutter) 24px; }
  .story-hero h1 { font-size: 28px; }
  #pg-stories .vtog { display: flex !important; }

  /* ── Thumbnail mode (default) — 2-column card grid, same idea as the
     tablet breakpoint above, just tightened further for phone widths ── */
  .story-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-grid > .st-card { min-width: 0; }
  .st-card-thumb-mono { font-size: 90px; bottom: -20px; }
  .st-card-body { padding: 12px 12px 0; }
  .st-card-title { font-size: 13.5px; }
  .st-card-excerpt { display: none; } /* no room at 2-up phone width — title + meta only */
  .st-card-tag { font-size: 10px; margin-bottom: 5px; }
  .st-card-meta { margin-top: 8px; padding: 8px 0 10px; }
  .st-card-readmore { display: none; }

  /* ── List mode (.story-grid.lv) — compact 2-column tiles, no
     thumbnail: replaces the old single-column 48px hamburger-style
     rows, which only ever gave one view on mobile. ── */
  .story-grid.lv {
    gap: 1px; background: var(--border);
  }
  .story-grid.lv > .st-card { min-width: 0; }
  .story-grid.lv .st-card {
    height: auto; min-height: 64px; width: 100%;
    border: none; border-radius: 0;
    background: var(--card-bg);
    animation: none;
  }
  .story-grid.lv .st-card::before { display: none; }
  .story-grid.lv .st-card:active { background: var(--white); }
  .story-grid.lv .st-card-thumb { display: none; } /* list mode drops the featured thumbnail */
  .story-grid.lv .st-card-body {
    flex-direction: column; align-items: flex-start;
    height: auto; padding: 12px 12px 10px; gap: 6px;
  }
  .story-grid.lv .st-card-tag { display: none; }
  .story-grid.lv .st-card-title {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.3px; font-weight: 400;
    text-transform: uppercase; color: var(--ink); flex: none; min-width: 0;
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.35; margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  }
  .story-grid.lv .st-card-excerpt { display: none; }
  .story-grid.lv .st-card-readmore { display: none; }
  .story-grid.lv .st-card-meta {
    flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 0; padding: 0; border-top: none;
    flex-shrink: 0; min-width: 0; width: auto;
  }
  .story-grid.lv .st-card-meta-row { font-size: 9px; letter-spacing: 0.25px; color: var(--ink-2); opacity: 1; white-space: nowrap; }
  .story-grid.lv .st-card-date { display: none; }
  .story-grid.lv .st-card-soon .st-card-title { opacity: 0.5; }
}

/* Article view on mobile: full-width bright page, not a card floating in the layout's gutter */
@media (max-width: 700px) {
  .story-layout-article { padding-left: 0; padding-right: 0; padding-top: 0; }
  .story-article-panel {
    border: none; border-radius: 0;
  }
  .story-article-content {
    padding: 24px 18px 32px;
  }
  .st-back { margin: 18px 18px 14px; }
}


.wl-item { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; gap: 14px; align-items: flex-start; animation: fi 0.25s ease both; }@media (hover: hover) and (pointer: fine) {

.wl-item:hover { background: var(--card-bg); }
}
.wl-inf { flex: 1; min-width: 0; }
.wl-col { font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.wl-nm { font-family: var(--serif); font-size: 17px; font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 2px; }
.wl-alias { font-family: var(--serif); font-size: 12px; font-style: italic; color: var(--accent-dark); margin-bottom: 6px; }
.wl-accord { display: inline-block; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--accent); color: var(--accent-dark); border-radius: var(--radius); margin-bottom: 8px; }
.wl-desc { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.wl-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex-shrink: 0; }
.wl-add-cart { font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; padding: 6px 12px; background: var(--ink); color: var(--bg); border: none; cursor: pointer; border-radius: var(--radius); transition: background 0.15s; white-space: nowrap; }@media (hover: hover) and (pointer: fine) {

.wl-add-cart:hover { background: var(--accent-dark); }
}
.wl-add-cart.ok { background: var(--accent-dark); }
.wl-rm { background: none; border: none; font-size: 9px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: color 0.15s; white-space: nowrap; }@media (hover: hover) and (pointer: fine) {

.wl-rm:hover { color: #b04040; }
}
.wl-ft { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.wl-clear-btn { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; padding: 11px; background: transparent; color: var(--ink-2); border: 1px solid var(--border); cursor: pointer; border-radius: var(--radius); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out; }@media (hover: hover) and (pointer: fine) {

.wl-clear-btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
}
.wl-cart-all-btn { flex: 2; font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; padding: 11px; background: var(--ink); color: var(--bg); border: none; cursor: pointer; border-radius: var(--radius); transition: background 0.2s; }@media (hover: hover) and (pointer: fine) {

.wl-cart-all-btn:hover { background: var(--accent-dark); }
}

/* ── Wishlist heart on product cards ── */
.pc-wish {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; z-index: 2;
  color: var(--ink-3);
}@media (hover: hover) and (pointer: fine) {

.pc-wish:hover { border-color: #c8474a; color: #c8474a; }
}
.pc-wish.on { background: rgba(200,71,74,0.08); border-color: #c8474a; color: #c8474a; animation: wishPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.pc-wish.on svg { fill: rgba(200,71,74,0.3); }
@keyframes wishPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
/* In list view, heart is inline not absolute */
.pgrid.lv .pc-wish { position: static; width: 26px; height: 26px; flex-shrink: 0; }

.cart-btn {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  background: var(--ink); color: var(--bg); border: none;
  padding: 8px 16px; cursor: pointer; border-radius: var(--radius);
  transition: background 0.2s; font-family: var(--mono); white-space: nowrap;
  height: 32px;
}@media (hover: hover) and (pointer: fine) {

.cart-btn:hover { background: var(--ink-2); }
}
.cart-btn svg { opacity: 0.7; }
.cart-count {
  background: var(--accent); color: var(--ink); font-size: 10px; font-weight: 600;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.nav-hide-mobile {}

/* ── TIER 3: Category nav ── */
.nav-categories {
  height: 48px;
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-categories::-webkit-scrollbar { display: none; }
.nav-cat-inner {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  height: 48px;
  max-width: var(--wrap);
  margin: 0 auto;
  background: #E6E6E6;
}

/* Segment: category group. Segments and their pills stay sized to their own
   content — forcing them into equal fractions previously broke layout,
   since "Muse Clan & Manifesto" and "MUSE Atelier" need more room than an
   even split allows, causing pills to overflow into neighboring segments.
   Instead, the row's leftover width is spread as even gaps between the
   three segments (see .nav-cat-inner), which removes the single oversized
   void without stretching any button past what its label needs. */
.nav-seg {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  border-right: 1px solid var(--border);
  flex: 0 0 auto;
}
.nav-seg:first-child { border-left: none; }
.nav-seg:last-child { border-right: none; }

/* The row's leftover width is split across all 6 pills equally, not left as
   dead trailing background. Each segment's own flex-grow is proportional to
   its pill count (Explore 2, Shop 3, Read 1), and every pill inside grows
   1 0 auto (never below its own content) — so the segment's allotted share
   divides evenly among its pills, giving every one of the 6 buttons the
   same extra width regardless of which category it's in. */
.nav-seg:nth-child(1) { flex: 2 0 auto; }
.nav-seg:nth-child(2) { flex: 3 0 auto; }
.nav-seg:last-child { flex: 1 0 auto; }
.nav-seg .npl { flex: 1 0 auto; justify-content: center; }

/* Each nav pill inside a segment */
.npl {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 14px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  white-space: nowrap;
  position: relative;
}@media (hover: hover) and (pointer: fine) {

.npl:hover { color: var(--ink); background: var(--bg-2); }
}
.npl.on { color: var(--ink); border-bottom-color: var(--accent); background: var(--bg-2); }
.npl-badge {
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  opacity: 0.7;
  text-transform: uppercase;
  transition: color 0.18s;
}@media (hover: hover) and (pointer: fine) {

.npl.on .npl-badge,
.npl:hover .npl-badge { color: var(--accent-dark); opacity: 1; }
}
/* Active indicator dot */
.npl.on::before {
  content: '';
  position: absolute;
  top: 8px; left: 10px;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

/* Muse Clan & Manifesto / Discovery Lab — active state accent swapped from red-orange to black */
#nb-about.on, #nb-discovery.on { border-bottom-color: #181818; }
#nb-about.on::before, #nb-discovery.on::before { background: #181818; }
#nb-about.on .npl-badge, #nb-discovery.on .npl-badge { color: #181818; }

/* MUSE Atelier — active state accent swapped from red-orange to red */
#nb-atelier.on { border-bottom-color: #7D2826; }
#nb-atelier.on::before { background: #7D2826; }
#nb-atelier.on .npl-badge { color: #7D2826; }

/* Stories pill — green accent instead of orange, signals editorial/different-kind-of-page.
   Sits compactly after its segment label like every other pill — no longer stretched
   to eat the whole segment, which was creating the oversized gap in front of it. */
.npl-stories {
  background: var(--stories-tint);
}
.npl-stories .npl-badge { color: var(--stories-dark); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.npl-stories:hover { color: var(--ink); background: rgba(56,151,81,0.18); }
.npl-stories:hover .npl-badge { color: var(--stories-dark); }
}
.npl-stories:active { background: rgba(56,151,81,0.22); }

/* Stories pill — active/selected state uses green, not the shared orange */
.npl-stories.on {
  color: var(--ink); border-bottom-color: #67784E; background: rgba(103,120,78,0.18);
}
.npl-stories.on .npl-badge { color: var(--stories-dark); opacity: 1; }
.npl-stories.on::before { background: #67784E; }

/* Nav segment label — fixed 65px, text centered, so EXPLORE / SHOP / READ
   read as uniform category tabs instead of content-width labels. */
.nav-seg-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  padding: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
  opacity: 0.55;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  user-select: none;
}
/* First segment = Explore — brand identity; subtle gold label emphasis. */
.nav-seg:first-child .nav-seg-label {
  color: #181818;
  opacity: 0.85;
}

/* Last segment = Read — Stories' own green, not the shop accent */
.nav-seg:last-child .nav-seg-label {
  color: #67784E;
  opacity: 0.85;
}

/* Middle segment = Shop — red-orange accent */
.nav-seg:nth-child(2) .nav-seg-label {
  color: #ED4204;
  opacity: 0.85;
}

/* ── BURGER BUTTON ──
   Restyled to match the bottom nav's icon language (see .nb-icon-wrap):
   borderless, rounded wrapper, stroke-based line icon at the same
   weight, tinted background on hover/open instead of a bordered box. */
.nav-burger {
  display: none; /* shown only on mobile */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.16s ease, color 0.16s ease;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}@media (hover: hover) and (pointer: fine) {

.nav-burger:hover { background: var(--bg-2); color: var(--ink); }
}
.nav-burger.open { background: rgba(237,66,4,0.12); color: var(--accent); }
.nav-burger svg {
  width: 22px;
  height: 22px;
  display: block;
  flex-shrink: 0;
  transition: stroke 0.16s ease;
}

/* ── MOBILE MENU PANEL — Figma node 2050:4 ── */
.nav-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  z-index: 190;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #dedede;
  box-shadow: 6px 0 12px rgba(0,0,0,0.055);
}
.nav-menu.open { transform: translateX(0); }
.nav-menu.dragging { transition: none; } /* live touch tracking needs 1:1 movement, not the eased transition */
.nav-menu::-webkit-scrollbar { display: none; }

/* ── HEADING ROW — Figma: top:51px center, left:16px, 36px Bold #525252 −2px tracking, h:30px ── */
.nm-heading-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 88px 18px 12px 16px; /* top: 80px nav clearance + 8px breathing, bottom: 12px */
  flex-shrink: 0;
}
.nm-heading {
  flex: 1;
  font-family: var(--grotesk);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: uppercase;
  color: #525252;
  line-height: 22px;
  user-select: none;
  pointer-events: none;
}
/* Close button — Figma: top:42px, left:348px → right:18px, plain × 18×18px, no bg */
.nm-close {
  position: absolute;
  top: 90px;            /* 80px nav + ~10px center of 36px heading text */
  right: 18px;
  width: 18px;
  height: 18px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: opacity 0.15s;
  z-index: 5;
  padding: 0;
}@media (hover: hover) and (pointer: fine) {

.nm-close:hover { opacity: 0.55; }
}
.nm-close svg { width: 18px; height: 18px; display: block; }

/* ── GROUP LABEL ROWS — Figma: bg:#dedede, border-b rgba(18,18,18,0.05), h:32px, pl:20px, pr:14px ── */
.nm-group-lbl {
  height: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 20px;
  background: #dedede;
  border-bottom: 1px solid rgba(18,18,18,0.05);
  flex-shrink: 0;
}
.nm-group-lbl-text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  white-space: pre;
  line-height: 16px;
}
.nm-group-dash {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.7;
  font-weight: 500;
}

/* ── NAV ITEM ROWS — Figma: h:48px, bg:#dedede, border-b rgba(0,0,0,0.05), px:20px, gap:8px, 12px #7d7d7d 0.48px ── */
.nm-item {
  height: 48px;
  min-height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 1px 20px;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: var(--card-bg);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  position: relative;
  flex-shrink: 0;
}
.nm-item:active { background: var(--white); }

/* Icon — 15.4×15.4px */
.nm-item-icon {
  flex-shrink: 0;
  width: 15.4px;
  height: 15.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}
.nm-item.on .nm-item-icon { color: var(--ink); }

.nm-item-label { flex: 1; }

/* Badge */
.nm-item-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-3);
  opacity: 0.7;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── ACTIVE STATE — Figma: bg:#d2d2d2, border-l:2px #ed4204, pl:24px, pr:22px, gap:5.01px, Bold #181818 ── */
.nm-item.on {
  background: #d2d2d2;
  color: var(--ink);
  font-weight: 700;
  border-left: 2px solid #7D2826;
  padding-left: 24px;
  padding-right: 22px;
  gap: 5.01px;
}
.nm-item.on .nm-item-badge {
  color: #7D2826;
  opacity: 1;
  font-weight: 500;
}
/* Accent dot — active state accent, red */
.nm-item.on::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #7D2826;
}

/* Category label colors — Explore black, Shop red-orange (accent), Read green */
.nm-group-lbl--explore .nm-group-lbl-text { color: #181818; }
.nm-group-lbl--shop .nm-group-lbl-text { color: #ED4204; }
.nm-group-lbl--read .nm-group-lbl-text { color: #67784E; }

/* Muse Clan & Manifesto / Discovery Lab — active state accent swapped from red-orange to black */
#nm-about.on, #nm-discovery.on { border-left-color: #181818; }
#nm-about.on::before, #nm-discovery.on::before { background: #181818; }
#nm-about.on .nm-item-badge, #nm-discovery.on .nm-item-badge { color: #181818; }

/* Stories — active state accent swapped from red-orange to green, matching the Read segment */
#nm-stories.on { border-left-color: #67784E; }
#nm-stories.on::before { background: #67784E; }
#nm-stories.on .nm-item-badge { color: #67784E; }

/* ── BRAND ZONE — bg:#181818, flex:1 ── */
.nm-brand-zone {
  background: #181818;
  flex: 1;
  min-height: 80px;
  position: relative;  /* still needed for nm-brand-est absolute */
}
/* EST. 2024. — top-left of brand zone */
.nm-brand-est {
  position: absolute;
  top: 34px;
  left: 18px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 15px;
  color: #f5f5f5;
  text-transform: uppercase;
  margin: 0;
}
/* Logo row — sits between brand zone and social bar, centered, dark bg */
.nm-brand-logo {
  width: 100%;
  height: 28px;
  background: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--grotesk);
  /* Sized off the drawer's own rendered width (container query units),
     not the viewport — vw-based sizing broke down past ~377px viewport
     width, because the drawer itself stops growing there (it's pinned
     to min(320px, 85vw)) while a vw value keeps climbing regardless,
     so text and container drifted out of sync on larger phones and
     any tablet. cqw ties the two together permanently: as long as the
     drawer's rendered width doesn't change, neither does the font size
     — true across every phone ≥377px wide AND every tablet, since they
     all hit the same 320px drawer cap. Below that, both the drawer and
     the font shrink together in lockstep. First line is a vw-based
     fallback for the rare browser without container query units.
     Coefficient/cap reduced (13→10cqw, 42→34px) so the wordmark reads
     narrower with visible margin inside the bar, rather than stretching
     edge to edge — the outer bar itself already tracks the drawer's
     width exactly via width:100%; this only pulls the text in from it. */
  font-size: clamp(20px, 6.5vw, 34px);
  font-size: clamp(20px, 10cqw, 34px);
  font-weight: 700;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 0;
}
.nm-brand-logo-muse { color: var(--accent); }
.nm-brand-logo-rest { color: #fff; }

/* ── FOOTER ZONE — logo row + social tab bar (39px) + meta strip (89px) ── */
.nm-footer-wrap {
  flex-shrink: 0;
  position: relative;
  background: #181818;    /* shows through the 2px gap below the logo — keeps the seam dark, not the panel's light bg */
  /* Establishes this box's own rendered width as a query context, so
     the logo below can size itself off the ACTUAL drawer width rather
     than the viewport (see .nm-brand-logo). */
  container-type: inline-size;
}

/* Social tab bar — 3 equal cells, 1px dark gap between and below */
.nm-social-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;                    /* 1px between cells — gap color set by background below */
  height: 39px;
  background: #181818;         /* dark gap color shows through between cells */
  border-bottom: 1px solid #181818;  /* 1px dark gap below the bar */
}
.nm-soc-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);            /* cells sit on top of gap bg */
  color: #fff;
  text-decoration: none;
  transition: background 0.15s;
}@media (hover: hover) and (pointer: fine) {

.nm-soc-cell:hover { background: var(--accent-dark); }
}
.nm-soc-cell svg { display: block; }
.nm-soc-wa {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: #fff;
}

/* Meta strip — Figma: bg:#ed4204, h:89px, two-column layout */
.nm-footer-meta {
  background: var(--accent);
  height: 89px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 18px 0 19px;
  gap: 0;
}
.nm-footer-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nm-footer-col:last-child { align-items: flex-end; text-align: right; }
.nm-footer-meta-row {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  line-height: 17.6px;
  color: #fff;
  display: flex;
  gap: 0;
  white-space: nowrap;
}
.fmr-email     { color: #fff; font-weight: 400; text-transform: lowercase; }
.fmr-key       { color: rgba(255,255,255,0.7); text-transform: uppercase; }
.fmr-val       { font-weight: 700; color: #fff; text-transform: uppercase; }
.fmr-edition   { color: #181818; font-weight: 700; }  /* dark on red bg — matches Figma #181818 */
.fmr-copyright { color: #181818; font-weight: 700; text-transform: uppercase; font-size: 10px; line-height: 17.6px; }

/* Menu overlay scrim */
.nav-menu-scrim {
  position: fixed;
  inset: 0;
  background: rgba(18,18,18,0.25);
  z-index: 189;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .nav-menu-scrim { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
}
.nav-menu-scrim.open { opacity: 1; pointer-events: all; }
.nav-menu-scrim.dragging { transition: none; }

/* Content-shift depth effect — only the persistent nav bar and the active
   page shift, never the drawer/backdrop/other overlays (cart, wishlist, etc) */
body > nav:not(.nav-bottom), body > .pg {
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
body.nav-open > nav:not(.nav-bottom), body.nav-open > .pg {
  transform: translateX(12px);
}

/* ══════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR
   ══════════════════════════════════════════════════ */

/* Base: always hidden — overridden below per breakpoint.
   Use nav.nav-bottom selector to beat the global nav{} rule. */
nav.nav-bottom {
  display: none;
}

/* Desktop: hard-hide */
@media (min-width: 701px) {
  nav.nav-bottom { display: none !important; }
}

/* Mobile: fixed to viewport bottom */
@media (max-width: 700px) {
  nav.nav-bottom {
    display: flex !important;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /*
     * SPEC: Visible bar height = 52px (within 48–56px range)
     *       Total height       = 80px + env(safe-area-inset-bottom)
     *                          → 80–84px on iPhone with home indicator
     *                          → 52px on Android / older iPhones
     */
    height: calc(80px + env(safe-area-inset-bottom)) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    align-items: stretch !important;
    background: #141414 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 9999 !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* Body offset = visible bar height + safe area */
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }

  /* Scroll-to-top clears the bar with 8px breathing room */
  #stt-btn { bottom: calc(90px + env(safe-area-inset-bottom)) !important; right: 14px; }

  /*
   * SPEC: Touch target 48×48px minimum
   *       5 items share full width equally
   */
  .nb-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    color: rgba(255,255,255,0.3);
    font-family: var(--mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Vertical padding centres content in 52px bar */
    padding: 8px 2px 20px;
    position: relative;
    /* Guarantee 48×48px touch target on all 5 tabs */
    min-height: 48px;
    min-width: 48px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    transition: color 0.16s ease, background 0.16s ease;
  }
  .nb-tab:last-child { border-right: none; }

  /* Press state */
  .nb-tab:active {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.65);
  }

  /*
   * SPEC: Icon size 24×24px
   *       Wrapper adds 4px padding each side → 32×32px tap-area boost
   */
  .nb-icon-wrap {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border-radius: 8px;
    transition: background 0.16s ease;
  }
  .nb-tab svg {
    width: 24px;   /* spec: 24×24px */
    height: 24px;
    display: block;
    flex-shrink: 0;
    transition: stroke 0.16s ease;
  }

  /* Label — below icon, uppercase mono, compact */
  .nb-tab-label {
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.05em;
  }

  /* ── ACTIVE STATE ── */
  .nb-tab.on { color: #ffffff; }
  .nb-tab.on .nb-icon-wrap { background: rgba(237,66,4,0.18); }

  /* Orange pill indicator at very top of bar */
  .nb-tab.on::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 2px;
    background: #ED4204;
    border-radius: 0 0 3px 3px;
  }

  /* Stories tab active state — green, not orange, matching its drawer accent */
  .nb-tab[data-tab="stories"].on .nb-icon-wrap { background: rgba(103,120,78,0.22); }
  .nb-tab[data-tab="stories"].on::after { background: #67784E; }

  /* Clan / Discovery Lab tabs — active state now matches Oils/Perfumes default accent */

  /* Wishlist badge */
  .nb-tab-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 22px);
    background: #c8474a;
    color: #fff;
    font-size: 7px;
    font-family: var(--mono);
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    pointer-events: none;
    border: 1.5px solid #141414;
  }
  .nb-tab-badge.show { display: flex; }
}
@media (max-width: 700px) {
  /* Ticker */
  .nav-ticker { height: 28px; }
  .nav-ticker-item { font-size: 9px; padding: 0 24px; }

  nav { border-bottom: none; }

  /* Identity band — burger left | logo center | icons right */
  .nav-identity {
    height: 52px;
    padding: 0 14px;
    grid-template-columns: auto 1fr auto;
    gap: 0;
    align-items: center;
  }
  .nav-meta { display: none; }
  /* Logo centered between burger and icons */
  .nav-logo-center {
    justify-self: center;
    align-items: center;
  }
  .nav-logo-wordmark {
    font-size: 22px;
    letter-spacing: -1.2px;
    font-weight: 700;
  }
  .nav-logo-sub { display: none; }
  .nav-logo-center::before, .nav-logo-center::after { display: none; }

  /* Collapse social links on mobile, keep wish + cart tight right */
  .nav-soc-group { display: none; }
  .nav-hide-mobile { display: none !important; }
  .nav-actions {
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
  }

  /* Cart button — icon only on mobile, properly sized */
  .cart-btn .cart-label { display: none; }
  .cart-btn {
    padding: 0;
    width: 34px;
    height: 34px;
    justify-content: center;
    gap: 0;
    border-radius: var(--radius);
    position: relative;
  }
  .cart-btn .cart-count {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 16px; height: 16px;
    border-radius: 50%;
    font-size: 9px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .nav-wish-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .cart-count { min-width: 15px; height: 15px; font-size: 8px; border-radius: 8px; }

  /* Show burger button on mobile */
  .nav-burger { display: flex; }

  /* Hide horizontal category bar — menu replaces it */
  .nav-categories { display: none; }

  /* Sticky offsets with no categories bar: ticker(28) + identity(52) = 80px */
  .fbar { top: 80px; }
  .ds-type-bar { top: 80px; }



  /* Fbar mobile — scrollable, 11px pills, no labels */
  .fbar-inner { height: 48px; padding: 0 0 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fbar-inner::-webkit-scrollbar { display: none; }
  .fpills { padding-right: 12px; }
  .fp { font-size: 11px; padding: 6px 14px; height: 34px; }
  .pgh-stu-cta { height: 34px; padding: 0 10px; font-size: 9px; }
  .pgh-stu-cta .stu-cta-full { display: none; }
  .pgh-stu-cta .stu-cta-short { display: inline; }
  .fbar-lbl { display: none; }
  .ds-type-inner { height: 48px; padding: 0 0 0 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .ds-type-inner::-webkit-scrollbar { display: none; }
  .ds-type-pills { flex-shrink: 0; }
  .ds-bundle-info { flex-shrink: 0; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  .ds-type-pill { font-size: 11px; padding: 6px 14px; height: 34px; white-space: nowrap; }
  .ds-type-lbl { display: none; }

  /* Body padding — handled by the new bottom nav block above */

  /* About hero */
  .ab-hero-inner { grid-template-columns: 1fr; padding: 28px var(--gutter); gap: 20px; }
  .ab-hero::after { left: var(--gutter); right: var(--gutter); }
  .ab-hero-r { flex-direction: row; align-items: flex-start; }
  .ab-bottle-frame { width: 96px; height: 136px; flex-shrink: 0; }
  .ab-pils { width: auto; flex: 1; }
  .ab-hero h1 { font-size: clamp(26px, 7vw, 40px); }
  .ab-stats-inner { flex-wrap: wrap; }
  .ab-stat { min-width: 33%; border-bottom: 1px solid var(--border); }
  .ab-vals-inner { grid-template-columns: 1fr; }
  .ab-cta-inner { flex-direction: column; gap: 14px; }
  .ab-cta-btns { flex-direction: column; width: 100%; }
  .btn-p, .btn-s { width: 100%; text-align: center; }

  /* Shared page heroes — left-aligned composition */
  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px var(--gutter) 20px;
  }
  .hero-l {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
  }
  .hero-l h1 {
    font-size: 28px !important;
    white-space: normal;
    line-height: 1.1;
  }
  .hero-r {
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    width: 100%;
  }
  .h-div { display: none; }
  .h-stat { padding: 4px 16px 4px 0; }

  /* Product grids — 2 col */
  .grid { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }

  /* Filter bars — scrollable */
  .fbar-inner { overflow-x: auto; height: 44px; }
  .ds-type-inner { overflow-x: auto; }

  /* Discovery */
  .ds-hero-inner { grid-template-columns: 1fr; gap: 20px; padding: 28px var(--gutter) 24px; }
  .ds-hero h1 { font-size: 26px !important; }
  .ds-hero h1 em { font-size: 36px !important; }
  .ds-hero-eyebrow { margin-bottom: 10px; }
  .ds-hero-r { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .ds-hero-stat { flex: 1; min-width: 120px; padding: 10px 14px; }
  .ds-how-inner { grid-template-columns: 1fr; }
  /* 2-col discovery grid on mobile */
  .ds-scent-grid { grid-template-columns: repeat(2, 1fr); }
  /* Preset grid — 1-col on mobile */
  .ds-presets { grid-template-columns: 1fr; gap: 4px; background: transparent; }

  /* ── Mobile preset card — redesigned for 2-col legibility ── */
  .ds-preset {
    min-height: auto;
    padding: 14px 12px 14px;
  }
  .ds-preset-badge {
    font-size: 8px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
  }
  .ds-preset-header { gap: 6px; margin-bottom: 8px; }
  /* Name — tighter, 2 lines max */
  .ds-preset h3 {
    font-size: 15px;
    letter-spacing: -0.3px;
    margin-bottom: 2px;
  }
  /* Alias — keep, small */
  .ds-preset-alias { font-size: 10px; margin-bottom: 6px; }
  /* Preset description — 4-line clamp on mobile, full-width card has the room */
  .ds-preset-sub {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.5;
    margin-bottom: 10px;
  }
  /* Scent tags — tighter wrapping */
  .ds-preset-scents { gap: 3px; margin-bottom: 10px; }
  .ds-preset-tag { font-size: 9px; padding: 1px 5px; }
  /* Footer — price stacks above CTA, price-row wraps */
  .ds-preset-footer { gap: 8px; padding-top: 10px; }
  .ds-preset-price-row { flex-wrap: wrap; gap: 4px; align-items: baseline; }
  .ds-preset-price { font-size: 17px; }
  .ds-preset-save { font-size: 8px; padding: 2px 5px; }
  /* CTA — compact but full-width and tappable */
  .ds-preset-add { font-size: 9px; padding: 9px 8px; }

  /* ── Mobile card tuning — compact, legible at 2-col ── */
  .ds-sc {
    padding: 14px 11px 12px;
    min-height: 120px;
  }
  .ds-sc-name {
    font-size: 13px;
    padding-right: 26px;
    font-weight: 600;
  }
  .ds-sc-alias {
    font-size: 11px;
    margin-bottom: 8px;
  }
  .ds-sc-check {
    width: 18px;
    height: 18px;
    top: 11px;
    right: 9px;
    font-size: 9px;
  }
  .ds-sc-accord {
    font-size: 8px;
    padding: 2px 6px;
  }
  /* Description — 3-line clamp on mobile scent selection cards */
  .ds-sc-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.5;
    color: var(--ink-3);
    margin-top: 6px;
  }
  /* Discovery tray — sticky, scrolls with content, sticks above nav when reached */
  .ds-tray {
    position: sticky !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    z-index: 8000 !important;
  }
  .ds-tray .ds-tray-inner {
    padding: 10px 14px 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  /* Top row: label spans full width */
  .ds-tray-left {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .ds-tray-label {
    font-size: 9px !important;
    margin-bottom: 4px !important;
  }
  /* Scent tags: horizontal scroll instead of wrap — prevents tray height jumping */
  .ds-tray-scents {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 4px !important;
  }
  .ds-tray-scents::-webkit-scrollbar { display: none; }
  .ds-tray-tag { font-size: 10px !important; padding: 2px 8px !important; flex-shrink: 0 !important; }
  .ds-tray-empty { font-size: 11px !important; }
  /* Bottom row: price left, button right — always on same line */
  .ds-tray-right {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }
  .ds-tray-pricing { text-align: left !important; }
  .ds-tray-total { font-size: 20px !important; }
  .ds-tray-saving { font-size: 9px !important; }
  .ds-tray-btn {
    font-size: 9px !important;
    padding: 9px 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .ds-body { padding-bottom: 24px; }

  /* List view — mobile: full column stack, clean spacing */
  .lv .card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px var(--gutter);
    gap: 0;
  }
  .lv .c-l {
    padding-right: 0;
    margin-bottom: 10px;
  }
  .lv .c-r {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lv .pr-disp { min-width: 0; text-align: left; font-size: 18px; }
  .lv .pr-row { flex-wrap: wrap; }
  .lv .add-btn { flex: 1; min-width: 120px; }

  /* Perf list view — mobile */
  .pgrid.lv .pc {
    flex-direction: column;
    align-items: stretch;
    padding: 14px var(--gutter);
    gap: 0;
    overflow: visible;
  }
  .pgrid.lv .pc-l {
    padding-right: 0;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
  }
  .pgrid.lv .pc-desc { display: block; }
  .pgrid.lv .pc-notes { display: block; }
  .pgrid.lv .pc-pricing {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 0;
  }
  .pgrid.lv .pc-price-row { justify-content: flex-start; }
  .pgrid.lv .pc-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .pgrid.lv .pc-sz-row { flex-wrap: wrap; }
  .pgrid.lv .pc-add { width: auto; flex: 1; }

  /* Cart + Wishlist drawers full-width */
  /* ══════════════════════════════════════════════════
     BURGER MENU DRAWER — mobile compaction
     Goal: entire drawer (heading + items + footer)
     fits within viewport minus nav bar (80px).
     Nav bar height: 80px + safe-area at bottom.
     ══════════════════════════════════════════════════ */

  /* Drawer height — constrained to viewport minus nav bar */
  .nav-menu {
    height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom));
    top: 0;
    bottom: calc(80px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  /* Heading row — 650px target: generous top breathing room */
  .nm-heading-row {
    padding: 28px 18px 12px 16px;
  }
  .nm-close {
    top: 30px;
  }
  .nm-heading {
    font-size: 32px;
    line-height: 24px;
  }

  /* Nav item rows: 46px — comfortable touch target */
  .nm-item {
    height: 46px;
    min-height: 46px;
    font-size: 11px;
  }

  /* Group label rows: 30px */
  .nm-group-lbl {
    height: 30px;
    min-height: 30px;
  }

  /* Brand zone: flex:1 so it fills remaining space up to ~650px total */
  .nm-brand-zone {
    flex: 1 1 auto;
    min-height: 56px;
  }
  .nm-brand-est {
    top: 16px;
    font-size: 10px;
  }

  /* Logo row — height and font-size now live entirely in the single
     base .nm-brand-logo rule (a continuous clamp()), so no per-
     breakpoint override is needed here anymore. */

  /* Social bar */
  .nm-social-bar {
    height: 38px;
  }

  /* Meta strip */
  .nm-footer-meta {
    height: 80px;
  }

  /* ── Bottom-sheet drawers on mobile — clear the fixed nav bar ── */
  .c-dr,
  .wl-dr,
  .st-dr {
    /* Reset right-side slide */
    top: auto !important;
    right: 0 !important;
    left: 0 !important;
    /* Sit above the 80px fixed bottom nav bar, not behind it */
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Height shrunk to account for the nav bar clearance above */
    height: calc(92dvh - 80px - env(safe-area-inset-bottom)) !important;
    max-height: calc(92dvh - 80px - env(safe-area-inset-bottom)) !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform 220ms cubic-bezier(0.23,1,0.32,1) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .c-dr.on,
  .wl-dr.on,
  .st-dr.on {
    transform: translateY(0) !important;
    transition: transform 380ms cubic-bezier(0.22,1,0.36,1) !important;
  }
  /* Drag handle pill — visual affordance for bottom sheet */
  .c-dr::before,
  .wl-dr::before,
  .st-dr::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  /* Item list scrolls independently; footer (buttons) always stays visible */
  .c-dr .dr-body,
  .wl-dr .dr-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Footer never shrinks, never scrolls off — sits pinned at drawer bottom */
  .c-dr .dr-ft {
    flex-shrink: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  /* Wishlist drawer — same scroll/pin pattern */
  .wl-dr .wl-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .wl-dr .wl-ft {
    flex-shrink: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }

  /* Footer */
  footer .ft-inner { flex-direction: column; text-align: center; gap: 2px; padding-top: 12px; padding-bottom: 12px; }
  .ft-wordmark { font-size: clamp(32px, 10.72vw, 64px); letter-spacing: -0.06em; transform: translateY(0.22em); }
  .ft-lnks { gap: 6px; }
  footer { margin-bottom: 0; }
}

/* ══════════════════════════════════════════
   MUSE CLAN PAGE
   ══════════════════════════════════════════ */

/* ── Clan Hero ── */
.clan-hero {
  border-bottom: 1px solid var(--border);
  background: var(--ink);
  position: relative;
  overflow: hidden;
  /* Fill exactly one viewport, edge to edge — but the sticky 3-tier nav
     above (ticker 32 + identity 68 + categories 48 = 148px) sits in
     normal document flow, not overlaid, so it eats into that viewport
     before the hero even starts. The "Tier 01·02·03 — Loyalty &
     Community" phase bar (50px) immediately below the hero is also
     pulled into this same one-screen composition, so it's visible
     without scrolling rather than sitting just past the fold.
     Subtracting both here is what makes "nav + hero + phase bar" sum
     to exactly one screen instead of one screen plus 198px of overflow.
     100dvh (dynamic viewport height) tracks the *visible* viewport on
     mobile browsers as their address-bar chrome shows/hides, avoiding
     the classic 100vh overflow/underflow. Falls back to 100vh where
     dvh isn't supported. */
  height: calc(100vh - 148px - 50px);
  height: calc(100dvh - 148px - 50px);
  min-height: 480px;
}
.clan-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 32px,
    rgba(200,169,110,0.04) 32px, rgba(200,169,110,0.04) 33px
  );
  pointer-events: none;
  z-index: 2;
}
.clan-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.clan-hero-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  display: block;
  opacity: 0;
  animation: heroSlide 15s ease-in-out infinite;
}
.clan-hero-slide:nth-child(1) { animation-delay: 0s; }
.clan-hero-slide:nth-child(2) { animation-delay: -5s; }
.clan-hero-slide:nth-child(3) { animation-delay: -10s; }
@keyframes heroSlide {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  30%   { opacity: 1; }
  36%   { opacity: 0; }
  100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .clan-hero-slide { animation: none; opacity: 0; }
  .clan-hero-slide:first-child { opacity: 1; }
}
.clan-hero-bg::after {
  /* scrim — legibility for the overlaid text, darkest left where copy sits */
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,15,15,0.88) 0%, rgba(15,15,15,0.62) 40%, rgba(15,15,15,0.15) 68%, rgba(15,15,15,0) 82%),
    linear-gradient(0deg, rgba(15,15,15,0.5) 0%, rgba(15,15,15,0) 30%);
  z-index: 1;
}
.clan-hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  /* Fill the hero's height exactly — never add to it. The tierbar is
     absolutely positioned (see .clan-hero-tierbar below) and overlays
     this box rather than sitting after it, so it can never push the
     hero taller than 100dvh. */
  height: 100%;
  /* Bottom padding = tierbar height (50px) + the 100px gap the copy
     should sit above it — anchored via align-items:flex-end below,
     not centered, so that gap holds regardless of how tall the copy
     block ends up being. */
  padding: 44px var(--gutter) 150px;
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.clan-hero-l { max-width: 560px; flex-shrink: 0; position: relative; z-index: 2; }

/* ── Hero tier button bar — bottom edge, 5 across, 50px tall, within 1400px ── */
.clan-hero-tierbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: linear-gradient(0deg, rgba(15,15,15,0.94) 0%, rgba(15,15,15,0.8) 70%, rgba(15,15,15,0.35) 100%);
  border-top: 1px solid rgba(200,169,110,0.18);
}
/* Scroll-down cue — sits in the gap between the hero copy and the
   tier bar (see .clan-hero-inner's padding-bottom, which reserves
   exactly this space), bottom offset = tierbar height (50px) + a
   small clearance so it doesn't touch the bar's top edge. */
.clan-hero-scroll {
  position: absolute; left: 50%; bottom: 62px; z-index: 4;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  animation: clanHeroScrollBounce 2s ease-in-out infinite;
  transition: background 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .clan-hero-scroll:hover { background: rgba(255,255,255,0.18); border-color: #fff; }
}
@keyframes clanHeroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .clan-hero-scroll { animation: none; }
}
.clan-hero-tierbar-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 50px;
}
.clan-tb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px;
  border-right: 1px solid rgba(200,169,110,0.14);
  text-decoration: none;
  transition: background 0.15s ease;
  white-space: nowrap; overflow: hidden;
}
.clan-hero-tierbar-inner a:last-child { border-right: none; }
.clan-tb-num {
  font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--accent); flex-shrink: 0;
}
.clan-tb-ph2 .clan-tb-num { color: #d4b87c; }
.clan-tb-name {
  font-family: var(--grotesk); font-size: 11px; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(248,245,240,0.75);
  overflow: hidden; text-overflow: ellipsis;
}
@media (hover: hover) and (pointer: fine) {
.clan-tb-btn:hover { background: rgba(200,169,110,0.08); }
.clan-tb-btn:hover .clan-tb-name { color: var(--white); }
}
.clan-tb-btn:active { background: rgba(200,169,110,0.14); }
.clan-hero-eyebrow {
  font-family: var(--grotesk); font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.clan-hero-eyebrow::before {
  content: '⚜️'; font-size: 14px;
}
.clan-hero-path {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-bottom: 18px;
}
.clan-hero-path span { color: rgba(248,245,240,0.55); }
.clan-hero-path span.ph2 { color: #d4b87c; }
.clan-hero-path span:first-child { color: var(--accent); }
.clan-hero-path i { color: rgba(248,245,240,0.25); font-style: normal; font-size: 9px; }
.clan-hero h1 {
  font-family: var(--grotesk);
  font-size: 32px;
  font-weight: 700; line-height: 1.05; letter-spacing: -1px;
  color: var(--white); margin-bottom: 14px;
}
.clan-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 46px;
  letter-spacing: 0;
  color: var(--accent);
}
.clan-hero-body {
  font-size: 12.5px; color: rgba(248,245,240,0.6); line-height: 1.8;
  max-width: 460px; margin-bottom: 22px;
}
.clan-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-clan {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; background: var(--accent); color: var(--ink);
  border: none; padding: 11px 26px; cursor: pointer;
  border-radius: var(--radius); transition: background 0.2s; font-weight: 400;
}@media (hover: hover) and (pointer: fine) {

.btn-clan:hover { background: #c93800; }
}
.btn-clan-o {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; background: transparent; color: rgba(248,245,240,0.7);
  border: 1px solid rgba(248,245,240,0.25); padding: 11px 26px;
  cursor: pointer; border-radius: var(--radius); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out;
}@media (hover: hover) and (pointer: fine) {

.btn-clan-o:hover { border-color: rgba(248,245,240,0.5); color: var(--white); }
}

/* ── Discovery Lab hero — buttons 20% smaller, orange outline ── */
.ds-hero .btn-clan,
.ds-hero .btn-clan-o {
  font-size: 10px; padding: 9px 21px;
  background: transparent; color: #ed4204;
  border: 1px solid #ed4204;
}@media (hover: hover) and (pointer: fine) {

.ds-hero .btn-clan:hover,
.ds-hero .btn-clan-o:hover {
  background: rgba(237,66,4,0.1); border-color: #ed4204; color: #ed4204;
}
}

/* ── Clan hero — buttons 20% smaller; outline button orange ── */
.clan-hero .btn-clan,
.clan-hero .btn-clan-o {
  font-size: 10px; padding: 9px 21px;
}
.clan-hero .btn-clan-o {
  background: transparent; color: #ed4204;
  border: 1px solid #ed4204;
}@media (hover: hover) and (pointer: fine) {

.clan-hero .btn-clan-o:hover {
  background: rgba(237,66,4,0.1); border-color: #ed4204; color: #ed4204;
}
}

/* ── Phase dividers ── */
.clan-phase {
  border-bottom: 1px solid var(--border);
}
.clan-phase-hd {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 50px;
  background: var(--ink);
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; row-gap: 8px;
}
/* First phase bar sits immediately below the hero — flush, not floating with a gap */
.clan-hero + .clan-phase .clan-phase-hd {
  padding-top: 0;
}
.clan-phase-num {
  font-family: var(--serif); font-size: 12px; letter-spacing: 0.02em;
  text-transform: uppercase; color: #000;
  padding: 4px 12px; border: 1px solid #ed4204;
  background: #ed4204;
  border-radius: var(--radius); white-space: nowrap;
}
.clan-phase-title {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.07em;
  text-transform: uppercase; color: #878787;
}
@media (max-width: 480px) {
  .clan-phase-hd { gap: 10px; padding-left: var(--gutter); padding-right: var(--gutter); }
  .clan-phase-num { font-size: 11px; padding: 3px 10px; }
  .clan-phase-title { font-size: 11px; }
}

/* ── Tier sections ── */
.clan-tier-section {
  max-width: var(--wrap); margin: 0 auto;
  padding: 14px var(--gutter) 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s ease;
  background: #e6e6e6;
}
.clan-tier-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0;
  transition: opacity 0.15s ease;
}
.clan-tier-icon-lg { font-size: 20px; line-height: 1; flex-shrink: 0; padding-top: 2px; }
.clan-tier-hd-txt { flex: 1; }
.clan-tier-label {
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent-dark); margin-bottom: 2px; display: flex; align-items: center; gap: 6px;
}
.clan-tier-label::before { content: ''; display: inline-block; width: 14px; height: 1px; background: var(--accent); }
.clan-tier-h2 {
  font-family: var(--grotesk); font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700; letter-spacing: -0.3px; color: var(--ink); line-height: 1.05; margin-bottom: 3px;
}
.clan-tier-h2 em { font-family: var(--serif); font-style: italic; color: var(--accent-dark); font-weight: 300; letter-spacing: 0; }
.clan-tier-desc {
  font-size: 12px; color: var(--ink-3); line-height: 1.45; max-width: 500px;
}
.clan-tier-goal-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--card-bg);
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; flex-shrink: 0; margin-top: 4px;
}
.clan-tier-goal-pill strong { color: var(--accent-dark); }

/* ── Back to top button ── */
.clan-top-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  color: #fff; padding: 7px 14px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
  margin-top: 16px;
  position: relative; z-index: 1;
}
.clan-top-btn::before { content: '↑'; font-size: 13px; line-height: 1; }@media (hover: hover) and (pointer: fine) {

.clan-top-btn:hover {
  background: #2a2a2a; border-color: #2a2a2a; color: #fff;
}
}

/* ── Refill pricing table ── */
.clan-table-wrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 14px;
}
.clan-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 12px;
}
.clan-table thead tr {
  background: var(--ink); color: var(--bg);
}
.clan-table thead th {
  padding: 7px 12px; text-align: left;
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  font-weight: 600; border-right: 1px solid rgba(248,245,240,0.1);
}
.clan-table thead th:last-child { border-right: none; }
.clan-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.clan-table tbody tr:last-child { border-bottom: none; }@media (hover: hover) and (pointer: fine) {

.clan-table tbody tr:hover { background: var(--card-bg); }
}
.clan-table tbody td {
  padding: 7px 12px; color: var(--ink-2);
  border-right: 1px solid var(--border);
}
.clan-table tbody td:last-child { border-right: none; }
.clan-table .td-price {
  font-family: var(--serif); font-size: 16px; font-weight: 300;
  color: var(--ink);
}
.clan-table .td-size { font-weight: 400; color: var(--ink); }
.clan-table .td-hl { color: var(--accent-dark); font-size: 11px; letter-spacing: 0.03em; }

/* Clan notice pills */
.clan-notices {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.clan-notice {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ink-2); padding: 5px 10px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); line-height: 1.3;
}
.clan-notice::before { content: '▶︎'; font-size: 9px; color: var(--accent-dark); flex-shrink: 0; }

/* Conditions list */
.clan-conds {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px;
}
.clan-cond {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11px; color: var(--ink-2); padding: 7px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); line-height: 1.45;
}
.clan-cond-dot { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; margin-top: 6px; flex-shrink: 0; }

/* ── Referral reward table ── */
.clan-rewards-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
}
.clan-reward-cell {
  background: var(--card-bg); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 3px;
  transition: background 0.15s;
}@media (hover: hover) and (pointer: fine) {

.clan-reward-cell:hover { background: var(--white); }
}
.clan-reward-n {
  font-family: var(--serif); font-size: 20px; font-weight: 300;
  color: rgba(18,18,18,0.55); line-height: 1; margin-bottom: 1px;
}
.clan-reward-label {
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3);
}
.clan-reward-val {
  font-family: var(--serif); font-size: 14px; font-weight: 400; color: var(--ink);
  line-height: 1.2;
}
.clan-reward-val em { font-style: italic; color: var(--accent-dark); }
.clan-reward-note {
  font-size: 12px; color: var(--ink-3); line-height: 1.4;
}

/* ── Tier 04–05: Partner tier ── */
.clan-partner-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
}
.clan-partner-col {
  background: var(--card-bg); padding: 14px 14px;
  display: flex; flex-direction: column; gap: 8px;
}@media (hover: hover) and (pointer: fine) {

.clan-partner-col:hover { background: var(--white); }
}

/* ── Tier 04–05 section: 10% deeper bg than base --bg/#eeeeee ── */
.clan-tier-section.tier-partner {
  background: #e6e6e6;
}
.clan-tier-section.tier-partner .clan-partner-col,
.clan-tier-section.tier-partner .clan-option,
.clan-tier-section.tier-partner .clan-pl-item,
.clan-tier-section.tier-partner .clan-rewards-grid,
.clan-tier-section.tier-partner .clan-reward-cell {
  background: var(--card-bg);         /* matches Tier 03's inner box color */
}@media (hover: hover) and (pointer: fine) {

.clan-tier-section.tier-partner .clan-partner-col:hover,
.clan-tier-section.tier-partner .clan-option:hover,
.clan-tier-section.tier-partner .clan-pl-item:hover {
  background: var(--white);           /* matches Tier 03's hover state */
}
}
.clan-partner-col-hd {
  font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-3); padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.clan-partner-col h4 {
  font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--ink);
  line-height: 1.15;
}
.clan-partner-col h4 em { font-style: italic; color: var(--accent-dark); }
.clan-partner-col p { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.clan-benefit-list {
  display: flex; flex-direction: column; gap: 5px; margin-top: 2px;
}
.clan-benefit-item {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: var(--ink-2); line-height: 1.35;
}
.clan-benefit-ic { color: var(--accent-dark); font-size: 10px; margin-top: 2px; flex-shrink: 0; }

/* ── Options row ── */
.clan-options-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 12px;
}
.clan-option {
  background: var(--card-bg); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 3px;
  transition: background 0.15s;
}@media (hover: hover) and (pointer: fine) {

.clan-option:hover { background: var(--white); }
}
.clan-option-num {
  font-family: var(--serif); font-size: 20px; font-weight: 300;
  color: rgba(18,18,18,0.55); line-height: 1;
}
.clan-option-label {
  font-size: 12px; color: var(--ink-2); line-height: 1.4;
}
.clan-option-label strong { color: var(--ink); display: block; margin-bottom: 1px; font-weight: 400; font-family: var(--serif); font-size: 13px; }

/* ── Private Label ── */
.clan-pl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 14px;
}
.clan-pl-item {
  background: var(--card-bg); padding: 12px 12px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.15s;
}@media (hover: hover) and (pointer: fine) {

.clan-pl-item:hover { background: var(--white); }
}
.clan-pl-ic { font-size: 15px; margin-bottom: 2px; }
.clan-pl-name {
  font-family: var(--serif); font-size: 13px; font-weight: 400; color: var(--ink); line-height: 1.2;
}
.clan-pl-desc {
  font-size: 12px; color: var(--ink-3); line-height: 1.4;
}

/* ── Manifesto / closing CTA ── */
.clan-manifesto {
  position: relative; overflow: hidden;
}
.clan-manifesto-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 64px var(--gutter);
  position: relative; z-index: 1;
  text-align: center;
  background: var(--ink);
  overflow: hidden;
}
.clan-manifesto-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 28px,
    rgba(200,169,110,0.03) 28px, rgba(200,169,110,0.03) 29px
  );
  pointer-events: none;
  z-index: 0;
}
.clan-mf-eyebrow {
  font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 24px; display: block;
}

/* ── Compact dark section (Oil / Spray pages) — same look as the Clan manifesto,
   scaled down to a fixed 250px band that sits directly above the footer ── */
.brand-lines-inner {
  height: 250px; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.brand-lines-inner .clan-mf-eyebrow { margin-bottom: 18px; }
.brand-lines-inner .clan-mf-quote { margin-bottom: 0; font-size: clamp(16px, 1.9vw, 23px); max-width: 760px; line-height: 1.55; }
/* Stories page dark section — green instead of the shared orange accent */
#pg-stories .clan-mf-eyebrow { color: #67784E; }
#pg-stories .clan-mf-quote em { color: #67784E; }
@media (max-width: 700px) {
  .brand-lines-inner { height: 240px; }
}
.clan-mf-quote {
  font-family: var(--serif); font-size: clamp(22px, 3vw, 38px);
  font-weight: 300; font-style: italic; color: var(--white);
  line-height: 1.3; max-width: 700px; margin: 0 auto 32px;
}
.clan-mf-quote em { color: var(--accent); font-style: normal; }
.clan-journey {
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap; margin-bottom: 40px;
}
.clan-j-step {
  font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase;
  color: rgba(248,245,240,0.5); padding: 6px 12px;
  white-space: nowrap;
}
.clan-j-step.hl { color: var(--accent); }
.clan-j-arrow {
  color: rgba(200,169,110,0.3); font-size: 12px; padding: 0 2px;
}
.clan-mf-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.fb-lbl-short { display: none; }

/* ── Mobile responsive ── */
@media (max-width: 900px) {
  /* Hero height is handled by the base rule (desktop nav offset) up to
     700px, where the mobile-nav override below takes over with its own
     (smaller) offset — see that block for why the numbers differ. */
  .clan-rewards-grid { grid-template-columns: 1fr 1fr; }
  .clan-pl-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .fb-lbl-full { display: none; }
  .fb-lbl-short { display: inline; }

  /* Hero height at mobile: subtract BOTH the in-flow sticky nav (ticker
     28 + identity 52 = 80px, categories tier is hidden here) AND the
     fixed bottom tab bar (80px + safe-area, see nav.nav-bottom), which
     overlays the viewport rather than pushing content up. Without the
     second subtraction the hero's bottom — including the 5-tier button
     group — renders underneath that bar instead of stopping above it.
     min-height is a floor only, for very short/landscape viewports, and
     stays well under typical phone heights so it never forces extra
     scroll on its own. */
  .clan-hero {
    height: calc(100vh - 80px - 80px - env(safe-area-inset-bottom));
    height: calc(100dvh - 80px - 80px - env(safe-area-inset-bottom));
    min-height: 420px;
  }

  .clan-hero-inner {
    /* Fill the (now nav- and tab-bar-aware) hero height exactly, same
       as desktop — was `height: auto`, which let content run past the
       viewport and rely on .clan-hero's overflow:hidden to silently
       crop it instead of actually fitting within one screen. Bottom
       padding = tierbar height (44px on mobile) + 80px gap, same
       formula as desktop, anchored via the base rule's
       align-items:flex-end. */
    height: 100%;
    padding: 28px var(--gutter) 124px;
    gap: 20px;
  }
  .clan-hero h1 { font-size: 26px; letter-spacing: -0.8px; text-align: left; }
  .clan-hero h1 em { font-size: 36px; }
  .clan-hero-eyebrow { margin-bottom: 10px; }
  .clan-hero-body { font-size: 13px; margin-bottom: 16px; }
  .clan-hero-actions { flex-direction: row; gap: 8px; flex-wrap: nowrap; }
  .btn-clan, .btn-clan-o {
    flex: 1 1 0; width: auto; text-align: center;
    padding: 11px 8px; font-size: 10.5px; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Tier bar height/typography — hero height & offset are set once,
     above, in the earlier mobile block; not repeated here. */
  .clan-hero-l { max-width: 100%; }
  .clan-hero-slide { object-position: 65% 25%; }
  /* Tier bar stays horizontal like desktop — just tighter */
  .clan-hero-tierbar-inner { height: 44px; padding: 0 10px; }
  .clan-tb-btn { height: 44px; gap: 3px; }
  .clan-tb-num { font-size: 12px; }
  .clan-tb-name { font-size: 8.5px; letter-spacing: 0.01em; }
  .clan-hero-scroll { bottom: 56px; width: 34px; height: 34px; }
  .clan-hero-bg::after {
    background:
      linear-gradient(0deg, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0.55) 45%, rgba(15,15,15,0.25) 100%),
      linear-gradient(90deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.15) 60%, rgba(15,15,15,0) 100%);
  }
  .clan-hero-path { font-size: 9px; gap: 5px; }
  .clan-tier-section { padding: 18px var(--gutter) 20px; }
  .clan-tier-header { flex-direction: column; gap: 12px; }
  .clan-tier-goal-pill { margin-top: 0; }
  .clan-conds { grid-template-columns: 1fr; }
  .clan-rewards-grid { grid-template-columns: 1fr 1fr; }
  .clan-partner-grid { grid-template-columns: 1fr; }
  .clan-options-row { grid-template-columns: 1fr; }
  .clan-pl-grid { grid-template-columns: 1fr; }
  .clan-manifesto-inner { padding: 44px var(--gutter); }
  .clan-journey { gap: 0; }
  .clan-j-step { font-size: 12px; padding: 4px 8px; }
}

/* PAGES */
.pg { display: none; }
.pg.on { display: block; animation: fi 0.3s ease both; }
@keyframes fi { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes fu { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ABOUT — hero refined */
.ab-hero {
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ab-hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 52px var(--gutter) 44px;
  display: grid;
  grid-template-columns: 4fr 2fr;
  align-items: center;
  gap: 40px;
}
.ab-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  max-width: calc(var(--wrap) - var(--gutter) * 2);
  margin: 0 auto;
  height: 1px;
  background: linear-gradient(to right, var(--border-strong), var(--border), transparent);
}
.ab-hero-l { max-width: 100%; }
.ab-ey {
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-ey::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.ab-hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 22px;
}
.ab-hero h1 em { font-style: italic; color: var(--accent-dark); }
.ab-hero-body {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 28px;
}
.ab-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* product visual */
.ab-hero-r {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.ab-bottle-frame {
  width: 180px;
  height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.ab-bottle-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(200,169,110,0.04) 18px,
    rgba(200,169,110,0.04) 19px
  );
}
.ab-bottle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.ab-bottle-svg { opacity: 0.75; }
.ab-bottle-label {
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  color: var(--accent-dark);
  letter-spacing: 0.03em;
}
.ab-pils {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: 180px;
}
.ab-pil {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-pil:last-child { border-bottom: none; }
.ab-pil-ic { font-size: 13px; opacity: 0.7; flex-shrink: 0; }
.ab-pil-lb {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* stats bar */
.ab-stats-bar { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.ab-stats-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; width: 100%; }
.ab-stat { flex: 1; padding: 14px 0; text-align: center; border-right: 1px solid var(--border); }
.ab-stat:last-child { border-right: none; }
.ab-stat-n { font-family: var(--serif); font-size: 24px; font-weight: 300; color: var(--ink); display: block; line-height: 1.1; }
.ab-stat-l { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
/* values grid */
.ab-vals-grid { border-bottom: 1px solid var(--border); }
.ab-vals-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--border); }
.ab-vblk { background: var(--card-bg); padding: 22px 18px; }@media (hover: hover) and (pointer: fine) {

.ab-vblk:hover { background: var(--white); }
}
.ab-vblk-num { font-family: var(--serif); font-size: 32px; font-weight: 300; color: rgba(18,18,18,0.07); line-height: 1; margin-bottom: 7px; }
.ab-vblk h3 { font-family: var(--serif); font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: 7px; line-height: 1.2; }
.ab-vblk h3 em { font-style: italic; color: var(--accent-dark); }
.ab-vblk p { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
/* cta */
.ab-cta { border-top: 1px solid var(--border); }
.ab-cta-inner { max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.ab-cta-txt h3 { font-family: var(--serif); font-size: 20px; font-weight: 300; margin-bottom: 3px; }
.ab-cta-txt h3 em { font-style: italic; color: var(--accent-dark); }
.ab-cta-txt p { font-size: 13px; color: var(--ink-3); }
.ab-cta-btns { display: flex; gap: 10px; flex-shrink: 0; }
.btn-p { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; background: var(--ink); color: var(--bg); border: none; padding: 10px 22px; cursor: pointer; border-radius: var(--radius); transition: background 0.2s; }@media (hover: hover) and (pointer: fine) {

.btn-p:hover { background: var(--accent-dark); }
}
.btn-s { font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; background: transparent; color: var(--ink-2); border: 1px solid var(--border-strong); padding: 10px 22px; cursor: pointer; border-radius: var(--radius); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out; }@media (hover: hover) and (pointer: fine) {

.btn-s:hover { background: var(--bg-2); color: var(--ink); }
}

/* SHARED HERO */
.hero { border-bottom: 1px solid var(--border); }
.hero-inner { max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gutter); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero-l { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.hero-l h1 { font-family: var(--serif); font-size: clamp(24px,3vw,32px); font-weight: 300; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.hero-l h1 em { font-style: italic; color: var(--accent-dark); }
.hero-l h1 span[style] { white-space: nowrap; }
.hero-sub { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.6; max-width: 260px; }
.hero-nav-btns { display: none; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.btn-hero-link {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase; background: var(--ink);
  color: #fff; border: 1px solid var(--ink);
  padding: 7px 16px; border-radius: var(--radius);
  cursor: pointer; transition: background 0.18s, border-color 0.18s;
}@media (hover: hover) and (pointer: fine) {

.btn-hero-link:hover { background: #2a2a2a; border-color: #2a2a2a; }
}
.btn-hero-link--accent {
  background: #ed4204; border-color: #ed4204;
}@media (hover: hover) and (pointer: fine) {

.btn-hero-link--accent:hover { background: #c93800; border-color: #c93800; }
}
.hero-r { display: flex; flex-direction: row; align-items: flex-end; gap: 0; flex-shrink: 0; }
.h-stat { text-align: center; padding: 0 18px; }
.h-stat-n { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--ink); display: block; line-height: 1.2; }
.h-stat-l { font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); }
.h-div { width: 1px; height: 24px; background: var(--border); }

/* ── Oil hero — sliding photo background, content overlaid on top ── */
#pg-oil .hero.oil-hero {
  background: none; /* clear — outside the 1400px frame just shows the page background */
}
#pg-oil .oil-hero-frame {
  position: relative; overflow: hidden;
  max-width: var(--wrap); margin: 0 auto;
  aspect-ratio: 1400 / 301; /* matches the source images' native ratio — no cropping needed */
}
#pg-oil .clan-hero-bg { position: absolute; inset: 0; z-index: 0; }
#pg-oil .hero-inner {
  position: absolute; inset: 0; z-index: 1;
  padding: 24px var(--gutter); margin: 0; max-width: none; min-height: 0;
}
#pg-oil .hero-l { position: relative; z-index: 2; }
#pg-oil .hero-r { position: relative; z-index: 2; }
#pg-oil .hero-l h1 { color: #fff; }
#pg-oil .hero-sub { color: rgba(255,255,255,0.75); }
#pg-oil .h-stat-n { color: #fff; }
#pg-oil .h-stat-l { color: rgba(255,255,255,0.6); }
#pg-oil .h-div { background: rgba(255,255,255,0.25); }
#pg-oil .clan-hero-slide { object-position: center; } /* main visual sits centered — don't inherit the Clan hero's off-center crop */
#pg-oil .clan-hero-bg::after {
  /* half the darkness of the shared desktop/tablet scrim (mobile has its own, separately halved, override below) */
  background:
    linear-gradient(90deg, rgba(15,15,15,0.44) 0%, rgba(15,15,15,0.31) 40%, rgba(15,15,15,0.075) 68%, rgba(15,15,15,0) 82%),
    linear-gradient(0deg, rgba(15,15,15,0.25) 0%, rgba(15,15,15,0) 30%);
}

/* Responsive: crop ~22% off each side (subject is centered, so this is safe)
   and let the frame grow taller instead of staying razor-thin at phone widths */
@media (max-width: 900px) {
  #pg-oil .oil-hero-frame { aspect-ratio: 850 / 301; }
}
@media (max-width: 700px) {
  /* hero-r's price stats were wrapping into a second flex column and landing
     off-screen at this height — drop them here rather than ship it broken */
  #pg-oil .hero-r { display: none; }
  #pg-oil .clan-hero-slide { object-position: 40% center; } /* 10% left of center for the narrower mobile crop */
  #pg-oil .hero-inner { justify-content: flex-end; padding-bottom: 16px; }
  #pg-oil .hero-l { gap: 1px; }
  #pg-oil .clan-hero-bg::after {
    /* half the darkness of the shared mobile scrim */
    background:
      linear-gradient(0deg, rgba(15,15,15,0.45) 0%, rgba(15,15,15,0.275) 45%, rgba(15,15,15,0.125) 100%),
      linear-gradient(90deg, rgba(15,15,15,0.275) 0%, rgba(15,15,15,0.075) 60%, rgba(15,15,15,0) 100%);
  }
}

/* ── Perfume (Spray) hero — same sliding-photo treatment as the Oil hero,
   text placement kept identical, just a 1400×300 frame and 2 slides instead of 3 ── */
#pg-spray .hero.oil-hero {
  background: none; /* clear — outside the 1400px frame just shows the page background */
}
#pg-spray .oil-hero-frame {
  position: relative; overflow: hidden;
  max-width: var(--wrap); margin: 0 auto;
  aspect-ratio: 1400 / 300; /* matches the source images — 1400×300 */
}
#pg-spray .clan-hero-bg { position: absolute; inset: 0; z-index: 0; }
#pg-spray .hero-inner {
  position: absolute; inset: 0; z-index: 1;
  padding: 24px var(--gutter); margin: 0; max-width: none; min-height: 0;
}
#pg-spray .hero-l { position: relative; z-index: 2; }
#pg-spray .hero-r { position: relative; z-index: 2; }
#pg-spray .hero-l h1 { color: #fff; }
#pg-spray .hero-sub { color: rgba(255,255,255,0.75); }
#pg-spray .h-stat-n { color: #fff; }
#pg-spray .h-stat-l { color: rgba(255,255,255,0.6); }
#pg-spray .h-div { background: rgba(255,255,255,0.25); }
#pg-spray .clan-hero-slide { object-position: center; } /* main visual sits centered */
#pg-spray .clan-hero-bg::after {
  /* half the darkness of the shared desktop/tablet scrim (mobile has its own, separately halved, override below) */
  background:
    linear-gradient(90deg, rgba(15,15,15,0.44) 0%, rgba(15,15,15,0.31) 40%, rgba(15,15,15,0.075) 68%, rgba(15,15,15,0) 82%),
    linear-gradient(0deg, rgba(15,15,15,0.25) 0%, rgba(15,15,15,0) 30%);
}

@media (max-width: 900px) {
  #pg-spray .oil-hero-frame { aspect-ratio: 850 / 300; }
}
@media (max-width: 700px) {
  #pg-spray .hero-r { display: none; }
  #pg-spray .hero-inner { justify-content: flex-end; padding-bottom: 16px; }
  #pg-spray .hero-l { gap: 1px; }
  #pg-spray .clan-hero-bg::after {
    background:
      linear-gradient(0deg, rgba(15,15,15,0.45) 0%, rgba(15,15,15,0.275) 45%, rgba(15,15,15,0.125) 100%),
      linear-gradient(90deg, rgba(15,15,15,0.275) 0%, rgba(15,15,15,0.075) 60%, rgba(15,15,15,0) 100%);
  }
}

/* ── Raw Materials hero — same sliding-photo treatment as Oil/Spray,
   text placement kept identical, 1400×300 frame, 2 slides at an even -7.5s split ── */
#pg-raw .hero.oil-hero {
  background: none; /* clear — outside the 1400px frame just shows the page background */
}
#pg-raw .oil-hero-frame {
  position: relative; overflow: hidden;
  max-width: var(--wrap); margin: 0 auto;
  aspect-ratio: 1400 / 300; /* matches the source images — 1400×300 */
}
#pg-raw .clan-hero-bg { position: absolute; inset: 0; z-index: 0; }
#pg-raw .hero-inner {
  position: absolute; inset: 0; z-index: 1;
  padding: 24px var(--gutter); margin: 0; max-width: none; min-height: 0;
}
#pg-raw .hero-l { position: relative; z-index: 2; }
#pg-raw .hero-r { position: relative; z-index: 2; }
#pg-raw .hero-l h1 { color: #fff; }
#pg-raw .hero-sub { color: rgba(255,255,255,0.75); }
#pg-raw .h-stat-n { color: #fff; }
#pg-raw .h-stat-l { color: rgba(255,255,255,0.6); }
#pg-raw .h-div { background: rgba(255,255,255,0.25); }
#pg-raw .clan-hero-slide { object-position: center; } /* main visual sits centered */
#pg-raw .clan-hero-bg::after {
  /* half the darkness of the shared desktop/tablet scrim (mobile has its own, separately halved, override below) */
  background:
    linear-gradient(90deg, rgba(15,15,15,0.44) 0%, rgba(15,15,15,0.31) 40%, rgba(15,15,15,0.075) 68%, rgba(15,15,15,0) 82%),
    linear-gradient(0deg, rgba(15,15,15,0.25) 0%, rgba(15,15,15,0) 30%);
}

@media (max-width: 900px) {
  #pg-raw .oil-hero-frame { aspect-ratio: 850 / 300; }
}
@media (max-width: 700px) {
  #pg-raw .hero-r { display: none; }
  #pg-raw .hero-inner { justify-content: flex-end; padding-bottom: 16px; }
  #pg-raw .hero-l { gap: 1px; }
  #pg-raw .clan-hero-bg::after {
    background:
      linear-gradient(0deg, rgba(15,15,15,0.45) 0%, rgba(15,15,15,0.275) 45%, rgba(15,15,15,0.125) 100%),
      linear-gradient(90deg, rgba(15,15,15,0.275) 0%, rgba(15,15,15,0.075) 60%, rgba(15,15,15,0) 100%);
  }
}

/* FILTER BAR — sticky, readable, 52px */
.fbar { border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 140px; z-index: 90; }
.fbar-inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 0; height: 52px; overflow-x: auto; scrollbar-width: none; }
.fbar-inner::-webkit-scrollbar { display: none; }
.fbar-lbl { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-right: 20px; white-space: nowrap; flex-shrink: 0; font-family: var(--mono); }
.fpills { display: flex; gap: 0; flex-shrink: 0; }
.fp {
  font-size: 12px; letter-spacing: 0.02em; padding: 8px 18px;
  border: 1px solid var(--border); border-right: none;
  background: transparent; color: var(--ink-2);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; white-space: nowrap;
  font-family: var(--mono); height: 36px;
  display: flex; align-items: center;
}
.fp:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.fp:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
.fp.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }@media (hover: hover) and (pointer: fine) {

.fp:hover:not(.on) { background: var(--bg-2); color: var(--ink); }
}
.vtog { margin-left: auto; display: flex; gap: 0; flex-shrink: 0; padding-left: 16px; }
/* Stories page: the grid/list toggle only makes sense where the two
   layouts actually differ — that's mobile (≤900px). Desktop always
   shows the one 3-column thumbnail grid, so hide the control there
   rather than show a toggle that visibly does nothing. The mobile
   override that re-shows this lives in the ≤900px media query and
   uses !important, since this file doesn't guarantee base-before-
   override source ordering across its many interleaved sections. */
#pg-stories .vtog { display: none; }
.vb { padding: 7px 12px; border: 1px solid var(--border); border-right: none; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 15px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; display: flex; align-items: center; }
.vb:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.vb:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
.vb.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }@media (hover: hover) and (pointer: fine) {

.vb:hover:not(.on) { background: var(--bg-2); }
}

/* Mobile filter bar — scroll fade edges + touch scroll */
.fbar-scroll-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.fbar-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
  display: none;
}
@media (max-width: 700px) {
  .fbar { top: 80px; }
  .fbar-inner {
    height: 48px;
    padding: 0 0 0 14px;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fbar-inner::-webkit-scrollbar { display: none; }
  .fbar-lbl { display: none; }
  .fpills {
    gap: 0;
    flex-shrink: 0;
    padding-right: 14px;
  }
  .fp {
    font-size: 11px;
    padding: 6px 14px;
    height: 32px;
    letter-spacing: 0.04em;
  }
  .fp:first-child { border-radius: 20px 0 0 20px; }
  .fp:last-child { border-right: 1px solid var(--border); border-radius: 0 20px 20px 0; }
  .vtog {
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 14px;
    margin-left: 0;
  }
  .vb { padding: 6px 10px; font-size: 13px; }
  .fbar-scroll-wrap::after { display: block; }
}

/* PRODUCT SECTION */
.psec { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 40px; }
#pg-oil .psec, #pg-spray .psec, #pg-raw .psec { background: #E6E6E6; }
.p-count { font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; }
#ocnt, #scnt { font-size: 12pt; font-weight: 700; color: #181818; }

/* ── RAW GRID — 6 cols ── */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); }
.grid.lv { grid-template-columns: 1fr; }

/* ── RAW CARD ── */
.card {
  background: var(--card-bg);
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
  animation: fu 0.4s ease both;
  cursor: pointer;
  min-height: 0;
}@media (hover: hover) and (pointer: fine) {

.card:hover { background: var(--white); }
}
.c-num {
  font-size: 11px; letter-spacing: 0.02em; color: var(--ink-3);
  margin-bottom: 10px; text-transform: uppercase;
}
.c-name {
  font-family: var(--grotesk); font-size: 16px; font-weight: 500;
  line-height: 1.2; color: var(--ink); margin-bottom: 3px; flex: 1;
}
.c-sub {
  font-size: 11.5px; color: var(--ink-3); margin-bottom: 14px;
  letter-spacing: 0.02em; line-height: 1.5;
}
.c-badge {
  display: inline-block; font-size: 10px; letter-spacing: 0.02em;
  text-transform: uppercase; padding: 2px 7px;
  border: 1px solid var(--border-strong); color: var(--ink-2);
  border-radius: var(--radius); margin-bottom: 14px; width: fit-content;
}
.pr-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.wb {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  padding: 4px 8px; border: 1px solid var(--border); background: transparent;
  color: var(--ink-3); cursor: pointer; border-radius: var(--radius);
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 150ms ease-out; white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {

.wb:hover { border-color: var(--border-strong); color: var(--ink); }
}
.wb.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pr-disp {
  font-family: var(--serif); font-size: 22px; font-weight: 300;
  color: var(--ink); margin-bottom: 12px; min-height: 28px; line-height: 1.1;
}
.add-btn {
  width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 9px; background: var(--ink); color: var(--bg);
  border: none; cursor: pointer; border-radius: var(--radius); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 150ms ease-out;
  margin-top: auto;
}@media (hover: hover) and (pointer: fine) {

.add-btn:hover { background: var(--accent-dark); }
}
.add-btn.ok { background: var(--accent-dark); }

/* ── LIST VIEW — RAW ── */
.lv .card {
  flex-direction: row;
  align-items: center;
  padding: 13px 20px;
  gap: 0;
  min-height: 0;
  border-bottom: 1px solid var(--border);
}
/* Remove double border from grid gap on list */
.grid.lv { background: transparent; gap: 0; }
.lv .c-l {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lv .c-name { font-size: 15px; margin-bottom: 0; flex: 0; }
.lv .c-sub { margin-bottom: 0; font-size: 11px; line-height: 1.4; color: var(--ink-3); }
.lv .c-num { margin-bottom: 0; font-size: 10px; letter-spacing: 0.03em; }
.lv .c-badge { margin-bottom: 0; }
.lv .c-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lv .pr-row { margin-bottom: 0; flex-wrap: nowrap; gap: 3px; }
.lv .pr-disp {
  margin-bottom: 0;
  font-size: 20px;
  min-width: 72px;
  text-align: right;
  min-height: 0;
  line-height: 1;
}
.lv .add-btn { width: auto; padding: 8px 16px; white-space: nowrap; margin-top: 0; font-size: 10px; }

/* ── PERF GRID — 6 cols ── */
.pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); }
.pgrid.lv { grid-template-columns: 1fr; }

/* ── PERF CARD ── */
.pc {
  background: var(--card-bg);
  padding: 18px 16px 0;
  display: flex;
  flex-direction: column;
  transition: background 0.18s;
  animation: fu 0.4s ease both;
  position: relative;
  overflow: hidden;
}
/* ── 50ml bottle preview — Fine Perfumes grid cards only.
   Hidden by default; shown only while the card's own 50ml size button
   is hovered (:has() scopes this per-card, so hovering one card's 50ml
   button never affects any other card). Sits over the card's content
   rather than replacing it, so nothing shifts or re-flows on hover. ── */
.pc-bottle-preview {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: var(--white);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
/* Click-only, on purpose: hovering the 50ml button while just scanning
   prices used to also trigger this (see the removed hover/:active
   rules that were here before), which covered the price you were
   trying to read. Now the image only appears once you've actually
   clicked 50ml — see SSZ, which toggles .show-bottle — and stays until
   a different size is clicked or the image itself is clicked. */
.pc.show-bottle .pc-bottle-preview { opacity: 1; pointer-events: auto; cursor: pointer; }
/* Stagger — cards cascade in instead of appearing on the same frame. Capped so long grids don't feel slow. */
.pc:nth-child(1)  { animation-delay: 0ms; }
.pc:nth-child(2)  { animation-delay: 40ms; }
.pc:nth-child(3)  { animation-delay: 80ms; }
.pc:nth-child(4)  { animation-delay: 120ms; }
.pc:nth-child(5)  { animation-delay: 160ms; }
.pc:nth-child(6)  { animation-delay: 200ms; }
.pc:nth-child(7)  { animation-delay: 240ms; }
.pc:nth-child(8)  { animation-delay: 280ms; }
.pc:nth-child(n+9) { animation-delay: 320ms; }
/* accent left bar on hover */
.pc::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 2px; height: 100%; background: var(--accent);
  opacity: 0; transition: opacity 0.18s;
}@media (hover: hover) and (pointer: fine) {

.pc:hover { background: var(--white); }
}@media (hover: hover) and (pointer: fine) {

.pc:hover::before { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .pc:active { background: var(--white); }
  .pc:active::before { opacity: 1; }
}

.pc-col {
  font-size: 11px; letter-spacing: 0.02em; color: var(--ink-3);
  margin-bottom: 7px; text-transform: uppercase;
}
.pc-name {
  font-family: var(--grotesk); font-size: 16px; font-weight: 500;
  line-height: 1.2; color: var(--ink); margin-bottom: 2px;
}
.pc-alias {
  font-family: var(--serif); font-size: 18px; font-weight: 300;
  font-style: italic; color: var(--accent-dark); margin-bottom: 8px;
}
.pc-accord {
  display: inline-block; font-size: 10px; letter-spacing: 0.02em;
  text-transform: uppercase; padding: 3px 8px;
  border: 1px solid var(--accent); color: var(--accent-dark);
  border-radius: var(--radius); margin-bottom: 8px; width: fit-content;
}
.pc-desc {
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
  margin-bottom: 0; flex: 1;
}
.pc-notes {
  font-size: 11px; color: var(--ink-3); line-height: 1.5; margin-top: 4px;
}
.pc-notes-k {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 9.5px; color: #181818; font-weight: 700; margin-right: 4px;
}

/* ── PRICING FOOTER — pinned to card bottom ── */
.pc-pricing {
  margin-top: 12px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pc-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pc-price-main {
  font-family: var(--serif); font-size: 20px;
  font-weight: 300; color: var(--ink); line-height: 1;
}
.pc-price-orig {
  font-family: var(--serif); font-size: 12px;
  font-weight: 300; color: var(--ink-3);
  text-decoration: line-through;
}
.pc-combo {
  font-size: 11px; color: var(--accent-dark);
  letter-spacing: 0.02em; line-height: 1.4;
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.pc-combo-save {
  background: var(--accent); color: var(--ink);
  font-size: 10px; padding: 1px 6px;
  border-radius: var(--radius); letter-spacing: 0.04em;
  white-space: nowrap;
}
.pc-student-badge {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  padding: 2px 6px; border-radius: var(--radius);
  white-space: nowrap; margin-left: 2px;
}
.pgh-stu-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0 12px; height: 36px;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: all .15s ease;
}
.pgh-stu-cta:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.pgh-stu-cta.verified {
  border-color: var(--accent-dark); background: var(--accent); color: var(--ink);
}
.stu-cta-short { display: none; }
.stu-ov {
  position: fixed; inset: 0; background: rgba(20,18,16,.55);
  z-index: 9998; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.stu-ov.on { opacity: 1; pointer-events: auto; }
.stu-modal {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%,-46%); width: min(420px, 90vw);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) * 2); z-index: 9999;
  opacity: 0; pointer-events: none; transition: all .25s ease;
  max-height: 86vh; overflow-y: auto;
}
.stu-modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
.stu-mh {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 22px 0 22px;
}
.stu-mh-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); display: block; }
.stu-mh-title { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--ink); display: block; margin-top: 4px; }
.stu-mh-cl { background: none; border: none; font-size: 20px; color: var(--ink-3); cursor: pointer; line-height: 1; }
.stu-mb { padding: 16px 22px 22px 22px; }
.stu-mb p.stu-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0 0 16px 0; }
.stu-submit {
  width: 100%; margin-top: 6px; padding: 12px; border: none;
  border-radius: var(--radius); background: var(--ink); color: var(--bg);
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease;
}
.stu-submit:hover { background: var(--accent-dark); }
.stu-success { text-align: center; padding: 6px 0 4px 0; }
.stu-success-code {
  font-family: var(--mono); font-size: 15px; letter-spacing: .04em;
  background: var(--bg-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); padding: 10px 14px; margin: 12px 0;
  color: var(--ink); user-select: all;
}
.stu-code-row { display: flex; gap: 8px; }
.stu-code-row .co-fi { flex: 1; text-transform: uppercase; }
.pc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 6px;
}
.pc-sz-row {
  flex: 1; display: flex; gap: 3px; flex-wrap: wrap;
}
.pc-add {
  flex-shrink: 0;
  width: 100%;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 9px;
  background: var(--ink); color: var(--bg);
  border: none; cursor: pointer; border-radius: var(--radius);
  transition: background 0.15s; white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {

.pc-add:hover, .pc-add.ok { background: var(--accent-dark); }
}
@media (hover: none), (pointer: coarse) {
  .pc-add:active, .pc-add.ok { background: var(--accent-dark); }
}

/* ── LIST VIEW — PERF ── */
.pgrid.lv { background: transparent; gap: 0; }
.pgrid.lv .pc {
  flex-direction: row;
  align-items: center;
  padding: 13px 20px;
  gap: 0;
  flex-wrap: nowrap;
  overflow: visible;
  border-bottom: 1px solid var(--border);
}
.pgrid.lv .pc::before { display: none; }
.pgrid.lv .pc-l {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pgrid.lv .pc-col { margin-bottom: 0; flex-shrink: 0; font-size: 10px; }
.pgrid.lv .pc-name { font-size: 15px; margin-bottom: 0; }
.pgrid.lv .pc-alias { margin-bottom: 0; font-size: 14px; }
.pgrid.lv .pc-accord { margin-bottom: 0; }
.pgrid.lv .pc-desc { display: none; }
.pgrid.lv .pc-notes { display: none; }
.pgrid.lv .pc-pricing {
  border-top: none;
  padding: 0;
  margin-top: 0;
  gap: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pgrid.lv .pc-price-row { gap: 6px; }
.pgrid.lv .pc-actions {
  margin-top: 0;
  margin-bottom: 0;
  gap: 6px;
}
.pgrid.lv .pc-add { width: auto; flex-shrink: 0; padding: 8px 16px; }
.pgrid.lv .pc-sz-row { flex-wrap: nowrap; gap: 3px; }

/* CART */
.c-ov { position: fixed; inset: 0; background: rgba(18,18,18,0.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.c-ov.on { opacity: 1; pointer-events: all; }
.c-dr { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 95vw; background: var(--bg); z-index: 201; transform: translateX(100%); transition: transform 200ms cubic-bezier(0.23,1,0.32,1); display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.c-dr.on { transform: translateX(0); transition: transform 350ms cubic-bezier(0.22,1,0.36,1); }
.dr-hd { padding: 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.dr-ttl { font-family: var(--serif); font-size: 22px; font-weight: 300; letter-spacing: 0.02em; }
.cl-btn { background: none; border: none; cursor: pointer; font-size: 22px; color: var(--ink-3); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: color 0.15s; }@media (hover: hover) and (pointer: fine) {

.cl-btn:hover { color: var(--ink); }
}
.dr-body { flex: 1; overflow-y: auto; }
.c-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; color: var(--ink-3); font-size: 12px; letter-spacing: 0.03em; text-align: center; gap: 12px; }
.c-empty-ic { font-size: 32px; opacity: 0.3; }
.c-item { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; gap: 14px; align-items: flex-start; }
.ci-inf { flex: 1; min-width: 0; }
.ci-nm { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 2px; }
.ci-mt { font-size: 11px; color: var(--ink-3); }
.ci-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ci-pr { font-family: var(--serif); font-size: 18px; font-weight: 300; color: var(--ink); }
.ci-discount { font-size: 10px; font-weight: 600; color: #E8460D; letter-spacing: 0.01em; }
.qty-row { display: flex; align-items: center; }
.q-btn { width: 26px; height: 26px; border: 1px solid var(--border); background: transparent; color: var(--ink-2); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; }
.q-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.q-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }@media (hover: hover) and (pointer: fine) {

.q-btn:hover { background: var(--bg-2); }
}
.q-num { width: 32px; height: 26px; border: 1px solid var(--border); border-left: none; border-right: none; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink); }
.rm-btn { background: none; border: none; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: color 0.15s; }@media (hover: hover) and (pointer: fine) {

.rm-btn:hover { color: #b04040; }
}
.dr-ft { padding: 20px 24px; border-top: 1px solid var(--border); background: var(--bg); }
.dlv-lbl { font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.dlv-opts { display: flex; flex-direction: row; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.dlv-opt { cursor: pointer; }
.dlv-opt input { display: none; }
.dlv-oi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 6px; border-bottom: none; border-right: 1px solid var(--border); font-size: 11px; text-align: center; transition: background 0.15s; background: var(--card-bg); }
.dlv-opt { flex: 1; } .dlv-opt:last-child .dlv-oi { border-right: none; }
.dlv-opt input:checked + .dlv-oi { background: var(--ink); color: var(--bg); }@media (hover: hover) and (pointer: fine) {

.dlv-opt:hover .dlv-oi { background: var(--bg-2); }
}@media (hover: hover) and (pointer: fine) {

.dlv-opt input:checked + .dlv-oi:hover { background: var(--ink); }
}
.dlv-pr { font-family: var(--serif); font-size: 12px; font-weight: 400; }
.tot-blk { margin-bottom: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.tot-ln { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-size: 11px; color: var(--ink-3); }
.tot-ln.grand { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--ink); }
.tot-ln-l { letter-spacing: 0.04em; }
.tot-big { font-family: var(--serif); font-size: 19px; font-weight: 500; color: #E8460D; }
.co-btn { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; text-transform: uppercase; padding: 12px 6px; background: var(--ink); color: var(--bg); border: none; cursor: pointer; border-radius: var(--radius); transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; line-height: 1.2; }@media (hover: hover) and (pointer: fine) {

.co-btn:hover { background: var(--accent-dark); }
}
.cp-btn { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; text-transform: uppercase; padding: 12px 6px; background: transparent; color: var(--ink-2); border: 1px solid var(--border); cursor: pointer; border-radius: var(--radius); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; line-height: 1.2; }@media (hover: hover) and (pointer: fine) {

.cp-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
}
.cp-btn.ok { border-color: var(--accent); color: var(--accent-dark); }
.co-btn-row { display: flex; gap: 8px; margin-bottom: 0; }

/* Bundle pricing in cart */
.ci-pr.combo-price { display: flex; align-items: center; gap: 6px; }
.ci-combo-badge { font-family: var(--mono); font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; background: var(--accent); color: var(--ink); padding: 2px 5px; border-radius: 2px; font-weight: 600; }
.ci-nudge { font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 3px; }
.bundle-save-ln { color: var(--accent-dark) !important; font-weight: 500; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px dashed var(--border); }
.bundle-save-val { color: var(--accent-dark); font-family: var(--serif); font-size: 14px; }

/* Upgraded cart item — QTY tile block */
.c-item { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; animation: fu 0.25s ease both; background: var(--card-bg); }
.ci-tile { width: 56px; height: 56px; flex-shrink: 0; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.ci-tile-qty { font-family: var(--serif); font-size: 18px; font-weight: 300; color: var(--ink); line-height: 1; }
.ci-tile-lbl { font-size: 8px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); }
.ci-inf { flex: 1; min-width: 0; }
.ci-nm { font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--ink); margin-bottom: 1px; line-height: 1.2; }
.ci-ref { font-size: 10px; color: var(--ink-3); letter-spacing: 0.02em; margin-bottom: 3px; font-style: italic; }
.ci-fmt { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; display: flex; align-items: center; justify-content: space-between; }
.ci-mt { font-size: 11px; color: var(--ink-3); }
.ci-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ci-pr { font-family: var(--serif); font-size: 17px; font-weight: 300; color: var(--ink); }
.ci-discount { font-size: 10px; font-weight: 600; color: #E8460D; letter-spacing: 0.01em; }
.qty-row { display: flex; align-items: center; }
.q-btn { width: 26px; height: 26px; border: 1px solid var(--border); background: transparent; color: var(--ink-2); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; }
.q-btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.q-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; }@media (hover: hover) and (pointer: fine) {

.q-btn:hover { background: var(--bg-2); }
}
.q-num { width: 32px; height: 26px; border: 1px solid var(--border); border-left: none; border-right: none; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ink); }
.rm-btn { background: none; border: none; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: color 0.15s; display: flex; align-items: center; gap: 4px; }@media (hover: hover) and (pointer: fine) {

.rm-btn:hover { color: #b04040; }
}
.dr-ft { padding: 18px 20px; border-top: 1px solid var(--border); background: var(--bg); }
.dlv-lbl { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.dlv-opts { display: flex; flex-direction: row; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.dlv-opt { cursor: pointer; }
.dlv-opt input { display: none; }
.dlv-oi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 6px; border-bottom: none; border-right: 1px solid var(--border); font-size: 11px; text-align: center; transition: background 0.15s; background: var(--card-bg); }
.dlv-opt { flex: 1; } .dlv-opt:last-child .dlv-oi { border-right: none; }
.dlv-opt input:checked + .dlv-oi { background: var(--ink); color: var(--bg); }@media (hover: hover) and (pointer: fine) {

.dlv-opt:hover .dlv-oi { background: var(--bg-2); }
}@media (hover: hover) and (pointer: fine) {

.dlv-opt input:checked + .dlv-oi:hover { background: var(--ink); }
}
.dlv-pr { font-family: var(--serif); font-size: 12px; font-weight: 400; }
.tot-blk { margin-bottom: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.tot-ln { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; font-size: 11px; color: var(--ink-3); }
.tot-ln.grand { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--ink); }
.tot-ln-l { letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.tot-big { font-family: var(--serif); font-size: 19px; font-weight: 500; color: #E8460D; }
.co-btn { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; padding: 13px 10px; background: var(--ink); color: var(--bg); border: none; cursor: pointer; border-radius: var(--radius); transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }@media (hover: hover) and (pointer: fine) {

.co-btn:hover { background: var(--accent-dark); }
}
.cp-btn { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; text-transform: uppercase; padding: 12px 6px; background: transparent; color: var(--ink-2); border: 1px solid var(--border); cursor: pointer; border-radius: var(--radius); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; line-height: 1.2; }@media (hover: hover) and (pointer: fine) {

.cp-btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); }
}
.cp-btn.ok { border-color: var(--accent); color: var(--accent-dark); }
.co-btn-row { display: flex; gap: 8px; margin-bottom: 0; }

/* ── CHECKOUT FORM PANEL ── */
.co-ov { position: fixed; inset: 0; background: rgba(18,18,18,0.55); z-index: 300; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.co-ov.on { opacity: 1; pointer-events: all; }
.co-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 100vw;
  background: var(--bg); z-index: 301;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
}
.co-panel.on { transform: translateX(0); }

/* Header */
.co-ph {
  background: var(--ink); padding: 20px 24px;
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-shrink: 0;
}
.co-ph-left { display: flex; flex-direction: column; gap: 3px; }
.co-ph-eyebrow {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(200,169,110,0.85); font-family: var(--mono);
}
.co-ph-title {
  font-family: var(--grotesk); font-size: 17px; font-weight: 600;
  letter-spacing: -0.2px; color: var(--bg); text-transform: uppercase;
  line-height: 1.1;
}
.co-ph-cl {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7); width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); cursor: pointer; font-size: 18px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; flex-shrink: 0; margin-top: 2px;
}@media (hover: hover) and (pointer: fine) {

.co-ph-cl:hover { background: rgba(255,255,255,0.18); color: #fff; }
}

/* Scrollable form body */
.co-pbody { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.co-pbody::-webkit-scrollbar { width: 4px; }
.co-pbody::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* Form field group */
.co-fg { display: flex; flex-direction: column; gap: 4px; }
.co-fl {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); font-family: var(--mono); font-weight: 600;
}
.co-fi, .co-fsel, .co-fta {
  width: 100%; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; font-family: var(--mono);
  font-size: 12px; color: var(--ink); outline: none; transition: border-color 0.15s;
  -webkit-appearance: none;
}
.co-fi::placeholder, .co-fta::placeholder { color: var(--ink-3); letter-spacing: 0.04em; font-size: 11px; }
.co-fi:focus, .co-fsel:focus, .co-fta:focus { border-color: var(--ink-2); background: var(--white); }
.co-fsel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23424242' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; }
.co-fta { resize: none; min-height: 80px; line-height: 1.6; }
.co-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Section label */
.co-sec-lbl {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); font-family: var(--mono); padding-bottom: 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.co-sec-lbl em { font-style: normal; color: var(--accent-dark); }

/* Payment toggle */
.co-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-pay-opt { cursor: pointer; }
.co-pay-opt input { display: none; }
.co-pay-face {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card-bg); font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out; font-weight: 500;
}
.co-pay-opt input:checked + .co-pay-face {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}@media (hover: hover) and (pointer: fine) {

.co-pay-opt:hover .co-pay-face { border-color: var(--ink-2); }
}@media (hover: hover) and (pointer: fine) {

.co-pay-opt input:checked + .co-pay-face:hover { background: var(--ink); }
}
.co-pay-bkash { color: #e2136e; font-weight: 700; font-family: var(--grotesk); font-size: 12px; text-transform: none; letter-spacing: 0; }

/* Promo code row */
.co-promo-row { display: flex; gap: 8px; }
.co-promo-row .co-fi { flex: 1; }
.co-promo-apply {
  flex-shrink: 0; padding: 10px 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--ink); color: var(--bg);
  border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s;
  white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {

.co-promo-apply:hover { background: var(--accent-dark); }
}
.co-promo-apply.ok { background: var(--accent-dark); }
.co-promo-msg { font-size: 11px; color: var(--accent-dark); margin-top: 4px; display: none; }
.co-promo-msg.on { display: block; }

/* Summary block */
.co-sum {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.co-sum-hd {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--card-bg); font-family: var(--mono);
}
.co-sum-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--ink-2);
}
.co-sum-row:last-child { border-bottom: none; }
.co-sum-row.total {
  color: var(--ink); font-weight: 600; padding: 12px 14px;
  background: var(--card-bg); border-top: 1px solid var(--border-strong);
}
.co-sum-val { font-family: var(--serif); font-size: 15px; font-weight: 300; }
.co-sum-row.total .co-sum-val { font-size: 20px; }

/* Footer action bar */
.co-pft {
  padding: 16px 24px; border-top: 1px solid var(--border);
  background: var(--bg); display: flex; gap: 10px; flex-shrink: 0;
}
.co-back-btn {
  flex-shrink: 0; padding: 12px 18px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out;
}@media (hover: hover) and (pointer: fine) {

.co-back-btn:hover { background: var(--bg-2); border-color: var(--border-strong); }
}
.co-auth-btn {
  flex: 1; padding: 13px; background: var(--ink); color: var(--bg);
  border: none; border-radius: var(--radius); font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s; display: flex;
  align-items: center; justify-content: center; gap: 8px; font-weight: 500;
}@media (hover: hover) and (pointer: fine) {

.co-auth-btn:hover { background: var(--accent-dark); }
}
.co-auth-btn.loading { opacity: 0.6; pointer-events: none; }
.co-cod-note {
  text-align: center; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px;
}

/* Mobile checkout — clear the fixed 80px bottom nav bar */
@media (max-width: 700px) {
  .co-panel {
    width: 100vw;
    top: 0 !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    height: calc(100dvh - 80px - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom)) !important;
  }
  .co-fgrid { grid-template-columns: 1fr; }
  .co-pbody {
    padding: 18px var(--gutter);
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .co-pft {
    padding: 14px var(--gutter);
    flex-shrink: 0 !important;
  }
  .co-cod-note {
    padding-bottom: 8px;
  }
}

/* TOAST */
.toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); font-size: 12px; letter-spacing: 0.03em; padding: 10px 20px; border-radius: var(--radius); opacity: 0; transition: opacity 220ms ease, transform 220ms ease-out; z-index: 300; white-space: nowrap; pointer-events: none; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Pricing info strip */
.price-strip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.price-strip-scroll::-webkit-scrollbar { display: none; }
.price-strip-inner { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; flex-wrap: nowrap; min-width: 600px; }
.price-strip-inner > div { flex: 0 0 auto; width: 160px; }

@media (min-width: 701px) {
  .price-strip-inner { min-width: 0; flex-wrap: wrap; }
  .price-strip-inner > div { flex: 1; width: auto; }
}

/* FOOTER */
footer {
  background: var(--accent);
  border-top: none;
  overflow: hidden;              /* clips font descender flush at footer bottom edge */
}
.ft-stories { background: #67784E; } /* Stories footer — green instead of the shared accent orange */
.ft-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.75);        /* white text on orange */
  letter-spacing: 0.03em;
  gap: 16px;
  flex-wrap: wrap;
}
.ft-lnks {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.ft-lnk {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.15s;
}@media (hover: hover) and (pointer: fine) {

.ft-lnk:hover { color: #fff; }
}
.ft-sep { color: rgba(255,255,255,0.35); }

/* Full-width wordmark — Space Grotesk 700, black, 1400px, centered, baseline flush to footer bottom */
.ft-wordmark {
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;                /* centered horizontally, no top gap */
  padding: 0;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: clamp(36px, 10.72vw, 150px);
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: #000;
  line-height: 1;                /* normalised — no artificial cropping */
  text-align: center;
  white-space: nowrap;
  /* Shift text down so the baseline sits at the footer bottom edge.
     Space Grotesk cap-height ≈ 0.72em, descender ≈ 0.22em.
     translateY moves the whole line box down; footer overflow:hidden clips the descender.
     Net result: capital letters sit flush at the very bottom of the footer. */
  transform: translateY(0.22em);
}
.no-res { padding: 60px; text-align: center; font-size: 12px; color: var(--ink-3); letter-spacing: 0.03em; grid-column: 1/-1; }

/* ── DISCOVERY SET PAGE ── */
/* ── VERTICAL GRID LINES ── */
.grid-lines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.grid-lines::before,
.grid-lines::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
  opacity: 0.7;
}
.grid-lines::before {
  left: calc(50% - min(var(--wrap), 100vw)/2);
}
.grid-lines::after {
  right: calc(50% - min(var(--wrap), 100vw)/2);
}

/* ── DS HERO DARK (matching clan-hero) ── */
.ds-hero {
  border-bottom: 1px solid rgba(200,169,110,0.15);
  position: relative;
  overflow: hidden;
}
.ds-hero-eyebrow { color: var(--accent) !important; }
.ds-hero h1 { color: var(--white) !important; }
.ds-hero h1 em { color: var(--accent) !important; }
.ds-hero-body { color: rgba(248,245,240,0.6) !important; }
.ds-hero-r { border-color: rgba(200,169,110,0.2) !important; }
.ds-hero-stat { border-color: rgba(200,169,110,0.1) !important; }
.ds-hero-stat-n { color: var(--white) !important; }
.ds-hero-stat-l { color: rgba(200,169,110,0.7) !important; }
.ds-hero-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 32px var(--gutter) 28px;
  display: grid;
  grid-template-columns: 4fr 2fr;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
  background: var(--ink);
  overflow: hidden;
}
.ds-hero-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -55deg, transparent, transparent 32px,
    rgba(200,169,110,0.04) 32px, rgba(200,169,110,0.04) 33px
  );
  pointer-events: none;
  z-index: 0;
}
.ds-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.ds-hero h1 {
  font-family: var(--grotesk);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 14px;
}
.ds-hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 46px;
  letter-spacing: 0;
  color: var(--accent-dark);
}
.ds-hero-body {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.8;
  max-width: 400px;
  margin-bottom: 0;
}
.ds-hero-r {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}
.ds-hero-stat {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.ds-hero-stat:last-child { border-bottom: none; }
.ds-hero-stat-n {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
}
.ds-hero-stat-l {
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* How it works strip */
/* ── HOW IT WORKS — dark variant inside ds-hero ── */
.ds-hero-steps {
  position: relative; z-index: 1;
  border-top: 1px solid rgba(200,169,110,0.15);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--ink);
}
.ds-hero-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 18px;
  border-right: 1px solid rgba(200,169,110,0.1);
}
.ds-hero-step:last-child { border-right: none; }
.ds-hero-step-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  color: rgba(248,245,240,0.1);
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
}
.ds-hero-step-txt h4 {
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 500;
  color: rgba(248,245,240,0.85);
  margin-bottom: 3px;
  line-height: 1.3;
  letter-spacing: -0.1px;
}
.ds-hero-step-txt h4 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0;
}
.ds-hero-step-txt p {
  font-size: 11px;
  color: rgba(248,245,240,0.38);
  line-height: 1.6;
}
@media (max-width: 900px) {
  .ds-hero-steps { grid-template-columns: repeat(2, 1fr); }
  .ds-hero-step { border-bottom: 1px solid rgba(200,169,110,0.1); }
}
@media (max-width: 540px) {
  .ds-hero-steps { grid-template-columns: 1fr; }
}
.ds-how-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
}
.ds-how-step {
  background: var(--bg-2);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 18px;
}
.ds-how-num {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  color: rgba(18,18,18,0.1);
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
}
.ds-how-txt h4 {
  font-family: var(--grotesk);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.3;
  letter-spacing: -0.1px;
}
.ds-how-txt h4 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  color: var(--accent-dark);
  letter-spacing: 0;
}
.ds-how-txt p { font-size: 11px; color: var(--ink-3); line-height: 1.6; }

/* Bundle type selector */
.ds-type-bar {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 140px;
  z-index: 90;
}
.ds-type-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 52px;
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-type-inner::-webkit-scrollbar { display: none; }
.ds-type-lbl {
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--mono);
}
.ds-type-pills { display: flex; gap: 0; flex-shrink: 0; }
.ds-type-pill {
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-right: none;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out;
  white-space: nowrap;
  font-family: var(--mono);
  height: 36px;
  display: flex; align-items: center;
}
.ds-type-pill:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ds-type-pill:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; }
.ds-type-pill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }@media (hover: hover) and (pointer: fine) {

.ds-type-pill:hover:not(.on) { background: var(--bg-2); color: var(--ink); }
}
.ds-bundle-info {
  margin-left: auto;
  font-size: 11px;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 16px;
}

/* Bundle builder section */
.ds-body { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter) 120px; background: #E6E6E6; }
.ds-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ds-section-head h2 {
  font-family: var(--grotesk);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.ds-section-head h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  color: var(--accent-dark);
  letter-spacing: 0;
}
.ds-section-meta { font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }

/* Scent picker — strict 6-col */
/* ══════════════════════════════════════════════════════
   DISCOVERY LAB — SCENT SELECTION CARDS
   Desktop: 4-col grid (was 6, too narrow to be readable)
   Tablet:  3-col
   Mobile:  2-col, compact — desc hidden, name smaller
   ══════════════════════════════════════════════════════ */

.ds-scent-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  margin-bottom: 24px;
}

/* ── Card shell ── */
.ds-sc {
  background: var(--card-bg);
  padding: 20px 16px 18px;
  cursor: pointer;
  transition: background 0.15s, outline 0.1s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  user-select: none;
  /* Equal-height rows via min-height */
  min-height: 160px;
}@media (hover: hover) and (pointer: fine) {

.ds-sc:hover {
  background: var(--white);
}
}
@media (hover: none), (pointer: coarse) {
  .ds-sc:active {
    background: var(--white);
  }
}

/* ── Selected state — orange outline, fills check ── */
.ds-sc.selected {
  background: var(--white);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 1;
}

/* ── Check indicator — top-right, square checkbox ── */
.ds-sc-check {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 150ms ease-out;
  flex-shrink: 0;
}
.ds-sc.selected .ds-sc-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Category eyebrow ── */
.ds-sc-col {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}

/* ── Product name — main hierarchy, room for check indicator ── */
.ds-sc-name {
  font-family: var(--grotesk);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.22;
  margin-bottom: 3px;
  padding-right: 30px;           /* clears the check indicator at all sizes */
  letter-spacing: -0.2px;
}

/* ── Alias — italic subtitle, secondary hierarchy ── */
.ds-sc-alias {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  color: var(--accent-dark);
  margin-bottom: 10px;
  line-height: 1.3;
}

/* ── Accord pill — minimal, anchors to bottom via margin-top:auto ── */
.ds-sc-accord {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  border-radius: var(--radius);
  margin-bottom: 8px;
  width: fit-content;
  margin-top: auto;              /* pushes accord + desc to card bottom */
}

/* ── Description — shown on desktop 4-col and tablet 3-col ── */
.ds-sc-desc {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-top: 6px;
}
.ds-sc-notes {
  font-size: 10.5px; color: var(--ink-3); line-height: 1.5; margin-top: 4px;
}
.ds-sc-notes-k {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 9px; color: #181818; font-weight: 700; margin-right: 4px;
}

/* Bundle summary tray — dark */
.ds-tray {
  position: sticky;
  bottom: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 80;
}
/* .ds-tray visibility controlled by parent .pg.on display:block */
.ds-tray-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--ink);
}
.ds-tray-left { flex: 1; min-width: 0; }
.ds-tray-label {
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);                   /* muted white label */
  margin-bottom: 6px;
}
.ds-tray-scents {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-tray-tag {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,0.15);        /* light border on dark */
  color: rgba(255,255,255,0.85);                   /* near-white text */
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);              /* subtle light surface */
  display: flex;
  align-items: center;
  gap: 6px;
  animation: fi 0.2s ease both;
}
.ds-tray-tag-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  transition: color 0.15s;
  display: flex;
  align-items: center;
}@media (hover: hover) and (pointer: fine) {

.ds-tray-tag-rm:hover { color: rgba(255,255,255,0.9); }
}
.ds-tray-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.28);                   /* ghosted on dark */
  letter-spacing: 0.04em;
  font-style: italic;
  font-family: var(--serif);
}
.ds-tray-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.ds-tray-pricing { text-align: right; }
.ds-tray-total {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: #fff;                                     /* white price on dark */
  line-height: 1.1;
}
.ds-tray-saving {
  font-size: 10px;
  color: var(--accent);                            /* orange saving text — pops on dark */
  letter-spacing: 0.03em;
}
.ds-tray-saving span {
  background: var(--accent);
  color: #fff;                                     /* white text on orange badge on dark tray */
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius);
  margin-left: 4px;
}
.ds-tray-btn {
  font-family: var(--mono);
  font-size: 10px;       /* 11px × 0.8 = 8.8 → 9px */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--accent);                       /* orange CTA pops against dark tray */
  color: #fff;
  border: none;
  padding: 10px 19px;  /* 12×0.8=9.6→10px, 24×0.8=19.2→19px */
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.2s;
  white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {

.ds-tray-btn:hover { background: var(--accent-dark); }
}
.ds-tray-btn:disabled {
  background: rgba(255,255,255,0.07);              /* dark-surface disabled state */
  color: rgba(255,255,255,0.22);
  cursor: default;
  border: 1px solid rgba(255,255,255,0.1);
}

/* filter cat bar within discovery */
.ds-filter-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-filter-row::-webkit-scrollbar { display: none; }
.ds-filter-lbl {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 16px;
}

/* ══════════════════════════════════════════════════
   CURATED SET (PRESET) CARDS
   3-col desktop → 2-col tablet/mobile
   Card = editorial, not transactional — name leads,
   scent tags as social proof, price/CTA pinned to bottom
   ══════════════════════════════════════════════════ */

.ds-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border);
  margin-bottom: 0;
}

/* ── Card shell — full-height flex column ── */
.ds-preset {
  background: var(--card-bg);
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: background 0.2s;
  position: relative;
  overflow: hidden;
  min-height: 280px;            /* consistent height across rows */
}@media (hover: hover) and (pointer: fine) {

.ds-preset:hover { background: var(--white); }
}

/* Left accent bar — appears on hover, brand orange */
.ds-preset::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s;
}@media (hover: hover) and (pointer: fine) {

.ds-preset:hover::before { opacity: 1; }
}

/* ── Badge — type eyebrow (Starter Set · 5 × 2ml Oil) ── */
/* ── Serial + badge header row ── */
.ds-preset-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ds-preset-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  color: var(--accent-dark);
  border-radius: var(--radius);
  width: fit-content;
}

/* ── Set name — editorial weight, two-line max ── */
.ds-preset h3 {
  font-family: var(--grotesk);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
  margin-bottom: 2px;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ds-preset h3 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--accent-dark);
  letter-spacing: 0;
}

/* ── Alias — italic subtitle under name ── */
.ds-preset-alias {
  font-family: var(--serif);
  font-size: 12px;
  font-style: italic;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* ── Description — secondary, flex: 1 pushes tags+footer down ── */
.ds-preset-sub {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 14px;
  flex: 1;
}

/* ── Scent tags — italic serif makes them feel editorial ── */
.ds-preset-scents {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ds-preset-tag {
  font-family: var(--serif);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  color: var(--ink-2);
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ── Footer — price + save badge stacked, full-width CTA below ── */
.ds-preset-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ds-preset-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.ds-preset-price {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
}
.ds-preset-price s {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 300;
}
.ds-preset-save {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  white-space: nowrap;
}

/* ── Add CTA — full width, primary action ── */
.ds-preset-add {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background 0.15s;
  width: 100%;
  text-align: center;
}@media (hover: hover) and (pointer: fine) {

.ds-preset-add:hover, .ds-preset-add.ok { background: var(--accent-dark); }
}

@media (max-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .pgrid { grid-template-columns: repeat(4, 1fr); }
  .ds-scent-grid { grid-template-columns: repeat(4, 1fr); }
  .ds-presets { grid-template-columns: repeat(4, 1fr); }
  .ab-vals-inner { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  :root { --gutter: 24px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .ds-scent-grid { grid-template-columns: repeat(3, 1fr); }
  .ds-presets { grid-template-columns: repeat(3, 1fr); }
  .ab-vals-inner { grid-template-columns: repeat(3, 1fr); }
  .ds-how-inner { grid-template-columns: repeat(2, 1fr); }
  .ab-hero-inner { grid-template-columns: 3fr 2fr; }
  .ds-hero-inner { grid-template-columns: 3fr 2fr; }
  .nav-hide-mobile { display: none; }
  /* Hero h1 allow wrapping at tablet */
  .hero-l h1 { white-space: normal; font-size: clamp(22px, 2.8vw, 32px) !important; }
}
@media (max-width: 700px) {
  :root { --gutter: 16px; }

  /* ── MOBILE NAV ── */
  .nav-hide-mobile { display: none !important; }

  /* Nav identity — burger left | logo center | icons right */
  .nav-identity {
    height: 52px;
    padding: 0 14px;
    grid-template-columns: auto 1fr auto;
    gap: 0;
    align-items: center;
  }
  .nav-meta { display: none; }
  .nav-logo-center { justify-self: center; align-items: center; }
  .nav-logo-wordmark { font-size: 22px; letter-spacing: -1.2px; font-weight: 700; }
  .nav-logo-sub { display: none; }
  .nav-logo-center::before, .nav-logo-center::after { display: none; }
  .nav-soc-group { display: none; }
  .nav-actions {
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-shrink: 0;
  }
  .cart-btn .cart-label { display: none; }
  .cart-btn { padding: 0; width: 34px; height: 34px; justify-content: center; gap: 0; position: relative; }
  .cart-btn .cart-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 50%; font-size: 9px; padding: 0 3px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
  .nav-wish-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .cart-count { min-width: 15px; height: 15px; font-size: 8px; border-radius: 8px; }

  /* Nav burger — show on mobile */
  .nav-burger { display: flex; }

  /* Hide horizontal category bar — burger menu replaces it */
  .nav-categories { display: none; }

  /* Sticky offsets: ticker(28) + identity(52) = 80px */
  .fbar { top: 80px; }
  .ds-type-bar { top: 80px; }

  /* Filter pills — 11px */
  .fbar-inner { overflow-x: auto; height: 48px; padding: 0 0 0 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fbar-inner::-webkit-scrollbar { display: none; }
  .fpills { padding-right: 12px; }
  .fp { font-size: 11px; padding: 6px 14px; height: 34px; letter-spacing: 0.04em; }
  .pgh-stu-cta { height: 34px; padding: 0 10px; font-size: 9px; }
  .pgh-stu-cta .stu-cta-full { display: none; }
  .pgh-stu-cta .stu-cta-short { display: inline; }
  .fbar-lbl { display: none; }

  /* DS type bar — fully scrollable on mobile */
  .ds-type-inner {
    overflow-x: auto;
    height: 48px;
    padding: 0 0 0 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Let pills + bundle-info scroll together as one row */
    flex-wrap: nowrap;
  }
  .ds-type-inner::-webkit-scrollbar { display: none; }
  .ds-type-pills { flex-shrink: 0; padding-right: 0; }
  .ds-type-pill { font-size: 11px; padding: 6px 14px; height: 34px; letter-spacing: 0.04em; white-space: nowrap; }
  .ds-type-lbl { display: none; }
  .ds-bundle-info { flex-shrink: 0; white-space: nowrap; padding-left: 12px; padding-right: 12px; }

  /* DS collection filter row — scrollable single line, no wrap */
  .ds-filter-lbl { display: none; }
  .ds-filter-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 0 0;
    margin-bottom: 16px;
    /* Fade-out right edge hint */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }
  .ds-filter-row::-webkit-scrollbar { display: none; }
  .ds-filter-row .fpills {
    flex-shrink: 0;
    padding-right: 24px;
  }

  /* Shared page heroes — strict left-aligned composition */
  .hero-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px var(--gutter) 18px;
  }
  .hero-l {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    width: 100%;
  }
  .hero-l h1 {
    font-size: 28px !important;
    white-space: normal !important;
    line-height: 1.1;
    text-align: left;
  }
  .hero-l h1 span[style] { white-space: normal !important; }
  .hero-sub { max-width: 100%; }
  .hero-r {
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    width: 100%;
  }
  .h-div { display: none; }
  .h-stat { padding: 4px 16px 4px 0; }

  /* Clan hero mobile — left-aligned, compact.
     Height/min-height are set once, in the earlier max-width:700px
     block above — not repeated here, since this second (duplicate)
     mobile block loads later and would otherwise win the cascade and
     silently undo the 100dvh-minus-nav-bar sizing. Padding-bottom
     (124px = 44px tierbar + 80px gap) is kept in sync with that same
     earlier block for the same reason. */
  .clan-hero-inner {
    padding: 28px var(--gutter) 124px;
    gap: 20px;
  }
  .clan-hero h1 {
    font-size: 26px;
    letter-spacing: -0.8px;
    text-align: left;
  }
  .clan-hero h1 em { font-size: 36px; }
  .clan-hero-eyebrow { margin-bottom: 10px; }
  .clan-hero-body { font-size: 13px; margin-bottom: 16px; }
  .clan-hero-actions { flex-direction: row; gap: 8px; flex-wrap: nowrap; }
  .btn-clan, .btn-clan-o {
    flex: 1 1 0; width: auto; text-align: center;
    padding: 11px 8px; font-size: 10.5px; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .clan-hero-l { max-width: 100%; }
  .clan-hero-slide { object-position: 65% 25%; }
  .clan-hero-tierbar-inner { height: 44px; padding: 0 10px; }
  .clan-tb-btn { height: 44px; gap: 3px; }
  .clan-tb-num { font-size: 12px; }
  .clan-tb-name { font-size: 8.5px; letter-spacing: 0.01em; }
  .clan-hero-scroll { bottom: 56px; width: 34px; height: 34px; }
  .clan-hero-bg::after {
    background:
      linear-gradient(0deg, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0.55) 45%, rgba(15,15,15,0.25) 100%),
      linear-gradient(90deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.15) 60%, rgba(15,15,15,0) 100%);
  }
  .clan-hero-path { font-size: 9px; gap: 5px; }

  /* Discovery hero mobile — dark bg, left-aligned */
  .ds-hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px var(--gutter) 24px;
  }
  .ds-hero-l { text-align: left; }
  .ds-hero h1 { font-size: 26px !important; text-align: left; }
  .ds-hero h1 em { font-size: 36px !important; }
  .ds-hero-eyebrow { margin-bottom: 10px; }
  .ds-hero-body { max-width: 100%; }
  .ds-hero-r { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .ds-hero-stat { flex: 1; min-width: 120px; padding: 10px 14px; }
  .ds-how-inner { grid-template-columns: 1fr; }
  .ds-scent-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-presets { grid-template-columns: 1fr; gap: 4px; background: transparent; }

  /* About hero */
  .ab-hero-inner { grid-template-columns: 1fr; padding: 28px var(--gutter); gap: 20px; }
  .ab-hero::after { left: var(--gutter); right: var(--gutter); }
  .ab-hero-r { flex-direction: row; align-items: flex-start; }
  .ab-bottle-frame { width: 96px; height: 136px; flex-shrink: 0; }
  .ab-pils { width: auto; flex: 1; }
  .ab-hero h1 { font-size: clamp(22px, 6vw, 36px); text-align: left; }
  .ab-stats-inner { flex-wrap: wrap; }
  .ab-stat { min-width: 33%; border-bottom: 1px solid var(--border); }
  .ab-vals-inner { grid-template-columns: 1fr; }
  .ab-cta-inner { flex-direction: column; gap: 14px; }
  .ab-cta-btns { flex-direction: column; width: 100%; }
  .btn-p, .btn-s { width: 100%; text-align: center; }

  /* Product grids — 2 col */
  .grid { grid-template-columns: repeat(2, 1fr); }
  .pgrid { grid-template-columns: repeat(2, 1fr); }

  /* List view — mobile */
  .lv .card {
    flex-direction: column;
    align-items: stretch;
    padding: 14px var(--gutter);
    gap: 0;
  }
  .lv .c-l {
    padding-right: 0;
    margin-bottom: 10px;
  }
  .lv .c-r {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .lv .pr-disp { min-width: 0; text-align: left; font-size: 18px; }
  .lv .pr-row { flex-wrap: wrap; }
  .lv .add-btn { flex: 1; min-width: 120px; }

  .pgrid.lv .pc {
    flex-direction: column;
    align-items: stretch;
    padding: 14px var(--gutter);
    gap: 0;
    overflow: visible;
  }
  .pgrid.lv .pc-l {
    padding-right: 0;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
  }
  .pgrid.lv .pc-pricing {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 0;
  }
  .pgrid.lv .pc-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .pgrid.lv .pc-sz-row { flex-wrap: wrap; }
  .pgrid.lv .pc-add { width: auto; flex: 1; }
  .pgrid.lv .pc-desc { display: block; }
  .pgrid.lv .pc-notes { display: block; }

  /* Clan tier / section responsive */
  .clan-tier-section { padding: 18px var(--gutter) 20px; }
  .clan-tier-header { flex-direction: column; gap: 12px; }
  .clan-tier-goal-pill { margin-top: 0; }
  .clan-conds { grid-template-columns: 1fr; }
  .clan-rewards-grid { grid-template-columns: 1fr 1fr; }
  .clan-partner-grid { grid-template-columns: 1fr; }
  .clan-options-row { grid-template-columns: 1fr; }
  .clan-pl-grid { grid-template-columns: 1fr; }
  .clan-manifesto-inner { padding: 44px var(--gutter); }
  .clan-journey { gap: 0; }
  .clan-j-step { font-size: 12px; padding: 4px 8px; }

  /* Body padding — override handled by bottom nav block */
  /* body padding-bottom is set to calc(60px + env(safe-area-inset-bottom)) by the bottom nav CSS */

  /* Hero pricing strip boxes (Fine Perfumes + Perfume Oils) — tighter horizontal padding */
  .hpr-box {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Hero pricing strip text — all sizes reduced 1px on mobile */
  .hpr-label { font-size: 11px !important; }
  .hpr-price { font-size: 16px !important; }
  .hpr-combo { font-size: 10px !important; }
  .hpr-badge { font-size: 10px !important; }



  /* Cart + Wishlist drawers + Footer: see the single shared definition
     above (was duplicated verbatim in two separate mobile media-query
     blocks — removed here to avoid the two copies drifting apart). */
}

/* ══════════════════════════════════════════════
   PRESS FEEDBACK — every tappable element confirms
   the interface heard the user. Unseen individually,
   compounds across the whole store.
   ══════════════════════════════════════════════ */
.add-btn, .cart-btn, .cl-btn, .clan-tier-btn, .clan-top-btn,
.co-auth-btn, .co-back-btn, .co-btn, .cp-btn, .ds-tray-btn,
.nav-wish-btn, .q-btn, .rm-btn, .wl-cart-all-btn, .wl-clear-btn,
.wl-add-cart, .btn-p, .btn-s, .btn-clan, .btn-clan-o,
.btn-hero-link, .btn-hero-link--accent, .pc-add, .pc-wish,
.fp, .vb, .wb, #stt-btn, .nav-burger, .nm-close {
  transition: transform 150ms ease-out, background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.add-btn:active, .cart-btn:active, .cl-btn:active, .clan-tier-btn:active, .clan-top-btn:active,
.co-auth-btn:active, .co-back-btn:active, .co-btn:active, .cp-btn:active, .ds-tray-btn:active,
.nav-wish-btn:active, .q-btn:active, .rm-btn:active, .wl-cart-all-btn:active, .wl-clear-btn:active,
.wl-add-cart:active, .btn-p:active, .btn-s:active, .btn-clan:active, .btn-clan-o:active,
.btn-hero-link:active, .btn-hero-link--accent:active, .pc-add:active, .pc-wish:active,
.fp:active, .vb:active, .wb:active, #stt-btn:active, .nav-burger:active, .nm-close:active {
  transform: scale(0.97);
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — keep opacity/color changes that
   aid comprehension, strip movement and scale.
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .c-dr, .wl-dr, .toast, .nav-ticker-track, .nav-menu, .nav-menu-scrim {
    transition-duration: 0.001ms !important;
  }
  .add-btn:active, .cart-btn:active, .cl-btn:active, .clan-tier-btn:active, .clan-top-btn:active,
  .co-auth-btn:active, .co-back-btn:active, .co-btn:active, .cp-btn:active, .ds-tray-btn:active,
  .nav-wish-btn:active, .q-btn:active, .rm-btn:active, .wl-cart-all-btn:active, .wl-clear-btn:active,
  .wl-add-cart:active, .btn-p:active, .btn-s:active, .btn-clan:active, .btn-clan-o:active,
  .btn-hero-link:active, .btn-hero-link--accent:active, .pc-add:active, .pc-wish:active,
  .fp:active, .vb:active, .wb:active, #stt-btn:active, .nav-burger:active, .nm-close:active {
    transform: none !important;
  }
}

/* ══════════════════════════════════════════════
   MOVED FROM MID-BODY <style> BLOCKS (FOUC FIX)
   These were previously declared after the markup
   that depends on them, causing an unstyled flash
   on first paint (e.g. Clan tier accordion bodies
   rendering fully expanded before collapsing).
   ══════════════════════════════════════════════ */
    .mf-box { transition: background 0.18s; }
    @media (hover: hover) and (pointer: fine) {
      .mf-box:hover { background: var(--white) !important; }
    }
    @media (hover: none) and (pointer: coarse) {
      .mf-box:active { background: var(--white) !important; }
    }
    @media (max-width: 900px) {
      .manifesto-pillars { grid-template-columns: 1fr 1fr !important; }
    }
    @media (max-width: 700px) {
      .manifesto-pillars { grid-template-columns: 1fr !important; }
      .manifesto-origin { grid-template-columns: 1fr !important; gap: 32px !important; }
    }
  
/* ══════════════════════════════════════════
   CLAN TIER ACCORDION
   Header is always visible — acts as trigger
   Body collapses/expands with smooth height
   ══════════════════════════════════════════ */

/* Header becomes clickable trigger */
.clan-tier-header {
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* Arrow indicator — top-right of header. Two distinct icons swap on state,
   not a rotation of one shape, matching the provided down-right/up-right pair. */
.clan-tier-header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon fill='%23000000' points='24.5,7.5 21.5,7.5 21.5,19.4 9.6,7.5 7.5,7.5 7.5,9.6 19.4,21.5 7.5,21.5 7.5,24.5 24.5,24.5 '/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.15s ease-out;
  flex-shrink: 0;
}
/* Swap to the up-right icon when open — a different shape, not a rotated one */
.clan-tier-section.open .clan-tier-header::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon fill='%23000000' points='7.5,7.5 7.5,10.5 19.4,10.5 7.5,22.4 7.5,24.5 9.6,24.5 21.5,12.6 21.5,24.5 24.5,24.5 24.5,7.5 '/%3E%3C/svg%3E");
}
@media (hover: hover) and (pointer: fine) {
.clan-tier-header:hover::after { transform: scale(1.1); }

/* ── Hover: closed tier flips to white background ── */
.clan-tier-section:not(.open):hover {
  background: #ffffff;
}
}
/* ── Open state: white background, feels selected ── */
.clan-tier-section.open {
  background: #ffffff;
}

/* Add right padding to header so chevron doesn't overlap content */
.clan-tier-header { padding-right: 40px; position: relative; }

/* Collapsible body — wraps everything after the header */
.clan-tier-body {
  overflow: hidden;
  height: 0;
  transition: height 0.42s cubic-bezier(0.22,1,0.36,1),
              opacity 0.3s ease,
              padding-top 0.3s ease;
  opacity: 0;
  padding-top: 0;
}
.clan-tier-section.open .clan-tier-body {
  opacity: 1;
  padding-top: 10px;
  padding-bottom: 4px;
}

/* Tier 04-05 phase intro stays always visible */
.clan-phase { overflow: visible !important; }


/* ── ATELIER PALETTE — scoped to #pg-atelier only ── */
#pg-atelier { background: #F3EFDC; }

/* Local dotted grid lines replace the site's solid fixed grid while Atelier is open */
body:has(#pg-atelier.on) .grid-lines::before,
body:has(#pg-atelier.on) .grid-lines::after {
  background: none;
  width: 0;
  border-left: 1px dotted rgba(52,55,35,0.4);
}

.ac-frame { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ── ATELIER HERO — same sliding-photo treatment as Oil/Spray/Raw,
   1400×300 frame, single dummy image for now ── */
#pg-atelier .hero.oil-hero {
  background: none; /* clear — outside the 1400px frame just shows the page background */
  border-bottom: 1px dotted rgba(52,55,35,0.3);
}
#pg-atelier .oil-hero-frame {
  position: relative; overflow: hidden;
  max-width: var(--wrap); margin: 0 auto;
  /* Sized the same way as the Clan/Manifesto hero (.clan-hero): fill
     exactly one viewport minus the sticky 3-tier nav's real in-flow
     height (ticker 32 + identity 68 + categories 48 = 148px), instead
     of a fixed aspect-ratio that ignored the nav entirely. Falls back
     to 100vh where dvh isn't supported. */
  height: calc(100vh - 148px);
  height: calc(100dvh - 148px);
  min-height: 320px;
}
#pg-atelier .clan-hero-bg { position: absolute; inset: 0; z-index: 0; }
#pg-atelier .clan-hero-slide { object-position: center; }
#pg-atelier .hero-inner {
  position: absolute; inset: 0; z-index: 1;
  /* Bottom padding sets the gap between the copy/CTA block and the
     hero's own bottom edge — this hero has no tier bar like Clan's,
     so it's measured straight off the hero boundary. align-items is
     inherited flex-end from the base .hero-inner rule. */
  padding: 24px var(--gutter) 100px;
  margin: 0; max-width: none; min-height: 0;
}
#pg-atelier .hero-l { position: relative; z-index: 2; }
#pg-atelier .hero-r { position: relative; z-index: 2; }
#pg-atelier .hero-l h1 { color: #343723; }
#pg-atelier .hero-l h1 em { color: #7D2826; }
#pg-atelier .hero-sub { color: #343723; }
#pg-atelier .h-stat-n { color: #343723; }
#pg-atelier .h-stat-l { color: rgba(52,55,35,0.65); }
#pg-atelier .h-div { background: rgba(52,55,35,0.3); }
#pg-atelier .hero-nav-btns { display: flex; }
#pg-atelier .ac-hero-link { font-family: var(--mono); font-size: 10pt; font-weight: 500; color: #F8F4EC; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
#pg-atelier .ac-hero-link:hover { color: #7D2826; }
#pg-atelier .ac-hero-subgroup { display: flex; flex-direction: column; gap: 6px; }
#pg-atelier .ac-hero-link-desktop { display: block; }
#pg-atelier .ac-hero-link-mobile { display: none; }
/* Scroll-down cue — bottom-center of the hero, sits above the photo
   (z-index above .clan-hero-bg::after's legibility scrim), nudges the
   visitor toward the collection grid just below the hero. */
#pg-atelier .ac-hero-scroll {
  position: absolute; left: 50%; bottom: 20px; z-index: 3;
  transform: translateX(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248,244,236,0.16);
  border: 1px solid rgba(248,244,236,0.5);
  border-radius: 50%;
  color: #F8F4EC;
  cursor: pointer;
  animation: acHeroScrollBounce 2s ease-in-out infinite;
  transition: background 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  #pg-atelier .ac-hero-scroll:hover { background: rgba(248,244,236,0.28); border-color: #F8F4EC; }
}
@keyframes acHeroScrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  #pg-atelier .ac-hero-scroll { animation: none; }
}
#pg-atelier .clan-hero-bg::after {
  background: none;
}
@media (max-width: 900px) {
  /* No override needed here — the desktop nav offset (148px) still
     applies at this width; the mobile nav swap happens at 700px. */
}
@media (max-width: 700px) {
  #pg-atelier .hero-r { display: none; }
  #pg-atelier .hero-inner { justify-content: flex-end; padding-bottom: 50px; }
  #pg-atelier .hero-l { gap: 1px; }
  #pg-atelier .hero-l h1 { white-space: normal; }
  #pg-atelier .ac-hero-link-desktop { display: none; }
  #pg-atelier .ac-hero-link-mobile { display: inline; margin-left: 8px; font-size: 9pt; }
  #pg-atelier .ac-hero-scroll { width: 34px; height: 34px; } /* matches .clan-hero-scroll's mobile size */
  #pg-atelier .clan-hero-bg::after {
    background: none;
  }
  /* Mobile: same two-part offset as .clan-hero — the in-flow nav
     shrinks to 80px (ticker 28 + identity 52, categories tier hidden)
     AND the fixed bottom tab bar (80px + safe-area) overlays the
     viewport rather than pushing content up, so both get subtracted. */
  #pg-atelier .oil-hero-frame {
    height: calc(100vh - 80px - 80px - env(safe-area-inset-bottom));
    height: calc(100dvh - 80px - 80px - env(safe-area-inset-bottom));
    min-height: 280px;
  }
}

/* ── COLLECTION SECTIONS ── */
.ac-collection { padding: 0 0 6px; }
.ac-collection > .ac-sec:first-of-type { padding-top: 0; }
.ac-sec { padding: 15px 0 8px; }
.ac-sec-head { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gutter) 12px; height: 58px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; background: #343723; border-radius: 0; }
.ac-sec-head-l { display: flex; align-items: baseline; gap: 10px; }
.ac-sec-num { font-family: var(--mono); font-size: 11px; color: #C9A98A; letter-spacing: 0.04em; }
.ac-sec-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 24px; color: #EFE9D7; }
.ac-sec-sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #C9A98A; }

.ac-grid { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 1px; background: #F3EFDC; border-left: 1px dotted rgba(52,55,35,0.3); border-right: 1px dotted rgba(52,55,35,0.3); }
@media (max-width: 960px) { .ac-grid { grid-template-columns: 1fr; } }

/* ── PRODUCT CARD — 666px cap, image 2/3 + text 1/3 on wide cards,
   stacked full-width on narrow ones. Card is its own containment
   context so the split responds to its OWN rendered width — not the
   viewport — since a 2-up grid can squeeze a card well before the
   viewport itself counts as "mobile." ── */
.ac-card {
  background: #F8F4EC; width: 100%; max-width: 666px;
  display: flex; flex-direction: column;
  animation: fu 0.4s ease both; position: relative; overflow: hidden;
  transition: background 0.18s;
  container-type: inline-size; container-name: ac-card;
  border: 1px dotted rgba(52,55,35,0.3);
}
/* accent left bar on hover — same treatment as the Oil/Spray product cards */
.ac-card::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 2px; height: 100%; background: #7D2826;
  opacity: 0; transition: opacity 0.18s; z-index: 3;
}
@media (hover: hover) and (pointer: fine) {
  .ac-card:hover { background: #ffffff; }
  .ac-card:hover::before { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .ac-card:active { background: #ffffff; }
  .ac-card:active::before { opacity: 1; }
}

/* -- Mobile-first / narrow-card base: stacked, full-width text -- */
.ac-card-top { display: flex; align-items: stretch; flex-direction: column; flex: 1 1 auto; }
.ac-card-img { flex: 1 1 100%; max-width: 100%; min-height: 260px; position: relative; overflow: hidden; background: #EFE9D7; }
.ac-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.ac-card-info { flex: 1 1 100%; max-width: 100%; padding: 20px; display: flex; flex-direction: column; min-width: 0; }
.ac-cat { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: #7D2826; border: 1px solid #7D2826; border-radius: var(--radius); padding: 3px 8px; margin-bottom: 10px; width: fit-content; }
.ac-name { font-family: var(--grotesk); font-size: 19px; font-weight: 500; color: #232316; line-height: 1.18; margin-bottom: 4px; }
.ac-ref { font-family: var(--serif); font-style: italic; font-size: 13px; font-weight: 300; color: #898861; margin-bottom: 13px; line-height: 1.4; }
.ac-notes { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.ac-note-row { font-size: 12px; line-height: 1.5; color: #4d4e3b; }
.ac-note-k { display: inline; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 9.5px; color: #7D2826; font-weight: 700; margin-right: 6px; }

.ac-size-row { display: flex; gap: 6px; margin-bottom: 11px; flex-wrap: wrap; }
.ac-size-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; padding: 8px 12px; background: transparent; border: 1px solid rgba(52,55,35,0.35); border-radius: var(--radius); color: #4d4e3b; cursor: pointer; transition: all 0.15s; }
.ac-size-btn.on { background: #232316; border-color: #232316; color: #F8F4EC; }
.ac-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.ac-price .ac-price-main { font-family: var(--serif); font-size: 21px; font-weight: 300; color: #7D2826; }
.ac-price .ac-price-orig { font-family: var(--serif); font-size: 13px; font-weight: 300; color: var(--ink-3); text-decoration: line-through; }
.ac-price .ac-price-off { font-family: var(--mono); font-size: 10px; font-weight: 600; color: #E8460D; letter-spacing: 0.02em; }

.ac-batch-row { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #898861; margin-bottom: 7px; }
.ac-dots { display: grid; grid-template-columns: repeat(var(--slots, 6), 1fr); gap: 5px; margin-bottom: 9px; }
.ac-dot-bottle { aspect-ratio: 3/4; background: #EFE9D7; border: 1px solid rgba(52,55,35,0.25); border-radius: 2px; overflow: hidden; position: relative; transition: transform 0.15s, border-color 0.15s; }
.ac-dot-bottle img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; filter: grayscale(1); opacity: 0.32; transition: filter 0.15s, opacity 0.15s; }
.ac-dot-bottle.open { border-color: #7D2826; cursor: pointer; }
.ac-dot-bottle.open img { filter: grayscale(0); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ac-dot-bottle:hover { border-color: #898861; z-index: 1; }
  .ac-dot-bottle:hover img { filter: grayscale(0.25); opacity: 0.85; }
  .ac-dot-bottle.open:hover { transform: scale(1.05); border-color: #7D2826; }
  .ac-dot-bottle.open:hover img { filter: grayscale(0); opacity: 1; }
}
@media (hover: none) and (pointer: coarse) {
  .ac-dot-bottle:active { border-color: #898861; z-index: 1; }
  .ac-dot-bottle:active img { filter: grayscale(0.25); opacity: 0.85; }
  .ac-dot-bottle.open:active { transform: scale(1.05); border-color: #7D2826; }
  .ac-dot-bottle.open:active img { filter: grayscale(0); opacity: 1; }
}
.ac-slots-txt { font-family: var(--mono); font-size: 10.5px; color: #4d4e3b; margin-bottom: 12px; line-height: 1.45; }
.ac-slots-txt strong { color: #7D2826; }

.ac-cta { width: 100%; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 13px; background: #7D2826; color: #F8F4EC; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; margin-top: auto; }
@media (hover:hover) and (pointer:fine) { .ac-cta:hover { background: #5c1c1a; } }
@media (hover: none), (pointer: coarse) { .ac-cta:not(.notify):not(.reserved-txt):active { background: #5c1c1a; } }
.ac-cta.notify { background: #232316; margin-top: 9px; }
@media (hover:hover) and (pointer:fine) { .ac-cta.notify:hover { background: #000; } }
.ac-cta.reserved-txt { background: transparent; border: 1px solid rgba(52,55,35,0.3); color: #898861; cursor: default; margin-top: auto; margin-bottom: 0; }

.ac-disclaimer { font-size: 10px; line-height: 1.5; color: #a39a86; border-top: 1px dotted rgba(52,55,35,0.3); padding: 12px 20px 16px; margin-top: auto; display: flex; align-items: flex-start; }

/* -- Wide card (≥441px rendered width): switch to the 3/5 image + 2/5 text row, tighten type for the narrower text column -- */
@container ac-card (min-width: 441px) {
  .ac-card-top { flex-direction: row; }
  .ac-card-img { flex: 0 0 60%; max-width: 60%; min-height: 380px; }
  .ac-card-info { flex: 1 1 40%; max-width: 40%; padding: 18px 16px; }
  .ac-cat { font-size: 9.5px; padding: 2px 7px; margin-bottom: 8px; }
  .ac-name { font-size: 16px; margin-bottom: 3px; }
  .ac-ref { font-size: 11px; margin-bottom: 10px; }
  .ac-notes { margin-bottom: 12px; gap: 3px; }
  .ac-note-row { font-size: 10.5px; line-height: 1.45; }
  .ac-note-k { display: block; font-size: 8.5px; margin-right: 0; }
  .ac-size-row { gap: 4px; margin-bottom: 9px; }
  .ac-size-btn { font-size: 9.5px; padding: 5px 8px; }
  .ac-price { margin-bottom: 10px; }
  .ac-price .ac-price-main { font-size: 18px; }
  .ac-batch-row { font-size: 9.5px; margin-bottom: 6px; }
  .ac-dots { gap: 4px; margin-bottom: 8px; }
  .ac-slots-txt { font-size: 9.5px; margin-bottom: 10px; }
  .ac-cta { font-size: 10px; padding: 10px; }
  .ac-cta.notify { margin-top: 8px; }
  .ac-disclaimer { font-size: 9px; padding: 10px 16px 14px; }
}

/* Fallback for browsers without container query support: mirror the
   container-query breakpoint using viewport width on single-column
   layouts (below the 960px grid breakpoint, a solo card ≈ viewport width) */
@supports not (container-type: inline-size) {
  @media (min-width: 481px) {
    .ac-card-top { flex-direction: row; }
    .ac-card-img { flex: 0 0 60%; max-width: 60%; min-height: 380px; }
    .ac-card-info { flex: 1 1 40%; max-width: 40%; padding: 18px 16px; }
  }
}

@keyframes fu { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }

/* ── ATELIER FOOTER VARIANT ── */
.ft-atelier { background: #343723; }
.ft-atelier .ft-inner { color: rgba(255,255,255,0.65); }
.ft-atelier .ft-lnk { color: rgba(255,255,255,0.65); }
.ft-atelier .ft-wordmark { color: #EFE9D7; }

/* ── RESERVE SLOT PANEL — mirrors .co-panel structure, Atelier-themed ── */
.ac-rp-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: 100vw;
  background: #F8F4EC; z-index: 301;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
  display: flex; flex-direction: column;
  border-left: 1px solid rgba(52,55,35,0.25);
}
.ac-rp-panel.on { transform: translateX(0); }
.ac-rp-ph { background: #232316; padding: 20px 24px; display: flex; align-items: flex-start; justify-content: space-between; flex-shrink: 0; }
.ac-rp-eyebrow { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #c9a98a; margin-bottom: 4px; }
.ac-rp-title { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: #fff; }
.ac-rp-cl { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 22px; line-height: 1; cursor: pointer; padding: 2px 9px; border-radius: var(--radius); transition: background 0.15s, color 0.15s; }
.ac-rp-cl:hover { background: rgba(255,255,255,0.15); color: #fff; }
.ac-rp-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.ac-rp-summary { background: #EFE9D7; border: 1px dotted rgba(52,55,35,0.35); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.ac-rp-sum-name { font-family: var(--grotesk); font-size: 15px; font-weight: 500; color: #232316; }
.ac-rp-sum-meta { font-family: var(--mono); font-size: 11px; color: #7D2826; }
.ac-rp-foot { padding: 16px 24px 22px; border-top: 1px dotted rgba(52,55,35,0.3); flex-shrink: 0; }
.ac-rp-btn-row { display: flex; gap: 8px; }
.ac-rp-submit { flex: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 13px; background: #7D2826; color: #F8F4EC; border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .ac-rp-submit:hover { background: #5c1c1a; } }
.ac-rp-copy { flex: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; text-transform: uppercase; padding: 12px 6px; background: transparent; color: #7D2826; border: 1px solid rgba(125,40,38,0.4); cursor: pointer; border-radius: var(--radius); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 150ms ease-out; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .ac-rp-copy:hover { background: #232316; color: #fff; border-color: #232316; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.18); } }
.ac-rp-copy.ok { border-color: #7D2826; color: #7D2826; background: rgba(125,40,38,0.08); }
.ac-rp-note { font-size: 10.5px; line-height: 1.55; color: #898861; }
@media (max-width: 560px) { .ac-rp-panel { width: 100vw; } }

/* Mobile reserve panel — clear the fixed 80px bottom nav bar so footer buttons are visible */
@media (max-width: 700px) {
  .ac-rp-panel {
    width: 100vw;
    top: 0 !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    height: calc(100dvh - 80px - env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 80px - env(safe-area-inset-bottom)) !important;
  }
  .ac-rp-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .ac-rp-foot {
    flex-shrink: 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  }
  .ac-rp-btn-row { flex-direction: column; }
}

/* ── BEFORE-FOOTER DARK BAND — reuses .clan-manifesto/.brand-lines-inner,
   recolored to the Atelier palette (deep olive bg, wine accent) ── */
#pg-atelier .clan-manifesto-inner.brand-lines-inner { background: #181818; }
#pg-atelier .clan-mf-eyebrow { color: #C9A98A; }
#pg-atelier .clan-mf-quote em { color: #C9A98A; font-style: italic; }
#pg-atelier .btn-clan-o:hover { border-color: rgba(239,233,215,0.5); color: #EFE9D7; }
#pg-atelier .ac-form-btn { background: #7D2826; border-color: #7D2826; color: #EFE9D7; }
@media (hover: hover) and (pointer: fine) {
  #pg-atelier .ac-form-btn:hover { background: #5c1c1a; border-color: #5c1c1a; color: #EFE9D7; }
}

/* ── OUR FORMULATION PAGE ── */
#pg-formulation { background: #EFE9D7; }
#pg-formulation .ac-frame { padding-top: 30px; }
.form-back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #898861; background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 22px; }
.form-back:hover { color: #7D2826; }
.form-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #7D2826; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.form-eyebrow::before { content: ''; width: 14px; height: 1px; background: #7D2826; }
.form-title { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 4vw, 42px); color: #232316; max-width: 700px; line-height: 1.15; margin-bottom: 22px; }
.form-manifesto { font-family: var(--mono); font-size: 13px; line-height: 1.75; color: #3f402f; max-width: 640px; margin-bottom: 40px; }

.form-sec-lbl { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 21px; color: #232316; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px dotted rgba(52,55,35,0.3); }
.form-elements { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(52,55,35,0.18); border: 1px dotted rgba(52,55,35,0.3); margin-bottom: 44px; }
.form-el { background: #F8F4EC; padding: 22px 22px 24px; transition: background 0.18s; }
@media (hover: hover) and (pointer: fine) { .form-el:hover { background: #FCFAF2; } }
@media (hover: none) and (pointer: coarse) { .form-el:active { background: #FCFAF2; } }
.form-el-num { font-family: var(--mono); font-size: 10px; color: #898861; letter-spacing: 0.06em; margin-bottom: 8px; }
.form-el-name { font-family: var(--grotesk); font-size: 17px; font-weight: 500; color: #232316; margin-bottom: 9px; }
.form-el-txt { font-family: var(--mono); font-size: 12px; line-height: 1.65; color: #4d4e3b; }
@media (max-width: 700px) { .form-elements { grid-template-columns: 1fr; } }

.form-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 44px; }
.form-photo { aspect-ratio: 4/5; border-radius: var(--radius); overflow: hidden; border: 1px dotted rgba(52,55,35,0.3); }
.form-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .form-photos { grid-template-columns: 1fr 1fr; } .form-photos .form-photo:nth-child(3) { display: none; } }

.form-closing { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(17px, 2.2vw, 22px); color: #7D2826; max-width: 620px; line-height: 1.45; margin-bottom: 60px; }

.form-contact { font-family: var(--mono); font-size: 10.5px; color: #898861; line-height: 1.6; padding: 20px 0 40px; border-top: 1px dotted rgba(52,55,35,0.3); }
.form-contact a { color: #898861; text-decoration: underline; text-decoration-style: dotted; }
.form-contact a:hover { color: #7D2826; }

/* ── ATELIER PRODUCT PAGE ── */
#pg-atelier-product { background: #F3EFDC; }
.pp-wrap { padding-top: 32px; padding-bottom: 20px; background: #F7F4E8; }
.pp-frame-divider { border-top: 1px dotted rgba(52,55,35,0.3); margin-top: 0; }
#pg-atelier-product .form-back { font-size: 16pt; font-weight: 700; color: #898861; letter-spacing: -0.5pt; }
.pp-frame-divider-bottom { margin-top: 35px; margin-bottom: 0; }
.pp-hero-row { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 20px; }
.pp-gallery { flex: 1 1 480px; min-width: 280px; }
.pp-hero { width: 100%; aspect-ratio: 1/1; background: #EFE9D7; overflow: hidden; }
.pp-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pp-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; }
.pp-thumb { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #EFE9D7; cursor: pointer; border: 1px dotted rgba(52,55,35,0.3); }
.pp-thumb.on { border-color: #7D2826; }
.pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-thumb-ov { position: absolute; inset: 0; background: rgba(35,35,22,0.78); color: #F7F4E8; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; text-align: center; padding: 4px; }
.pp-thumb:hover .pp-thumb-ov { opacity: 1; }
.pp-thumb-name { font-family: var(--grotesk); font-size: 9px; font-weight: 600; line-height: 1.2; }
.pp-thumb-price { font-family: var(--serif); font-size: 11px; color: #F3EFDC; margin-top: 2px; }
.pp-info { flex: 1 1 380px; min-width: 280px; }
.pp-title { font-family: var(--grotesk); font-size: 28px; font-weight: 500; color: #232316; line-height: 1.15; margin: 6px 0 4px; }
.pp-cta-row { display: flex; flex-direction: row; align-items: stretch; gap: 10px; margin-top: 14px; }
.pp-cta-primary { flex: 4 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pp-cta-primary .ac-cta { width: 100%; height: 48px; padding: 0 13px; border: 1px solid transparent; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.pp-wa { flex: 1 1 0%; height: 48px; background: #343723; color: #F7F4E8; border: 1px solid #343723; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; box-sizing: border-box; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s; }
.pp-wa svg { flex: none; width: 15px; height: 15px; }
@media (hover: hover) and (pointer: fine) { .pp-wa:hover { background: #898861; color: #F7F4E8; } }
.pp-notes-inline { padding: 20px 0 0; margin-top: 20px; border-top: 1px dotted rgba(52,55,35,0.3); }
.pp-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 20px; padding-top: 20px; padding-bottom: 24px; border-top: 1px dotted rgba(52,55,35,0.3); }
.pp-hl { font-family: var(--mono); font-size: 11.5px; color: #232316; line-height: 1.5; }
.pp-hl a { color: #7D2826; text-decoration: underline; text-decoration-style: dotted; }
.pp-hl a:hover { color: #343723; }
.pp-hl-k { display: block; font-family: var(--grotesk); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #898861; margin-bottom: 2px; }
.pp-sec-head { margin-top: 40px; }
.pp-lite-head { font-family: var(--mono); font-size: 16pt; font-weight: 700; letter-spacing: -0.5pt; text-transform: uppercase; color: #898861; display: flex; align-items: center; gap: 10px; margin: 25px 0 16px; }
.pp-lite-line { display: inline-block; width: 20px; height: 1px; background: #7D2826; flex: none; }
.pp-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(52,55,35,0.3); border: 1px dotted rgba(52,55,35,0.3); }
.pp-story-col { background: #F3EFDC; padding: 24px 28px; transition: background 0.18s; }
@media (hover: hover) and (pointer: fine) { .pp-story-col:hover { background: #F8F4EC; } }
@media (hover: none) and (pointer: coarse) { .pp-story-col:active { background: #F8F4EC; } }
.pp-story-col h3 { font-family: var(--grotesk); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #343723; margin: 0 0 10px; }
.pp-story-col .pp-story { max-width: none; padding: 0; }
.pp-story { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: #343723; max-width: 640px; padding: 8px 0 20px; }
.pp-disclaimer { max-width: 640px; }
.pp-rel-grid { grid-template-columns: repeat(4, 1fr); padding-left: 0; padding-right: 0; align-items: start; }
.pp-rel-card { max-width: none; }
.pp-rel-card .ac-card-top { flex: 0 1 auto; }
.pp-rel-card .ac-card-img { min-height: 140px; }
.pp-rel-card .ac-card-info { padding: 14px 16px; flex: 0 1 auto; }
.pp-rel-card .ac-cat { margin-bottom: 6px; }
.pp-rel-card .ac-size-row { gap: 5px; margin-bottom: 8px; }
.pp-rel-card .ac-size-btn { font-size: 9.5px; padding: 5px 9px; }
.pp-rel-card .ac-name { font-size: 15px; margin-bottom: 2px; }
.pp-rel-card .ac-ref { margin-bottom: 8px; }
.pp-rel-card .ac-price { margin-bottom: 8px; }
.pp-rel-card .ac-price .ac-price-main { font-size: 17px; }
.pp-rel-card .ac-cta { padding: 10px; margin-top: 4px; }
.pp-faq-box { background: #F3EFDC; border: 1px dotted rgba(52,55,35,0.3); padding: 24px 28px; margin-top: 25px; }
.pp-faq-box h3 { font-family: var(--grotesk); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #343723; margin: 0 0 6px; }
.pp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.pp-faq-item { border-bottom: 1px dotted rgba(52,55,35,0.3); }
.pp-faq-grid .pp-faq-item:nth-last-child(-n+2) { border-bottom: none; }
.pp-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: none; border: none; text-align: left; font-family: var(--grotesk); font-size: 13.5px; font-weight: 500; color: #232316; padding: 14px 0; cursor: pointer; }
.pp-faq-ic { font-size: 18px; color: #7D2826; transition: transform .2s; flex: none; }
.pp-faq-item.on .pp-faq-ic { transform: rotate(45deg); }
.pp-faq-a { max-height: 0; overflow: hidden; font-family: var(--mono); font-size: 12px; color: #898861; line-height: 1.6; transition: max-height .2s; }
.pp-faq-item.on .pp-faq-a { max-height: 200px; padding-bottom: 14px; }
.pp-reviews { font-family: var(--mono); font-size: 12px; color: #898861; padding: 10px 0 40px; max-width: 640px; }
@media (max-width: 700px) {
  .pp-hero-row { flex-direction: column; gap: 20px; }
  .pp-title { font-size: 23px; }
  .pp-highlights { grid-template-columns: 1fr; }
  .pp-story-grid { grid-template-columns: 1fr; }
  .pp-faq-grid { grid-template-columns: 1fr; }
  .pp-faq-grid .pp-faq-item:nth-last-child(-n+2) { border-bottom: 1px dotted rgba(52,55,35,0.3); }
  .pp-faq-grid .pp-faq-item:last-child { border-bottom: none; }
  .pp-rel-grid { grid-template-columns: repeat(2, 1fr); }
  .pp-thumbs { grid-template-columns: repeat(3, 1fr); }
  #pg-atelier-product .form-back { font-size: 14pt; font-weight: 700; color: #898861; letter-spacing: 0.02em; }
  .pp-lite-head { font-size: 14pt; font-weight: 700; color: #898861; letter-spacing: 0.02em; }
  .pp-wa-label { display: none; }
  .pp-wa { flex: 0 0 48px; padding: 0; gap: 0; }
  .pp-wa svg { width: 22px; height: 22px; }
}