/* ══════════════════════════════════════════════════════════════
   AnistoreTCG — V3 Design System (built from Figma spec)
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,900&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Concept A homepage palette */
  --bg-home:     #0d0a14;
  --panel-home:  #1a1724;
  --border-home: #26212e;
  --nav-home:    #0a0812;

  /* Category page palette */
  --bg-cat:      #0d0d0d;
  --panel-cat:   #1b1d22;
  --nav-cat:     #111111;
  --divider-cat: #27272a;

  /* Shared */
  --gold:        #f59e0b;
  --gold-alt:    #e8870d;  /* Concept A uses slightly warmer amber */
  --text:        #f9fafb;
  --text-warm:   #f5f0e8;
  --muted:       #9ca3af;
  --muted-warm:  #8c807a;
  --green:       #29c76b;
  --red:         #ef4444;
  --purple:      #818cf8;
  --radius:      8px;
  --font:        'Inter', ui-sans-serif, system-ui, sans-serif;
}

html { overflow-x: hidden; }
body { font-family: var(--font); }

/* ══════════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ══════════════════════════════════════════════════════════════ */

/* ── Announcement bar — amber version (Figma spec) ──────────── */
.ann-bar--amber {
  background: var(--gold);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 0 18px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
}

/* ── Navbar V3 ──────────────────────────────────────────────── */
.nav-v3 {
  height: 72px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--divider-cat);
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 40px;
}

body { padding-top: 112px; }

.nav-v3__inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-v3__logo {
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  margin-right: 48px;
  flex-shrink: 0;
}

.nav-v3__logo-bolt { color: var(--gold); font-size: 22px; font-weight: 700; }
/* Kitsune-maske-logo i menuen (erstatter det gamle ⚡) */
.nav-v3__logo-img { width: 30px; height: 30px; display: block; flex-shrink: 0; margin-right: 6px; }
.v4-footer__brand-img { width: 22px; height: 22px; display: inline-block; vertical-align: -4px; margin-right: 4px; }
.nav-v3__logo-name { color: var(--gold); font-size: 22px; font-weight: 700; font-family: var(--font); }
.nav-v3__logo-tcg  { color: var(--text); font-size: 22px; font-weight: 700; }

.nav-v3__links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
}

.nav-v3__link {
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color .15s;
}

.nav-v3__link:hover { color: var(--gold); }

.nav-v3__link--active {
  font-weight: 700;
  color: var(--text);
}

.nav-v3__link--active::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold);
  border-radius: 999px;
}

.nav-v3__link--muted { color: #6b7280; }
.nav-v3__link--muted:hover { color: var(--muted); }

.nav-v3__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.nav-v3__icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .15s;
  font-family: var(--font);
  padding: 0;
}

.nav-v3__icon-btn:hover { color: var(--text); }
.nav-v3__cart-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════════
   CATEGORY PAGE  (V2 – 02 exact spec)
   ══════════════════════════════════════════════════════════════ */

.page-cat { background: var(--bg-cat); color: var(--text); min-height: 100vh; }
.nav-v3--cat { background: var(--nav-cat); }

/* Breadcrumb */
.cat-breadcrumb {
  background: var(--nav-cat);
  border-bottom: 1px solid var(--divider-cat);
  padding: 0 40px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.cat-breadcrumb a { color: #6b7280; text-decoration: none; transition: color .15s; }
.cat-breadcrumb a:hover { color: var(--text); }
.cat-breadcrumb__sep { color: #6b7280; }
.cat-breadcrumb__current { color: var(--gold); font-weight: 700; }

/* Category header */
.cat-header {
  background: var(--bg-cat);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1360px;
  margin: 0 auto;
}

.cat-header__accent {
  width: 5px;
  height: 60px;
  background: var(--gold);
  border-radius: 3px;
  flex-shrink: 0;
}

.cat-header__text { flex: 1; }

.cat-header__title {
  font-size: 36px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1;
}

.cat-header__count {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.cat-header__tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cat-sort-btn {
  background: #1a1a1a;
  border: 1px solid var(--divider-cat);
  color: var(--muted);
  font-size: 13px;
  font-family: var(--font);
  padding: 0 14px;
  height: 40px;
  border-radius: var(--radius);
  cursor: pointer;
  min-width: 180px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.cat-grid-btn {
  background: #1a1a1a;
  border: 1px solid var(--divider-cat);
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  color: var(--gold);
}

/* Layout */
.cat-layout {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 40px 48px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}

/* Filter sidebar */
.cat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Hide horizontal overflow forcefully — the sidebar should never scroll sideways */
  overflow-x: hidden !important;
  background: transparent;
  position: sticky;
  top: 120px;
  align-self: start;
  max-height: calc(100vh - 136px);
  overflow-y: auto;
  /* Hide native vertical scrollbar so it can't bleed sideways either */
  scrollbar-width: thin;
}
.cat-sidebar::-webkit-scrollbar { width: 6px; height: 0; }
.cat-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 3px; }
/* Make sure no inner element forces horizontal overflow */
.cat-sidebar * { min-width: 0; max-width: 100%; }
.cat-sidebar .cat-filter-section { overflow-x: hidden; }
.cat-sidebar .cat-active-filters { overflow-x: hidden; flex-wrap: wrap; }
.cat-sidebar .cat-check-text,
.cat-sidebar .cat-filter-tag,
.cat-sidebar .cat-active-label { overflow-wrap: anywhere; word-break: break-word; }

/* Mobile filter toggle — hidden on desktop */
.cat-filter-toggle { display: none; }

.cat-filter-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--divider-cat);
}

.cat-filter-section:first-child { padding-top: 0; }

.cat-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}

/* Custom checkboxes */
.cat-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  cursor: pointer;
}

.cat-check-item input[type="checkbox"] { display: none; }

.cat-check-box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #1a1a1a;
  border: 1px solid var(--divider-cat);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.cat-check-item input:checked ~ .cat-check-box {
  background: var(--gold);
  border-color: var(--gold);
}

.cat-check-inner {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #000;
  opacity: 0;
  transition: opacity .15s;
}

.cat-check-item input:checked ~ .cat-check-box .cat-check-inner { opacity: 1; }

.cat-check-text {
  font-size: 13px;
  color: var(--muted);
  transition: color .15s;
}

.cat-check-item input:checked ~ .cat-check-text { color: var(--text); }

/* Price slider */
.cat-price-range {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.cat-slider-track {
  height: 4px;
  background: var(--divider-cat);
  border-radius: 2px;
  position: relative;
  margin: 8px 0;
}

.cat-slider-fill {
  position: absolute;
  left: 0;
  width: 70%;
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
}

.cat-slider-handle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  cursor: pointer;
}

.cat-slider-handle--start { left: 0; }
.cat-slider-handle--end { left: 70%; }

/* Active filters */
.cat-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.cat-active-label {
  font-size: 12px;
  color: #6b7280;
  width: 100%;
  margin-bottom: 4px;
}

.cat-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.35);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.cat-filter-tag:hover { background: rgba(245,158,11,.25); }

.cat-clear-all {
  font-size: 12px;
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  margin-top: 4px;
}

/* Main grid */
.cat-main { min-width: 0; }

.cat-results-count {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Product card — Figma V2-02 spec */
.pcard {
  background: var(--panel-cat);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}

.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

.pcard__img {
  width: 100%;
  height: 200px;
  background: #111;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  flex-shrink: 0;
}

.pcard__img--out::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.pcard__out-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 13px;
  color: var(--muted);
  z-index: 1;
}

.pcard__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  z-index: 1;
}

.pcard__badge--hot    { background: var(--gold); }
.pcard__badge--new    { background: var(--green); color: #fff; }
.pcard__badge--sale   { background: var(--red); color: #fff; }
.pcard__badge--rare   { background: var(--purple); color: #fff; }

.pcard__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pcard__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.pcard__sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.pcard__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  margin: 8px 0 0;
}

.pcard__cta {
  margin: 12px 16px 16px;
  display: block;
  width: calc(100% - 32px);
  padding: 12px;
  background: var(--gold);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s;
}

.pcard__cta:hover { opacity: .88; }

.pcard__cta--out {
  background: var(--divider-cat);
  color: #6b7280;
  cursor: default;
}

.pcard__cta--out:hover { opacity: 1; }

/* Pagination */
.cat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 0;
}

.cat-page-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: none;
  background: var(--panel-cat);
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.cat-page-btn:hover { background: #27272a; color: var(--text); }

.cat-page-btn--active {
  background: var(--gold);
  color: #000;
  font-weight: 700;
}

.cat-page-btn--active:hover { background: var(--gold); color: #000; }
.cat-page-btn:disabled { opacity: .35; cursor: default; }
.cat-page-ellipsis { width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE — CONCEPT A (Figma spec)
   ══════════════════════════════════════════════════════════════ */

.page-home-v4 { background: var(--bg-home); color: var(--text-warm); min-height: 100vh; }
.nav-v3--home { background: var(--nav-home); border-color: var(--border-home); }
.nav-v3--home .nav-v3__logo-bolt,
.nav-v3--home .nav-v3__logo-name { color: var(--gold-alt); }
.nav-v3--home .nav-v3__link { color: #bfb8ad; letter-spacing: .08em; font-size: 13px; font-weight: 500; }
.nav-v3--home .nav-v3__link:hover { color: var(--text-warm); }
/* ── Aktiv side i menuen: markeres med sidens EGEN farve ──────
   (ingen streg under — farven gør det alene) */
.nav-v3--home .nav-v3__link--active,
.nav-v3__link--active {
  font-weight: 800;
  color: var(--gold-alt);          /* standard: amber (fx Kontakt) */
  opacity: 1;
}
/* fjern den gamle streg under det aktive punkt */
.nav-v3__link--active::after { display: none !important; content: none !important; }

/* Farve pr. side — lysere varianter, så de er læsbare på den mørke menu */
body.page-pokemon  .nav-v3__link--active { color: #ff6b6b; }   /* Pokémon — rød   */
body.page-onepiece .nav-v3__link--active { color: #5fa8dc; }   /* One Piece — blå */
body.page-rifbound .nav-v3__link--active { color: #e0c65a; }   /* Riftbound — guld */

/* "muted"-klassen må ikke dæmpe det aktive punkt (gælder Kontakt) */
.nav-v3__link--muted.nav-v3__link--active { color: var(--gold-alt); opacity: 1; }

/* Support/info pages share the homepage palette. */
body.page-info {
  background:
    radial-gradient(ellipse 900px 700px at 60% 0%, rgba(232,135,13,.06), transparent 70%),
    radial-gradient(ellipse 500px 500px at 82% 18%, rgba(125,59,237,.07), transparent 60%),
    var(--bg-home);
  color: var(--text-warm);
}

body.page-info .page-head h1,
body.page-info .page-head h2,
body.page-info .fragt-hero h1,
body.page-info .faq-hero h1,
body.page-info .info-card strong,
body.page-info .policy-section h2,
body.page-info .policy-section h3,
body.page-info .faq-cat-title,
body.page-info .fragt-info-card__title,
body.page-info .fragt-step-title,
body.page-info .fragt-partner-body h4,
body.page-info .faq-cta h3,
body.page-info .fragt-cta h3 {
  color: var(--text-warm);
}

body.page-info .page-head p,
body.page-info .info-card ul,
body.page-info .info-card ol,
body.page-info .info-highlight,
body.page-info .seo-box,
body.page-info .policy-section p,
body.page-info .policy-section li,
body.page-info .policy-updated,
body.page-info .cookie-table td,
body.page-info .faq-hero p,
body.page-info .faq-cat-count,
body.page-info .faq-answer,
body.page-info .faq-cta p,
body.page-info .fragt-breadcrumb,
body.page-info .fragt-breadcrumb a,
body.page-info .fragt-hero p,
body.page-info .fragt-step-desc,
body.page-info .fragt-info-card__desc,
body.page-info .fragt-partner-body p,
body.page-info .faq-chevron-f,
body.page-info .faq-answer-f-inner,
body.page-info .fragt-cta p,
body.page-info .faq-breadcrumb,
body.page-info .faq-breadcrumb a,
body.page-info .policy-nav a {
  color: var(--muted-warm);
}

body.page-info .back-link,
body.page-info .page-head a,
body.page-info .info-card h3,
body.page-info .info-card a,
body.page-info .info-highlight a,
body.page-info .policy-section a,
body.page-info .policy-nav a:hover,
body.page-info .policy-nav a.active,
body.page-info .section-label-fragt,
body.page-info .fragt-hero h1 span,
body.page-info .fragt-step-num,
body.page-info .fragt-pill,
body.page-info .faq-label,
body.page-info .faq-answer a {
  color: var(--gold-alt);
}

body.page-info .info-card,
body.page-info .card,
body.page-info .seo-box,
body.page-info .policy-section,
body.page-info .policy-nav a,
body.page-info .faq-cat-header,
body.page-info .faq-items,
body.page-info .fragt-step-num,
body.page-info .fragt-info-card,
body.page-info .fragt-partner,
body.page-info .faq-items-fragt {
  background: var(--panel-home);
  border-color: var(--border-home);
}

body.page-info .faq-question,
body.page-info .faq-question-f,
body.page-info .faq-answer-f {
  background: var(--panel-home);
  color: var(--text-warm);
}

body.page-info .faq-item,
body.page-info .faq-item-f,
body.page-info .info-table th,
body.page-info .info-table td,
body.page-info .cookie-table th,
body.page-info .cookie-table td {
  border-color: var(--border-home);
}

body.page-info .faq-question:hover,
body.page-info .faq-question-f:hover,
body.page-info .policy-nav a:hover,
body.page-info .policy-nav a.active {
  background: rgba(232,135,13,.08);
}

body.page-info .info-highlight,
body.page-info .fragt-step-num--done,
body.page-info .fragt-pill,
body.page-info .pill-analytics {
  background: rgba(232,135,13,.12);
  border-color: rgba(232,135,13,.25);
}

body.page-info .fragt-steps::before {
  background: var(--border-home);
}

body.page-info .faq-chevron {
  color: var(--muted-warm);
}

body.page-info .faq-cta,
body.page-info .fragt-cta {
  background:
    radial-gradient(ellipse 500px 260px at 50% 0%, rgba(232,135,13,.10), transparent 70%),
    var(--panel-home);
  border-color: var(--border-home);
}

body.page-info .faq-cta__btn,
body.page-info .fragt-cta-btn,
body.page-info .fragt-partner-btn {
  background: var(--gold-alt);
  color: var(--bg-home);
}

body.page-info .faq-cta__btn:hover,
body.page-info .fragt-cta-btn:hover,
body.page-info .fragt-partner-btn:hover {
  background: #d9780b;
}

body.page-info .cookie-table th,
body.page-info .info-table th {
  background: rgba(232,135,13,.08);
  color: var(--gold-alt);
}

/* Hero */
.v4-hero {
  min-height: 600px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 700px at 60% 50%, rgba(232,135,13,.07), transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(125,59,237,.08), transparent 60%),
    var(--bg-home);
}

.v4-hero__inner {
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.v4-hero__copy { max-width: 600px; }

.v4-eyebrow {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-alt);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
}

.v4-hero__title {
  font-size: clamp(40px, 5.5vw, 64px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--text-warm);
  margin: 0 0 22px;
  text-transform: uppercase;
}

.v4-hero__sub {
  font-size: 17px;
  line-height: 1.65;
  color: #b8ada3;
  margin: 0 0 36px;
  max-width: 440px;
}

.v4-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn--v4-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 36px;
  background: var(--gold-alt);
  color: var(--bg-home);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: opacity .15s, transform .15s;
  border-radius: 4px;
}

.btn--v4-primary:hover { opacity: .88; transform: translateY(-1px); }

.btn--v4-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 36px;
  background: transparent;
  color: var(--gold-alt);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--gold-alt);
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: background .15s;
  border-radius: 4px;
}

.btn--v4-outline:hover { background: rgba(232,135,13,.08); }

/* Hero card fan */
.v4-hero__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 320px;
}

.v4-hero__card {
  position: absolute;
  border-radius: 12px;
  background: var(--panel-home);
  border: 1px solid var(--border-home);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* Pack image cards */
.v4-hero__card--img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #12101a;
}

.v4-hero__card--featured {
  border-color: rgba(232,135,13,.35);
  box-shadow: 0 24px 72px rgba(0,0,0,.7), 0 0 40px rgba(232,135,13,.12);
}

.v4-hero__card--clean {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.v4-hero__card--clean.v4-hero__card--featured {
  border-color: transparent;
  box-shadow: none;
}

.v4-hero__card:nth-child(1) { width: 160px; height: 224px; transform: rotate(-12deg) translateX(-120px); opacity: .5; }
.v4-hero__card:nth-child(2) { width: 183px; height: 239px; transform: rotate(-6deg) translateX(-60px); opacity: .75; }
.v4-hero__card:nth-child(3) { width: 210px; height: 264px; transform: rotate(0deg); z-index: 3; }
.v4-hero__card:nth-child(4) { width: 183px; height: 239px; transform: rotate(6deg) translateX(60px); opacity: .75; }
.v4-hero__card:nth-child(5) { width: 160px; height: 224px; transform: rotate(12deg) translateX(120px); opacity: .5; }

/* Hero carousel slides — cross-fade + subtle slide */
.v4-hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 80px 40px;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}
.v4-hero__slide--active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 1;
}
.v4-hero__slide--exit {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  z-index: 0;
}

/* Arrow buttons */
.v4-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(13,13,13,.55);
  border: 1px solid var(--border-home);
  color: var(--text-warm);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  backdrop-filter: blur(4px);
}
.v4-hero__arrow:hover { background: rgba(232,135,13,.2); }
.v4-hero__arrow--prev { left: 16px; }
.v4-hero__arrow--next { right: 16px; }

/* Dot nav */
.v4-hero__dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.v4-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(243,240,235,.3);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.v4-hero__dot--active {
  background: var(--gold-alt);
  transform: scale(1.3);
}

/* V4 Section label pattern */
.v4-section { padding: 72px 40px; max-width: 1360px; margin: 0 auto; }

.v4-section-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-alt);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.v4-section-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--text-warm);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}

.v4-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
}

.v4-see-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-alt);
  text-decoration: none;
  letter-spacing: .02em;
  transition: opacity .15s;
}

.v4-see-all:hover { opacity: .65; }

/* Reviews */
.v4-reviews {
  padding: 72px 40px 72px;
  background: var(--bg-cat, var(--bg-home));
}

.v4-reviews__inner {
  max-width: 1360px;
  margin: 0 auto;
}

.v4-reviews__header {
  margin-bottom: 22px;
}

.v4-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.v4-review-card {
  min-height: 248px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    var(--panel-home);
  border: 1px solid var(--border-home);
  border-radius: 8px;
}

.v4-review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.v4-review-card__stars {
  color: #00b67a;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

.v4-review-card__source {
  color: var(--muted-warm);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.v4-review-card__title {
  margin: 0 0 10px;
  color: var(--text-warm);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
}

.v4-review-card__text {
  margin: 0;
  color: var(--muted-warm);
  font-size: 14px;
  line-height: 1.65;
}

.v4-review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
  color: rgba(245,240,232,.58);
  font-size: 12px;
  font-weight: 700;
}

.v4-reviews__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.v4-reviews__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 6px;
  background: #00b67a;
  color: #061510;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform .15s, opacity .15s;
}

.v4-reviews__cta:hover {
  opacity: .86;
  transform: translateY(-1px);
}

/* Featured set cards */
.v4-sets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.v4-set-card {
  background: var(--panel-home);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.v4-set-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,.5); }

.v4-set-card__img {
  height: 200px;
  background: #12101a;
  background-size: auto 80% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.v4-set-card__body { padding: 16px 20px 20px; }

.v4-set-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.v4-set-badge--new  { background: #29c76b; }
.v4-set-badge--hot  { background: #f24d33; }
.v4-set-badge--excl { background: #7d3bed; }

.v4-set-card__name { font-size: 18px; font-weight: 700; color: var(--text-warm); margin: 0 0 4px; }
.v4-set-card__sub  { font-size: 14px; color: var(--muted-warm); margin: 0 0 14px; }

.v4-set-browse {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--gold-alt);
  color: var(--bg-home);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .15s;
}

.v4-set-browse:hover { opacity: .88; }

/* Popular cards strip */
.v4-cards-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* Equal-height cards: flex column so body fills remaining space */
.v4-cards-strip .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.v4-cards-strip .product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Pin price/stock row to bottom regardless of title length */
.v4-cards-strip .product-card__meta {
  margin-top: auto;
}

.v4-pop-card {
  background: var(--panel-home);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s;
}

.v4-pop-card:hover { transform: translateY(-3px); }

.v4-pop-card__img {
  height: 190px;
  background: #12101a;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.v4-pop-card__body { padding: 12px 14px 14px; }
.v4-pop-card__name { font-size: 15px; font-weight: 600; color: var(--text-warm); margin: 0 0 3px; }
.v4-pop-card__set  { font-size: 12px; color: var(--muted-warm); margin: 0 0 8px; }
.v4-pop-card__price { font-size: 18px; font-weight: 700; color: var(--gold-alt); margin: 0 0 10px; }

.v4-add-btn {
  width: 100%;
  padding: 10px;
  background: var(--gold-alt);
  color: var(--bg-home);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font);
  transition: opacity .15s;
}

.v4-add-btn:hover { opacity: .88; }

/* Promo banner */
.v4-promo {
  margin: 0 40px;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px;
}

.v4-promo__inner {
  background: var(--gold-alt);
  border-radius: 12px;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.v4-promo__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bg-home);
  opacity: .7;
  margin-bottom: 8px;
}

.v4-promo__title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 900;
  color: var(--bg-home);
  margin: 0 0 8px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1;
}

.v4-promo__sub {
  font-size: 16px;
  color: rgba(13,10,20,.65);
  margin: 0;
}

.v4-promo__cta {
  display: inline-flex;
  align-items: center;
  padding: 16px 32px;
  background: var(--bg-home);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity .15s;
}

.v4-promo__cta:hover { opacity: .85; }

/* Trust strip */
.v4-trust {
  border-top: 1px solid var(--border-home);
  border-bottom: 1px solid var(--border-home);
  padding: 36px 40px;
}

.v4-trust__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.v4-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.v4-trust-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #262133;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.v4-trust-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-warm);
}

/* New arrivals grid */
.v4-arrivals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.v4-arrival-card {
  background: var(--panel-home);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s;
}

.v4-arrival-card:hover { transform: translateY(-3px); }

.v4-arrival-card__img {
  height: 160px;
  background: #12101a;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

.v4-arrival-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: #29c76b;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 3px;
}

.v4-arrival-card__body { padding: 14px 16px 16px; }
.v4-arrival-card__name  { font-size: 16px; font-weight: 600; color: var(--text-warm); margin: 0 0 4px; }
.v4-arrival-card__type  { font-size: 12px; color: var(--muted-warm); margin: 0 0 10px; }
.v4-arrival-card__price { font-size: 20px; font-weight: 700; color: var(--gold-alt); margin: 0 0 12px; }

/* V4 About strip */
/* ── Newsletter hero (shared: index + category pages) ─────────── */
.nl-hero{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 500px at 12% 15%,rgba(232,135,13,.18),transparent 60%),
    radial-gradient(760px 520px at 88% 90%,rgba(125,59,237,.22),transparent 60%),
    linear-gradient(180deg,#15131f,#1a1724);
  border-top:1px solid var(--border-home);border-bottom:1px solid var(--border-home);}
.nl-hero__inner{max-width:1100px;margin:0 auto;padding:66px 24px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;}
.nl-hero__eyebrow{display:inline-block;font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-alt);margin-bottom:14px;}
.nl-hero__title{font-size:clamp(28px,4.4vw,46px);font-weight:900;letter-spacing:-.02em;
  line-height:1.06;margin:0 0 14px;color:#fff;}
.nl-hero__sub{font-size:15px;line-height:1.7;color:var(--muted-warm);margin:0 0 26px;max-width:470px;}
.nl-hero__form{display:flex;gap:10px;flex-wrap:wrap;max-width:470px;}
.nl-hero__input{flex:1;min-width:180px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:14px 16px;
  color:#fff;font:inherit;font-size:15px;outline:none;transition:border-color .15s;}
.nl-hero__input::placeholder{color:#8b8b97;}
.nl-hero__input:focus{border-color:var(--gold-alt);}
.nl-hero__btn{padding:14px 28px;border:none;border-radius:10px;
  background:linear-gradient(135deg,#f4a82a,#e8870d);color:#1a1a1a;font-weight:800;font-size:15px;
  cursor:pointer;white-space:nowrap;box-shadow:0 8px 24px rgba(232,135,13,.32);
  transition:transform .12s ease,box-shadow .12s ease;}
.nl-hero__btn:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(232,135,13,.5);}
.nl-hero__msg{flex-basis:100%;font-size:13.5px;font-weight:700;margin-top:2px;display:none;}
.nl-hero__note{margin-top:14px;font-size:12px;color:#6b7280;}
.nl-hero__cards{position:relative;height:310px;display:flex;align-items:center;justify-content:center;}
.nl-hero__card{position:absolute;width:158px;aspect-ratio:5/7;border-radius:13px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 18px 44px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);
  transition:transform .4s cubic-bezier(.2,.7,.2,1);}
.nl-hero__card::after{content:"";position:absolute;inset:0;border-radius:13px;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.4),transparent 42%,transparent 60%,rgba(125,59,237,.3));
  mix-blend-mode:overlay;}
.nl-hero__card--l{transform:rotate(-15deg) translateX(-84px) translateY(12px);}
.nl-hero__card--r{transform:rotate(15deg)  translateX(84px)  translateY(12px);}
.nl-hero__card--c{transform:translateY(-14px) scale(1.08);z-index:2;}
.nl-hero__cards:hover .nl-hero__card--l{transform:rotate(-20deg) translateX(-112px) translateY(0);}
.nl-hero__cards:hover .nl-hero__card--r{transform:rotate(20deg)  translateX(112px)  translateY(0);}
.nl-hero__cards:hover .nl-hero__card--c{transform:translateY(-22px) scale(1.12);}
/* Box / sealed-product variant (e.g. One Piece): show the whole box, no card
   frame or holo sheen — just a natural drop shadow that follows the product. */
.nl-hero__card--box{aspect-ratio:3/4;background-size:contain;border:none;border-radius:0;
  box-shadow:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));}
.nl-hero__card--box::after{display:none;}
@media(max-width:820px){
  .nl-hero__inner{grid-template-columns:1fr;gap:26px;padding:48px 20px;}
  .nl-hero__cards{height:240px;order:-1;}
  .nl-hero__card{width:128px;}
}

/* ── Per-page color tint for the newsletter section (matches each TCG) ── */
body.page-pokemon .nl-hero{
  background:
    radial-gradient(900px 500px at 12% 15%,rgba(219,58,58,.20),transparent 60%),
    radial-gradient(760px 520px at 88% 90%,rgba(125,59,237,.20),transparent 60%),
    linear-gradient(180deg,#241A34,#1E1628);}
body.page-pokemon .nl-hero__eyebrow{color:#ff6b6b;}
body.page-pokemon .nl-hero__input:focus{border-color:#DB3A3A;}
body.page-pokemon .nl-hero__btn{background:linear-gradient(135deg,#e85555,#DB3A3A);color:#fff;box-shadow:0 8px 24px rgba(219,58,58,.32);}
body.page-pokemon .nl-hero__btn:hover{box-shadow:0 12px 30px rgba(219,58,58,.5);}

body.page-onepiece .nl-hero{
  background:
    radial-gradient(900px 500px at 12% 15%,rgba(26,90,138,.30),transparent 60%),
    radial-gradient(760px 520px at 88% 90%,rgba(232,135,13,.16),transparent 60%),
    linear-gradient(180deg,#2A1E14,#211810);}
body.page-onepiece .nl-hero__eyebrow{color:#5fa8dc;}
body.page-onepiece .nl-hero__input:focus{border-color:#2a7ab5;}
body.page-onepiece .nl-hero__btn{background:linear-gradient(135deg,#2472ab,#1A5A8A);color:#fff;box-shadow:0 8px 24px rgba(26,90,138,.34);}
body.page-onepiece .nl-hero__btn:hover{box-shadow:0 12px 30px rgba(26,90,138,.55);}

body.page-rifbound .nl-hero{
  background:
    radial-gradient(900px 500px at 12% 15%,rgba(200,168,50,.22),transparent 60%),
    radial-gradient(760px 520px at 88% 90%,rgba(46,120,180,.22),transparent 60%),
    linear-gradient(180deg,#132030,#0F1A28);}
body.page-rifbound .nl-hero__eyebrow{color:#e0c65a;}
body.page-rifbound .nl-hero__input:focus{border-color:#C8A832;}
body.page-rifbound .nl-hero__btn{background:linear-gradient(135deg,#dcbb3e,#C8A832);color:#0D1520;box-shadow:0 8px 24px rgba(200,168,50,.34);}
body.page-rifbound .nl-hero__btn:hover{box-shadow:0 12px 30px rgba(200,168,50,.55);}

.v4-about-strip {
  padding: 80px 24px;
  background: linear-gradient(180deg, transparent, rgba(26,23,36,.5), transparent);
  border-top: 1px solid var(--border-home);
  border-bottom: 1px solid var(--border-home);
}
.v4-about-strip__inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.v4-about-strip__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold); margin-bottom: 16px;
}
.v4-about-strip__title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  margin: 0 0 16px;
}
.v4-about-strip__title span { color: var(--gold); }
.v4-about-strip__desc {
  font-size: 15px; color: var(--muted2); line-height: 1.7;
  margin: 0 0 32px;
}
.v4-about-strip__btn {
  display: inline-block; background: var(--gold); color: #000;
  font-weight: 700; font-size: 14px; padding: 13px 28px;
  border-radius: 8px; text-decoration: none;
}
.v4-about-strip__btn:hover { background: #e8870d; }

/* V4 Footer */
.v4-footer {
  background: #08050f;
  border-top: 1px solid var(--border-home);
  padding: 56px 40px 32px;
}

.v4-footer__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-home);
}

.v4-footer__brand {
  font-size: 22px;
  font-weight: 900;
  color: var(--gold-alt);
  letter-spacing: .05em;
  margin-bottom: 12px;
}

.v4-footer__about {
  font-size: 14px;
  color: var(--muted-warm);
  line-height: 1.65;
  margin: 0;
  max-width: 240px;
}

.v4-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-alt);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.v4-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v4-footer__links a {
  font-size: 14px;
  color: var(--muted-warm);
  text-decoration: none;
  transition: color .15s;
}

.v4-footer__links a:hover { color: var(--text-warm); }

.v4-footer__copy {
  max-width: 1360px;
  margin: 28px auto 0;
  font-size: 12px;
  color: #59524d;
  text-align: center;
}
.v4-footer__social { display:flex; gap:10px; margin-top:14px; }
.v4-footer__social a {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  color:var(--muted2); text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
.v4-footer__social a:hover {
  background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.3); color:#f59e0b;
}
.v4-footer__social svg { width:16px; height:16px; }

/* ══════════════════════════════════════════════════════════════
   PROTECT YOUR CARDS — Homepage section
   ══════════════════════════════════════════════════════════════ */

.v4-protect {
  padding: 72px 40px;
  border-top: 1px solid var(--border-home);
}

.v4-protect__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 32px;
  align-items: center;
  background: var(--panel-home);
  border: 1px solid var(--border-home);
  border-radius: 16px;
  padding: 48px 56px;
}

.v4-protect__icon {
  font-size: 48px;
  line-height: 1;
  flex-shrink: 0;
}

.v4-protect__title {
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 900;
  color: var(--text-warm);
  margin: 0 0 12px;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.v4-protect__sub {
  font-size: 15px;
  line-height: 1.65;
  color: #b8ada3;
  margin: 0 0 24px;
  max-width: 540px;
}

.v4-protect__cta {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border: 1px solid rgba(232,135,13,.4);
  color: var(--gold-alt);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  align-self: flex-start;
}

.v4-protect__cta:hover {
  background: rgba(232,135,13,.08);
  border-color: var(--gold-alt);
}

.v4-protect__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 32px;
  border-left: 1px solid var(--border-home);
  flex-shrink: 0;
}

.v4-protect__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v4-protect__item-icon {
  width: 40px;
  height: 40px;
  background: #1e1a2c;
  border: 1px solid var(--border-home);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.v4-protect__item-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-warm);
}

/* ══════════════════════════════════════════════════════════════
   BURGER MENU
   ══════════════════════════════════════════════════════════════ */

.nav-v3__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--border-home);
  border-radius: 8px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
}

.nav-v3__burger-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-warm);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
  transform-origin: center;
}

/* Animated X when open */
.nav-v3--menu-open .nav-v3__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-v3--menu-open .nav-v3__burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-v3--menu-open .nav-v3__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
@media (max-width: 768px) {
  .nav-v3__burger { display: flex; }

  .nav-v3__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    z-index: 200;
    border-bottom: 1px solid var(--border-home);
    box-shadow: 0 16px 40px rgba(0,0,0,.6);
  }

  .nav-v3--home .nav-v3__links  { background: var(--nav-home); }
  .nav-v3--cat  .nav-v3__links  { background: var(--nav-cat); }

  .nav-v3__links--open { display: flex; }

  .nav-v3__link {
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }

  .nav-v3__link:last-child { border-bottom: none; }
  .nav-v3__link--active::after { display: none; }

  .nav-v3__drawer-cart {
    width: calc(100% - 48px);
    margin: 12px 24px 0;
    padding: 14px 16px;
    justify-content: space-between;
    border: 1px solid rgba(232,135,13,.35);
    border-radius: 8px;
    background: rgba(232,135,13,.10);
    color: var(--text-warm);
    font-size: 15px;
  }

  .nav-v3__drawer-cart::before {
    content: "Kurv";
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .nav-v3__drawer-cart .nav-v3__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--gold-alt);
    color: var(--bg-home);
  }

  /* Keep fixed so drawer still anchors to the nav bar */
  .nav-v3 { position: fixed; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 1100px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  /* Layout */
  .v4-section { padding: 56px 32px; }

  /* Cat */
  .cat-layout { grid-template-columns: 220px 1fr; }

  /* Hero */
  .v4-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .v4-hero__copy { max-width: 100%; }
  .v4-hero__sub { max-width: 520px; margin-left: auto; margin-right: auto; }
  .v4-hero__cta { justify-content: center; }
  .v4-hero__cards { display: flex; position: relative; height: 200px; margin-top: 32px; }

  /* Reduce fan to 3 visible cards on tablet */
  .v4-hero__card:nth-child(1) { opacity: 0; pointer-events: none; }
  .v4-hero__card:nth-child(5) { opacity: 0; pointer-events: none; }
  .v4-hero__card:nth-child(2) { width: 140px; height: 196px; transform: rotate(-6deg) translateX(-70px); opacity: .6; }
  .v4-hero__card:nth-child(3) { width: 170px; height: 212px; }
  .v4-hero__card:nth-child(4) { width: 140px; height: 196px; transform: rotate(6deg) translateX(70px); opacity: .6; }

  /* Products */
  .v4-cards-strip { grid-template-columns: repeat(3, 1fr); }
  .v4-arrivals { grid-template-columns: repeat(3, 1fr); }

  /* Sets */
  .v4-sets-grid { grid-template-columns: repeat(3, 1fr); }

  .v4-reviews { padding: 56px 32px 56px; }
  .v4-reviews__grid { grid-template-columns: 1fr; }

  /* Singles */
  .v4-singles-grid { grid-template-columns: repeat(4, 1fr); }
  .v4-singles-grid .v4-single-card:nth-child(n+5) { display: none; }

  /* Buy cards */
  .v4-buycards__inner { gap: 48px; }

  /* Footer */
  .v4-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 768px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Ann bar scrolls on small screens */
  .ann-bar--amber {
    font-size: 12px;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 16px;
    white-space: nowrap;
  }

  /* Nav */
  .nav-v3 { padding: 0 16px; height: 60px; }
  .nav-v3__logo { margin-right: auto; }
  .nav-v3__logo-bolt { font-size: 18px; }
  .nav-v3__logo-img { width: 24px; height: 24px; margin-right: 4px; }
  .nav-v3__logo-name, .nav-v3__logo-tcg { font-size: 18px; }
  .nav-v3__actions { gap: 10px; }

  /* Compensate for fixed ann-bar (40px) + mobile nav (60px) */
  body { padding-top: 100px; }

  /* Section padding */
  .v4-section { padding: 48px 16px; }

  /* Hero */
  .v4-hero { padding: 48px 16px 40px; min-height: auto; }
  .v4-hero__title { font-size: clamp(32px, 9vw, 48px); }
  .v4-hero__sub { font-size: 15px; }
  .v4-hero__cta { gap: 10px; }
  .btn--v4-primary, .btn--v4-outline { padding: 14px 24px; font-size: 13px; }

  /* Card fan — scaled down for mobile, shown above the copy */
  .v4-hero__cards { display: flex; position: relative; height: 170px; margin-bottom: 24px; order: -1; }
  .v4-hero__card:nth-child(1) { opacity: 0; pointer-events: none; }
  .v4-hero__card:nth-child(5) { opacity: 0; pointer-events: none; }
  .v4-hero__card:nth-child(2) { width: 88px; height: 116px; transform: rotate(-6deg) translateX(-48px); opacity: .6; }
  .v4-hero__card:nth-child(3) { width: 108px; height: 142px; transform: rotate(0deg); }
  .v4-hero__card:nth-child(4) { width: 88px; height: 116px; transform: rotate(6deg) translateX(48px); opacity: .6; }

  /* Trust — 2×2 grid */
  .v4-trust { padding: 28px 16px; }
  .v4-trust__inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  .v4-trust-text { font-size: 13px; }

  /* Sets — single column */
  .v4-sets-grid { grid-template-columns: 1fr; }

  .v4-reviews { padding: 40px 16px 48px; }
  .v4-review-card { min-height: 0; padding: 20px; }
  .v4-review-card__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .v4-reviews__cta { width: 100%; }

  /* Products strip — 2 cols, horizontal scroll fallback */
  .v4-cards-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Popular products — show only top 4 */
  .v4-cards-strip > *:nth-child(n+5) { display: none; }

  /* Section header */
  .v4-section-header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .v4-section-title { font-size: 22px; }

  /* Buy cards */
  .v4-buycards { padding: 48px 16px; }
  .v4-buycards__inner { grid-template-columns: 1fr; gap: 32px; }
  .v4-buycards__visual { display: none; }
  .v4-buycards__title { font-size: 26px; }
  .v4-buycards__sub { font-size: 14px; }
  .v4-buycards__cta { width: 100%; justify-content: center; padding: 16px; }

  /* Cat pages */
  .cat-layout { grid-template-columns: 1fr; padding: 12px 16px 40px; gap: 0; }
  .cat-header { padding: 16px; flex-wrap: wrap; gap: 12px; }
  .cat-header__title { font-size: 24px; }
  .cat-header__tools { width: 100%; }
  .cat-sort-btn { flex: 1; }
  .cat-breadcrumb { padding: 0 16px; font-size: 12px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Filter sidebar — collapses to a drawer toggled by button */
  .cat-filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s;
  }
  .cat-filter-toggle:hover { border-color: rgba(245,158,11,.4); }
  .cat-filter-toggle__arrow { font-size: 12px; color: var(--muted); transition: transform .25s; }
  .cat-filter-toggle[aria-expanded="true"] .cat-filter-toggle__arrow { transform: rotate(180deg); }

  .cat-sidebar {
    display: block;
    position: static;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 16px;
    margin-bottom: 16px;
  }
  .cat-sidebar.mob-open {
    max-height: 1000px;
    padding: 16px;
  }

  /* Singles — 2 columns */
  .v4-singles-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .v4-singles-grid .v4-single-card { display: flex; }
  .v4-singles-grid .v4-single-card:nth-child(n+5) { display: none; }

  /* Protect */
  .v4-protect { padding: 0 16px 48px; border-top: none; }
  .v4-protect__inner {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 20px;
  }
  .v4-protect__icon { display: none; }
  .v4-protect__title { font-size: 22px; }
  .v4-protect__sub { font-size: 14px; }
  .v4-protect__cta { width: 100%; justify-content: center; }
  .v4-protect__items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--border-home);
    padding-top: 20px;
    width: 100%;
  }
  .v4-protect__item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border-home);
    border-radius: 12px;
    padding: 14px 6px;
  }
  .v4-protect__item-icon { margin: 0 auto; }
  .v4-protect__item-label { font-size: 12px; line-height: 1.3; }

  /* Arrivals */
  .v4-arrivals { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Footer */
  .v4-footer { padding: 40px 16px 24px; }
  .v4-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 28px; }
  .v4-footer__brand { font-size: 18px; }
  .v4-footer__about { max-width: 100%; font-size: 13px; }

  /* Checkout */
  .co-layout { grid-template-columns: 1fr; }
  .co-summary-card { position: static; }
  .co-stepper { overflow-x: auto; justify-content: flex-start; padding-bottom: 8px; gap: 0; }
  .co-step-line { min-width: 24px; }
  .co-step__label { font-size: 10px; }
  .co-field-row--2col { grid-template-columns: 1fr; }

  /* Product page */
  .pp3-layout { grid-template-columns: 1fr; gap: 24px; }
  .pp3-cta-row { flex-direction: column; }
  .pp3-related-grid { grid-template-columns: repeat(2, 1fr); }
  .pp3-trust { flex-direction: column; }
  .pp3-trust-item { border-right: none; border-bottom: 1px solid #27272a; }
  .pp3-trust-item:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (≤ 420px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 420px) {
  .v4-hero__title { font-size: 28px; }
  .v4-trust__inner { grid-template-columns: 1fr; }
  .v4-cards-strip { grid-template-columns: 1fr 1fr; }
  .v4-singles-grid { grid-template-columns: repeat(2, 1fr); }
  .v4-footer__inner { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .btn--v4-primary, .btn--v4-outline { width: 100%; justify-content: center; }
  .v4-hero__cta { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   VI KØBER SINGLE KORT — Homepage section
   ══════════════════════════════════════════════════════════════ */

.v4-buycards {
  padding: 72px 40px;
  background:
    radial-gradient(ellipse 800px 500px at 20% 50%, rgba(245,158,11,.06), transparent 70%),
    var(--bg-home);
  border-top: 1px solid var(--border-home);
  border-bottom: 1px solid var(--border-home);
}

.v4-buycards__inner {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: center;
}

/* Visual — stacked card fan */
.v4-buycards__visual {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.v4-buycards__card {
  position: absolute;
  width: 160px;
  height: 224px;
  border-radius: 10px;
  border: 1px solid var(--border-home);
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
}

.v4-buycards__card--back {
  background: #16121f;
  transform: rotate(-8deg) translateX(-20px) translateY(8px);
  opacity: .5;
}

.v4-buycards__card--mid {
  background: linear-gradient(145deg, #1e1a2c, #16121f);
  transform: rotate(-3deg) translateX(-6px) translateY(2px);
  opacity: .75;
}

.v4-buycards__card--front {
  background: linear-gradient(145deg, #241e36, #1a1528);
  border-color: rgba(245,158,11,.3);
  transform: rotate(0deg);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}

.v4-buycards__badge {
  position: absolute;
  bottom: 24px;
  right: 0;
  background: var(--gold-alt);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  z-index: 4;
  white-space: nowrap;
}

/* Copy */
.v4-buycards__copy { display: flex; flex-direction: column; gap: 0; }

.v4-buycards__eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold-alt);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.v4-buycards__title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--text-warm);
  margin: 0 0 18px;
  text-transform: uppercase;
}

.v4-buycards__sub {
  font-size: 16px;
  line-height: 1.65;
  color: #b8ada3;
  margin: 0 0 32px;
  max-width: 480px;
}

/* Steps */
.v4-buycards__steps {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.v4-buycards__steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--text-warm);
  font-weight: 500;
}

.v4-buycards__step-num {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-alt);
  letter-spacing: .06em;
  background: rgba(232,135,13,.12);
  border: 1px solid rgba(232,135,13,.25);
  border-radius: 4px;
  padding: 4px 8px;
  flex-shrink: 0;
  font-family: var(--font);
}

/* CTA button */
.v4-buycards__cta {
  display: inline-flex;
  align-items: center;
  padding: 18px 36px;
  background: var(--gold-alt);
  color: var(--bg-home);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
  transition: opacity .15s, transform .15s;
}

.v4-buycards__cta:hover { opacity: .88; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 1100px) {
  .v4-buycards__inner { grid-template-columns: 1fr; gap: 48px; }
  .v4-buycards__visual { height: 220px; }
}

@media (max-width: 600px) {
  .v4-buycards { padding: 48px 20px; }
  .v4-buycards__visual { display: none; }
  .v4-buycards__title { font-size: 28px; }
}

/* ══════════════════════════════════════════════════════════════
   SINGLES SECTION — Homepage
   ══════════════════════════════════════════════════════════════ */

.v4-singles-section { padding-bottom: 0; }

.v4-singles-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

/* Accessories grid uses FULL product cards (not the small single cards),
   so give it its own comfortable, responsive columns. Higher specificity
   than .v4-singles-grid so it wins on every page that has accessories. */
.v4-accessories-section .v4-singles-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
}
@media (max-width: 560px) {
  .v4-accessories-section .v4-singles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.v4-single-card {
  background: var(--panel-home);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-home);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer;
}

.v4-single-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  border-color: rgba(232,135,13,.25);
}

/* ── Holo / foil-effekt på single-kortenes billede ──────────────
   Giver 3D-tilt + regnbue-skær der følger musen. Ren CSS; JS sætter
   kun --px/--py/--hover (se initFoil i app.js). */
.v4-single-card { perspective: 1000px; }
/* Product cards (category pages) can also carry the foil on single cards.
   Their image uses background-size:contain, so mask must match. */
.product-card { perspective: 1000px; }
.product-card__img.foil .holo,
.product-card__img.foil .glare {
  -webkit-mask-size: contain;
  mask-size: contain;
  /* Match the image's origin so the shine lines up 1:1 with the card art,
     including the padding on the product-page "related" cards. */
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
  -webkit-mask-position: center;
  mask-position: center;
}
.foil {
  position: relative;
  overflow: hidden;
  transform:
    rotateY(calc((var(--px, 50) - 50) * 0.07deg))
    rotateX(calc((50 - var(--py, 50)) * 0.07deg));
  transition: transform .12s ease-out;
}
.foil .holo,
.foil .glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Inherit the card image's own padding + box model so the shine's
     content-box lines up 1:1 with the card image (which is drawn inside
     that same padding). Without this the mask was measured from the full
     padded box and sat offset / too large. */
  padding: inherit;
  box-sizing: border-box;
  /* Clip the shine to the exact card image (shape + size, centered),
     so the rainbow sits on the card and never spills into the margins. */
  -webkit-mask-image: var(--card-img, none);
  mask-image: var(--card-img, none);
  -webkit-mask-size: 90%;
  mask-size: 90%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
  -webkit-mask-clip: content-box;
  mask-clip: content-box;
}
.foil .holo { opacity: calc(var(--hover, 0) * .5); transition: opacity .25s; }
.foil .glare {
  opacity: calc(var(--hover, 0) * .45);
  background: radial-gradient(circle at calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%),
    rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 22%, rgba(0,0,0,0) 55%);
  mix-blend-mode: overlay;
  transition: opacity .25s;
}
[data-holo="rainbow"] .holo {
  background: repeating-linear-gradient(115deg,
    #ff5b5b 0%, #ffb84d 8%, #fff06b 16%, #6bff9e 24%,
    #5bc8ff 32%, #b06bff 40%, #ff5b5b 48%);
  background-size: 320% 320%;
  background-position: calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%);
  mix-blend-mode: color-dodge;
  filter: saturate(1.4) brightness(.82);
}
[data-holo="gold"] .holo {
  background: repeating-linear-gradient(115deg,
    #4a3410 0%, #b4842c 9%, #ffe9a8 15%, #b4842c 21%, #4a3410 30%);
  background-size: 300% 300%;
  background-position: calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%);
  mix-blend-mode: color-dodge;
  filter: brightness(.9);
}
[data-holo="galaxy"] .holo {
  background:
    radial-gradient(1.6px 1.6px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 70% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 44% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 82% 74%, #fff 50%, transparent 51%),
    repeating-linear-gradient(115deg,
      #2b1b6b 0%, #6b3bd8 10%, #2bb3d8 20%, #d84bb3 30%, #2b1b6b 40%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 340% 340%;
  background-position: 0 0, 0 0, 0 0, 0 0,
    calc(var(--px, 50) * 1%) calc(var(--py, 50) * 1%);
  mix-blend-mode: color-dodge;
  filter: saturate(1.3) brightness(.85);
}

/* Card image area — portrait TCG card ratio ~2.5×3.5 ≈ 5:7 */
.v4-single-card__img {
  width: 100%;
  aspect-ratio: 5 / 7;
  background: transparent;
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

/* Placeholder shimmer */
.v4-single-card--placeholder .v4-single-card__img {
  background: linear-gradient(135deg, #1a1724 0%, #16121e 50%, #1a1724 100%);
  background-size: 200% 200%;
  animation: singles-shimmer 2.4s ease-in-out infinite;
}

.v4-single-card--placeholder .v4-single-card__img::after {
  content: '🃏';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  opacity: .18;
}

@keyframes singles-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Condition badge */
.v4-condition-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
  align-self: flex-start;
}
.v4-condition-badge--near-mint    { background: rgba(34,197,94,.18);  color: #4ade80; }
.v4-condition-badge--lightly-played { background: rgba(163,230,53,.15); color: #a3e635; }
.v4-condition-badge--played       { background: rgba(251,146,60,.16); color: #fb923c; }
.v4-condition-badge--poor         { background: rgba(239,68,68,.16);  color: #f87171; }

.v4-single-card__body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.v4-single-card__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-warm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v4-single-card__set {
  font-size: 11px;
  color: var(--muted-warm);
}

.v4-single-card__price {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-alt);
  margin-top: auto;
  padding-top: 8px;
}

.v4-single-card--placeholder .v4-single-card__name,
.v4-single-card--placeholder .v4-single-card__set,
.v4-single-card--placeholder .v4-single-card__price {
  color: #3a3340;
}

/* Bottom CTA row */
.v4-singles-cta-row {
  display: flex;
  justify-content: center;
  padding: 8px 0 56px;
}

.v4-singles-see-all-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 40px;
  border: 1px solid rgba(232,135,13,.4);
  color: var(--gold-alt);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.v4-singles-see-all-btn:hover {
  background: rgba(232,135,13,.08);
  border-color: var(--gold-alt);
}

/* Responsive */
@media (max-width: 1100px) {
  .v4-singles-grid { grid-template-columns: repeat(4, 1fr); }
  .v4-singles-grid .v4-single-card:nth-child(n+5) { display: none; }
}

@media (max-width: 600px) {
  .v4-singles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .v4-singles-grid .v4-single-card:nth-child(n+1) { display: flex; }
}

/* ── Language toggle button ──────────────────────────────────── */
.nav-lang-btn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--gold-alt);
  color: var(--gold-alt);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  line-height: 1;
}
.nav-lang-btn:hover { background: var(--gold-alt); color: #000; }
.nav-lang-btn.is-translated { background: var(--gold-alt); color: #000; }
body { top: 0 !important; }
.goog-te-gadget { display: none !important; }

/* ── Global search overlay ────────────────────────────── */
#search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
#search-overlay.search-open { display: flex; }

#search-modal {
  background: #18161f;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

#search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

#search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  color: #f3f0eb;
  font-family: var(--font, 'Inter', sans-serif);
}
#search-input::placeholder { color: rgba(255,255,255,.3); }

#search-close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  transition: color .15s;
}
#search-close:hover { color: #f3f0eb; }

#search-results {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 400px;
  overflow-y: auto;
}

.search-result-item { border-bottom: 1px solid rgba(255,255,255,.05); }
.search-result-item:last-child { border-bottom: none; }

.search-result-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background .12s;
}
.search-result-link:hover { background: rgba(255,255,255,.05); }

.search-result-img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: #0d0d0d;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.search-result-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.search-result-name {
  font-size: 14px;
  font-weight: 600;
  color: #f3f0eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-sub {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-alt, #e8870d);
  flex-shrink: 0;
}

.search-no-results {
  padding: 20px 16px;
  color: rgba(255,255,255,.4);
  font-size: 14px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   PER-CATEGORY COLOR THEMES
   Each category page (Pokemon, One Piece, Riftbound) and the
   showcase product page get their own palette by overriding the
   shared CSS tokens at the body-class level. This keeps the rest
   of the site (homepage, faq, contact, etc.) on the default theme.
   ══════════════════════════════════════════════════════════════ */

/* ── Pokémon — purple base, red/orange accent ───────────────── */
body.page-pokemon {
  --bg-cat:      #241A34;
  --panel-cat:   #1E1628;
  --nav-cat:     #1E1628;
  --divider-cat: #332540;
  --gold:        #DB3A3A;
  --gold-alt:    #c43232;
}
body.page-pokemon .ann-bar--amber {
  background: #DB3A3A;
  color: #fff;
}
body.page-pokemon .cat-grid .btn--primary,
body.page-pokemon .v4-singles-grid .btn--primary {
  background: #DB3A3A;
  color: #fff;
}
body.page-pokemon .cat-grid .btn--primary:hover,
body.page-pokemon .v4-singles-grid .btn--primary:hover {
  box-shadow: 0 8px 24px rgba(219,58,58,.22);
}

/* ── One Piece — warm brown base, gold prices, blue CTA ─────── */
body.page-onepiece {
  --bg-cat:      #2A1E14;
  --panel-cat:   #3D3028;
  --nav-cat:     #1A1208;
  --divider-cat: #342818;
  --gold:        #D4A84A;       /* prices, titles, accents */
  --gold-alt:    #b88a32;
  --muted:       #8A9898;
  --text-warm:   #f5f0e8;
}
body.page-onepiece .ann-bar--amber {
  background: #1A5A8A;
  color: #fff;
}
/* Buttons stay blue while prices stay gold */
body.page-onepiece .pcard__cta,
body.page-onepiece .cat-grid .btn--primary,
body.page-onepiece .v4-singles-grid .btn--primary,
body.page-onepiece .v4-promo__cta,
body.page-onepiece .v4-buycards__cta,
body.page-onepiece .v4-hero__cta {
  background: #1A5A8A;
  color: #fff;
}
body.page-onepiece .cat-grid .btn--primary:hover,
body.page-onepiece .v4-singles-grid .btn--primary:hover {
  box-shadow: 0 8px 24px rgba(26,90,138,.24);
}
body.page-onepiece .pcard__cta--out {
  background: var(--divider-cat);
  color: #6b7280;
}

/* ── Riftbound — navy base, gold accent ─────────────────────── */
body.page-rifbound {
  --bg-cat:      #132030;
  --panel-cat:   #1A2E40;
  --nav-cat:     #0D1520;
  --divider-cat: #243848;
  --gold:        #C8A832;
  --gold-alt:    #a88c28;
}
body.page-rifbound .ann-bar--amber {
  background: #C8A832;
  color: #0D1520;
}
body.page-rifbound .cat-grid .btn--primary,
body.page-rifbound .v4-singles-grid .btn--primary {
  background: #C8A832;
  color: #0D1520;
}
body.page-rifbound .cat-grid .btn--primary:hover,
body.page-rifbound .v4-singles-grid .btn--primary:hover {
  box-shadow: 0 8px 24px rgba(200,168,50,.24);
}

/* ── Showcase / product detail — inherits per-category theme ──
   product.html toggles a body class (page-product--pokemon /
   page-product--onepiece / page-product--rifbound) at runtime
   based on the product's category, so the showcase shares the
   same palette as the listing page that brought you here. */
body.page-product--pokemon {
  --bg-cat:      #241A34;
  --panel-cat:   #1E1628;
  --nav-cat:     #1E1628;
  --divider-cat: #332540;
  --gold:        #DB3A3A;
  --gold-alt:    #c43232;
}
body.page-product--pokemon .ann-bar--amber { background: #DB3A3A; color: #fff; }

body.page-product--onepiece {
  --bg-cat:      #2A1E14;
  --panel-cat:   #3D3028;
  --nav-cat:     #1A1208;
  --divider-cat: #342818;
  --gold:        #D4A84A;
  --gold-alt:    #b88a32;
  --muted:       #8A9898;
}
body.page-product--onepiece .ann-bar--amber { background: #1A5A8A; color: #fff; }
body.page-product--onepiece .pcard__cta,
body.page-product--onepiece .pp3-cta,
body.page-product--onepiece .pp3-add-cart,
body.page-product--onepiece .v4-buycards__cta {
  background: #1A5A8A;
  color: #fff;
}

body.page-product--rifbound {
  --bg-cat:      #132030;
  --panel-cat:   #1A2E40;
  --nav-cat:     #0D1520;
  --divider-cat: #243848;
  --gold:        #C8A832;
  --gold-alt:    #a88c28;
}
body.page-product--rifbound .ann-bar--amber { background: #C8A832; color: #0D1520; }
#goog-gt-tt, .goog-te-balloon-frame { display: none !important; }