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

/* ── 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
   ══════════════════════════════════════════════════════════════ */

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

body { padding-top: 72px; }

.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;
}
/* 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; }

/* 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;
}

/* 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: 80px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  /* A thin scrollbar with its own reserved lane and some room before it,
     so it never covers the value counts on the right. */
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  padding-right: 12px;
}
.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-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-clear-all {
  font-size: 12px;
  color: var(--red);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  padding: 0;
  margin-top: 4px;
}

/* Sheet parts: on desktop only the reset button of the foot is shown */
.cat-sidebar__head { display: none; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--divider-cat); }
.cat-sidebar__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--text); }
.cat-sidebar__close { background: none; border: 1px solid var(--divider-cat); border-radius: 8px; color: var(--text); width: 40px; height: 40px; font-size: 16px; cursor: pointer; }
.cat-sidebar__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.cat-sidebar__show { display: none; flex: 1; padding: 14px 16px; border: none; border-radius: 10px; background: var(--gold); color: #0d0d0d; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.cat-check-count { margin-left: auto; padding-left: 8px; font-size: 12px; color: #6b7280; }
.cat-filter-more { background: none; border: none; padding: 6px 0 0; color: var(--gold); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.cat-filter-search { width: 100%; margin: 0 0 8px; padding: 8px 10px; background: #1a1a1a; border: 1px solid var(--divider-cat); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; }
.cat-filter-search:focus { outline: none; border-color: var(--gold); }
.cat-filter-toggle__count { color: var(--gold); }
@media (max-width: 768px) {
  html.filters-open { overflow: hidden; }
}

.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;
}

/* ══════════════════════════════════════════════════════════════
   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-title,
body.page-info .faq-cta h3,
body.page-info .fragt-cta__title {
  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__title,
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); }

/* 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;
}

/* 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;
}

/* 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 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;
}

/* Search and cart: icons in the top bar on desktop, menu items on phones */
.nav-v3__drawer-only { display: none; }
button.nav-v3__link { background: none; border: none; font: inherit; text-align: left; cursor: pointer; }

/* 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__links--open { display: flex; }
  .nav-v3__drawer-only { display: block; }
  .nav-v3__bar-only { display: none; }

  .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; }

  /* 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; }

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

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

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

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

@media (max-width: 768px) {
  /* Nav */
  .nav-v3 { padding: 0 16px; height: 60px; }
  .nav-v3__logo { margin-right: auto; }
  .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 the fixed mobile nav (60px) */
  body { padding-top: 60px; }

  /* 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; }

  /* Phones show only the cards and the button. The texts are hidden
     visually but stay in the page for search engines and screen readers
     (the first title is the page's h1). */
  .v4-hero .v4-eyebrow,
  .v4-hero__title,
  .v4-hero__sub {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* 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; }

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

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

  /* 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 → full-screen sheet opened by the "Filtre" button.
     Only the body scrolls; the head (title, ✕) and the foot (Nulstil,
     "Vis N produkter") always stay on screen. */
  .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: 18px; color: var(--muted); }

  .cat-sidebar {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    /* The desktop rule's align-self:start would shrink a fixed box to its
       content (CSS box alignment); the sheet must fill the screen. */
    align-self: normal;
    height: 100%;
    max-height: none;
    overflow: hidden !important;
    padding: 0;
    scrollbar-gutter: auto;
    background: var(--bg-cat);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .cat-sidebar.mob-open {
    visibility: visible;
    transform: none;
    transition: transform .25s ease;
  }
  .cat-sidebar__head { display: flex; }
  .cat-sidebar__body { flex: 1; overflow-y: auto; padding: 8px 16px 16px; overscroll-behavior: contain; }
  .cat-sidebar__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--divider-cat); background: var(--bg-cat); }
  .cat-sidebar__show { display: block; }

  /* 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; }

  /* 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; }

  /* 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-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; }
}

/* ══════════════════════════════════════════════════════════════
   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 assets/js/shop/images.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;
}

@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;
  /* Pris + lagerstatus side om side, som på de store produktkort.
     Wrapper til to linjer i stedet for at flyde ud, når kortet er smalt. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}

/* Enkeltkortene er smallere end produktkortene (6 pr. række på desktop,
   2 på mobil), så lagermærket skrumpes lidt for at blive på samme linje
   som prisen i stedet for at wrappe ned under den. */
.v4-single-card__price .stock {
  font-size: 10px;
  padding: 3px 6px;
}

/* "Læg i kurv" i fuld bredde under prisen — samme udtryk som produktkortene. */
.v4-single-card__add {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.v4-single-card__add:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 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; }

/* ── 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 .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;
}
/* 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);
}

/* ── 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 .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 ──
   The product page template sets 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--onepiece {
  --bg-cat:      #2A1E14;
  --panel-cat:   #3D3028;
  --nav-cat:     #1A1208;
  --divider-cat: #342818;
  --gold:        #D4A84A;
  --gold-alt:    #b88a32;
  --muted:       #8A9898;
}

body.page-product--rifbound {
  --bg-cat:      #132030;
  --panel-cat:   #1A2E40;
  --nav-cat:     #0D1520;
  --divider-cat: #243848;
  --gold:        #C8A832;
  --gold-alt:    #a88c28;
}