/* ═══════════════════════════════════════════════════════════════════════════
 * olithookalitvape.com · core.css — Direction D2 · Vivid Atmosphere
 * Component primitives + page section layouts. Reads from tokens.css.
 * 2026-05-15 · rewrite from scratch (replaces v1 razvape fork).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───── A. SR & utility ───── */
.oh-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.oh-muted { color: var(--oh-ink-3); }

/* ───── B. Atmosphere — diffuse chromatic background ─────
 *
 *  CRITICAL RULES (from handoff README, do NOT break):
 *    1. NEVER linear-gradient.  Always 5-6 absolutely positioned circular
 *       <div>s with radial-gradient + filter: blur(90px) on each blob.
 *    2. blob blur must be ≥ 80px.  Below that you get visible hard edges
 *       and rainbow stripes — the exact failure mode the previous v1
 *       hit at blur(60px).
 *    3. Cards are GLASS rgba(255,255,255,.50) + backdrop-filter blur.
 *       Cards never carry their own chroma; the chroma comes from the
 *       atmosphere layer behind them.
 *
 *  IMPLEMENTATION NOTE:
 *  The atmosphere is anchored to the top-of-page (position: absolute,
 *  height: 100vh + a tail) so each archetype renders chroma behind its
 *  hero and softly fades into the cream paper below.  This is simpler
 *  than the per-section variant in reference-guide.html but renders the
 *  same way visually.
 */
/* Atmosphere is rendered as a child of each archetype hero section
 * (.oh-home-hero / .oh-flavors-hero / .oh-pdp-hero / .oh-vs-hero /
 * .oh-info-hero / .oh-guide-hero), via {% include "components/atmosphere.njk" %}.
 *
 * The hero section must declare:
 *   position: relative;
 *   overflow: hidden;
 *   isolation: isolate;
 * so atmosphere stays clipped inside it and doesn't bleed into adjacent
 * page sections.  This matches the handoff reference-guide.html SECTION
 * model and avoids the cross-stacking-context bugs we hit with the
 * global body/main atmosphere model.
 */
.oh-atmosphere {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* Hero section bodies sit above the atmosphere via z-index */
.oh-home-hero > *:not(.oh-atmosphere),
.oh-flavors-hero > *:not(.oh-atmosphere),
.oh-pdp-hero > *:not(.oh-atmosphere),
.oh-vs-hero > *:not(.oh-atmosphere),
.oh-info-hero > *:not(.oh-atmosphere),
.oh-guide-hero > *:not(.oh-atmosphere) {
  position: relative;
  z-index: 1;
}

/* ───── PC max-width container ─────
 * All `<section>` direct children of <main.oh-doc-root> render full-bleed
 * so atmosphere blobs can extend edge-to-edge, but their immediate non-
 * atmosphere children are constrained to 1280px and centered. This is the
 * one-rule equivalent of wrapping every section's content in a container. */
.oh-doc-root > section > *:not(.oh-atmosphere) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Make hero sections atmosphere-host containers */
.oh-home-hero,
.oh-flavors-hero,
.oh-pdp-hero,
.oh-vs-hero,
.oh-info-hero,
.oh-guide-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.oh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);          /* CRITICAL · do not lower below 80px */
  pointer-events: none;
  will-change: transform;
}
/* Color modifier classes (handoff range) — for direct in-markup blobs */
.oh-blob--rose      { background: radial-gradient(circle, #FF3D7A 0%, transparent 65%); }
.oh-blob--magenta   { background: radial-gradient(circle, #E63CFF 0%, transparent 65%); }
.oh-blob--lavender  { background: radial-gradient(circle, #8A5DFF 0%, transparent 65%); }
.oh-blob--sky       { background: radial-gradient(circle, #1FA4FF 0%, transparent 65%); }
.oh-blob--cyan      { background: radial-gradient(circle, #25E4F0 0%, transparent 65%); }
.oh-blob--mint      { background: radial-gradient(circle, #4DEAA5 0%, transparent 65%); }
.oh-blob--lime      { background: radial-gradient(circle, #C2F23A 0%, transparent 65%); }
.oh-blob--amber     { background: radial-gradient(circle, #FFD11A 0%, transparent 65%); }
.oh-blob--peach     { background: radial-gradient(circle, #FF8533 0%, transparent 65%); }
.oh-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .28;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.25 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Atmosphere presets ──
 * Values lifted directly from handoff README — see meadow/rose/cool blocks.
 * data-preset drives which 5-6 blob set lights up via nth-child rules.
 * Opacity range .50-.85 (handoff spec) — higher than the v1 .40-.65 which
 * was producing washed-out/grey output that read as "wrong gradient".
 */

/* rose · Home / Brand */
.oh-atmosphere[data-preset="rose"]    .oh-blob:nth-child(1){ left:-8%;  top:-10%; width:820px; height:820px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.85; }
.oh-atmosphere[data-preset="rose"]    .oh-blob:nth-child(2){ left:55%;  top:-6%;  width:760px; height:760px; background:radial-gradient(circle,#FF8533 0%,transparent 65%); opacity:.78; }
.oh-atmosphere[data-preset="rose"]    .oh-blob:nth-child(3){ left:32%;  top:30%;  width:1000px;height:900px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.62; }
.oh-atmosphere[data-preset="rose"]    .oh-blob:nth-child(4){ left:-12%; top:55%;  width:760px; height:760px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.55; }
.oh-atmosphere[data-preset="rose"]    .oh-blob:nth-child(5){ left:70%;  top:58%;  width:720px; height:720px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.66; }

/* cool · PDP / VS / Compare */
.oh-atmosphere[data-preset="cool"]    .oh-blob:nth-child(1){ left:-10%; top:-8%;  width:880px; height:880px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.80; }
.oh-atmosphere[data-preset="cool"]    .oh-blob:nth-child(2){ left:55%;  top:-4%;  width:780px; height:780px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.72; }
.oh-atmosphere[data-preset="cool"]    .oh-blob:nth-child(3){ left:30%;  top:42%;  width:960px; height:900px; background:radial-gradient(circle,#25E4F0 0%,transparent 65%); opacity:.55; }
.oh-atmosphere[data-preset="cool"]    .oh-blob:nth-child(4){ left:70%;  top:60%;  width:740px; height:740px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.55; }
.oh-atmosphere[data-preset="cool"]    .oh-blob:nth-child(5){ left:-8%;  top:60%;  width:700px; height:700px; background:radial-gradient(circle,#FFD11A 0%,transparent 65%); opacity:.45; }

/* aurora · Flavors hub — uses 6 blobs (one extra slot) for richer wash */
.oh-atmosphere[data-preset="aurora"]  .oh-blob:nth-child(1){ left:-6%;  top:-10%; width:1000px;height:1000px;background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.72; }
.oh-atmosphere[data-preset="aurora"]  .oh-blob:nth-child(2){ left:55%;  top:-12%; width:900px; height:900px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.70; }
.oh-atmosphere[data-preset="aurora"]  .oh-blob:nth-child(3){ left:35%;  top:25%;  width:1100px;height:950px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.62; }
.oh-atmosphere[data-preset="aurora"]  .oh-blob:nth-child(4){ left:-15%; top:50%;  width:840px; height:840px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.60; }
.oh-atmosphere[data-preset="aurora"]  .oh-blob:nth-child(5){ left:60%;  top:55%;  width:860px; height:860px; background:radial-gradient(circle,#FF8533 0%,transparent 65%); opacity:.60; }
.oh-atmosphere[data-preset="aurora"]  .oh-blob:nth-child(6){ left:20%;  top:70%;  width:780px; height:780px; background:radial-gradient(circle,#C2F23A 0%,transparent 65%); opacity:.50; }

/* peach · Info / About */
.oh-atmosphere[data-preset="peach"]   .oh-blob:nth-child(1){ left:-10%; top:-14%; width:900px; height:900px; background:radial-gradient(circle,#FF8533 0%,transparent 65%); opacity:.82; }
.oh-atmosphere[data-preset="peach"]   .oh-blob:nth-child(2){ left:55%;  top:-8%;  width:820px; height:820px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.72; }
.oh-atmosphere[data-preset="peach"]   .oh-blob:nth-child(3){ left:25%;  top:35%;  width:1000px;height:900px; background:radial-gradient(circle,#FFD11A 0%,transparent 65%); opacity:.62; }
.oh-atmosphere[data-preset="peach"]   .oh-blob:nth-child(4){ left:-12%; top:55%;  width:800px; height:800px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.52; }
.oh-atmosphere[data-preset="peach"]   .oh-blob:nth-child(5){ left:65%;  top:60%;  width:800px; height:800px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.55; }

/* meadow · Guide / How-to */
.oh-atmosphere[data-preset="meadow"]  .oh-blob:nth-child(1){ left:-12%; top:-10%; width:880px; height:880px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.82; }
.oh-atmosphere[data-preset="meadow"]  .oh-blob:nth-child(2){ left:55%;  top:-4%;  width:780px; height:780px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.75; }
.oh-atmosphere[data-preset="meadow"]  .oh-blob:nth-child(3){ left:32%;  top:44%;  width:960px; height:900px; background:radial-gradient(circle,#C2F23A 0%,transparent 65%); opacity:.55; }
.oh-atmosphere[data-preset="meadow"]  .oh-blob:nth-child(4){ left:65%;  top:55%;  width:760px; height:760px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.55; }
.oh-atmosphere[data-preset="meadow"]  .oh-blob:nth-child(5){ left:-8%;  top:62%;  width:700px; height:700px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.50; }

/* mono · low-key utility wash, used by my-account / checkout / search */
.oh-atmosphere[data-preset="mono"]    .oh-blob:nth-child(1){ left:-10%; top:-8%;  width:820px; height:820px; background:radial-gradient(circle,#E8E2D6 0%,transparent 65%); opacity:.95; }
.oh-atmosphere[data-preset="mono"]    .oh-blob:nth-child(2){ left:60%;  top:30%;  width:900px; height:900px; background:radial-gradient(circle,#D9D3C5 0%,transparent 65%); opacity:.95; }
.oh-atmosphere[data-preset="mono"]    .oh-blob:nth-child(3){ left:20%;  top:70%;  width:820px; height:820px; background:radial-gradient(circle,#EDE8DC 0%,transparent 65%); opacity:.95; }

/* ───── C. Glass surfaces ─────
 * Cards are GLASS, NEVER colored.  All chroma comes from the atmosphere
 * behind them.  Two name forms supported:
 *   .oh-glass-deep / .oh-flat   ← existing in-tree usage
 *   .oh-glass--deep / .oh-glass--flat ← handoff range (BEM modifier form)
 * Both render identically.
 */
.oh-glass {
  position: relative;
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-glass-shadow);
}
.oh-glass-deep,
.oh-glass--deep {
  background: var(--oh-glass-deep);
  border-color: rgba(255,255,255,.92);
}
.oh-flat,
.oh-glass--flat {
  background: rgba(255,255,255,0.42);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ───── C.1 Universal italic display word ─────
 * Italic display words MUST swap to a serif family (Instrument Serif).
 * NEVER apply font-style: italic to the sans display font — the slant
 * gets faked algorithmically and the glyphs distort.  Both forms work:
 *   <span class="oh-em">20K hub.</span>     ← handoff form
 *   <em>20K hub.</em>                         ← simpler markup
 * Both resolve to Instrument Serif italic 500.
 */
.oh-em,
.dvx em,
.dvx h1 em,
.dvx h2 em,
.dvx h3 em,
.oh-hero__h1 em,
.oh-display em {
  font-family: var(--oh-font-serif);
  font-style: italic;
  font-weight: 500;
}
.oh-ink-card {
  background: var(--oh-ink);
  color: var(--oh-paper);
  border: 1px solid var(--oh-ink);
  border-radius: var(--oh-r-md);
}
.oh-rule {
  display: block;
  height: 1px;
  background: var(--oh-hair);
  border: 0;
  margin: 0;
}

/* ───── D. Placeholder ─────  (used for device imagery until real product shots land) */
.oh-pl {
  position: relative;
  overflow: hidden;
  border-radius: var(--oh-r-lg);
  background:
    radial-gradient(80% 60% at 30% 30%, rgba(255,61,122,.55), transparent 60%),
    radial-gradient(70% 70% at 80% 70%, rgba(138,93,255,.55), transparent 60%),
    radial-gradient(60% 60% at 50% 90%, rgba(77,234,165,.5), transparent 60%),
    var(--oh-paper-deep);
}
.oh-pl::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(14,17,22,.05) 0 1px, transparent 1px 14px);
  mix-blend-mode: multiply; opacity: .55;
}
.oh-pl-cap {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--oh-ink); opacity: .55; z-index: 2;
}
.oh-pl-cap[data-pos="tr"] { right: 14px; top: 12px; left: auto; bottom: auto; }

/* ───── E. Type helpers ───── */
.oh-display {
  font-family: var(--oh-font-display);
  letter-spacing: var(--oh-tr-display);
  line-height: var(--oh-lh-tight);
  font-weight: 700;
}
.oh-serif-italic {
  font-family: var(--oh-font-serif);
  font-style: italic;
  font-weight: 500;
}
.oh-mono {
  font-family: var(--oh-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1, "ss01" 1;
}
.oh-eyebrow {
  font-family: var(--oh-font-mono);
  font-size: var(--oh-fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
}
.oh-micro {
  font-family: var(--oh-font-mono);
  font-size: var(--oh-fs-mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
}
.oh-num {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  font-weight: 700;
}

/* ───── F. Pills / chips / dots ───── */
.oh-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--oh-ink);
  transition: background var(--oh-dur-fast) var(--oh-ease);
  cursor: pointer;
}
.oh-pill:hover { background: rgba(255,255,255,.85); }
.oh-pill.is-active {
  background: var(--oh-ink);
  color: var(--oh-paper);
  border-color: var(--oh-ink);
}
.oh-pill.is-active:hover { background: var(--oh-ink-2); }

.oh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oh-ink);
}
.oh-chip-ink {
  background: var(--oh-ink); color: var(--oh-paper);
  border-color: var(--oh-ink);
}
.oh-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block; flex-shrink: 0;
}
.oh-dot-ok    { background: var(--oh-signal-ok);   }
.oh-dot-warn  { background: var(--oh-signal-warn); }
.oh-dot-err   { background: var(--oh-signal-err);  }

/* ───── G. Buttons ───── */
.oh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 22px;
  border-radius: var(--oh-r-pill);
  border: 1px solid transparent;
  font-weight: 600; font-size: 15px;
  transition: transform var(--oh-dur-fast) var(--oh-ease),
              background var(--oh-dur-fast) var(--oh-ease);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.oh-btn:hover { transform: translateY(-1px); }
.oh-btn:active { transform: translateY(0); }
.oh-btn-primary {
  background: var(--oh-ink);
  color: #fff;
  border-color: var(--oh-ink);
}
.oh-btn-primary:hover { background: var(--oh-ink-2); color: #fff; }
.oh-btn-ghost {
  background: rgba(255,255,255,.70);
  color: var(--oh-ink);
  border-color: var(--oh-hair);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.oh-btn-ghost:hover { background: rgba(255,255,255,.92); color: var(--oh-ink); }
.oh-btn-arrow {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--oh-paper); color: var(--oh-ink);
  display: grid; place-items: center;
  margin-right: -10px; margin-left: 4px;
  flex-shrink: 0;
}
.oh-btn-ghost .oh-btn-arrow { background: var(--oh-ink); color: var(--oh-paper); }
.oh-btn-red {
  background: var(--oh-signal-err);
  color: #fff;
  border-color: var(--oh-signal-err);
}
.oh-btn-red:hover { background: #A92E2E; color: #fff; }

/* ───── H. Container / section helpers ───── */
.oh-section {
  position: relative;
  padding: 60px var(--oh-pad-x);
  max-width: 100%;
}
.oh-section-hero {
  position: relative;
  padding: 60px var(--oh-pad-x) 80px;
}
.oh-section-narrow {
  position: relative;
  padding: 60px var(--oh-pad-x);
  max-width: var(--oh-max-w-nb);
  margin: 0 auto;
}
.oh-container {
  max-width: var(--oh-max-w);
  margin: 0 auto;
  padding: 0 var(--oh-pad-x);
}

/* main wrapper — push content above atmosphere fixed bg.
   Pages without a `.oh-*-hero` first child get a minimum top margin so
   their content doesn't crash into the sticky glass header. Sticky header
   already takes its own space, so this is just visual breathing room. */
.oh-doc-root {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 200px);
}

/* ───── I. Logo ───── */
.oh-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--oh-ink);
}
.oh-logo-mark {
  width: 28px; height: 30px;
  flex-shrink: 0;
}
.oh-logo-text {
  font-family: var(--oh-font-display);
  font-size: 28px;
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1;
}
.oh-logo-sub {
  display: block;
  font-family: var(--oh-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.55;
}

/* ───── J. Header — glass pill nav (sticky top, occupies space) ───── */
.oh-header {
  position: sticky;
  top: 16px;
  z-index: 5;
  margin: 16px auto 0;
  max-width: 1280px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.oh-header-logo {
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
}
.oh-header-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: var(--oh-r-pill);
}
.oh-header-nav a {
  padding: 8px 16px;
  border-radius: var(--oh-r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--oh-ink);
  white-space: nowrap;
  transition: background var(--oh-dur-fast) var(--oh-ease);
}
.oh-header-nav a:hover { background: rgba(255,255,255,.7); color: var(--oh-ink); }
.oh-header-nav a.is-active,
.oh-header-nav a[aria-current="page"] {
  background: var(--oh-ink);
  color: var(--oh-paper);
}

/* dropdown nav */
.oh-nav-item {
  position: relative;
}
.oh-nav-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 16px;
  border-radius: var(--oh-r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--oh-ink);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--oh-dur-fast) var(--oh-ease);
}
.oh-nav-trigger:hover,
.oh-nav-has-menu:hover .oh-nav-trigger,
.oh-nav-has-menu:focus-within .oh-nav-trigger {
  background: rgba(255,255,255,.7);
}
.oh-nav-caret {
  transition: transform var(--oh-dur-fast) var(--oh-ease);
  opacity: .7;
}
.oh-nav-has-menu:hover .oh-nav-caret,
.oh-nav-has-menu:focus-within .oh-nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.oh-nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  padding: 8px;
  background: var(--oh-paper);
  border: 1px solid rgba(14,17,22,.08);
  border-radius: 16px;
  box-shadow: 0 18px 48px -12px rgba(14,17,22,.18), 0 4px 12px -4px rgba(14,17,22,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--oh-dur-fast) var(--oh-ease), transform var(--oh-dur-fast) var(--oh-ease), visibility 0s linear var(--oh-dur-fast);
  z-index: 50;
}
.oh-nav-has-menu:hover .oh-nav-dropdown,
.oh-nav-has-menu:focus-within .oh-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--oh-dur-fast) var(--oh-ease), transform var(--oh-dur-fast) var(--oh-ease), visibility 0s linear 0s;
}
.oh-nav-dropdown a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--oh-ink);
  transition: background var(--oh-dur-fast) var(--oh-ease);
}
.oh-nav-dropdown a:hover { background: var(--oh-paper-deep); }
.oh-nav-dd-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.oh-nav-dd-meta {
  font-family: var(--oh-font-mono);
  font-size: 11px;
  color: var(--oh-ink-3);
  letter-spacing: .02em;
}
.oh-header-actions {
  display: flex; align-items: center; gap: 10px;
}
.oh-icon-btn {
  width: 44px; height: 44px;
  border-radius: var(--oh-r-pill);
  display: grid; place-items: center;
  color: var(--oh-ink);
  position: relative;
  cursor: pointer;
}
.oh-cart-count {
  position: absolute;
  top: 6px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--oh-ink);
  color: var(--oh-paper);
  font-family: var(--oh-font-mono);
  font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
}

/* mobile-only nav toggle */
.oh-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--oh-r-pill);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.oh-nav-toggle span {
  display: block;
  width: 18px; height: 2px;
  background: var(--oh-ink);
  border-radius: 1px;
}

/* ───── K. Announcement bar — sits inline in hero, not fixed ───── */
.oh-announce-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--oh-r-pill);
  font-size: 12.5px; color: var(--oh-ink-2);
}
.oh-announce-pill .oh-chip { flex-shrink: 0; }

/* legacy top-strip announce (kept for back-compat; restyled) */
.oh-announce {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 8px 16px;
  background: var(--oh-ink);
  color: var(--oh-paper);
  font-family: var(--oh-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oh-announce .oh-dot { color: var(--oh-signal-ok); }
.oh-announce .oh-emph-yellow { color: var(--oh-c-amber); font-weight: 700; }

/* ───── L. Stamps row ───── */
.oh-stamps { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.oh-stamps[data-compact] { gap: 14px; }
.oh-stamp-item { display: flex; align-items: center; gap: 10px; }
.oh-stamp-icon {
  width: 30px; height: 30px; border-radius: var(--oh-r-pill);
  border: 1px solid var(--oh-hair-2);
  display: grid; place-items: center;
  font-size: 11px; color: var(--oh-ink);
  flex-shrink: 0;
}
.oh-stamps[data-compact] .oh-stamp-icon { width: 26px; height: 26px; }
.oh-stamp-label {
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oh-ink-3); margin-bottom: 1px;
}
.oh-stamp-value { font-size: 12.5px; font-weight: 500; color: var(--oh-ink); }

/* ───── M. Price block ───── */
.oh-price {
  display: inline-flex; align-items: baseline; gap: 10px;
}
.oh-price-sale {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--oh-ink);
}
.oh-price[data-size="lg"] .oh-price-sale { font-size: 36px; }
.oh-price[data-size="md"] .oh-price-sale { font-size: 26px; }
.oh-price[data-size="sm"] .oh-price-sale { font-size: 20px; }
.oh-price-list {
  font-family: var(--oh-font-mono);
  color: var(--oh-ink-3);
  text-decoration: line-through;
}
.oh-price[data-size="lg"] .oh-price-list { font-size: 15px; }
.oh-price[data-size="md"] .oh-price-list { font-size: 11px; }
.oh-price[data-size="sm"] .oh-price-list { font-size: 9px; }

/* ───── N. Footer ───── */
.oh-footer {
  position: relative;
  z-index: 1;
  padding: 80px var(--oh-pad-x) 48px;
}
.oh-footer-inner {
  padding: 44px;
  border-radius: 28px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.oh-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
}

/* ── Sensei Scroll — brush-ink restock opt-in (inside brand col) ── */
.oh-scroll {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(155deg, var(--oh-paper-deep) 0%, var(--oh-paper-warm) 100%);
  border: 1px solid var(--oh-hair-2);
  max-width: 340px;
  position: relative;
}
.oh-scroll-banner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.oh-scroll-seal {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: #B23A2E;
  color: #FAF4E8;
  font-family: var(--oh-font-display, serif);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(178, 58, 46, 0.35);
  flex-shrink: 0;
  transform: rotate(-4deg);
}
.oh-scroll-titles { line-height: 1.25; }
.oh-scroll-h {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--oh-ink);
  letter-spacing: -0.005em;
}
.oh-scroll-sub {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--oh-ink-3);
  line-height: 1.4;
}
.oh-scroll-brush {
  margin-top: 12px;
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--oh-hair-2);
  border-radius: 11px;
  overflow: hidden;
}
.oh-scroll-brush:focus-within { border-color: #B23A2E; }
.oh-scroll-brush input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 9px 12px;
  font-size: 0.8125rem;
  color: var(--oh-ink);
  min-width: 0;
}
.oh-scroll-brush input::placeholder {
  color: var(--oh-ink-4);
  font-style: italic;
}
.oh-scroll-brush button {
  border: 0;
  background: var(--oh-ink);
  color: var(--oh-paper);
  padding: 0 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease;
}
.oh-scroll-brush button:hover:not(:disabled) { background: #B23A2E; }
.oh-scroll-brush button:disabled { opacity: 0.5; cursor: progress; }
.oh-scroll-echo {
  margin: 9px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
}
.oh-scroll-echo--ok    {
  background: rgba(178, 58, 46, 0.08);
  color: #6B201A;
  border: 1px solid rgba(178, 58, 46, 0.25);
}
.oh-scroll-echo--stray {
  background: rgba(0,0,0,0.05);
  color: var(--oh-ink-2);
  border: 1px solid var(--oh-hair-2);
}
.oh-footer-col h4 {
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
  margin-bottom: 14px;
  font-weight: 600;
}
.oh-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.oh-footer-col li a {
  font-size: 13.5px;
  color: var(--oh-ink-2);
}
.oh-footer-col li a:hover { color: var(--oh-ink); }
.oh-footer-meta {
  display: block;
  font-family: var(--oh-font-mono);
  font-size: 10.5px;
  color: var(--oh-ink-3);
  letter-spacing: .04em;
  margin-top: 2px;
}
.oh-footer-brand p {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--oh-ink-2);
  max-width: 320px;
}
.oh-footer-vp {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--oh-ink);
}
.oh-footer-vp-label {
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}
.oh-footer-vp-name {
  font-family: var(--oh-font-display);
  font-size: 14px; letter-spacing: -0.01em;
}
.oh-footer-social { margin-top: 18px; display: flex; gap: 8px; }
.oh-footer-social a {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.42);
  border: 1px solid var(--oh-hair);
  display: grid; place-items: center;
  font-family: var(--oh-font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--oh-ink);
}
.oh-footer-bottom-row {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--oh-hair);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  flex-wrap: wrap;
}
.oh-footer-warning {
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink);
  font-weight: 600; letter-spacing: 0.08em;
}
.oh-footer-legal {
  font-size: 11.5px;
  color: var(--oh-ink-3);
  margin-top: 8px;
  line-height: 1.5;
  max-width: 720px;
}
.oh-footer-build {
  font-family: var(--oh-font-mono);
  font-size: 10px; color: var(--oh-ink-3);
  letter-spacing: 0.12em; text-transform: uppercase;
}

/* ───── O. Mobile drawer dialog (Alpine) ───── */
.oh-mobile-dialog {
  border: 0;
  padding: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: var(--oh-paper);
  color: var(--oh-ink);
  margin: 0;
  margin-left: auto;
  position: fixed;
  inset: 0 0 0 auto;
}
.oh-mobile-dialog::backdrop {
  background: rgba(14,17,22,.45);
  backdrop-filter: blur(4px);
}
.oh-mobile-close {
  position: absolute; top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--oh-glass);
  border: 1px solid var(--oh-hair);
  font-size: 16px;
  cursor: pointer;
}
.oh-mobile-list {
  list-style: none; padding: 80px 28px 28px; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.oh-mobile-list a {
  display: block;
  font-size: 17px;
  font-weight: 500;
  padding: 6px 0;
}
.oh-mobile-list details summary {
  list-style: none;
  cursor: pointer;
  font-size: 17px; font-weight: 600;
  padding: 6px 0;
}
.oh-mobile-list details summary::-webkit-details-marker { display: none; }
.oh-mobile-list details ul {
  list-style: none; padding: 8px 0 0 14px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.oh-mobile-list details ul a {
  font-size: 14.5px; font-weight: 400;
  color: var(--oh-ink-2);
  display: flex; flex-direction: column; gap: 2px;
}
.oh-mobile-meta {
  font-family: var(--oh-font-mono);
  font-size: 11px;
  color: var(--oh-ink-3);
  letter-spacing: .04em;
}
.oh-mobile-divider {
  height: 1px; background: var(--oh-hair); border: 0;
  margin: 8px 0;
}

/* ───── P. Cart side panel (Alpine) ───── */
.oh-cart-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 100vw);
  height: 100vh;
  background: var(--oh-paper);
  z-index: 50;
  transform: translateX(100%);
  transition: transform var(--oh-dur-slow) var(--oh-ease);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--oh-hair-2);
}
.oh-cart-panel.is-open { transform: translateX(0); }
.oh-cart-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--oh-hair);
}
.oh-cart-panel-title {
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  font-weight: 600;
}
.oh-cart-panel-head button {
  width: 32px; height: 32px;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
}
.oh-cart-panel-body {
  flex: 1; overflow-y: auto;
  padding: 20px 24px;
}
.oh-cart-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.oh-cart-item {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--oh-hair);
}
.oh-cart-item-name { font-size: 13.5px; font-weight: 600; margin: 0; }
.oh-cart-item-var  { font-size: 11.5px; margin: 2px 0 0; }
.oh-cart-qty {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.oh-cart-qty button {
  width: 22px; height: 22px; border-radius: 999px;
  border: 1px solid var(--oh-hair);
  font-size: 12px;
  cursor: pointer;
}
.oh-cart-qty span:not(.oh-cart-rm) {
  font-family: var(--oh-font-mono);
  font-size: 13px;
  min-width: 18px; text-align: center;
}
.oh-cart-rm {
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
  border: 0; background: transparent;
  margin-left: 8px;
  cursor: pointer;
}
.oh-cart-price {
  font-family: var(--oh-font-mono);
  font-weight: 600;
  font-size: 13.5px;
}
.oh-cart-panel-foot {
  padding: 20px 24px;
  border-top: 1px solid var(--oh-hair);
  display: flex; flex-direction: column; gap: 12px;
}
.oh-cart-subtotal {
  display: flex; justify-content: space-between;
  font-family: var(--oh-font-mono);
  font-size: 13px;
}
.oh-cart-subtotal strong { font-size: 16px; font-weight: 700; }

/* ───── Q. TL;DR / Speakable block ───── */
.oh-tldr {
  margin-top: 40px;
  padding: 24px;
  border-radius: var(--oh-r-lg);
  display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start;
}
.oh-tldr-label .oh-micro:first-child { color: var(--oh-ink); margin-bottom: 6px; }
.oh-tldr p {
  margin: 0;
  font-size: 15.5px;
  color: var(--oh-ink-2);
  line-height: 1.55;
}

/* ───── R. Quick-spec / specs primitives ───── */
.oh-quick-spec {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.oh-quick-spec-cell .oh-num { font-size: 64px; line-height: 1; margin-top: 8px; }
.oh-quick-spec-cell .oh-spec-value { display: block; }
.oh-quick-spec-cell-sub {
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
  margin-top: 6px;
}

.oh-specs-table {
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 40px; row-gap: 0;
}
.oh-specs-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--oh-hair);
}
.oh-specs-key {
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.oh-spec-value, .oh-specs-val {
  font-size: 13.5px;
  color: var(--oh-ink);
}

/* ───── S. FAQ accordion (native <details>/<summary>) ───── */
.oh-faq { border-radius: var(--oh-r-lg); overflow: hidden; }
.oh-faq details { border-bottom: 1px solid var(--oh-hair); }
.oh-faq details:last-child { border-bottom: 0; }
.oh-faq summary {
  padding: 20px 24px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 500;
  color: var(--oh-ink);
}
.oh-faq summary::-webkit-details-marker { display: none; }
.oh-faq summary::after {
  content: "+";
  font-size: 18px; color: var(--oh-ink-3);
  transition: transform var(--oh-dur-base) var(--oh-ease);
}
.oh-faq details[open] summary::after { content: "−"; }
.oh-faq-a {
  padding: 0 24px 22px;
  font-size: 14px;
  color: var(--oh-ink-2);
  line-height: 1.6;
}

/* ───── T. Flavor profile dots ───── */
.oh-flavor-dots {
  display: flex; gap: 10px;
}
.oh-flavor-dot-col {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
}
.oh-flavor-dot-col-stack {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 4px;
}
.oh-flavor-dot-pip {
  width: 4px; height: 4px; border-radius: 999px;
  background: rgba(14,17,22,.14);
}
.oh-flavor-dot-pip.is-on { background: var(--oh-ink); }
.oh-flavor-dot-label {
  font-family: var(--oh-font-mono);
  font-size: 8.5px; color: var(--oh-ink-3);
}

/* ───── U. Family chip + family colors helpers ───── */
.oh-family-iced     { --fam: var(--oh-f-iced);     --fam-deep: var(--oh-f-iced-deep); }
.oh-family-sour     { --fam: var(--oh-f-sour);     --fam-deep: var(--oh-f-sour-deep); }
.oh-family-mint     { --fam: var(--oh-f-mint);     --fam-deep: var(--oh-f-mint-deep); }
.oh-family-tropical { --fam: var(--oh-f-tropical); --fam-deep: var(--oh-f-tropical-deep); }
.oh-family-berry    { --fam: var(--oh-f-berry);    --fam-deep: var(--oh-f-berry-deep); }
.oh-family-peach    { --fam: var(--oh-f-peach);    --fam-deep: var(--oh-f-peach-deep); }
.oh-family-signature{ --fam: var(--oh-f-sig);      --fam-deep: var(--oh-f-sig-deep); }
.oh-family-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  background: color-mix(in srgb, var(--fam) 40%, transparent);
  border: 1px solid var(--fam);
  border-radius: var(--oh-r-pill);
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--oh-ink);
}
.oh-family-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--fam);
}

/* ───── V. Home page sections ───── */
.oh-home-hero { padding: 60px var(--oh-pad-x) 80px; position: relative; }
.oh-home-hero-inner {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: 48px; align-items: center;
}
.oh-home-hero-h1 {
  font-family: var(--oh-font-display);
  font-size: 78px;
  letter-spacing: -0.028em;
  line-height: 1.02;
  font-weight: 700;
  color: var(--oh-ink);
  max-width: 640px;
  margin: 0;
}
.oh-home-hero-h1 em {
  font-family: var(--oh-font-serif);
  font-style: italic;
  font-weight: 500;
}
.oh-home-hero-sub {
  margin-top: 24px;
  font-size: 17.5px;
  color: var(--oh-ink-2);
  line-height: 1.55;
  max-width: 540px;
}
.oh-home-hero-cta { margin-top: 34px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.oh-home-hero-stamps { margin-top: 56px; }

.oh-home-hero-visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
}
.oh-home-hero-visual-inner {
  position: absolute; inset: 0;
  border-radius: var(--oh-r-xl);
  overflow: hidden;
}
.oh-home-hero-spec-card {
  position: absolute;
  padding: 12px 16px;
  border-radius: var(--oh-r-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
}

.oh-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 28px; gap: 24px; flex-wrap: wrap;
}
.oh-section-h2 {
  font-family: var(--oh-font-display);
  font-size: 44px;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 10px 0 0;
  font-weight: 700;
}
.oh-section-h2 em {
  font-family: var(--oh-font-serif);
  font-style: italic;
  font-weight: 500;
}

.oh-devices-grid {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: stretch;
}
.oh-devices-grid-side {
  display: grid; grid-template-rows: 1fr 1fr; gap: 18px; min-width: 0;
}
.oh-device-card-hero { min-width: 0; }
.oh-device-card {
  padding: 18px;
  border-radius: var(--oh-r-lg);
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none;
  color: inherit;
}
.oh-device-card-head { display: flex; justify-content: space-between; align-items: center; }
.oh-device-card-img { aspect-ratio: 1/1; border-radius: 18px; }
.oh-device-card-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.oh-device-card-type {
  font-family: var(--oh-font-mono);
  font-size: 10.5px; color: var(--oh-ink-3);
  margin-top: 4px;
  text-transform: uppercase;
}
.oh-device-card-puffs { display: flex; align-items: baseline; gap: 6px; }
.oh-device-card-puffs .oh-num { font-size: 38px; }
.oh-device-card-puffs-label {
  font-family: var(--oh-font-mono);
  font-size: 12px; color: var(--oh-ink-3);
}
.oh-device-card-foot { display: flex; justify-content: space-between; align-items: center; }

.oh-pillars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.oh-pillar-card {
  padding: 28px;
  border-radius: var(--oh-r-lg);
  min-height: 280px;
}
.oh-pillar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 36px;
}
.oh-pillar-num {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 28px; color: var(--oh-ink-3);
  letter-spacing: -0.035em;
}
.oh-pillar-h3 {
  font-family: var(--oh-font-display);
  font-size: 28px;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin: 0 0 14px;
  font-weight: 700;
}
.oh-pillar-body {
  font-size: 14.5px; color: var(--oh-ink-2); line-height: 1.55;
}

.oh-flavor-teaser {
  position: relative;
  padding: 56px 48px;
  border-radius: var(--oh-r-xl);
  overflow: hidden;
}
.oh-flavor-teaser::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(255,184,206,.5), transparent 60%),
    radial-gradient(60% 80% at 80% 60%, rgba(168,207,255,.5), transparent 60%);
}
.oh-flavor-teaser-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.oh-flavor-teaser-h2 {
  font-family: var(--oh-font-display);
  font-size: 56px;
  letter-spacing: -0.028em;
  line-height: 0.98;
  margin: 12px 0 0;
  font-weight: 700;
}
.oh-flavor-teaser-h2 .oh-num { font-size: 96px; }
.oh-flavor-family-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.oh-flavor-family-card {
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 14px;
}
.oh-flavor-family-glyph {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 13px;
  background: var(--fam);
  color: var(--fam-deep);
  flex-shrink: 0;
}

.oh-reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.oh-review-card {
  padding: 26px;
  border-radius: var(--oh-r-lg);
}
.oh-review-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.oh-review-stars { display: flex; gap: 2px; font-size: 14px; }
.oh-review-star-on  { color: var(--oh-ink); }
.oh-review-star-off { color: rgba(14,17,22,.18); }
.oh-review-date {
  font-family: var(--oh-font-mono);
  font-size: 10px; color: var(--oh-ink-3);
}
.oh-review-h4 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.oh-review-body { font-size: 13.5px; color: var(--oh-ink-2); line-height: 1.55; margin: 0; }
.oh-review-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--oh-hair);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.oh-review-author { display: flex; align-items: center; gap: 10px; }
.oh-review-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB8CE, #C8B6FF);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 600;
}
.oh-review-name { font-size: 12.5px; font-weight: 600; }
.oh-review-city {
  font-family: var(--oh-font-mono);
  font-size: 9.5px; color: var(--oh-ink-3);
}

.oh-shipping-card {
  padding: 44px;
  border-radius: 28px;
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; align-items: center;
}
.oh-shipping-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.oh-shipping-stat {
  padding: 22px;
  border-radius: 18px;
}
.oh-shipping-stat .oh-num { font-size: 44px; line-height: 1; }
.oh-shipping-stat-label {
  font-family: var(--oh-font-mono);
  font-size: 10.5px; color: var(--oh-ink-3);
  margin-top: 8px; letter-spacing: 0.1em; text-transform: uppercase;
}
.oh-shipping-stat-desc {
  margin-top: 10px;
  font-size: 12.5px; color: var(--oh-ink-2); line-height: 1.55;
}

.oh-home-faq-layout {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: 56px;
}
.oh-home-faq-h2 {
  font-family: var(--oh-font-display);
  font-size: 42px;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 12px 0 0;
  font-weight: 700;
}

/* ───── W. PDP sections ───── */
.oh-pdp-hero { padding: 50px var(--oh-pad-x) 30px; }
.oh-pdp-crumb {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 18px;
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
}
.oh-pdp-crumb .oh-rule { flex: 1; }
.oh-pdp-layout {
  /* 5 sub-thumbnails removed 2026-05-15 — gallery is now single hero
     image, so the left column no longer needs the extra 84px+gap. Rebalanced
     to 1.1fr / 1fr so the hero square stays ~600px on a 1280px container
     without crowding the cart sidebar. */
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: start;
}
.oh-pdp-gallery {
  /* No thumbs → no inner grid; the .oh-pdp-gallery-main fills the column. */
  display: block;
}
.oh-pdp-gallery-main {
  aspect-ratio: 1/1; border-radius: 24px; padding: 16px;
  position: relative; overflow: hidden;
}
.oh-pdp-gallery-main-img {
  position: absolute; inset: 16px;
  border-radius: 18px;
}
.oh-pdp-cart {
  padding: 28px; border-radius: 24px;
  position: sticky; top: 100px;
}
.oh-pdp-title {
  font-family: var(--oh-font-display);
  font-size: 38px; letter-spacing: -0.025em; line-height: 1.02;
  margin: 14px 0 0;
  font-weight: 700;
}
.oh-pdp-title em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
}
.oh-pdp-sub {
  margin-top: 14px;
  font-size: 14px; color: var(--oh-ink-2); line-height: 1.55;
}
.oh-pdp-price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.oh-pdp-cart-options { margin-top: 22px; }
.oh-pdp-cart-options-label {
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--oh-ink-3);
  margin-bottom: 10px;
}
.oh-pdp-flavor-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.oh-pdp-qty-row { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oh-pdp-qty-cell, .oh-pdp-ship-cell {
  padding: 10px 14px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
}
.oh-pdp-qty-control {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.oh-pdp-qty-control button {
  width: 22px; height: 22px; border-radius: 999px;
  border: 1px solid var(--oh-hair);
  font-size: 12px; cursor: pointer;
}
.oh-pdp-qty-control span:not(.oh-pdp-qty-num) {}
.oh-pdp-qty-num {
  font-family: var(--oh-font-mono); font-size: 14px; font-weight: 600;
}

.oh-pdp-add  { width: 100%; margin-top: 16px; height: 54px; font-size: 16px; justify-content: center; }
.oh-pdp-buy  { width: 100%; margin-top: 8px;  height: 46px; font-size: 14px; justify-content: center; }

.oh-pdp-tabs {
  padding: 10px var(--oh-pad-x);
  position: sticky; top: 90px; z-index: 3;
}
.oh-pdp-tabs-inner {
  padding: 8px; border-radius: 999px;
  display: flex; align-items: center; gap: 4px; overflow-x: auto;
}
.oh-pdp-tabs-inner::-webkit-scrollbar { display: none; }

/* ───── X. Guide sections ───── */
.oh-guide-hero  { padding: 50px var(--oh-pad-x) 30px; }
.oh-guide-crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; font-family: var(--oh-font-mono); font-size: 11px; color: var(--oh-ink-3); }
.oh-guide-crumb .oh-rule { flex: 1; }
.oh-guide-hero-inner {
  display: grid; grid-template-columns: 1fr 0.7fr; gap: 48px; align-items: center;
}
.oh-guide-h1 {
  font-family: var(--oh-font-display);
  font-size: 72px; letter-spacing: -0.028em; line-height: 1;
  margin: 18px 0 0; max-width: 720px; font-weight: 700;
}
.oh-guide-h1 em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
}
.oh-guide-author {
  margin-top: 30px;
  display: flex; align-items: center; gap: 16px;
}
.oh-guide-author-avatar {
  width: 44px; height: 44px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB8CE, #C8B6FF, #A8CFFF);
  display: grid; place-items: center;
  color: #fff; font-size: 16px; font-weight: 700;
}
.oh-guide-body {
  padding: 30px var(--oh-pad-x);
  display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.oh-guide-toc { position: sticky; top: 110px; }
.oh-guide-toc-inner { padding: 22px; border-radius: var(--oh-r-lg); }
.oh-guide-toc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.oh-guide-toc-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 8px;
  font-size: 12.5px; color: var(--oh-ink-3);
}
.oh-guide-toc-list li.is-active { color: var(--oh-ink); font-weight: 600; }
.oh-guide-toc-num { font-family: var(--oh-font-mono); font-size: 10px; }
.oh-guide-step {
  padding: 28px; border-radius: var(--oh-r-lg);
  display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;
  margin-bottom: 16px;
}
.oh-guide-step .oh-num { font-size: 36px; line-height: 1; }
.oh-guide-step-label {
  font-family: var(--oh-font-mono);
  font-size: 9.5px; color: var(--oh-ink-3);
  margin-top: 6px; letter-spacing: 0.1em;
}
.oh-guide-step-h3 {
  font-family: var(--oh-font-display);
  font-size: 24px; margin: 0 0 10px;
  letter-spacing: -0.028em; font-weight: 700;
}
.oh-guide-step-body { font-size: 14px; color: var(--oh-ink-2); line-height: 1.65; }
.oh-guide-callout {
  padding: 22px;
  border-radius: 18px;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  margin-bottom: 16px;
  border-left: 4px solid var(--oh-ink);
}
.oh-guide-callout-icon {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--oh-ink); color: var(--oh-paper);
  display: grid; place-items: center; font-size: 14px;
}
.oh-guide-callout-h { font-size: 13.5px; font-weight: 600; }
.oh-guide-callout-p { margin-top: 6px; font-size: 13.5px; color: var(--oh-ink-2); line-height: 1.55; }
.oh-guide-warn {
  padding: 14px;
  border-radius: 12px;
  background: rgba(255,229,154,.35);
  border: 1px solid rgba(255,225,154,.7);
  font-size: 12.5px; color: var(--oh-ink-2);
  margin-top: 16px;
}
.oh-guide-warn-label {
  font-family: var(--oh-font-mono);
  font-size: 10px; font-weight: 700;
  margin-right: 8px;
}
.oh-pullquote {
  padding: 40px; border-radius: var(--oh-r-lg); text-align: center; margin: 24px 0;
}
.oh-pullquote-h {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
  font-size: 36px;
  max-width: 720px; margin: 0 auto;
  line-height: 1.15;
}
.oh-pullquote-cite { margin-top: 20px; font-size: 12.5px; color: var(--oh-ink-3); }

/* ───── Y. VS / comparison ───── */
.oh-vs-hero { padding: 50px var(--oh-pad-x) 30px; }
.oh-vs-h1 {
  font-family: var(--oh-font-display);
  font-size: 68px; letter-spacing: -0.028em; line-height: 1;
  margin: 0; font-weight: 700;
}
.oh-vs-h1 em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
}
.oh-vs-scorecard {
  padding: 28px; border-radius: var(--oh-r-lg);
}
.oh-vs-row {
  display: grid; grid-template-columns: 200px 1fr 1fr 80px;
  gap: 20px; padding: 14px 0;
  border-bottom: 1px solid var(--oh-hair);
  align-items: center;
}
.oh-vs-row:last-child { border-bottom: 0; }
.oh-vs-row-key {
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.oh-vs-val { font-size: 13.5px; }
.oh-vs-winner {
  font-family: var(--oh-font-mono);
  font-size: 11px; font-weight: 700;
  color: var(--oh-ink);
}

/* ───── Z. Info / Olit Hookalit parent / About ───── */
.oh-info-hero { padding: 50px var(--oh-pad-x) 60px; }
.oh-info-h1 {
  font-family: var(--oh-font-display);
  font-size: 86px; letter-spacing: -0.028em; line-height: 1;
  margin: 0; font-weight: 700;
}
.oh-info-h1 em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
}
.oh-info-timeline {
  position: relative;
  padding-left: 32px;
}
.oh-info-timeline::before {
  content: ""; position: absolute;
  left: 8px; top: 4px; bottom: 4px;
  width: 1px; background: var(--oh-hair-2);
}
.oh-info-timeline-item {
  position: relative;
  padding: 0 0 32px 0;
}
.oh-info-timeline-item::before {
  content: ""; position: absolute;
  left: -28px; top: 6px;
  width: 13px; height: 13px; border-radius: 999px;
  background: var(--oh-ink);
  border: 3px solid var(--oh-paper);
}
.oh-info-timeline-year {
  font-family: var(--oh-font-mono);
  font-size: 12px; color: var(--oh-ink-3);
  margin-bottom: 4px;
}
.oh-info-timeline-h {
  font-family: var(--oh-font-display);
  font-size: 20px; font-weight: 700;
  margin: 0 0 6px;
}

/* ───── AA. Flavors hub ─────
 * Hero: big serif-italic H1 left + glass stats card right-rail.
 * Atmosphere preset = aurora (6 blobs) bleeds chroma behind the hero.
 */
/* min-height: 70vh ensures the atmosphere blob field has room to bloom.
 * Without this, hero collapses to ~500px and clips the 1000px-tall
 * blobs into near-invisible strips. */
.oh-flavors-hero {
  padding: 60px var(--oh-pad-x) 80px;
}
.oh-flavors-hero > *:not(.oh-atmosphere) {
  max-width: var(--oh-max-w);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.oh-flavors-hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 22px;
}
.oh-flavors-h1 {
  font-family: var(--oh-font-display);
  font-size: 76px; letter-spacing: -0.028em; line-height: 1.02;
  margin: 0; font-weight: 700; max-width: 700px;
}
.oh-flavors-h1 em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
}
.oh-flavors-hero-sub {
  margin: 22px 0 0;
  font-size: 17px;
  color: var(--oh-ink-2);
  line-height: 1.55;
  max-width: 540px;
}
.oh-flavors-hero-card {
  padding: 24px;
  border-radius: var(--oh-r-lg);
}
.oh-flavors-hero-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--oh-ink-3);
  margin-bottom: 18px;
}
.oh-flavors-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.oh-flavors-stats-num {
  font-size: 56px; line-height: 1; letter-spacing: -0.035em;
}
.oh-flavors-stats-label {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--oh-ink-3);
}
.oh-tldr-label-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--oh-ink-3);
  margin-top: 6px;
}
.oh-tldr-body {
  margin: 0;
  font-size: 15.5px;
  color: var(--oh-ink-2);
  line-height: 1.55;
}

@media (max-width: 1023px) {
  .oh-flavors-h1 { font-size: 54px; }
  .oh-flavors-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .oh-flavors-stats-num { font-size: 44px; }
}
@media (max-width: 639px) {
  .oh-flavors-hero { padding: 30px 14px 24px; }
  .oh-flavors-h1 { font-size: 38px; }
}
.oh-flavors-filters {
  padding: 14px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.oh-flavors-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.oh-flavor-card {
  padding: 18px; border-radius: 20px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.oh-flavor-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.oh-flavor-card-h3 {
  font-family: var(--oh-font-display);
  font-size: 22px;
  letter-spacing: -0.02em; margin: 4px 0 0;
  font-weight: 700;
}
.oh-flavor-card-notes {
  font-size: 11.5px; color: var(--oh-ink-2);
  line-height: 1.5;
  min-height: 32px;
}
.oh-flavor-card-devices {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.oh-flavor-card-device-pill {
  font-family: var(--oh-font-mono);
  font-size: 9.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--oh-hair);
  color: var(--oh-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ───── BB. Misc legacy primitives still referenced by some njk ───── */
.oh-brand-mark {
  font-family: var(--oh-font-display);
  font-size: 28px;
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1;
}
.oh-brand-mark .dot { color: var(--oh-c-rose); }
.oh-brand-sub {
  display: block;
  font-family: var(--oh-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 3px;
  opacity: 0.55;
}
.oh-stamp {
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border-radius: var(--oh-r-pill);
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--oh-hair);
}
.oh-stamp-y {
  background: rgba(255,209,26,.18);
  border-color: rgba(255,209,26,.6);
}
.oh-label {
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
}

/* ───── CC. Mobile responsive (375 + 768) ───── */
@media (max-width: 1023px) {
  :root {
    --oh-pad-x: var(--oh-pad-x-md);
  }
  .oh-header {
    top: 14px; left: 14px; right: 14px;
  }
  .oh-header-nav { display: none; }
  .oh-nav-toggle { display: inline-flex; }
  .oh-home-hero { padding: 90px var(--oh-pad-x) 40px; }
  .oh-home-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .oh-home-hero-h1 { font-size: 54px; }
  .oh-section-h2 { font-size: 32px; }
  .oh-devices-grid { grid-template-columns: 1fr; }
  .oh-devices-grid-side { grid-template-rows: auto; grid-template-columns: 1fr; }
  .oh-pillars-grid { grid-template-columns: 1fr; }
  .oh-flavor-teaser-inner { grid-template-columns: 1fr; gap: 32px; }
  .oh-reviews-grid { grid-template-columns: 1fr; }
  .oh-shipping-card { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
  .oh-shipping-stats { grid-template-columns: 1fr; }
  .oh-home-faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .oh-pdp-hero { padding: 90px var(--oh-pad-x) 20px; }
  .oh-pdp-layout { grid-template-columns: 1fr; gap: 32px; }
  .oh-pdp-cart { position: static; }
  .oh-pdp-gallery { grid-template-columns: 1fr; }
  .oh-pdp-gallery-thumbs { flex-direction: row; overflow-x: auto; }
  .oh-quick-spec { grid-template-columns: repeat(2, 1fr); }
  .oh-specs-table { grid-template-columns: 1fr; }
  .oh-guide-body { grid-template-columns: 1fr; gap: 24px; }
  .oh-guide-toc { position: static; }
  .oh-guide-h1 { font-size: 48px; }
  .oh-flavors-grid { grid-template-columns: repeat(2, 1fr); }
  .oh-vs-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .oh-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .oh-info-h1 { font-size: 56px; }
  .oh-flavors-h1 { font-size: 50px; }
}

@media (max-width: 599px) {
  :root {
    --oh-pad-x: var(--oh-pad-x-sm);
  }
  .oh-home-hero-h1 { font-size: 42px; }
  .oh-section-h2  { font-size: 26px; }
  .oh-devices-grid { grid-template-columns: 1fr; }
  .oh-flavors-grid { grid-template-columns: 1fr; }
  .oh-pdp-title { font-size: 30px; }
  .oh-vs-h1, .oh-flavors-h1, .oh-guide-h1 { font-size: 38px; }
  .oh-info-h1 { font-size: 42px; }
  .oh-footer-grid { grid-template-columns: 1fr; }
  .oh-pdp-tabs { display: none; }
  .oh-flavors-filters { padding: 10px; gap: 8px; }
  .oh-quick-spec { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   EE. Product-cart partial styles (REQUIRED — Alpine cart禁区, do NOT
   touch product-cart.njk markup; only restyle these existing classes)
   ═══════════════════════════════════════════════════════════════════ */
.oh-pdp-cart {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-glass-shadow);
  padding: 32px;
  margin: 30px auto;
  max-width: var(--oh-max-w);
}
.oh-pdp-cart-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: start;
}
.oh-pdp-cart-imgwrap {
  position: relative;
  border-radius: var(--oh-r-lg);
  background: var(--oh-paper-deep);
  padding: 18px;
  overflow: hidden;
}
.oh-pdp-cart-img {
  width: 100%; height: auto; border-radius: 18px;
  display: block;
}
.oh-pdp-cart-buy {
  display: flex; flex-direction: column;
  gap: 18px;
}
.oh-pdp-price-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.oh-pdp-price {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.035em;
  color: var(--oh-ink);
}
.oh-pdp-price-was {
  font-family: var(--oh-font-mono);
  text-decoration: line-through;
  color: var(--oh-ink-3);
  font-size: 16px;
}
.oh-pdp-price-meta {
  font-family: var(--oh-font-mono);
  font-size: 11px;
  color: var(--oh-ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: auto;
}
.oh-pdp-short {
  font-size: 14px; line-height: 1.55; color: var(--oh-ink-2);
}
.oh-pdp-short p { margin: 0 0 8px; }
.oh-pdp-short ul { list-style: none; padding: 0; margin: 0 0 8px; }
.oh-pdp-short li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.oh-pdp-short li::before { content: "·"; position: absolute; left: 6px; font-weight: 700; }

.oh-pdp-flavor-block { display: flex; flex-direction: column; gap: 12px; }
.oh-pdp-flavor-label {
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
  margin: 0;
}
.oh-pdp-flavor-selected { color: var(--oh-ink); }
.oh-pdp-flavor-sku { color: var(--oh-ink-3); }

.oh-pdp-group-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.oh-pdp-group-tab {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  font-size: 12px; font-weight: 500; color: var(--oh-ink-2);
  cursor: pointer;
  transition: background var(--oh-dur-fast) var(--oh-ease);
}
.oh-pdp-group-tab:hover { background: rgba(255,255,255,.85); }
.oh-pdp-group-tab.is-active {
  background: var(--oh-ink);
  color: var(--oh-paper);
  border-color: var(--oh-ink);
}

.oh-pdp-flavor-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.oh-pdp-flavor-chip {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--oh-ink);
  cursor: pointer;
  transition: background var(--oh-dur-fast) var(--oh-ease);
}
.oh-pdp-flavor-chip:hover { background: rgba(255,255,255,.88); }
.oh-pdp-flavor-chip.is-selected {
  background: var(--oh-ink);
  color: var(--oh-paper);
  border-color: var(--oh-ink);
}

.oh-pdp-cta-row {
  display: flex; align-items: stretch; gap: 12px;
}
.oh-pdp-qty {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  padding: 4px;
  flex-shrink: 0;
}
.oh-pdp-qty-btn {
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px; color: var(--oh-ink);
}
.oh-pdp-qty-btn:hover { background: rgba(255,255,255,.6); }
.oh-pdp-qty-input {
  width: 44px; text-align: center;
  font-family: var(--oh-font-mono);
  font-size: 14px; font-weight: 600;
  border: 0; background: transparent; color: var(--oh-ink);
  -moz-appearance: textfield;
}
.oh-pdp-qty-input::-webkit-outer-spin-button,
.oh-pdp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.oh-pdp-add  { flex: 1; height: 52px; justify-content: center; font-size: 15px; }
.oh-pdp-buy-now {
  width: 100%; height: 46px; font-size: 14px;
  justify-content: center;
  background: rgba(255,255,255,.7);
  color: var(--oh-ink);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
}
.oh-pdp-buy-now:hover { background: rgba(255,255,255,.92); }
.oh-pdp-buy-now:disabled,
.oh-pdp-add:disabled { opacity: 0.55; cursor: not-allowed; }
.oh-pdp-cta-msg { color: var(--oh-signal-ok); font-size: 13px; margin: 0; }
.oh-pdp-oos-msg { color: var(--oh-signal-err); font-size: 13px; margin: 0; }
.oh-pdp-oos-msg a { text-decoration: underline; }
.oh-pdp-trust {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px;
  color: var(--oh-ink-2);
}

/* legacy PDP header markup (oh-pdp-bcr/header/h1/desc/quickspec) — restyle to vivid */
.oh-pdp-bcr { padding: 30px var(--oh-pad-x) 0; max-width: var(--oh-max-w); margin: 0 auto; }
.oh-pdp-bcr-inner {
  display: flex; gap: 6px; align-items: center;
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
}
.oh-pdp-bcr-inner .sep { color: var(--oh-ink-4); }
.oh-pdp-bcr-inner .current { color: var(--oh-ink); font-weight: 500; }
.oh-pdp-bcr-inner a:hover { color: var(--oh-ink); }

.oh-pdp-header { padding: 24px var(--oh-pad-x) 0; max-width: var(--oh-max-w); margin: 0 auto; }
.oh-pdp-header-inner { padding: 0; }
.oh-pdp-stamps {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.oh-pdp-h1 {
  font-family: var(--oh-font-display);
  font-size: 56px;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 0;
  font-weight: 700;
  color: var(--oh-ink);
}
.oh-pdp-desc {
  margin-top: 18px;
  font-size: 16px; line-height: 1.55;
  color: var(--oh-ink-2);
  max-width: 720px;
}
.oh-pdp-desc strong { color: var(--oh-ink); font-weight: 600; }
.oh-pdp-quickspec {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.oh-pdp-quickspec > div {
  padding: 18px 22px;
  border-radius: var(--oh-r-md);
  background: rgba(255,255,255,.42);
  border: 1px solid var(--oh-hair);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.oh-pdp-quickspec-num {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--oh-ink);
}
.oh-pdp-quickspec-lab {
  margin-top: 8px;
  font-family: var(--oh-font-mono);
  font-size: 10.5px; color: var(--oh-ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* PDP sticky tabs strip — anchor jump */
.oh-pdp-tabs {
  position: sticky;
  top: 88px;
  z-index: 4;
  padding: 14px var(--oh-pad-x);
  max-width: var(--oh-max-w);
  margin: 8px auto 0;
}
.oh-pdp-tabs-inner {
  background: var(--oh-glass-deep);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  box-shadow: var(--oh-glass-shadow);
  border-radius: var(--oh-r-pill);
  padding: 8px;
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto;
}
.oh-pdp-tabs-inner::-webkit-scrollbar { display: none; }
.oh-pdp-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--oh-r-pill);
  font-size: 12.5px; font-weight: 500;
  color: var(--oh-ink);
  white-space: nowrap;
}
.oh-pdp-tab:hover { background: rgba(255,255,255,.7); }

/* Quick spec details disclosure (AI citation surface) */
.oh-quick-spec {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  padding: 0;
  box-shadow: var(--oh-glass-shadow);
  margin: 0;
}
.oh-quick-spec summary {
  padding: 20px 24px;
  cursor: pointer; list-style: none;
  font-family: var(--oh-font-mono);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oh-ink); font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}
.oh-quick-spec summary::-webkit-details-marker { display: none; }
.oh-quick-spec summary::after {
  content: "+"; font-size: 18px; color: var(--oh-ink-3);
}
.oh-quick-spec[open] summary::after { content: "−"; }
.oh-quick-spec p {
  padding: 0 24px 16px;
  margin: 0;
  font-size: 14.5px; color: var(--oh-ink-2); line-height: 1.55;
}
.oh-quick-spec dl {
  padding: 0 24px 22px;
  display: grid; grid-template-columns: 200px 1fr; gap: 12px 24px;
  margin: 0;
}
.oh-quick-spec dt {
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0;
}
.oh-quick-spec dd {
  font-size: 13.5px; color: var(--oh-ink); margin: 0;
}

/* PDP related products */
.oh-pdp-related {
  padding: 60px var(--oh-pad-x);
  max-width: var(--oh-max-w);
  margin: 0 auto;
}
.oh-pdp-related-head { margin-bottom: 28px; }
.oh-pdp-related-h2 {
  font-family: var(--oh-font-display);
  font-size: 36px; letter-spacing: -0.028em;
  margin: 0; font-weight: 700;
}
.oh-pdp-related-sub {
  margin-top: 8px;
  font-family: var(--oh-font-mono);
  font-size: 11.5px; color: var(--oh-ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.oh-pdp-related-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.oh-pdp-related-card {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-glass-shadow);
  padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform var(--oh-dur-fast) var(--oh-ease);
}
.oh-pdp-related-card:hover { transform: translateY(-2px); }
.oh-pdp-related-imgwrap {
  aspect-ratio: 1/1;
  background: var(--oh-paper-deep);
  border-radius: 16px;
  overflow: hidden;
  display: grid; place-items: center;
}
.oh-pdp-related-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.oh-pdp-related-imgph {
  width: 80%; height: 80%; border-radius: 12px;
  background: radial-gradient(60% 60% at 50% 30%, #FFB8CE, transparent 60%),
              radial-gradient(60% 60% at 50% 80%, #C8B6FF, transparent 60%);
}
.oh-pdp-related-hub-emoji { font-size: 48px; }
.oh-pdp-related-body { display: flex; flex-direction: column; gap: 6px; }
.oh-pdp-related-title {
  font-size: 16px; font-weight: 600; margin: 0; line-height: 1.25;
}
.oh-pdp-related-tagline {
  font-size: 12.5px; color: var(--oh-ink-2); line-height: 1.5;
  min-height: 36px;
}
.oh-pdp-related-price {
  font-family: var(--oh-font-mono);
  font-size: 12px; color: var(--oh-ink-3);
  margin: 4px 0 0;
}
.oh-pdp-related-price strong {
  font-family: var(--oh-font-display);
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--oh-ink);
}
.oh-pdp-related-variants { color: var(--oh-ink-3); }
.oh-pdp-related-cta {
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oh-ink); font-weight: 600;
  margin-top: 6px;
}
.oh-pdp-related-hub .oh-pdp-related-imgwrap {
  background: linear-gradient(135deg, rgba(255,184,206,.5), rgba(168,207,255,.5));
}

/* TL;DR aside (legacy alias) */
.oh-tldr-tag {
  font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--oh-ink-3); font-weight: 600;
  margin-bottom: 8px; display: inline-block;
}

/* Product reviews partial styles (preserves existing class names) */
.oh-pdp-reviews { padding: 60px var(--oh-pad-x); max-width: var(--oh-max-w); margin: 0 auto; }
.oh-pdp-reviews-head { margin-bottom: 24px; }
.oh-pdp-reviews-h2 {
  font-family: var(--oh-font-display);
  font-size: 32px; letter-spacing: -0.028em;
  margin: 0; font-weight: 700;
}
.oh-pdp-reviews-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  list-style: none; padding: 0; margin: 0;
}
.oh-pdp-review-card {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  padding: 24px;
}

/* ───── FF. Responsive overrides for PDP partials ───── */
@media (max-width: 1023px) {
  .oh-pdp-cart-grid { grid-template-columns: 1fr; }
  .oh-pdp-bcr { padding-top: 90px; }
  .oh-pdp-h1 { font-size: 40px; }
  .oh-pdp-quickspec { grid-template-columns: repeat(2, 1fr); }
  .oh-pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
  .oh-pdp-reviews-list { grid-template-columns: 1fr; gap: 12px; }
  .oh-pdp-tabs { top: 14px; }
  .oh-quick-spec dl { grid-template-columns: 1fr; gap: 4px 0; }
  .oh-quick-spec dd { padding-bottom: 8px; border-bottom: 1px solid var(--oh-hair); }
}
@media (max-width: 599px) {
  .oh-pdp-h1 { font-size: 30px; }
  .oh-pdp-quickspec { grid-template-columns: 1fr; }
  .oh-pdp-related-grid { grid-template-columns: 1fr; }
  .oh-pdp-cta-row { flex-direction: column; }
  .oh-pdp-qty { align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════
   GG. Prose styles (long-form article content in PDP/Info/VS/Guide pages)
   Targets semantic HTML inside <main class="oh-doc-root"> so existing
   njk pages automatically pick up Vivid typography + spacing.
   ═══════════════════════════════════════════════════════════════════ */

.oh-pdp-body,
.oh-doc-root article,
.oh-info-body,
.oh-vs-body,
.oh-guide-content {
  max-width: var(--oh-max-w-nb);
  margin: 40px auto;
  padding: 0 var(--oh-pad-x);
  font-size: 16px;
  line-height: 1.7;
  color: var(--oh-ink-2);
}

/* Page-level prose H2/H3 inside long content */
.oh-pdp-body h2,
.oh-info-body h2,
.oh-vs-body h2 {
  font-family: var(--oh-font-display);
  font-size: 36px;
  letter-spacing: -0.028em;
  line-height: 1.05;
  color: var(--oh-ink);
  margin: 56px 0 18px;
  font-weight: 700;
  scroll-margin-top: 120px;
}
.oh-pdp-body h3,
.oh-info-body h3,
.oh-vs-body h3 {
  font-family: var(--oh-font-display);
  font-size: 22px;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--oh-ink);
  margin: 32px 0 12px;
  font-weight: 700;
}
.oh-pdp-body h4,
.oh-info-body h4,
.oh-vs-body h4 {
  font-family: var(--oh-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
  margin: 24px 0 8px;
  font-weight: 600;
}
.oh-pdp-body p,
.oh-info-body p,
.oh-vs-body p {
  margin: 0 0 16px;
}
.oh-pdp-body a,
.oh-info-body a,
.oh-vs-body a {
  color: var(--oh-ink);
  text-decoration: underline;
  text-decoration-color: var(--oh-hair-2);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--oh-dur-fast) var(--oh-ease);
}
.oh-pdp-body a:hover,
.oh-info-body a:hover,
.oh-vs-body a:hover { text-decoration-color: var(--oh-ink); }
.oh-pdp-body strong,
.oh-info-body strong,
.oh-vs-body strong {
  color: var(--oh-ink); font-weight: 600;
}
.oh-pdp-body em,
.oh-info-body em,
.oh-vs-body em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
  color: var(--oh-ink);
}
.oh-pdp-body ul,
.oh-pdp-body ol,
.oh-info-body ul,
.oh-info-body ol,
.oh-vs-body ul,
.oh-vs-body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.oh-pdp-body ul,
.oh-info-body ul,
.oh-vs-body ul { list-style: none; padding-left: 0; }
.oh-pdp-body ul li,
.oh-info-body ul li,
.oh-vs-body ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.oh-pdp-body ul li::before,
.oh-info-body ul li::before,
.oh-vs-body ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 12px;
  width: 6px; height: 6px;
  background: var(--oh-ink);
  border-radius: 999px;
}
.oh-pdp-body ol,
.oh-info-body ol,
.oh-vs-body ol {
  counter-reset: oh-ol;
  list-style: none;
  padding-left: 0;
}
.oh-pdp-body ol > li,
.oh-info-body ol > li,
.oh-vs-body ol > li {
  counter-increment: oh-ol;
  position: relative;
  padding-left: 36px;
  margin-bottom: 12px;
}
.oh-pdp-body ol > li::before,
.oh-info-body ol > li::before,
.oh-vs-body ol > li::before {
  content: counter(oh-ol, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--oh-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--oh-ink-3);
  letter-spacing: 0.06em;
}

/* Spec table — used in PDP body */
.oh-spec-table,
.oh-flavor-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-md);
  overflow: hidden;
  margin: 18px 0 24px;
  font-size: 14px;
}
.oh-spec-table th,
.oh-flavor-table th {
  text-align: left;
  padding: 12px 16px;
  background: rgba(14,17,22,.04);
  font-family: var(--oh-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oh-ink);
  border-bottom: 1px solid var(--oh-hair-2);
  font-weight: 600;
}
.oh-spec-table td,
.oh-flavor-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--oh-hair);
  color: var(--oh-ink-2);
  vertical-align: top;
}
.oh-spec-table tr:last-child td,
.oh-flavor-table tr:last-child td { border-bottom: 0; }
.oh-spec-table td:first-child,
.oh-flavor-table td:first-child { font-weight: 500; color: var(--oh-ink); }
.oh-flavor-table td strong { color: var(--oh-ink); }

/* FAQ accordion item — standalone (not inside .oh-faq) */
.oh-faq-item {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-md);
  margin-bottom: 10px;
}
.oh-faq-item summary {
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 15px; font-weight: 500;
  color: var(--oh-ink);
  display: flex; justify-content: space-between; align-items: center;
}
.oh-faq-item summary::-webkit-details-marker { display: none; }
.oh-faq-item summary::after {
  content: "+"; font-size: 18px; color: var(--oh-ink-3);
  margin-left: 12px;
}
.oh-faq-item[open] summary::after { content: "−"; }
.oh-faq-item .oh-faq-a {
  padding: 0 22px 22px;
}
.oh-faq-item .oh-faq-a p {
  font-size: 14.5px;
  color: var(--oh-ink-2);
  line-height: 1.65;
  margin: 0 0 10px;
}
.oh-faq-item .oh-faq-a p:last-child { margin-bottom: 0; }

/* Blockquote / pull quote inside prose */
.oh-pdp-body blockquote,
.oh-info-body blockquote,
.oh-vs-body blockquote {
  margin: 28px 0;
  padding: 22px 28px;
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-md);
  border-left: 3px solid var(--oh-ink);
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
  font-size: 18px; line-height: 1.5;
  color: var(--oh-ink);
}

/* Code inline + block */
.oh-pdp-body code,
.oh-info-body code,
.oh-vs-body code {
  background: rgba(14,17,22,.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
.oh-pdp-body pre,
.oh-info-body pre,
.oh-vs-body pre {
  background: var(--oh-glass-deep);
  border: 1px solid var(--oh-hair-2);
  padding: 18px 22px;
  border-radius: var(--oh-r-md);
  overflow-x: auto;
  font-size: 12.5px;
  margin: 18px 0;
}

/* hr in prose */
.oh-pdp-body hr,
.oh-info-body hr,
.oh-vs-body hr {
  border: 0;
  border-top: 1px solid var(--oh-hair);
  margin: 40px 0;
}

/* Reviews mount placeholder */
#oh-pdp-reviews-mount {
  margin: 20px 0;
  padding: 24px;
  background: var(--oh-glass);
  border: 1px dashed var(--oh-hair-2);
  border-radius: var(--oh-r-md);
  text-align: center;
  color: var(--oh-ink-3);
  font-family: var(--oh-font-mono);
  font-size: 12px;
}
#oh-pdp-reviews-mount:empty::before {
  content: "Loading reviews…";
}

/* PDP / page wrapper: place article above atmosphere */
.oh-doc-root { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════
   HH. Utility-page safety net (Account / Age-verify / Cart page /
   Checkout / Order-tracking / Search / FAQ-block / Info-basic / etc.)
   Generic glass + form styles for the existing class names so pages
   don't render naked. Visually consistent with the Vivid design.
   ═══════════════════════════════════════════════════════════════════ */

/* Wide section shell for cart/checkout/account/search/orderpay/orderview pages */
.oh-cart-shell, .oh-co-shell, .oh-acct-shell, .oh-ol-shell, .oh-ol-wrap,
.oh-search-shell, .oh-orderpay-shell, .oh-orderview-shell,
.oh-article, .oh-article-basic {
  max-width: var(--oh-max-w);
  margin: 40px auto;
  padding: 0 var(--oh-pad-x);
}

/* Generic glass card pattern for nested utility blocks */
.oh-cart-shell > section, .oh-co-shell > section,
.oh-acct-shell > section, .oh-acct-dash,
.oh-ol-shell > section, .oh-ol-result,
.oh-search-shell > section,
.oh-orderpay-shell > section, .oh-orderview-shell > section {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  box-shadow: var(--oh-elev-2);
  padding: 32px;
  margin-bottom: 20px;
}

/* My-account: dashboard + auth + points */
.oh-acct-shell h1, .oh-acct-shell h2, .oh-acct-dash h2 {
  font-family: var(--oh-font-display);
  letter-spacing: -0.028em;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--oh-ink);
}
.oh-acct-shell h1 { font-size: 38px; }
.oh-acct-shell h2 { font-size: 24px; }
.oh-acct-label, .oh-av-label, .oh-co-label {
  font-family: var(--oh-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.oh-acct-input, .oh-av-input, .oh-av-input-ro, .oh-ol-input,
.oh-co-input, .oh-pay-fields input, .oh-orderpay-form input,
.oh-search-shell input[type="search"] {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--oh-hair-2);
  border-radius: var(--oh-r-md);
  font: 500 14px/1.4 var(--oh-font-body);
  color: var(--oh-ink);
  transition: border-color var(--oh-dur-fast) var(--oh-ease),
              background var(--oh-dur-fast) var(--oh-ease);
}
.oh-acct-input:focus, .oh-av-input:focus, .oh-ol-input:focus,
.oh-co-input:focus, .oh-pay-fields input:focus,
.oh-search-shell input[type="search"]:focus {
  border-color: var(--oh-ink);
  background: rgba(255,255,255,.95);
  outline: none;
}
.oh-acct-note, .oh-av-hint, .oh-av-fineprint {
  font-size: 12.5px; color: var(--oh-ink-3); line-height: 1.55;
  margin: 6px 0 0;
}
.oh-acct-err, .oh-av-error {
  background: rgba(199,59,59,.08);
  border: 1px solid rgba(199,59,59,.25);
  color: var(--oh-signal-err);
  padding: 10px 14px;
  border-radius: var(--oh-r-sm);
  font-size: 13px;
  margin: 10px 0;
}
.oh-acct-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(31,157,92,.12);
  color: var(--oh-signal-ok);
  border-radius: var(--oh-r-pill);
  font-weight: 600;
}

.oh-acct-points-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 20px 0;
}
.oh-acct-points-card {
  padding: 20px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-md);
}
.oh-acct-points-card-label {
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--oh-ink-3);
}
.oh-acct-points-card-number {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 36px; font-weight: 700; letter-spacing: -0.035em;
  margin: 6px 0;
  color: var(--oh-ink);
}
.oh-acct-points-card-sub {
  font-size: 12px; color: var(--oh-ink-3); line-height: 1.5;
}
.oh-acct-points-log {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
}
.oh-acct-points-log-h3 {
  font-family: var(--oh-font-display);
  font-size: 20px; letter-spacing: -0.022em;
  margin: 18px 0 8px;
}

/* Age-verification overlay */
.oh-av-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14,17,22,.55);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 40;
  padding: 20px;
}
.oh-av-box {
  background: var(--oh-paper);
  border-radius: var(--oh-r-lg);
  padding: 32px;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--oh-elev-3);
}
.oh-av-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  font-size: 16px; cursor: pointer;
}
.oh-av-title {
  font-family: var(--oh-font-display);
  font-size: 28px; letter-spacing: -0.028em;
  margin: 0 0 12px; font-weight: 700;
}
.oh-av-lead {
  font-size: 14.5px; color: var(--oh-ink-2); line-height: 1.55;
  margin: 0 0 18px;
}
.oh-av-form { display: flex; flex-direction: column; gap: 14px; }
.oh-av-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oh-av-file-wrap {
  border: 2px dashed var(--oh-hair-2);
  border-radius: var(--oh-r-md);
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.4);
}
.oh-av-file-btn {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  border-radius: var(--oh-r-pill);
  background: var(--oh-ink); color: var(--oh-paper);
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.oh-av-file-native { display: none; }
.oh-av-file-name {
  font-family: var(--oh-font-mono);
  font-size: 11.5px; color: var(--oh-ink-3);
}
.oh-av-submit {
  width: 100%; height: 48px;
  border-radius: var(--oh-r-pill);
  background: var(--oh-ink); color: var(--oh-paper);
  font-weight: 600; font-size: 14.5px;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.oh-av-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.oh-av-success {
  padding: 14px;
  background: rgba(31,157,92,.08);
  border: 1px solid rgba(31,157,92,.3);
  color: var(--oh-signal-ok);
  border-radius: var(--oh-r-sm);
  font-size: 13.5px;
}

/* Cart page (full cart, not the side panel) */
.oh-cart-shell { display: grid; grid-template-columns: 1fr 320px; gap: 32px; }
.oh-cart-line {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--oh-hair);
  align-items: center;
}
.oh-cart-line:last-child { border-bottom: 0; }
.oh-cart-line img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--oh-r-md); }
.oh-cart-line-name { font-size: 15px; font-weight: 600; }
.oh-cart-line-flavor {
  font-family: var(--oh-font-mono);
  font-size: 11.5px; color: var(--oh-ink-3);
  margin-top: 2px;
}
.oh-cart-line-qty {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--oh-hair);
  border-radius: var(--oh-r-pill);
  padding: 3px;
}
.oh-cart-line-qty button {
  width: 28px; height: 28px;
  border-radius: 999px;
  font-size: 14px;
  display: grid; place-items: center;
}
.oh-cart-line-qty button:hover { background: rgba(255,255,255,.7); }
.oh-cart-line-total {
  font-family: var(--oh-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.022em;
}
.oh-cart-points {
  margin-top: 18px;
  padding: 16px;
  background: rgba(255,209,26,.12);
  border: 1px solid rgba(255,209,26,.4);
  border-radius: var(--oh-r-md);
}
.oh-cart-points-head {
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oh-ink); font-weight: 600;
  margin-bottom: 8px;
}
.oh-cart-points-balance {
  font-family: var(--oh-font-display);
  font-size: 22px; font-weight: 700;
}
.oh-cart-earn-line { font-size: 12.5px; color: var(--oh-ink-2); margin-top: 4px; }

/* Order tracking */
.oh-ol-form {
  display: flex; gap: 12px; flex-direction: column;
  max-width: 480px;
}
.oh-ol-result-title {
  font-family: var(--oh-font-display);
  font-size: 24px; letter-spacing: -0.028em;
  margin: 0 0 12px;
}
.oh-ol-result-line {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--oh-hair);
  font-size: 13.5px;
}
.oh-ol-result-line:last-child { border-bottom: 0; }
.oh-ol-result-cta {
  margin-top: 18px;
  display: flex; gap: 12px;
}

/* Search shell */
.oh-search-shell h1 {
  font-family: var(--oh-font-display);
  font-size: 32px; letter-spacing: -0.028em;
  margin: 0 0 18px;
}

/* FAQ page — uses .oh-faq-block / .oh-faq-q */
.oh-faq-block {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-lg);
  margin-bottom: 14px;
  padding: 22px 26px;
}
.oh-faq-q {
  font-family: var(--oh-font-display);
  font-size: 18px;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--oh-ink);
}

/* Info-basic article (FAQ / legal / privacy / shipping / terms / warranty / refund / authentication / wholesale / age-verification page / etc.) */
.oh-article-basic h1, .oh-article h1 {
  font-family: var(--oh-font-display);
  font-size: 56px;
  letter-spacing: -0.028em;
  line-height: 1.02;
  margin: 30px 0 18px;
  font-weight: 700;
  color: var(--oh-ink);
}
.oh-article-basic h2, .oh-article h2 {
  font-family: var(--oh-font-display);
  font-size: 30px;
  letter-spacing: -0.028em;
  margin: 40px 0 16px;
  font-weight: 700;
  scroll-margin-top: 120px;
}
.oh-article-basic h3, .oh-article h3 {
  font-family: var(--oh-font-display);
  font-size: 20px;
  letter-spacing: -0.022em;
  margin: 28px 0 12px;
  font-weight: 700;
}
.oh-article-basic p, .oh-article p {
  font-size: 16px; line-height: 1.7;
  color: var(--oh-ink-2);
  margin: 0 0 16px;
}
.oh-basic-h2 {
  display: flex; align-items: baseline; gap: 14px;
}
.oh-basic-h2-num {
  font-family: var(--oh-font-mono);
  font-size: 13px; color: var(--oh-ink-3);
  letter-spacing: 0.08em;
}
.oh-basic-toc {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-md);
  padding: 22px;
  margin: 20px 0;
}
.oh-basic-toc-num {
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-ink-3);
}

/* Related guides at end of article pages */
.oh-related-guides {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid var(--oh-hair);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.oh-related-guides a {
  display: block;
  padding: 18px;
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-md);
  text-decoration: none;
  color: inherit;
  transition: transform var(--oh-dur-fast) var(--oh-ease);
}
.oh-related-guides a:hover { transform: translateY(-2px); }

/* Stack helpers */
.oh-stack-lg > * + * { margin-top: 24px; }

/* Btn variants used in cart / acct / orderpay */
.oh-btn-buy { background: var(--oh-c-rose); color: #fff; border-color: var(--oh-c-rose); }
.oh-btn-buy:hover { background: #D62F66; color: #fff; }
.oh-btn-accent { background: var(--oh-c-lavender); color: #fff; border-color: var(--oh-c-lavender); }
.oh-btn-accent:hover { background: #6B41D9; color: #fff; }
.oh-btn-lg { height: 56px; font-size: 16px; padding: 0 28px; }
.oh-btn-full { width: 100%; justify-content: center; }
.oh-btn-between { display: inline-flex; align-items: center; justify-content: space-between; }

/* Responsive utility pages */
@media (max-width: 1023px) {
  .oh-cart-shell { grid-template-columns: 1fr; }
  .oh-acct-points-cards { grid-template-columns: 1fr; }
  .oh-cart-line { grid-template-columns: 64px 1fr; row-gap: 8px; }
  .oh-cart-line img { width: 64px; height: 64px; }
  .oh-av-row { grid-template-columns: 1fr; }
}

/* ───── DD. Honor reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .oh-grain { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * EE. D2 Rewrite Patch · 2026-05-15 · adds missing utility classes
 * referenced by the rewritten guide / vs / flavors / info / EAAT njks.
 * Pure additions — does not redefine any existing class.
 * ═══════════════════════════════════════════════════════════════════ */

/* — annotated hero card (guide / pdp) — */
.oh-guide-hero-card {
  position: relative;
  padding: 16px;
  border-radius: 24px;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
}
.oh-guide-hero-img {
  position: absolute;
  inset: 16px;
  border-radius: 18px;
}
.oh-anno {
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.oh-anno .oh-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--oh-ink); }
.oh-guide-sub {
  margin-top: 22px;
  font-size: 17px;
  color: var(--oh-ink-2);
  line-height: 1.55;
  max-width: 560px;
}
.oh-guide-byline-name { font-size: 14px; font-weight: 600; }
.oh-guide-byline-meta { font-size: 11px; color: var(--oh-ink-3); margin-top: 3px; letter-spacing: 0.08em; }

/* — toc extras — */
.oh-guide-toc {
  padding: 22px;
  border-radius: var(--oh-r-lg);
}
.oh-guide-toc-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; }
.oh-guide-toc-list li { display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 12.5px; color: var(--oh-ink-3); }
.oh-guide-toc-list li a { display: contents; color: inherit; }
.oh-guide-toc-list li a:hover { color: var(--oh-ink); }
.oh-guide-toc-list .oh-mono { font-size: 10px; color: var(--oh-ink-3); }
.oh-guide-toc-related { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.oh-guide-toc-related li a { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--oh-ink-2); }
.oh-guide-toc-related .oh-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--oh-ink); }
.oh-guide-toc-pair {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  margin-top: 10px;
}
.oh-guide-toc-pair-img { width: 44px; height: 44px; border-radius: 10px; aspect-ratio: 1; }
.oh-guide-toc-pair-name { font-size: 12.5px; font-weight: 600; }
.oh-guide-toc-pair-price { display: flex; gap: 6px; align-items: baseline; margin-top: 3px; }
.oh-guide-toc-pair-price .oh-num { font-size: 16px; }
.oh-guide-toc-pair-price .oh-mono { font-size: 11px; color: var(--oh-ink-3); text-decoration: line-through; }

/* — guide-stack: body column wrapper — */
.oh-guide-stack { display: flex; flex-direction: column; gap: 16px; }

/* — guide-step richer body — */
.oh-guide-step-num { display: flex; flex-direction: column; }
.oh-guide-step-num .oh-num { font-size: 36px; line-height: 1; color: var(--oh-ink); }
.oh-guide-step-num .oh-mono { font-size: 9.5px; color: var(--oh-ink-3); margin-top: 6px; letter-spacing: 0.1em; }
.oh-guide-step-body h2 {
  font-family: var(--oh-font-display);
  font-size: 26px;
  letter-spacing: -0.028em;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.15;
}
.oh-guide-step-body p { margin: 0 0 12px; font-size: 14.5px; color: var(--oh-ink-2); line-height: 1.65; }
.oh-guide-step-body p:last-child { margin-bottom: 0; }
.oh-guide-step-body a { color: var(--oh-c-lavender); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.oh-guide-bullets { padding-left: 18px; margin: 4px 0 12px; color: var(--oh-ink-2); font-size: 14.5px; line-height: 1.65; }
.oh-guide-bullets li { margin-bottom: 6px; list-style: disc; }

/* — Quick tip callout (data-tone="info") — */
.oh-guide-callout-title { font-size: 13.5px; font-weight: 600; margin: 0 0 6px; }
.oh-guide-callout p { font-size: 13.5px; color: var(--oh-ink-2); line-height: 1.55; margin: 0; }

/* — Warning block inside step body — */
.oh-guide-warn .oh-mono { font-weight: 700; margin-right: 8px; letter-spacing: 0.08em; }
.oh-guide-warn code {
  background: rgba(255,255,255,.6);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11.5px;
}

/* — 3 modes row (step 04 device) — */
.oh-guide-mode-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.oh-guide-mode {
  padding: 18px;
  border-radius: 14px;
}
.oh-guide-mode .oh-mono {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--oh-ink-3);
  margin-bottom: 8px;
}
.oh-guide-mode p { font-size: 13px; color: var(--oh-ink-2); line-height: 1.55; margin: 0; }

/* — Wallpaper swatch row (step 06) — */
.oh-guide-wallpaper-row {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.oh-guide-wallpaper-row .oh-mono { font-size: 10.5px; color: var(--oh-ink-3); letter-spacing: 0.08em; }
.oh-guide-wallpaper-swatches { display: flex; gap: 6px; align-items: center; }
.oh-guide-wallpaper-swatches span:not(.oh-mono) {
  width: 18px;
  height: 28px;
  border-radius: 4px;
  display: inline-block;
}
.oh-guide-wallpaper-swatches .oh-mono { font-size: 10px; color: var(--oh-ink-3); margin-left: 2px; }

/* — Pull quote (guide / vs) — */
.oh-guide-quote {
  padding: 40px;
  border-radius: 22px;
  text-align: center;
}
.oh-guide-quote p {
  font-family: var(--oh-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.18;
  color: var(--oh-ink);
}
.oh-guide-quote .oh-mono { display: block; margin-top: 20px; font-size: 12.5px; color: var(--oh-ink-3); }

/* — FAQ block — */
.oh-guide-faq { border-radius: 22px; overflow: hidden; padding: 0; }
.oh-guide-faq-head { padding: 22px 24px; border-bottom: 1px solid var(--oh-hair); }
.oh-guide-faq-head .oh-micro { color: var(--oh-ink-3); margin-bottom: 6px; }
.oh-guide-faq-head h2 {
  font-family: var(--oh-font-display);
  font-size: 24px;
  letter-spacing: -0.024em;
  font-weight: 700;
  margin: 0;
}
.oh-guide-faq details { border-bottom: 1px solid var(--oh-hair); }
.oh-guide-faq details:last-of-type { border-bottom: 0; }
.oh-guide-faq summary {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 500;
}
.oh-guide-faq summary::-webkit-details-marker { display: none; }
.oh-guide-faq summary span { font-size: 18px; color: var(--oh-ink-3); transition: transform .2s var(--oh-ease); }
.oh-guide-faq details[open] summary span { transform: rotate(45deg); }
.oh-guide-faq .oh-faq-a {
  padding: 0 24px 20px;
  font-size: 13.5px;
  color: var(--oh-ink-2);
  line-height: 1.65;
}
.oh-guide-faq .oh-faq-a p:last-child { margin-bottom: 0; }

/* — Guide CTA band — */
.oh-guide-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 32px 40px;
  border-radius: 22px;
  align-items: center;
}
.oh-guide-cta .oh-micro { color: var(--oh-ink-3); margin-bottom: 6px; }
.oh-guide-cta h3 {
  font-family: var(--oh-font-display);
  font-size: 28px;
  letter-spacing: -0.024em;
  font-weight: 700;
  margin: 0 0 8px;
}
.oh-guide-cta p { font-size: 14px; color: var(--oh-ink-2); margin: 0; max-width: 480px; }

@media (max-width: 1023px) {
  .oh-guide-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .oh-guide-body { grid-template-columns: 1fr; gap: 24px; padding: 24px var(--oh-pad-x); }
  .oh-guide-toc { position: static; }
  .oh-guide-step { grid-template-columns: 50px 1fr; padding: 20px; gap: 16px; }
  .oh-guide-step-body h2 { font-size: 22px; }
  .oh-guide-mode-row { grid-template-columns: 1fr; }
  .oh-guide-cta { grid-template-columns: 1fr; padding: 24px; }
  .oh-guide-quote { padding: 28px; }
  .oh-guide-quote p { font-size: 22px; }
  .oh-guide-h1 { font-size: 48px; }
}
@media (max-width: 599px) {
  .oh-guide-h1 { font-size: 36px; }
  .oh-guide-step { padding: 16px; gap: 12px; }
  .oh-guide-step-body h2 { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * FF. Visual override patch 2 · 2026-05-15 · make D2 glass actually
 * read as "glass on chromatic atmosphere" instead of "tinted rectangle
 * on cream." Boosts blob saturation, drops glass transparency floor,
 * thickens borders + shadows so cards visually "float."
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
 * Reset / cleanup section
 *
 * The v2 "vivid-patch" used to live here re-overriding atmosphere blur,
 * blob opacity, glass deepness, header/footer glass, etc.  Removed
 * 2026-05-15 because:
 *   - blur:48px violated the ≥80px handoff rule and produced visible
 *     hard-edged blob shapes (the "wrong gradient" failure mode).
 *   - per-blob opacity overrides shadowed the authoritative B-section
 *     values from the handoff, making preset tuning impossible.
 *   - position:fixed !important on .oh-atmosphere broke headless
 *     screenshots and conflicted with handoff per-section model.
 *
 * The authoritative atmosphere/glass/blob rules now live in section B-C
 * above.  Keep this section minimal — body bg transparent is still
 * required so html's --oh-paper paint shows through the atmosphere
 * fade-tail.
 */
body.dvx { background: transparent !important; }
.oh-doc-root { background: transparent; }
.oh-grain { opacity: .22; }

/* — Stronger placeholder for hero device cards — */
.oh-pl {
  background:
    radial-gradient(85% 65% at 28% 28%, rgba(255,61,122,.55), transparent 62%),
    radial-gradient(75% 75% at 80% 70%, rgba(138,93,255,.55), transparent 62%),
    radial-gradient(65% 65% at 50% 90%, rgba(77,234,165,.50), transparent 62%),
    var(--oh-paper-deep) !important;
  min-height: 200px;
}
.oh-pl::after {
  background-image: repeating-linear-gradient(135deg, rgba(14,17,22,.08) 0 1px, transparent 1px 14px) !important;
  opacity: .65 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZZ. PDP layout extensions (2026-05-15)
   New utility classes to replace inline grid/padding in layouts/pdp.njk.
   All section/grid rules collapse to single-column ≤1023px so the existing
   .oh-pdp-layout / .oh-pdp-cart breakpoints stay coherent.
   ═══════════════════════════════════════════════════════════════════════ */

/* gallery thumbs — image wrapper inside each small thumb */
.oh-pdp-gallery-thumb-inner {
  width: 100%; height: 100%; border-radius: 10px;
  background: var(--oh-paper-deep);
  display: grid; place-items: center; overflow: hidden;
}
.oh-pdp-gallery-thumb-inner img {
  max-width: 90%; max-height: 90%; object-fit: contain;
}

/* main gallery image */
.oh-pdp-gallery-main-img {
  background: var(--oh-paper);
  display: grid; place-items: center; overflow: hidden;
}
.oh-pdp-gallery-main-img img {
  max-width: 92%; max-height: 92%; object-fit: contain;
}

/* Overlay tags on hero image */
.oh-pdp-gallery-flavor-tag {
  position: absolute; left: 28px; top: 28px;
  padding: 10px 14px; border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
}
.oh-pdp-gallery-flavor-dot {
  width: 8px; height: 8px; border-radius: 999px;
}
.oh-pdp-gallery-flavor-name {
  font-size: 12px; font-weight: 600;
}
.oh-pdp-gallery-flavor-meta {
  font-size: 10px; color: var(--oh-ink-3);
}
.oh-pdp-gallery-price-tag {
  position: absolute; right: 28px; bottom: 28px;
  padding: 12px 16px; border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
}
.oh-pdp-gallery-price-tag .oh-num { font-size: 24px; line-height: 1; }
.oh-pdp-gallery-price-tag .oh-mono { font-size: 10px; color: var(--oh-ink-3); }

/* Free shipping chip */
.oh-chip-shipfree {
  background: rgba(187,239,211,.5);
  border: 1px solid #BBEFD3;
}

/* Cart options label row (sku readout) */
.oh-pdp-cart-options-label {
  display: flex; align-items: center; justify-content: space-between;
}
.oh-pdp-cart-options-sku {
  font-family: var(--oh-font-mono);
  font-size: 10px; color: var(--oh-ink-3);
  letter-spacing: 0;
}

/* Flavor pills */
.oh-pdp-flavor-pill {
  height: 30px; font-size: 12px; cursor: pointer; user-select: none;
}
.oh-pdp-flavor-pill-fallback {
  height: 30px; font-size: 12px; opacity: .7;
}
.oh-pdp-flavor-dot {
  width: 8px; height: 8px; border-radius: 999px;
}
.oh-pill-disabled, .oh-pill[aria-disabled="true"] {
  height: 30px; font-size: 12px;
  opacity: .45; cursor: not-allowed;
}
.oh-pdp-flavor-oos {
  margin-left: 6px; font-size: 9px; text-transform: uppercase;
  color: var(--oh-ink-3);
}

/* Ship cell value */
.oh-pdp-ship-val {
  font-size: 12.5px; font-weight: 500; margin-left: auto;
}

/* Add-to-cart error msg below button */
.oh-pdp-cta-msg {
  margin: 8px 0 0; font-size: 12px; color: #c0392b;
}

/* QTY input buttons disabled state */
.oh-pdp-qty-control button:disabled {
  opacity: .35; cursor: not-allowed;
}

/* ───── PDP Mobile sticky CTA — appears <1024px ─────
   Desktop sidebar cart slides below the fold on tablet/phone, so we
   surface a fixed bottom bar that re-uses the Alpine pdpVariation()
   addToCart() handler from the hero section. Hidden ≥1024px. */
.oh-pdp-mobile-cta {
  display: none;
}
@media (max-width: 1023px) {
  .oh-pdp-mobile-cta {
    display: flex;
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 50;
    padding: 10px 12px 10px 16px;
    border-radius: 999px;
    background: rgba(245,241,234,.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--oh-glass-edge);
    box-shadow: 0 12px 40px rgba(14,17,22,.16), 0 2px 6px rgba(14,17,22,.08);
    align-items: center; justify-content: space-between;
    gap: 10px;
  }
  .oh-pdp-mobile-cta-left {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1;
  }
  .oh-pdp-mobile-cta-flavor {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--oh-ink); font-weight: 500;
    overflow: hidden;
  }
  .oh-pdp-mobile-cta-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .oh-pdp-mobile-cta-dot {
    width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  }
  .oh-pdp-mobile-cta-price {
    display: flex; align-items: baseline; gap: 8px;
  }
  .oh-pdp-mobile-cta-price .oh-num {
    font-family: var(--oh-font-display);
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1;
  }
  .oh-pdp-mobile-cta-list {
    text-decoration: line-through;
    color: var(--oh-ink-3); font-size: 11px;
  }
  .oh-pdp-mobile-cta-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    font-size: 13px;
    border-radius: 999px;
    justify-content: center;
  }
  /* leave room above bottom CTA so footer / FAQ doesn't sit under it */
  .oh-pdp-section-tail { padding-bottom: 100px; }
}

/* Sticky tabs counter */
.oh-pdp-tabs-counter {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  padding-right: 8px;
}
.oh-pdp-tabs-counter .oh-mono { font-size: 11px; color: var(--oh-ink-3); }
.oh-pdp-tabs-counter-n { font-size: 12px; font-weight: 600; color: var(--oh-ink); }

/* Generic PDP section padding */
.oh-pdp-section {
  padding: 30px var(--oh-pad-x);
}
.oh-pdp-section-tail {
  padding-bottom: 80px;
}
@media (max-width: 1023px) {
  .oh-pdp-section { padding: 24px var(--oh-pad-x); }
}

/* PDP generic glass card */
.oh-pdp-card {
  padding: 28px; border-radius: 24px;
}
.oh-pdp-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.oh-pdp-card-head-meta {
  font-size: 11px; color: var(--oh-ink-3);
}
.oh-pdp-card-h3 {
  font-size: 32px; margin: 12px 0 0;
}
@media (max-width: 1023px) {
  .oh-pdp-card { padding: 22px; }
  .oh-pdp-card-h3 { font-size: 26px; }
}
@media (max-width: 599px) {
  .oh-pdp-card { padding: 18px; border-radius: 18px; }
  .oh-pdp-card-h3 { font-size: 22px; }
}

/* Kit + modes grid (desktop 2-col, mobile stacks) */
.oh-pdp-kit-grid {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px;
}
@media (max-width: 1023px) {
  .oh-pdp-kit-grid { grid-template-columns: 1fr; gap: 24px; }
}

.oh-pdp-kit-list {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 12px;
  list-style: none; padding: 0;
}
.oh-pdp-kit-item {
  display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start;
}
.oh-pdp-kit-num {
  font-size: 11px; color: var(--oh-ink-3); padding-top: 3px;
}
.oh-pdp-kit-name {
  font-size: 14.5px; font-weight: 600;
}
.oh-pdp-kit-desc {
  font-size: 12.5px; color: var(--oh-ink-2); margin-top: 2px;
}

.oh-pdp-modes-list {
  margin-top: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.oh-pdp-mode-row {
  padding: 18px 20px; border-radius: 16px;
  display: grid; grid-template-columns: 60px 1fr 80px; align-items: center; gap: 16px;
}
.oh-pdp-mode-thumb {
  width: 50px; height: 50px; border-radius: 10px;
  background: var(--oh-paper-deep); overflow: hidden;
  display: grid; place-items: center;
}
.oh-pdp-mode-thumb img { max-width: 88%; max-height: 88%; object-fit: contain; }
.oh-pdp-mode-head { display: flex; align-items: center; gap: 10px; }
.oh-pdp-mode-num { font-size: 16px; color: var(--oh-ink-3); }
.oh-pdp-mode-name { font-size: 16px; font-weight: 600; }
.oh-pdp-mode-blurb {
  margin: 4px 0 0; font-size: 12.5px; color: var(--oh-ink-2); line-height: 1.5;
}
.oh-pdp-mode-counter {
  font-size: 10px; color: var(--oh-ink-3); text-align: right;
}
@media (max-width: 599px) {
  .oh-pdp-mode-row {
    grid-template-columns: 44px 1fr;
    gap: 12px; padding: 14px;
  }
  .oh-pdp-mode-counter { display: none; }
}

/* Key Differentiators grid */
.oh-pdp-kd-grid {
  margin-top: 22px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  list-style: none; padding: 0;
}
.oh-pdp-kd-item {
  padding: 18px 20px; border-radius: 14px;
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center;
}
.oh-pdp-kd-num { font-size: 22px; color: var(--oh-ink-3); }
.oh-pdp-kd-text { font-size: 14px; color: var(--oh-ink); }
@media (max-width: 599px) {
  .oh-pdp-kd-grid { grid-template-columns: 1fr; }
}

/* TFC explainer */
.oh-pdp-tfc-wrap {
  position: relative; padding: 48px 44px; border-radius: 28px; overflow: hidden;
}
.oh-pdp-tfc-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 20% 30%, rgba(200,182,255,.5), transparent 60%),
    radial-gradient(60% 80% at 90% 70%, rgba(255,184,206,.5), transparent 60%);
}
.oh-pdp-tfc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.oh-pdp-tfc-h2 {
  font-size: 52px; margin: 12px 0 0; line-height: 1;
}
.oh-pdp-tfc-body {
  margin-top: 22px; font-size: 15px; color: var(--oh-ink-2);
  line-height: 1.6; max-width: 480px;
}
.oh-pdp-tfc-body-muted {
  margin-top: 14px; font-size: 13.5px; color: var(--oh-ink-3); line-height: 1.55;
}
.oh-pdp-tfc-chart {
  padding: 24px; border-radius: 22px;
}
.oh-pdp-tfc-chart-label {
  font-size: 11px; color: var(--oh-ink-3); letter-spacing: 0.1em;
}
.oh-pdp-tfc-svg { width: 100%; margin-top: 14px; }
@media (max-width: 1023px) {
  .oh-pdp-tfc-wrap { padding: 36px 28px; border-radius: 22px; }
  .oh-pdp-tfc-grid { grid-template-columns: 1fr; gap: 28px; }
  .oh-pdp-tfc-h2 { font-size: 38px; }
  .oh-pdp-tfc-body { font-size: 14px; }
}
@media (max-width: 599px) {
  .oh-pdp-tfc-wrap { padding: 26px 20px; }
  .oh-pdp-tfc-h2 { font-size: 30px; }
}

/* Related products row layout */
.oh-pdp-related-head-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 22px;
}
.oh-pdp-related-compare { height: 36px; font-size: 13px; }

.oh-pdp-related-card {
  padding: 22px; border-radius: 22px;
  display: grid; grid-template-columns: 80px 1fr; gap: 16px;
  align-items: center; text-decoration: none;
}
.oh-pdp-related-imgwrap {
  width: 80px; height: 80px; border-radius: 14px;
  background: var(--oh-paper-deep); overflow: hidden;
  display: grid; place-items: center;
}
.oh-pdp-related-imgwrap img { max-width: 88%; max-height: 88%; object-fit: contain; }
.oh-pdp-related-foot {
  margin-top: 8px; display: flex; justify-content: space-between; align-items: center;
}
.oh-pdp-related-cta { height: 26px; font-size: 11px; }

/* FAQ section h2 */
.oh-pdp-faq-h2 {
  font-size: 38px; margin: 12px 0 0;
}
.oh-pdp-faq-list {
  border-radius: 22px; overflow: hidden;
}
@media (max-width: 1023px) {
  .oh-pdp-faq-h2 { font-size: 30px; }
}
@media (max-width: 599px) {
  .oh-pdp-faq-h2 { font-size: 24px; }
}

/* Quick spec mobile font tweak (4 big numbers don't fit ≤640px) */
@media (max-width: 599px) {
  .oh-quick-spec-cell .oh-num { font-size: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ZZ2. Home page extensions (2026-05-15)
   New utility classes for src/index.njk so it stops relying on inline
   grid-template-columns / paddings. CSS-level mobile collapse takes over.
   ═══════════════════════════════════════════════════════════════════════ */

/* Home top hero padding — needs more headroom than .oh-home-hero default */
.oh-home-hero { padding: 140px var(--oh-pad-x) 80px; }
@media (max-width: 1023px) {
  .oh-home-hero { padding: 90px var(--oh-pad-x) 40px; }
}

.oh-home-hero-chips {
  display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap;
}

/* Home generic section wrapper (replaces inline `padding:60px 56px`) */
.oh-home-section {
  padding: 60px var(--oh-pad-x);
}
.oh-home-section-tight { padding: 60px var(--oh-pad-x) 30px; }
.oh-home-section-tail  { padding: 60px var(--oh-pad-x) 100px; }
@media (max-width: 1023px) {
  .oh-home-section,
  .oh-home-section-tight,
  .oh-home-section-tail { padding: 36px var(--oh-pad-x); }
  .oh-home-section-tail { padding-bottom: 110px; } /* leave room over mobile sticky CTA only on PDP, here just generous */
}

.oh-home-section-cta { height: 36px; font-size: 13px; }

/* ── 1+2 device lineup module (per dojo-pattern) ────────────────────────
   Left: 1 large hero card (Mega 200K). Right: 2 stacked side cards (Pro 60K,
   40K Tarot). Collapses to single column under 1023px so the side stack
   becomes a regular vertical list. */
.oh-devices-grid {
  max-width: var(--oh-max-w);
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  align-items: stretch;
}
.oh-devices-grid-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 1023px) {
  .oh-devices-grid { grid-template-columns: 1fr; gap: 18px; }
  .oh-devices-grid-side { grid-template-rows: auto auto; gap: 18px; }
}

.oh-device-card-hero,
.oh-device-card-side {
  padding: 24px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.oh-device-card-side { padding: 18px; border-radius: 22px; gap: 12px; }

.oh-device-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oh-device-card-idx {
  font-size: 10.5px;
  color: var(--oh-ink-muted);
  letter-spacing: 0.08em;
}

/* Image well — square for hero, slightly landscape for side */
.oh-device-card-hero-img,
.oh-device-card-side-img {
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  background: var(--oh-paper-2);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.oh-device-card-side-img { aspect-ratio: 1.35 / 1; border-radius: 18px; }
.oh-device-card-hero-img img,
.oh-device-card-side-img img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.oh-device-card-hero-img img { max-width: 84%; max-height: 84%; }

.oh-device-card-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.oh-device-card-name-sm { font-size: 17px; letter-spacing: -0.01em; }
.oh-device-card-type {
  font-size: 11px;
  color: var(--oh-ink-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.oh-device-card-bignum {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.oh-device-card-bignum .oh-num-xl { font-size: 56px; line-height: 1; }
.oh-device-card-bignum-sm { gap: 6px; }
.oh-device-card-bignum-sm .oh-num { font-size: 32px; line-height: 1; }
.oh-device-card-bignum .oh-mono { font-size: 12.5px; color: var(--oh-ink-muted); }
.oh-device-card-bignum-sm .oh-mono { font-size: 11px; }

.oh-device-card-blurb {
  margin: 0;
  font-size: 14px;
  color: var(--oh-ink-2);
  line-height: 1.55;
}
.oh-device-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.oh-device-card-side .oh-pill { height: 36px; padding: 0 14px; }
.oh-device-card-hero .oh-pill { height: 40px; padding: 0 18px; }

/* ── Flavors hub family grid + flavor tag grid ──────────────────────────
   Used on /collections/olit-hookalit-flavors/ to render the 6 taste-family
   cards and the per-device flavor tag clouds. Hue/glyph come from the
   FAMILIES table in src/_data/oh.js. */
.oh-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin: 26px 0 0;
}
.oh-family-card {
  padding: 22px;
  border-radius: 18px;
  border-top: 4px solid var(--fam-hue, var(--oh-ink));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oh-family-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.oh-family-card-glyph {
  font-size: 30px;
  color: var(--fam-deep, var(--oh-ink));
  line-height: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fam-hue, #fff) 18%, transparent);
}
.oh-family-card-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.oh-family-card-count {
  font-size: 10.5px;
  color: var(--oh-ink-muted);
  letter-spacing: 0.08em;
  margin-top: 2px;
}
.oh-family-card-blurb {
  margin: 0;
  font-size: 13.5px;
  color: var(--oh-ink-2);
  line-height: 1.55;
}
.oh-family-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--oh-rule-lite);
  padding-top: 12px;
  font-size: 13px;
}
.oh-family-card-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--oh-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.oh-family-card-dev {
  color: var(--oh-ink-muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oh-flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 22px 0 8px;
}
.oh-flavor-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--oh-rule-lite);
  border-left: 3px solid var(--fam-hue, var(--oh-ink));
  background: var(--oh-paper);
}
.oh-flavor-tag-glyph {
  font-size: 16px;
  color: var(--fam-hue, var(--oh-ink));
  line-height: 1;
}
.oh-flavor-tag-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  flex: 1;
}
.oh-flavor-tag-fam {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--oh-ink-muted);
}

@media (max-width: 720px) {
  .oh-family-grid { grid-template-columns: 1fr; }
  .oh-flavor-grid { grid-template-columns: 1fr 1fr; }
}

.oh-home-pillars-h2 { max-width: 720px; }

/* Flavor universe teaser */
.oh-flavor-teaser-wrap {
  position: relative;
  padding: 56px 48px;
  border-radius: 32px;
  overflow: hidden;
}
.oh-flavor-teaser-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 30% 30%, rgba(255,184,206,.5), transparent 60%),
    radial-gradient(60% 80% at 80% 60%, rgba(168,207,255,.5), transparent 60%);
}
.oh-flavor-teaser-h2 {
  font-size: 56px; margin: 12px 0 0; line-height: 0.98;
}
.oh-flavor-teaser-bignum { font-size: 96px; }
.oh-flavor-teaser-body {
  margin-top: 22px; font-size: 16px;
  color: var(--oh-ink-2); line-height: 1.55; max-width: 460px;
}
.oh-flavor-teaser-cta { margin-top: 30px; }
.oh-flavor-families-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 1023px) {
  .oh-flavor-teaser-wrap { padding: 36px 28px; }
  .oh-flavor-teaser-h2 { font-size: 38px; }
  .oh-flavor-teaser-bignum { font-size: 64px; }
  .oh-flavor-families-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .oh-flavor-teaser-wrap { padding: 26px 18px; border-radius: 22px; }
  .oh-flavor-teaser-h2 { font-size: 28px; }
  .oh-flavor-teaser-bignum { font-size: 48px; }
  .oh-flavor-families-grid { grid-template-columns: 1fr; }
}

/* Shipping card */
.oh-shipping-h2 { font-size: 40px; margin: 12px 0 0; }
.oh-shipping-body {
  margin-top: 16px; font-size: 14.5px;
  color: var(--oh-ink-2); line-height: 1.55; max-width: 380px;
}
@media (max-width: 1023px) {
  .oh-shipping-h2 { font-size: 30px; }
}

/* Home FAQ */
.oh-home-faq-h2 { font-size: 42px; margin: 12px 0 0; }
.oh-home-faq-cta { margin-top: 24px; }
.oh-home-faq-list { border-radius: 22px; overflow: hidden; }
@media (max-width: 1023px) {
  .oh-home-faq-h2 { font-size: 30px; }
}
@media (max-width: 599px) {
  .oh-home-faq-h2 { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ZZ3. Flavors hub extensions (2026-05-15)
   For src/collections/olit-hookalit-flavors/index.njk — replace inline grids with classes.
   ═══════════════════════════════════════════════════════════════════════ */

.oh-flavors-hero { padding: 140px var(--oh-pad-x) 40px; position: relative; }
@media (max-width: 1023px) {
  .oh-flavors-hero { padding: 90px var(--oh-pad-x) 30px; }
}

.oh-flavors-hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end;
}
@media (max-width: 1023px) {
  .oh-flavors-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}

.oh-flavors-h1 {
  font-family: var(--oh-font-display);
  font-size: 76px; line-height: 1; max-width: 700px; margin: 0;
}

.oh-flavors-crumb {
  display: flex; gap: 8px; align-items: center; margin-bottom: 18px;
}
.oh-flavors-crumb .oh-rule { flex: 1; height: 1px; }
.oh-flavors-crumb-meta { font-size: 11px; color: var(--oh-ink-3); }

.oh-flavors-sub {
  margin-top: 22px; font-size: 17px; color: var(--oh-ink-2);
  line-height: 1.55; max-width: 560px;
}

.oh-flavors-stats-card {
  padding: 26px; border-radius: 22px;
}
.oh-flavors-stats-label {
  font-size: 10.5px; color: var(--oh-ink-3); letter-spacing: 0.12em;
}
.oh-flavors-stats-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 18px; margin-top: 18px;
}
.oh-flavors-stats-num { font-size: 56px; line-height: 0.95; }
.oh-flavors-stats-sub {
  font-size: 10.5px; color: var(--oh-ink-3); margin-top: 6px;
}

.oh-flavors-tldr { margin-top: 40px; padding: 24px; border-radius: 20px; }
.oh-flavors-tldr-meta { font-size: 10px; color: var(--oh-ink-3); margin-top: 6px; }
.oh-flavors-tldr-body {
  font-size: 15.5px; color: var(--oh-ink-2); line-height: 1.55; margin: 0;
}

/* Generic flavors-page section */
.oh-flavors-section { padding: 30px var(--oh-pad-x); }
.oh-flavors-section-filter { padding: 20px var(--oh-pad-x); }
.oh-flavors-section-tight  { padding: 60px var(--oh-pad-x) 30px; }
.oh-flavors-section-tail   { padding: 40px var(--oh-pad-x) 100px; }
@media (max-width: 1023px) {
  .oh-flavors-section,
  .oh-flavors-section-filter,
  .oh-flavors-section-tight,
  .oh-flavors-section-tail { padding: 24px var(--oh-pad-x); }
  .oh-flavors-section-tail { padding-bottom: 90px; }
}

.oh-flavors-section-h2 {
  font-family: var(--oh-font-display);
  font-size: 38px; line-height: 1.02; margin: 10px 0 0;
}
@media (max-width: 1023px) {
  .oh-flavors-section-h2 { font-size: 28px; }
}
@media (max-width: 599px) {
  .oh-flavors-section-h2 { font-size: 22px; }
}
.oh-flavors-section-meta { font-size: 11px; color: var(--oh-ink-3); }

/* Filter chip bar inner */
.oh-flavors-filters {
  /* override the default rounded-corners box defined for the static
     filter grouping on flavors hub */
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.oh-flavors-filters-label {
  font-size: 10.5px; color: var(--oh-ink-3); letter-spacing: 0.1em;
  margin-left: 8px;
}
.oh-flavors-filters-group { display: flex; gap: 6px; flex-wrap: wrap; }
.oh-flavors-filters-divider {
  width: 1px; height: 22px; background: var(--oh-hair-2);
}
.oh-flavors-filters-meta {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.oh-flavors-filters-meta .oh-mono { font-size: 11px; color: var(--oh-ink-3); }

.oh-flavors-fam-pill { padding-left: 8px; }
.oh-flavors-fam-dot {
  width: 8px; height: 8px; border-radius: 999px;
}
.oh-flavors-filters .oh-flavors-fam-dot,
.oh-flavors-filters .oh-flavors-fam-pill > span:first-child {
  width: 14px; height: 14px;
}
.oh-flavors-fam-name { text-transform: capitalize; }

/* Cross-device heroes */
.oh-flavors-crossdev-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 1023px) {
  .oh-flavors-crossdev-grid { grid-template-columns: 1fr; }
}
.oh-flavors-crossdev-card {
  padding: 22px; border-radius: 22px;
  position: relative; overflow: hidden;
}
.oh-flavors-crossdev-bg { position: absolute; inset: 0; z-index: -1; }
.oh-flavors-crossdev-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.oh-flavors-crossdev-count { font-size: 12px; }
.oh-flavors-crossdev-h3 {
  font-size: 30px; margin: 0 0 10px; letter-spacing: -0.02em;
}
.oh-flavors-crossdev-body {
  font-size: 12.5px; color: var(--oh-ink-2);
  line-height: 1.5; min-height: 50px; margin: 0;
}

/* Flavor card grid (the 31-card big grid) */
.oh-flavor-card-bg { position: absolute; inset: 0; z-index: -1; }
.oh-flavor-card-multi { background: #fff; }
.oh-flavor-card-foot {
  display: flex; justify-content: space-between; align-items: center;
}
.oh-flavor-card-profile { display: flex; gap: 8px; }
.oh-flavor-profile-axis {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.oh-flavor-profile-dots { display: flex; gap: 2px; }
.oh-flavor-profile-dot {
  width: 4px; height: 4px; border-radius: 999px;
}
.oh-flavor-profile-label {
  font-size: 8px; color: var(--oh-ink-3); letter-spacing: 0.06em;
}
.oh-flavor-card-cta {
  height: 28px; font-size: 11px; text-decoration: none;
}

/* Family overview grid */
.oh-flavors-family-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
@media (max-width: 1023px) {
  .oh-flavors-family-grid { grid-template-columns: 1fr; }
}
.oh-flavors-family-card {
  padding: 28px; border-radius: 22px;
  position: relative; overflow: hidden; min-height: 200px;
}
.oh-flavors-family-bg { position: absolute; inset: 0; z-index: -1; }
.oh-flavors-family-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 18px;
}
.oh-flavors-family-head-left {
  display: flex; align-items: center; gap: 10px;
}
.oh-flavors-family-glyph {
  width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center; font-size: 14px;
}
.oh-flavors-family-h3 {
  font-size: 30px; text-transform: capitalize; margin: 0;
}
.oh-flavors-family-count {
  font-size: 11px; color: var(--oh-ink-3);
}
.oh-flavors-family-blurb {
  font-size: 13px; color: var(--oh-ink-2);
  line-height: 1.55; max-width: 520px; margin: 0;
}
.oh-flavors-family-chips {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px;
}
.oh-flavors-family-chip {
  background: rgba(255,255,255,0.7);
}

/* Tasting team card */
.oh-flavors-tasting-card {
  padding: 36px; border-radius: 28px;
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
}
@media (max-width: 1023px) {
  .oh-flavors-tasting-card {
    grid-template-columns: 1fr; gap: 24px; padding: 28px;
  }
}
.oh-flavors-tasting-h2 {
  font-size: 34px; margin: 12px 0 0; line-height: 1.05;
}
.oh-flavors-tasting-body {
  margin-top: 14px; font-size: 13.5px;
  color: var(--oh-ink-2); line-height: 1.55;
}

.oh-flavors-personas-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 1023px) {
  .oh-flavors-personas-grid { grid-template-columns: 1fr; }
}
.oh-flavors-persona {
  padding: 20px; border-radius: 18px;
}
.oh-flavors-persona-avatar {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; font-size: 16px; font-weight: 700;
}
.oh-flavors-persona-name {
  font-size: 14.5px; font-weight: 600; margin-top: 12px;
}
.oh-flavors-persona-role {
  font-size: 10px; color: var(--oh-ink-3);
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.08em;
}
.oh-flavors-persona-cred {
  margin-top: 10px; font-size: 11.5px;
  color: var(--oh-ink-2); line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZZ4. Reviews page extensions (2026-05-15)
   ═══════════════════════════════════════════════════════════════════════ */

.oh-reviews-card { padding: 24px; border-radius: 22px; }
.oh-reviews-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.oh-reviews-card-stars { display: flex; gap: 2px; }
.oh-reviews-card-star { color: var(--oh-ink); font-size: 14px; }
.oh-reviews-card-star.is-empty { color: rgba(14,17,22,0.18); }
.oh-reviews-card-date { font-size: 10px; color: var(--oh-ink-3); }
.oh-reviews-card-headline {
  font-size: 16px; font-weight: 600; margin: 0 0 8px;
}
.oh-reviews-card-body {
  font-size: 13px; color: var(--oh-ink-2);
  line-height: 1.55; margin: 0;
}
.oh-reviews-card-rule { margin: 16px 0 12px; }
.oh-reviews-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.oh-reviews-card-author {
  display: flex; align-items: center; gap: 10px;
}
.oh-reviews-card-avatar {
  width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(135deg, #FFB8CE, #C8B6FF);
  display: grid; place-items: center;
  color: #fff; font-size: 11px; font-weight: 600;
}
.oh-reviews-card-name { font-size: 12.5px; font-weight: 600; }
.oh-reviews-card-city { font-size: 9.5px; color: var(--oh-ink-3); }

.oh-reviews-device-card {
  padding: 22px; border-radius: 22px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 14px;
}
.oh-reviews-device-img {
  aspect-ratio: 1/1; border-radius: 18px;
  background: var(--oh-paper-deep);
  overflow: hidden;
  display: grid; place-items: center;
}
.oh-reviews-device-img img {
  max-width: 88%; max-height: 88%; object-fit: contain;
}
.oh-reviews-device-name { font-size: 17px; font-weight: 600; }
.oh-reviews-device-rating { display: flex; gap: 2px; align-items: center; }
.oh-reviews-device-rating .oh-reviews-card-star { font-size: 13px; }
.oh-reviews-device-rating-meta {
  font-size: 10px; color: var(--oh-ink-3); margin-left: 6px;
}
.oh-reviews-device-cta {
  height: 32px; font-size: 12px; align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════
   ZZ5. VS layout extensions (2026-05-15)
   ═══════════════════════════════════════════════════════════════════════ */

.oh-vs-hero { padding: 130px var(--oh-pad-x) 30px; position: relative; }
@media (max-width: 1023px) {
  .oh-vs-hero { padding: 90px var(--oh-pad-x) 24px; }
}

.oh-vs-crumb {
  display: flex; gap: 8px; align-items: center; margin-bottom: 22px;
}
.oh-vs-crumb .oh-rule { flex: 1; }
.oh-vs-crumb-trail { font-size: 11px; color: var(--oh-ink-3); }

.oh-vs-title-wrap { text-align: center; max-width: 920px; margin: 0 auto; }
.oh-vs-h1 {
  font-size: 76px; margin: 22px 0 0; line-height: 0.98;
}
.oh-vs-vs {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
  padding: 0 24px;
}
.oh-vs-sub {
  margin: 22px auto 0; font-size: 17px;
  color: var(--oh-ink-2); line-height: 1.55; max-width: 660px;
}
@media (max-width: 1023px) {
  .oh-vs-h1 { font-size: 48px; }
  .oh-vs-vs { padding: 0 12px; }
}
@media (max-width: 599px) {
  .oh-vs-h1 { font-size: 32px; }
  .oh-vs-vs { display: block; padding: 8px 0; font-size: 28px; }
}

.oh-vs-pair {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 80px 1fr;
  gap: 20px; align-items: stretch;
}
@media (max-width: 1023px) {
  .oh-vs-pair {
    grid-template-columns: 1fr;
    gap: 14px; margin-top: 32px;
  }
}

.oh-vs-card { padding: 28px; border-radius: 24px; position: relative; overflow: hidden; }
.oh-vs-card-bg { position: absolute; inset: 0; z-index: -1; }
.oh-vs-card-bg-pri  { background: radial-gradient(60% 80% at 50% 0%, rgba(168,207,255,.5),  transparent 60%); }
.oh-vs-card-bg-other { background: radial-gradient(60% 80% at 50% 0%, rgba(200,182,255,.4),  transparent 60%); }

.oh-vs-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.oh-vs-card-h2 { font-size: 30px; margin: 12px 0 0; }
.oh-vs-card-tag {
  font-size: 11px; color: var(--oh-ink-3); margin-top: 4px;
}

.oh-vs-card-body {
  margin-top: 24px;
  display: flex; gap: 20px; align-items: flex-end;
}
.oh-vs-card-img {
  width: 130px; height: 180px; border-radius: 16px;
  background: var(--oh-paper-deep);
  overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
}
.oh-vs-card-img img { max-width: 88%; max-height: 88%; object-fit: contain; }

.oh-vs-card-specs {
  flex: 1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.oh-vs-spec-cell { padding: 10px 14px; border-radius: 10px; }
.oh-vs-spec-label { font-size: 9.5px; color: var(--oh-ink-3); }
.oh-vs-spec-val   { font-size: 20px; margin-top: 4px; }

@media (max-width: 599px) {
  .oh-vs-card-body {
    flex-direction: column; align-items: flex-start;
  }
  .oh-vs-card-img { width: 100%; height: 200px; }
  .oh-vs-card-specs { width: 100%; }
}

.oh-vs-divider {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.oh-vs-divider-text {
  font-size: 56px;
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
}
.oh-vs-divider-score {
  font-size: 10px; color: var(--oh-ink-3); margin-top: 4px;
}
@media (max-width: 1023px) {
  .oh-vs-divider { flex-direction: row; gap: 16px; padding: 12px 0; }
  .oh-vs-divider-text { font-size: 36px; }
}

.oh-vs-tldr {
  margin-top: 40px;
  padding: 28px; border-radius: 22px;
  display: grid; grid-template-columns: 140px 1fr 120px;
  gap: 28px; align-items: center;
}
@media (max-width: 1023px) {
  .oh-vs-tldr {
    grid-template-columns: 1fr; gap: 14px; padding: 22px;
  }
}
.oh-vs-tldr-meta { font-size: 10px; color: var(--oh-ink-3); margin-top: 6px; }
.oh-vs-tldr-body {
  font-size: 15.5px; color: var(--oh-ink-2);
  line-height: 1.55; margin: 0;
}
.oh-vs-tldr-score { text-align: center; }
.oh-vs-tldr-score-n { font-size: 32px; }
.oh-vs-tldr-score-tag { font-size: 10px; color: var(--oh-ink-3); }

/* Generic VS section */
.oh-vs-section { padding: 30px var(--oh-pad-x); }
.oh-vs-section-tail { padding: 30px var(--oh-pad-x) 80px; }
@media (max-width: 1023px) {
  .oh-vs-section,
  .oh-vs-section-tail { padding: 24px var(--oh-pad-x); }
  .oh-vs-section-tail { padding-bottom: 60px; }
}
.oh-vs-section-h2 { font-size: 38px; margin: 12px 0 22px; }
@media (max-width: 1023px) {
  .oh-vs-section-h2 { font-size: 28px; margin: 10px 0 16px; }
}

/* Deep dives */
.oh-vs-deepdive-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 1023px) {
  .oh-vs-deepdive-grid { grid-template-columns: 1fr; }
}
.oh-vs-deepdive { padding: 28px; border-radius: 22px; }
.oh-vs-deepdive-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.oh-vs-deepdive-num { font-size: 22px; color: var(--oh-ink-3); }
.oh-vs-deepdive-h3 { font-size: 24px; margin: 0 0 12px; }
.oh-vs-deepdive-body {
  font-size: 13.5px; color: var(--oh-ink-2); line-height: 1.6; margin: 0;
}

/* Price per puff */
.oh-vs-ppp-wrap {
  position: relative; padding: 48px 44px; border-radius: 28px; overflow: hidden;
}
.oh-vs-ppp-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 30% 30%, rgba(255,184,206,.4), transparent 60%),
    radial-gradient(60% 70% at 80% 70%, rgba(187,239,211,.45), transparent 60%);
}
.oh-vs-ppp-h2 { font-size: 44px; margin: 12px 0 32px; }
.oh-vs-ppp-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
}
.oh-vs-ppp-card { padding: 28px; border-radius: 18px; }
.oh-vs-ppp-label { font-size: 10px; color: var(--oh-ink-3); }
.oh-vs-ppp-num { font-size: 72px; margin-top: 10px; line-height: 1; }
.oh-vs-ppp-sub { font-size: 10px; color: var(--oh-ink-3); margin-top: 6px; }
.oh-vs-ppp-note {
  margin: 16px 0 0; font-size: 12.5px;
  color: var(--oh-ink-2); line-height: 1.55;
}
@media (max-width: 1023px) {
  .oh-vs-ppp-wrap { padding: 32px 22px; border-radius: 22px; }
  .oh-vs-ppp-h2 { font-size: 28px; margin: 10px 0 20px; }
  .oh-vs-ppp-grid { grid-template-columns: 1fr; }
  .oh-vs-ppp-num { font-size: 52px; }
}

/* Decision frame */
.oh-vs-decision-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 1023px) {
  .oh-vs-decision-grid { grid-template-columns: 1fr; }
}
.oh-vs-decision {
  padding: 36px; border-radius: 24px;
  position: relative; overflow: hidden;
}
.oh-vs-decision-bg { position: absolute; inset: 0; z-index: -1; }
.oh-vs-decision-bg-pri  { background: radial-gradient(60% 80% at 80% 20%, rgba(168,207,255,.5), transparent 60%); }
.oh-vs-decision-bg-other { background: radial-gradient(60% 80% at 80% 20%, rgba(200,182,255,.4), transparent 60%); }

.oh-vs-decision-h3 {
  font-size: 32px; margin: 16px 0 0; line-height: 1.05;
}
@media (max-width: 1023px) {
  .oh-vs-decision { padding: 26px; }
  .oh-vs-decision-h3 { font-size: 22px; }
}
.oh-vs-decision-list {
  margin-top: 22px; display: flex; flex-direction: column; gap: 12px;
  list-style: none; padding: 0;
}
.oh-vs-decision-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 14px; color: var(--oh-ink-2); line-height: 1.55;
}
.oh-vs-decision-tick {
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--oh-ink); color: var(--oh-paper);
  display: grid; place-items: center;
  font-size: 10px; margin-top: 2px;
}
.oh-vs-decision-bullet {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid var(--oh-hair-2);
  display: grid; place-items: center;
  font-size: 10px; margin-top: 2px; color: var(--oh-ink-3);
}
.oh-vs-decision-cta { margin-top: 28px; }

/* ═══════════════════════════════════════════════════════════════════════
   ZZ6. Guide layout extensions (2026-05-15)
   ═══════════════════════════════════════════════════════════════════════ */

/* Increase top padding on guide hero so sticky header doesn't overlap */
.oh-guide-hero-padded { padding: 130px var(--oh-pad-x) 30px; }
@media (max-width: 1023px) {
  .oh-guide-hero-padded { padding: 90px var(--oh-pad-x) 24px; }
}

/* Mobile collapse for the 1fr 0.7fr hero grid */
@media (max-width: 1023px) {
  .oh-guide-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}

.oh-guide-sub {
  margin-top: 22px; font-size: 17px;
  color: var(--oh-ink-2); line-height: 1.55; max-width: 560px;
}

.oh-guide-author-name { font-size: 14px; font-weight: 600; }
.oh-guide-author-meta {
  font-size: 11px; color: var(--oh-ink-3); margin-top: 3px;
}

.oh-guide-hero-img {
  padding: 16px; border-radius: 24px;
  position: relative; aspect-ratio: 1/1.15; overflow: hidden;
}
.oh-guide-hero-img-inner {
  position: absolute; inset: 16px; border-radius: 18px;
}
.oh-guide-hero-annot {
  position: absolute;
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.oh-guide-hero-annot-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--oh-ink);
}

.oh-guide-tldr { margin-top: 40px; padding: 24px; border-radius: 20px; }
.oh-guide-tldr-meta {
  font-size: 10px; color: var(--oh-ink-3); margin-top: 6px;
}
.oh-guide-tldr-body {
  font-size: 15.5px; color: var(--oh-ink-2);
  line-height: 1.55; margin: 0;
}

.oh-guide-toc-section-label { margin-bottom: 14px; }
.oh-guide-toc-rule { margin: 18px 0; }
.oh-guide-toc-more {
  font-size: 12px; color: var(--oh-ink-3); font-style: italic;
  grid-column: 1 / -1;
}
.oh-guide-related-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.oh-guide-related-item {
  font-size: 12.5px; color: var(--oh-ink-2);
  display: flex; align-items: center; gap: 8px;
}
.oh-guide-related-dot {
  width: 4px; height: 4px; border-radius: 999px; background: var(--oh-ink);
}
.oh-guide-related-item a { color: inherit; }

.oh-guide-pair {
  padding: 14px; border-radius: 14px;
  display: grid; grid-template-columns: 44px 1fr; gap: 10px;
  align-items: center; text-decoration: none;
}
.oh-guide-pair-img {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--oh-paper-deep); overflow: hidden;
  display: grid; place-items: center;
}
.oh-guide-pair-img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.oh-guide-pair-name { font-size: 12.5px; font-weight: 600; }

.oh-guide-main {
  display: flex; flex-direction: column; gap: 16px;
}

.oh-guide-step-num { font-size: 36px; line-height: 1; color: var(--oh-ink); }

.oh-guide-faq { border-radius: 22px; overflow: hidden; margin-top: 8px; }
.oh-guide-faq-head {
  padding: 22px 24px; border-bottom: 1px solid var(--oh-hair);
}
.oh-guide-faq-h3 { font-size: 24px; margin: 6px 0 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ZZ7. Info layout extensions (2026-05-15)
   ═══════════════════════════════════════════════════════════════════════ */

.oh-info-hero-padded { padding: 130px var(--oh-pad-x) 30px; }
@media (max-width: 1023px) {
  .oh-info-hero-padded { padding: 90px var(--oh-pad-x) 24px; }
}

.oh-info-hero-inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
@media (max-width: 1023px) {
  .oh-info-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* Inline italic em block inside info h1 */
.oh-info-h1-em {
  font-family: var(--oh-font-serif);
  font-style: italic; font-weight: 500;
  padding: 0 16px;
}
@media (max-width: 599px) {
  .oh-info-h1-em { padding: 0 8px; }
  .oh-info-h1 { font-size: 42px; }
}

.oh-info-sub {
  margin-top: 22px; font-size: 17px;
  color: var(--oh-ink-2); line-height: 1.55; max-width: 580px;
}

.oh-info-snapshot { padding: 24px; border-radius: 22px; }
.oh-info-snapshot-label { margin-bottom: 14px; }
.oh-info-snapshot-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.oh-info-snapshot-val { font-size: 40px; line-height: 0.95; }
.oh-info-snapshot-key {
  font-size: 10px; color: var(--oh-ink-3); margin-top: 6px;
}

/* Info section body — reuses .oh-guide-body grid for sidebar + main */
.oh-info-body-section { padding-bottom: 80px; }
@media (max-width: 1023px) {
  .oh-info-body-section { padding-bottom: 60px; }
}

.oh-info-main {
  display: flex; flex-direction: column; gap: 18px;
}

.oh-info-external {
  padding: 14px; border-radius: 14px; margin-bottom: 10px;
}
.oh-info-external-label { font-size: 10px; color: var(--oh-ink-3); }
.oh-info-external-url {
  font-size: 13px; font-weight: 600; margin-top: 4px;
}
.oh-info-external-blurb {
  font-size: 11.5px; color: var(--oh-ink-3);
  margin-top: 6px; line-height: 1.45;
}

.oh-info-section { padding: 36px; border-radius: 22px; }
.oh-info-section-tinted { position: relative; overflow: hidden; }
.oh-info-section-bg {
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 80% at 80% 30%, rgba(200,182,255,.4), transparent 60%);
}
.oh-info-section-h2 { font-size: 34px; margin: 12px 0 14px; }
.oh-info-section-h2-no-eb { margin-top: 0; }
.oh-info-section-prose {
  font-size: 14.5px; color: var(--oh-ink-2); line-height: 1.7;
}
.oh-info-section-chips {
  margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap;
}
.oh-info-section-chip { background: rgba(255,255,255,0.7); }
@media (max-width: 599px) {
  .oh-info-section { padding: 22px; border-radius: 18px; }
  .oh-info-section-h2 { font-size: 24px; }
}

.oh-info-callout {
  padding: 36px; border-radius: 22px;
  position: relative; overflow: hidden;
}
.oh-info-callout-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 30% 80%, rgba(255,184,206,.45), transparent 60%),
    radial-gradient(60% 80% at 90% 30%, rgba(187,239,211,.45), transparent 60%);
}
.oh-info-callout-h2 { font-size: 36px; margin: 12px 0 18px; }
.oh-info-callout-body {
  font-size: 14.5px; color: var(--oh-ink-2);
  line-height: 1.7; max-width: 760px; margin: 0;
}
.oh-info-callout-chips {
  margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 599px) {
  .oh-info-callout { padding: 22px; }
  .oh-info-callout-h2 { font-size: 26px; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ZZ8. Utility pages — Direction-D2 (cart / checkout / my-account /
        search / order-tracking) 2026-05-15
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared hero + body wrappers used by cart / search / order-tracking
   and overridden onto checkout / my-account's existing shells below. */
.oh-util-hero {
  position: relative; overflow: hidden;
  padding: 130px var(--oh-pad-x) 40px;
}
@media (max-width: 1023px) {
  .oh-util-hero { padding: 90px var(--oh-pad-x) 30px; }
}

.oh-util-crumb {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.oh-util-crumb .oh-mono {
  font-size: 11px; color: var(--oh-ink-3); letter-spacing: 0.08em;
}
.oh-util-crumb .oh-rule { flex: 1; }

.oh-util-h1 {
  font-size: 64px; line-height: 1; letter-spacing: -0.028em;
  margin: 14px 0 0;
}
.oh-util-h1-counter {
  font-size: 22px; color: var(--oh-ink-3); margin-left: 18px;
  font-family: var(--oh-font-mono); letter-spacing: 0.08em;
}
.oh-util-sub {
  margin-top: 14px; font-size: 15px; color: var(--oh-ink-2);
  line-height: 1.55; max-width: 640px;
}
@media (max-width: 1023px) {
  .oh-util-h1 { font-size: 44px; }
  .oh-util-h1-counter { font-size: 16px; margin-left: 10px; display: block; margin-top: 8px; }
}
@media (max-width: 599px) {
  .oh-util-h1 { font-size: 34px; }
}

.oh-util-body {
  padding: 30px var(--oh-pad-x) 80px;
}
.oh-util-body-narrow {
  padding: 30px var(--oh-pad-x) 80px;
  display: flex; flex-direction: column; gap: 20px;
  max-width: 980px; margin: 0 auto;
}
.oh-util-loading {
  padding: 48px; text-align: center; font-size: 12px;
  letter-spacing: 0.1em; color: var(--oh-ink-3);
}

/* ─── CART ─────────────────────────────────────────────────────── */
.oh-cart-empty {
  padding: 80px 56px; text-align: center;
  border-radius: 28px;
}
.oh-cart-empty-label {
  font-size: 12px; letter-spacing: 0.1em; color: var(--oh-ink-3);
  margin: 0 0 12px;
}
.oh-cart-empty-h2 {
  font-family: var(--oh-font-display);
  font-size: 64px; line-height: 0.92; letter-spacing: -0.028em;
  margin: 0;
}
.oh-cart-empty-body {
  margin: 24px auto; max-width: 480px;
  font-size: 15px; color: var(--oh-ink-2);
}
.oh-cart-empty-cta {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px;
}
@media (max-width: 599px) {
  .oh-cart-empty { padding: 50px 24px; }
  .oh-cart-empty-h2 { font-size: 42px; }
}

.oh-cart-active {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 24px; align-items: start;
}
@media (max-width: 1023px) {
  .oh-cart-active { grid-template-columns: 1fr; gap: 18px; }
}

.oh-cart-lines {
  padding: 28px; border-radius: 24px;
}
.oh-cart-lines-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.oh-cart-continue {
  font-size: 11px; color: var(--oh-ink-3); text-decoration: none;
}
.oh-cart-error {
  padding: 12px 14px;
  background: rgba(199,59,59,.08);
  border: 1px solid rgba(199,59,59,.25);
  border-radius: 12px;
  font-size: 13px; color: var(--oh-signal-err);
  margin: 0 0 12px;
}

.oh-cart-line {
  display: grid;
  grid-template-columns: 70px 1fr auto 80px 90px;
  gap: 16px; padding: 18px;
  border-radius: 16px;
  align-items: center;
  margin-bottom: 10px;
}
.oh-cart-line:last-child { margin-bottom: 0; }
.oh-cart-line-img {
  width: 70px; height: 70px; border-radius: 12px;
}
.oh-cart-line-name { font-size: 14px; font-weight: 600; }
.oh-cart-line-variation {
  font-size: 10px; color: var(--oh-ink-3); margin-top: 4px;
  letter-spacing: 0.06em;
}
.oh-cart-line-meta {
  margin-top: 8px; display: flex; gap: 10px; align-items: center;
}
.oh-cart-line-remove {
  background: none; border: 0; padding: 0;
  color: var(--oh-ink-3); font-family: var(--oh-font-mono);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer;
}
.oh-cart-line-qty {
  display: flex; align-items: center; gap: 8px;
}
.oh-cart-line-qty button {
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--oh-hair-2);
  background: transparent; cursor: pointer; font-size: 12px;
}
.oh-cart-line-qty button:disabled { opacity: .4; cursor: not-allowed; }
.oh-cart-line-qty-num {
  min-width: 24px; text-align: center; font-size: 14px;
}
.oh-cart-line-unit {
  text-align: right; font-size: 14px; color: var(--oh-ink-2);
}
.oh-cart-line-total {
  text-align: right; font-size: 18px;
}
@media (max-width: 1023px) {
  .oh-cart-line {
    grid-template-columns: 60px 1fr auto;
    grid-template-rows: auto auto;
    gap: 12px;
  }
  .oh-cart-line-img { width: 60px; height: 60px; grid-row: 1 / 3; }
  .oh-cart-line-body { grid-column: 2 / 4; }
  .oh-cart-line-qty { grid-column: 2; grid-row: 2; }
  .oh-cart-line-unit { display: none; }
  .oh-cart-line-total {
    grid-column: 3; grid-row: 2;
    align-self: center; font-size: 16px;
  }
}

.oh-cart-summary {
  padding: 28px; border-radius: 24px;
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 0;
}
@media (max-width: 1023px) {
  .oh-cart-summary { position: static; }
}
.oh-cart-summary-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.oh-cart-summary-rows {
  display: flex; flex-direction: column; gap: 8px;
}
.oh-cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px;
}
.oh-cart-summary-key { font-size: 11px; color: var(--oh-ink-3); }
.oh-cart-summary-val { font-size: 14px; }
.oh-cart-summary-val-ok { color: var(--oh-signal-ok); }
.oh-cart-summary-note {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--oh-hair-2);
  font-size: 10px; color: var(--oh-ink-3); line-height: 1.6;
}
.oh-cart-summary-free {
  margin-top: 12px;
  background: rgba(187,239,211,.5);
  border: 1px solid #BBEFD3;
  justify-content: center; width: 100%;
}
.oh-cart-summary-cta {
  width: 100%; margin-top: 14px; height: 52px;
  justify-content: center;
}
.oh-cart-summary-disclaim {
  margin: 12px 0 0; font-size: 9.5px; color: var(--oh-ink-3);
  text-align: center; line-height: 1.5;
}
.oh-cart-summary-stamps {
  list-style: none; padding: 0; margin: 18px 0 0;
  border-top: 1px solid var(--oh-hair); padding-top: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.oh-cart-summary-stamps li {
  font-size: 10.5px; color: var(--oh-ink-2); letter-spacing: 0.04em;
}
.oh-cart-summary-stamps li .oh-dot { margin-right: 6px; }

.oh-cart-coupon-label {
  margin: 18px 0 8px;
}
.oh-cart-coupon-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}
.oh-cart-coupon-input {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--oh-hair-2);
  background: rgba(255,255,255,.7);
  font-family: var(--oh-font-mono); font-size: 12px;
  text-transform: uppercase;
}
.oh-cart-coupon-btn { height: 40px; padding: 0 14px; font-size: 12px; }
.oh-cart-coupon-msg { margin: 6px 0 0; font-size: 11px; }
.oh-cart-coupon-err { color: var(--oh-signal-err); }
.oh-cart-coupon-ok { color: var(--oh-signal-ok); }

/* ─── SEARCH ───────────────────────────────────────────────────── */
.oh-search-bar {
  margin-top: 22px;
  padding: 8px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
}
.oh-search-bar-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  color: var(--oh-ink-2);
  margin-left: 6px;
}
.oh-search-bar-input {
  flex: 1;
  padding: 12px 6px;
  border: 0; background: transparent;
  font-size: 16px; outline: none;
  font-family: var(--oh-font-body);
  color: var(--oh-ink);
}
.oh-search-bar-btn {
  height: 40px; font-size: 13px;
}

.oh-search-idle {
  max-width: 720px; margin: 0 auto;
}
.oh-search-suggest {
  padding: 28px; border-radius: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.oh-search-suggest .oh-rule { margin: 6px 0; }
.oh-search-chips {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.oh-search-shortcuts {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.oh-search-shortcuts a {
  font-family: var(--oh-font-mono); font-size: 12px;
  color: var(--oh-ink); text-decoration: none;
  letter-spacing: 0.04em;
}
.oh-search-shortcuts a:hover { color: var(--oh-signal-ok); }

.oh-search-empty {
  max-width: 640px; margin: 0 auto;
}
.oh-search-empty-card { padding: 32px; border-radius: 22px; }
.oh-search-empty-h2 {
  font-size: 38px; margin: 10px 0 12px; line-height: 1.02;
}
.oh-search-empty-body {
  font-size: 14px; color: var(--oh-ink-2);
  line-height: 1.55; margin: 0 0 18px;
}

.oh-search-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.oh-search-card {
  padding: 0; border-radius: 18px;
  display: block; text-decoration: none;
  color: inherit; overflow: hidden;
  transition: transform 160ms var(--oh-ease), box-shadow 160ms var(--oh-ease);
}
.oh-search-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oh-elev-2);
}
.oh-search-card-img {
  position: relative;
  aspect-ratio: 1;
  background: var(--oh-paper-deep);
  overflow: hidden;
  display: grid; place-items: center;
}
.oh-search-card-img img {
  width: 88%; height: 88%; object-fit: contain;
}
.oh-search-card-stock {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: rgba(255,209,26,.85);
  font-family: var(--oh-font-mono);
  font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  color: var(--oh-ink);
  border-radius: 999px;
}
.oh-search-card-body { padding: 16px 18px; }
.oh-search-card-title {
  font-family: var(--oh-font-display);
  font-size: 17px; font-weight: 600; line-height: 1.1;
  margin: 0 0 8px;
}
.oh-search-card-meta {
  margin: 0 0 4px;
  font-size: 10px; color: var(--oh-ink-3); letter-spacing: 0.04em;
}
.oh-search-card-price {
  margin: 8px 0 0;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.oh-search-card-was {
  font-size: 12px; text-decoration: line-through;
  color: var(--oh-ink-3); margin-left: 6px;
}

/* ─── ORDER TRACKING ───────────────────────────────────────────── */
/* Centered single-column lookup column — 3-mode form per
   feedback_order_tracking_form_legacy.md (order# only / contact only / both).
   The old 1fr 1.6fr grid pushed the form to the left of empty space; users
   complained the page looked off-center. */
.oh-tracking-hero { padding-bottom: 24px; }
.oh-tracking-center {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 12px;
  text-align: center;
  display: flex; flex-direction: column; gap: 0;
}
.oh-tracking-center .oh-util-crumb { justify-content: center; }
.oh-tracking-center .oh-util-crumb .oh-rule { max-width: 80px; }

.oh-tracking-h1 {
  font-size: 64px; line-height: 1;
  margin: 14px auto 0;
}
@media (max-width: 1023px) { .oh-tracking-h1 { font-size: 46px; } }
@media (max-width: 599px)  { .oh-tracking-h1 { font-size: 36px; } }

.oh-tracking-sub {
  margin: 14px auto 0;
  font-size: 15px; max-width: 560px;
  color: var(--oh-ink-2); line-height: 1.55;
}
.oh-tracking-form {
  margin: 28px auto 0;
  padding: 24px; border-radius: 22px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: left;
  max-width: 560px;
  width: 100%;
}
.oh-tracking-form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 599px) {
  .oh-tracking-form-grid { grid-template-columns: 1fr; }
}
.oh-tracking-form-grid label {
  display: flex; flex-direction: column; gap: 6px;
}
.oh-tracking-form-label {
  letter-spacing: 0.1em;
  color: var(--oh-ink-3);
}
.oh-tracking-form-input {
  width: 100%; padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--oh-hair-2);
  background: rgba(255,255,255,.7);
  font-size: 14px; outline: none;
  font-family: var(--oh-font-body);
  transition: border-color 160ms var(--oh-ease);
}
.oh-tracking-form-input.oh-mono { font-family: var(--oh-font-mono); }
.oh-tracking-form-input:focus { border-color: var(--oh-ink); }
.oh-tracking-form-btn {
  margin-top: 4px; height: 48px;
  justify-content: center; font-size: 14px;
}
.oh-tracking-err {
  margin: 6px 0 0; font-size: 12px; color: var(--oh-signal-err);
}
.oh-tracking-form-help {
  margin: 10px 0 0; font-size: 10px;
  color: var(--oh-ink-3); line-height: 1.6;
  text-align: center;
}

/* Result detail card — centered, full width of the 720px column */
.oh-tracking-result {
  margin: 28px auto 0;
  width: 100%;
  text-align: left;
}

/* Multi-result list (contact-only search returns several orders) */
.oh-tracking-multi {
  margin: 28px auto 0;
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.oh-tracking-multi-label {
  text-align: center;
  margin-bottom: 4px;
}
.oh-tracking-multi-card {
  padding: 16px 20px;
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  transition: transform 160ms var(--oh-ease), box-shadow 160ms var(--oh-ease);
  text-align: left;
}
.oh-tracking-multi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--oh-elev-2);
}
.oh-tracking-multi-row {
  display: flex; justify-content: space-between; align-items: center;
}
.oh-tracking-multi-num { font-size: 14px; font-weight: 600; }
.oh-tracking-multi-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--oh-ink-2);
}
.oh-tracking-multi-date { font-size: 11px; color: var(--oh-ink-3); }
.oh-tracking-multi-total { font-size: 16px; }

.oh-tracking-result {
  padding: 32px; border-radius: 22px;
}
.oh-tracking-result-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.oh-tracking-result-h3 {
  font-size: 28px; margin-top: 8px;
}
.oh-tracking-result-meta {
  margin-top: 6px; font-size: 11px; color: var(--oh-ink-3);
}
.oh-tracking-result-meta a { color: inherit; text-decoration: underline; }
.oh-tracking-result-chip {
  background: rgba(31,164,255,.18);
  border: 1px solid rgba(31,164,255,.6);
}
.oh-tracking-result-cta {
  margin-top: 20px;
  width: 100%; justify-content: center; height: 46px;
}

.oh-tracking-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 16px 0;
}
@media (max-width: 599px) { .oh-tracking-grid-2 { grid-template-columns: 1fr; } }
.oh-tracking-addr-name { font-size: 13.5px; font-weight: 600; }
.oh-tracking-addr-line {
  font-size: 12.5px; color: var(--oh-ink-2);
  margin-top: 4px; line-height: 1.5;
}

.oh-tracking-detail-label { margin: 16px 0 8px; }
.oh-tracking-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13px;
}
.oh-tracking-detail-row .oh-mono {
  font-size: 11px; color: var(--oh-ink-3); letter-spacing: 0.06em;
}

.oh-tracking-info {
  padding: 28px; border-radius: 22px;
}
.oh-tracking-info-h2 {
  font-size: 28px; margin: 10px 0 14px; line-height: 1.05;
}
@media (max-width: 599px) { .oh-tracking-info-h2 { font-size: 22px; } }
.oh-tracking-status-list {
  margin: 0; padding-left: 20px; font-size: 13.5px;
  color: var(--oh-ink-2); line-height: 1.7;
}
.oh-tracking-status-list li { margin-bottom: 10px; }
.oh-tracking-status-list strong { color: var(--oh-ink); }
.oh-tracking-status-list a { color: var(--oh-ink); text-decoration: underline; }
.oh-tracking-faq { border-radius: 16px; overflow: hidden; }

/* ─── CHECKOUT (existing class restyle to D2) ──────────────────── */
.oh-checkout-shell, .oh-acct-shell {
  position: relative; overflow: hidden;
  padding: 130px var(--oh-pad-x) 80px;
}
@media (max-width: 1023px) {
  .oh-checkout-shell, .oh-acct-shell {
    padding: 90px var(--oh-pad-x) 60px;
  }
}

/* override the older "background: paper; border solid" rule */
.oh-checkout-title, .oh-acct-shell .oh-checkout-title {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 32px;
}
.oh-checkout-title-inner {
  max-width: var(--oh-max-w);
  margin: 0 auto;
  padding: 0;
}
.oh-checkout-title h1, .oh-acct-shell h1 {
  font-family: var(--oh-font-display);
  font-weight: 700; font-stretch: 100%;
  font-size: 64px;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--oh-ink);
  text-transform: none;
  margin: 14px 0 0;
}
@media (max-width: 1023px) {
  .oh-checkout-title h1, .oh-acct-shell h1 { font-size: 44px; }
}
@media (max-width: 599px) {
  .oh-checkout-title h1, .oh-acct-shell h1 { font-size: 34px; }
}

/* Stamps → restyle as glass chips */
.oh-checkout-shell .oh-pdp-stamps,
.oh-acct-shell .oh-pdp-stamps {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.oh-checkout-shell .oh-stamp,
.oh-acct-shell .oh-stamp {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: var(--oh-r-pill);
  padding: 5px 12px;
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oh-ink);
}
.oh-checkout-shell .oh-stamp-y,
.oh-acct-shell .oh-stamp-y {
  background: rgba(255,209,26,.4);
  border-color: rgba(201,122,27,.5);
}

/* 5-step progress strip → small glass tabs */
.oh-checkout-progress {
  max-width: var(--oh-max-w);
  margin: 28px auto 0;
  padding: 0;
}
.oh-checkout-progress-inner {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: 999px;
  padding: 8px;
  display: flex; gap: 4px;
  overflow-x: auto;
}
.oh-checkout-step {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--oh-ink-3);
  background: transparent; border: 0;
}
.oh-checkout-step.is-done { color: var(--oh-ink-2); }
.oh-checkout-step.is-done .check { color: var(--oh-signal-ok); }
.oh-checkout-step.is-active {
  color: var(--oh-paper);
  background: var(--oh-ink);
}

/* Body grid: 1.6fr 1fr */
.oh-checkout-body, .oh-acct-shell .oh-checkout-body {
  max-width: var(--oh-max-w);
  margin: 32px auto 0;
  padding: 0;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px;
  align-items: start;
  background: transparent;
  border: 0;
}
.oh-acct-shell .oh-checkout-body,
.oh-acct-shell .oh-acct-dash,
.oh-acct-shell .oh-acct-auth {
  /* my-account is always single-column. Force grid-template-columns:1fr
     with !important so a future edit to the shared .oh-checkout-body
     (which is 1.6fr 1fr for the real checkout page) cannot poison the
     account dashboard layout. Defends against the inline style being
     stripped too. Per playbook 3.10.7 + 3.10.8. */
  grid-template-columns: 1fr !important;
}
@media (max-width: 1023px) {
  .oh-checkout-body, .oh-acct-shell .oh-checkout-body {
    grid-template-columns: 1fr; gap: 18px;
  }
}

/* Override the older `> section` glass shell that was wrapping
   .oh-acct-shell with a heavy boxed look. */
.oh-acct-shell > section, .oh-checkout-shell > section {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ink-head block → glass card */
.oh-checkout-block {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: 22px;
  margin-bottom: 16px;
  overflow: hidden;
}
.oh-checkout-block-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px;
  background: transparent;
  border-bottom: 1px solid var(--oh-hair);
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oh-ink-2);
}
.oh-checkout-block-head .yellow {
  color: var(--oh-ink);
  font-weight: 600;
}
.oh-checkout-block-head a.yellow { text-decoration: none; }
.oh-checkout-block-body { padding: 22px 24px; }

/* Inputs / labels */
.oh-checkout-label {
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oh-ink-3);
  font-weight: 600;
  display: block;
}
.oh-checkout-block input[type="text"],
.oh-checkout-block input[type="email"],
.oh-checkout-block input[type="tel"],
.oh-checkout-block input[type="password"],
.oh-checkout-block input[type="number"],
.oh-checkout-block textarea,
.oh-checkout-block select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--oh-hair-2);
  background: rgba(255,255,255,.7);
  border-radius: 10px;
  font-family: var(--oh-font-body);
  font-size: 13.5px;
  color: var(--oh-ink);
  outline: none;
  transition: border-color 160ms var(--oh-ease), background 160ms var(--oh-ease);
}
.oh-checkout-block input:focus,
.oh-checkout-block textarea:focus,
.oh-checkout-block select:focus {
  border-color: var(--oh-ink);
  background: rgba(255,255,255,.95);
}

/* Line items inside checkout (re-uses .oh-cart-line + .oh-cart-swatch) */
.oh-cart-swatch {
  width: 60px; height: 60px; border-radius: 12px;
  background: var(--oh-paper-deep);
  flex-shrink: 0;
}
.oh-checkout-block .oh-cart-line {
  background: transparent; border-bottom: 1px solid var(--oh-hair);
  padding: 18px 24px; margin: 0;
  border-radius: 0;
  grid-template-columns: 60px 1fr auto;
}
.oh-checkout-block .oh-cart-line:last-child { border-bottom: 0; }
.oh-checkout-block .oh-cart-line-name { font-size: 13.5px; }
.oh-checkout-block .oh-cart-line-flavor {
  font-family: var(--oh-font-mono);
  font-size: 10.5px; color: var(--oh-ink-3);
  margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase;
}
.oh-checkout-block .oh-cart-line-total {
  font-size: 16px; text-align: right; color: var(--oh-ink);
}

/* Right rail / summary card */
.oh-checkout-summary-card {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: 22px;
  padding: 24px;
  position: sticky; top: 110px;
}
@media (max-width: 1023px) {
  .oh-checkout-summary-card { position: static; }
}
.oh-checkout-summary-row,
.oh-checkout-summary-row-points {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
  font-size: 13.5px; color: var(--oh-ink-2);
}
.oh-checkout-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--oh-hair);
}
.oh-checkout-total-label {
  font-size: 14px; font-weight: 600;
}
.oh-checkout-total-num {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 28px; letter-spacing: -0.025em; font-weight: 700;
}
.oh-checkout-trust {
  margin-top: 16px;
  font-family: var(--oh-font-mono);
  font-size: 9.5px; color: var(--oh-ink-3);
  letter-spacing: 0.04em;
  text-align: center; line-height: 1.6;
}

/* Reward points block */
.oh-checkout-points {
  margin-top: 14px; padding: 14px;
  background: rgba(255,255,255,.5);
  border: 1px solid var(--oh-hair);
  border-radius: 14px;
}
.oh-checkout-points-head {
  display: flex; justify-content: space-between; align-items: center;
}
.oh-checkout-points-balance {
  font-family: var(--oh-font-display);
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.022em;
}
.oh-checkout-points-toggle {
  background: transparent; border: 1px solid var(--oh-hair-2);
  border-radius: 999px; padding: 6px 14px;
  font-family: var(--oh-font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--oh-ink); cursor: pointer;
}
.oh-checkout-points-err {
  color: var(--oh-signal-err); font-size: 11px; margin-top: 6px;
}
.oh-checkout-points-hint {
  font-size: 11.5px; color: var(--oh-ink-3);
  margin-top: 6px; line-height: 1.5;
}
.oh-checkout-earn-line {
  font-family: var(--oh-font-mono);
  font-size: 10px; color: var(--oh-signal-ok);
  letter-spacing: 0.06em;
  margin-top: 8px;
}

/* Coupon block inside checkout */
.oh-checkout-coupon {
  margin: 16px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
}

/* Billing-address toggle */
.oh-checkout-billing-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--oh-ink-2);
  margin-top: 14px;
}

/* Empty + loading */
.oh-checkout-empty {
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  border-radius: 28px;
  max-width: 720px;
  margin: 60px auto 80px;
  padding: 64px 40px;
}
.oh-checkout-empty h2 {
  font-family: var(--oh-font-display);
  font-size: 56px;
  letter-spacing: -0.028em;
  line-height: 0.95;
}
@media (max-width: 599px) {
  .oh-checkout-empty h2 { font-size: 36px; }
}
.oh-checkout-loading {
  text-align: center; color: var(--oh-ink-3);
  font-family: var(--oh-font-mono); font-size: 11px;
  letter-spacing: 0.08em;
}

/* ─── MY-ACCOUNT (re-uses checkout block + adds dashboard widgets) ──── */
.oh-acct-auth, .oh-acct-dash {
  max-width: var(--oh-max-w);
  margin: 0 auto;
  padding: 0;
}
.oh-acct-dash {
  display: flex; flex-direction: column; gap: 16px;
}
.oh-acct-shell .oh-checkout-block-head .yellow strong {
  color: var(--oh-ink) !important;
  background: transparent !important;
}
.oh-acct-shell .oh-checkout-block-head button.yellow {
  background: transparent; border: 0; color: var(--oh-ink);
  cursor: pointer; padding: 0;
  font-family: var(--oh-font-mono);
  font-size: 11px; letter-spacing: 0.06em;
}

/* Acct status label (existing) — re-tint */
.oh-acct-status { background: rgba(31,157,92,.12); color: var(--oh-signal-ok); }
.oh-acct-status-completed { background: rgba(31,157,92,.12); color: var(--oh-signal-ok); }
.oh-acct-status-processing { background: rgba(31,164,255,.15); color: var(--oh-signal-info); }
.oh-acct-status-pending { background: rgba(255,209,26,.2); color: #93770a; }
.oh-acct-status-on-hold, .oh-acct-status-failed { background: rgba(199,59,59,.14); color: var(--oh-signal-err); }

.oh-acct-points-cards {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023px) {
  .oh-acct-points-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .oh-acct-points-cards { grid-template-columns: 1fr; }
}

/* Inline Place Order CTA — directly under the PAYMENT card so customers
   don't have to look across to the sticky summary on the right rail. */
.oh-checkout-inline-cta {
  margin-top: 16px;
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--oh-glass);
  backdrop-filter: var(--oh-glass-blur);
  -webkit-backdrop-filter: var(--oh-glass-blur);
  border: 1px solid var(--oh-glass-edge);
  box-shadow: var(--oh-elev-2);
}
.oh-checkout-inline-cta-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--oh-hair);
}
.oh-checkout-inline-cta-label {
  font-size: 11px; color: var(--oh-ink-3); letter-spacing: 0.08em;
}
.oh-checkout-inline-cta-num {
  font-family: var(--oh-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 32px; letter-spacing: -0.025em; font-weight: 700;
}
.oh-checkout-inline-cta-err {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: rgba(199,59,59,.08);
  border: 1px solid rgba(199,59,59,.25);
  border-radius: 12px;
  font-family: var(--oh-font-mono);
  font-size: 11px; color: var(--oh-signal-err);
  line-height: 1.5;
}
.oh-checkout-inline-cta-btn {
  width: 100%;
  height: 56px;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.02em;
}
.oh-checkout-inline-cta-disclaim {
  margin: 14px 0 0;
  font-size: 10px;
  color: var(--oh-ink-3);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: center;
}

/* ───── TL;DR collapsible (added 2026-05-15 audit P2-T4) ───── */
.oh-tldr-details {
  cursor: pointer;
}
.oh-tldr-details > .oh-tldr-summary {
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.oh-tldr-details > .oh-tldr-summary::-webkit-details-marker { display: none; }
.oh-tldr-details > .oh-tldr-summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 14px;
  color: var(--oh-ink-3);
  transition: transform 0.18s ease;
}
.oh-tldr-details[open] > .oh-tldr-summary::after { transform: rotate(180deg); }
.oh-tldr-details[open] > .oh-tldr-summary { margin-bottom: 12px; }
.oh-tldr-hint {
  font-size: 10px;
  color: var(--oh-ink-3);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────────────
   Sidebar TOC overrides — placed at end-of-file so they win the cascade
   over the two earlier `.oh-guide-toc-list li` declarations (lines 1380
   and 2915) that both force a 2-column grid. info-toc-list items have no
   .oh-guide-toc-num prefix span, so the grid would squeeze the title
   into the 24-26px first column and wrap each word vertically.
   ───────────────────────────────────────────────────────────────────── */
.oh-info-toc-list li,
.oh-guide-toc-list li.oh-guide-toc-more {
  display: block;
  grid-template-columns: none;
  padding: 0;
}
.oh-info-toc-list li a,
.oh-guide-toc-list li.oh-guide-toc-more {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
}
/* Anchor inside guide TOC (with .oh-guide-toc-num span) must keep display:
   contents so the span lands in column 1 and the title text in column 2. */
.oh-guide-toc-list li a {
  display: contents;
  color: inherit;
}
.oh-info-toc-list li a {
  display: block;
  color: var(--oh-ink-3);
  text-decoration: none;
}
.oh-info-toc-list li a:hover {
  color: var(--oh-ink);
}