/* ═══════════════════════════════════════════════════════════════════════════
 * reignbarvapes.com · core.css — Direction D2 · Vivid Ambience
 * Component primitives + page section layouts. Reads from tokens.css.
 * 2026-05-15 · ground-up rewrite (replaces v1 fork).
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ───── A. SR & utility ───── */
.rbx-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;
}
.rbx-hush { color: var(--rbx-ink-3); }

/* ───── B. Ambience — 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
 *       ambience layer behind them.
 *
 *  IMPLEMENTATION NOTE:
 *  The ambience 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.
 */
/* Ambience is rendered as a child of each archetype hero section
 * (.rbx-home-hero / .rbx-flavors-hero / .rbx-pdp-hero / .rbx-vs-hero /
 * .rbx-info-hero / .rbx-guide-hero), via {% include "components/ambience.njk" %}.
 *
 * The hero section must declare:
 *   position: relative;
 *   overflow: hidden;
 *   isolation: isolate;
 * so ambience 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 ambience model.
 */
.rbx-ambience {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
/* Hero section bodies sit above the ambience via z-index */
.rbx-home-hero > *:not(.rbx-ambience),
.rbx-flavors-hero > *:not(.rbx-ambience),
.rbx-pdp-hero > *:not(.rbx-ambience),
.rbx-vs-hero > *:not(.rbx-ambience),
.rbx-info-hero > *:not(.rbx-ambience),
.rbx-guide-hero > *:not(.rbx-ambience) {
  position: relative;
  z-index: 1;
}

/* ───── PC max-width container ─────
 * All `<section>` direct children of <main.rbx-doc-root> render full-bleed
 * so ambience blobs can extend edge-to-edge, but their immediate non-
 * ambience children are constrained to 1280px and centered. This is the
 * one-rule equivalent of wrapping every section's content in a container. */
.rbx-doc-root > section > *:not(.rbx-ambience) {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* Make hero sections ambience-host containers */
.rbx-home-hero,
.rbx-flavors-hero,
.rbx-pdp-hero,
.rbx-vs-hero,
.rbx-info-hero,
.rbx-guide-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rbx-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 */
.rbx-blob--rose      { background: radial-gradient(circle, #FF3D7A 0%, transparent 65%); }
.rbx-blob--magenta   { background: radial-gradient(circle, #E63CFF 0%, transparent 65%); }
.rbx-blob--lavender  { background: radial-gradient(circle, #8A5DFF 0%, transparent 65%); }
.rbx-blob--sky       { background: radial-gradient(circle, #1FA4FF 0%, transparent 65%); }
.rbx-blob--cyan      { background: radial-gradient(circle, #25E4F0 0%, transparent 65%); }
.rbx-blob--mint      { background: radial-gradient(circle, #4DEAA5 0%, transparent 65%); }
.rbx-blob--lime      { background: radial-gradient(circle, #C2F23A 0%, transparent 65%); }
.rbx-blob--amber     { background: radial-gradient(circle, #FFD11A 0%, transparent 65%); }
.rbx-blob--peach     { background: radial-gradient(circle, #FF8533 0%, transparent 65%); }
.rbx-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>");
}

/* ── Ambience 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 */
.rbx-ambience[data-preset="rose"]    .rbx-blob:nth-child(1){ left:-8%;  top:-10%; width:820px; height:820px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.85; }
.rbx-ambience[data-preset="rose"]    .rbx-blob:nth-child(2){ left:55%;  top:-6%;  width:760px; height:760px; background:radial-gradient(circle,#FF8533 0%,transparent 65%); opacity:.78; }
.rbx-ambience[data-preset="rose"]    .rbx-blob:nth-child(3){ left:32%;  top:30%;  width:1000px;height:900px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.62; }
.rbx-ambience[data-preset="rose"]    .rbx-blob:nth-child(4){ left:-12%; top:55%;  width:760px; height:760px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.55; }
.rbx-ambience[data-preset="rose"]    .rbx-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 */
.rbx-ambience[data-preset="cool"]    .rbx-blob:nth-child(1){ left:-10%; top:-8%;  width:880px; height:880px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.80; }
.rbx-ambience[data-preset="cool"]    .rbx-blob:nth-child(2){ left:55%;  top:-4%;  width:780px; height:780px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.72; }
.rbx-ambience[data-preset="cool"]    .rbx-blob:nth-child(3){ left:30%;  top:42%;  width:960px; height:900px; background:radial-gradient(circle,#25E4F0 0%,transparent 65%); opacity:.55; }
.rbx-ambience[data-preset="cool"]    .rbx-blob:nth-child(4){ left:70%;  top:60%;  width:740px; height:740px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.55; }
.rbx-ambience[data-preset="cool"]    .rbx-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 */
.rbx-ambience[data-preset="aurora"]  .rbx-blob:nth-child(1){ left:-6%;  top:-10%; width:1000px;height:1000px;background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.72; }
.rbx-ambience[data-preset="aurora"]  .rbx-blob:nth-child(2){ left:55%;  top:-12%; width:900px; height:900px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.70; }
.rbx-ambience[data-preset="aurora"]  .rbx-blob:nth-child(3){ left:35%;  top:25%;  width:1100px;height:950px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.62; }
.rbx-ambience[data-preset="aurora"]  .rbx-blob:nth-child(4){ left:-15%; top:50%;  width:840px; height:840px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.60; }
.rbx-ambience[data-preset="aurora"]  .rbx-blob:nth-child(5){ left:60%;  top:55%;  width:860px; height:860px; background:radial-gradient(circle,#FF8533 0%,transparent 65%); opacity:.60; }
.rbx-ambience[data-preset="aurora"]  .rbx-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 */
.rbx-ambience[data-preset="peach"]   .rbx-blob:nth-child(1){ left:-10%; top:-14%; width:900px; height:900px; background:radial-gradient(circle,#FF8533 0%,transparent 65%); opacity:.82; }
.rbx-ambience[data-preset="peach"]   .rbx-blob:nth-child(2){ left:55%;  top:-8%;  width:820px; height:820px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.72; }
.rbx-ambience[data-preset="peach"]   .rbx-blob:nth-child(3){ left:25%;  top:35%;  width:1000px;height:900px; background:radial-gradient(circle,#FFD11A 0%,transparent 65%); opacity:.62; }
.rbx-ambience[data-preset="peach"]   .rbx-blob:nth-child(4){ left:-12%; top:55%;  width:800px; height:800px; background:radial-gradient(circle,#8A5DFF 0%,transparent 65%); opacity:.52; }
.rbx-ambience[data-preset="peach"]   .rbx-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 */
.rbx-ambience[data-preset="meadow"]  .rbx-blob:nth-child(1){ left:-12%; top:-10%; width:880px; height:880px; background:radial-gradient(circle,#4DEAA5 0%,transparent 65%); opacity:.82; }
.rbx-ambience[data-preset="meadow"]  .rbx-blob:nth-child(2){ left:55%;  top:-4%;  width:780px; height:780px; background:radial-gradient(circle,#1FA4FF 0%,transparent 65%); opacity:.75; }
.rbx-ambience[data-preset="meadow"]  .rbx-blob:nth-child(3){ left:32%;  top:44%;  width:960px; height:900px; background:radial-gradient(circle,#C2F23A 0%,transparent 65%); opacity:.55; }
.rbx-ambience[data-preset="meadow"]  .rbx-blob:nth-child(4){ left:65%;  top:55%;  width:760px; height:760px; background:radial-gradient(circle,#FF3D7A 0%,transparent 65%); opacity:.55; }
.rbx-ambience[data-preset="meadow"]  .rbx-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 */
.rbx-ambience[data-preset="mono"]    .rbx-blob:nth-child(1){ left:-10%; top:-8%;  width:820px; height:820px; background:radial-gradient(circle,#E8E2D6 0%,transparent 65%); opacity:.95; }
.rbx-ambience[data-preset="mono"]    .rbx-blob:nth-child(2){ left:60%;  top:30%;  width:900px; height:900px; background:radial-gradient(circle,#D9D3C5 0%,transparent 65%); opacity:.95; }
.rbx-ambience[data-preset="mono"]    .rbx-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 ambience
 * behind them.  Two name forms supported:
 *   .rbx-glass-deep / .rbx-flat   ← existing in-tree usage
 *   .rbx-glass--deep / .rbx-glass--flat ← handoff range (BEM modifier form)
 * Both render identically.
 */
.rbx-glass {
  position: relative;
  background: var(--rbx-glass);
  backdrop-filter: var(--rbx-glass-blur);
  -webkit-backdrop-filter: var(--rbx-glass-blur);
  border: 1px solid var(--rbx-glass-edge);
  border-radius: var(--rbx-r-lg);
  box-shadow: var(--rbx-glass-shadow);
}
.rbx-glass-deep,
.rbx-glass--deep {
  background: var(--rbx-glass-deep);
  border-color: rgba(255,255,255,.92);
}
.rbx-flat,
.rbx-glass--flat {
  background: rgba(255,255,255,0.42);
  border: 1px solid var(--rbx-hair);
  border-radius: var(--rbx-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 (the display family).
 * NEVER apply font-style: italic to the sans display font — the slant
 * gets faked algorithmically and the glyphs distort.  Both forms work:
 *   <span class="rbx-em">20K hub.</span>     ← handoff form
 *   <em>20K hub.</em>                         ← simpler markup
 * Both resolve to the display family italic 500.
 */
.rbx-em,
.rbx em,
.rbx h1 em,
.rbx h2 em,
.rbx h3 em,
.rbx-hero__h1 em,
.rbx-display em {
  font-family: var(--rbx-font-serif);
  font-style: italic;
  font-weight: 500;
}
.rbx-ink-card {
  background: var(--rbx-ink);
  color: var(--rbx-paper);
  border: 1px solid var(--rbx-ink);
  border-radius: var(--rbx-r-md);
}
.rbx-rule {
  display: block;
  height: 1px;
  background: var(--rbx-hair);
  border: 0;
  margin: 0;
}

/* ───── D. Placeholder ─────  (used for device imagery until real product shots land) */
.rbx-pl {
  position: relative;
  overflow: hidden;
  border-radius: var(--rbx-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(--rbx-paper-deep);
}
.rbx-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;
}
.rbx-pl-cap {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--rbx-font-mono);
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rbx-ink); opacity: .55; z-index: 2;
}
.rbx-pl-cap[data-pos="tr"] { right: 14px; top: 12px; left: auto; bottom: auto; }

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

/* ───── F. Pills / chips / dots ───── */
.rbx-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(--rbx-hair);
  border-radius: var(--rbx-r-pill);
  font-size: 13px; font-weight: 500;
  color: var(--rbx-ink);
  transition: background var(--rbx-dur-fast) var(--rbx-ease);
  cursor: pointer;
}
.rbx-pill:hover { background: rgba(255,255,255,.85); }
.rbx-pill.is-active {
  background: var(--rbx-ink);
  color: var(--rbx-paper);
  border-color: var(--rbx-ink);
}
.rbx-pill.is-active:hover { background: var(--rbx-ink-2); }

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

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

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

/* main wrapper — push content above ambience fixed bg.
   Pages without a `.rbx-*-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. */
.rbx-doc-root {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 200px);
}

/* ───── I. Logo ───── */
.rbx-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--rbx-ink);
}
.rbx-badge-mark {
  width: 28px; height: 30px;
  flex-shrink: 0;
}
.rbx-badge-text {
  font-family: var(--rbx-font-display);
  font-size: 28px;
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1;
}
.rbx-badge-sub {
  display: block;
  font-family: var(--rbx-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) ───── */
.rbx-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;
}
.rbx-header-logo {
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
}
.rbx-header-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: var(--rbx-r-pill);
}
.rbx-header-nav a {
  padding: 8px 16px;
  border-radius: var(--rbx-r-pill);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rbx-ink);
  white-space: nowrap;
  transition: background var(--rbx-dur-fast) var(--rbx-ease);
}
.rbx-header-nav a:hover { background: rgba(255,255,255,.7); color: var(--rbx-ink); }
.rbx-header-nav a.is-active,
.rbx-header-nav a[aria-current="page"] {
  background: var(--rbx-ink);
  color: var(--rbx-paper);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ───── S. FAQ accordion (native <details>/<summary>) ───── */
.rbx-faq { border-radius: var(--rbx-r-lg); overflow: hidden; }
.rbx-faq details { border-bottom: 1px solid var(--rbx-hair); }
.rbx-faq details:last-child { border-bottom: 0; }
.rbx-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(--rbx-ink);
}
.rbx-faq summary::-webkit-details-marker { display: none; }
.rbx-faq summary::after {
  content: "+";
  font-size: 18px; color: var(--rbx-ink-3);
  transition: transform var(--rbx-dur-base) var(--rbx-ease);
}
.rbx-faq details[open] summary::after { content: "−"; }
.rbx-faq-a {
  padding: 0 24px 22px;
  font-size: 14px;
  color: var(--rbx-ink-2);
  line-height: 1.6;
}

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

/* ───── U. Family chip + family colors helpers ───── */
.rbx-family-iced     { --fam: var(--rbx-f-iced);     --fam-deep: var(--rbx-f-iced-deep); }
.rbx-family-sour     { --fam: var(--rbx-f-sour);     --fam-deep: var(--rbx-f-sour-deep); }
.rbx-family-mint     { --fam: var(--rbx-f-mint);     --fam-deep: var(--rbx-f-mint-deep); }
.rbx-family-tropical { --fam: var(--rbx-f-tropical); --fam-deep: var(--rbx-f-tropical-deep); }
.rbx-family-berry    { --fam: var(--rbx-f-berry);    --fam-deep: var(--rbx-f-berry-deep); }
.rbx-family-peach    { --fam: var(--rbx-f-peach);    --fam-deep: var(--rbx-f-peach-deep); }
.rbx-family-signature{ --fam: var(--rbx-f-sig);      --fam-deep: var(--rbx-f-sig-deep); }
.rbx-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(--rbx-r-pill);
  font-family: var(--rbx-font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--rbx-ink);
}
.rbx-family-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--fam);
}

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

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

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

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

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

.rbx-flavor-teaser {
  position: relative;
  padding: 56px 48px;
  border-radius: var(--rbx-r-xl);
  overflow: hidden;
}
.rbx-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%);
}
.rbx-flavor-teaser-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.rbx-flavor-teaser-h2 {
  font-family: var(--rbx-font-display);
  font-size: 56px;
  letter-spacing: -0.028em;
  line-height: 0.98;
  margin: 12px 0 0;
  font-weight: 700;
}
.rbx-flavor-teaser-h2 .rbx-num { font-size: 96px; }
.rbx-flavor-family-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rbx-flavor-family-card {
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border-radius: 14px;
}
.rbx-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;
}

.rbx-reviews-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.rbx-review-card {
  padding: 26px;
  border-radius: var(--rbx-r-lg);
}
.rbx-review-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.rbx-review-stars { display: flex; gap: 2px; font-size: 14px; }
.rbx-review-star-on  { color: var(--rbx-ink); }
.rbx-review-star-off { color: rgba(14,17,22,.18); }
.rbx-review-date {
  font-family: var(--rbx-font-mono);
  font-size: 10px; color: var(--rbx-ink-3);
}
.rbx-review-h4 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.rbx-review-body { font-size: 13.5px; color: var(--rbx-ink-2); line-height: 1.55; margin: 0; }
.rbx-review-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rbx-hair);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.rbx-review-author { display: flex; align-items: center; gap: 10px; }
.rbx-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;
}
.rbx-review-name { font-size: 12.5px; font-weight: 600; }
.rbx-review-city {
  font-family: var(--rbx-font-mono);
  font-size: 9.5px; color: var(--rbx-ink-3);
}

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

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

/* ───── W. PDP sections ───── */
.rbx-pdp-hero { padding: 50px var(--rbx-pad-x) 30px; }
.rbx-pdp-crumb {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 18px;
  font-family: var(--rbx-font-mono);
  font-size: 11px; color: var(--rbx-ink-3);
}
.rbx-pdp-crumb .rbx-rule { flex: 1; }
.rbx-pdp-layout {
  /* 5 srb-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;
}
.rbx-pdp-gallery {
  /* No thumbs → no inner grid; the .rbx-pdp-gallery-main fills the column. */
  display: block;
}
.rbx-pdp-gallery-main {
  aspect-ratio: 1/1; border-radius: 24px; padding: 16px;
  position: relative; overflow: hidden;
}
.rbx-pdp-gallery-main-img {
  position: absolute; inset: 16px;
  border-radius: 18px;
}
.rbx-pdp-cart {
  padding: 28px; border-radius: 24px;
  position: sticky; top: 100px;
}
.rbx-pdp-title {
  font-family: var(--rbx-font-display);
  font-size: 38px; letter-spacing: -0.025em; line-height: 1.02;
  margin: 14px 0 0;
  font-weight: 700;
}
.rbx-pdp-title em {
  font-family: var(--rbx-font-serif);
  font-style: italic; font-weight: 500;
}
.rbx-pdp-sub {
  margin-top: 14px;
  font-size: 14px; color: var(--rbx-ink-2); line-height: 1.55;
}
.rbx-pdp-price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.rbx-pdp-cart-options { margin-top: 22px; }
.rbx-pdp-cart-options-label {
  font-family: var(--rbx-font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rbx-ink-3);
  margin-bottom: 10px;
}
.rbx-pdp-flavor-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rbx-pdp-qty-row { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rbx-pdp-qty-cell, .rbx-pdp-ship-cell {
  padding: 10px 14px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
}
.rbx-pdp-qty-control {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.rbx-pdp-qty-control button {
  width: 22px; height: 22px; border-radius: 999px;
  border: 1px solid var(--rbx-hair);
  font-size: 12px; cursor: pointer;
}
.rbx-pdp-qty-control span:not(.rbx-pdp-qty-num) {}
.rbx-pdp-qty-num {
  font-family: var(--rbx-font-mono); font-size: 14px; font-weight: 600;
}

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

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

/* ───── X. Guide sections ───── */
.rbx-guide-hero  { padding: 50px var(--rbx-pad-x) 30px; }
.rbx-guide-crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 22px; font-family: var(--rbx-font-mono); font-size: 11px; color: var(--rbx-ink-3); }
.rbx-guide-crumb .rbx-rule { flex: 1; }
.rbx-guide-hero-inner {
  display: grid; grid-template-columns: 1fr 0.7fr; gap: 48px; align-items: center;
}
.rbx-guide-h1 {
  font-family: var(--rbx-font-display);
  font-size: 72px; letter-spacing: -0.028em; line-height: 1;
  margin: 18px 0 0; max-width: 720px; font-weight: 700;
}
.rbx-guide-h1 em {
  font-family: var(--rbx-font-serif);
  font-style: italic; font-weight: 500;
}
.rbx-guide-author {
  margin-top: 30px;
  display: flex; align-items: center; gap: 16px;
}
.rbx-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;
}
.rbx-guide-body {
  padding: 30px var(--rbx-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;
}
.rbx-guide-toc { position: sticky; top: 110px; }
.rbx-guide-toc-inner { padding: 22px; border-radius: var(--rbx-r-lg); }
.rbx-guide-toc-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.rbx-guide-toc-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 8px;
  font-size: 12.5px; color: var(--rbx-ink-3);
}
.rbx-guide-toc-list li.is-active { color: var(--rbx-ink); font-weight: 600; }
.rbx-guide-toc-num { font-family: var(--rbx-font-mono); font-size: 10px; }
.rbx-guide-step {
  padding: 28px; border-radius: var(--rbx-r-lg);
  display: grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start;
  margin-bottom: 16px;
}
.rbx-guide-step .rbx-num { font-size: 36px; line-height: 1; }
.rbx-guide-step-label {
  font-family: var(--rbx-font-mono);
  font-size: 9.5px; color: var(--rbx-ink-3);
  margin-top: 6px; letter-spacing: 0.1em;
}
.rbx-guide-step-h3 {
  font-family: var(--rbx-font-display);
  font-size: 24px; margin: 0 0 10px;
  letter-spacing: -0.028em; font-weight: 700;
}
.rbx-guide-step-body { font-size: 14px; color: var(--rbx-ink-2); line-height: 1.65; }
.rbx-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(--rbx-ink);
}
.rbx-guide-callout-icon {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--rbx-ink); color: var(--rbx-paper);
  display: grid; place-items: center; font-size: 14px;
}
.rbx-guide-callout-h { font-size: 13.5px; font-weight: 600; }
.rbx-guide-callout-p { margin-top: 6px; font-size: 13.5px; color: var(--rbx-ink-2); line-height: 1.55; }
.rbx-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(--rbx-ink-2);
  margin-top: 16px;
}
.rbx-guide-warn-label {
  font-family: var(--rbx-font-mono);
  font-size: 10px; font-weight: 700;
  margin-right: 8px;
}
.rbx-pullquote {
  padding: 40px; border-radius: var(--rbx-r-lg); text-align: center; margin: 24px 0;
}
.rbx-pullquote-h {
  font-family: var(--rbx-font-serif);
  font-style: italic; font-weight: 500;
  font-size: 36px;
  max-width: 720px; margin: 0 auto;
  line-height: 1.15;
}
.rbx-pullquote-cite { margin-top: 20px; font-size: 12.5px; color: var(--rbx-ink-3); }

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

/* ───── Z. Info / Brand story / About ───── */
.rbx-info-hero { padding: 50px var(--rbx-pad-x) 60px; }
.rbx-info-h1 {
  font-family: var(--rbx-font-display);
  font-size: 86px; letter-spacing: -0.028em; line-height: 1;
  margin: 0; font-weight: 700;
}
.rbx-info-h1 em {
  font-family: var(--rbx-font-serif);
  font-style: italic; font-weight: 500;
}
.rbx-info-timeline {
  position: relative;
  padding-left: 32px;
}
.rbx-info-timeline::before {
  content: ""; position: absolute;
  left: 8px; top: 4px; bottom: 4px;
  width: 1px; background: var(--rbx-hair-2);
}
.rbx-info-timeline-item {
  position: relative;
  padding: 0 0 32px 0;
}
.rbx-info-timeline-item::before {
  content: ""; position: absolute;
  left: -28px; top: 6px;
  width: 13px; height: 13px; border-radius: 999px;
  background: var(--rbx-ink);
  border: 3px solid var(--rbx-paper);
}
.rbx-info-timeline-year {
  font-family: var(--rbx-font-mono);
  font-size: 12px; color: var(--rbx-ink-3);
  margin-bottom: 4px;
}
.rbx-info-timeline-h {
  font-family: var(--rbx-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.
 * Ambience preset = aurora (6 blobs) bleeds chroma behind the hero.
 */
/* min-height: 70vh ensures the ambience blob field has room to bloom.
 * Without this, hero collapses to ~500px and clips the 1000px-tall
 * blobs into near-invisible strips. */
.rbx-flavors-hero {
  padding: 60px var(--rbx-pad-x) 80px;
}
.rbx-flavors-hero > *:not(.rbx-ambience) {
  max-width: var(--rbx-max-w);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.rbx-flavors-hero-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 22px;
}
.rbx-flavors-h1 {
  font-family: var(--rbx-font-display);
  font-size: 76px; letter-spacing: -0.028em; line-height: 1.02;
  margin: 0; font-weight: 700; max-width: 700px;
}
.rbx-flavors-h1 em {
  font-family: var(--rbx-font-serif);
  font-style: italic; font-weight: 500;
}
.rbx-flavors-hero-sub {
  margin: 22px 0 0;
  font-size: 17px;
  color: var(--rbx-ink-2);
  line-height: 1.55;
  max-width: 540px;
}
.rbx-flavors-hero-card {
  padding: 24px;
  border-radius: var(--rbx-r-lg);
}
.rbx-flavors-hero-card-eyebrow {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rbx-ink-3);
  margin-bottom: 18px;
}
.rbx-flavors-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
.rbx-flavors-stats-num {
  font-size: 56px; line-height: 1; letter-spacing: -0.035em;
}
.rbx-flavors-stats-label {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rbx-ink-3);
}
.rbx-tldr-label-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--rbx-ink-3);
  margin-top: 6px;
}
.rbx-tldr-body {
  margin: 0;
  font-size: 15.5px;
  color: var(--rbx-ink-2);
  line-height: 1.55;
}

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

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

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

@media (max-width: 599px) {
  :root {
    --rbx-pad-x: var(--rbx-pad-x-sm);
  }
  .rbx-home-hero-h1 { font-size: 42px; }
  .rbx-section-h2  { font-size: 26px; }
  .rbx-devices-grid { grid-template-columns: 1fr; }
  .rbx-flavors-grid { grid-template-columns: 1fr; }
  .rbx-pdp-title { font-size: 30px; }
  .rbx-vs-h1, .rbx-flavors-h1, .rbx-guide-h1 { font-size: 38px; }
  .rbx-info-h1 { font-size: 42px; }
  .rbx-sole-grid { grid-template-columns: 1fr; }
  .rbx-pdp-tabs { display: none; }
  .rbx-flavors-filters { padding: 10px; gap: 8px; }
  .rbx-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)
   ═══════════════════════════════════════════════════════════════════ */
.rbx-pdp-cart {
  background: var(--rbx-glass);
  backdrop-filter: var(--rbx-glass-blur);
  -webkit-backdrop-filter: var(--rbx-glass-blur);
  border: 1px solid var(--rbx-glass-edge);
  border-radius: var(--rbx-r-lg);
  box-shadow: var(--rbx-glass-shadow);
  padding: 32px;
  margin: 30px auto;
  max-width: var(--rbx-max-w);
}
.rbx-pdp-cart-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: start;
}
.rbx-pdp-cart-imgwrap {
  position: relative;
  border-radius: var(--rbx-r-lg);
  background: var(--rbx-paper-deep);
  padding: 18px;
  overflow: hidden;
}
.rbx-pdp-cart-img {
  width: 100%; height: auto; border-radius: 18px;
  display: block;
}
.rbx-pdp-cart-buy {
  display: flex; flex-direction: column;
  gap: 18px;
}
.rbx-pdp-price-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.rbx-pdp-price {
  font-family: var(--rbx-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.035em;
  color: var(--rbx-ink);
}
.rbx-pdp-price-was {
  font-family: var(--rbx-font-mono);
  text-decoration: line-through;
  color: var(--rbx-ink-3);
  font-size: 16px;
}
.rbx-pdp-price-meta {
  font-family: var(--rbx-font-mono);
  font-size: 11px;
  color: var(--rbx-ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: auto;
}
.rbx-pdp-short {
  font-size: 14px; line-height: 1.55; color: var(--rbx-ink-2);
}
.rbx-pdp-short p { margin: 0 0 8px; }
.rbx-pdp-short ul { list-style: none; padding: 0; margin: 0 0 8px; }
.rbx-pdp-short li { padding-left: 16px; position: relative; margin-bottom: 4px; }
.rbx-pdp-short li::before { content: "·"; position: absolute; left: 6px; font-weight: 700; }

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

.rbx-pdp-group-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.rbx-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(--rbx-hair);
  border-radius: var(--rbx-r-pill);
  font-size: 12px; font-weight: 500; color: var(--rbx-ink-2);
  cursor: pointer;
  transition: background var(--rbx-dur-fast) var(--rbx-ease);
}
.rbx-pdp-group-tab:hover { background: rgba(255,255,255,.85); }
.rbx-pdp-group-tab.is-active {
  background: var(--rbx-ink);
  color: var(--rbx-paper);
  border-color: var(--rbx-ink);
}

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

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

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

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

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

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

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

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

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

/* ───── FF. Responsive overrides for PDP partials ───── */
@media (max-width: 1023px) {
  .rbx-pdp-cart-grid { grid-template-columns: 1fr; }
  .rbx-pdp-bcr { padding-top: 90px; }
  .rbx-pdp-h1 { font-size: 40px; }
  .rbx-pdp-quickspec { grid-template-columns: repeat(2, 1fr); }
  .rbx-pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
  .rbx-pdp-reviews-list { grid-template-columns: 1fr; gap: 12px; }
  .rbx-pdp-tabs { top: 14px; }
  .rbx-quick-spec dl { grid-template-columns: 1fr; gap: 4px 0; }
  .rbx-quick-spec dd { padding-bottom: 8px; border-bottom: 1px solid var(--rbx-hair); }
}
@media (max-width: 599px) {
  .rbx-pdp-h1 { font-size: 30px; }
  .rbx-pdp-quickspec { grid-template-columns: 1fr; }
  .rbx-pdp-related-grid { grid-template-columns: 1fr; }
  .rbx-pdp-cta-row { flex-direction: column; }
  .rbx-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="rbx-doc-root"> so existing
   njk pages automatically pick up Vivid typography + spacing.
   ═══════════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

/* PDP / page wrapper: place article above ambience */
.rbx-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 */
.rbx-sack-shell, .rbx-co-shell, .rbx-acct-shell, .rbx-ol-shell, .rbx-ol-wrap,
.rbx-search-shell, .rbx-orderpay-shell, .rbx-orderview-shell,
.rbx-article, .rbx-article-basic {
  max-width: var(--rbx-max-w);
  margin: 40px auto;
  padding: 0 var(--rbx-pad-x);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Responsive utility pages */
@media (max-width: 1023px) {
  .rbx-sack-shell { grid-template-columns: 1fr; }
  .rbx-acct-points-cards { grid-template-columns: 1fr; }
  .rbx-sack-line { grid-template-columns: 64px 1fr; row-gap: 8px; }
  .rbx-sack-line img { width: 64px; height: 64px; }
  .rbx-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;
  }
  .rbx-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) — */
.rbx-guide-hero-card {
  position: relative;
  padding: 16px;
  border-radius: 24px;
  aspect-ratio: 1 / 1.15;
  overflow: hidden;
}
.rbx-guide-hero-img {
  position: absolute;
  inset: 16px;
  border-radius: 18px;
}
.rbx-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;
}
.rbx-anno .rbx-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--rbx-ink); }
.rbx-guide-sub {
  margin-top: 22px;
  font-size: 17px;
  color: var(--rbx-ink-2);
  line-height: 1.55;
  max-width: 560px;
}
.rbx-guide-byline-name { font-size: 14px; font-weight: 600; }
.rbx-guide-byline-meta { font-size: 11px; color: var(--rbx-ink-3); margin-top: 3px; letter-spacing: 0.08em; }

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

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

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

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

/* — Warning block inside step body — */
.rbx-guide-warn .rbx-fixt { font-weight: 700; margin-right: 8px; letter-spacing: 0.08em; }
.rbx-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) — */
.rbx-guide-mode-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rbx-guide-mode {
  padding: 18px;
  border-radius: 14px;
}
.rbx-guide-mode .rbx-fixt {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--rbx-ink-3);
  margin-bottom: 8px;
}
.rbx-guide-mode p { font-size: 13px; color: var(--rbx-ink-2); line-height: 1.55; margin: 0; }

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

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

/* — FAQ block — */
.rbx-guide-faq { border-radius: 22px; overflow: hidden; padding: 0; }
.rbx-guide-faq-head { padding: 22px 24px; border-bottom: 1px solid var(--rbx-hair); }
.rbx-guide-faq-head .rbx-micro { color: var(--rbx-ink-3); margin-bottom: 6px; }
.rbx-guide-faq-head h2 {
  font-family: var(--rbx-font-display);
  font-size: 24px;
  letter-spacing: -0.024em;
  font-weight: 700;
  margin: 0;
}
.rbx-guide-faq details { border-bottom: 1px solid var(--rbx-hair); }
.rbx-guide-faq details:last-of-type { border-bottom: 0; }
.rbx-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;
}
.rbx-guide-faq summary::-webkit-details-marker { display: none; }
.rbx-guide-faq summary span { font-size: 18px; color: var(--rbx-ink-3); transition: transform .2s var(--rbx-ease); }
.rbx-guide-faq details[open] summary span { transform: rotate(45deg); }
.rbx-guide-faq .rbx-faq-a {
  padding: 0 24px 20px;
  font-size: 13.5px;
  color: var(--rbx-ink-2);
  line-height: 1.65;
}
.rbx-guide-faq .rbx-faq-a p:last-child { margin-bottom: 0; }

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

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

/* ═══════════════════════════════════════════════════════════════════
 * FF. Visual override patch 2 · 2026-05-15 · make D2 glass actually
 * read as "glass on chromatic ambience" 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 ambience 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 .rbx-ambience broke headless
 *     screenshots and conflicted with handoff per-section model.
 *
 * The authoritative ambience/glass/blob rules now live in section B-C
 * above.  Keep this section minimal — body bg transparent is still
 * required so html's --rbx-paper paint shows through the ambience
 * fade-tail.
 */
body.rbx { background: transparent !important; }
.rbx-doc-root { background: transparent; }
.rbx-grain { opacity: .22; }

/* — Stronger placeholder for hero device cards — */
.rbx-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(--rbx-paper-deep) !important;
  min-height: 200px;
}
.rbx-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
   .rbx-pdp-layout / .rbx-pdp-cart breakpoints stay coherent.
   ═══════════════════════════════════════════════════════════════════════ */

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

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

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

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

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

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

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

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

/* QTY input buttons disabled state */
.rbx-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. */
.rbx-pdp-mobile-cta {
  display: none;
}
@media (max-width: 1023px) {
  .rbx-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(--rbx-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;
  }
  .rbx-pdp-mobile-cta-left {
    display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1;
  }
  .rbx-pdp-mobile-cta-flavor {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--rbx-ink); font-weight: 500;
    overflow: hidden;
  }
  .rbx-pdp-mobile-cta-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .rbx-pdp-mobile-cta-dot {
    width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  }
  .rbx-pdp-mobile-cta-price {
    display: flex; align-items: baseline; gap: 8px;
  }
  .rbx-pdp-mobile-cta-price .rbx-num {
    font-family: var(--rbx-font-display);
    font-size: 18px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1;
  }
  .rbx-pdp-mobile-cta-list {
    text-decoration: line-through;
    color: var(--rbx-ink-3); font-size: 11px;
  }
  .rbx-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 */
  .rbx-pdp-section-tail { padding-bottom: 100px; }
}

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

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

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

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

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

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

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

/* Platform explainer */
.rbx-pdp-plat-wrap {
  position: relative; padding: 48px 44px; border-radius: 28px; overflow: hidden;
}
.rbx-pdp-plat-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%);
}
.rbx-pdp-plat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.rbx-pdp-plat-h2 {
  font-size: 52px; margin: 12px 0 0; line-height: 1;
}
.rbx-pdp-plat-body {
  margin-top: 22px; font-size: 15px; color: var(--rbx-ink-2);
  line-height: 1.6; max-width: 480px;
}
.rbx-pdp-plat-body-muted {
  margin-top: 14px; font-size: 13.5px; color: var(--rbx-ink-3); line-height: 1.55;
}
.rbx-pdp-plat-chart {
  padding: 24px; border-radius: 22px;
}
.rbx-pdp-plat-chart-label {
  font-size: 11px; color: var(--rbx-ink-3); letter-spacing: 0.1em;
}
.rbx-pdp-plat-svg { width: 100%; margin-top: 14px; }
@media (max-width: 1023px) {
  .rbx-pdp-plat-wrap { padding: 36px 28px; border-radius: 22px; }
  .rbx-pdp-plat-grid { grid-template-columns: 1fr; gap: 28px; }
  .rbx-pdp-plat-h2 { font-size: 38px; }
  .rbx-pdp-plat-body { font-size: 14px; }
}
@media (max-width: 599px) {
  .rbx-pdp-plat-wrap { padding: 26px 20px; }
  .rbx-pdp-plat-h2 { font-size: 30px; }
}

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

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

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

/* Quick spec mobile font tweak (4 big numbers don't fit ≤640px) */
@media (max-width: 599px) {
  .rbx-quick-spec-cell .rbx-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 .rbx-home-hero default */
.rbx-home-hero { padding: 140px var(--rbx-pad-x) 80px; }
@media (max-width: 1023px) {
  .rbx-home-hero { padding: 90px var(--rbx-pad-x) 40px; }
}

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

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

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

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

/* Flavor universe teaser */
.rbx-flavor-teaser-wrap {
  position: relative;
  padding: 56px 48px;
  border-radius: 32px;
  overflow: hidden;
}
.rbx-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%);
}
.rbx-flavor-teaser-h2 {
  font-size: 56px; margin: 12px 0 0; line-height: 0.98;
}
.rbx-flavor-teaser-bignum { font-size: 96px; }
.rbx-flavor-teaser-body {
  margin-top: 22px; font-size: 16px;
  color: var(--rbx-ink-2); line-height: 1.55; max-width: 460px;
}
.rbx-flavor-teaser-cta { margin-top: 30px; }
.rbx-flavor-families-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 1023px) {
  .rbx-flavor-teaser-wrap { padding: 36px 28px; }
  .rbx-flavor-teaser-h2 { font-size: 38px; }
  .rbx-flavor-teaser-bignum { font-size: 64px; }
  .rbx-flavor-families-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .rbx-flavor-teaser-wrap { padding: 26px 18px; border-radius: 22px; }
  .rbx-flavor-teaser-h2 { font-size: 28px; }
  .rbx-flavor-teaser-bignum { font-size: 48px; }
  .rbx-flavor-families-grid { grid-template-columns: 1fr; }
}

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

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

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

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

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

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

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

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

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

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

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

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

/* Filter chip bar inner */
.rbx-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;
}
.rbx-flavors-filters-label {
  font-size: 10.5px; color: var(--rbx-ink-3); letter-spacing: 0.1em;
  margin-left: 8px;
}
.rbx-flavors-filters-group { display: flex; gap: 6px; flex-wrap: wrap; }
.rbx-flavors-filters-divider {
  width: 1px; height: 22px; background: var(--rbx-hair-2);
}
.rbx-flavors-filters-meta {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.rbx-flavors-filters-meta .rbx-fixt { font-size: 11px; color: var(--rbx-ink-3); }

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

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

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

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

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

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

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

.rbx-reviews-card { padding: 24px; border-radius: 22px; }
.rbx-reviews-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.rbx-reviews-card-stars { display: flex; gap: 2px; }
.rbx-reviews-card-star { color: var(--rbx-ink); font-size: 14px; }
.rbx-reviews-card-star.is-empty { color: rgba(14,17,22,0.18); }
.rbx-reviews-card-date { font-size: 10px; color: var(--rbx-ink-3); }
.rbx-reviews-card-headline {
  font-size: 16px; font-weight: 600; margin: 0 0 8px;
}
.rbx-reviews-card-body {
  font-size: 13px; color: var(--rbx-ink-2);
  line-height: 1.55; margin: 0;
}
.rbx-reviews-card-rule { margin: 16px 0 12px; }
.rbx-reviews-card-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.rbx-reviews-card-author {
  display: flex; align-items: center; gap: 10px;
}
.rbx-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;
}
.rbx-reviews-card-name { font-size: 12.5px; font-weight: 600; }
.rbx-reviews-card-city { font-size: 9.5px; color: var(--rbx-ink-3); }

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

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

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

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

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

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

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

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

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

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

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

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

.rbx-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) {
  .rbx-vs-tldr {
    grid-template-columns: 1fr; gap: 14px; padding: 22px;
  }
}
.rbx-vs-tldr-meta { font-size: 10px; color: var(--rbx-ink-3); margin-top: 6px; }
.rbx-vs-tldr-body {
  font-size: 15.5px; color: var(--rbx-ink-2);
  line-height: 1.55; margin: 0;
}
.rbx-vs-tldr-score { text-align: center; }
.rbx-vs-tldr-score-n { font-size: 32px; }
.rbx-vs-tldr-score-tag { font-size: 10px; color: var(--rbx-ink-3); }

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

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

/* Price per puff */
.rbx-vs-ppp-wrap {
  position: relative; padding: 48px 44px; border-radius: 28px; overflow: hidden;
}
.rbx-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%);
}
.rbx-vs-ppp-h2 { font-size: 44px; margin: 12px 0 32px; }
.rbx-vs-ppp-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px;
}
.rbx-vs-ppp-card { padding: 28px; border-radius: 18px; }
.rbx-vs-ppp-label { font-size: 10px; color: var(--rbx-ink-3); }
.rbx-vs-ppp-num { font-size: 72px; margin-top: 10px; line-height: 1; }
.rbx-vs-ppp-sub { font-size: 10px; color: var(--rbx-ink-3); margin-top: 6px; }
.rbx-vs-ppp-note {
  margin: 16px 0 0; font-size: 12.5px;
  color: var(--rbx-ink-2); line-height: 1.55;
}
@media (max-width: 1023px) {
  .rbx-vs-ppp-wrap { padding: 32px 22px; border-radius: 22px; }
  .rbx-vs-ppp-h2 { font-size: 28px; margin: 10px 0 20px; }
  .rbx-vs-ppp-grid { grid-template-columns: 1fr; }
  .rbx-vs-ppp-num { font-size: 52px; }
}

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

.rbx-vs-decision-h3 {
  font-size: 32px; margin: 16px 0 0; line-height: 1.05;
}
@media (max-width: 1023px) {
  .rbx-vs-decision { padding: 26px; }
  .rbx-vs-decision-h3 { font-size: 22px; }
}
.rbx-vs-decision-list {
  margin-top: 22px; display: flex; flex-direction: column; gap: 12px;
  list-style: none; padding: 0;
}
.rbx-vs-decision-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px;
  font-size: 14px; color: var(--rbx-ink-2); line-height: 1.55;
}
.rbx-vs-decision-tick {
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--rbx-ink); color: var(--rbx-paper);
  display: grid; place-items: center;
  font-size: 10px; margin-top: 2px;
}
.rbx-vs-decision-bullet {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1px solid var(--rbx-hair-2);
  display: grid; place-items: center;
  font-size: 10px; margin-top: 2px; color: var(--rbx-ink-3);
}
.rbx-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 */
.rbx-guide-hero-padded { padding: 130px var(--rbx-pad-x) 30px; }
@media (max-width: 1023px) {
  .rbx-guide-hero-padded { padding: 90px var(--rbx-pad-x) 24px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.rbx-info-section { padding: 36px; border-radius: 22px; }
.rbx-info-section-tinted { position: relative; overflow: hidden; }
.rbx-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%);
}
.rbx-info-section-h2 { font-size: 34px; margin: 12px 0 14px; }
.rbx-info-section-h2-no-eb { margin-top: 0; }
.rbx-info-section-prose {
  font-size: 14.5px; color: var(--rbx-ink-2); line-height: 1.7;
}
.rbx-info-section-chips {
  margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap;
}
.rbx-info-section-chip { background: rgba(255,255,255,0.7); }
@media (max-width: 599px) {
  .rbx-info-section { padding: 22px; border-radius: 18px; }
  .rbx-info-section-h2 { font-size: 24px; }
}

.rbx-info-callout {
  padding: 36px; border-radius: 22px;
  position: relative; overflow: hidden;
}
.rbx-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%);
}
.rbx-info-callout-h2 { font-size: 36px; margin: 12px 0 18px; }
.rbx-info-callout-body {
  font-size: 14.5px; color: var(--rbx-ink-2);
  line-height: 1.7; max-width: 760px; margin: 0;
}
.rbx-info-callout-chips {
  margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 599px) {
  .rbx-info-callout { padding: 22px; }
  .rbx-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. */
.rbx-util-hero {
  position: relative; overflow: hidden;
  padding: 130px var(--rbx-pad-x) 40px;
}
@media (max-width: 1023px) {
  .rbx-util-hero { padding: 90px var(--rbx-pad-x) 30px; }
}

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

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

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

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

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

.rbx-sack-lines {
  padding: 28px; border-radius: 24px;
}
.rbx-sack-lines-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.rbx-sack-continue {
  font-size: 11px; color: var(--rbx-ink-3); text-decoration: none;
}
.rbx-sack-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(--rbx-signal-err);
  margin: 0 0 12px;
}

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

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

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

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

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

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

.rbx-search-results {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.rbx-search-card {
  padding: 0; border-radius: 18px;
  display: block; text-decoration: none;
  color: inherit; overflow: hidden;
  transition: transform 160ms var(--rbx-ease), box-shadow 160ms var(--rbx-ease);
}
.rbx-search-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--rbx-elev-2);
}
.rbx-search-card-img {
  position: relative;
  aspect-ratio: 1;
  background: var(--rbx-paper-deep);
  overflow: hidden;
  display: grid; place-items: center;
}
.rbx-search-card-img img {
  width: 88%; height: 88%; object-fit: contain;
}
.rbx-search-card-stock {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px;
  background: rgba(255,209,26,.85);
  font-family: var(--rbx-font-mono);
  font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  color: var(--rbx-ink);
  border-radius: 999px;
}
.rbx-search-card-body { padding: 16px 18px; }
.rbx-search-card-title {
  font-family: var(--rbx-font-display);
  font-size: 17px; font-weight: 600; line-height: 1.1;
  margin: 0 0 8px;
}
.rbx-search-card-meta {
  margin: 0 0 4px;
  font-size: 10px; color: var(--rbx-ink-3); letter-spacing: 0.04em;
}
.rbx-search-card-price {
  margin: 8px 0 0;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.rbx-search-card-was {
  font-size: 12px; text-decoration: line-through;
  color: var(--rbx-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. */
.rbx-tracking-hero { padding-bottom: 24px; }
.rbx-tracking-center {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 12px;
  text-align: center;
  display: flex; flex-direction: column; gap: 0;
}
.rbx-tracking-center .rbx-util-crumb { justify-content: center; }
.rbx-tracking-center .rbx-util-crumb .rbx-rule { max-width: 80px; }

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

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

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

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

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

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

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

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

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

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

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

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

/* Body grid: 1.6fr 1fr */
.rbx-checkout-body, .rbx-acct-shell .rbx-checkout-body {
  max-width: var(--rbx-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;
}
.rbx-acct-shell .rbx-checkout-body,
.rbx-acct-shell .rbx-acct-dash,
.rbx-acct-shell .rbx-acct-auth {
  /* my-account is sometimes single-column (auth screen) — its inline
     style="grid-template-columns:1fr" still wins. */
}
@media (max-width: 1023px) {
  .rbx-checkout-body, .rbx-acct-shell .rbx-checkout-body {
    grid-template-columns: 1fr; gap: 18px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.rbx-acct-points-cards {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1023px) {
  .rbx-acct-points-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .rbx-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. */
.rbx-checkout-inline-cta {
  margin-top: 16px;
  padding: 24px 26px;
  border-radius: 22px;
  background: var(--rbx-glass);
  backdrop-filter: var(--rbx-glass-blur);
  -webkit-backdrop-filter: var(--rbx-glass-blur);
  border: 1px solid var(--rbx-glass-edge);
  box-shadow: var(--rbx-elev-2);
}
.rbx-checkout-inline-cta-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rbx-hair);
}
.rbx-checkout-inline-cta-label {
  font-size: 11px; color: var(--rbx-ink-3); letter-spacing: 0.08em;
}
.rbx-checkout-inline-cta-num {
  font-family: var(--rbx-font-display);
  font-variant-numeric: tabular-nums;
  font-size: 32px; letter-spacing: -0.025em; font-weight: 700;
}
.rbx-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(--rbx-font-mono);
  font-size: 11px; color: var(--rbx-signal-err);
  line-height: 1.5;
}
.rbx-checkout-inline-cta-btn {
  width: 100%;
  height: 56px;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.02em;
}
.rbx-checkout-inline-cta-disclaim {
  margin: 14px 0 0;
  font-size: 10px;
  color: var(--rbx-ink-3);
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-align: center;
}

/* ───── TL;DR collapsible (added 2026-05-15 audit P2-T4) ───── */
.rbx-tldr-details {
  cursor: pointer;
}
.rbx-tldr-details > .rbx-tldr-summary {
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rbx-tldr-details > .rbx-tldr-summary::-webkit-details-marker { display: none; }
.rbx-tldr-details > .rbx-tldr-summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 14px;
  color: var(--rbx-ink-3);
  transition: transform 0.18s ease;
}
.rbx-tldr-details[open] > .rbx-tldr-summary::after { transform: rotate(180deg); }
.rbx-tldr-details[open] > .rbx-tldr-summary { margin-bottom: 12px; }
.rbx-tldr-hint {
  font-size: 10px;
  color: var(--rbx-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 `.rbx-guide-toc-list li` declarations (lines 1380
   and 2915) that both force a 2-column grid. info-toc-list items have no
   .rbx-guide-toc-num prefix span, so the grid would squeeze the title
   into the 24-26px first column and wrap each word vertically.
   ───────────────────────────────────────────────────────────────────── */
.rbx-info-toc-list li,
.rbx-guide-toc-list li.rbx-guide-toc-more {
  display: block;
  grid-template-columns: none;
  padding: 0;
}
.rbx-info-toc-list li a,
.rbx-guide-toc-list li.rbx-guide-toc-more {
  display: block;
  font-size: 12.5px;
  line-height: 1.55;
}
/* Anchor inside guide TOC (with .rbx-guide-toc-num span) must keep display:
   contents so the span lands in column 1 and the title text in column 2. */
.rbx-guide-toc-list li a {
  display: contents;
  color: inherit;
}
.rbx-info-toc-list li a {
  display: block;
  color: var(--rbx-ink-3);
  text-decoration: none;
}
.rbx-info-toc-list li a:hover {
  color: var(--rbx-ink);
}

/* ═══════════════════════════════════════════════════════════════════
   rbx-pdp-multibuy — per-PDP buy-more-save-more tiers (generated)
   Tokens via var(--rbx-*), scoped to .rbx-pdp-cart parent.
   ═══════════════════════════════════════════════════════════════════ */
.rbx-pdp-cart .rbx-pdp-multibuy { margin: 22px 0 6px; }
.rbx-pdp-cart .rbx-pdp-multibuy-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.rbx-pdp-cart .rbx-pdp-multibuy-eyebrow {
  font-family: var(--rbx-font-display, system-ui);
  font-size: 14px; font-weight: 700; color: var(--rbx-accent, #111);
  letter-spacing: 0.01em;
}
.rbx-pdp-cart .rbx-pdp-multibuy-meta {
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rbx-ink-3, var(--rbx-ink-muted, #888));
}
.rbx-pdp-cart .rbx-pdp-multibuy-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 16px;
}
.rbx-pdp-cart .rbx-pdp-tier {
  position: relative; appearance: none;
  background: var(--rbx-paper-2, var(--rbx-paper, #fff));
  border: 1px solid var(--rbx-rule, var(--rbx-bd, #ddd));
  border-radius: var(--rbx-r-md, 8px);
  padding: 20px 12px 14px; text-align: left; cursor: pointer;
  font-family: var(--rbx-font-sans, system-ui);
  color: var(--rbx-ink, #111);
  transition: transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; min-height: 240px;
}
.rbx-pdp-cart .rbx-pdp-tier:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--rbx-accent, #111);
  box-shadow: 0 8px 24px -14px rgba(0,0,0,0.18);
}
.rbx-pdp-cart .rbx-pdp-tier:disabled { opacity: 0.45; cursor: not-allowed; }
.rbx-pdp-cart .rbx-pdp-tier.is-ship {
  background: var(--rbx-accent-soft, rgba(0,0,0,0.04));
  border-color: var(--rbx-accent, #111);
}
.rbx-pdp-cart .rbx-pdp-tier.is-stockup {
  background: var(--rbx-accent-tint, var(--rbx-accent-soft, rgba(0,0,0,0.06)));
  border-color: var(--rbx-accent-deep, var(--rbx-accent-dark, var(--rbx-accent, #111)));
}
.rbx-pdp-cart .rbx-pdp-tier-flag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--rbx-accent, #111); color: #FFFFFF;
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 10px; padding: 4px 10px; border-radius: 999px; line-height: 1;
  white-space: nowrap; letter-spacing: 0.08em; text-transform: uppercase; z-index: 2;
}
.rbx-pdp-cart .rbx-pdp-tier.is-stockup .rbx-pdp-tier-flag {
  background: var(--rbx-accent-deep, var(--rbx-accent-dark, var(--rbx-accent, #111)));
}
.rbx-pdp-cart .rbx-pdp-tier-head { display: flex; align-items: baseline; gap: 8px; }
.rbx-pdp-cart .rbx-pdp-tier-num {
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 10px; letter-spacing: 0.1em; color: var(--rbx-ink-3, var(--rbx-ink-muted, #888));
  text-transform: uppercase;
}
.rbx-pdp-cart .rbx-pdp-tier-name {
  font-family: var(--rbx-font-display, system-ui);
  font-size: 14px; font-weight: 700;
  color: var(--rbx-ink, #111); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  text-transform: uppercase;
}
.rbx-pdp-cart .rbx-pdp-tier-qty { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.rbx-pdp-cart .rbx-pdp-tier-qty strong {
  font-family: var(--rbx-font-display, system-ui);
  font-weight: 700; font-size: 28px;
  color: var(--rbx-ink, #111); letter-spacing: -0.01em;
}
.rbx-pdp-cart .rbx-pdp-tier-qty span {
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 9.5px; letter-spacing: 0.1em;
  color: var(--rbx-ink-3, var(--rbx-ink-muted, #888));
  text-transform: uppercase;
}
.rbx-pdp-cart .rbx-pdp-tier-price {
  font-family: var(--rbx-font-display, system-ui);
  font-weight: 700; font-size: 18px;
  color: var(--rbx-accent, #111); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden;
}
.rbx-pdp-cart .rbx-pdp-tier-perk { display: flex; flex-direction: column; gap: 5px; }
.rbx-pdp-cart .rbx-pdp-tier-reason {
  font-family: var(--rbx-font-mono, ui-monospace);
  display: inline-block; background: transparent;
  border: 1px solid var(--rbx-rule, var(--rbx-bd, #ddd));
  color: var(--rbx-ink-2, #444);
  font-size: 8.5px; letter-spacing: 0.05em; padding: 3px 6px;
  border-radius: 999px; text-transform: uppercase; line-height: 1.15;
  width: fit-content; max-width: 100%; white-space: normal;
}
.rbx-pdp-cart .rbx-pdp-tier-reason.is-muted {
  color: var(--rbx-ink-4, var(--rbx-ink-faint, #aaa));
}
.rbx-pdp-cart .rbx-pdp-tier-reason.is-accent {
  background: var(--rbx-accent, #111); color: #fff; border-color: var(--rbx-accent, #111);
}
.rbx-pdp-cart .rbx-pdp-tier-reason.is-accent-deep {
  background: var(--rbx-accent-deep, var(--rbx-accent-dark, var(--rbx-accent, #111)));
  color: #fff;
  border-color: var(--rbx-accent-deep, var(--rbx-accent-dark, var(--rbx-accent, #111)));
}
.rbx-pdp-cart .rbx-pdp-tier-saving {
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 10px; font-weight: 700; color: #0d7f45;
  letter-spacing: 0.04em; text-transform: lowercase; white-space: nowrap;
}
.rbx-pdp-cart .rbx-pdp-tier-earn {
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 9.5px; color: var(--rbx-ink-4, var(--rbx-ink-faint, #aaa));
  letter-spacing: 0.04em; text-transform: lowercase;
  border-top: 1px dashed var(--rbx-rule-lite, var(--rbx-bd-lite, #eee));
  padding-top: 6px; margin-top: auto;
}
.rbx-pdp-cart .rbx-pdp-multibuy-foot {
  font-family: var(--rbx-font-mono, ui-monospace);
  font-size: 10px; color: var(--rbx-ink-4, var(--rbx-ink-faint, #aaa));
  margin: 12px 0 0; text-align: center; letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .rbx-pdp-cart .rbx-pdp-multibuy-grid { gap: 6px; margin-top: 14px; }
  .rbx-pdp-cart .rbx-pdp-tier {
    padding: 16px 8px 10px; gap: 6px; min-height: 215px;
  }
  .rbx-pdp-cart .rbx-pdp-tier-qty strong { font-size: 22px; }
  .rbx-pdp-cart .rbx-pdp-tier-qty span { font-size: 8px; }
  .rbx-pdp-cart .rbx-pdp-tier-price { font-size: 15px; }
  .rbx-pdp-cart .rbx-pdp-tier-name { font-size: 11px; }
  .rbx-pdp-cart .rbx-pdp-tier-num { font-size: 9px; }
  .rbx-pdp-cart .rbx-pdp-tier-reason { font-size: 8px; padding: 2px 5px; letter-spacing: 0.04em; }
  .rbx-pdp-cart .rbx-pdp-tier-saving { font-size: 9px; }
  .rbx-pdp-cart .rbx-pdp-tier-earn { font-size: 8.5px; padding-top: 5px; }
  .rbx-pdp-cart .rbx-pdp-tier-flag { font-size: 9px; padding: 3px 8px; top: -9px; }
}

/* ═══════════════════════════════════════════════════════════════════
   rbx-fc-* — per-flavor PDP (一鱼多吃 multi-format flavor pages)
   Reuses the device-PDP design language (glass cards, ink chips, tier
   cards) so flavor pages feel native. Tier styles mirror .rbx-pdp-tier
   but are scoped to .rbx-fc so the two never collide.
   ═══════════════════════════════════════════════════════════════════ */
.rbx-fc-hero { padding: 50px var(--rbx-pad-x) 8px; max-width: var(--rbx-max-w); margin: 0 auto; }
.rbx-fc-crumb { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; font-family: var(--rbx-font-mono); font-size: 11px; color: var(--rbx-ink-3); }
.rbx-fc-crumb-meta { letter-spacing: 0.06em; }
.rbx-fc-h1 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.06; letter-spacing: -0.03em; color: var(--rbx-ink); margin: 0 0 14px; max-width: 17ch; }
.rbx-fc-lead { max-width: 720px; font-size: 15px; line-height: 1.62; color: var(--rbx-ink-2); margin: 0 0 8px; }

.rbx-fc { padding: 0 var(--rbx-pad-x); }
.rbx-fc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; max-width: var(--rbx-max-w); margin: 24px auto 10px; }
.rbx-fc-media { position: sticky; top: 92px; }
.rbx-fc-imgwrap { position: relative; border-radius: var(--rbx-r-lg); background: var(--rbx-paper-deep); padding: 22px; overflow: hidden; aspect-ratio: 1/1; display: grid; place-items: center; }
.rbx-fc-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rbx-fc-flavor-tag { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; }
.rbx-fc-tag-dot { width: 12px; height: 12px; border-radius: 999px; }
.rbx-fc-tag-name { font-size: 13px; font-weight: 600; color: var(--rbx-ink); }
.rbx-fc-tag-meta { font-size: 9.5px; letter-spacing: 0.1em; color: var(--rbx-ink-3); }

.rbx-fc-buy { padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.rbx-fc-formats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.rbx-fc-format { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; background: rgba(255,255,255,.6); border: 1px solid var(--rbx-hair); border-radius: var(--rbx-r-md, 12px); cursor: pointer; transition: background var(--rbx-dur-fast) var(--rbx-ease), border-color 140ms ease; }
.rbx-fc-format:hover { background: rgba(255,255,255,.9); }
.rbx-fc-format.is-active { background: var(--rbx-ink); border-color: var(--rbx-ink); }
.rbx-fc-format.is-active .rbx-fc-format-label, .rbx-fc-format.is-active .rbx-fc-format-sub { color: var(--rbx-paper); }
.rbx-fc-format-label { font-size: 13px; font-weight: 600; color: var(--rbx-ink); }
.rbx-fc-format-sub { font-family: var(--rbx-font-mono); font-size: 10.5px; color: var(--rbx-ink-3); }

.rbx-fc-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rbx-fc-price { font-family: var(--rbx-font-display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 38px; letter-spacing: -0.035em; color: var(--rbx-ink); }
.rbx-fc-price-was { font-family: var(--rbx-font-mono); text-decoration: line-through; color: var(--rbx-ink-3); font-size: 16px; }

.rbx-fc-flavor-block { display: flex; flex-direction: column; gap: 12px; }
.rbx-fc-flavor-label { font-family: var(--rbx-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rbx-ink-3); margin: 0; }
.rbx-fc-flavor-label strong { color: var(--rbx-ink); }
.rbx-fc-flavor-sku { color: var(--rbx-ink-3); }
.rbx-fc-flavor-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.rbx-fc-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; background: rgba(255,255,255,.6); border: 1px solid var(--rbx-hair); border-radius: var(--rbx-r-pill); font-size: 12.5px; font-weight: 500; color: var(--rbx-ink); cursor: pointer; transition: background var(--rbx-dur-fast) var(--rbx-ease); }
.rbx-fc-chip:hover { background: rgba(255,255,255,.88); }
.rbx-fc-chip.is-selected { background: var(--rbx-ink); color: var(--rbx-paper); border-color: var(--rbx-ink); }

.rbx-fc-multibuy { margin: 4px 0; }
.rbx-fc-multibuy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
.rbx-fc-multibuy-eyebrow { font-size: 13px; font-weight: 700; color: var(--rbx-accent, var(--rbx-ink)); }
.rbx-fc-multibuy-meta { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbx-ink-3); }
.rbx-fc-multibuy-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.rbx-fc-tier { position: relative; appearance: none; background: var(--rbx-paper-2, var(--rbx-paper, #fff)); border: 1px solid var(--rbx-rule, var(--rbx-hair)); border-radius: var(--rbx-r-md, 12px); padding: 20px 12px 14px; text-align: left; cursor: pointer; color: var(--rbx-ink); transition: transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 210px; }
.rbx-fc-tier:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--rbx-accent, var(--rbx-ink)); box-shadow: 0 8px 24px -14px rgba(0,0,0,.18); }
.rbx-fc-tier:disabled { opacity: 0.45; cursor: not-allowed; }
.rbx-fc-tier.is-ship { background: var(--rbx-accent-soft, rgba(0,0,0,.04)); border-color: var(--rbx-accent, var(--rbx-ink)); }
.rbx-fc-tier.is-stockup { background: var(--rbx-accent-tint, var(--rbx-accent-soft, rgba(0,0,0,.06))); border-color: var(--rbx-accent-deep, var(--rbx-ink)); }
.rbx-fc-tier-flag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--rbx-accent, var(--rbx-ink)); color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 999px; line-height: 1; white-space: nowrap; letter-spacing: 0.08em; text-transform: uppercase; z-index: 2; }
.rbx-fc-tier-head { display: flex; align-items: baseline; gap: 8px; }
.rbx-fc-tier-num { font-size: 10px; letter-spacing: 0.1em; color: var(--rbx-ink-3); text-transform: uppercase; }
.rbx-fc-tier-name { font-family: var(--rbx-font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.rbx-fc-tier-qty { display: flex; align-items: baseline; gap: 5px; line-height: 1; }
.rbx-fc-tier-qty strong { font-family: var(--rbx-font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; }
.rbx-fc-tier-qty span { font-family: var(--rbx-font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--rbx-ink-3); text-transform: uppercase; }
.rbx-fc-tier-price { font-family: var(--rbx-font-display); font-weight: 700; font-size: 18px; color: var(--rbx-accent, var(--rbx-ink)); letter-spacing: -0.01em; white-space: nowrap; }
.rbx-fc-tier-perk { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.rbx-fc-tier-reason { font-family: var(--rbx-font-mono); display: inline-block; border: 1px solid var(--rbx-rule, var(--rbx-hair)); color: var(--rbx-ink-2); font-size: 8.5px; letter-spacing: 0.05em; padding: 3px 6px; border-radius: 999px; text-transform: uppercase; line-height: 1.15; width: fit-content; max-width: 100%; white-space: normal; }
.rbx-fc-tier.is-ship .rbx-fc-tier-reason, .rbx-fc-tier.is-stockup .rbx-fc-tier-reason { background: var(--rbx-ink); color: #fff; border-color: var(--rbx-ink); }
.rbx-fc-tier-saving { font-family: var(--rbx-font-mono); font-size: 10px; font-weight: 700; color: #0d7f45; letter-spacing: 0.04em; text-transform: lowercase; white-space: nowrap; }

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

/* taste profile */
.rbx-fc-profile-notes { font-size: 14.5px; line-height: 1.6; color: var(--rbx-ink-2); margin: 0 0 18px; max-width: 760px; }
.rbx-fc-profile-axes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.rbx-fc-axis { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rbx-fc-axis-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rbx-ink-3); }
.rbx-fc-axis-dots { display: flex; gap: 4px; }
.rbx-fc-axis-dot { width: 12px; height: 12px; border-radius: 999px; }
.rbx-fc-axis-num { font-size: 10px; color: var(--rbx-ink-3); }

/* formats explainer */
.rbx-fc-format-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.rbx-fc-format-card { padding: 16px; border-radius: 16px; text-decoration: none; transition: transform 120ms ease, border-color 140ms ease; }
.rbx-fc-format-card:hover { transform: translateY(-2px); border-color: var(--rbx-ink); }
.rbx-fc-format-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rbx-fc-format-card-name { font-weight: 600; font-size: 15px; color: var(--rbx-ink); }
.rbx-fc-format-card-price { font-family: var(--rbx-font-display); font-weight: 700; font-size: 18px; color: var(--rbx-ink); }
.rbx-fc-format-card-sub { font-size: 10.5px; letter-spacing: 0.06em; color: var(--rbx-ink-3); margin-top: 4px; display: block; }
.rbx-fc-format-note { font-size: 13.5px; line-height: 1.6; color: var(--rbx-ink-2); margin: 16px 0 0; max-width: 820px; }

/* siblings */
.rbx-fc-siblings { display: flex; flex-wrap: wrap; gap: 8px; }
.rbx-fc-sibling { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; text-decoration: none; transition: transform 120ms ease, border-color 140ms ease; }
.rbx-fc-sibling:hover { transform: translateY(-1px); border-color: var(--rbx-ink); }
.rbx-fc-sibling-dot { width: 10px; height: 10px; border-radius: 999px; }
.rbx-fc-sibling-name { font-size: 13px; font-weight: 500; color: var(--rbx-ink); }
.rbx-fc-sibling-meta { font-size: 9.5px; color: var(--rbx-ink-3); }

@media (max-width: 900px) {
  .rbx-fc-grid { grid-template-columns: 1fr; gap: 22px; }
  .rbx-fc-media { position: static; }
  .rbx-fc-buy { padding: 22px; }
  .rbx-fc-formats { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .rbx-fc-multibuy-grid { gap: 6px; }
  .rbx-fc-tier { padding: 16px 8px 10px; gap: 6px; min-height: 188px; }
  .rbx-fc-tier-qty strong { font-size: 22px; }
  .rbx-fc-tier-price { font-size: 15px; }
  .rbx-fc-tier-name { font-size: 11px; }
  .rbx-fc-profile-axes { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* clickable flavor cards (hub + home wall → per-flavor PDPs) */
.rbx-flavor-card-link { position: relative; cursor: pointer; transition: transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease; }
.rbx-flavor-card-link:hover { transform: translateY(-3px); border-color: var(--rbx-ink); box-shadow: 0 10px 28px -16px rgba(0,0,0,.22); }
.rbx-flavor-card-stretch { position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
a.rbx-flavor-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; }

/* ═══ rbx-ftiles — compact family-grouped flavor wall (home / hub / PDPs) ═══
   geekbar gb-ftile idiom: stamp family header + top-accent compact tiles,
   clean flavor-name anchor, device tag, mobile auto-fits 2-3 per row. */
.rbx-ftiles { display: flex; flex-direction: column; gap: 26px; }
.rbx-ftiles-group { }
.rbx-ftiles-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rbx-ftiles-stamp { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border: 1px solid; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; }
.rbx-ftiles-count { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rbx-ink-3); }
.rbx-ftiles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rbx-ftile { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 13px 13px 14px; background: var(--rbx-paper-deep); border: 1px solid var(--rbx-hair); border-top: 3px solid var(--fc, var(--rbx-ink)); border-radius: 12px; text-decoration: none; transition: transform .12s ease, box-shadow .14s ease, border-color .14s ease; }
a.rbx-ftile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.22); }
.rbx-ftile.is-here { outline: 2px solid var(--fc, var(--rbx-ink)); outline-offset: -1px; }
.rbx-ftile-tag { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fc, var(--rbx-ink-2)); font-weight: 700; }
.rbx-ftile-name { font-size: 14px; font-weight: 700; color: var(--rbx-ink); line-height: 1.2; }
@media (max-width: 600px) {
  .rbx-ftiles-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 7px; }
  .rbx-ftile { padding: 10px 10px 11px; }
  .rbx-ftile-name { font-size: 12.5px; }
  .rbx-ftile-tag { font-size: 8px; }
}

/* FAQ question headings (2026-07-29 audit).
   FAQ questions used to be bare text inside <summary>, so 11 info pages shipped
   with zero H3s and the question wording existed only inside FAQPage JSON-LD.
   The <h3> makes the question a real heading in the HTML outline; these rules
   keep it looking exactly as it did (summary is display:flex, so the heading is
   a single flex item and the ::after +/- marker is untouched). */
.rbx-faq summary .rbx-faq-qh,
.rbx-faq-item summary .rbx-faq-qh {
  font: inherit;
  color: inherit;
  margin: 0;
  letter-spacing: inherit;
}