/* ==========================================================================
   ZB WARRIORS CARD SHOP — site styles
   Built around the logo art in assets/brand/.
   Colours are sampled from the logo itself so everything matches.
   ========================================================================== */

:root {
  /* --- brand colours, taken from the logo art --- */
  --ink:        #06060a;   /* deepest background */
  --ink-2:      #0c0c13;   /* section background */
  --panel:      #13131c;   /* cards, drawers */
  --panel-hi:   #1b1b27;   /* hover state */
  --line:       #26263a;   /* hairline borders */

  --ember:      #E8873A;   /* orange from the lettering */
  --ember-hi:   #F7C169;   /* highlight on the lettering */
  --crimson:    #B4232B;   /* deep red from the dragon */
  --gold:       #E3B871;   /* gold trim */
  --bolt:       #9BD9FF;   /* lightning blue from the sword */

  --text:       #EFE8DA;
  --muted:      #9C9584;
  --dim:        #827B67;

  --radius:     14px;
  --radius-sm:  9px;
  --maxw:       1240px;

  --shadow:     0 18px 50px rgba(0,0,0,.55);
  --glow-ember: 0 0 32px rgba(232,135,58,.30);

  --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--text);
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  /* faint ember glow bleeding up from the bottom of the page */
  background-image:
    radial-gradient(1100px 520px at 50% -8%, rgba(232,135,58,.10), transparent 70%),
    radial-gradient(760px 420px at 92% 8%, rgba(180,35,43,.09), transparent 70%);
  background-attachment: fixed;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* ---------- shared layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
section { padding: clamp(46px, 7vw, 88px) 0; }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar {
  background: linear-gradient(90deg, var(--crimson), #8E1A20 55%, var(--crimson));
  color: #fff;
  text-align: center;
  padding: 9px 14px;
  font-size: 13.5px;
  letter-spacing: .06em;
  position: relative;
  z-index: 30;
}
.topbar b { color: var(--ember-hi); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8,8,13,.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 22px;
  padding: 11px clamp(18px, 4vw, 40px);
  max-width: var(--maxw); margin: 0 auto;
}
.nav-logo img { height: 42px; width: auto; filter: drop-shadow(0 3px 10px rgba(232,135,58,.35)); }
.nav-links {
  display: flex; gap: clamp(14px, 2.4vw, 32px);
  margin-left: auto;
  font-size: 14.5px; letter-spacing: .12em; text-transform: uppercase;
}
.nav-links a { color: var(--muted); position: relative; padding: 6px 0; transition: color .18s; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--ember), var(--gold));
  transition: right .28s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.on::after { right: 0; }
.nav-links a.on { color: var(--ember-hi); }

.cart {
  background: linear-gradient(135deg, var(--crimson), #8E1A20);
  color: #fff; font-weight: 700; font-size: 13.5px; letter-spacing: .06em;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid rgba(227,184,113,.35);
  box-shadow: 0 6px 20px rgba(180,35,43,.35);
  transition: transform .16s var(--ease), box-shadow .16s;
  white-space: nowrap;
}
.cart:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(180,35,43,.5); }

/* ==========================================================================
   HERO — the logo, given room to breathe
   ========================================================================== */
/* A fixed-height band, logo on the left, copy on the right.
   The logo's aspect ratio is fixed at 2.06:1, so "wide enough to feel
   substantial" and "short enough to be a header" are in direct conflict when
   everything is stacked vertically. Putting the copy BESIDE the logo instead
   of underneath removes the conflict: the composition spans the page, the
   logo doesn't have to. */
.hero {
  /* --band is the real control. Using min-height meant the logo set the floor:
     a 490px-wide logo is 237px tall, so the band could never go below that and
     the height setting looked like it did nothing. Now the band is a fixed
     height and the logo is capped to fit inside it, so this number actually
     governs. */
  --band: 275px;
  position: relative;
  height: var(--band);
  display: flex;
  align-items: center;
  overflow: hidden;
  /* No band, no black backing. The logo is screen-blended (see .hero-logo),
     so it needs nothing behind it and there is no rectangle to see. */
  background: transparent;
}
.hero-inner {
  /* NO z-index here. A positioned element with z-index creates a stacking
     context, which walls the logo off from the page background behind it —
     that is what silently defeated the earlier blend-mode fix. */
  position: relative;
  width: min(var(--maxw), calc(100% - clamp(36px, 7vw, 80px)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(220px, 1fr);
  align-items: center;
  gap: clamp(28px, 12vw, 172px);
}
.hero-copy { max-width: 400px; }
/* Bloom removed 8/22/2026 — Zac set it to 0%. Anything that brightens the area
   around the logo makes the artwork read as pasted on, so black is correct. */
/* The logo is deliberately capped well below its natural size. The file is
   1400px wide but never displays wider than ~620px, so it stays razor sharp
   on Retina screens and the first product row is visible without scrolling. */
.hero-art {
  position: relative; line-height: 0;
  width: min(540px, 100%);
  display: flex; align-items: center; justify-content: flex-start;
}

/* hero-logo.webp has a real alpha channel — the black background was converted
   to actual transparent pixels, so there is no rectangle to hide. This does not
   depend on blend modes, stacking contexts, or what colour sits behind it. */
/* width AND height capped, so whichever runs out first wins and the aspect
   ratio is never distorted. This is what lets --band actually shrink the band. */
.hero-logo {
  width: auto; height: auto;
  max-width: 100%;
  max-height: calc(var(--band) - 34px);
  animation: zbCharge 5.5s ease-in-out infinite;
}
/* a slow electric pulse so the bolts feel alive rather than painted on.
   No dark drop-shadows here — under screen blend they'd do nothing anyway,
   and a shadow is what makes an image look like it's sitting on top. */
@keyframes zbCharge {
  0%, 100% { filter: drop-shadow(0 0 40px rgba(155,217,255,.18)) brightness(1); }
  46%      { filter: drop-shadow(0 0 40px rgba(155,217,255,.20)) brightness(1.02); }
  50%      { filter: drop-shadow(0 0 70px rgba(155,217,255,.55)) brightness(1.16); }
  53%      { filter: drop-shadow(0 0 44px rgba(155,217,255,.22)) brightness(1.01); }
  56%      { filter: drop-shadow(0 0 64px rgba(155,217,255,.42)) brightness(1.10); }
  60%      { filter: drop-shadow(0 0 40px rgba(155,217,255,.18)) brightness(1); }
}
/* one bright flash sweeping behind the art on the same beat */
.hero-bolt {
  position: absolute; inset: -8% -12%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(155,217,255,.30), transparent 72%);
  opacity: 0; animation: zbBolt 5.5s ease-in-out infinite;
}
@keyframes zbBolt {
  0%, 46%, 62%, 100% { opacity: 0; }
  50% { opacity: .85; }
  53% { opacity: .12; }
  56% { opacity: .55; }
}
/* Says what you sell rather than restating the brand — the logo already
   carries the name, and the products sit directly below. */
.hero-tag {
  margin: 0; color: var(--muted); line-height: 1.7;
  letter-spacing: .2em; text-transform: uppercase; font-size: clamp(11px, 1.4vw, 13px);
}
/* Each game name jumps straight to the shop filtered to it. Underline only on
   hover so the line still reads as a tagline rather than a row of links. */
.hero-tag a {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.hero-tag a:hover, .hero-tag a:focus-visible {
  color: var(--ember-hi); border-bottom-color: var(--ember);
}
.cta-note {
  margin-top: 12px; color: var(--dim); font-size: 12.5px; letter-spacing: .08em;
}
.cta-note b { color: var(--ember); }
.hero-cta { margin-top: 22px; display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-block; cursor: pointer; border: none;
  padding: 14px 30px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--crimson), #8E1A20);
  color: #fff;
  border: 1px solid rgba(227,184,113,.3);
  box-shadow: 0 8px 24px rgba(180,35,43,.32);
  transition: transform .16s var(--ease), box-shadow .16s, filter .16s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(180,35,43,.45); }
.btn:active { transform: translateY(0); }
.btn.gold {
  background: linear-gradient(135deg, var(--ember), var(--gold));
  color: #2A1806; border-color: rgba(255,255,255,.25);
  box-shadow: 0 8px 24px rgba(232,135,58,.34);
}
.btn.gold:hover { box-shadow: 0 14px 32px rgba(232,135,58,.5); }
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.ghost:hover { border-color: var(--ember); color: var(--ember-hi); }
.btn.small { padding: 9px 16px; font-size: 12.5px; letter-spacing: .06em; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ==========================================================================
   HEADINGS
   ========================================================================== */
h1.page {
  text-align: center; font-size: clamp(26px, 4.6vw, 42px);
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  padding: clamp(34px, 5vw, 56px) 0 4px;
}
h1.page + .lead { margin-top: 10px; }

h2 {
  font-size: clamp(18px, 2.6vw, 24px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 26px; padding-left: 14px;
  border-left: 4px solid var(--crimson);
  line-height: 1.3;
}
.lead {
  text-align: center; color: var(--muted);
  max-width: 680px; margin: 0 auto; font-size: 16px;
}

/* thin sword divider between sections */
.divider { display: block; width: min(560px, 80%); margin: 0 auto; opacity: .5; }

/* ==========================================================================
   PRODUCT CARDS — glass panel + holo sweep
   ========================================================================== */
.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--panel), #0E0E16);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
  will-change: transform;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(227,184,113,.45);
  box-shadow: var(--shadow), var(--glow-ember);
}
/* holographic sweep, like tilting a foil card */
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%, rgba(155,217,255,.10) 44%,
    rgba(255,255,255,.16) 50%, rgba(247,193,105,.12) 56%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
}
.card:hover::after { transform: translateX(120%); }

.card { position: relative; }
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
}
.badge.low { background: linear-gradient(135deg, var(--ember), var(--gold)); color: #2A1806; }
.badge.out { background: #23232f; color: var(--muted); border: 1px solid var(--line); }
.badge.soon { background: linear-gradient(135deg, var(--bolt), #5FA8D8); color: #06202E; }
/* On order, not in hand — dimmed a little so it reads as "not yet" beside the
   things you can actually buy, without hiding it. */
.card.is-coming { opacity: .82; }
.card.is-coming .thumb { filter: saturate(.7) brightness(.8); }
.soon-when {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bolt);
}
.card.is-out .thumb { filter: grayscale(.8) brightness(.65); }

.thumb.has-img { padding: 0; background: #0c0c14; overflow: hidden; }
.thumb.has-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .thumb.has-img img { transform: scale(1.05); }

/* A trading card is 63x88mm — portrait, roughly 5 by 7. Dropping one into the
   landscape 4/3 tile below and cropping to fill sliced the top and bottom off
   every card, which on a shop selling cards is the whole product. Singles get
   a card-shaped frame and 'contain', so nothing is ever cut off: what the
   buyer sees is the entire card. Sealed boxes are landscape photos and keep
   the wide tile. */
/* ==========================================================================
   ARRIVING SOON TICKER
   Sits above the hero, the first thing anyone sees. A floating pill rather
   than a band welded across the page: the gap under the nav is what stops it
   reading as a second toolbar, and the rounded shape is what stops the page
   looking like three stacked slabs. Crawls slowly, stops the moment you hover
   or focus it, and holds still entirely for anyone who has asked their system
   for less motion.
   ========================================================================== */
#zbw-coming {
  /* outer container only — the pill itself is .ticker-wrap inside it, because
     an ID rule and a class rule on the SAME element fought over display and
     the ID won, flattening the flex layout. */
  width: min(var(--maxw), calc(100% - clamp(18px, 4vw, 40px)));
  margin: 13px auto 0;
  display: block;
  /* The global `section` rule adds 46-88px of padding top and bottom, which is
     right for a content section and completely wrong for a 48px bar — it wrapped
     the pill in 92px of dead space. This is a bar, not a section of the page. */
  padding: 0;
}
/* The label is a flex sibling, not an overlay. An absolutely positioned label
   meant guessing its width in padding, and the guess clipped the first item. */
.ticker-wrap {
  display: flex; align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, #12121c, #0e0e17);
  overflow: hidden;
}
.ticker-label {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 9px clamp(13px, 2.4vw, 18px);
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #06202E;
  background: linear-gradient(135deg, var(--bolt), #5FA8D8);
  white-space: nowrap;
}
/* a real scrolling lane now, not a hidden overflow — so a wheel, a finger or
   a dragged cursor all move it. The scrollbar is hidden because the crawl
   already tells you there's more. */
.ticker {
  flex: 1 1 auto; min-width: 0; padding: 6px 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker:active { cursor: grabbing; }
.ticker-track { display: flex; width: max-content; }

/* Product cards, not a text crawl — a picture says "real shop with real stock"
   in a way a line of type can't. */
.tick {
  display: flex; align-items: center; gap: 13px;
  padding: 0 17px; white-space: nowrap;
  border-right: 1px solid var(--line);
  background: none; border-top: 0; border-bottom: 0; border-left: 0;
  font-family: inherit; cursor: pointer; text-align: left;
}
.tick-pic {
  flex: 0 0 auto; width: 40px; height: 40px;
  border-radius: 999px; overflow: hidden;
  background: #0c0c14; border: 1px solid var(--line);
  display: grid; place-items: center;
}
.tick-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tick-noimg {
  width: 100%; height: 100%; display: block;
  background: linear-gradient(150deg, #1a1a28, #2a1220 60%, #3a1016);
}
.tick-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tick-name { font-size: 12px; color: var(--text); font-weight: 700; line-height: 1.3; }
.tick-meta { font-size: 10px; color: var(--dim); }
.tick-meta b {
  color: var(--bolt); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.tick:hover .tick-name { color: #fff; }
.tick:focus-visible { outline: 2px solid var(--bolt); outline-offset: -3px; }

@media (max-width: 620px) {
  #zbw-coming { margin-top: 10px; }
  .ticker-label { padding: 8px 11px; font-size: 9px; letter-spacing: .12em; }
  .tick { padding: 0 13px; gap: 10px; }
  .tick-pic { width: 34px; height: 34px; }
  .tick-name { font-size: 11.5px; }
}
/* reduced motion: the JS crawl already stops itself, and the lane stays
   scrollable, so there is nothing to disable here. */

/* ==========================================================================
   PRODUCT DETAIL
   A tile is too small to say what's inside a 50-card lot, and a lot nobody
   can inspect is a lot nobody buys. This is the page behind the tile.
   ========================================================================== */
.card[data-id] { cursor: pointer; }
.card[data-id]:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

#zbw-detail { position: fixed; inset: 0; z-index: 9995; }
.dt-back {
  position: absolute; inset: 0;
  background: rgba(2,2,5,.78); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .2s;
}
#zbw-detail.open .dt-back { opacity: 1; }
.dt-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -48%) scale(.97);
  width: min(880px, calc(100vw - 36px));
  max-height: calc(100vh - 48px); overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 28px; padding: 28px;
  background: linear-gradient(160deg, var(--panel), #0C0C14);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s var(--ease), transform .22s var(--ease);
}
#zbw-detail.open .dt-panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dt-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--dim);
  font-size: 30px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
.dt-close:hover { color: #fff; }

.dt-media { position: relative; }
.dt-media img {
  width: 100%; border-radius: 10px; display: block;
  background: #08080e; border: 1px solid var(--line);
}
.dt-noimg {
  aspect-ratio: 5 / 7; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(150deg, #1a1a28, #2a1220 60%, #3a1016);
  color: var(--dim); font-size: 13px; border: 1px solid var(--line);
}
.dt-stockpix {
  display: block; margin-top: 9px;
  font-size: 11px; color: var(--dim); line-height: 1.5;
}

.dt-body h3 { margin: 0 0 4px; font-size: 22px; color: #fff; line-height: 1.3; }
.dt-sub { margin: 0 0 14px; font-size: 13px; color: var(--dim); }
.dt-desc { margin: -6px 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.dt-price {
  font-size: 28px; font-weight: 700; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--ember-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* wrap rather than push the button off the edge on a narrow panel */
.dt-buy { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dt-buy .btn { flex: 1 1 auto; min-width: 150px; }
.dt-buy label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.dt-buy input {
  width: 68px; padding: 11px 10px; font-family: inherit; font-size: 15px;
  color: #fff; background: #0c0c14;
  border: 1px solid var(--line); border-radius: 9px;
}
.dt-soon {
  font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 18px;
  padding: 13px 15px; border: 1px dashed var(--line); border-radius: 10px;
}
.dt-soon a { color: var(--bolt); }

.dt-contents { margin-bottom: 20px; }
.dt-contents h4 {
  margin: 0 0 9px; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.dt-contents ul { margin: 0; padding-left: 18px; }
.dt-contents li { font-size: 13.5px; color: var(--muted); line-height: 1.85; }

.dt-facts { border-top: 1px solid var(--line); padding-top: 14px; }
.dt-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(38,38,58,.5);
}
.dt-row span { color: var(--dim); }
.dt-row b { color: var(--text); font-weight: 700; text-align: right; }
.dt-ship { font-size: 12px; color: var(--dim); line-height: 1.7; margin: 14px 0 0; }
.dt-ship a { color: var(--gold); text-decoration: underline; }

/* 860, not 700: the panel is nearly as wide as the window, so a 800px laptop
   window is already too narrow for two columns even though it isn't a phone. */
@media (max-width: 860px) {
  .dt-panel { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; }
  .dt-media { max-width: 230px; margin: 0 auto; }
  .dt-body h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-panel, .dt-back { transition: none; }
}

/* ==========================================================================
   GAME TILES
   The first thing most people want is "show me my game". A dropdown buries
   that behind two clicks; these don't.
   ========================================================================== */
.gametiles {
  display: grid; gap: 10px; margin: 0 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.gametile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 16px; cursor: pointer; text-align: left;
  font-family: inherit;
  background: linear-gradient(150deg, #14141e, #10101a);
  border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--dim);
  transition: border-color .18s, background .18s, transform .16s var(--ease);
}
.gametile:hover { transform: translateY(-2px); background: linear-gradient(150deg, #17172333, #14141e); }
.gametile .gt-name {
  font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.gametile .gt-count {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.gametile.on { background: linear-gradient(150deg, #1c1c2a, #16161f); }
.gametile.on .gt-name { color: #fff; }

/* One colour per game, matching the coming-soon tiles. */
.gametile.g-fusion    { border-left-color: #E8873A; }
.gametile.g-onepiece  { border-left-color: #C8323C; }
.gametile.g-gundam    { border-left-color: #3A7BD5; }
.gametile.g-pokemon   { border-left-color: #E3B23C; }
.gametile.g-masters   { border-left-color: #D4622A; }
.gametile.g-all       { border-left-color: var(--gold); }
.gametile.on.g-fusion   { border-color: #E8873A; }
.gametile.on.g-onepiece { border-color: #C8323C; }
.gametile.on.g-gundam   { border-color: #3A7BD5; }
.gametile.on.g-pokemon  { border-color: #E3B23C; }
.gametile.on.g-masters  { border-color: #D4622A; }
.gametile.on.g-all      { border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .gametile:hover { transform: none; } }

/* ==========================================================================
   SHOP FILTER BAR
   Ten products needed no search. Three hundred and fifty do, and a buyer
   hunting one card will not scroll for it.
   ========================================================================== */
.shopbar {
  display: flex; flex-direction: column; gap: 12px;
  margin: 0 0 18px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, #14141e, #17101a);
}
.shop-search {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; font-size: 15px;
  color: #fff; background: #0c0c14;
  border: 1px solid var(--line); border-radius: 10px;
  font-family: inherit;
}
.shop-search::placeholder { color: var(--dim); }
.shop-search:focus { outline: none; border-color: var(--ember); }
.shop-selects { display: flex; flex-wrap: wrap; gap: 9px; }
.shop-selects select {
  flex: 1 1 150px; min-width: 0;
  padding: 9px 11px; font-size: 13px; font-family: inherit;
  color: #EFE8DA; background: #0c0c14;
  border: 1px solid var(--line); border-radius: 9px; cursor: pointer;
}
.shop-selects select:focus { outline: none; border-color: var(--ember); }
.shop-selects .btn.small { flex: 0 0 auto; padding: 9px 16px; font-size: 13px; }
.shop-count {
  font-size: 12.5px; color: var(--dim); letter-spacing: .1em;
  text-transform: uppercase; margin: 0 0 16px;
}
.shop-count a { color: var(--gold); text-decoration: underline; }

/* A category that exists but is empty on purpose. Says "not yet" rather than
   looking like the page failed to load. */
.shop-empty {
  text-align: center; padding: 46px 24px 40px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, #12121b, #16101a);
}
.shop-empty h3 {
  margin: 0 0 10px; font-size: 19px; color: #fff;
  letter-spacing: .04em;
}
.shop-empty p { margin: 0 auto 18px; max-width: 460px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.shop-empty p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .shop-selects select { flex: 1 1 calc(50% - 5px); }
}

/* Marks a listing whose picture is the publisher's scan rather than a photo of
   the actual card. Quiet enough to ignore, present enough to have been said. */
.thumb.has-img { position: relative; }
.stockpix {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  background: rgba(8,8,14,.78); color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; pointer-events: none;
}

/* A fan of real cards from inside the lot. Honest — these are genuinely in it
   — and it reads as "cards" instantly, which a flat placeholder never does. */
.thumb.has-fan {
  position: relative; padding: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, rgba(232,135,58,.14), transparent 62%), #0a0a12;
}
.thumb.has-fan .fan {
  position: absolute; top: 50%; left: 50%;
  height: 78%; width: auto; border-radius: 5px;
  border: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 10px 22px rgba(0,0,0,.55);
  transition: transform .3s var(--ease);
}
.thumb.has-fan .f0 { transform: translate(-50%, -50%) rotate(-13deg) translateX(-30%); z-index: 1; }
.thumb.has-fan .f1 { transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }
.thumb.has-fan .f2 { transform: translate(-50%, -50%) rotate(13deg) translateX(30%); z-index: 2; }
.card:hover .thumb.has-fan .f0 { transform: translate(-50%, -50%) rotate(-19deg) translateX(-44%); }
.card:hover .thumb.has-fan .f2 { transform: translate(-50%, -50%) rotate(19deg) translateX(44%); }

.dt-fan {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, rgba(232,135,58,.14), transparent 62%), #0a0a12;
  border: 1px solid var(--line);
}
.dt-fan .fan {
  position: absolute; top: 50%; left: 50%;
  height: 80%; width: auto; border-radius: 6px;
  border: 1px solid rgba(0,0,0,.5); box-shadow: 0 10px 22px rgba(0,0,0,.55);
}
.dt-fan .f0 { transform: translate(-50%, -50%) rotate(-13deg) translateX(-32%); z-index: 1; }
.dt-fan .f1 { transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }
.dt-fan .f2 { transform: translate(-50%, -50%) rotate(13deg) translateX(32%); z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .thumb.has-fan .fan, .card:hover .thumb.has-fan .fan { transition: none; }
}

.cat-singles .thumb { aspect-ratio: 5 / 7; }
.cat-singles .thumb.has-img img { object-fit: contain; }
.cat-singles .thumb.has-img { background: #08080e; }

.thumb {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,135,58,.12), transparent 60%),
    linear-gradient(150deg, #1a1a28, #2a1220 60%, #3a1016);
  color: var(--dim); font-size: 12.5px; text-align: center; letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}
.cinfo { padding: 15px 16px 17px; }
.cname { font-weight: 700; font-size: 15px; color: #fff; margin-bottom: 3px; line-height: 1.35; }
.csub { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.crow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.price {
  font-weight: 700; font-size: 18px;
  background: linear-gradient(135deg, var(--ember-hi), var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sold-out { background: #23232f !important; color: var(--dim) !important; border-color: var(--line) !important; box-shadow: none !important; }

/* stock warning */
.stock-low { font-size: 11.5px; color: var(--ember); letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; }

/* ==========================================================================
   CATEGORY TILES
   ========================================================================== */
.tiles { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tile {
  position: relative; overflow: hidden;
  height: 132px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(150deg, #15151f, #1E0E16);
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 16px; color: #fff;
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.tile:hover { transform: translateY(-4px); border-color: var(--ember); box-shadow: var(--glow-ember); }
.tile::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 100% at 50% 120%, rgba(232,135,58,.28), transparent 65%);
  opacity: 0; transition: opacity .25s;
}
.tile:hover::before { opacity: 1; }
.tile span { position: relative; }

/* ==========================================================================
   PROSE / FAQ / FORM
   ========================================================================== */
.prose { max-width: 760px; margin: 0 auto; color: #CFC7B4; font-size: 16.5px; line-height: 1.85; }
.prose p { margin-bottom: 18px; }
.prose b { color: #fff; }
.prose h2 { margin-top: 40px; }

.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 11px; padding: 15px 20px;
  transition: border-color .2s, background .2s;
}
.faq details[open] { border-color: rgba(227,184,113,.4); background: var(--panel-hi); }
.faq summary { cursor: pointer; font-weight: 700; color: #fff; font-size: 15.5px; letter-spacing: .02em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '▸'; color: var(--ember); margin-right: 10px; display: inline-block; transition: transform .2s; }
.faq details[open] summary::before { transform: rotate(90deg); }
.faq p { color: var(--muted); padding-top: 11px; line-height: 1.75; }

.contactbox {
  max-width: 560px; margin: 0 auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(22px, 4vw, 34px);
}
.contactbox label {
  display: block; color: var(--gold); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; margin: 18px 0 7px;
}
.contactbox input, .contactbox textarea, .contactbox select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid #34344a; background: #08080f; color: #fff;
  font-size: 15px; font-family: inherit; transition: border-color .18s, box-shadow .18s;
}
.contactbox select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%; background-size:6px 6px,6px 6px; background-repeat:no-repeat; cursor:pointer; }
.contactbox input:focus, .contactbox textarea:focus, .contactbox select:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(232,135,58,.15);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer {
  background: #040407; border-top: 1px solid var(--line);
  padding: 44px clamp(18px,4vw,40px) 38px; text-align: center;
  color: var(--dim); font-size: 13px; line-height: 2; margin-top: 40px;
}
/* ---- email capture, in the footer of every page ---- */
.signup {
  max-width: 420px; margin: 0 auto 30px; text-align: center;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.signup label {
  display: block; color: var(--gold); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px;
}
.signup-row { display: flex; gap: 8px; }
.signup-row input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: var(--radius-sm);
  border: 1px solid #34344a; background: #08080f; color: #fff;
  font-size: 14.5px; font-family: inherit; transition: border-color .18s, box-shadow .18s;
}
.signup-row input:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(232,135,58,.15);
}
.signup-row .btn { white-space: nowrap; }
.signup-fine { display: block; margin-top: 9px; font-size: 11px; color: #827B67; letter-spacing: .04em; }

footer .flogo { height: 40px; width: auto; margin: 0 auto 16px; opacity: .9; }
footer a { text-decoration: underline; color: var(--muted); }
footer a:hover { color: var(--ember-hi); }
.fine { font-size: 11.5px; color: #827B67; line-height: 1.7; max-width: 640px; margin: 14px auto 0; }

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 780px) {
  .nav-inner { flex-wrap: wrap; gap: 12px; }
  .nav-links { order: 3; width: 100%; margin-left: 0; justify-content: space-between; font-size: 12.5px; }
  .cart { margin-left: auto; }
  /* On a phone the pack splash already shows the logo full size, so the page
     itself only needs a small one. Everything above the products is trimmed:
     that top block was eating well over half the screen. */
  .topbar { padding: 6px 12px; font-size: 11.5px; letter-spacing: .03em; }
  .nav-inner { padding: 7px 14px; gap: 10px; }
  .nav-logo img { height: 30px; }
  .nav-links { font-size: 11.5px; letter-spacing: .07em; }
  .nav-links a { padding: 3px 0; }
  .cart { padding: 7px 14px; font-size: 12px; }

  /* The full logo art is 2:1 wide. Shrunk to phone width the lightning turns to
     noise and "Card Shop" gets tiny — it reads worse small than not at all. The
     pack splash shows it full size, and the sticky nav carries the wordmark, so
     the page itself skips it and goes straight to product. */
  /* the big blurred backdrop is desktop-only — the logo is hidden here anyway
     and a 58px blur on a full-width image is expensive on a phone */
  .hero::before { display: none; }
  .hero { height: auto; min-height: 0; padding: 8px 0 14px; display: block; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .hero-copy { max-width: none; margin: 0 auto; }
  .hero-cta { justify-content: center; }
  .hero-art { display: none; }
  .hero-bolt { display: none; }
  .hero-tag { margin-top: 8px; letter-spacing: .18em; font-size: 10px; }
  .hero-cta { margin-top: 12px; gap: 10px; }
  .hero-cta .btn { padding: 11px 18px; font-size: 13px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .cinfo { padding: 12px; }
  .cname { font-size: 13.5px; }
  .price { font-size: 16px; }
}

/* ==========================================================================
   ACCESSIBILITY — honour "reduce motion"
   Everything still works, it just stops moving.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* keyboard focus should always be obvious */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================
   PREORDERS PAGE
   Grouped by month so it reads as a calendar, not a list.
   ========================================================================== */
.po-month { padding: 0 0 clamp(28px, 4vw, 46px); }
.po-when {
  font-size: clamp(17px, 2.4vw, 21px); color: var(--bolt);
  letter-spacing: .16em; text-transform: uppercase;
  margin: 0 0 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
#zbw-preorders .grid { margin-bottom: 0; }

/* ==========================================================================
   SHOP CLOSED NOTICE
   Shown above the shop grid while SHOP_OPEN is false in cart.js.
   ========================================================================== */
.shop-closed {
  background: linear-gradient(160deg, rgba(232,135,58,.10), rgba(180,35,43,.06));
  border: 1px solid rgba(227,184,113,.28);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 30px);
  margin: 0 0 clamp(20px, 3vw, 30px);
}
.shop-closed h2 {
  margin: 0 0 8px;
  font-size: clamp(16px, 2.2vw, 20px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.shop-closed p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62ch;
}