/* store.css — the ONE public storefront stylesheet (storefront redesign Wave 1, 2026-07-24).
 *
 * Replaces the five hand-copied inline <style> blocks that store_public / store_card /
 * store_games / store_visit / store_order each carried. Those blocks rode every HTML response,
 * and storefront HTML is `no-store` (pos_routes._SECURITY_HEADERS) — so the same ~4 KB of CSS was
 * re-sent on EVERY pageview and could never be cached. This file is served through the TIER 2
 * Item B lane instead (public, immutable, ?v=<content hash>), so the edge holds it once per
 * deploy. Extracting it is a bandwidth WIN, not a cost — the point matters on a 5 GB/mo plan.
 *
 * DESIGN — Direction "Case" (Mason's pick, 2026-07-24): the display counter after closing time.
 * Blue-black ground with a deliberate violet bias so nothing reads as default grey; an
 * iridescent foil treatment lifted off a holo card, RATIONED to price + hero + primary action;
 * a specular sweep that crosses a tile on hover, which is what a holo actually does when you
 * tilt it under the counter light.
 *
 * TWO CONTRACTS THIS FILE MUST NOT BREAK
 *   1. `--grn` is the accent token and is LOAD-BEARING: it carries the owner's `store_accent`
 *      setting. Three writers, cited by NAME because line numbers rot (wave 9B shortened
 *      store-card.js by 40 lines and left this note pointing past its end): the SERVER fills it
 *      into the `<body style>` of every public storefront page (store_screens._chrome →
 *      {{SITE_STYLE}}), and store.js's + store-card.js's `applySite` both setProperty it from the
 *      island as the belt. Renaming it silently kills the feature. Everything accent-coloured
 *      therefore rides `--grn`, and the foil gradient is DERIVED from it (color-mix) so a custom
 *      accent stays coherent instead of clashing.
 *   2. Every class name here already exists in the shipped markup or is emitted by store.js /
 *      store-card.js / store-cart.js. Wave 1 is a pure presentation change: no JS was touched,
 *      no rendered class was renamed. That is why it can ship on its own.
 *
 * CASCADE — `.hero`, `.notfound`, `.backlink` and `main` mean DIFFERENT things on different
 * pages (a hero banner on the shop, a card header on the copy picker). Five templates that each
 * owned their own stylesheet could collide freely; one shared sheet cannot. Every genuinely
 * ambiguous selector is scoped to a `.pg-*` body class. Do not un-scope them.
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ground + surfaces — blue-black, violet-biased. Not a neutral grey by accident. */
  --bg:        #0A0C14;
  --sunk:      #070911;
  --pan:       #141827;
  --pan2:      #1B2033;
  --ln:        #272E47;
  --ln-soft:   #1E2437;
  --txt:       #EDEFF7;
  --mut:       #8D95B2;

  /* --grn is the ACCENT and the owner's `store_accent` override target. Do not rename. */
  --grn:       #5BE3B4;
  --grn-deep:  #2E7F68;
  --gold:      #F2A93B;
  --bad:       #E58A8A;

  /* Foil — derived from the accent so an owner override stays coherent. Only ever used on
     price, the hero emphasis, and the primary CTA. @supports-gated below; see .pr / .hero h1. */
  --foil: linear-gradient(102deg,
            var(--grn) 0%,
            color-mix(in oklab, var(--grn) 55%, #7FD8FF) 48%,
            color-mix(in oklab, var(--grn) 42%, #B9A0FF) 100%);

  --shadow-lift: 0 16px 34px -16px rgba(0, 0, 0, .72);
  --wrap:      1260px;
  /* The page gutter. A token because the home rails bleed to the viewport edge by cancelling it
     (margin: -gut / padding: +gut) — if that ever drifts from main's padding the rails misalign
     with everything above them, so both read the same variable and the breakpoints move it once. */
  --gut:       22px;
  --r-sm:      8px;
  --r:         12px;
  --r-lg:      18px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.mut { color: var(--mut); }

/* Keyboard focus was invisible on the old sheet — every interactive surface here is reachable
   and shows it. */
:focus-visible {
  outline: 2px solid var(--grn);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Inline SVG nav/CTA icons (store_screens._NAV_ITEMS, _SELL_BTN_HTML). Sized by attribute so
   they also render correctly on /sell, which shares the nav fragment but not this stylesheet. */
.ic { flex: none; vertical-align: -.16em; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   HEADER / NAV — glass over the ground, sticky on every page
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 12, 20, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ln);
}
.topwrap {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 22px; flex-wrap: wrap;
}
.pg-order .topwrap { max-width: 760px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font-weight: 800; font-size: 17px; letter-spacing: -.02em; white-space: nowrap;
}
.brand .ic { color: var(--grn); }
/* The SQUARE mark flavour (store_screens._brand_html). The upload lane flattens every slot to
   RGB JPEG, so a transparent corner arrives BLACK — the circular clip is what throws those
   corners away, which is why the slot's help text promises a circle. */
.brand .bmark {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; object-fit: cover; display: block;
}
.brand .bname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; gap: 1px; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 9px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--mut); font-weight: 600;
  transition: color .14s, background .14s;
}
.nav a:hover, .nav a.on { color: var(--txt); background: var(--pan2); }
.nav a.on .ic { color: var(--grn); }

.navitem { position: relative; display: inline-flex; }
.navdd {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 40;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .62);
}
.navitem:hover .navdd, .navitem:focus-within .navdd { display: flex; }
.navdd a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--txt); font-weight: 600; white-space: nowrap;
}
.navdd a:hover { background: var(--pan2); }
.navdd .ddi { width: 18px; text-align: center; flex: none; }
.navdd .ddc {
  margin-left: auto; color: var(--mut); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.search { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.search input {
  background: var(--pan); border: 1px solid var(--ln); color: var(--txt);
  border-radius: var(--r-sm); padding: 8px 13px; font-size: 13.5px;
  width: 208px; max-width: 52vw; font-family: inherit;
}
.search input::placeholder { color: var(--mut); }
.search input:focus { outline: 0; border-color: var(--grn); }

.sellbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--gold); border: 1px solid var(--gold);
  border-radius: var(--r-sm); padding: 9px 15px;
  font-weight: 700; cursor: pointer; font-size: 13.5px; white-space: nowrap;
  transition: background .14s, color .14s;
}
.sellbtn:hover { background: var(--gold); color: #1A1206; }
.pg-games .sellbtn, .pg-visit .sellbtn, .pg-page .sellbtn { margin-left: auto; }

.cartbtn {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: var(--pan); border: 1px solid var(--ln); color: var(--txt);
  border-radius: var(--r-sm); padding: 9px 14px;
  font-weight: 700; cursor: pointer; font-size: 13.5px; white-space: nowrap;
  transition: border-color .14s;
}
.cartbtn:hover { border-color: var(--grn); }
.cartbtn .ccnt {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--grn); color: #08130C; border-radius: 999px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.backlink { font-size: 13px; color: var(--mut); }
.backlink:hover { color: var(--grn); }
.pg-order .backlink { margin-left: auto; }

/* ── ONE ROW above the phone breakpoint ─────────────────────────────────────────────────────
   The header used to wrap to two rows on any window narrower than ~1400px: nav on row 1, search
   and cart on row 2. This puts them back on one line and takes ~30px of height out of the bar.

   Scoped to min-width:621px ON PURPOSE. The 620px block near the bottom of this sheet BUILDS the
   phone header out of flex wrapping — .nav is pushed onto its own swipeable row by
   `order:3; flex-basis:100%` — so a global `flex-wrap:nowrap` would silently delete the mobile
   nav rail. Above 620px there is no second row to build, so nowrap is free.

   A shop with eight categories genuinely cannot fit brand + nav + search + cart on one line at
   1000px, so the nav is the part that gives: it scrolls sideways rather than wrapping. Two
   details make that honest instead of hostile:
     · `flex: 1 1 auto` makes .nav claim the leftover space, so when the categories DO fit, the
       right-edge fade below lands on empty space and is invisible. It only ever appears over a
       real item, which is precisely when it means "there is more this way".
     · `min-width: 0` is required — a flex item's default min-width is its content, so without
       it the nav refuses to shrink and shoves the search box off the end of the bar instead. */
@media (min-width: 621px) {
  .topwrap { flex-wrap: nowrap; }
  .nav {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  /* A scroll container clips its children on BOTH axes — `overflow-x:auto` forces overflow-y to
     compute to auto, never visible — so .navdd, which hangs BELOW the nav, is cut off the moment
     the nav becomes scrollable. Rather than ship a menu that is clipped at some widths and not
     others, the hover menu is off wherever the nav scrolls, exactly as it already is on phones
     (see the 620px block): the label itself navigates to the collection page, which is the
     documented no-JS fallback and reaches the same games with one more click. */
  .navdd { display: none !important; }
  /* Icons cost ~21px per item — real money when eight categories are competing for one row.
     They come back at the width where the whole nav fits without scrolling. */
  .nav .ic { display: none; }
}
@media (min-width: 1180px) {
  .nav .ic { display: inline-block; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
main { max-width: var(--wrap); margin: 0 auto; padding: 24px var(--gut) 64px; }
.pg-games main { max-width: 1060px; }
.pg-visit main, .pg-order main { max-width: 760px; }
/* wider than the other narrow pages because a policy page carries a contents rail beside the
   column; the column itself is still held to a reading measure by .doc. */
.pg-page main { max-width: 960px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   HERO — the shop / games / visit banner. (.pg-card .hero is the copy-picker card header and
   is defined separately further down; the two are unrelated despite the shared name.)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.pg-shop .hero, .pg-games .hero, .pg-visit .hero, .pg-page .hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(72% 130% at 82% -18%, rgba(91, 227, 180, .15), transparent 62%),
    radial-gradient(58% 108% at 8% 118%, rgba(150, 120, 255, .12), transparent 60%),
    var(--sunk);
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  padding: 34px 32px;
  margin-bottom: 24px;
}
.pg-shop .hero h1, .pg-games .hero h1, .pg-visit .hero h1, .pg-page .hero h1 {
  font-size: 34px; line-height: 1.06; letter-spacing: -.025em;
  margin: 0 0 10px; font-weight: 800; text-wrap: balance;
}
.pg-games .hero h1, .pg-visit .hero h1, .pg-page .hero h1 { margin-bottom: 0; }
.pg-shop .hero p {
  color: var(--mut); font-size: 15.5px; line-height: 1.62; margin: 0; max-width: 58ch;
}

/* The foil emphasis. Gated: if color-mix is unsupported the whole block is skipped and .g
   keeps the solid accent below, so the headline can never render invisible. */
.hero h1 .g, .hhcopy h1 .g { color: var(--grn); }
@supports (color: color-mix(in oklab, red, blue)) {
  .hero h1 .g, .hhcopy h1 .g {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   FILTER BAR + SORT (store.js renderFilters) — Wave 5, 2026-07-25

   Replaces the flat pill rows: one dropdown per family, multi-select inside, plus sort. The
   bar WRAPS rather than scrolls on purpose — an absolutely-positioned panel inside an
   overflow-x container is clipped by it, which is the trap the one-row nav hit. See store.js.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.fchips { margin: 0 0 16px; }
.fchips:empty { margin: 0; }
/* `position: relative` here is the mobile anchor: below 620px the panel positions against the
   BAR instead of the button (see the breakpoint), which is what keeps a wide panel opened from
   a right-hand menu from hanging off the viewport and forcing the page to scroll sideways. */
.fbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }

.fdd { position: relative; }
.fddbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pan); border: 1px solid var(--ln); color: var(--txt);
  border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: border-color .14s, background .14s;
}
.fddbtn:hover { border-color: var(--mut); }
.fddbtn:focus-visible { outline: 2px solid var(--grn); outline-offset: 2px; }
.fddbtn.on { border-color: var(--grn); background: color-mix(in oklab, var(--grn) 12%, var(--pan)); }
.fdd.open .fddbtn { border-color: var(--grn); }
/* the count badge — how many values are picked inside a CLOSED menu */
.fcnt {
  background: var(--grn); color: #08130C; border-radius: 999px;
  min-width: 17px; height: 17px; padding: 0 5px; font-size: 10.5px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.fcar {
  width: 0; height: 0; margin-left: 1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--mut); transition: transform .16s;
}
.fdd.open .fcar { transform: rotate(180deg); }
.fsort { margin-left: auto; }
.fsortl {
  color: var(--mut); font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
}
.fsortv { color: var(--txt); }

/* the panel */
.fddp {
  position: absolute; z-index: 40; top: calc(100% + 7px); left: 0;
  min-width: 236px; max-width: min(330px, calc(100vw - 2 * var(--gut)));
  background: var(--pan2); border: 1px solid var(--ln); border-radius: var(--r);
  box-shadow: var(--shadow-lift); padding: 7px;
  /* the checkbox and radio inside are NATIVE controls: without this they paint as bright
     white squares on the dark panel, because a UA only darkens form controls when the page
     declares it handles a dark scheme. Scoped to the panel — nothing else here is native. */
  color-scheme: dark;
}
.fddp-r { left: auto; right: 0; }
.fopts { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.fopt {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer;
  font-size: 13px; color: var(--txt); line-height: 1.25;
}
.fopt:hover { background: var(--pan); }
.fopt.on { color: var(--txt); }
.fopt input { accent-color: var(--grn); margin: 0; flex: none; cursor: pointer; }
.foptl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foptn {
  color: var(--mut); font-size: 11px; flex: none;
  font-variant-numeric: tabular-nums;
}
.fsrch {
  width: 100%; margin-bottom: 6px;
  background: var(--sunk); border: 1px solid var(--ln); border-radius: var(--r-sm);
  color: var(--txt); padding: 8px 10px; font-size: 12.5px; font-family: inherit;
}
.fsrch::placeholder { color: var(--mut); }
.fsrch:focus { outline: 0; border-color: var(--grn); }
.fnone { color: var(--mut); font-size: 12.5px; padding: 10px 9px; }
.fclr {
  width: 100%; margin-top: 6px; background: none; border: 0; border-top: 1px solid var(--ln-soft);
  color: var(--mut); padding: 9px 0 4px; font-size: 12px; font-family: inherit;
  cursor: pointer; text-align: left; padding-left: 9px;
}
.fclr:hover { color: var(--txt); }

/* the active-filter summary row — what a closed menu would otherwise hide */
.fsum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.fsel {
  display: inline-flex; align-items: center; gap: 7px;
  background: color-mix(in oklab, var(--grn) 14%, var(--pan));
  border: 1px solid color-mix(in oklab, var(--grn) 42%, var(--ln));
  color: var(--txt); border-radius: 999px; padding: 4px 8px 4px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.fsel:hover { border-color: var(--grn); }
.fx { color: var(--mut); font-size: 10px; }
.fsel:hover .fx { color: var(--txt); }
.fclrall {
  background: none; border: 0; color: var(--mut); font-size: 12px; font-family: inherit;
  cursor: pointer; padding: 4px 6px; text-decoration: underline;
}
.fclrall:hover { color: var(--txt); }
.rc {
  color: var(--mut); font-size: 12.5px; margin: 0 0 14px; min-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PRODUCT GRID + TILES (store.js tile/itemTile, store-card.js copy tiles)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 18px;
}

.pcard, .ctile {
  position: relative;
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), border-color .18s, box-shadow .18s;
}
.pcard:hover, .ctile:hover {
  transform: translateY(-4px);
  border-color: var(--grn);
  box-shadow: var(--shadow-lift);
}
.ctile.focus { border-color: var(--grn); box-shadow: 0 0 0 1px var(--grn); }

.pcard .ph, .ctile .ph {
  position: relative; aspect-ratio: .715; background: var(--sunk); overflow: hidden;
}
.pcard .ph img, .ctile .ph img { width: 100%; height: 100%; object-fit: contain; }
.phitem img { object-fit: contain; padding: 9px; }

/* The specular sweep — Direction "Case". A neutral white band crosses the art on hover, so it
   reads as foil under counter light regardless of what accent the owner picked. Purely
   decorative and pointer-transparent, so it never eats a tile click. */
.pcard .ph::after, .ctile .ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 34%, rgba(255, 255, 255, .30) 47%, rgba(255, 255, 255, .16) 53%, transparent 66%);
  transform: translateX(-125%);
  transition: transform .62s cubic-bezier(.3, .7, .3, 1);
}
.pcard:hover .ph::after, .ctile:hover .ph::after { transform: translateX(125%); }

.pcard .badge, .ctile .badge {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  background: rgba(7, 9, 17, .82); border: 1px solid rgba(255, 255, 255, .16);
  color: var(--txt); font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 999px; backdrop-filter: blur(4px);
  font-variant-numeric: tabular-nums;
}

.pcard .body, .ctile .body {
  padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1;
}
.pcard .nm {
  font-weight: 700; font-size: 14px; line-height: 1.28;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pcard .sub {
  font-size: 11.5px; color: var(--mut); margin: 3px 0 auto;
  font-variant-numeric: tabular-nums;
}
.pcard .idesc, .hero .idesc {
  font-size: 12px; color: var(--mut); margin: 3px 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard .vchips, .hero .vchips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 9px; }
.pcard .vchip, .hero .vchip, .ctile .cbadge, .hero .cbadge, .fcvc .cbadge {
  font-size: 10px; background: var(--pan2); border: 1px solid var(--ln); color: var(--mut);
  padding: 2px 8px; border-radius: 999px;
}
.pcard .newchip, .hero .newchip {
  color: #1B1206; background: var(--gold); border-color: var(--gold); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.pcard .row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 11px;
}

/* Price — the one place the foil is spent on the grid. Same @supports guard as the hero. */
.pr {
  font-weight: 800; font-size: 16.5px; letter-spacing: -.02em;
  color: var(--grn); font-variant-numeric: tabular-nums;
}
.pr.big { font-size: 26px; }
.pr small {
  color: var(--mut); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: .06em;
}
@supports (color: color-mix(in oklab, red, blue)) {
  .pr {
    background: var(--foil);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .pr small { -webkit-text-fill-color: var(--mut); }
}
.cmp { font-size: 11px; color: var(--mut); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cmp .strike { text-decoration: line-through; opacity: .8; }
.choose {
  color: var(--grn); font-size: 12px; font-weight: 700; white-space: nowrap;
}

.addbtn {
  background: var(--grn); color: #08130C; border: 0; border-radius: var(--r-sm);
  padding: 9px 16px; font-weight: 800; font-size: 12.5px; cursor: pointer;
  white-space: nowrap; font-family: inherit; transition: filter .14s, transform .12s;
}
.addbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ctile .addbtn { width: 100%; margin-top: 9px; }
.askchip {
  display: block; text-align: center; background: var(--pan2);
  border: 1px dashed var(--ln); color: var(--mut); border-radius: var(--r-sm);
  padding: 9px 12px; font-weight: 700; font-size: 12px; margin-top: 9px; line-height: 1.4;
}
.storeempty {
  grid-column: 1 / -1; text-align: center; color: var(--mut);
  padding: 66px 16px; font-size: 15px; line-height: 1.65;
  border: 1px dashed var(--ln); border-radius: var(--r-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   COPY-PICKER PAGE (.pg-card — store_card.html + store-card.js)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.pg-card .hero {
  display: flex; gap: 24px; align-items: flex-start; margin: 18px 0 8px; flex-wrap: wrap;
}
/* position:relative (SLAB-PAGES wave): the slab hero's absolute .flipbtn anchors to the art
 * column — without it the button would anchor to the viewport. */
.pg-card .hero .art { width: 158px; flex: none; position: relative; }
.pg-card .hero .art img { width: 100%; border-radius: var(--r); border: 1px solid var(--ln); }
/* WAVE 9B (review find): the CARD hero is server HTML now, so it is the first content on the
 * page and its image starts loading at parse — which means an unsized art box shifts EVERYTHING
 * below it (the scanned-copy panel, the copy prices, the Reserve buttons) the moment the picture
 * decodes. Reserve the box at a card's aspect, exactly as the tile lane already does
 * (.pcard .ph / .ctile .ph above). Scoped to .cardart, NOT .art: the SLAB hero shares
 * `.pg-card .hero .art` and a slab photo is not card-shaped.
 * :empty is the other half — store-lightbox.js's fallback REMOVES a broken <img> but leaves this
 * wrapper, and a 158px-wide empty box indents the hero text with nothing beside it. */
.pg-card .hero .cardart { aspect-ratio: .715; }
.pg-card .hero .art:empty { display: none; }
.pg-card .hero .hinfo { flex: 1; min-width: 250px; }
.pg-card .hero h1 {
  font-size: 32px; margin: 0 0 4px; letter-spacing: -.025em; line-height: 1.06;
  font-weight: 800; text-wrap: balance;
}
.hsub {
  color: var(--mut); font-size: 14.5px; margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.spec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 1px; background: var(--ln); border: 1px solid var(--ln);
  border-radius: var(--r); overflow: hidden; margin: 18px 0;
}
.spec .s { background: var(--pan); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.spec .sk {
  font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--mut); font-weight: 800;
}
.spec .sv { font-size: 14px; font-weight: 700; }
.tchip {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 999px; background: var(--pan2); border: 1px solid var(--ln); margin-right: 4px;
}

/* the ?copy= deep-link callout — the copy the printed QR pointed at */
.fcopy {
  background:
    radial-gradient(60% 120% at 8% 0%, rgba(91, 227, 180, .14), transparent 62%), var(--pan);
  border: 1px solid var(--grn-deep); border-radius: var(--r-lg); padding: 20px; margin: 16px 0;
}
.fctag {
  color: var(--grn); font-size: 11px; font-weight: 800; margin-bottom: 13px;
  text-transform: uppercase; letter-spacing: .1em;
}
.fcgrid { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.fcphoto { width: 176px; flex: none; position: relative; }
.fcphoto img { width: 100%; border-radius: var(--r); border: 1px solid var(--ln); }
.fcinfo { flex: 1; min-width: 220px; }
.fcname { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.fcsub { color: var(--mut); font-size: 13px; margin: 3px 0 9px; }
.fcvc { font-size: 14px; font-weight: 700; margin-bottom: 9px; }
.fcsku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: var(--mut); margin-top: 11px;
}
.fcgone {
  background: rgba(242, 169, 59, .10); border: 1px solid var(--gold); color: #F5C87E;
  border-radius: var(--r); padding: 14px 17px; margin: 16px 0; font-size: 14px; line-height: 1.55;
}
.addbtn.fcadd { width: auto; font-size: 14px; padding: 12px 20px; margin-top: 13px; }

.vfrow { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 13px; }
.vf {
  background: var(--pan); border: 1px solid var(--ln); color: var(--mut);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: color .14s, border-color .14s;
}
.vf:hover { color: var(--txt); border-color: var(--mut); }
.vf.on { background: var(--grn); color: #08110A; border-color: var(--grn); }

.ctile .vc {
  display: flex; gap: 6px; align-items: center; font-size: 12px;
  font-weight: 700; flex-wrap: wrap; margin-bottom: 6px;
}
.ctile .pwrap { margin: 2px 0 4px; margin-top: auto; }
.ctile .sku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--mut); margin-top: 7px; text-align: center;
}
.flipbtn {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  background: rgba(7, 9, 17, .80); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  border-radius: var(--r-sm); padding: 5px 10px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; line-height: 1.2; font-family: inherit; backdrop-filter: blur(4px);
}
.flipbtn:hover { border-color: var(--grn); }
img[data-scan-sku] { cursor: zoom-in; }

/* lightbox */
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
#lightbox[hidden] { display: none; }
.lbxmask { position: absolute; inset: 0; background: rgba(0, 0, 0, .86); }
.lbxwrap { position: relative; overflow: hidden; border-radius: var(--r-lg); max-width: 90vw; max-height: 90vh; }
.lbximg {
  display: block; max-width: 90vw; max-height: 90vh;
  transform-origin: 50% 50%; transition: transform .18s ease; cursor: zoom-in;
}
.lbximg.zoomed { cursor: zoom-out; }
.lbxclose {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  background: rgba(7, 9, 17, .80); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  border-radius: var(--r); width: 38px; height: 38px; font-size: 16px; cursor: pointer;
  line-height: 1; font-family: inherit;
}
.lbxflip {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: rgba(7, 9, 17, .80); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  border-radius: var(--r-sm); padding: 8px 14px; font-size: 13px; font-weight: 700;
  cursor: pointer; line-height: 1.2; font-family: inherit;
}
.lbxclose:hover, .lbxflip:hover { border-color: var(--grn); }

.pg-card .notfound, .pg-order .notfound {
  text-align: center; padding: 76px 0; color: var(--mut); font-size: 15px; line-height: 1.7;
}
/* W9C 2026-07-29: on a SOLD-OUT card page the server prints its body into #cardgone, a sibling
   ABOVE the copy picker. The picker still ships its throwaway "Loading the copies in stock…"
   placeholder — true on a card that has copies, a LIE sitting under a sold-out message — so it is
   hidden whenever #cardgone is present. Deliberately CSS and not JS: the customer whose script
   never runs is the whole reason that message moved server-side, and a script-gated fix would
   leave them reading "Loading…" forever. store-card.js clears #card as well when it does run. */
#cardgone ~ #card { display: none; }
.pg-order .notfound h1 { font-size: 27px; margin: 0 0 10px; color: var(--txt); letter-spacing: -.02em; }
.pg-order .notfound p { color: var(--mut); font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   RESERVATION CART DRAWER (store-cart.js — loaded by both public product pages)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
#cartwrap { position: fixed; inset: 0; z-index: 80; }
#cartmask { position: absolute; inset: 0; background: rgba(0, 0, 0, .58); }
.cartpanel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 388px; max-width: 94vw;
  background: var(--pan); border-left: 1px solid var(--ln);
  display: flex; flex-direction: column;
}
.carthead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--ln); font-size: 16px;
}
.cartx { background: none; border: 0; color: var(--mut); font-size: 18px; cursor: pointer; font-family: inherit; }
.cartx:hover { color: var(--txt); }
.cartitems { flex: 1; overflow-y: auto; padding: 6px 18px; }
.citem { display: flex; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--ln-soft); }
.citem img { width: 40px; border-radius: 5px; flex: none; }
.cimain { min-width: 0; }
.cinm { font-weight: 700; font-size: 13px; }
.cimeta { color: var(--mut); font-size: 11px; margin-top: 2px; }
.cisku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--mut); margin-top: 2px;
}
.cipr {
  font-weight: 800; color: var(--grn); font-size: 13px; margin-left: auto;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cirm { background: none; border: 0; color: var(--mut); cursor: pointer; font-size: 14px; flex: none; font-family: inherit; }
.cirm:hover { color: var(--bad); }
.cqty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qbtn {
  background: var(--pan2); border: 1px solid var(--ln); color: var(--txt);
  border-radius: 6px; width: 24px; height: 24px; font-size: 14px; cursor: pointer;
  line-height: 1; font-family: inherit;
}
.qbtn:hover { border-color: var(--grn); }
.qn { font-size: 13px; font-weight: 700; min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.cartempty { color: var(--mut); text-align: center; padding: 40px 10px; font-size: 13.5px; line-height: 1.6; }
.cartfoot {
  border-top: 1px solid var(--ln); padding: 14px 18px 18px;
  display: flex; flex-direction: column; gap: 9px;
}
.cartrow { display: flex; justify-content: space-between; font-size: 15px; font-variant-numeric: tabular-nums; }
.carthint { color: var(--mut); font-size: 11.5px; line-height: 1.5; }
.coinput {
  background: var(--sunk); border: 1px solid var(--ln); color: var(--txt);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 14px; font-family: inherit;
}
.coinput::placeholder { color: var(--mut); }
.coinput:focus { outline: 0; border-color: var(--grn); }
.cartgo {
  background: var(--grn); color: #08130C; border: 0; border-radius: var(--r-sm);
  padding: 13px; font-weight: 800; font-size: 14.5px; cursor: pointer; font-family: inherit;
}
.cartgo:hover:not(:disabled) { filter: brightness(1.08); }
.cartgo:disabled { opacity: .5; cursor: default; }
.comsg { font-size: 12.5px; line-height: 1.5; }
.comsg.err { color: var(--bad); }
.comsg.ok { color: var(--grn); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   GAME COLLECTION PAGE (.pg-games)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
.gtile {
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r-lg);
  padding: 28px 18px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 9px;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), border-color .18s, box-shadow .18s;
}
.gtile:hover { transform: translateY(-4px); border-color: var(--grn); box-shadow: var(--shadow-lift); }
.gi { font-size: 40px; line-height: 1; }
.gn { font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; }
.gc { color: var(--mut); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gempty, .vempty {
  color: var(--mut); text-align: center; padding: 60px 16px; font-size: 15px;
  border: 1px dashed var(--ln); border-radius: var(--r-lg); line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   VISIT PAGE (.pg-visit)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.vcard {
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 22px 24px; margin-bottom: 14px;
}
.vcard h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; margin: 0 0 11px; color: var(--grn);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 800;
}
.vcard p { margin: 0; color: var(--txt); font-size: 15px; line-height: 1.7; white-space: pre-line; }
.vcard a { color: var(--grn); font-weight: 700; }
.vcard a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   RESERVATION STATUS PAGE (.pg-order)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.codecard {
  background:
    radial-gradient(70% 140% at 50% -10%, rgba(91, 227, 180, .16), transparent 64%), var(--pan);
  border: 1px solid var(--grn-deep); border-radius: var(--r-lg);
  padding: 26px 22px; margin: 16px 0; text-align: center;
}
.codetag {
  color: var(--grn); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
}
.code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 40px; font-weight: 800; letter-spacing: .08em; margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}
.codehint { color: var(--mut); font-size: 13px; line-height: 1.55; }
.stchip {
  display: inline-block; font-size: 10.5px; font-weight: 800; padding: 4px 12px;
  border-radius: 999px; margin-top: 12px; background: var(--pan2); border: 1px solid var(--ln);
  text-transform: uppercase; letter-spacing: .07em;
}
.stchip.new { border-color: var(--grn); color: var(--grn); }
.stchip.cancelled, .stchip.expired { border-color: #A34E4E; color: var(--bad); }
.misscard {
  background: rgba(242, 169, 59, .10); border: 1px solid var(--gold); border-radius: var(--r);
  padding: 15px 18px; margin: 16px 0; font-size: 14px; line-height: 1.6; color: #F5C87E;
}
.lines {
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  margin: 16px 0; overflow: hidden;
}
.lrow { display: flex; gap: 14px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--ln-soft); }
.lrow:last-child { border-bottom: 0; }
.lrow img { width: 46px; border-radius: 6px; flex: none; }
.lmain { flex: 1; min-width: 0; }
.lnm { font-weight: 700; font-size: 14.5px; }
.lsub { color: var(--mut); font-size: 12px; margin-top: 3px; }
.lsku {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; color: var(--mut); margin-top: 3px;
}
.lpr { font-weight: 800; color: var(--grn); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.totrow {
  display: flex; justify-content: space-between; padding: 15px 16px;
  background: var(--pan2); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
}
.taxnote { padding: 9px 16px 13px; background: var(--pan2); color: var(--mut); font-size: 12px; }
.infocard {
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 17px 19px; margin: 16px 0; font-size: 14px; line-height: 1.7;
}
.infocard b { color: var(--txt); }
.browsebtn {
  display: inline-block; margin-top: 18px; background: var(--grn); color: #08130C;
  border-radius: var(--r-sm); padding: 12px 20px; font-weight: 800; font-size: 14px;
}
.browsebtn:hover { filter: brightness(1.08); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   HOME (.pg-home) — the curated landing, storefront redesign Wave 2.
   /store stopped being the full grid (that moved to /store/browse). Everything in this block is
   server-rendered by store_screens._home_* and carries no JS: the rails are native scroll-snap
   scrollers, the hero fan is a CSS transform, the tiles are the SAME .pcard the grid uses.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── hero ───────────────────────────────────────────────────────────────────────────────── */
.hhero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 30px; align-items: center;
  position: relative; overflow: hidden;
  background:
    radial-gradient(64% 120% at 88% -14%, rgba(91, 227, 180, .17), transparent 62%),
    radial-gradient(54% 104% at 4% 116%, rgba(150, 120, 255, .13), transparent 60%),
    var(--sunk);
  border: 1px solid var(--ln);
  border-radius: var(--r-lg);
  padding: 46px 44px;
  margin-bottom: 38px;
}
/* a shop with no catalogue art yet gets the copy column full-width rather than an empty frame */
.hhero.noart { grid-template-columns: 1fr; }

.hheyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--grn); font-size: 11.5px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; margin: 0 0 16px;
}
.hhcopy h1 {
  font-size: 48px; line-height: 1.02; letter-spacing: -.032em;
  margin: 0 0 14px; font-weight: 800; text-wrap: balance;
}
.hhsub { color: var(--mut); font-size: 16px; line-height: 1.65; margin: 0 0 26px; max-width: 52ch; }
.hhcta { display: flex; gap: 11px; flex-wrap: wrap; }

.hbtn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grn); color: #08130C; border: 1px solid var(--grn);
  font-size: 14.5px; font-weight: 750; padding: 12px 20px; border-radius: 10px;
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .16s, filter .16s,
              border-color .16s, color .16s;
}
.hbtn:hover { transform: translateY(-2px); box-shadow: 0 13px 26px -12px var(--grn-deep); filter: brightness(1.07); }
.hbtn.ghost { background: transparent; color: var(--txt); border-color: var(--ln); }
.hbtn.ghost:hover { border-color: var(--grn); color: var(--grn); box-shadow: none; filter: none; }

.hhstats {
  display: flex; gap: 30px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--ln-soft);
}
.hhstats div { display: flex; flex-direction: column; gap: 3px; }
.hhstats b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hhstats span {
  font-size: 11px; color: var(--mut); font-weight: 650;
  text-transform: uppercase; letter-spacing: .08em;
}

/* The hero art is three REAL in-stock cards, fanned. Absolute-positioned siblings rather than a
   flex row: they have to overlap. Decorative only (aria-hidden in the markup). */
.hfan { position: relative; height: 340px; display: grid; place-items: center; }
.hfc {
  position: absolute; width: 194px; aspect-ratio: .715;
  border-radius: 13px; overflow: hidden;
  border: 1px solid var(--ln); background: var(--pan);
  box-shadow: 0 28px 52px -20px rgba(0, 0, 0, .88);
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.hfc img { width: 100%; height: 100%; object-fit: contain; }
.hfc.f0 { transform: rotate(-13deg) translate(-116px, 10px); z-index: 1; }
.hfc.f1 { transform: translateY(-14px) scale(1.06); z-index: 3; }
.hfc.f2 { transform: rotate(13deg) translate(116px, 10px); z-index: 2; }
/* hover-only: on touch there is no hover state to leave, so a "spread" would stick after a tap */
@media (hover: hover) {
  .hhero:hover .hfc.f0 { transform: rotate(-17deg) translate(-138px, 2px); }
  .hhero:hover .hfc.f1 { transform: translateY(-26px) scale(1.09); }
  .hhero:hover .hfc.f2 { transform: rotate(17deg) translate(138px, 2px); }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PRODUCT PAGES (wave 9A 2026-07-29) — four new selectors.
   Everything else the product pages grew reuses vocabulary that was already UNSCOPED here:
   .spec/.doc for the details grid and the info copy, .hsec/.hsechead/.hrail/.hrailtrack/.pcard
   for the related rows. That is why this wave adds four selectors and not thirty.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* The item/slab search box (Mason ruling D) is a real <form action="/store/browse"> rather than
 * a keydown handler: those two pages load no page JS of their own, and a GET form does the job
 * with none — it also survives JS being off, which the card page's handler does not. The form
 * must not become a layout box, or .search's flex row (and the mobile flex:1 on the input at the
 * bottom of this file) would be measuring the wrapper instead of the field. */
.search form { display: contents; }

/* the breadcrumb above every product page */
.crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--mut); margin: 14px 0 2px;
}
.crumb a { color: var(--mut); }
.crumb a:hover { color: var(--txt); text-decoration: underline; }
.crumb b { color: var(--txt); font-weight: 700; }
.crumb i { color: var(--ln); font-style: normal; }

/* D1: the card page's "🏆 Graded (N)" heading has shipped since the GRADED-SITE wave with NO
 * rule at all — an <h2> with no ancestor font-size, so the UA default 1.5em (measured: 24px)
 * with no section framing, and larger than the page's own <h1> on a phone (22px there). It went
 * unnoticed because store-card.js's markup sits outside every class-vocabulary proof. Matched to
 * .hsechead h2 so the graded section reads as a section, not as a second title. */
.gsect {
  font-size: 21px; font-weight: 800; letter-spacing: -.022em;
  margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--ln);
}

/* the owner's "Good to know" block. .doc is a 66ch reading column by default (policy pages);
 * under a listing it sits full-width in a panel, so the max-width is released here. */
.pinfo {
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r-lg);
  padding: 22px 24px 6px; margin: 26px 0 34px;
}
.pinfo .hsechead { margin-bottom: 10px; }
.pinfo .doc { max-width: none; font-size: 14.8px; }

/* ── section shell (shop-by-game, every rail, how-pickup-works) ─────────────────────────── */
.hsec { margin: 0 0 42px; }
.hsechead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 16px;
}
.hsechead h2 { font-size: 21px; font-weight: 800; letter-spacing: -.022em; margin: 0; }
.hsechead p { color: var(--mut); font-size: 13.5px; margin: 5px 0 0; }
.hmore {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--grn); font-size: 13px; font-weight: 700; padding: 6px 0;
}
.hmore:hover { text-decoration: underline; }

/* ── shop by game ───────────────────────────────────────────────────────────────────────── */
.hgames { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 13px; }
.htile {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 22px 14px;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1), border-color .18s, box-shadow .18s;
}
.htile:hover { transform: translateY(-4px); border-color: var(--grn); box-shadow: var(--shadow-lift); }
.hti { font-size: 34px; line-height: 1; }
.htn { font-weight: 700; font-size: 14px; }
.htc { color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── curated rails ──────────────────────────────────────────────────────────────────────── */
/* The rail bleeds to the viewport edge by cancelling main's gutter, so a half-visible tile at
   the screen edge is what tells you it scrolls. Padding puts the gutter back INSIDE the scroller
   so the first tile still lines up with the heading above it. */
.hrail {
  margin-inline: calc(var(--gut) * -1);
  padding: 5px var(--gut) 10px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--ln) transparent;
}
.hrail::-webkit-scrollbar { height: 8px; }
.hrail::-webkit-scrollbar-track { background: transparent; }
.hrail::-webkit-scrollbar-thumb { background: var(--ln); border-radius: 999px; }
.hrail::-webkit-scrollbar-thumb:hover { background: var(--mut); }
.hrailtrack { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: 18px; }
/* the tiles are the grid's own .pcard — only the snap behaviour is added here */
.hrail .pcard { scroll-snap-align: start; }

/* ── how pickup works + where to find us ────────────────────────────────────────────────── */
.hpickin {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 20px; align-items: start;
}
.hsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hsteps li {
  display: grid; grid-template-columns: auto 1fr;
  grid-template-areas: "n t" ". d"; gap: 4px 14px; align-items: center;
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 16px 18px;
}
.hstepn {
  grid-area: n; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pan2); border: 1px solid var(--ln);
  color: var(--grn); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.hsteps b { grid-area: t; font-size: 14.5px; font-weight: 700; }
.hstepd { grid-area: d; color: var(--mut); font-size: 13.5px; line-height: 1.6; }

.hwhere {
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.hwhere h3 {
  margin: 0; font-size: 14.5px; font-weight: 750;
  display: flex; align-items: center; gap: 8px;
}
.hwhere div { display: flex; align-items: flex-start; gap: 9px; color: var(--mut); font-size: 13.5px; line-height: 1.55; }
.hwhere .ic { color: var(--grn); margin-top: 2px; }
.hwhere a { color: var(--grn); font-weight: 600; }
.hwhere a:hover { text-decoration: underline; }

/* ── we-buy-cards band (renders only when the tenant's /sell lane is open) ───────────────── */
.hsell {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background:
    radial-gradient(74% 150% at 10% -24%, rgba(242, 169, 59, .15), transparent 62%),
    var(--pan);
  border: 1px solid var(--ln); border-radius: var(--r-lg);
  padding: 28px 30px; margin: 0 0 10px;
}
.hsell h2 {
  margin: 0 0 7px; font-size: 20px; font-weight: 800; letter-spacing: -.022em;
  display: flex; align-items: center; gap: 9px;
}
.hsell h2 .ic { color: var(--gold); }
.hsell p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.6; max-width: 56ch; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--ln); margin-top: 54px; padding: 30px 22px;
  text-align: center; color: var(--mut); font-size: 13px;
}
footer .eco { color: var(--grn); font-weight: 700; margin-bottom: 7px; }
footer > div { line-height: 1.75; }
footer a { color: var(--grn); font-weight: 600; }
footer a:hover { text-decoration: underline; }
/* the policy-page row is the one the eye should find, so it gets air above and below */
footer .fpages { margin: 13px auto 11px; max-width: 720px; line-height: 2.1; }
footer .fsoc { margin-top: 3px; }
footer .fsoc .ic { color: var(--mut); margin-right: 3px; }
footer .fcopy { margin-top: 14px; }

/* Platform attribution, once, as a badge — see store_screens._foot_html. It reads as a maker's
   plate rather than a link in the shop's own list, which is why it is deliberately NOT given the
   accent colour every other footer <a> gets. */
.pwr {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 6px 13px 6px 10px; border: 1px solid var(--ln); border-radius: 999px;
  background: var(--pan); font-size: 12px; font-weight: 600;
}
footer a.pwr { color: var(--mut); }
footer a.pwr:hover { color: var(--txt); border-color: var(--grn); text-decoration: none; }
.pwr .ic { color: var(--grn); }
.pwr b { color: var(--txt); font-weight: 800; letter-spacing: -.01em; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   SETTINGS-DRIVEN CHROME (settings wave 2026-07-24) — the owner's announcement strip, uploaded
   logo and hero image. All three are absent by default: the rules below only ever apply to an
   element the server chose to render.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.announce {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #2a1f08, #3a2a0a 50%, #2a1f08);
  border-bottom: 1px solid #4d3a12; color: var(--gold);
  font-size: 13px; font-weight: 700; padding: 9px 18px; text-align: center; line-height: 1.45;
}
.announce .ic { color: var(--gold); }
a.announce { text-decoration: none; }
a.announce:hover { background: linear-gradient(90deg, #33270b, #4a360d 50%, #33270b); }
/* The logo replaces a text wordmark, so it is capped by HEIGHT and lets width follow — a wide
   banner and a square mark both have to sit in the same 46px-tall header without pushing it. */
.brand .blogo { height: 30px; width: auto; max-width: 210px; object-fit: contain; display: block; }
.hshot { align-self: center; }
.hshot img {
  width: 100%; max-width: 520px; border-radius: 18px; display: block;
  border: 1px solid var(--ln); box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   POLICY / INFO PAGES (/store/p/<slug>) + the Visit Us additions. The .doc column is the only
   place on the storefront where OWNER-TYPED prose is the content, so it is set for READING:
   a measure near 68 characters, generous leading, and headings that separate rather than shout.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.pg-page .hero .eyebrow {
  display: inline-block; color: var(--grn); font-size: 11.5px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase; margin: 0 0 13px;
}
.pgmeta {
  margin: 12px 0 0; color: var(--mut); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The contents rail sits BESIDE the column, not above it, and the pair is centred as a unit —
   so a page with no rail (fewer than three headings) still reads as a centred column rather
   than a column shoved left by an empty gutter. No :has() needed. */
.docwrap {
  display: flex; align-items: flex-start; justify-content: center; gap: 44px;
}
/* top: and the h2 scroll-margin-top: below are the sticky HEADER's height plus breathing room —
   they are the two numbers that drift silently if .topwrap's padding ever changes again. */
.dtoc {
  flex: 0 0 186px; position: sticky; top: 76px;
  border-left: 1px solid var(--ln); padding-left: 16px;
}
.dtoch {
  display: block; color: var(--mut); font-size: 10.5px; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px;
}
.dtoc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.dtoc li { counter-increment: toc; margin-bottom: 8px; }
.dtoc a {
  color: var(--mut); font-size: 13px; line-height: 1.4; font-weight: 600;
  display: block; transition: color .12s;
}
.dtoc a::before { content: counter(toc) ". "; color: var(--grn); opacity: .55; }
.dtoc a:hover { color: var(--txt); }

.doc { flex: 1 1 auto; max-width: 66ch; color: #c3cbdb; font-size: 15.5px; line-height: 1.78; }
/* the opening paragraph is the page's answer to "what is this" — set one step up */
.doc > p:first-child { font-size: 17px; line-height: 1.68; color: #dbe1ee; }
.doc h2 {
  font-size: 21px; color: var(--txt); margin: 44px 0 14px; font-weight: 800;
  letter-spacing: -.02em; text-wrap: balance; scroll-margin-top: 80px;
}
/* a short accent bar instead of a full rule: it separates sections without drawing a line
   across the measure every time the owner starts a new one. */
.doc h2::before {
  content: ''; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--grn); opacity: .8; margin-bottom: 15px;
}
.doc h2:first-child { margin-top: 0; }
.doc h3 {
  font-size: 15.5px; color: var(--txt); font-weight: 800; margin: 28px 0 9px;
  letter-spacing: -.005em;
}
.doc p { margin: 0 0 16px; }
.doc b, .doc strong { color: var(--txt); font-weight: 700; }
/* italic loses a lot at 15.5px on a dark ground — it gets contrast back rather than weight */
.doc i, .doc em { color: #d6dcea; font-style: italic; }
.doc a { color: var(--grn); font-weight: 600; }
.doc a:hover { text-decoration: underline; }

/* Lists get real markers rather than the browser's: a policy page is mostly lists, and the
   default disc/decimal is the single strongest "unstyled document" signal there is. */
.doc ul, .doc ol { margin: 0 0 18px; padding: 0; list-style: none; }
.doc li { margin-bottom: 9px; position: relative; }
.doc ul > li { padding-left: 22px; }
.doc ul > li::before {
  content: ''; position: absolute; left: 4px; top: .66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grn); opacity: .7;
}
.doc ol { counter-reset: dol; }
.doc ol > li { padding-left: 32px; }
.doc ol > li::before {
  counter-increment: dol; content: counter(dol);
  position: absolute; left: 0; top: .12em; width: 21px; height: 21px;
  display: grid; place-items: center; border-radius: 6px;
  background: rgba(91, 227, 180, .1); color: var(--grn);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.doc hr {
  border: 0; height: 1px; margin: 34px 0;
  background: linear-gradient(90deg, transparent, var(--ln) 18%, var(--ln) 82%, transparent);
}

/* "> text" — the one paragraph on a policy page the owner needs read. */
.doc .note {
  background: rgba(91, 227, 180, .055);
  border: 1px solid rgba(91, 227, 180, .2); border-left-width: 3px;
  border-radius: 12px; padding: 15px 18px; margin: 0 0 20px;
}
.doc .note p { margin: 0; color: #d6dcea; }

.doc .faq {
  background: var(--pan); border: 1px solid var(--ln); border-radius: 14px;
  padding: 15px 18px; margin: 0 0 11px;
}
.doc .faqq { color: var(--txt); font-weight: 700; margin: 0 0 7px; padding-left: 24px; }
.doc .faqq::before {
  content: 'Q'; float: left; margin-left: -24px; width: 17px; height: 17px;
  display: grid; place-items: center; border-radius: 5px; margin-top: 3px;
  background: rgba(91, 227, 180, .12); color: var(--grn); font-size: 10.5px; font-weight: 800;
}
.doc .faqa { margin: 0; color: var(--mut); padding-left: 24px; }

/* Tables scroll INSIDE their own box — the page body must never scroll sideways on a phone. */
.dtabw { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
.dtab { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 14.5px; }
.dtab th {
  text-align: left; color: var(--mut); font-size: 10.5px; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 0 16px 10px 0; border-bottom: 1px solid var(--ln); white-space: nowrap;
}
.dtab td {
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ln-soft);
  font-variant-numeric: tabular-nums; vertical-align: top;
}
.dtab tr:last-child td { border-bottom: 0; }
.dtab th:last-child, .dtab td:last-child { padding-right: 0; }

.dimg { margin: 0 0 22px; }
.dimg img {
  width: 100%; display: block; border-radius: 14px; border: 1px solid var(--ln);
}
.dimg figcaption { color: var(--mut); font-size: 12.5px; margin-top: 9px; }

/* Sibling policies, from the same list the footer uses — a customer who opened Returns is one
   click from Shipping instead of back through the footer. */
.pagemore { margin-top: 40px; border-top: 1px solid var(--ln); padding-top: 20px; }
.pmh {
  display: block; color: var(--mut); font-size: 10.5px; font-weight: 750;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px;
}
.pml { display: flex; flex-wrap: wrap; gap: 9px; }
.pml a {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--pan); border: 1px solid var(--ln); border-radius: 10px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 650; color: var(--mut);
  transition: border-color .12s, color .12s;
}
.pml a:hover { border-color: var(--grn); color: var(--txt); }
.pml svg { opacity: .7; }

.vphoto { padding: 0 !important; overflow: hidden; }
.vphoto img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; }
.vsub { color: var(--mut); font-size: 13px; margin: 8px 0 0; }
.vdir { margin-top: 12px; display: inline-flex; }
.vnote { color: var(--gold); font-weight: 600; font-size: 13px; margin: 11px 0 0; }
.vhours { width: 100%; border-collapse: collapse; font-size: 14px; }
.vhours th, .vhours td { padding: 6px 0; text-align: left; font-weight: 500; color: var(--mut); }
.vhours th { width: 44%; }
.vhours td { text-align: right; font-variant-numeric: tabular-nums; }
.vhours tr + tr { border-top: 1px solid var(--ln); }
/* today is the row people are looking for — it is the ONE row that gets full contrast */
.vhours tr.today th, .vhours tr.today td { color: var(--txt); font-weight: 800; }
.vhours .vclosed { color: #6b7385; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MOBILE — phone-first, one codebase. Most card shoppers arrive on a phone, and the old sheet
   had no breakpoints at all: the header wrapped into four rows and the search box ate the
   viewport. The nav collapses to a horizontal scroller, the search goes full width under it.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
/* the hero's two columns collapse well before the header does — 48px display type next to a
   190px card fan runs out of room around 980px, which is nowhere near a phone. */
@media (max-width: 980px) {
  .hhero { grid-template-columns: 1fr; padding: 36px 28px; }
  .hhcopy h1 { font-size: 40px; }
  .hfan { height: 268px; margin-top: 6px; }
  .hpickin { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --gut: 16px; }
  .topwrap { gap: 12px; padding: 12px 16px; }
  .search input { width: 200px; }
  main { padding: 18px var(--gut) 56px; }
  .hhcopy h1 { font-size: 34px; }
  .hhsub { font-size: 15px; margin-bottom: 22px; }
  .hhstats { gap: 22px; margin-top: 26px; }
  .hhstats b { font-size: 19px; }
  .hgames { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 11px; }
  .hsec { margin-bottom: 34px; }
  .hsechead h2 { font-size: 18.5px; }
  .hrailtrack { grid-auto-columns: 168px; gap: 13px; }
  .pg-shop .hero, .pg-games .hero, .pg-visit .hero, .pg-page .hero { padding: 26px 22px; }
  .pg-shop .hero h1, .pg-games .hero h1, .pg-visit .hero h1, .pg-page .hero h1 { font-size: 27px; }
  .grid, .ggrid { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 13px; }
  .pg-card .hero .art { width: 128px; }
  .pg-card .hero h1 { font-size: 26px; }
  .fcphoto { width: 140px; }

  /* the contents rail can't be a sticky gutter without a gutter — it becomes a swipeable chip
     row directly above the text, which is where a phone reader wants it anyway. */
  .docwrap { flex-direction: column; gap: 20px; }
  .doc { max-width: none; }
  .dtoc {
    position: static; flex: none; width: 100%;
    border-left: 0; border-top: 1px solid var(--ln); padding: 15px 0 0;
  }
  .dtoc ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; }
  .dtoc li { flex: none; margin-bottom: 0; }
  .dtoc a {
    white-space: nowrap; border: 1px solid var(--ln); border-radius: 20px;
    padding: 6px 13px; font-size: 12.5px;
  }
}

@media (max-width: 980px) {
  .hshot img { max-width: 100%; }
}

@media (max-width: 620px) {
  .announce { font-size: 12px; padding: 8px 14px; }
  .brand .blogo { height: 25px; max-width: 150px; }
  .brand .bmark { width: 28px; height: 28px; }
  /* the shop name gives way to the search box rather than pushing it off the row */
  .brand { min-width: 0; }
  .brand .bname { max-width: 40vw; }
  .doc { font-size: 15px; }
  .doc > p:first-child { font-size: 16px; }
  .doc h2 { font-size: 19px; margin-top: 34px; }
  .pml a { padding: 7px 12px; font-size: 12.5px; }
  .vhours { font-size: 13.5px; }

  /* Row 1 is brand + search + actions; the nav drops to row 2 as a swipeable rail. That
     REQUIRES the header to keep wrapping — flex-basis:100% below is what pushes the nav onto
     its own line, and a `flex-wrap:nowrap` here would silently defeat it. */
  .topwrap { gap: 10px 12px; }
  .brand { font-size: 16px; }
  .nav {
    order: 3; flex-basis: 100%; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -16px; padding: 0 16px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 7px 10px; font-size: 13px; }
  /* the hover dropdown is meaningless on touch — the label already navigates to the
     collection page, which is the documented no-JS fallback */
  .navdd { display: none !important; }
  /* the search block takes the rest of row 1 and its input fills that block */
  .search { order: 2; flex: 1; min-width: 0; margin-left: auto; gap: 7px; }
  .search input { width: auto; flex: 1; min-width: 0; max-width: none; }
  .sellbtn .lbl { display: none; }
  .sellbtn { padding: 9px 11px; }
  .cartbtn .lbl { display: none; }
  .cartbtn { padding: 9px 11px; }

  /* filter bar on a phone: the menus stay a wrapping row (never a scroller — see the panel
     clipping note up top), Sort drops to its own line, and a panel spans the gutter width so
     a long Set list is usable with a thumb. */
  .fbar { gap: 6px; }
  .fddbtn { padding: 7px 12px; font-size: 12px; }
  .fsort { margin-left: 0; flex-basis: 100%; }
  .fsort .fddbtn { width: 100%; justify-content: flex-start; }
  .fsort .fcar { margin-left: auto; }
  /* THE PANEL ANCHORS TO THE BAR, NOT THE BUTTON. Anchored to the button (the desktop
     behaviour), a 300px panel opened from the "Price" menu starts ~250px in and runs off a
     390px screen — which does not just look wrong, it widens the document and every page
     above it starts scrolling sideways. Making .fdd static hands the positioning context to
     .fbar, so the panel drops below the whole row at exactly its width. */
  .fdd { position: static; }
  .fddp {
    left: 0; right: auto;
    min-width: 0; width: 100%; max-width: none;
  }
  .fopts { max-height: 52vh; }
  .fopt { padding: 9px; font-size: 13.5px; }

  .grid, .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-shop .hero h1, .pg-games .hero h1, .pg-visit .hero h1, .pg-page .hero h1 { font-size: 23px; }
  .pg-shop .hero p { font-size: 14.5px; }
  .pg-card .hero { gap: 16px; }
  .pg-card .hero .art { width: 108px; }
  .pg-card .hero h1 { font-size: 22px; }
  .spec { grid-template-columns: repeat(2, 1fr); }
  .fcgrid { gap: 16px; }
  .fcphoto { width: 122px; }
  .cartpanel { width: 100%; }
  .code { font-size: 32px; }
  .lrow { padding: 12px 14px; }
  .gtile { padding: 22px 14px; }
  .gi { font-size: 34px; }

  .hhero { padding: 26px 20px; margin-bottom: 30px; }
  .hhcopy h1 { font-size: 29px; }
  .hheyebrow { font-size: 10.5px; margin-bottom: 13px; }
  .hhcta { gap: 9px; }
  .hbtn { padding: 11px 16px; font-size: 14px; }
  /* three 194px cards need ~430px of fan; at 320-620px they overlap into a tighter stack */
  .hfan { height: 212px; }
  .hfc { width: 134px; }
  .hfc.f0 { transform: rotate(-13deg) translate(-78px, 8px); }
  .hfc.f2 { transform: rotate(13deg) translate(78px, 8px); }
  .hhstats { gap: 16px 24px; }
  .hrailtrack { grid-auto-columns: 152px; }
  .hsteps li { padding: 14px 15px; }
  .hsell { padding: 22px 20px; }
  .hsell h2 { font-size: 18px; }
}

/* ── /sell — the public buylist page (WEB-BUYLIST W2) ─────────────────────────
   Reuses the grid/tile/drawer families above wholesale; everything here is the sell-only
   delta: selectable finish chips with prices, the per-tile condition select + qty stepper,
   the buy-price gold accent, the table view, the pager, and the order-status page. */
/* the retail #cartwrap/#cartmask twins — the sell ids deliberately diverge so the two
   drawers can co-load, so the shell rules must exist under BOTH names */
#sellwrap { position: fixed; inset: 0; z-index: 80; }
#sellmask { position: absolute; inset: 0; background: rgba(0, 0, 0, .58); }
.sellsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; margin: 0 0 18px; }
.sstep { background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.sstep b { color: var(--gold); font-size: 13px; }
.sstep span { color: var(--mut); font-size: 13px; line-height: 1.45; }
.sellbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; }
.selsel { background: var(--sunk); color: inherit; border: 1px solid var(--ln);
  border-radius: 9px; padding: 7px 9px; font: inherit; font-size: 13px; max-width: 100%; }
.selsel:focus-visible { outline: 2px solid var(--grn); outline-offset: 2px; }
.viewtog { background: var(--pan); color: inherit; border: 1px solid var(--ln);
  border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.viewtog:hover { border-color: var(--mut); }

/* SELLSEARCH — the search console (SELL-SEARCH wave, Mason 08-03): name bar + number bar +
   Sell list, BELOW the set/view row and oversized. Sticky under the nav: top rides --navh,
   the MEASURED header height sell.js stamps on :root — the wrapping nav has no constant
   height, so a guessed px here is the #293 bug class. The glass background matches .top so
   the grid scrolling beneath reads as deliberate, and z-index 20 stays UNDER the nav (30)
   and every overlay (80+). 16px inputs also stop iOS focus-zoom. */
.sellsearch {
  display: flex; gap: 10px; align-items: stretch;
  position: sticky; top: var(--navh, 0px); z-index: 20;
  margin: 0 0 14px; padding: 10px 0 12px;
  background: rgba(10, 12, 20, .92); backdrop-filter: blur(12px);
}
.sellsearch input {
  background: var(--sunk); color: inherit; border: 1px solid var(--ln);
  border-radius: 12px; padding: 12px 16px; font: inherit; font-size: 16px; min-width: 0;
}
.sellsearch input:focus { outline: 0; border-color: var(--grn); }
.sellsearch input::placeholder { color: var(--mut); }
.sellsearch .ssname { flex: 1 1 auto; }
.sellsearch .ssnum { flex: 0 1 200px; }
.sellsearch .cartbtn { font-size: 15px; padding: 0 18px; border-radius: 12px;
  border-color: var(--grn); }
.sellsearch .cartbtn .ccnt { min-width: 20px; height: 20px; font-size: 12px; }
@media (max-width: 620px) {
  .sellsearch { flex-wrap: wrap; gap: 8px; padding: 8px 0 10px; }
  .sellsearch .ssname { flex: 1 1 100%; }
  .sellsearch .ssnum { flex: 1 1 auto; }
  /* the console button KEEPS its label on phones — it is the page's main CTA, unlike the
     nav cart chip the generic 620 rule strips to an icon */
  .sellsearch .cartbtn { padding: 0 14px; }
  .sellsearch .cartbtn .lbl { display: inline; }
}
.fin { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 2px; }
.finchip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--sunk); border: 1px solid var(--ln); border-radius: 9px;
  padding: 5px 9px; cursor: pointer; font: inherit; color: inherit; }
.finchip .fl { font-size: 11.5px; color: var(--mut); }
.finchip .fp { font-size: 13px; font-weight: 700; color: var(--gold); }
.finchip:hover { border-color: var(--mut); }
.finchip.on { border-color: var(--gold); background: rgba(242, 169, 59, .10); }
.finchip.on .fl { color: inherit; }
.finchip.off .fp { color: var(--mut); font-weight: 500; }
.finchip.off { opacity: .62; }
.selrow { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 7px 0 0; }
.prbuy { color: var(--gold); }
.prbuy small { color: var(--mut); font-weight: 500; }
.rsn { color: var(--mut); font-size: 12.5px; }
.selltablewrap { overflow-x: auto; border: 1px solid var(--ln); border-radius: var(--r); }
.selltable { width: 100%; border-collapse: collapse; font-size: 13px; }
.selltable th, .selltable td { text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--ln); white-space: nowrap; }
.selltable th { color: var(--mut); font-weight: 600; font-size: 12px; }
.selltable tr:last-child td { border-bottom: 0; }
.selltable .tnm { white-space: normal; min-width: 160px; }
.selltable .tpr { font-weight: 700; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 18px 0; }
.pgbtn { background: var(--pan); color: inherit; border: 1px solid var(--ln);
  border-radius: 9px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.pgbtn:hover:not(:disabled) { border-color: var(--grn); }
.pgbtn:disabled { opacity: .4; cursor: default; }
.pginfo { color: var(--mut); font-size: 13px; }
.bulkbox { background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 14px 16px; margin: 22px 0 14px; }
.bulkbox > span { color: var(--mut); font-size: 13px; margin-left: 6px; }
.bulkrow { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.bcount { max-width: 180px; }
.disc { color: var(--mut); font-size: 12.5px; line-height: 1.55; max-width: 720px; }
.ackrow { display: flex; gap: 8px; align-items: flex-start; color: var(--mut);
  font-size: 12.5px; line-height: 1.45; margin: 8px 0; cursor: pointer; }
.ackrow input { margin-top: 2px; accent-color: var(--gold); }
.selltoast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--pan); border: 1px solid var(--ln); border-radius: 11px;
  padding: 10px 16px; font-size: 13.5px; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 90; max-width: min(92vw, 480px); }
.selltoast.show { opacity: 1; transform: translate(-50%, 0); }
.selltoast.ok { border-color: var(--grn); }
#sellmodal .smmask { position: fixed; inset: 0; background: rgba(4, 6, 12, .72); z-index: 80; }
#sellmodal .smbox { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--pan); border: 1px solid var(--ln); border-radius: var(--r);
  padding: 18px; z-index: 81; width: min(92vw, 560px); max-height: 88vh; overflow: auto; }
#sellmodal .smx { position: absolute; top: 10px; right: 10px; }
#sellmodal .smimg { display: block; width: min(60vw, 260px); margin: 0 auto 12px;
  border-radius: 10px; }
#sellmodal .smmeta { display: flex; flex-direction: column; gap: 2px; margin: 0 0 12px;
  text-align: center; }
#sellmodal .smmeta span { color: var(--mut); font-size: 13px; }
#sellmodal .smtblwrap { overflow-x: auto; }
#sellmodal .smload { color: var(--mut); text-align: center; padding: 30px 0; }
.ordbox { max-width: 680px; margin: 0 auto; }
.ordbox h1 { font-size: 24px; margin: 0 0 10px; }
.ocode { color: var(--gold); }
.opill { display: inline-block; background: var(--sunk); border: 1px solid var(--ln);
  border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600;
  margin: 0 0 10px; }
.opill.st-paid, .opill.st-done { border-color: var(--grn); color: var(--grn); }
.opill.st-declined, .opill.st-expired { color: var(--mut); }
.omsg { color: var(--mut); margin: 0 0 14px; }
.ordbox .cartrow { margin: 14px 0 8px; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
