/* =============================================================================
   RepBox — base.css (design system)
   ---------------------------------------------------------------------------
   00  Tokens
   01  Reset + document
   02  Typography
   03  Layout: container, section, grids, utilities
   04  Animated background
   05  Buttons
   06  Cards
   07  Badges, pills, price, rarity tags
   08  Item cards + contents list
   09  Odds bar + progress
   10  Ticker
   11  Nav
   12  Footer
   13  Accordion
   14  Stats, live dot, glow text
   15  Keyframes + motion utilities
   16  Reduced motion
   --- v2 shop additions (appended; every v1 class above is unchanged) ---
   17  Forms: field, label, input, select, textarea, check, choice, input-group
   18  Size picker + size tags
   19  Qty stepper
   20  Toast
   21  Nav cart button + count badge
   22  Sticky bottom bar
   23  Filter chips
   24  Timeline
   25  Tabs
   26  Summary rows
   27  Line item (cart row)
   28  Slot block (box detail) + piece card + mystery tile
   29  Price range, status pill, empty state, table-ish rows, skeleton
   30  v2 box card + unboxing card + ticker v2 text
   31  v2 keyframes + reduced motion
   Rule: one accent (#00FF9D). Rarity colors ONLY on [data-rarity] elements.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   00 TOKENS
   --------------------------------------------------------------------------- */
:root {
  --bg: #0A0A0C;
  --surface: #141418;
  --surface-2: #1B1B21;
  --surface-3: #23232B;
  --surface-4: #2B2B34;
  --border: rgba(255, 255, 255, .08);
  --border-hover: rgba(255, 255, 255, .22);
  --text: #F2F2F5;
  --text-2: #C4C4CC;
  --muted: #8A8A95;
  --muted-2: #7E7E8A;                 /* 4.9:1 on --bg, 4.6:1 on --surface: legal lines + hints stay readable */

  --accent: #00FF9D;
  --accent-rgb: 0, 255, 157;            /* every accent alpha in this file goes through rgba(var(--accent-rgb), x) */
  --accent-bright: #66FFC4;
  --accent-dim: rgba(var(--accent-rgb), .12);
  --accent-dim-2: rgba(var(--accent-rgb), .06);
  --accent-border: rgba(var(--accent-rgb), .38);
  --accent-glow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 24px rgba(var(--accent-rgb), .28);
  --accent-glow-lg: 0 0 0 1px rgba(var(--accent-rgb), .5), 0 0 48px rgba(var(--accent-rgb), .42), 0 0 96px rgba(var(--accent-rgb), .18);
  --accent-text-glow: 0 0 18px rgba(var(--accent-rgb), .55), 0 0 42px rgba(var(--accent-rgb), .22);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-pill: 999px;

  --font-display: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow Bold', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* rarity system: color, rgb triplet (for rgba()), glow (box-shadow value) */
  --r-common: #9A9AA3;      --r-common-rgb: 154, 154, 163;   --r-common-glow: 0 0 14px rgba(154, 154, 163, .22);
  --r-rare: #3B82F6;        --r-rare-rgb: 59, 130, 246;      --r-rare-glow: 0 0 18px rgba(59, 130, 246, .45);
  --r-epic: #A855F7;        --r-epic-rgb: 168, 85, 247;      --r-epic-glow: 0 0 20px rgba(168, 85, 247, .5);
  --r-legendary: #EC4899;   --r-legendary-rgb: 236, 72, 153; --r-legendary-glow: 0 0 22px rgba(236, 72, 153, .55);
  --r-mythic: #F5B700;      --r-mythic-rgb: 245, 183, 0;     --r-mythic-glow: 0 0 28px rgba(245, 183, 0, .65);

  /* fallback rarity (overridden by [data-rarity] on the element) */
  --rc: var(--r-common);
  --rc-rgb: var(--r-common-rgb);
  --rg: var(--r-common-glow);

  --nav-h: 60px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .22s;
  color-scheme: dark;
}
@media (min-width: 768px) {
  :root { --nav-h: 68px; --gutter: 32px; }
}

/* Any element with data-rarity picks up its color as --rc / --rc-rgb / --rg */
[data-rarity="common"]    { --rc: var(--r-common);    --rc-rgb: var(--r-common-rgb);    --rg: var(--r-common-glow); }
[data-rarity="rare"]      { --rc: var(--r-rare);      --rc-rgb: var(--r-rare-rgb);      --rg: var(--r-rare-glow); }
[data-rarity="epic"]      { --rc: var(--r-epic);      --rc-rgb: var(--r-epic-rgb);      --rg: var(--r-epic-glow); }
[data-rarity="legendary"] { --rc: var(--r-legendary); --rc-rgb: var(--r-legendary-rgb); --rg: var(--r-legendary-glow); }
[data-rarity="mythic"]    { --rc: var(--r-mythic);    --rc-rgb: var(--r-mythic-rgb);    --rg: var(--r-mythic-glow); }

/* ---------------------------------------------------------------------------
   01 RESET + DOCUMENT
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  background: var(--bg);
}
/* NOTE: body has NO background on purpose. html paints the base colour; the fixed .bg
   layer (z-index -1) draws the grid + drifting blobs above the canvas but below body's
   content. A body background would paint over it and hide the animated background. */
body {
  min-height: 100dvh;
  background: transparent; /* explicit: a host wrapper (e.g. claude.ai artifacts) sets a light body background */
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
}
img, svg, video, canvas { display: block; max-width: 100%; }
svg { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul[class], ol[class] { list-style: none; padding: 0; }
strong, b { font-weight: 700; }
::selection { background: var(--accent); color: var(--bg); text-shadow: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .18); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
hr, .hr { border: 0; height: 1px; background: var(--border); }
.tnum, .price, .stat__value, .item-card__value, .ticker__value, [data-countup] { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   02 TYPOGRAPHY
   --------------------------------------------------------------------------- */
.display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .92;
  color: var(--text);
  overflow-wrap: break-word;
}
/* hero headline: huge at 375 (2 lines of ~13 chars fit), capped on desktop */
.display { font-size: clamp(3.75rem, 17vw, 8.75rem); line-height: .88; letter-spacing: .005em; }
.h1 { font-size: clamp(2.75rem, 10vw, 5rem); }
.h2 { font-size: clamp(2.25rem, 7.5vw, 3.5rem); }
.h3 { font-size: clamp(1.5rem, 5vw, 2.125rem); line-height: 1; }
.h4 { font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1; letter-spacing: .03em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--bar::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

.lead { font-size: clamp(1rem, 2.6vw, 1.15rem); line-height: 1.55; color: var(--text-2); max-width: 56ch; }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
p { color: var(--text-2); }
.text-accent { color: var(--accent); }
.text-muted { color: var(--muted); }
.text-2 { color: var(--text-2); }
.text-white { color: var(--text); }
.upper { text-transform: uppercase; letter-spacing: .08em; }
.center { text-align: center; }
.font-display { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.measure { max-width: 60ch; }

/* ---------------------------------------------------------------------------
   03 LAYOUT
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1400px; }
.container--narrow { max-width: 820px; }

.section { padding-block: clamp(48px, 8vw, 96px); position: relative; }
.section--tight { padding-block: clamp(32px, 5vw, 56px); }
.section--flush { padding-block: 0; }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(20px, 4vw, 36px);
}
.section__head > div { min-width: 0; }
.section__title { margin-top: 8px; }
.section__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.section__link::after { content: '\2192'; font-size: 14px; transition: transform var(--dur) var(--ease-out); }
.section__link:hover { text-decoration: none; }
@media (hover: hover) {
  .section__link:hover { text-shadow: var(--accent-text-glow); }
  .section__link:hover::after { transform: translateX(4px); }
}

.grid { display: grid; gap: 12px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid--items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.grid--items-sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 108px), 1fr)); gap: 8px; }
@media (min-width: 768px) { .grid { gap: 16px; } .grid--items-sm { gap: 10px; } }
@media (min-width: 1024px) { .grid { gap: 20px; } }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.row--nowrap { flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--lg { gap: 24px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* .hide-mobile / .hide-desktop: put them on a plain wrapper (div/span), never on a
   .row/.grid/.stack element — `revert` restores the UA display (block/inline), not flex/grid. */
.hide-mobile { display: none !important; }
@media (min-width: 768px) {
  .hide-mobile { display: revert !important; }
  .hide-desktop { display: none !important; }
}

/* ---------------------------------------------------------------------------
   04 ANIMATED BACKGROUND
   <div class="bg" aria-hidden="true"><i class="bg__grid"></i><i class="bg__blob bg__blob--a"></i>
   <i class="bg__blob bg__blob--b"></i><i class="bg__blob bg__blob--c"></i></div>
   Transform-only drift; radial gradients (no filters) so phones stay smooth.
   --------------------------------------------------------------------------- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 10%, transparent 100%);
}
.bg__blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.bg__blob--a {
  width: 80vmax; height: 80vmax;
  left: -30vmax; top: -40vmax;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), .14) 0%, rgba(var(--accent-rgb), .05) 35%, transparent 65%);
  animation: bgDriftA 80s ease-in-out infinite alternate;
}
.bg__blob--b {
  width: 70vmax; height: 70vmax;
  right: -35vmax; top: 25vh;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), .08) 0%, rgba(var(--accent-rgb), .025) 40%, transparent 65%);
  animation: bgDriftB 95s ease-in-out infinite alternate;
}
.bg__blob--c {
  width: 90vmax; height: 90vmax;
  left: 5vw; bottom: -60vmax;
  background: radial-gradient(circle at center, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 40%, transparent 65%);
  animation: bgDriftC 110s ease-in-out infinite alternate;
}
.bg__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}
@keyframes bgDriftA { to { transform: translate3d(14vw, 10vh, 0) scale(1.18); } }
@keyframes bgDriftB { to { transform: translate3d(-12vw, -14vh, 0) scale(1.12); } }
@keyframes bgDriftC { to { transform: translate3d(-10vw, -8vh, 0) scale(1.1); } }

/* ---------------------------------------------------------------------------
   05 BUTTONS
   .btn .btn--primary|--ghost|--surface|--danger  .btn--sm|--lg  .btn--block
   --------------------------------------------------------------------------- */
.btn {
  --btn-h: 44px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 2px 20px 0;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface-3);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .16s var(--ease-out),
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease;
}
.btn:hover { text-decoration: none; }
/* every hover colour/glow lives under (hover: hover): a tap on a phone must never leave a
   button stuck bright (STYLEGUIDE rule 8). :active and :focus-visible stay universal. */
@media (hover: hover) {
  .btn:hover { background: var(--surface-4); transform: translateY(-1px); }
}
.btn:active { transform: scale(.97) translateY(0); transition-duration: .08s; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn--primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18), 0 0 26px rgba(var(--accent-rgb), .38), 0 6px 14px rgba(0, 0, 0, .35);
}
.btn--primary:active { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 0 18px rgba(var(--accent-rgb), .45); }

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .2);
  color: var(--text);
}
.btn--surface { background: var(--surface-2); border-color: var(--border); }
.btn--accent-outline { background: var(--accent-dim-2); border-color: var(--accent-border); color: var(--accent); }
@media (hover: hover) {
  .btn--primary:hover {
    background: var(--accent-bright);
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 40px rgba(var(--accent-rgb), .6), 0 8px 18px rgba(0, 0, 0, .4);
  }
  .btn--ghost:hover {
    background: var(--accent-dim-2);
    border-color: var(--accent-border);
    color: var(--accent);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), .14);
  }
  .btn--surface:hover { background: var(--surface-3); border-color: var(--border-hover); }
  .btn--accent-outline:hover { background: var(--accent-dim); box-shadow: var(--accent-glow); }
}

/* --sm keeps the 44px tap minimum (BRIEF); it reads smaller via font + padding, not height */
.btn--sm { --btn-h: 44px; padding: 2px 14px 0; font-size: 16px; letter-spacing: .05em; }
.btn--lg { --btn-h: 56px; padding: 2px 30px 0; font-size: 24px; letter-spacing: .07em; }
.btn--xl { --btn-h: 64px; padding: 2px 36px 0; font-size: 28px; letter-spacing: .07em; border-radius: 10px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: var(--btn-h); }

/* disabled = clearly gray, never a dimmer green (one accent rule) */
.btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"] {
  pointer-events: none;
  background: var(--surface-3);
  border-color: var(--border);
  color: var(--muted);
  box-shadow: none;
  text-shadow: none;
  transform: none;
}
/* aria-disabled keeps the gray look but STAYS clickable: it is the "not yet" state whose click handler explains
   what is missing (the cart's 'Pick your sizes first'); only [disabled] / .is-disabled swallow the pointer */
.btn[aria-disabled="true"] { pointer-events: auto; cursor: not-allowed; }
.btn.is-loading { pointer-events: none; color: transparent; }
/* spinner: 3/4 faint track + one bright arc, reads as a spinner even when frozen */
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 12, .25);
  border-top-color: var(--bg);
  animation: spin .8s linear infinite;
}
.btn--ghost.is-loading::after, .btn--surface.is-loading::after, .btn--accent-outline.is-loading::after {
  border-color: rgba(var(--accent-rgb), .25);
  border-top-color: var(--accent);
}
/* pulsing glow for THE primary CTA on a page (use once). The strong glow sits on a ::before
   (the ::after is the loading spinner) and only its opacity animates, so the breathing runs on
   the compositor instead of repainting a box-shadow every frame. */
.btn--pulse::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 44px rgba(var(--accent-rgb), .65);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  animation: btnPulse 2.4s ease-in-out infinite;
}
.btn--pulse[disabled]::before, .btn--pulse.is-disabled::before, .btn--pulse[aria-disabled="true"]::before { display: none; }
.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-group--stack { flex-direction: column; }
@media (min-width: 480px) { .btn-group--stack { flex-direction: row; } }

/* ---------------------------------------------------------------------------
   06 CARDS
   --------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition:
    border-color var(--dur) ease,
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease,
    background-color var(--dur) ease;
}
/* hover lifts only on real hover devices, so a tap on a phone never leaves a card stuck "lifted" */
@media (hover: hover) {
  .card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow), 0 0 30px rgba(var(--accent-rgb), .05);
  }
  .card--static:hover { transform: none; box-shadow: none; border-color: var(--border); }
}
.card--glow { border-color: var(--accent-border); box-shadow: var(--accent-glow); }
@media (hover: hover) { .card--glow:hover { border-color: rgba(var(--accent-rgb), .6); box-shadow: var(--accent-glow-lg), var(--shadow); } }
.card--raised { background: var(--surface-2); }
.card--link { display: block; color: inherit; cursor: pointer; }
.card--link:hover { text-decoration: none; }
.card__body { padding: 16px; }
.card__head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__foot { padding: 12px 16px; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .card__body { padding: 20px; } }
/* thin top accent line for "featured" cards */
.card--top::before {
  content: '';
  position: absolute; top: -1px; left: 16px; right: 16px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .6);
}

/* ---------------------------------------------------------------------------
   07 BADGES, PILLS, PRICE, RARITY TAGS
   --------------------------------------------------------------------------- */
.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.pill { border-radius: var(--radius-pill); padding: 6px 12px; }
.badge--accent, .pill--accent { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }
.badge--solid, .pill--solid { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 14px rgba(var(--accent-rgb), .45); }
.badge--dark, .pill--dark { background: rgba(10, 10, 12, .82); border-color: rgba(255, 255, 255, .14); color: var(--text); backdrop-filter: blur(6px); }
.badge--outline, .pill--outline { background: transparent; }
/* soft: a quiet label that also sits legibly on top of a photo (cards, gallery) */
.badge--soft, .pill--soft { background: rgba(10, 10, 12, .66); border-color: rgba(255, 255, 255, .16); color: var(--text); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pill--lg { padding: 8px 16px; font-size: 12px; }
.pill--btn { min-height: 44px; padding-inline: 16px; cursor: pointer; transition: background var(--dur), border-color var(--dur), color var(--dur); }
@media (hover: hover) { .pill--btn:hover { border-color: var(--border-hover); color: var(--text); } }
.pill--btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 14px rgba(var(--accent-rgb), .45); }
.badge .live-dot, .pill .live-dot { margin-right: 2px; }

.price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), .35);
  white-space: nowrap;
}
.price--sm { font-size: 1.25rem; text-shadow: none; }
.price--lg { font-size: clamp(2.5rem, 9vw, 4rem); text-shadow: var(--accent-text-glow); }
.price--plain { text-shadow: none; }
.price--muted { color: var(--text); text-shadow: none; }
.price small, .price__unit { font-size: .55em; letter-spacing: .06em; color: var(--muted); text-shadow: none; }
.price s, .price__was { font-size: .5em; color: var(--muted-2); text-decoration: line-through; margin-left: 6px; }

.rarity-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--rc-rgb), .35);
  background: rgba(var(--rc-rgb), .1);
  color: var(--rc);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.rarity-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rc);
  box-shadow: 0 0 8px var(--rc);
}
.rarity-tag--lg { font-size: 12px; padding: 5px 12px; }
.rarity-tag--bare { border: 0; background: none; padding: 0; }
.rarity-text { color: var(--rc, var(--text)); }

/* ---------------------------------------------------------------------------
   08 ITEM CARDS + CONTENTS LIST
   .item-card[data-rarity] > .item-card__art + .item-card__body
   Works from ~104px (spinner on phones) to ~220px (grids).
   --------------------------------------------------------------------------- */
.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid rgba(var(--rc-rgb), .38);
  border-radius: var(--radius);
  box-shadow: var(--rg);
  overflow: hidden;
  color: var(--text);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) ease,
    border-color var(--dur) ease;
}
.item-card::after {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--rc), transparent);
  opacity: .9;
  pointer-events: none;
}
.item-card.is-active {
  transform: translateY(-3px);
  border-color: rgba(var(--rc-rgb), .75);
  box-shadow: 0 0 0 1px rgba(var(--rc-rgb), .2), 0 0 30px rgba(var(--rc-rgb), .38), 0 14px 26px rgba(0, 0, 0, .45);
}
@media (hover: hover) {
  .item-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--rc-rgb), .75);
    box-shadow: 0 0 0 1px rgba(var(--rc-rgb), .2), 0 0 30px rgba(var(--rc-rgb), .38), 0 14px 26px rgba(0, 0, 0, .45);
  }
  /* .is-static (spinner strip): no motion AND no brightening as cards pass under the cursor */
  .item-card.is-static:hover { transform: none; border-color: rgba(var(--rc-rgb), .38); box-shadow: var(--rg); }
}
.item-card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(var(--rc-rgb), .22) 0%, transparent 70%),
    var(--surface-2);
  padding: 8%;
}
.item-card__art svg { width: 100%; height: 100%; }
.item-card__rarity {
  position: absolute; top: 6px; left: 6px;
  z-index: 1;
}
.item-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(var(--rc-rgb), .14);
}
.item-card__name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
  overflow-wrap: anywhere;
}
.item-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.item-card__value {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--accent);
}
/* odds are a headline feature: never below 12px */
.item-card__odds { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
/* sizes */
.item-card--sm .item-card__body { padding: 6px 8px 8px; gap: 2px; }
.item-card--sm .item-card__name { font-size: 11px; }
.item-card--sm .item-card__value { font-size: 16px; }
.item-card--sm .item-card__odds { font-size: 12px; }
.item-card--lg .item-card__body { padding: 12px 14px 14px; gap: 6px; }
.item-card--lg .item-card__name { font-size: 14px; }
.item-card--lg .item-card__value { font-size: 24px; }
.item-card--lg .item-card__odds { font-size: 13px; }
/* horizontal strip of small item cards (box card "top items" strip) */
.item-strip { display: flex; gap: 8px; }
.item-strip .item-card { flex: 1 1 0; min-width: 0; }
.item-strip--scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.item-strip--scroll::-webkit-scrollbar { display: none; }
.item-strip--scroll .item-card { flex: 0 0 120px; }

/* box art (RB.boxArt) + box card (RB.renderBoxCard) */
.box-art { width: 100%; height: auto; overflow: visible; }
.box-card { display: flex; flex-direction: column; overflow: hidden; }
/* 5:4 art area, crate anchored to the bottom edge (svg preserveAspectRatio xMidYMax) so the
   floor glow sits on the card's seam and the crate fills ~60% of the width */
.box-card__art {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(var(--accent-rgb), .12), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border);
}
/* the crate is absolutely positioned inside the panel (8% side inset, 4% top) so the panel's
   aspect ratio is the panel's real height: an in-flow svg grew the box to its own taller ratio */
.box-card__art .box-art { position: absolute; left: 8%; top: 4%; width: 84%; height: 96%; transition: transform .4s var(--ease-out); }
/* single-column phones: a 5:4 panel was 328px of crate per card (six cards = 3,300px of near-identical
   cubes). 3:2 (~227px at 375) keeps the crate ~56% of the width and the whole card under one viewport. */
@media (max-width: 599px) {
  .box-card__art { aspect-ratio: 3 / 2; }
  .box-card__art .box-art { left: 14%; top: 1%; width: 72%; height: 99%; }
}
@media (hover: hover) { .box-card:hover .box-card__art .box-art { transform: translateY(-5px) scale(1.03); } }
/* the top-pull strip drops to 2 cards when the card is too narrow for 3 legible names
   (e.g. 4 columns at 1280). Container query; browsers without it keep 3. */
.box-card__body { container-type: inline-size; }
@container (max-width: 303px) { .box-card__strip .item-card:nth-child(n + 3) { display: none; } }
.box-card__max { position: absolute; top: 10px; left: 10px; z-index: 1; }
.box-card__max b { color: var(--accent); }
.box-card__tier { position: absolute; top: 10px; right: 10px; z-index: 1; }
.box-card__body { display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 16px; flex: 1 1 auto; }
.box-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
/* the tagline is the pitch: body floor (14px) and one step up the text ladder */
.box-card__tagline { font-size: 14px; color: var(--text-2); margin-top: 6px; line-height: 1.4; }
.box-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
@media (min-width: 768px) { .box-card__body { padding: 18px 18px 20px; } }

/* contents list (RB.renderContents) */
.contents { display: flex; flex-direction: column; gap: 6px; }
.contents__row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color var(--dur), background-color var(--dur), transform var(--dur) var(--ease-out);
}
@media (hover: hover) { .contents__row:hover { border-color: rgba(var(--rc-rgb), .5); background: var(--surface-2); transform: translateX(2px); } }
.contents__row.is-winner { border-color: rgba(var(--rc-rgb), .8); box-shadow: var(--rg); background: rgba(var(--rc-rgb), .06); }
.contents__art { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; }
.contents__art svg { width: 100%; height: 100%; }
.contents__info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* full names, never an ellipsis on the transparency surface: 2-line clamp */
.contents__name {
  font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.contents__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.contents__value { font-family: var(--font-display); font-size: 19px; line-height: 1; letter-spacing: .02em; color: var(--accent); }
.contents__odds { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: 0 0 auto; }
.contents__pct { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: .01em; }
.contents__bar { width: 56px; height: 4px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.contents__bar i { display: block; height: 100%; width: var(--w, 0%); min-width: 2px; background: var(--rc); box-shadow: 0 0 8px var(--rc); border-radius: 4px; }
@media (min-width: 768px) {
  .contents__row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; padding: 10px 16px 10px 10px; }
  .contents__art { width: 56px; height: 56px; }
  .contents__name { font-size: 15px; }
  .contents__bar { width: 96px; }
}

/* ---------------------------------------------------------------------------
   09 ODDS BAR + PROGRESS
   --------------------------------------------------------------------------- */
.odds-bar { display: flex; flex-direction: column; gap: 12px; }
.odds-bar__track {
  display: flex;
  gap: 2px;
  height: 12px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.odds-bar__seg {
  flex: 0 1 auto;
  min-width: 4px;
  height: 100%;
  border-radius: 3px;
  background: var(--rc);
  box-shadow: 0 0 10px rgba(var(--rc-rgb), .7);
  transition: width .8s var(--ease-out);
}
.odds-bar__seg:first-child { border-radius: 6px 3px 3px 6px; }
.odds-bar__seg:last-child { border-radius: 3px 6px 6px 3px; }
.odds-bar__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.odds-bar__key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-2);
}
.odds-bar__key i { width: 8px; height: 8px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 8px rgba(var(--rc-rgb), .8); }
.odds-bar__key b { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.odds-bar--lg .odds-bar__track { height: 16px; }
.odds-bar--lg .odds-bar__key { font-size: 13px; }

.progress {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: var(--value, 0%);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .55), var(--accent));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .65);
  transition: width .8s var(--ease-out);
}
.progress--lg { height: 12px; }
.progress--shimmer .progress__fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.8s ease-in-out infinite;
}
.progress--shimmer .progress__fill { position: relative; overflow: hidden; }
.progress__label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.progress__label b { color: var(--accent); }

/* ---------------------------------------------------------------------------
   10 TICKER
   <div class="ticker" id="drops"><span class="ticker__live"><i class="live-dot"></i>Live</span>
   <div class="ticker__viewport"><div class="ticker__track"></div></div></div>
   RB.ticker(el) builds viewport/track if missing and scrolls it.
   --------------------------------------------------------------------------- */
.ticker {
  position: relative;
  height: 64px;
  overflow: hidden;
  background: rgba(20, 20, 24, .55);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  contain: layout paint;
}
.ticker--bare { background: transparent; border: 0; }
.ticker--card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ticker__live {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 var(--gutter);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 24px rgba(10, 10, 12, .9);
  pointer-events: none;
}
/* RB.ticker() sets --ticker-offset to the live label's measured width */
.ticker__viewport {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: var(--ticker-offset, 0px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 48px), transparent 100%);
}
/* padding-left >= the mask fade so the first chip is never ghosted on first paint;
   RB.ticker reads this padding and accounts for it when recycling chips */
.ticker__track {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  gap: 8px;
  padding-left: 32px;
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}
.ticker__chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px 0 6px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid rgba(var(--rc-rgb), .35);
  box-shadow: 0 0 16px rgba(var(--rc-rgb), .12), inset 0 0 0 1px rgba(255, 255, 255, .02);
  white-space: nowrap;
  color: var(--text);
}
.ticker__chip.is-new { animation: chipIn .55s var(--ease-out) both; }
.ticker__chip[data-rarity="mythic"], .ticker__chip[data-rarity="legendary"] {
  background: linear-gradient(90deg, rgba(var(--rc-rgb), .12), var(--surface) 60%);
}
.ticker__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.ticker__text { display: flex; flex-direction: column; line-height: 1.15; gap: 2px; min-width: 0; }
.ticker__user { font-size: 12px; font-weight: 500; color: var(--muted); }
/* chips carry the item's compact name (RB.shortName); desktop keeps it on one line */
.ticker__item { font-size: 12.5px; font-weight: 600; color: var(--rc); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
/* base .ticker__value sits BEFORE the phone/tablet overrides so their font-size wins by source order */
.ticker__value {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(var(--accent-rgb), .5);
  padding-left: 4px;
  border-left: 1px solid var(--border);
  margin-left: 2px;
}
@media (min-width: 768px) { .ticker__item { max-width: 230px; } }
/* tablets / phones: tighter chips; the item name wraps to two lines instead of clipping */
@media (max-width: 767px) {
  .ticker__live { padding: 0 10px 0 var(--gutter); font-size: 10px; letter-spacing: .12em; gap: 6px; }
  .ticker__chip { gap: 8px; height: 48px; padding: 0 10px 0 6px; }
  .ticker__avatar { width: 24px; height: 24px; font-size: 9px; }
  .ticker__text { gap: 1px; }
  .ticker__item {
    max-width: 150px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.15;
  }
  .ticker__value { font-size: 18px; }
}
/* phones: restack the chip (user + value on line 1, item below, no avatar) so chips stay
   ~100-150px wide and the strip reads as a stream even next to a wide live label */
@media (max-width: 479px) {
  .ticker__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent 100%);
  }
  .ticker__track { padding-left: 16px; }
  .ticker__chip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'user value' 'item item';
    align-content: center;
    column-gap: 10px;
    row-gap: 1px;
    padding: 0 10px;
  }
  .ticker__avatar { display: none; }
  .ticker__text { display: contents; }
  .ticker__user { grid-area: user; align-self: end; }
  .ticker__item { grid-area: item; max-width: 140px; }
  .ticker__value { grid-area: value; align-self: end; font-size: 17px; border-left: 0; padding-left: 0; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   11 NAV
   --------------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.logo:hover { text-decoration: none; }
.logo em { font-style: normal; color: var(--accent); text-shadow: var(--accent-text-glow); }
.logo--lg { font-size: 40px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(10, 10, 12, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled { background: rgba(10, 10, 12, .9); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 8px; }
.nav__logo { margin-right: 4px; }
.nav__links { display: none; align-items: center; gap: 2px; margin-left: 16px; }
.nav__links a, .nav__menu a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur), background-color var(--dur);
}
.nav__links a.is-active, .nav__menu a.is-active { color: var(--accent); background: var(--accent-dim-2); }
.nav__links a:hover, .nav__menu a:hover { text-decoration: none; }
@media (hover: hover) { .nav__links a:hover, .nav__menu a:hover { color: var(--accent); background: var(--accent-dim-2); } }
.nav__spacer { flex: 1 1 auto; }
.nav__cta { flex: 0 0 auto; }
.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur), background-color var(--dur);
}
@media (hover: hover) { .nav__toggle:hover { border-color: var(--border-hover); } }
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .ico-close { display: none; }
.nav--open .nav__toggle .ico-close { display: block; }
.nav--open .nav__toggle .ico-menu { display: none; }
.nav__menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 8px var(--gutter) 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}
.nav--open .nav__menu { display: block; animation: fadeInUp .25s var(--ease-out); }
.nav__menu a { display: flex; min-height: 48px; font-size: 14px; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 4px; }
.nav__menu a:last-child { border-bottom: 0; }
/* open menu (RB.initNav): html.menu-open locks page scroll; .nav__backdrop (appended to body by
   RB.initNav, z-index just under the nav) dims the page and closes the menu on tap */
.nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 10, 12, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
@media (max-width: 899px) {
  html.menu-open { overflow: hidden; }
  /* with html clipped, body's own overflow-y:auto would turn body into the scroll container and
     the sticky nav would stick to body's (unscrolled) top instead of the viewport: keep body
     visible while the menu is open so the nav stays pinned wherever the page was scrolled */
  html.menu-open body { overflow: visible; }
  html.menu-open .nav__backdrop { opacity: 1; pointer-events: auto; }
}
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__menu { display: none !important; }
  .nav__backdrop { display: none; }
}

/* ---------------------------------------------------------------------------
   12 FOOTER
   --------------------------------------------------------------------------- */
.footer {
  margin-top: clamp(48px, 8vw, 96px);
  padding: clamp(40px, 6vw, 64px) 0 28px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(20, 20, 24, .7));
  font-size: 13px;
  color: var(--muted);
}
.footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; max-width: 34ch; }
.footer__brand p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}
.footer__col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur);
}
.footer__col a:hover { text-decoration: none; }
@media (hover: hover) { .footer__col a:hover { color: var(--accent); } }
.footer__bottom {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted-2);
}
.footer__bottom .row { gap: 8px 16px; }
@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   13 ACCORDION (details/summary)
   --------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 8px; }
.accordion__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur);
}
@media (hover: hover) { .accordion__item:hover { border-color: var(--border-hover); } }
.accordion__item[open] { border-color: var(--accent-border); box-shadow: 0 0 24px rgba(var(--accent-rgb), .07); }
.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::marker { content: ''; }
.accordion__chevron {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: transform .3s var(--ease-out), color var(--dur), border-color var(--dur), background-color var(--dur);
}
.accordion__chevron svg { width: 16px; height: 16px; }
.accordion__item[open] .accordion__chevron { transform: rotate(180deg); color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim-2); }
.accordion__body { padding: 0 16px 18px; font-size: 14px; line-height: 1.6; color: var(--text-2); animation: fadeInUp .35s var(--ease-out); }
.accordion__body p + p { margin-top: 10px; }
@media (min-width: 768px) {
  .accordion__summary { padding: 16px 20px; font-size: 16px; }
  .accordion__body { padding: 0 20px 20px; font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   14 STATS, LIVE DOT, GLOW TEXT
   --------------------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 7vw, 3.5rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--text);
  white-space: nowrap;
}
/* a live dot inside a stat value: bigger dot, smaller pulse ring, so it never crosses the first digit */
.stat__value .live-dot { width: 10px; height: 10px; margin-right: 8px; vertical-align: .18em; }
.stat__value .live-dot::after { inset: -3px; animation-name: livePulseSm; }
.stat--accent .stat__value { color: var(--accent); text-shadow: var(--accent-text-glow); }
.stat__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.stat--sm .stat__value { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.stat--center { align-items: center; text-align: center; }
/* auto-fit: a wide value ('$218,406') wraps to a new row instead of colliding with the next divider */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.stats--divided .stat { padding-left: 14px; border-left: 2px solid var(--border); }
.stats--divided .stat--accent { border-left-color: var(--accent); }
.stats--cards .stat { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
@media (min-width: 768px) { .stats { gap: 24px; } .stats--cards .stat { padding: 24px; } }

.live-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  vertical-align: middle;
}
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: livePulse 1.6s ease-out infinite;
}

.glow-text { color: var(--accent); text-shadow: var(--accent-text-glow); }
.glow-text--white { color: var(--text); text-shadow: 0 0 20px rgba(255, 255, 255, .35); }
.glow-box { box-shadow: var(--accent-glow); border-color: var(--accent-border) !important; }
.glow-ring { position: relative; }
.glow-ring::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .7), rgba(var(--accent-rgb), .05) 50%, rgba(var(--accent-rgb), .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.divider-glow { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .5), transparent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .3); }

/* ---------------------------------------------------------------------------
   15 KEYFRAMES + MOTION UTILITIES
   --------------------------------------------------------------------------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes chipIn {
  from { opacity: 0; transform: translate3d(28px, 0, 0) scale(.92); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes livePulse {
  0% { transform: scale(.5); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes livePulseSm {
  0% { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}
/* btnPulse drives the .btn--pulse::before glow layer: opacity only (compositor-friendly) */
@keyframes btnPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--accent-glow); }
  50% { box-shadow: var(--accent-glow-lg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

.fade-in-up { animation: fadeInUp .6s var(--ease-out) both; }
.fade-in { animation: fadeIn .5s ease both; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }
.delay-4 { animation-delay: .32s; }
.delay-5 { animation-delay: .4s; }
.glow-pulse { animation: glowPulse 2.6s ease-in-out infinite; }
.float { animation: floatY 5s ease-in-out infinite; }
/* reveal-on-scroll: add .reveal to elements, RB.initReveal() flips .is-visible. Hidden only
   under html.js (set by shared.js), so content is never stranded invisible without JS. */
.reveal { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js .reveal { opacity: 0; transform: translate3d(0, 16px, 0); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   16 REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .bg__blob { animation: none !important; transform: none !important; }
  .live-dot::after { display: none; }
  .btn:hover, .card:hover, .item-card:hover { transform: none; }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .ticker__chip.is-new { animation: none; }
  .btn--pulse::before { animation: none; }
  .nav__backdrop { transition: none; }
}

/* =============================================================================
   v2 SHOP ADDITIONS — appended for the mystery-box shop pages. Everything above
   is the v1 system, untouched. Same rules: one accent, rarity colors only on
   [data-rarity], 8-12px corners, 1px borders, 44px tap targets, 375px first.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   17 FORMS
   <div class="field"><label class="label" for="x">Email <span class="label__hint">Receipt goes here</span></label>
   <input class="input" id="x" type="email" autocomplete="email"><p class="field__error">…</p></div>
   Error = white border + white text (grayscale, so the one-accent rule holds; the shake + bold
   copy carry the signal). Inputs are 16px so iOS never zooms; 48px tall on every width.
   --------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.4;
}
.label__hint { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: 12px; }
.label__opt { font-weight: 600; letter-spacing: .06em; color: var(--muted-2); }
.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease;
}
.input::placeholder, .textarea::placeholder { color: var(--muted-2); opacity: 1; }
.textarea { min-height: 104px; resize: vertical; }
@media (hover: hover) {
  .input:hover, .select:hover, .textarea:hover { border-color: var(--border-hover); }
}
.input:focus, .select:focus, .textarea:focus,
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 0;
  border-color: var(--accent);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18), 0 0 20px rgba(var(--accent-rgb), .14);
}
.input[disabled], .select[disabled], .textarea[disabled] { color: var(--muted); background: var(--surface); cursor: not-allowed; }
.input[readonly] { background: var(--surface); color: var(--text-2); }
.input--center { text-align: center; }
.input--mono { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
/* select: custom chevron (muted, becomes accent on focus) */
.select {
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A8A95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.select:focus, .select:focus-visible {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2300FF9D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
}
.select option { background: var(--surface-2); color: var(--text); }
/* input with a leading icon or trailing brand mark (card number) */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-right: 48px; }
.input-wrap__end, .input-wrap__start {
  position: absolute; top: 0; bottom: 0;
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); pointer-events: none;
}
.input-wrap__end { right: 14px; }
.input-wrap__start { left: 14px; }
.input-wrap--start .input { padding-left: 42px; }
.input-wrap__end.is-on { color: var(--accent); }
/* input + button on one line (promo code) */
.input-group { display: flex; gap: 8px; }
.input-group .input { flex: 1 1 auto; min-width: 0; }
.input-group .btn { flex: 0 0 auto; }
/* error state: .field.is-invalid, .input.is-invalid or aria-invalid="true" */
.field__error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.field__error::before {
  content: '!';
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 11px; font-weight: 800; line-height: 16px;
  text-align: center;
}
.field.is-invalid .field__error, .field__error.is-on { display: flex; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea,
.input.is-invalid, .select.is-invalid, .textarea.is-invalid,
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .06);
}
.field.is-invalid .label { color: var(--text); }
.field.is-shake, .size-picker.is-shake, .is-shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }
.field__hint { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
/* autofill: Chromium paints a pale yellow unless the inset shadow covers it */
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus,
.select:-webkit-autofill, .textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-3) inset;
  box-shadow: 0 0 0 1000px var(--surface-3) inset;
  border-color: var(--accent-border);
  transition: background-color 9999s ease-out 0s;
}
/* layout helpers for forms: 1 col at 375, 2 cols from 600px */
.form { display: flex; flex-direction: column; gap: 14px; }
.form-grid { display: grid; gap: 14px 12px; grid-template-columns: 1fr; }
.form-grid__full { grid-column: 1 / -1; }
@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.form-section { display: flex; flex-direction: column; gap: 16px; }
.form-section__head { display: flex; align-items: center; gap: 12px; }
.form-section__num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--accent-border);
  background: var(--accent-dim-2);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  padding-top: 2px;
}
/* checkbox row: 44px tall, custom 22px box, accent when checked */
.check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-2);
  -webkit-tap-highlight-color: transparent;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--border-hover);
  background: var(--surface-2);
  color: var(--bg);
  transition: background-color var(--dur), border-color var(--dur), box-shadow var(--dur);
}
.check__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .18s var(--ease-spring); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .45); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 3px; }
/* choice card: a radio rendered as a selectable row (shipping method, saved address) */
.choice-group { display: flex; flex-direction: column; gap: 8px; }
.choice {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur), background-color var(--dur), box-shadow var(--dur);
  -webkit-tap-highlight-color: transparent;
}
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  background: var(--surface-2);
  display: grid; place-items: center;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.choice__radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform .18s var(--ease-spring); }
.choice__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice__title { font-size: 14px; font-weight: 700; color: var(--text); }
.choice__sub { font-size: 12px; color: var(--muted); }
.choice__end { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; color: var(--text); white-space: nowrap; }
.choice__end.is-free, .choice.is-active .choice__end { color: var(--accent); }
@media (hover: hover) { .choice:hover { border-color: var(--border-hover); background: var(--surface-2); } }
.choice.is-active, .choice:has(input:checked) { border-color: var(--accent-border); background: var(--accent-dim-2); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .18); }
.choice.is-active .choice__radio, .choice:has(input:checked) .choice__radio { border-color: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .4); }
.choice.is-active .choice__radio::after, .choice:has(input:checked) .choice__radio::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   18 SIZE PICKER  (RB.sizePicker)
   .size-picker > .size-group[data-type] > .size-group__head + .size-group__chips > .size-chip
   Hats render as .size-group--static text ("One size"), never a control.
   --------------------------------------------------------------------------- */
.size-picker { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.size-group { display: flex; flex-direction: column; gap: 8px; }
.size-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.size-group__label { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.size-group__for { font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: 12px; }
.size-group__value { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
.size-group__value:empty::before { content: 'Pick one'; color: var(--muted-2); font-weight: 600; }
.size-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 52px;
  padding: 2px 14px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: .06em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur), background-color var(--dur), color var(--dur), box-shadow var(--dur), transform .12s var(--ease-out);
}
@media (hover: hover) { .size-chip:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-3); } }
.size-chip:active { transform: scale(.96); }
.size-chip.is-selected, .size-chip[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 16px rgba(var(--accent-rgb), .22);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), .45);
}
.size-chip[disabled], .size-chip.is-disabled {
  color: var(--muted-2);
  background: transparent;
  border-style: dashed;
  text-decoration: line-through;
  cursor: not-allowed;
  box-shadow: none;
}
/* missing (validate()): white ring on the group + an inline error line */
.size-group__error { display: none; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.size-group__error::before { content: '!'; width: 16px; height: 16px; border-radius: 50%; background: var(--text); color: var(--bg); font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; }
.size-group.is-missing .size-group__error { display: flex; }
.size-group.is-missing .size-chip { border-color: rgba(255, 255, 255, .45); }
.size-group.is-missing .size-group__label { color: var(--text); }
/* one-size line (hats): plain text, no control */
.size-group__static { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.size-group__static i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
/* compact picker (cart inline edit): smaller chips, tighter gaps, still 44px tall */
.size-picker--compact { gap: 10px; }
.size-picker--compact .size-chip { min-width: 46px; padding-inline: 10px; font-size: 17px; }
.size-picker--compact .size-group__chips { gap: 6px; }
/* v3 chips ---------------------------------------------------------------------
   .size-group--variant  the line / brand / style group (label = box.variants.label)
   .size-chip--img       a variant chip with the seller's thumbnail: 36px image left, text right,
                         44px min, wraps to two lines on a long name ("Birkenstock Closed-Toe Slippers")
   .size-chip__price     shown only when the variants differ in price ("$4.83")
   .size-group--eu       a numeric (EU shoe) ladder: '37=37.5' style labels get a slightly smaller face
   Chips sit left-aligned and wrap (no grid), so a 19-size ladder reads as rows of ~5 at 375. */
.size-group--variant .size-group__chips, .size-group[data-type="size"] .size-group__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-group[data-type="size"] .size-chip { min-width: 52px; padding-inline: 10px; }
.size-chip--eu { min-width: 58px; font-size: 16px; letter-spacing: .02em; }
.size-chip__price { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-left: 8px; align-self: center; }
.size-chip.is-selected .size-chip__price { color: var(--accent); }
.size-chip--img {
  display: inline-grid;
  grid-template-columns: 36px minmax(0, auto);
  column-gap: 9px;
  align-items: center;
  justify-content: start;
  max-width: 100%;
  min-width: 0;
  padding: 3px 12px 3px 3px;
  text-align: left;
}
.size-chip--img .size-chip__img { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 6px; object-fit: cover; display: block; background: var(--surface-3); }
.size-chip--img .size-chip__text { font-size: 15px; letter-spacing: .04em; line-height: 1; white-space: normal; max-width: 200px; padding-top: 1px; }
.size-chip--img .size-chip__price { grid-column: 2; margin-left: 0; margin-top: 2px; align-self: start; }
.size-chip--img.is-selected .size-chip__img { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .6); }
.size-picker--compact .size-chip--img { padding-right: 10px; }
.size-picker--compact .size-chip--img .size-chip__text { font-size: 14px; }
/* v2 ladders (tops/bottoms/shoes) under 600px: a grid so a ladder never orphans one chip */
@media (max-width: 599px) {
  .size-group[data-type="tops"] .size-group__chips, .size-group[data-type="bottoms"] .size-group__chips, .size-group[data-type="shoes"] .size-group__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); max-width: 400px; }
  .size-group[data-type="tops"] .size-chip, .size-group[data-type="bottoms"] .size-chip, .size-group[data-type="shoes"] .size-chip { min-width: 0; padding-inline: 4px; }
  .size-group[data-type="shoes"] .size-group__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .size-group[data-type="size"] .size-chip { min-width: 50px; padding-inline: 8px; }
  .size-chip--eu { min-width: 56px; padding-inline: 6px; }
  .size-chip--img .size-chip__text { max-width: 150px; }
}
/* size tags (RB.renderSizes): read-only chips on cart rows / orders: "Tops M" */
.sizes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.size-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 26px;
  padding: 3px 8px 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .05em;
  color: var(--text);
  white-space: nowrap;
}
.size-tag small { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.size-tag--muted { color: var(--text-2); border-style: dashed; background: transparent; }

/* ---------------------------------------------------------------------------
   19 QTY STEPPER  (RB.qty)
   <div class="qty"><button class="qty__btn" data-step="-1">−</button><output class="qty__value">1</output><button class="qty__btn" data-step="1">+</button></div>
   --------------------------------------------------------------------------- */
.qty {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow: hidden;
}
/* the buttons carry the 44px, not the box: a fixed box height minus the border left them at 42px */
.qty__btn, .qty__value { min-height: 44px; }
.qty__btn {
  width: 44px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  transition: background-color var(--dur), color var(--dur);
  -webkit-tap-highlight-color: transparent;
}
.qty__btn svg { width: 16px; height: 16px; }
@media (hover: hover) { .qty__btn:hover { background: var(--surface-3); color: var(--accent); } }
.qty__btn:active { background: var(--surface-4); }
.qty__btn[disabled] { color: var(--muted-2); opacity: .45; cursor: not-allowed; background: transparent; }
.qty__btn:focus-visible { outline-offset: -3px; border-radius: 6px; box-shadow: none; }
.qty__value {
  min-width: 40px;
  display: grid;
  place-items: center;
  padding-top: 2px;
  border-inline: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.qty--sm .qty__btn, .qty--sm .qty__value { min-height: 40px; }
.qty--sm .qty__btn { width: 40px; }

/* ---------------------------------------------------------------------------
   20 TOAST  (RB.toast)
   Bottom-center on phones (above a sticky bar when body.has-sticky-bar), top-right on desktop.
   --------------------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  z-index: 300;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.has-sticky-bar .toast-stack { bottom: calc(var(--sticky-bar-h, 76px) + 12px + env(safe-area-inset-bottom, 0px)); }
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  min-height: 56px;
  padding: 10px 10px 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-border);
  background: rgba(20, 20, 24, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--accent-glow), var(--shadow-lg);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  animation: toastIn .38s var(--ease-out) both;
}
.toast.is-leaving { animation: toastOut .25s ease-in both; }
.toast__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .6);
}
.toast__icon svg { width: 14px; height: 14px; }
.toast__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast__title { font-size: 14px; font-weight: 700; }
.toast__text { font-size: 13px; font-weight: 500; color: var(--text-2); }
.toast__action {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.toast__action:hover { text-decoration: none; }
@media (hover: hover) { .toast__action:hover { background: var(--accent-dim-2); } }
.toast__close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: -8px -4px -8px 0;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.toast__close svg { width: 16px; height: 16px; }
@media (hover: hover) { .toast__close:hover { color: var(--text); background: var(--surface-3); } }
/* narrow phones: icon + action + close left the text 93px wide and wrapped "M · 32". The action
   drops under the text (aligned with it), the close stays on the first row. */
@media (max-width: 479px) {
  .toast { flex-wrap: wrap; row-gap: 0; padding: 10px 8px 6px 14px; }
  .toast__body { flex: 1 1 calc(100% - 130px); } /* icon 26 + gaps 24 + close 44 always fit beside it; it grows into the rest */
  .toast__action { order: 1; margin: -6px 0 -2px 38px; padding: 0 8px; } /* order: the close stays on row one */
}
.toast--info { border-color: var(--border-hover); box-shadow: var(--shadow-lg); }
.toast--info .toast__icon { background: var(--surface-4); color: var(--text); box-shadow: none; }
.toast--error { border-color: rgba(255, 255, 255, .5); box-shadow: var(--shadow-lg); }
.toast--error .toast__icon { background: var(--text); color: var(--bg); box-shadow: none; }
@media (min-width: 768px) {
  .toast-stack { left: auto; right: 24px; top: calc(var(--nav-h) + 16px); bottom: auto; align-items: flex-end; }
  .has-sticky-bar .toast-stack { bottom: auto; }
  .toast { width: auto; min-width: 320px; }
}

/* ---------------------------------------------------------------------------
   21 NAV CART BUTTON + COUNT BADGE
   <a class="nav__cart" href="cart.html" aria-label="Cart"><svg …/><span class="badge--count" hidden>0</span></a>
   RB.initNav() fills the count from STORE.cart.count() and bumps it on 'cart' events.
   --------------------------------------------------------------------------- */
.nav__cart {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur), background-color var(--dur), color var(--dur);
}
.nav__cart:hover { text-decoration: none; }
@media (hover: hover) { .nav__cart:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim-2); } }
.nav__cart svg { width: 20px; height: 20px; }
.nav__cart.is-active { border-color: var(--accent-border); color: var(--accent); }
.badge--count {
  position: absolute;
  top: -7px; right: -7px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 10px rgba(var(--accent-rgb), .6);
  font-variant-numeric: tabular-nums;
}
.badge--count[hidden], .badge--count:empty { display: none; }
.badge--count.is-bump { animation: badgeBump .45s var(--ease-spring); }
/* the v2 nav has four things at phone width: logo, cart, CTA, toggle */
.nav__cta { white-space: nowrap; }
@media (max-width: 379px) { .nav__cta { padding-inline: 10px; font-size: 15px; } }
/* the mobile menu's cart row */
.nav__menu a .badge--count { position: static; border: 0; margin-left: 4px; }

/* ---------------------------------------------------------------------------
   22 STICKY BOTTOM BAR (phones / tablets)
   <div class="sticky-bar" id="sticky"><div class="sticky-bar__info"><span class="sticky-bar__label">Streetwear Box · 4 pieces</span>
   <span class="sticky-bar__price">$100</span></div><button class="btn btn--primary">Add to cart</button></div>
   Page adds body.has-sticky-bar (reserves space) and .is-visible once the top CTA scrolls off.
   --------------------------------------------------------------------------- */
.sticky-bar {
  --sticky-bar-h: 76px;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--sticky-bar-h);
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 12, .9);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .5);
  transform: translate3d(0, 110%, 0);
  transition: transform .32s var(--ease-out);
}
.sticky-bar.is-visible { transform: none; }
.sticky-bar::before {
  content: '';
  position: absolute; top: -1px; left: var(--gutter); right: var(--gutter); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent);
}
.sticky-bar__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sticky-bar__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-bar__price { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: .02em; color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), .35); }
.sticky-bar__price s { font-size: .55em; color: var(--muted-2); margin-left: 6px; }
.sticky-bar .btn { flex: 0 0 auto; }
.has-sticky-bar { padding-bottom: calc(var(--sticky-bar-h, 76px) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
  .sticky-bar { display: none; }
  .has-sticky-bar { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   23 FILTER CHIPS
   <div class="filter-chips" role="group" aria-label="Price"><button class="chip is-active">All</button><button class="chip">Under $75</button></div>
   .filter-chips--scroll: one row that scrolls sideways at phone width (bleeds into the gutters).
   --------------------------------------------------------------------------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-bottom: 2px;
}
.filter-chips--scroll::-webkit-scrollbar { display: none; }
.filter-row { display: flex; flex-direction: column; gap: 10px; }
.filter-row__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), box-shadow var(--dur);
}
@media (hover: hover) { .chip:hover { border-color: var(--border-hover); color: var(--text); background: var(--surface-2); } }
.chip:active { transform: scale(.97); }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .45);
}
.chip__count { font-size: 11px; font-weight: 800; opacity: .65; }
.chip--sm { min-height: 36px; padding-inline: 12px; font-size: 11px; }
.chip[disabled] { opacity: .45; cursor: not-allowed; }
/* sort control next to chips */
.sort { display: inline-flex; align-items: center; gap: 8px; }
.sort .select { width: auto; min-width: 160px; min-height: 44px; padding-block: 8px; font-size: 13px; font-weight: 600; }
.results-count { font-size: 13px; color: var(--muted); }
.results-count b { color: var(--text); }

/* ---------------------------------------------------------------------------
   24 TIMELINE  (RB.renderTimeline)  Packed -> Shipped -> Delivered
   Vertical on phones, horizontal from 768px. States: .is-done .is-current .is-next
   --------------------------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; position: relative; }
.timeline__step {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 12px;
  padding-bottom: 22px;
  min-width: 0;
}
.timeline__step:last-child { padding-bottom: 0; }
.timeline__dot {
  position: relative;
  z-index: 1;
  width: 16px; height: 16px;
  margin: 3px 5px 0;
  border-radius: 50%;
  border: 2px solid var(--muted-2);
  background: var(--bg);
  display: grid; place-items: center;
  transition: border-color var(--dur), background-color var(--dur), box-shadow var(--dur);
}
.timeline__dot svg { width: 9px; height: 9px; display: none; }
.timeline__line {
  position: absolute;
  left: 12px;
  top: 21px;
  bottom: -2px;
  width: 2px;
  background: var(--border-hover);
  opacity: .5;
}
.timeline__step:last-child .timeline__line { display: none; }
.timeline__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.timeline__label { font-family: var(--font-display); font-size: 21px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.timeline__date { font-size: 12px; font-weight: 600; color: var(--muted-2); }
.timeline__note { font-size: 13px; color: var(--muted); line-height: 1.45; }
/* done: filled accent dot with a check, accent line to the next step */
.timeline__step.is-done .timeline__dot { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 0 10px rgba(var(--accent-rgb), .45); }
.timeline__step.is-done .timeline__dot svg { display: block; }
.timeline__step.is-done .timeline__line { background: var(--accent); opacity: .85; box-shadow: 0 0 8px rgba(var(--accent-rgb), .45); }
.timeline__step.is-done .timeline__label { color: var(--text); }
.timeline__step.is-done .timeline__date { color: var(--text-2); }
/* current: hollow accent dot, pulsing ring, accent label */
.timeline__step.is-current .timeline__dot { border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16), 0 0 16px rgba(var(--accent-rgb), .5); }
.timeline__step.is-current .timeline__dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.timeline__step.is-current .timeline__dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--accent); animation: livePulse 1.8s ease-out infinite; }
.timeline__step.is-current .timeline__label { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), .4); }
.timeline__step.is-current .timeline__date { color: var(--text-2); }
/* next: dashed line, muted everything */
.timeline__step.is-next .timeline__line { background: repeating-linear-gradient(180deg, var(--border-hover) 0 4px, transparent 4px 8px); opacity: .6; }
@media (min-width: 768px) {
  .timeline { flex-direction: row; align-items: flex-start; }
  .timeline__step { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 0 12px 0 0; }
  .timeline__step:last-child { padding-right: 0; }
  .timeline__dot { margin: 0; }
  .timeline__line { left: 24px; right: 4px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .timeline__step.is-next .timeline__line { background: repeating-linear-gradient(90deg, var(--border-hover) 0 4px, transparent 4px 8px); }
  .timeline__label { font-size: 24px; }
}
/* compact (account order rows): always horizontal, no notes, smaller labels */
.timeline--compact { flex-direction: row; align-items: flex-start; }
.timeline--compact .timeline__step { flex: 1 1 0; grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 0 8px 0 0; }
.timeline--compact .timeline__step:last-child { padding-right: 0; }
.timeline--compact .timeline__dot { margin: 0; width: 14px; height: 14px; }
.timeline--compact .timeline__dot svg { width: 8px; height: 8px; }
.timeline--compact .timeline__line { left: 20px; right: 4px; top: 6px; bottom: auto; width: auto; height: 2px; }
.timeline--compact .timeline__step.is-next .timeline__line { background: repeating-linear-gradient(90deg, var(--border-hover) 0 4px, transparent 4px 8px); }
.timeline--compact .timeline__label { font-size: 16px; }
.timeline--compact .timeline__date { font-size: 12px; }
.timeline--compact .timeline__note { display: none; }

/* ---------------------------------------------------------------------------
   25 TABS
   <div class="tabs" role="tablist"><button class="tab is-active" role="tab" aria-selected="true">Orders <span class="tab__count">2</span></button>…</div>
   <div class="tab-panel" role="tabpanel">…</div>  (hidden panels use [hidden])
   --------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 4px 14px 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur), border-color var(--dur);
}
@media (hover: hover) { .tab:hover { color: var(--text); } }
.tab:focus-visible { outline-offset: -4px; }
.tab.is-active, .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tab.is-active::after, .tab[aria-selected="true"]::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: -2px; height: 2px;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), .7);
}
.tab__count {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800;
  letter-spacing: 0;
}
.tab.is-active .tab__count, .tab[aria-selected="true"] .tab__count { background: var(--accent-dim); color: var(--accent); }
.tab-panel { padding-top: 20px; }
.tab-panel[hidden] { display: none; }
.tabs--fill .tab { flex: 1 1 0; justify-content: center; }
/* phones: tighter tabs, and a fade on the right edge so a strip that scrolls reads as
   scrollable instead of clipped ("SHIPPING & S"). Prefer .tabs--fill + short labels
   (ORDERS / UNBOXED / SIZES) so nothing scrolls at 375 at all. */
@media (max-width: 599px) {
  .tabs:not(.tabs--fill) {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .tab { padding-inline: 12px; font-size: 18px; }
  .tab.is-active::after, .tab[aria-selected="true"]::after { left: 12px; right: 12px; }
}

/* ---------------------------------------------------------------------------
   26 SUMMARY (order summary rows)
   <dl class="summary"><div class="summary__row"><dt>Subtotal</dt><dd>$100</dd></div>… <div class="summary__row summary__row--total"><dt>Total</dt><dd>$108</dd></div></dl>
   --------------------------------------------------------------------------- */
.summary { display: flex; flex-direction: column; gap: 10px; }
.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-2);
}
.summary__row dt, .summary__row dd, .summary__key, .summary__value { margin: 0; min-width: 0; }
.summary__row dd, .summary__value { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary__row small, .summary__sub { display: block; font-size: 12px; font-weight: 500; color: var(--muted-2); margin-top: 2px; }
.summary__row--discount dd, .summary__row--discount .summary__value, .summary__row .is-free { color: var(--accent); }
.summary__row--total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.summary__row--total dd, .summary__row--total .summary__value {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), .35);
}
.summary__note { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
/* free-shipping meter (cart) */
.ship-meter { display: flex; flex-direction: column; gap: 8px; }
.ship-meter__text { font-size: 13px; color: var(--text-2); }
.ship-meter__text b { color: var(--accent); }
.ship-meter.is-free .ship-meter__text { color: var(--text); }

/* ---------------------------------------------------------------------------
   27 LINE ITEM (cart row)  (RB.renderLineItem)
   .line-item[data-key] > .line-item__art + .line-item__body (head: name + remove, meta, sizes + edit, foot: qty + total)
   --------------------------------------------------------------------------- */
.line-items { display: flex; flex-direction: column; gap: 10px; }
.line-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur), opacity .25s, transform .25s var(--ease-out);
}
.line-item.is-removing { opacity: 0; transform: translateX(24px); }
.line-item__art {
  width: 76px;
  aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end;
  padding: 6px 6px 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(var(--accent-rgb), .14), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  overflow: hidden;
}
.line-item__art .box-art { width: 100%; height: 100%; }
/* v3: the seller's cover photo fills the art box */
.line-item__art--photo { padding: 0; background: var(--surface-2); }
.line-item__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.line-item__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.line-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.line-item__name { font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.line-item__name a { color: inherit; display: inline-block; padding: 11px 0; margin: -11px 0; } /* 44px tap height, same visual */
.line-item__meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.line-item__meta b { color: var(--text-2); font-weight: 600; }
.line-item__remove {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  margin: -10px -10px -10px 0;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color var(--dur), background-color var(--dur);
}
.line-item__remove svg { width: 18px; height: 18px; }
@media (hover: hover) { .line-item__remove:hover { color: var(--text); background: var(--surface-3); } }
.line-item__sizes { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.line-item__edit {
  display: inline-flex; align-items: center;
  min-height: 44px;
  margin-block: -9px;
  padding: 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  border-radius: 6px;
}
.line-item__edit:hover { text-decoration: none; }
@media (hover: hover) { .line-item__edit:hover { background: var(--accent-dim-2); } }
.line-item__editor { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--border); }
.line-item__editor[hidden] { display: none; }
.line-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.line-item__total { font-family: var(--font-display); font-size: 24px; line-height: 1; letter-spacing: .02em; color: var(--accent); white-space: nowrap; }
.line-item__total small { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); margin-right: 6px; }
@media (min-width: 600px) {
  .line-item { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px; }
  .line-item__art { width: 96px; padding: 8px 8px 2px; }
  .line-item__name { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   28 SLOT BLOCK (box detail)  (RB.renderSlot)
   .slot > .slot__head (count × label, pool meta) + .slot__odds (RB.renderOddsBarFor) + .slot__pool (item cards)
   --------------------------------------------------------------------------- */
.slots { display: flex; flex-direction: column; gap: 16px; }
.slot {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.slot::before {
  content: '';
  position: absolute; top: -1px; left: 16px; right: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .45);
}
.slot__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.slot__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.slot__glyph { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; }
.slot__glyph svg { width: 100%; height: 100%; }
.slot__name { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: clamp(1.5rem, 5.4vw, 1.9rem); line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--text); }
.slot__count { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), .45); }
.slot__meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.slot__meta b { color: var(--text-2); font-weight: 600; }
.slot__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.slot__odds { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.slot__odds-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* the "sums to 100%" note is a math footnote, not a CTA: it never takes the accent */
.slot__odds-label b { color: var(--muted-2); letter-spacing: .06em; font-weight: 600; }
.slot__pool { padding: 12px 14px 14px; }
.slot__pool .item-card__name { min-height: 2.5em; }
/* the pool renders twice (RB.renderSlot pool:'auto'): .slot__list (contents rows, ~80px per
   piece) under 600px, .slot__pool (item-card grid) from 600px. display:none keeps the hidden
   copy out of the accessibility tree too. */
.slot__list { padding: 12px 14px 14px; }
@media (max-width: 599px) {
  .slot--auto .slot__pool.grid { display: none; }
}
@media (min-width: 600px) {
  .slot--auto .slot__list { display: none; }
}
@media (min-width: 768px) {
  .slot__head { padding: 16px 18px 14px; }
  .slot__odds { padding: 14px 18px; }
  .slot__pool { padding: 16px 18px 18px; }
}
/* small odds bar (inside slots / cards) */
.odds-bar--sm .odds-bar__track { height: 10px; padding: 1px; }
.odds-bar--sm .odds-bar__key { font-size: 12px; }
.odds-bar--sm { gap: 8px; }

/* piece card (RB.renderPieceCard): an item card that says which slot it filled; .is-best glows harder */
.piece-card .piece-card__slot {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.piece-card__best {
  /* sits inside .item-card__art, bottom-right, so it never collides with the rarity tag (top-left) at 104-150px */
  position: absolute; right: 6px; bottom: 6px; z-index: 1;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .55);
}
.piece-card.is-best { border-color: rgba(var(--rc-rgb), .8); box-shadow: 0 0 0 1px rgba(var(--rc-rgb), .25), 0 0 34px rgba(var(--rc-rgb), .42); }
.piece-card .item-card__value { color: var(--text); }
.piece-card.is-best .item-card__value { color: var(--accent); }
/* mystery tile (RB.renderMysteryTiles): a sealed slot before delivery */
.mystery-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)); gap: 8px; }
.mystery-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px dashed var(--border-hover);
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
  overflow: hidden;
}
.mystery-tile__glyph { width: 46%; opacity: .22; filter: grayscale(1); }
.mystery-tile__glyph svg { width: 100%; height: auto; }
.mystery-tile__q {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
  text-shadow: var(--accent-text-glow);
  padding-bottom: 14px;
}
.mystery-tile__label { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v3 sealed tile: the box's cover photo dimmed under the "?" and a SEALED label */
.mystery-tile--photo { border-style: solid; border-color: var(--border); background: var(--surface-2); }
.mystery-tile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(.55); }
.mystery-tile--photo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, rgba(10, 10, 12, .55), rgba(10, 10, 12, .15) 70%, rgba(10, 10, 12, .6)); pointer-events: none; }
.mystery-tile--photo .mystery-tile__q { z-index: 1; font-size: 44px; padding-bottom: 10px; }
.mystery-tile--photo .mystery-tile__label { z-index: 1; left: 50%; right: auto; transform: translateX(-50%); padding: 3px 8px 2px; border-radius: 6px; background: rgba(10, 10, 12, .72); color: var(--text-2); border: 1px solid rgba(255, 255, 255, .12); }

/* ---------------------------------------------------------------------------
   29 PRICE RANGE, STATUS PILL, EMPTY STATE, TABLE-ISH ROWS, SKELETON
   --------------------------------------------------------------------------- */
/* "RETAIL $92–$1,480" line: label small caps, numbers in display type */
.price-range {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.price-range b { font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: .03em; color: var(--text); font-variant-numeric: tabular-nums; }
.price-range b i { font-style: normal; color: var(--muted-2); padding-inline: 2px; }
.price-range--accent b { color: var(--accent); }
.price-range--lg b { font-size: 24px; }
.price-range__sep { color: var(--muted-2); }
/* "the math" strip: min / typical / max vs price */
.math { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.math__cell { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.math__key { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.math__val { font-family: var(--font-display); font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1; letter-spacing: .02em; color: var(--text); white-space: nowrap; }
.math__cell--accent { border-color: var(--accent-border); background: var(--accent-dim-2); }
.math__cell--accent .math__val { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), .4); }
.math__sub { font-size: 11px; color: var(--muted-2); }
@media (min-width: 768px) { .math { gap: 12px; } .math__cell { padding: 16px; } }

/* order status: packed / shipped / delivered (one accent, three intensities) */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  white-space: nowrap;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.status[data-status="shipped"] { border-color: var(--accent-border); background: var(--accent-dim-2); color: var(--accent); }
/* the dot stays solid; a ring pulses out around it (livePulse would fade the only dot to 0) */
.status[data-status="shipped"]::before { background: var(--accent); box-shadow: 0 0 8px var(--accent), 0 0 0 0 rgba(var(--accent-rgb), .7); animation: statusRing 1.8s ease-out infinite; }
@keyframes statusRing {
  0% { box-shadow: 0 0 8px var(--accent), 0 0 0 0 rgba(var(--accent-rgb), .7); }
  100% { box-shadow: 0 0 8px var(--accent), 0 0 0 7px rgba(var(--accent-rgb), 0); }
}
.status[data-status="delivered"] { border-color: var(--accent); background: var(--accent); color: var(--bg); box-shadow: 0 0 12px rgba(var(--accent-rgb), .45); }
.status[data-status="delivered"]::before { background: var(--bg); }
.badge--demo { border-style: dashed; color: var(--muted); background: transparent; }

/* empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(32px, 8vw, 64px) 20px;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius);
  background: var(--surface);
}
.empty-state__art { width: 120px; max-width: 45%; opacity: .75; }
.empty-state__art .box-art { width: 100%; }
.empty-state__title { font-family: var(--font-display); font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase; color: var(--text); }
.empty-state__text { max-width: 36ch; font-size: 14px; color: var(--muted); }
.empty-state .btn { margin-top: 6px; }

/* table-ish rows (account orders): label/value cells that stack at 375 and line up from 768px */
.table-ish { display: flex; flex-direction: column; gap: 10px; }
.table-ish__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur);
}
@media (hover: hover) { .table-ish__row:hover { border-color: var(--border-hover); } }
.table-ish__row--head { display: none; }
.table-ish__cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.table-ish__cell--full { grid-column: 1 / -1; }
.table-ish__key { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.table-ish__val { font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.table-ish__val--id { font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; color: var(--accent); }
.table-ish__val--money { font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; }
.table-ish__actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
@media (min-width: 768px) {
  /* the last column is fixed so a wider status pill in one row cannot shift every other
     row's columns off the head labels */
  .table-ish__row { grid-template-columns: var(--cols, 1.2fr 1fr 1fr 1fr 132px); align-items: center; padding: 14px 18px; }
  .table-ish__row--head { display: grid; padding-block: 6px; background: transparent; border-color: transparent; }
  .table-ish__row--head .table-ish__key { color: var(--muted-2); }
  .table-ish__row--head .table-ish__key:last-child { text-align: right; } /* over the right-aligned actions column */
  /* with a head row the keys live there once; the per-cell keys are a phone-only affordance */
  .table-ish:not(.table-ish--stack) .table-ish__row--head ~ .table-ish__row .table-ish__key { display: none; }
  .table-ish__cell--full { grid-column: auto; }
  .table-ish__actions { grid-column: auto; justify-content: flex-end; }
  .table-ish--stack .table-ish__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* order card: table-ish head + timeline + boxes; used by account + confirmation */
.order-card { display: flex; flex-direction: column; gap: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.order-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.order-card__id { font-family: var(--font-display); font-size: 24px; letter-spacing: .04em; color: var(--accent); line-height: 1; }
.order-card__date { font-size: 12px; color: var(--muted); margin-top: 4px; }
.order-card__boxes { display: flex; flex-direction: column; gap: 8px; }
.order-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; border-top: 1px solid var(--border); }
@media (min-width: 768px) { .order-card { padding: 18px 20px; gap: 16px; } }

/* skeleton (optional loading placeholder) */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton--text { height: 1em; border-radius: 4px; }
.skeleton--line { height: 14px; width: 100%; border-radius: 4px; }
.skeleton--art { aspect-ratio: 1 / 1; }
.skeleton--btn { height: 44px; }

/* ---------------------------------------------------------------------------
   30 V2 BOX CARD + UNBOXING CARD + TICKER v2 TEXT
   RB.renderBoxCard(box) (v2): art (with "N PIECES" + tier badges), name, tagline, price,
   .slot-chips, .price-range, actions (ADD TO CART data-add + SEE INSIDE)
   --------------------------------------------------------------------------- */
.box-card__pieces { position: absolute; top: 10px; left: 10px; z-index: 1; }
.box-card__pieces b { color: var(--accent); }
/* top-right corner of the art: "Free shipping" on boxes that clear the standard threshold
   (the crate face already prints the tier, so there is no tier badge) */
.box-card__ship { position: absolute; top: 10px; right: 10px; z-index: 1; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slot-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.slot-chip b { color: var(--accent); font-weight: 800; }
.slot-chip svg { width: 16px; height: 16px; opacity: .8; }
/* "TYPICAL $152" leads in display type + accent (you pay $100, you typically get $152 is the
   card's whole argument); the retail range follows in the same display size, white on muted */
.box-card__retail { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.box-card__typical { display: inline-flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.box-card__typical b { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: .03em; line-height: 1; color: var(--accent); text-shadow: 0 0 12px rgba(var(--accent-rgb), .35); font-variant-numeric: tabular-nums; }
.box-card__retail .price-range b { color: var(--text-2); }
/* two buttons side by side when there is room (>=2×118px), stacked when a 4-up desktop grid gets tight */
.box-card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin-top: auto; }
.box-card__actions .btn { padding-inline: 8px; }
/* narrow card columns (the 4-up desktop grid, ~233px of body): smaller name so it stays on one
   line beside the price, and the typical / retail pair stacks instead of breaking unevenly */
@container (max-width: 280px) {
  .box-card__name { font-size: 20px; }
  .box-card__retail { flex-direction: column; align-items: flex-start; gap: 4px; }
}
.box-card--hero { border-color: var(--accent-border); box-shadow: var(--accent-glow); }
.box-card--hero .box-card__art { background: radial-gradient(70% 45% at 50% 100%, rgba(var(--accent-rgb), .2), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.box-card__flag { position: absolute; top: 10px; right: 10px; z-index: 1; }

/* unboxing card (social proof): user + box, the pieces as small piece cards, total */
.unboxing {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.unboxing__head { display: flex; align-items: center; gap: 10px; }
.unboxing__avatar {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .05em;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
}
.unboxing__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.unboxing__user { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unboxing__box { font-size: 12px; color: var(--muted); }
.unboxing__box b { color: var(--text-2); font-weight: 600; }
.unboxing__ago { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.unboxing__pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px; }
.unboxing__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.unboxing__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.unboxing__label b { color: var(--text-2); }
.unboxing__value { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: .02em; color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), .35); }
.unboxing__value small { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); margin-left: 6px; text-shadow: none; }
@media (min-width: 768px) { .unboxing { padding: 18px; } }
/* narrow phones: a box's 3-4 pieces sit on ONE row (fullfit's 5 -> 4 + 1) instead of a 2x2 grid
   of 228px cards; sealed tiles likewise 4 across so HAT is not orphaned under HOODIE/TEE/PANTS */
@media (max-width: 479px) {
  .mystery-tiles { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
  .unboxing__pieces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .unboxing .piece-card__slot { display: none; }
  .unboxing .item-card__art { padding: 12%; }
  .unboxing .item-card__name { font-size: 11px; -webkit-line-clamp: 3; min-height: 0; } /* "Sp5der Web Hoodie" needs a third line at 73px */
  .unboxing .item-card--sm .item-card__body { padding: 6px 6px 7px; }
  .unboxing .item-card__value { font-size: 15px; }
  /* ~73px tiles: the rarity tag keeps its dot (the border + glow already carry the color; the
     label stays in the accessibility tree), the best-pull flag tightens */
  .unboxing .rarity-tag.item-card__rarity { top: 4px; left: 4px; font-size: 0; gap: 0; padding: 4px; }
  .unboxing .piece-card__best { right: 4px; bottom: 4px; padding: 2px 5px; font-size: 9px; letter-spacing: .06em; }
}

/* ticker chip v2: "user unboxed" / PIECE · Box name */
.ticker__box { color: var(--muted); font-weight: 500; }
@media (min-width: 768px) { .ticker__item { max-width: 280px; } }

/* ---------------------------------------------------------------------------
   31 v2 KEYFRAMES + REDUCED MOTION
   --------------------------------------------------------------------------- */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); }
}
@keyframes badgeBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .is-shake, .field.is-shake, .size-picker.is-shake { animation: none; }
  .toast, .toast.is-leaving { animation: none; }
  .badge--count.is-bump { animation: none; }
  .timeline__step.is-current .timeline__dot::after { display: none; }
  .status[data-status="shipped"]::before { animation: none; }
  .sticky-bar { transition: none; }
  .skeleton::after { animation: none; }
}

/* =============================================================================
   32 SHELL — app chrome modelled on Rillabox / Hypedrop (structure + density, OUR palette)
   .shell > .topbar + [.ticker--live] + .shell__body (> .sidebar + .main) + .footer ; then
   .tabbar (phones, fixed bottom) + .drawer (slide-over holding the same live feed).
   Also here: .stat-tiles, .livefeed, .filterbar + .search, .banner, .gcard (+ .gcard-grid),
   .mix-bar. JS: RB.initShell(), RB.livefeed(), RB.renderGridCard(), RB.rarityMix().
   z-index: .sticky-bar 90 < .tabbar 95 < .drawer 96 < .nav__backdrop 99 < .topbar 100 < .toast-stack 300
   ============================================================================= */
:root { --topbar-h: 60px; --tabbar-h: 56px; --sidebar-w: 264px; --shell-pad: 16px; }
@media (min-width: 1100px) { :root { --shell-pad: 20px; } }
/* shell pages: every sticky offset follows the 60px topbar (the v1 nav grew to 68px on desktop) */
html:has(.topbar) { --nav-h: var(--topbar-h); }

.shell { display: flex; flex-direction: column; min-height: 100dvh; }
/* the fixed tab bar sits over the bottom of the page under 1100px: the shell reserves it */
@media (max-width: 1099px) {
  .shell { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* --- top bar ------------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-h);
  background: rgba(10, 10, 12, .78);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.topbar.is-scrolled { background: rgba(10, 10, 12, .92); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.topbar__inner {
  height: 100%;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__logo { margin-right: 4px; }
.topbar__links { display: none; align-items: center; gap: 6px; margin-left: 10px; }
.topbar__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur), background-color var(--dur), border-color var(--dur);
}
.topbar__links a svg { width: 16px; height: 16px; opacity: .8; flex: 0 0 auto; }
.topbar__links a:hover { text-decoration: none; }
@media (hover: hover) { .topbar__links a:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-2); } }
.topbar__links a.is-active { color: var(--accent); border-color: var(--accent-border); background: var(--accent-dim-2); }
.topbar__links a.is-active svg { opacity: 1; }
.topbar__spacer { flex: 1 1 auto; }
.topbar__cart {
  position: relative;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur), background-color var(--dur), color var(--dur);
}
.topbar__cart:hover { text-decoration: none; }
@media (hover: hover) { .topbar__cart:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim-2); } }
.topbar__cart svg { width: 20px; height: 20px; }
.topbar__cart.is-active { border-color: var(--accent-border); color: var(--accent); }
.topbar__cta { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 379px) { .topbar__cta { padding-inline: 10px; font-size: 15px; } }
/* checkout: logo + a quiet note, no links / CTA (the cart button stays as the way back) */
.topbar__note { display: none; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.topbar__note svg { width: 14px; height: 14px; color: var(--accent); flex: 0 0 auto; }
.topbar--plain .topbar__links, .topbar--plain .topbar__cta { display: none !important; }
.topbar--plain .topbar__note { display: inline-flex; }
.topbar--plain .topbar__spacer { display: none; }
@media (min-width: 900px) { .topbar__links { display: flex; } }

/* --- body: sidebar + main -------------------------------------------------------- */
.shell__body {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 12px var(--shell-pad) 32px;
}
.shell__body--full { max-width: 1160px; }
.sidebar { display: none; }
.main { min-width: 0; }
.main--full { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .shell__body { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; padding: 16px var(--shell-pad) 48px; }
  .shell__body--full { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: calc(var(--topbar-h) + 16px);
    height: calc(100dvh - var(--topbar-h) - 32px);
    min-height: 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
}

/* --- stat tiles (sidebar / drawer): icon + count-up number, label under ------------------- */
.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; }
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.stat-tile__value {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stat-tile__value b { font-weight: 400; padding-top: 2px; }
.stat-tile__icon {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--accent-dim);
  border: 1px solid rgba(var(--accent-rgb), .22);
  color: var(--accent);
}
.stat-tile__icon svg { width: 15px; height: 15px; }
.stat-tile__label { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; }
.stat-tile--accent .stat-tile__value b { color: var(--accent); text-shadow: 0 0 14px rgba(var(--accent-rgb), .4); }

/* --- live drops feed (vertical) ------------------------------------------------------ */
.livefeed {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1 1 auto;
}
.livefeed__head { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.livefeed__title { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text); }
.livefeed__auto {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.livefeed__auto::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
/* the list is the clip (bottom fade); the track inside it is what slides when a row lands */
.livefeed__list { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 8px; -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent); mask-image: linear-gradient(#000 calc(100% - 44px), transparent); }
.livefeed__track { display: flex; flex-direction: column; gap: 6px; will-change: transform; }
.livefeed__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 6px 8px 6px 6px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color var(--dur), background-color var(--dur);
}
.livefeed__row:not([data-rarity="common"]) {
  background: linear-gradient(90deg, rgba(var(--rc-rgb), .16), var(--surface-2) 72%);
  border-color: rgba(var(--rc-rgb), .3);
}
@media (hover: hover) { .livefeed__row:hover { border-color: rgba(var(--rc-rgb), .55); } }
.livefeed__row.is-new { animation: feedIn .5s var(--ease-out) both; }
.livefeed__thumb {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 3px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(var(--rc-rgb), .62), rgba(var(--rc-rgb), .1) 78%), var(--surface-3);
  box-shadow: inset 0 0 0 1px rgba(var(--rc-rgb), .38), 0 0 14px rgba(var(--rc-rgb), .2);
}
.livefeed__thumb svg { width: 100%; height: 100%; }
.livefeed__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.livefeed__name { font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.livefeed__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.livefeed__value {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  padding: 3px 7px 1px;
  border-radius: 6px;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.livefeed__box { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@keyframes feedIn {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to { opacity: 1; transform: none; }
}

/* --- phone: horizontal live strip under the topbar (RB.ticker) --------------------------- */
.ticker--live { height: 56px; border-top: 0; background: rgba(20, 20, 24, .5); }
.ticker--live .ticker__live { padding-left: var(--shell-pad); }
@media (min-width: 1100px) { .ticker--live { display: none; } }

/* --- phone: bottom tab bar -------------------------------------------------------------- */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(10, 10, 12, .92);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .45);
}
.tabbar__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--tabbar-h);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur);
}
.tabbar__tab:hover { text-decoration: none; }
.tabbar__tab svg { width: 22px; height: 22px; flex: 0 0 auto; transition: transform .2s var(--ease-spring); }
.tabbar__tab:active svg { transform: scale(.9); }
.tabbar__tab .badge--count { top: 5px; right: auto; left: calc(50% + 4px); }
.tabbar__tab.is-active, .tabbar__tab.is-open { color: var(--accent); }
.tabbar__tab.is-active svg, .tabbar__tab.is-open svg { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .7)); }
.tabbar__tab.is-active::before {
  content: '';
  position: absolute; top: -1px; left: 50%;
  width: 28px; height: 2px;
  transform: translateX(-50%);
  border-radius: 0 0 2px 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.tabbar__tab:focus-visible { outline-offset: -4px; }
@media (min-width: 1100px) { .tabbar { display: none; } }

/* --- phone: slide-over drawer (from the left, between topbar and tabbar) -------------------- */
.drawer {
  position: fixed;
  left: 0; right: 0;
  top: var(--topbar-h);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  z-index: 96;
  visibility: hidden;
  transition: visibility 0s linear .32s;
}
.drawer.is-open { visibility: visible; transition-delay: 0s; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 12, .62); opacity: 0; transition: opacity .28s ease; }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(88vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--border);
  box-shadow: 24px 0 60px rgba(0, 0, 0, .6);
  transform: translate3d(-104%, 0, 0);
  transition: transform .32s var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.drawer__title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--text); line-height: 1; padding-top: 2px; }
.drawer__close {
  margin-left: auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  flex: 0 0 auto;
}
.drawer__close svg { width: 18px; height: 18px; }
@media (hover: hover) { .drawer__close:hover { border-color: var(--border-hover); background: var(--surface-2); } }
.drawer__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.drawer .livefeed { flex: 1 1 auto; min-height: 0; }
.drawer .livefeed__head { display: none; } /* the drawer header already says LIVE DROPS */
.drawer .livefeed__list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
.drawer .livefeed__list::-webkit-scrollbar { display: none; }
@media (max-width: 1099px) {
  html.drawer-open { overflow: hidden; }
  html.drawer-open body { overflow: visible; }
}
@media (min-width: 1100px) { .drawer { display: none; } }

/* --- things that sit above the tab bar: sticky buy bar + phone toasts ------------------------ */
@media (max-width: 899px) {
  body.has-tabbar .sticky-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
  body.has-tabbar.has-sticky-bar { padding-bottom: 0; }
  body.has-tabbar.has-sticky-bar .shell { padding-bottom: calc(var(--tabbar-h) + var(--sticky-bar-h, 76px) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 767px) {
  body.has-tabbar .toast-stack { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); }
  body.has-tabbar.has-sticky-bar .toast-stack { bottom: calc(var(--tabbar-h) + var(--sticky-bar-h, 76px) + 12px + env(safe-area-inset-bottom, 0px)); }
}

/* --- filter bar ------------------------------------------------------------------------- */
.filterbar {
  --fb-pad: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--fb-pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filterbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.filterbar__chips { flex: 1 1 100%; min-width: 0; }
/* chips scroll to the card's own edges, not the page gutters */
.filterbar .filter-chips--scroll { margin-inline: calc(-1 * var(--fb-pad)); padding-inline: var(--fb-pad); padding-bottom: 0; }
.filterbar .filter-chips { gap: 6px; }
.filterbar .chip { background: var(--surface-2); }
.filterbar .chip.is-active, .filterbar .chip[aria-pressed="true"] { background: var(--accent); }
.filterbar .search { flex: 1 1 100%; }
.filterbar .sort { flex: 1 1 auto; min-width: 0; }
.filterbar .sort .select { width: 100%; min-width: 0; }
.filterbar__count { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.filterbar__count b { color: var(--text); font-weight: 700; }
@media (min-width: 900px) {
  .filterbar { --fb-pad: 10px; gap: 8px; }
  .filterbar__chips { flex: 1 1 0; }
  .filterbar .search { flex: 0 1 300px; }
  .filterbar .sort { flex: 0 0 auto; }
  .filterbar .sort .select { width: auto; min-width: 190px; }
}
/* search input: magnifier left, clear button right */
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search__icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; transition: color var(--dur); }
.search:focus-within .search__icon { color: var(--accent); }
.search__input { padding-left: 42px; padding-right: 46px; min-height: 44px; padding-block: 9px; }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search__clear {
  position: absolute; right: 2px; top: 50%;
  width: 40px; height: 40px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--muted);
  transition: color var(--dur), background-color var(--dur);
}
.search__clear svg { width: 14px; height: 14px; }
.search__clear[hidden] { display: none; }
@media (hover: hover) { .search__clear:hover { color: var(--text); background: var(--surface-3); } }

/* --- compact banner (index): eyebrow, headline with one accent word, line, link, art right ------ */
.banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 14px 12px;
  background:
    radial-gradient(70% 90% at 100% 60%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(135deg, var(--surface-2), var(--surface) 70%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.banner::before {
  content: '';
  position: absolute; top: -1px; left: 16px; right: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), .45);
  pointer-events: none;
}
.banner__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* the eyebrow has ~200px beside the phone crate: tighter tracking, no bar, never wraps */
.banner .eyebrow { letter-spacing: .12em; white-space: nowrap; }
@media (max-width: 479px) { .banner .eyebrow--bar::before { display: none; } }
.banner__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 8.2vw, 56px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: break-word;
}
.banner__title em { font-style: normal; color: var(--accent); text-shadow: var(--accent-text-glow); }
.banner__text { font-size: 13px; line-height: 1.45; color: var(--text-2); max-width: 52ch; }
.banner__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -8px 0 -10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.banner__link::after { content: '\2193'; font-size: 13px; transition: transform var(--dur) var(--ease-out); }
.banner__link:hover { text-decoration: none; }
@media (hover: hover) { .banner__link:hover { text-shadow: var(--accent-text-glow); } .banner__link:hover::after { transform: translateY(3px); } }
.banner__art { position: relative; width: 96px; flex: 0 0 auto; align-self: end; }
.banner__art .box-art { width: 100%; }
/* three crates fanned out (desktop): the page renders three RB.boxArt calls inside */
.banner__art--cluster { display: none; }
@media (min-width: 768px) {
  .banner { padding: 20px 24px 18px; gap: 16px 28px; }
  .banner__text { font-size: 14px; }
  .banner__link { margin-bottom: -12px; }
  .banner__art { width: 190px; }
  .banner__art--single { display: none; }
  .banner__art--cluster { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; width: 300px; }
  .banner__art--cluster .box-art { width: 100%; }
  .banner__art--cluster > :nth-child(1) { width: 78%; justify-self: end; margin-right: -22%; opacity: .8; transform: translateY(6px); }
  .banner__art--cluster > :nth-child(2) { position: relative; z-index: 1; width: 100%; }
  .banner__art--cluster > :nth-child(3) { width: 78%; margin-left: -22%; opacity: .8; transform: translateY(6px); }
}
@media (min-width: 1440px) { .banner__art--cluster { width: 360px; } }

/* --- grid card (RB.renderGridCard, v3): the whole card is a link to box.html ------------------
   a.gcard > .gcard__photo (cover photo 1:1 + .gcard__badge "BLIND BOX" / "SET" + .gcard__flag)
           > .gcard__body (h3.gcard__name, .gcard__theme, .gcard__buy: .gcard__price pill + .gcard__hint)
   2 cols at 375 (12px gaps, ~166px cards), 3 >= 768, 4 >= 1100 (beside the sidebar), 5 >= 1440. */
.gcard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .gcard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .gcard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .gcard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
/* size-driven alternative for side sections ("more like this"): as many 160px cards as fit */
.gcard-grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) ease, box-shadow var(--dur) ease;
}
.gcard:hover { text-decoration: none; }
@media (hover: hover) {
  .gcard:hover {
    transform: translateY(-3px);
    border-color: var(--border-hover);
    box-shadow: var(--shadow), 0 0 0 1px rgba(var(--accent-rgb), .14), 0 0 36px rgba(var(--accent-rgb), .08);
  }
  .gcard:hover .gcard__img { transform: scale(1.04); }
  .gcard:hover .gcard__price { box-shadow: 0 0 22px rgba(var(--accent-rgb), .6); }
}
.gcard:active { transform: scale(.985); transition-duration: .08s; }
/* the photo: square, cover-fit, dark placeholder so a slow image never flashes white */
.gcard__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2) radial-gradient(70% 70% at 50% 40%, rgba(255, 255, 255, .05), transparent 70%);
  border: 1px solid rgba(255, 255, 255, .05);
}
.gcard__img, .gcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
.gcard__badge { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 7px 2px; font-size: 10px; }
.gcard__flag { position: absolute; top: 8px; right: 8px; z-index: 1; }
.gcard__body { display: flex; flex-direction: column; gap: 3px; padding: 2px 4px 4px; min-width: 0; }
.gcard__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  min-width: 0;
  padding-top: 2px;
  overflow-wrap: break-word;
}
.gcard__theme { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gcard__buy { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.gcard__price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px 3px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), .45);
  transition: box-shadow var(--dur) ease;
}
.gcard__hint { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.gcard--hero { border-color: var(--accent-border); box-shadow: var(--accent-glow); }
@media (min-width: 480px) {
  .gcard { padding: 10px; gap: 10px; }
  .gcard__name { font-size: 21px; }
  .gcard__body { padding: 0 4px 2px; }
}
/* 4-up beside the sidebar (1100-1439): ~186px cards, back to the phone sizing; 5-up from 1440
   (~214px cards) keeps the tighter padding so photo + name + price sit in one compact card */
@media (min-width: 1100px) and (max-width: 1439px) {
  .gcard { padding: 8px; gap: 8px; }
  .gcard__name { font-size: 19px; }
}
@media (min-width: 1440px) { .gcard { padding: 8px; } }
/* v2 leftovers (old crate cards): kept so an old page still lays out */
.gcard__art { position: relative; flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; min-height: 100px; }
.gcard__art .box-art { position: relative; width: 76%; max-width: 170px; height: auto; }
.gcard__pieces, .gcard__slots, .gcard__retail { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* --- gallery (RB.renderGallery / RB.gallery): big square photo + horizontal thumb strip --------
   .gallery > a.gallery__main (img.gallery__img + .gallery__zoom + .gallery__count) + .gallery__thumbs > button.gallery__thumb(.is-active) */
/* a grid with a minmax(0, 1fr) track: the thumb strip can never push the gallery (or its host column) wider than its container */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.gallery__thumbs { min-width: 0; }
.gallery__main {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2) radial-gradient(70% 70% at 50% 40%, rgba(255, 255, 255, .05), transparent 70%);
  -webkit-tap-highlight-color: transparent;
}
.gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__zoom, .gallery__count {
  position: absolute; bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(10, 10, 12, .7);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--text);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gallery__zoom { right: 10px; width: 36px; height: 36px; }
.gallery__zoom svg { width: 18px; height: 18px; }
.gallery__count { left: 10px; height: 28px; padding: 0 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .gallery__main:hover { border-color: var(--border-hover); } .gallery__main:hover .gallery__zoom { background: var(--accent); color: var(--bg); border-color: var(--accent); } }
.gallery__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 3px;
  margin: -3px;
  scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  opacity: .72;
  scroll-snap-align: start;
  cursor: pointer;
  transition: opacity var(--dur), border-color var(--dur), box-shadow var(--dur), transform .12s var(--ease-out);
}
.gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .gallery__thumb:hover { opacity: 1; border-color: var(--border-hover); } }
.gallery__thumb:active { transform: scale(.96); }
.gallery__thumb.is-active, .gallery__thumb[aria-selected="true"] { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(var(--accent-rgb), .35); }
/* a bare photo (RB.renderPhoto default class) */
.photo { display: block; max-width: 100%; height: auto; border-radius: 8px; background: var(--surface-2); object-fit: cover; }
/* the seller's gallery as a grid ("what could be inside" on the box page) */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.photo-grid a, .photo-grid .photo-grid__item { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .photo-grid a:hover { border-color: var(--accent-border); } }

/* thin stacked rarity-distribution bar (RB.renderMixBar / every slot's pool combined) */
.mix-bar { display: flex; gap: 2px; height: 4px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.mix-bar i { display: block; height: 100%; flex: 0 0 auto; min-width: 3px; border-radius: 2px; background: var(--rc); box-shadow: 0 0 6px rgba(var(--rc-rgb), .8); }
.mix-bar--lg { height: 6px; }
.gcard__mix { margin-top: 2px; }

/* --- reduced motion for the shell ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .livefeed__row.is-new { animation: none; }
  .livefeed__track { transition: none !important; transform: none !important; }
  .drawer, .drawer__panel, .drawer__backdrop { transition: none; }
  .gcard:hover, .gcard:hover .box-art, .gcard:hover .gcard__img { transform: none; }
  .gallery__thumb, .gcard__img { transition: none; }
  .tabbar__tab svg { transition: none; }
}

/* Recent drops: real QC photos in the feed rows and ticker chips */
.livefeed__row--qc { display: block; padding: 0; }
.livefeed__row--qc .livefeed__link {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px;
  min-height: 58px; padding: 6px 8px 6px 6px; border-radius: inherit;
  color: inherit; text-decoration: none;
}
.livefeed__row--qc:not([data-rarity="common"]) { background: var(--surface-2); border-color: var(--border); }
@media (hover: hover) { .livefeed__row--qc:hover { border-color: var(--accent-border); } }
.livefeed__thumb--img { padding: 0; overflow: hidden; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border-hover); }
.livefeed__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.livefeed__value--tag { color: var(--accent); }
.livefeed__row--qc { --rc: var(--accent); --rc-rgb: var(--accent-rgb); }
.ticker__chip--qc { color: inherit; text-decoration: none; }
.ticker__avatar--img { padding: 0; overflow: hidden; background: var(--surface-2); }
.ticker__avatar--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.ticker__chip--qc .ticker__item { color: var(--text); }
@media (hover: hover) { .livefeed__row--qc:hover .livefeed__thumb--img img, .ticker__chip--qc:hover img { transform: scale(1.06); } .livefeed__thumb--img img, .ticker__avatar--img img { transition: transform var(--dur) var(--ease-out); } }

/* Recent drops: minimize / restore (html.drops-min, saved in localStorage) */
.livefeed__min, .ticker__min {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background-color var(--dur);
}
.livefeed__min svg, .ticker__min svg { width: 14px; height: 14px; }
@media (hover: hover) { .livefeed__min:hover, .ticker__min:hover { color: var(--text); border-color: var(--border-hover); background: var(--surface-2); } }
.livefeed__min { margin-left: 4px; }
.drawer .livefeed__min { display: none; }
.sidebar__rail { display: none; }
@media (min-width: 1100px) {
  html.drops-min .shell__body:not(.shell__body--full) { grid-template-columns: 56px minmax(0, 1fr); }
  html.drops-min .sidebar { width: 56px; padding: 0; overflow: visible; }
  html.drops-min .sidebar .livefeed { display: none; }
  html.drops-min .sidebar__rail {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 56px; padding: 14px 0 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: color var(--dur), border-color var(--dur), box-shadow var(--dur);
  }
  html.drops-min .sidebar__rail svg { width: 22px; height: 22px; color: var(--accent); }
  html.drops-min .sidebar__rail span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
  html.drops-min .sidebar__rail:hover { color: var(--text); border-color: var(--accent-border); box-shadow: 0 0 16px rgba(var(--accent-rgb), .18); }
}
/* phone: the strip hides; the tab still opens the drawer */
.ticker__min { position: absolute; right: var(--shell-pad); top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; box-shadow: -14px 0 18px 6px rgba(14, 14, 17, .92); }
.ticker--live .ticker__viewport { padding-right: 52px; }
html.drops-min .ticker--live { display: none; }
.drawer__pin {
  margin-left: auto;
  min-height: 44px; padding: 0 14px;   /* 44px tap target like every other shell control */
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
}
.drawer__pin + .drawer__close { margin-left: 0; }