/* ═══════════════════════════════════════════════════════════════
   Area 151 — Global Styles
   Light mode default · Dark mode via [data-theme="dark"]
   ═══════════════════════════════════════════════════════════════ */

/* ── Light mode (default) ────────────────────────────────────── */
:root {
  --bg:            #f7f7fa;
  --bg2:           #ffffff;
  --bg3:           #eeeef5;
  --card-bg:       #ffffff;
  --card-border:   rgba(0,0,0,0.08);
  --red:           #e63946;
  --red-glow:      rgba(230,57,70,0.20);
  --yellow:        #c47d07;
  --yellow-dim:    rgba(196,125,7,0.10);
  --text:          #1c1c2e;
  --text-dim:      #45455e;   /* darker body text for readability in light mode */
  --text-muted:    #6f6f8c;   /* darker secondary/caption text */
  --radius:        14px;
  --radius-sm:     8px;
  --card-radius:   17px;  /* gallery card corners (smaller images) */
  --card-radius-lg: 26px; /* card detail page + admin thumbnails (larger images) */
  --transition:    0.22s ease;
  --shadow:        0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-hover:  0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --header-bg:     rgba(255,255,255,0.92);
  --filters-bg:    #ffffff;
  --overlay-bg:    rgba(255,255,255,0.90);
  --spinner-track: rgba(0,0,0,0.08);

  /* ── AG Design Token System ──────────────────────────────── */
  --ag-bg-0:          #050816;
  --ag-bg-1:          #0b1022;
  --ag-bg-2:          #121a30;
  --ag-surface:       rgba(14, 20, 40, 0.78);
  --ag-surface-solid: #10172c;
  --ag-line:          rgba(126, 157, 216, 0.16);
  --ag-line-strong:   rgba(126, 157, 216, 0.28);
  --ag-text-1:        #f4f7ff;
  --ag-text-2:        #b8c4dd;
  --ag-text-3:        #7d8cae;
  --ag-fire:          #f57c22;
  --ag-gold:          #d7a84f;
  --ag-cyan:          #59c8ff;
  --ag-success:       #41d08e;
  --ag-danger:        #ff6b6b;
  --ag-radius-sm:     12px;
  --ag-radius-md:     18px;
  --ag-radius-lg:     24px;
  --ag-pill:          999px;
  --ag-shadow-1:      0 8px 24px rgba(0,0,0,.22);
  --ag-shadow-2:      0 18px 50px rgba(0,0,0,.36);
  --ag-glow-cyan:     0 0 0 1px rgba(89,200,255,.18), 0 0 28px rgba(89,200,255,.12);
  --ag-space-1: 4px;  --ag-space-2: 8px;   --ag-space-3: 12px;  --ag-space-4: 16px;
  --ag-space-5: 24px; --ag-space-6: 32px;  --ag-space-7: 48px;
  --ag-space-8: 64px; --ag-space-9: 96px;
}

/* ── Dark mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
  /* Palette derived from the Area 151 banner artwork */
  --bg:            #06091b;   /* deep midnight navy — darkest sky */
  --bg2:           #0c1025;   /* panels / cards */
  --bg3:           #141830;   /* section headers / filters */
  --card-bg:       #0c1025;
  --card-border:   rgba(100,150,255,0.11);
  --red:           #e8640a;   /* fiery orange — banner logo colour */
  --red-glow:      rgba(232,100,10,0.22);
  --yellow:        #d4a843;   /* warm amber gold */
  --yellow-dim:    rgba(212,168,67,0.15);
  --text:          #f0f5ff;   /* near-white starlight */
  --text-dim:      #a8b8d4;   /* readable mid blue-grey */
  --text-muted:    #5a6e96;   /* secondary muted */
  --shadow:        0 4px 24px rgba(0,0,0,0.70);
  --shadow-hover:  0 12px 40px rgba(40,120,255,0.22), 0 4px 16px rgba(0,0,0,0.60);
  --header-bg:     rgba(6,9,27,0.92);
  --filters-bg:    var(--bg2);
  --overlay-bg:    rgba(6,9,27,0.92);
  --spinner-track: rgba(255,255,255,0.08);
}

/* ── Dark mode: fix hardcoded colors + apply theme ───────────────
   All rules here override light-mode hardcoded values that don't
   respond to CSS variables.
   ──────────────────────────────────────────────────────────────── */

/* Headings → bright orange */
[data-theme="dark"] .meta-section-heading,
[data-theme="dark"] .meta-sub-heading,
[data-theme="dark"] .price-chart-heading,
[data-theme="dark"] .detail-price-label,
[data-theme="dark"] .similar-heading,
[data-theme="dark"] .recent-heading {
  color: var(--red);
}

/* Body text + values → white */
[data-theme="dark"] .detail-price      { color: #fff; }
[data-theme="dark"] .detail-price-note { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .meta-label        { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .meta-value        { color: #fff; }
[data-theme="dark"] .card-summary      { color: var(--text-dim); }
[data-theme="dark"] .meta-notes-text   { color: var(--text-dim); }
[data-theme="dark"] .detail-name       { color: #fff; }
[data-theme="dark"] .detail-set        { color: var(--text-dim); }
[data-theme="dark"] .card-nav-pos      { color: #fff; }

/* Fix black borders → theme-aware */
[data-theme="dark"] .detail-hero,
[data-theme="dark"] .card-summary,
[data-theme="dark"] .detail-price-block,
[data-theme="dark"] .meta-2col,
[data-theme="dark"] .meta-section {
  border-color: var(--card-border);
}

/* Filter / search inputs → readable */
[data-theme="dark"] .filter-select,
[data-theme="dark"] .search-input {
  color: #fff;
}
[data-theme="dark"] .filter-select option {
  background: var(--bg2);
  color: #fff;
}

/* ── Detail page dp-* elements → white/bright in dark mode ──── */
[data-theme="dark"] .dp-name         { color: #fff; }
[data-theme="dark"] .dp-sub          { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .dp-variance     { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .dp-rule         { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .dp-price-label  { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .dp-price-note   { color: rgba(255,255,255,0.3); }
[data-theme="dark"] .dp-spec-label   { color: rgba(255,255,255,0.38); }
[data-theme="dark"] .dp-spec-value   { color: #fff; }
[data-theme="dark"] .dp-summary      { color: #fff; }
[data-theme="dark"] .card-image-disclaimer { color: rgba(255,255,255,0.5); }

/* ── Card nav bar → readable in both modes ───────────────────── */
[data-theme="dark"] .card-nav-btn     { color: #fff; }
[data-theme="dark"] .card-nav-btn:hover:not(:disabled) { color: #fff; }
[data-theme="dark"] .card-nav-pos     { color: #fff; }

/* ── Structural borders → visible in dark mode ───────────────── */
[data-theme="dark"] body.detail-page .detail-panel { border-color: rgba(255,255,255,0.18); }

/* ── Admin (light mode) ──────────────────────────────────────── */
body.admin-page {
  /* inherits light mode :root variables — no overrides needed */
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  background: #06091b; /* dark navy gutters — both modes */
}

/* ── Page frame — centred content column with side rules ──────── */
.page-frame {
  max-width: 1360px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  border-left:  1px solid rgba(255,255,255,0.15);
  border-right: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
  position: relative;
}

/* Banner sits flush inside the frame — no padding, no radius */
.hero-banner {
  width: 100%;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: relative;
  box-shadow: none;
}
.hero-banner > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
/* Controls overlaid on the banner */
.banner-controls {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  z-index: 10;
  line-height: 1;
}
/* Back link inside banner gets light text to read over image */
.banner-controls .back-link {
  color: rgba(255,255,255,0.85);
  margin-right: auto;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.banner-controls .back-link:hover { color: #fff; }
.banner-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}
.banner-logo img {
  height: 200px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.55));
}

body {
  background: transparent;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; text-decoration: none; }
img { display: block; }
button { font-family: inherit; cursor: pointer; }

/* ── Lightbox ─────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: zoom-out;
}
/* Stage holds the cloned card-tilt — sized via JS scale */
.lightbox-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  transform-origin: center center;
}
/* Override small max-width on the clone inside lightbox */
.lightbox-stage .card-tilt {
  max-width: 100% !important;
  width: 100% !important;
  cursor: zoom-out !important;
}
.lightbox-stage .card-tilt::after { display: none; }
.lightbox-close {
  position: absolute;
  top: 1.25rem; right: 1.5rem;
  z-index: 2;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  line-height: 1;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lightbox-close:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* ── Page loader ──────────────────────────────────────────────── */
.page-loader {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  transition: opacity 0.4s, visibility 0.4s;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--spinner-track);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top:    1px solid rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 2px 12px rgba(0,0,0,0.20);
}
.header-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}

/* Logo image in header */
.logo-img {
  height: auto;
  width: auto;
  max-height: 100%;
  display: block;
}

.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: inherit; }
.logo-icon {
  width: 34px; height: 34px;
  background: var(--red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px var(--red-glow);
  flex-shrink: 0;
}
.logo-icon svg { width: 18px; height: 18px; fill: #fff; }
.logo-text { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.4px; }

.header-center { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.header-right  { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; margin-left: auto; }

.stat-chip {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: 99px;
  padding: 4px 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.stat-chip strong { color: var(--red); font-weight: 700; }

/* ── Theme switch ─────────────────────────────────────────────── */
.theme-switch {
  display: flex; align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.theme-switch input { display: none; }

.tsw-track {
  position: relative;
  width: 116px; height: 34px;
  border-radius: 99px;
  background: #dde1e7;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.15), inset -3px -3px 7px rgba(255,255,255,0.8);
  display: flex; align-items: center;
  transition: background 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
[data-theme="dark"] .tsw-track {
  background: #141428;
  box-shadow: inset 3px 3px 7px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.04);
}

.tsw-thumb {
  position: absolute;
  left: 4px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2), -1px -1px 4px rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
  z-index: 1;
}
.theme-switch input:checked ~ .tsw-track .tsw-thumb {
  transform: translateX(82px);
  background: #2a2a48;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4), -1px -1px 4px rgba(255,255,255,0.06);
}

.tsw-sun, .tsw-moon {
  width: 13px; height: 13px;
  position: absolute;
  transition: opacity 0.2s;
}
.tsw-sun  { color: #f59e0b; opacity: 1; }
.tsw-moon { color: #a0a8d0; opacity: 0; }
.theme-switch input:checked ~ .tsw-track .tsw-sun  { opacity: 0; }
.theme-switch input:checked ~ .tsw-track .tsw-moon { opacity: 1; }

.tsw-label {
  position: absolute;
  font-size: 0.60rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.2s;
  pointer-events: none;
}
.tsw-label-light {
  right: 8px;
  color: #888;
  opacity: 1;
}
.tsw-label-dark {
  left: 8px;
  color: #6666aa;
  opacity: 0;
}
.theme-switch input:checked ~ .tsw-track .tsw-label-light { opacity: 0; }
.theme-switch input:checked ~ .tsw-track .tsw-label-dark  { opacity: 1; }

/* ── Back link ───────────────────────────────────────────────── */
.back-link {
  display: flex; align-items: center; gap: 6px;
  color: var(--text-dim);
  font-size: 0.9rem;
  transition: color var(--transition);
}
.back-link:hover { color: var(--red); }

/* ── Filters bar ──────────────────────────────────────────────── */
.filters-bar {
  background: var(--filters-bg);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; z-index: 90;
  box-shadow: none;
}
.filters-inner {
  max-width: 1440px; margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}

/* ── Category toggle ──────────────────────────────────────────── */
.cat-toggle {
  display: flex;
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  flex-shrink: 0;
}
.cat-btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.cat-btn:hover { color: var(--text); background: var(--card-bg); }

/* Per-category active colours — banner palette */
.cat-btn[data-cat="all"].active    { background: #e63946; color: #fff; box-shadow: 0 2px 8px rgba(230,57,70,0.35); }
.cat-btn[data-cat="graded"].active { background: #d4900a; color: #fff; box-shadow: 0 2px 8px rgba(212,144,10,0.35); }
.cat-btn[data-cat="raw"].active    { background: #2a8fd4; color: #fff; box-shadow: 0 2px 8px rgba(42,143,212,0.35); }
.cat-btn[data-cat="sealed"].active { background: #4ab848; color: #fff; box-shadow: 0 2px 8px rgba(74,184,72,0.35); }

/* Per-language active colours */
.cat-btn[data-lang="all"].active      { background: #e63946; color: #fff; box-shadow: 0 2px 8px rgba(230,57,70,0.35); }
.cat-btn[data-lang].active            { background: var(--bg3); box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }

/* Flag images inside language buttons */
#langToggle .cat-btn { padding: 5px 10px; display: inline-flex; align-items: center; justify-content: center; }
#langToggle .cat-btn img {
  width: 26px;
  height: 19px;
  border-radius: 3px;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.15s, filter 0.15s;
}
#langToggle .cat-btn:hover img { opacity: 0.85; }
#langToggle .cat-btn.active img { opacity: 1; }
#langToggle .cat-btn:hover { background: var(--card-bg); }

/* ── Search & selects ─────────────────────────────────────────── */
.search-wrap {
  position: relative; flex: 1; min-width: 180px;
}
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted);
  pointer-events: none;
}
.search-input {
  width: 100%;
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px 8px 36px;
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}
.search-input:focus { border-color: #2a8fd4; background: var(--bg2); }
.search-input::placeholder { color: var(--text-muted); font-weight: 400; }

.filter-select {
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
  outline: none;
  cursor: pointer;
  min-width: 130px;
  transition: border-color var(--transition);
}
.filter-select:focus { border-color: #2a8fd4; }

.result-count {
  font-size: 0.8rem; color: var(--text-muted);
  white-space: nowrap; margin-left: auto;
}

/* Guide prices notice */
.guide-notice {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.guide-notice::before {
  content: 'ℹ';
  font-size: 0.7rem;
}

/* ── Welcome / intro section ──────────────────────────────────── */
.welcome-section {
  background: linear-gradient(135deg, #0d0d2b 0%, #1c0a3a 50%, #0d0d2b 100%);
  border-radius: 18px;
  margin: 1.75rem 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
/* Subtle diagonal texture */
.welcome-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent, transparent 28px,
    rgba(255,255,255,0.018) 28px, rgba(255,255,255,0.018) 29px
  );
  pointer-events: none;
}
.welcome-inner {
  padding: 2.25rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 2.75rem;
  position: relative;
  z-index: 1;
}
.welcome-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  z-index: 2;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.welcome-close:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
}
.welcome-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.welcome-logo-img {
  height: 90px;
  width: auto;
  display: block;
}
.welcome-icon {
  width: 58px; height: 58px;
  background: rgba(212,168,67,0.12);
  border: 2px solid rgba(212,168,67,0.55);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.welcome-icon svg {
  width: 30px; height: 30px;
  fill: #d4a843;
}
.welcome-brand-name {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.welcome-brand-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.38);
  margin-top: 3px;
  white-space: nowrap;
}
.welcome-divider {
  width: 1px;
  height: 90px;
  background: rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.welcome-content { flex: 1; min-width: 0; }
.welcome-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 0.7rem;
  letter-spacing: -0.2px;
}
.welcome-body {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
  margin-bottom: 0.4rem;
}
.welcome-body + .welcome-badges { margin-top: 1rem; }
.welcome-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}
.w-badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.65);
}
.w-badge--gold {
  background: rgba(212,168,67,0.16);
  border-color: rgba(212,168,67,0.45);
  color: #d4a843;
}
@media (max-width: 768px) {
  .welcome-section { margin: 1.25rem 1rem; border-radius: 14px; }
  .welcome-inner { flex-direction: column; gap: 1.5rem; padding: 1.75rem 1.25rem; }
  .welcome-divider { display: none; }
  .welcome-brand { justify-content: center; }
}

/* ── Gallery grid — 3 columns ─────────────────────────────────── */
.gallery-wrap {
  max-width: 1360px; margin: 0 auto;
  padding: 2rem 2.5rem 3rem;
}
/* ══════════════════════════════════════════════════════════════
   GALLERY — clean rewrite
   ════════════════════════════════════════════════════════════ */

.gallery-grid {
  display: grid;
  /* minmax(0,1fr) forces min=0 so ALL columns share space equally regardless of content width */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

/* ── Pagination ───────────────────────────────────────────────── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 0 3rem;
  flex-wrap: wrap;
}
/* Top bar sits above the grid — less bottom padding, more top breathing room */
#paginationBarTop {
  padding: 0.5rem 0 1.5rem;
}
.pg-numbers {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pg-btn:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
}
.pg-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.pg-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.pg-arrow { padding: 0 16px; gap: 0.3rem; }
.pg-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ── Gallery card (gc-*) ──────────────────────────────────────── */

/* Card wrapper — no background, no border, just the image + text */
.gc {
  position: relative;
  cursor: pointer;
  min-width: 0;  /* prevent grid item from blowing out column width */
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  will-change: transform;
}
/* hover handled by JS tilt — no CSS override needed */

/* Image box — LOCKED 5:7 ratio via padding-top.
   padding-top: 140% = 7/5 × 100% of width.
   The img is position:absolute so it is COMPLETELY out of flow
   and can NEVER affect the container height. */
.gc-img {
  position: relative;
  width: 100%;
  padding-top: 140%;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.gc[data-cat="sealed"] .gc-img {
  background: #fff;
}
.gc[data-cat="sealed"] .gc-img img {
  transform: scale(0.9);
}
.gc-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* show full card — no cropping */
  border-radius: var(--card-radius);
  transition: opacity 0.25s;
}
/* Raw/sealed: don't stretch the image container to match a taller slab in
   the same row. Keeping the container at its natural 140% height means the
   card fills it exactly, so overflow:hidden+border-radius clips all four
   corners correctly — top AND bottom. In mixed rows the gap below sits in
   the image-row track and the subgrid still aligns the text row. */
.gc-img:not(.gc-slab):not(.gc-slab-ace-photo) {
  align-self: start;
}

/* ── Card back flip — single 180° perspective flip ──────────────────
   Card tilts away with real 3D depth (near edge larger, far smaller),
   swaps face instantly at the edge-on midpoint, then unfolds from
   the opposite side. Never past ±90° so no backface mirroring.      */
.gc-flip .gc-face-front {
  opacity: 0; /* hidden until flip reveals it */
}
@keyframes card-spin-reveal {
  0%   { transform: perspective(600px) rotateY(0deg);   animation-timing-function: ease-in;  }
  49%  { transform: perspective(600px) rotateY(90deg);  animation-timing-function: step-end; } /* reach edge-on        */
  50%  { transform: perspective(600px) rotateY(-90deg); animation-timing-function: ease-out; } /* jump to other side   */
  100% { transform: perspective(600px) rotateY(0deg);   }                                       /* settle facing viewer */
}
/* Back face hides at midpoint */
@keyframes card-back-fade {
  0%   { opacity: 1; }
  49%  { opacity: 1; animation-timing-function: step-end; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Front face appears at midpoint */
@keyframes card-front-fade {
  0%   { opacity: 0; }
  49%  { opacity: 0; animation-timing-function: step-end; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
.gc-flip.flipped {
  animation: card-spin-reveal 0.8s linear forwards;
}
.gc-flip.flipped .gc-face-back {
  animation: card-back-fade 0.8s linear forwards;
}
.gc-flip.flipped .gc-face-front {
  animation: card-front-fade 0.8s linear forwards;
}

/* Text beneath the image */
.gc-info {
  padding: 0.22rem 0.1rem 0;
  border-top: 1px solid var(--card-border);
}

/* Line 1 — "Pokémon TCG [Name]" — black bold */
.gc-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.gc-name-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grading company logo + grade, under the card name (graded cards only) */
.gc-grade {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-left: calc(18px + 0.35rem);
  margin-bottom: 0.3rem;
}
.gc-grade-logo {
  height: 16px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.gc-grade-word {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #555;
}
.gc-grade-val {
  font-size: 0.78rem;
  font-weight: 800;
  color: #111;
}
[data-theme="dark"] .gc-grade-word { color: var(--text-dim); }
[data-theme="dark"] .gc-grade-val { color: #fff; }
.gc-lang-flag {
  flex-shrink: 0;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
  opacity: 0.75;
}
[data-theme="dark"] .gc-name { color: #fff; }

/* Line 2 — "Set | #Number" — dark grey */
.gc-meta {
  font-size: 0.72rem;
  font-weight: 400;
  color: #555;
  padding-left: calc(18px + 0.35rem);
  margin-bottom: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .gc-meta { color: var(--text-dim); }

/* Line 3 — "EST: £X,XXX" — green, larger, bold */
.gc-price {
  font-size: 1.05rem;
  font-weight: 800;
  color: #16a34a;
  letter-spacing: -0.01em;
  padding-left: calc(18px + 0.35rem);
}
[data-theme="dark"] .gc-price { color: #4ade80; }

/* 24h price change indicator */
.gc-change {
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.18rem;
  letter-spacing: 0.01em;
}
.gc-change-up   { color: #4ade80; }
.gc-change-down { color: #f87171; }
[data-theme="light"] .gc-change-up   { color: #16a34a; }
[data-theme="light"] .gc-change-down { color: #dc2626; }

/* Seller badge — first line inside .gc-info, above the card name */
.gc-seller-badge {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  padding: 0 0 0.2rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Sold state */
.gc-sold .gc-img   { opacity: 0.5; }
.gc-sold .gc-price { text-decoration: line-through; opacity: 0.5; }
.gc-sold-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}

/* PSA / grading authority badge — shown top-right on graded cards */
.grade-badge {
  position: absolute; top: 10px; right: 10px;
  background: #ffffff;
  border: 2px solid #003087;
  border-radius: 9px;
  text-align: center;
  padding: 4px 8px 6px;
  min-width: 56px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
  z-index: 2;
  line-height: 1;
}
.grade-badge-type {
  display: block;
  background: #cc1010;
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  border-radius: 4px;
  padding: 2px 6px;
  margin-bottom: 3px;
}
.grade-badge-label {
  display: block;
  font-size: 0.5rem;
  font-weight: 800;
  color: #003087;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.grade-badge-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: #003087;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 5rem 1rem;
  color: var(--text-dim);
  grid-column: 1 / -1;
}
.empty-state .pokeball-spin {
  font-size: 3rem; color: var(--red);
  animation: spin 2s linear infinite; display: inline-block;
}
.empty-state p { margin-top: 1rem; }
.hidden { display: none !important; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
  color: var(--text-dim);
  font-size: 0.82rem;
  border-top: 1px solid var(--card-border);
  background: var(--bg2);
  line-height: 1.7;
  margin-top: 2rem;
}
.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 4rem;   /* room for the centered social row */
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;  /* brand · links · links · contact (right) */
  gap: 2.5rem;
  position: relative;
}
.footer-brand {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 0.5rem;
}
.footer-logo { height: 81px; width: auto; display: block; }
.footer-tagline {
  max-width: 30ch;
  margin: 0 0 1.1rem;
  color: var(--text-muted);
}
.footer-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.9rem;
}
.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.footer-contact li { color: var(--text-muted); }
.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer a:hover { color: var(--red); }

/* Social row */
.footer-social {
  position: absolute; left: 0; right: 0; bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.footer-social-link {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  background: var(--bg);
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-social-link svg { width: 14px; height: 14px; }
.footer-social-link:hover {
  color: var(--text);
  border-color: var(--text-dim);
  transform: translateY(-2px);
}
.footer-ebay {
  width: auto;
  padding: 0 0.6rem;
  font-weight: 800;
  font-size: 0.75rem;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid var(--card-border);
  padding: 1.2rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.7;
}
.footer-bottom p { margin: 0 auto; max-width: 90ch; }
.footer-disclaimer { margin-top: 0.4rem; opacity: 0.85; }

@media (max-width: 760px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.5rem;
    padding: 2rem 1.25rem 1.5rem;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  /* back into normal flow on small screens */
  .footer-social { position: static; margin-top: 1rem; }
}
@media (max-width: 460px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ── Legal / policy pages ─────────────────────────────────────────── */
.legal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}
.legal-home {
  font-weight: 800;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.legal-home:hover { color: var(--red); }
.legal-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}
.legal-doc { color: var(--text-dim); line-height: 1.75; }
.legal-doc h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.4rem;
}
.legal-doc h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin: 2rem 0 0.6rem;
}
.legal-doc h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.3rem 0 0.4rem;
}
.legal-doc p,
.legal-doc li { font-size: 0.92rem; }
.legal-doc ul { margin: 0.5rem 0 1rem; padding-left: 1.3rem; }
.legal-doc li { margin-bottom: 0.4rem; }
.legal-doc a { color: var(--red); }
.legal-updated { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.5rem; }
.legal-note {
  border: 1px solid rgba(230,57,70,0.35);
  background: rgba(230,57,70,0.07);
  color: var(--text-dim);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  font-size: 0.85rem;
  margin-bottom: 1.75rem;
}
.legal-toc {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  background: var(--bg2);
}
.legal-toc ul { margin: 0.5rem 0 0; }

/* ════════════════════════════════════════════════════════════════
   CARD DETAIL PAGE
   ════════════════════════════════════════════════════════════════ */

.detail-page { }
[data-theme="dark"] .detail-page {
  background: radial-gradient(ellipse at 20% 0%, #1a0a2e 0%, var(--bg) 60%);
}

.detail-main {
  max-width: 1300px; margin: 0 auto;
  padding: 3rem 1.5rem 5rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  gap: 2rem;
  align-items: start;
}
/* Both grid children must be allowed to shrink below their content size */
.detail-main > .card-scene   { min-width: 0; }
.detail-main > .detail-panel {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 3-D Tilt scene */
.card-scene {
  perspective: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.card-image-disclaimer {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
  font-style: italic;
  line-height: 1.5;
  max-width: 196px;
  margin: 20px auto 0;
}
.card-tilt {
  position: relative;
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px var(--card-border);
  transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 0.08s linear, box-shadow 0.08s linear;
  will-change: transform;
  cursor: crosshair;
  max-width: 371px;
  width: 100%;
}
[data-theme="dark"] .card-tilt {
  box-shadow: 0 30px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
}
.card-detail-image {
  width: 100%; height: auto; display: block;
  border-radius: var(--card-radius-lg);
}
.card-shine {
  position: absolute; inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,0.28) 0%,
    rgba(255,255,255,0.06) 40%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
}
.card-tilt:hover .card-shine { opacity: 1; }

/* Resting glow removed */

/* Detail info panel */
.detail-panel {
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 16px;
  box-shadow:
    0 0 24px rgba(65, 195, 255, 0.45),
    inset 0 0 24px rgba(65, 195, 255, 0.04);
}

/* ── New clean panel layout ──────────────────────────────────── */
.dp-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
  margin-bottom: 0.65rem;
}
.dp-badge .dp-badge-cond { color: var(--text); }
.dp-name {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin: 0 0 0.4rem;
}
/* Grading company logo + grade, under the card name (graded cards only) */
.dp-grade {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.55rem;
}
.dp-grade-logo {
  height: 26px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.dp-grade-word {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.dp-grade-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
}
.dp-sub {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dim);
  margin: 0;
  letter-spacing: 0.01em;
}
.dp-variance {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.3rem 0 0;
  font-style: italic;
  letter-spacing: 0.01em;
}
.dp-rule {
  height: 1px;
  background: var(--card-border);
  margin: 1.25rem 0;
}
.dp-price-section { }
.dp-price-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.dp-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.02em;
}
.dp-price-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* ── eBay last-sold comparison ─────────────────────────────── */
.ebay-sold-section {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--card-border);
}
.ebay-loading {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.ebay-sold-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.ebay-sold-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ebay-sold-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ebay-sold-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ebay-sold-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}
.ebay-sold-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.ebay-sold-diff {
  font-size: 0.75rem;
  font-weight: 600;
}
.ebay-diff-above { color: #4ade80; }
.ebay-diff-below { color: #f87171; }

.ebay-sold-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 1rem;
  padding: 10px 16px;
  background: #111;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  cursor: pointer;
}
.ebay-sold-btn:hover {
  background: #1a1a1a;
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
.ebay-sold-btn:active { transform: translateY(0); }
.ebay-logo {
  font-size: 1.25rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
  font-family: Arial, sans-serif;
}
.ebay-btn-divider {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.ebay-btn-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

[data-theme="light"] .ebay-sold-btn {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .ebay-sold-btn:hover {
  background: #eaeaea;
  border-color: rgba(0,0,0,0.2);
}
[data-theme="light"] .ebay-btn-divider { background: rgba(0,0,0,0.15); }
[data-theme="light"] .ebay-btn-label   { color: rgba(0,0,0,0.8); }

/* ── Price change indicators (24h / 7d / 28d) ──────────────────── */
.price-changes {
  margin-top: 0.85rem;
}
.price-changes-inner {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.price-change-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.32rem 0.65rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  line-height: 1;
}
.price-change-up {
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.28);
  color: #4ade80;
}
.price-change-down {
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.28);
  color: #f87171;
}
.price-change-na {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-muted);
}
.pc-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.pc-arrow { font-size: 0.82rem; }
.pc-value { font-weight: 700; }
.pc-pct   { font-size: 0.72rem; opacity: 0.8; }

[data-theme="light"] .price-change-up {
  background: rgba(22, 163, 74, 0.09);
  border-color: rgba(22, 163, 74, 0.25);
  color: #16a34a;
}
[data-theme="light"] .price-change-down {
  background: rgba(220, 38, 38, 0.09);
  border-color: rgba(220, 38, 38, 0.25);
  color: #dc2626;
}
[data-theme="light"] .price-change-na {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.09);
}

.dp-specs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dp-spec-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}
.dp-spec-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  min-width: 130px;
  flex-shrink: 0;
}
.dp-spec-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.8;
}
.dp-summary {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0.4rem 0 0;
}
.dp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.detail-hero {
  background: var(--bg2);
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.detail-hero .detail-price-block {
  background: var(--bg3);
  margin-bottom: 0;
}

.detail-rarity {
  display: inline-block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(230,57,70,0.10);
  border: 1px solid rgba(230,57,70,0.25);
  color: var(--red);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 1rem;
}
.detail-name {
  font-size: 2.2rem; font-weight: 900; line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 0.5rem;
}
.detail-set {
  color: var(--text); font-size: 1.05rem;
  margin-bottom: 1.25rem;
}

.card-summary {
  background: var(--bg2);
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-dim);
  font-style: normal;
  font-weight: 400;
}

.detail-price-block {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.detail-price-label {
  display: block;
  font-size: 0.8rem; color: #16a34a;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
  margin-bottom: 0.25rem;
}
.detail-price-row {
  display: flex; align-items: baseline; gap: 0.6rem;
}
.detail-price {
  font-size: 2.2rem; font-weight: 900;
  color: #111;
  letter-spacing: -1px;
}
.detail-price-note {
  font-size: 0.8rem; color: #111;
  font-style: italic;
}

.detail-meta {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-bottom: 2.5rem;
}

/* 2-column combined info/grading table */
.meta-2col {
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.meta-2col-heading {
  /* heading spans full width — reuses meta-section-heading styles */
}
.meta-sub-heading {
  padding: 0.65rem 14px;
  border-top: 1.5px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--bg3);
}
.meta-2col-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.meta-col {
  min-width: 0;
}
.meta-col + .meta-col {
  border-left: 1.5px solid var(--card-border);
}

.meta-section {
  border: 1.5px solid rgba(0,0,0,0.18);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.meta-section-heading {
  padding: 0.65rem 14px;
  border-bottom: 1px solid var(--card-border);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--bg3);
}
.meta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.6rem 14px;
  border-bottom: 1px solid var(--card-border);
  gap: 2px;
}
.meta-row:last-child { border-bottom: none; }
.meta-label { color: #000; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.meta-value { font-weight: 400; font-size: 0.92rem; color: #444; word-break: break-word; }
.meta-value.highlight { color: var(--yellow); font-weight: 700; }
.meta-notes-text {
  margin: 0;
  padding: 0.85rem 14px;
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
  white-space: pre-wrap;
}

.detail-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   CARD DETAIL PAGE — PANEL & GRADE HERO
   Light-background layout with floating panel and grade hero banner
   ════════════════════════════════════════════════════════════════ */

/* ── Centre card and panel vertically ────────────────────────── */
body.detail-page .detail-main {
  align-items: start;
  gap: 2rem;
}

/* ── Responsive layout — placed here so body.detail-page specificity wins ── */
@media (max-width: 1060px) {
  body.detail-page .detail-main {
    grid-template-columns: minmax(0, 320px) 1fr;
  }
}
@media (max-width: 860px) {
  body.detail-page .detail-main {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 3rem;
    justify-items: center;
    gap: 1.5rem;
  }
  body.detail-page .detail-main > .card-scene {
    width: 100%;
    max-width: 380px;
    grid-column: 1;
  }
  body.detail-page .detail-main > .detail-panel {
    width: 100%;
    grid-column: 1;
  }
}
@media (max-width: 480px) {
  body.detail-page .detail-main {
    padding: 1.25rem 0.75rem 2.5rem;
    gap: 1rem;
  }
  body.detail-page .detail-main > .card-scene {
    max-width: 100%;
  }
}

/* ── Floating panel ───────────────────────────────────────────── */
body.detail-page .detail-panel {
  border-radius: 16px;
  overflow: visible;
  padding: 2rem;
  border: 1px solid var(--card-border);
  box-shadow:
    0 0 24px rgba(65, 195, 255, 0.45),
    inset 0 0 24px rgba(65, 195, 255, 0.04);
  background: var(--card-bg);
}

/* ── Grade hero banner ────────────────────────────────────────── */
.grade-hero-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #0d0d2b 0%, #1c0838 50%, #0d0d2b 100%);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.grade-hero-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.grade-hero-name {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.grade-hero-set {
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.48);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.grade-hero-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.grade-hero-certified {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.42);
}
.grade-hero-label {
  font-size: 0.9rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.grade-hero-num {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -3px;
  color: #d4a843;
  text-shadow: 0 0 40px rgba(212,168,67,0.55);
}

/* ── Beckett subgrades hero strip ────────────────────────────── */
.grade-hero-subgrades {
  display: flex;
  background: linear-gradient(135deg, #0a0a22 0%, #160628 50%, #0a0a22 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.grade-hero-sub-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0.5rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  gap: 3px;
}
.grade-hero-sub-item:last-child { border-right: none; }
.grade-hero-sub-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32);
}
.grade-hero-sub-value {
  font-size: 1.55rem;
  font-weight: 900;
  color: #d4a843;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 0 20px rgba(212,168,67,0.4);
}

/* ── Panel body padding ───────────────────────────────────────── */
.detail-panel-body { padding: 1.75rem 2rem; }

/* ── Responsive panel & typography ──────────────────────────────── */
@media (max-width: 860px) {
  body.detail-page .detail-panel { border-radius: 14px; padding: 1.5rem; }
  .dp-name   { font-size: 1.4rem; }
  .dp-price  { font-size: 2rem; }
  .dp-spec-label { min-width: 100px; }
  .detail-panel-body { padding: 1.25rem; }
  .grade-hero-block  { padding: 1.1rem 1.25rem; gap: 1rem; }
  .grade-hero-name   { font-size: 1.1rem; }
  .grade-hero-num    { font-size: 3rem; letter-spacing: -2px; }
}
@media (max-width: 480px) {
  body.detail-page .detail-panel { padding: 1rem; border-radius: 12px; }
  .dp-badge  { font-size: 0.72rem; }
  .dp-name   { font-size: 1.15rem; }
  .dp-sub    { font-size: 0.88rem; }
  .dp-price  { font-size: 1.75rem; }
  .dp-spec-label { min-width: 80px; font-size: 0.78rem; }
  .dp-spec-value { font-size: 0.82rem; line-height: 1.7; }
  .dp-actions { gap: 0.5rem; }
  .dp-actions .btn { font-size: 0.8rem; padding: 0.55rem 0.9rem; }
}

/* ── Similar price range section ────────────────────────────── */
.similar-section {
  border-top: 1px solid var(--card-border);
  background: var(--bg2);
  padding: 2.5rem 0 3.5rem;
}
.similar-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.similar-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.similar-heading::after {
  content: ''; flex: 1; height: 1px;
  background: var(--card-border);
}
.similar-scroll {
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--card-border) transparent;
}
.similar-scroll::-webkit-scrollbar { height: 4px; }
.similar-scroll::-webkit-scrollbar-track { background: transparent; }
.similar-scroll::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }
.similar-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  min-width: 0;   /* responsive: columns reduce with screen width (see media queries) */
}
.mini-card {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mini-card-info {
  background: var(--card-bg);
}
.mini-card-img {
  position: relative;
  padding-top: 169.1%;  /* slab ratio — all cards same height */
  background: transparent;
  overflow: hidden;
  border-radius: 14px;
}
.mini-card-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
/* Raw: natural height centred vertically so border-radius hits all 4 card corners */
.mini-card-img.img-raw img {
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  object-fit: unset;
  border-radius: 14px;
  padding: 0;
}

/* Sealed: white box inset 4% top/bottom to match slab scale(0.92) visual height */
.mini-card-img.img-sealed {
  background: linear-gradient(to bottom, transparent 4%, #ffffff 4%, #ffffff 96%, transparent 96%);
  border-radius: 14px;
}
/* Sealed: small image centred inside white box */
.mini-card-img.img-sealed img {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 70%;
  height: auto;
  max-height: 78%;
  object-fit: contain;
  border-radius: 6px;
}
/* ACE cert photo: contain, already a slab image */
.mini-card-img.img-slab img {
  object-fit: contain;
  padding: 4px;
}
.mini-card-info {
  padding: 0.55rem 0.65rem 0.65rem;
  border-top: 1px solid var(--card-border);
}
.mini-card-name {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  margin-bottom: 2px;
}
.mini-card-grade {
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.mini-card-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--red);
}

/* ── Share / copy-link button ────────────────────────────────── */
.btn-share {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-share:hover { border-color: var(--text-dim); color: var(--text); }
.btn-share.copied { border-color: #16a34a; color: #16a34a; }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 600;
  transition: all var(--transition);
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: #c62e3a; box-shadow: 0 4px 20px var(--red-glow); }
.btn-ghost {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  color: var(--text-dim);
}
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }

/* ════════════════════════════════════════════════════════════════
   ADMIN PAGES  — forced dark navy theme
   ════════════════════════════════════════════════════════════════ */

.admin-page {
  min-height: 100vh;
  /* Override all CSS variables to match the dark navy card tiles */
  --bg:          #080818;
  --bg2:         #0e0e22;
  --bg3:         #181830;
  --card-bg:     #12122a;
  --card-border: rgba(255,255,255,0.09);
  --text:        #f0f5ff;
  --text-dim:    #e4eeff;   /* near-white — was #a8b8d4 */
  --text-muted:  #c8d8f2;   /* clearly visible light blue — was #5a6e96 */
  --header-bg:   rgba(8,8,24,0.95);
  --filters-bg:  #0e0e22;
  background: var(--bg);
  color: var(--text);
}
/* All selects and inputs on admin page inherit dark theme */
.admin-page select,
.admin-page select option,
.admin-page input[type="text"],
.admin-page input[type="number"],
.admin-page input[type="password"] {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--card-border);
}
.admin-page select option { background: var(--bg2); }

/* Login page */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.login-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 380px;
  box-shadow: var(--shadow);
}
.login-logo {
  text-align: center; margin-bottom: 2rem;
  font-size: 1.4rem; font-weight: 800;
}
.login-logo .logo-ball { color: var(--red); margin-right: 8px; font-size: 1.5rem; }

.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block; font-size: 0.88rem; font-weight: 700;
  color: var(--text-dim); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.form-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
}
.form-input:focus { border-color: var(--red); }

.login-error {
  color: var(--red); font-size: 0.85rem;
  text-align: center; margin-bottom: 1rem;
  display: none;
}

/* ── Admin nav ───────────────────────────────────────────────── */
.admin-nav {
  background: var(--header-bg);
  border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(12px);
}
.admin-nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 16px 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
}
.admin-nav-brand {
  display: flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.admin-nav-logo {
  width: 250px;
  height: 153px;
  display: block;
  object-fit: contain;
}
.admin-nav-welcome {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.admin-nav-pill {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: 100px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Page links in the middle */
.admin-nav-pages {
  display: flex; align-items: center; gap: 6px;
  justify-content: center;
}
.admin-nav-page {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
  border: 1px solid transparent;
}
.admin-nav-page:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
}
.admin-nav-page.active {
  color: #fff;
  background: rgba(232,100,10,0.18);
  border-color: rgba(232,100,10,0.45);
}
/* Right-side action links */
.admin-nav-links { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.admin-nav-links button, .admin-nav-links a button {
  background: none; border: 1px solid var(--card-border);
  color: var(--text-dim); border-radius: 8px;
  padding: 6px 14px; font-size: 0.82rem; cursor: pointer;
  transition: all var(--transition);
}
.admin-nav-links button:hover { color: var(--text); border-color: var(--text-muted); background: var(--bg3); }
.admin-nav-links .btn-primary { border: none; color: #fff; padding: 6px 16px; }
.admin-nav-icon-btn {
  padding: 6px 8px !important;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Admin container ─────────────────────────────────────────── */
.admin-container {
  max-width: 1360px; margin: 0 auto;
  padding: 1.75rem 2rem 4rem;
}

/* ── Metric strip ────────────────────────────────────────────── */
.admin-stats {
  display: flex;
  gap: 0;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.admin-stat-card {
  flex: 1;
  background: var(--card-bg);
  padding: 1rem 1.4rem;
  border-right: 1px solid var(--card-border);
}
.admin-stat-card:last-child { border-right: none; }
.admin-stat-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
  font-weight: 600;
}
.admin-stat-value { font-size: 1.75rem; font-weight: 900; color: var(--yellow); line-height: 1; }

/* ── Tools disclosure panel ──────────────────────────────────── */
.admin-tools-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.admin-tools-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s;
}
.admin-tools-summary::-webkit-details-marker { display: none; }
.admin-tools-summary:hover { background: var(--bg3); }
.admin-tools-summary-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted);
}
.admin-tools-chevron {
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
/* chevron rotation handled by JS animation script */
.admin-tools-body {
  padding: 1.1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--card-border);
  overflow: hidden; /* required for JS height animation */
}
.admin-tools-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 0.85rem;
}
.admin-tools-divider {
  border: none; border-top: 1px solid var(--card-border);
  margin: 1rem 0;
}

/* Inline bulk markup (inside tools panel) */
.bulk-controls-inline {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.bulk-inline-label {
  font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap;
}
.bulk-pct-group { display: flex; gap: 3px; }
.bulk-inline-to { font-size: 0.86rem; color: var(--text-muted); }

/* Upload zone */
.upload-zone {
  border: 1.5px dashed var(--card-border);
  border-radius: 12px;
  padding: 1.75rem;
  text-align: center;
  transition: all var(--transition);
  cursor: pointer;
  background: var(--bg3);
}
.upload-zone.drag-over { border-color: var(--red); background: rgba(230,57,70,0.05); }
.upload-zone svg { width: 34px; height: 34px; color: var(--text-muted); margin: 0 auto 0.75rem; }
.upload-zone p { color: var(--text-dim); font-size: 0.85rem; }
.upload-zone label { color: var(--red); cursor: pointer; }

/* Pct buttons */
.pct-btn {
  background: var(--bg3); border: 1px solid var(--card-border);
  color: var(--text-dim); border-radius: 7px;
  padding: 5px 11px; font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: all var(--transition);
}
.pct-btn:hover, .pct-btn.active {
  background: var(--red); border-color: var(--red); color: #fff;
}
.bulk-input {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 7px;
  padding: 5px 10px; width: 88px; font-size: 0.82rem; outline: none;
}
.bulk-set-select {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 8px;
  padding: 6px 10px; font-size: 0.82rem; outline: none;
}

/* ── Cards section ───────────────────────────────────────────── */
.admin-cards-section { }
.admin-cards-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.9rem;
}
.admin-cards-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.admin-cards-count {
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-muted);
}

/* ── Small button variant ────────────────────────────────────── */
.btn-sm {
  font-size: 0.8rem !important;
  padding: 6px 13px !important;
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 8px !important;
}

/* Admin card edit grid */
.admin-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
}
@media (max-width: 600px) {
  .admin-edit-grid { grid-template-columns: 1fr; }
}

/* ── Accordion (card-edit page) ─────────────────────────────── */
.acc-wrap { display: flex; flex-direction: column; }
.acc-section {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.acc-header {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 1.1rem;
  background: var(--bg3);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.26rem;
  color: var(--text);
  text-align: left;
  transition: background 0.15s;
}
.acc-header:hover { background: var(--bg2); }
.acc-section.open .acc-header { background: var(--bg2); }
.acc-header > span:first-child {
  display: flex;
  align-items: center;
}
.acc-icon {
  font-size: 1.5rem;
  color: var(--text-muted);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.acc-section.open .acc-icon { transform: rotate(180deg); }
.acc-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 1.1rem;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}
.acc-section.open .acc-body {
  max-height: 5000px;
  opacity: 1;
  padding: 1.25rem 1.1rem;
}

/* Admin cards table */
.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table th {
  background: var(--bg3);
  color: var(--text-muted);
  font-weight: 700; font-size: 0.84rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--bg3); }

.markup-input {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px; width: 72px; font-size: 0.85rem;
  text-align: center; outline: none;
  transition: border-color var(--transition);
}
.markup-input:focus { border-color: var(--red); }

.save-btn {
  background: none; border: 1px solid var(--red);
  color: var(--red); border-radius: 6px;
  padding: 4px 12px; font-size: 0.8rem;
  cursor: pointer; transition: all var(--transition); white-space: nowrap;
}
.save-btn:hover { background: var(--red); color: #fff; }
.save-btn.saved  { background: #16a34a; border-color: #16a34a; color: #fff; }

/* (old .sold-ribbon / .card-sold removed — superseded by .gc-sold-badge) */

/* ── Sold badge (detail page) ───────────────────────────────── */
.detail-sold-badge {
  display: inline-block;
  background: #b41e1e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding: 5px 16px;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

/* ── Admin filter bar ───────────────────────────────────────── */
/* ── Admin filter bar ────────────────────────────────────────── */
.admin-filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.admin-filter-controls {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.admin-search-wrap {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0 10px;
  flex: 1; min-width: 160px;
  color: var(--text-muted);
}
.admin-search-wrap svg { flex-shrink: 0; }
.admin-search {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  width: 100%;
  padding: 6px 0;
}
.admin-filter-pills {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 2px;
}
.admin-filter-sep {
  width: 1px; height: 18px;
  background: var(--card-border);
  flex-shrink: 0;
}
.admin-btn-group {
  display: flex;
  gap: 3px;
}
.admin-flt-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.admin-flt-btn:hover { background: var(--bg3); color: var(--text); }
.admin-flt-btn.active { background: var(--red); color: #fff; }

/* ── Admin card grid ─────────────────────────────────────────── */
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.5rem;
  padding: 0;
}
.admin-grid-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.admin-card-tile {
  background: #12122a;
  border: none;
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: box-shadow var(--transition), transform 0.15s;
}
.admin-card-tile:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}
.admin-card-tile.tile-hidden { opacity: 0.4; }
.admin-card-tile.tile-sold .tile-thumb { opacity: 0.5; }

/* Newly-uploaded tile highlight */
.admin-card-tile.tile-new {
  border-color: rgba(234,179,8,0.6);
  box-shadow: 0 0 0 1px rgba(234,179,8,0.2);
}

/* New-cards section banner */
.new-cards-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(234,179,8,0.08);
  border: 1px solid rgba(234,179,8,0.28);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #f59e0b;
}

/* Divider between new and existing cards */
.new-cards-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px dashed var(--card-border);
  margin: 0.25rem 0;
}

/* ── Tile status bar — sits below the card image ──────────────── */
.tile-status-bar {
  position: static;
  order: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px 4px;
  background: transparent;
  border-radius: 0;
  flex-wrap: wrap;
  overflow: visible;
}

/* Pill toggles — white text on transparent background */
.tile-pill-toggle {
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.tile-pill-toggle input { display: none; }
.pill-label {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 100px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  transition: all 0.15s;
  white-space: nowrap;
}
.live-pill input:checked ~ .pill-label {
  background: rgba(22,163,74,0.35);
  border-color: #4ade80;
  color: #fff;
}
.sold-pill input:checked ~ .pill-label {
  background: rgba(180,30,30,0.45);
  border-color: #f87171;
  color: #fff;
}

/* Language toggle button */
.lang-btn {
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.25);
  cursor: pointer;
  background: transparent;
  align-self: center;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s, transform 0.1s;
}
.lang-btn .fi {
  border-radius: 2px;
  display: inline-block;
  width: 20px;
  height: 15px;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
.lang-btn .fi-jp { background-image: url('/images/flag-jp.svg'); }
.lang-btn .fi-gb { background-image: url('/images/flag-gb.svg'); }
.lang-btn .fi-cn { background-image: url('/images/flag-cn.svg'); }
.lang-btn .fi-kr { background-image: url('/images/flag-kr.svg'); }
.lang-btn:hover { border-color: rgba(255,255,255,0.6); }
.lang-btn:active { transform: scale(0.9); }
.lang-btn:hover { border-color: rgba(255,255,255,0.8); }
.lang-eng { }   /* same white style in status bar */
.lang-jpn { }   /* same white style in status bar */

/* Slab type selector in admin tiles */
.slab-select {
  font-size: 0.68rem;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,0.4);
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-self: center;
  flex: 1;
  min-width: 0;
  max-width: 62px;
}
.slab-select option { background: var(--bg2); color: var(--text); }

/* Thumbnail — fixed 5:7 ratio, all cards same size (gallery padding-top technique) */
.tile-thumb {
  position: relative;
  width: 100%;
  padding-top: 140%;   /* 7/5 × 100% — locks 5:7 ratio, image out of flow */
  overflow: hidden;
  border-radius: var(--card-radius);   /* round all 4 corners of the thumbnail */
  background: transparent;
  order: 1;
}
a.tile-thumb {
  display: block;
  text-decoration: none;
  transition: opacity 0.15s;
}
a.tile-thumb:hover { opacity: 0.88; }
.tile-thumb img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.tile-no-img {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--text-muted);
}

/* ── Tile footer — below the card image ─────────────────────────── */
.tile-footer {
  position: static;
  order: 3;
  padding: 4px 10px 10px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tile-name {
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.tile-set {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile-grade { color: rgba(255,255,255,0.6); }

/* Price + markup controls in one row */
.tile-bottom-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.tile-display-val {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
/* Price prefix £ */
.tile-price-prefix {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
/* Price input */
.tile-price-input {
  width: 68px;
  flex-shrink: 0;
  text-align: right;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 6px;
  outline: none;
  transition: border-color 0.15s;
}
.tile-price-input:focus { border-color: rgba(255,255,255,0.6); }
/* Hide browser number spinners */
.tile-price-input::-webkit-inner-spin-button,
.tile-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tile-price-input[type=number] { -moz-appearance: textfield; }
/* Save button in tile */
.tile-bottom-row .save-btn {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  flex-shrink: 0;
}
.tile-bottom-row .save-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Image icon button */
.tile-img-btn {
  background: none;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.tile-img-btn svg { stroke-width: 2.8; }
.tile-img-btn:hover { border-color: var(--red); color: var(--red); }

.tile-ebay-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 4px 6px;
  color: #fff;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-decoration: none;
}
.tile-ebay-btn svg { stroke-width: 2.8; }
.tile-ebay-btn:hover {
  border-color: #e8640a;
  color: #e8640a;
  background: rgba(232,100,10,0.1);
}

/* Delete icon button */
.tile-del-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tile-del-btn svg { stroke-width: 2.8; }
.tile-del-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(230,57,70,0.08);
}

/* Toast notification */
.toast {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  font-size: 0.88rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 999;
  max-width: 300px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 3px solid #16a34a; }
.toast.error   { border-left: 3px solid var(--red); }

/* Upload history table */
.history-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.history-table th, .history-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--card-border); }
.history-table th { color: var(--text-muted); }

/* Section heading */
.section-heading {
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: 1rem; margin-top: 2rem;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.section-heading::after {
  content: ''; flex: 1; height: 1px; background: var(--card-border);
}

/* Search input in admin (now inside .admin-search-wrap) */
.admin-search {
  background: transparent;
  border: none;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 0.85rem;
  outline: none;
  width: 260px;
}
.admin-search:focus { border-color: var(--red); }

/* Image modal (admin) */
#imgModal, #pwModal {
  background: rgba(0,0,0,0.75);
}

/* ── Recently Added Strip ────────────────────────────────────── */
.recent-section {
  max-width: 1360px; margin: 0 auto;
  padding: 2rem 2.5rem 0;
}
.recent-heading {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 10px;
}
.recent-heading::after {
  content: ''; flex: 1; height: 1px; background: var(--card-border);
}
.recent-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.recent-scroll::-webkit-scrollbar { height: 4px; }
.recent-scroll::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }
.recent-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  min-width: 700px;
}

/* ── Prev / Next card navigation bar ────────────────────────── */
.card-nav-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--card-border);
  padding: 0.65rem 0;
}
.card-nav-inner {
  max-width: 1300px; margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.card-nav-back {
  display: inline-flex; align-items: center; gap: 7px;
  justify-self: start;
  background: var(--bg3);
  border: 1px solid rgba(255,255,255,0.13);
  color: #fff; font-weight: 800; border-radius: var(--radius-sm);
  padding: 8px 20px; font-size: 0.92rem; font-family: inherit;
  text-decoration: none; white-space: nowrap; letter-spacing: 0.01em;
  transition: all var(--transition);
}
.card-nav-back:hover {
  background: var(--red); border-color: var(--red); color: #fff;
}
[data-theme="light"] .card-nav-back {
  background: var(--bg3); border-color: rgba(0,0,0,0.1); color: var(--text);
}
[data-theme="light"] .card-nav-back:hover {
  background: var(--red); border-color: var(--red); color: #fff;
}
.card-nav-pager {
  display: flex; align-items: center; gap: 0.6rem;
  justify-content: center;
}
.card-nav-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg3);
  border: 1px solid rgba(255,255,255,0.13);
  color: #fff; font-weight: 800; border-radius: var(--radius-sm);
  padding: 8px 20px; font-size: 0.92rem; font-family: inherit;
  cursor: pointer; transition: all var(--transition);
  white-space: nowrap; letter-spacing: 0.01em;
}
.card-nav-btn:hover:not(:disabled) {
  background: var(--red); border-color: var(--red); color: #fff;
}
.card-nav-btn:disabled { opacity: 0.22; cursor: default; }
.card-nav-pos {
  font-size: 0.95rem; color: #fff; font-weight: 800;
  white-space: nowrap; padding: 0 0.3rem;
  letter-spacing: 0.02em;
}
[data-theme="light"] .card-nav-btn {
  background: var(--bg3);
  border-color: rgba(0,0,0,0.1);
  color: var(--text);
}
[data-theme="light"] .card-nav-btn:hover:not(:disabled) {
  background: var(--red); border-color: var(--red); color: #fff;
}
[data-theme="light"] .card-nav-pos { color: var(--text); }

/* ── Price History Chart ─────────────────────────────────────── */
.price-chart-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--card-border);
}
.price-chart-heading {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 1rem;
}
.price-chart-wrap {
  position: relative;
  height: 160px;
}

/* ── PSA Slab ────────────────────────────────────────────────── */

/* Gallery: slab aspect ratio + card in window */
.card-img-wrap.slab-gallery,
.gc-img.gc-slab {
  padding-top: 169.1%;   /* PSA slab PNG ratio: 864/511 */
}

/* ACE cert photos — CDN image IS the slab, fill container directly */
.gc-img.gc-slab-ace-photo {
  padding-top: 169.1%;
  background: transparent;
}
.gc-img.gc-slab-ace-photo > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: var(--card-radius);
}

/* Scale everything inside down uniformly — equal margin all 4 sides */
.slab-inner {
  position: absolute;
  inset: 0;
  transform: scale(0.92);
  transform-origin: center;
  container-type: inline-size; /* enables cqi units inside */
}
/* Gallery only: anchor scale to top so slab visual top is flush with
   the top of raw/sealed cards in the same row. Detail + admin pages
   keep the default center origin via the rule above. */
.gc-img.gc-slab .slab-inner {
  transform-origin: top center;
}
.card-img-wrap.slab-gallery .slab-card-img,
.gc-img.gc-slab .slab-card-img,
.mini-card-img.img-slab-overlay .slab-card-img {
  position: absolute;
  inset: unset;
  top:    27.1%;
  left:   11.5%;
  width:  77.5%;
  height: 64.7%;
  object-fit: contain;
  border-radius: 24px;
  z-index: 3;
}

/* Mini slab label: clip to the white label box, smaller text */
.mini-card-img.img-slab-overlay .gallery-slab-label {
  overflow: hidden;
}
.mini-card-img.img-slab-overlay .gallery-slab-label .gsl-set,
.mini-card-img.img-slab-overlay .gallery-slab-label .gsl-name,
.mini-card-img.img-slab-overlay .gallery-slab-label .gsl-brand,
.mini-card-img.img-slab-overlay .gallery-slab-label .gsl-num,
.mini-card-img.img-slab-overlay .gallery-slab-label .gsl-grade-label,
.mini-card-img.img-slab-overlay .gallery-slab-label .gsl-grade-num {
  font-size: clamp(7px, 0.72vw, 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* PSA mini slabs (similar-items) — match the gallery label exactly. cqi is
   slab-relative, so the same clamp scales down proportionally on the smaller
   mini slab. Overflow visible so the enlarged text isn't clipped/ellipsised. */
.mini-card-img.img-slab-overlay .slab-inner.slab-psa .gallery-slab-label {
  overflow: visible; /* gallery box doesn't clip — allow the nudged text to reach the red border */
}
.mini-card-img.img-slab-overlay .slab-inner.slab-psa .gsl-grade-label {
  font-size:     clamp(14.95px, 10.465cqi, 29.9px); /* matches gallery GEM-MT */
  overflow:      visible;
  text-overflow: clip;
}
.mini-card-img.img-slab-overlay .slab-inner.slab-psa .gsl-grade-num {
  font-size:     clamp(17.94px, 12.558cqi, 35.88px); /* matches gallery "10" */
  overflow:      visible;
  text-overflow: clip;
}
/* Beckett mini slabs (similar-items) — match the gallery label exactly, same
   as PSA. Higher specificity (0,5,0) beats the generic mini override (0,4,0). */
.mini-card-img.img-slab-overlay .slab-inner.slab-beckett-pristine    .gallery-slab-label,
.mini-card-img.img-slab-overlay .slab-inner.slab-beckett-black-label .gallery-slab-label {
  overflow: visible;
}
.mini-card-img.img-slab-overlay .slab-inner.slab-beckett-pristine    .gsl-grade-num,
.mini-card-img.img-slab-overlay .slab-inner.slab-beckett-black-label .gsl-grade-num {
  font-size:     clamp(14.95px, 10.465cqi, 29.9px); /* word ("Pristine") — matches gallery */
  overflow:      visible;
  text-overflow: clip;
}
.mini-card-img.img-slab-overlay .slab-inner.slab-beckett-pristine    .gsl-grade-label,
.mini-card-img.img-slab-overlay .slab-inner.slab-beckett-black-label .gsl-grade-label {
  font-size:     clamp(17.94px, 12.558cqi, 35.88px); /* number ("10") — matches gallery */
  overflow:      visible;
  text-overflow: clip;
}

.slab-overlay {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  object-fit: fill;
  display: block;
}

/* Gallery PSA slab label — matches card.html .slab-label exactly */
.gallery-slab-label {
  position: absolute;
  top:    calc(4% + 16px);
  left:   13%;
  width:  70%;
  height: 10%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  pointer-events: none;
  overflow: visible;
  box-sizing: border-box;
  padding: 0.4% 0 0.4% 0.5%;
  font-family: 'Arial Narrow', Arial, sans-serif;
  color: #111;
}
.gsl-left {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 1px;
  transform: translateX(-4px);
}
.gsl-right {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  transform: translateX(15px);
}
.gsl-set, .gsl-name, .gsl-brand,
.gsl-num, .gsl-grade-label, .gsl-grade-num {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(7px, 1.1vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #111;
  display: block;
}
.gsl-set, .gsl-name, .gsl-brand {
  padding-left: 6px;
}
.gsl-set, .gsl-name {
  white-space: normal;
  word-break: break-word;
}
.gsl-brand, .gsl-num, .gsl-grade-label, .gsl-grade-num {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══ PSA simplified label ══════════════════════════════════════════
   Left: grade description (e.g. GEM MT)  Right: grade score (e.g. 10)
   All other label data hidden. Large bold text.
   Covers: main gallery, New Arrivals shelf, detail-page similar cards,
           and the detail-page card itself.
   ══════════════════════════════════════════════════════════════════ */

/* Gallery grid + New Arrivals shelf -------------------------------- */
/* Geometry maps the label box exactly onto the white strip inside the
   red frame of PSA-SLAB.png. All values are % of the slab so they scale
   with the slab at any size — no fixed pixel offsets. Measured from the
   PNG: red-frame inner left 11%, inner right 89.8%, top 4.6%, the
   barcode row begins at 14.6% (strip height 10%, vertical centre 9.6%). */
.slab-inner.slab-psa .gallery-slab-label {
  top:         4.6%;    /* just inside red frame top */
  left:        16%;     /* 5% margin in from red frame inner-left (11%) */
  width:       68.8%;   /* 16% -> 84.8%, leaving 5% margin to inner-right (89.8%) */
  height:      10%;     /* white strip height (4.6% -> 14.6%) */
  padding:     0;
  align-items: center;  /* vertical centre within the strip */
}
.slab-inner.slab-psa .gsl-left,
.slab-inner.slab-psa .gsl-num {
  display: none;
}
.slab-inner.slab-psa .gsl-right {
  flex:            1;              /* fills the full label width */
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;  /* GEM MT -> left, 10 -> right */
  transform:       none;
  gap:             0;
}
.slab-inner.slab-psa .gsl-grade-label {   /* description "GEM MT" — left, inset by box */
  font-size:      clamp(14.95px, 10.465cqi, 29.9px); /* +15%, then +30% */
  font-weight:    600;
  letter-spacing: 0.01em;
  white-space:    nowrap;
  overflow:       visible;
  padding-left:   0;
  margin-left:    0;
  transform:      translate(-2.5cqi, 5px); /* nudge 50% closer to the red border, down ~5px */
}
.slab-inner.slab-psa .gsl-grade-num {     /* score "10" — right, inset by box */
  font-size:      clamp(17.94px, 12.558cqi, 35.88px); /* +15%, +20%, then +30% */
  font-weight:    600;
  letter-spacing: -0.02em;
  white-space:    nowrap;
  overflow:       visible;
  padding-right:  0;
  margin-right:   0;
  transform:      translate(2.5cqi, 5px); /* nudge 50% closer to the red border, down ~5px */
}

/* Detail-page "Similar cards" mini tiles — cqi already scales, no override needed */

/* Detail page ─────────────────────────────────────────────────── */
/* Same white-strip geometry as the gallery (see note above): the label
   box maps onto the red frame's inner white strip, all in % of the slab. */
.card-tilt.slab-psa .slab-label {
  top:         4.6%;    /* just inside red frame top */
  left:        16%;     /* 5% margin in from red frame inner-left (11%) */
  width:       68.8%;   /* 16% -> 84.8%, leaving 5% margin to inner-right (89.8%) */
  height:      10%;     /* white strip height (4.6% -> 14.6%) */
  padding:     0;
  align-items: center;  /* vertical centre within the strip */
}
.card-tilt.slab-psa .slab-lbl-left,
.card-tilt.slab-psa .slab-lbl-num {
  display: none;
}
.card-tilt.slab-psa .slab-lbl-right {
  flex:            1;              /* fills the full label width */
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;  /* GEM MT -> left, 10 -> right */
  transform:       none;
}
/* slab-lbl-grade-num holds the description "GEM MT" — left, inset by box */
/* cqi here = % of .slab-label width (now 68.8% of slab). The cqi value is
   compensated for the narrower box (×78.8/68.8) AND increased +15%, so the
   on-screen size is a true +15% vs before. */
.card-tilt.slab-psa .slab-lbl-grade-num {
  order:          -1;
  font-size:      clamp(17.94px, 15.405cqi, 41.6px); /* +30% to match gallery GEM-MT */
  font-weight:    600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space:    nowrap;
  overflow:       visible;
  padding-left:   0;
  margin-left:    0;
  transform:      translate(-3.63cqi, 5px); /* 50% closer to red border, down ~5px (cqi = % of label box) */
}
/* slab-lbl-grade-label holds the score "10" — right, inset by box */
.card-tilt.slab-psa .slab-lbl-grade-label {
  order:          1;
  font-size:      clamp(21.528px, 18.486cqi, 49.92px); /* +20% then +30% to match gallery "10" */
  font-weight:    600;
  letter-spacing: -0.02em;
  white-space:    nowrap;
  overflow:       visible;
  padding-right:  0;
  margin-right:   0;
  transform:      translate(3.63cqi, 5px); /* 50% closer to red border, down ~5px (cqi = % of label box) */
}

/* ── Beckett slab: proper 2-column label layout ───────────────── *
 * Beckett grade_subtype is stored as "Pristine 10" (word first), so:
 *   parseGrade → num="Pristine", label="10"
 *   .gsl-grade-label = "10"  → shown BIG
 *   .gsl-grade-num   = word  → shown small
 * ─────────────────────────────────────────────────────────────── */

/* Gallery label: PSA-style spread strip across the gold area.
 * Card-name column hidden; grade WORD ("Pristine") left, NUMBER ("10") right.
 * cqi here = % of slab card (container-type on .slab-inner), so the font
 * clamps below are identical to the PSA gallery for a matching on-screen size. */
.slab-inner.slab-beckett-pristine    .gallery-slab-label,
.slab-inner.slab-beckett-black-label .gallery-slab-label {
  top:         4.6%;   /* identical geometry to PSA — only the slab PNG differs */
  left:        16%;
  width:       68.8%;
  height:      10%;
  padding:     0;
  gap:         0;
  align-items: center; /* vertical centre within the strip */
  overflow:    visible;
}

/* Hide the card-name column + bare number (PSA-style strip) */
.slab-inner.slab-beckett-pristine    .gsl-left,
.slab-inner.slab-beckett-black-label .gsl-left,
.slab-inner.slab-beckett-pristine    .gsl-num,
.slab-inner.slab-beckett-black-label .gsl-num {
  display: none;
}

/* Right column fills the whole strip, items pushed to opposite ends */
.slab-inner.slab-beckett-pristine    .gsl-right,
.slab-inner.slab-beckett-black-label .gsl-right {
  position:        static;
  left:            auto;
  transform:       none;
  flex:            1;               /* fills the full label width */
  flex-basis:      auto;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;   /* word -> left, number -> right */
  max-height:      none;
  overflow:        visible;
  padding-left:    0;
  gap:             0;
}
/* Grade WORD ("Pristine" lives in .gsl-grade-num) — left, matches PSA "GEM MT" */
.slab-inner.slab-beckett-pristine    .gsl-grade-num,
.slab-inner.slab-beckett-black-label .gsl-grade-num {
  order:          -1;
  font-size:      clamp(14.95px, 10.465cqi, 29.9px);
  font-weight:    600;
  letter-spacing: 0.01em;
  line-height:    1;
  white-space:    nowrap;
  overflow:       visible;
  transform:      translate(-2.5cqi, 5px); /* nudge toward logo edge, down ~5px */
}
/* Grade NUMBER ("10" lives in .gsl-grade-label) — right, matches PSA score */
.slab-inner.slab-beckett-pristine    .gsl-grade-label,
.slab-inner.slab-beckett-black-label .gsl-grade-label {
  order:          1;
  font-size:      clamp(17.94px, 12.558cqi, 35.88px);
  font-weight:    600;
  letter-spacing: -0.02em;
  line-height:    1;
  white-space:    nowrap;
  overflow:       visible;
  transform:      translate(2.5cqi, 5px); /* nudge toward right edge, down ~5px */
}

/* ── Detail page: identical geometry to PSA — only the slab PNG differs.
 * Box is now 68.8% of slab (same as PSA), so the font clamps + nudges below
 * reuse PSA's exact detail values (cqi = % of the label box). */
.card-tilt.slab-beckett-pristine    .slab-label,
.card-tilt.slab-beckett-black-label .slab-label {
  top:         4.6%;
  left:        16%;
  width:       68.8%;
  height:      10%;
  gap:         0;
  align-items: center; /* vertical centre within the strip */
  overflow:    visible;
}
/* Hide the card-name column + bare number (PSA-style strip) */
.card-tilt.slab-beckett-pristine    .slab-lbl-left,
.card-tilt.slab-beckett-black-label .slab-lbl-left,
.card-tilt.slab-beckett-pristine    .slab-lbl-num,
.card-tilt.slab-beckett-black-label .slab-lbl-num {
  display: none;
}
/* Right column fills the strip, items pushed to opposite ends */
.card-tilt.slab-beckett-pristine    .slab-lbl-right,
.card-tilt.slab-beckett-black-label .slab-lbl-right {
  transform:       none;
  flex:            1;
  flex-basis:      auto;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  overflow:        visible;
  padding-left:    0;
  gap:             0;
}
/* Grade WORD ("Pristine" in .slab-lbl-grade-num) — left, matches PSA "GEM MT" */
.card-tilt.slab-beckett-pristine    .slab-lbl-grade-num,
.card-tilt.slab-beckett-black-label .slab-lbl-grade-num {
  order:          -1;
  font-size:      clamp(17.94px, 15.405cqi, 41.6px);  /* PSA "GEM MT" exact */
  font-weight:    600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height:    1;
  white-space:    nowrap;
  overflow:       visible;
  transform:      translate(-3.63cqi, 5px); /* PSA exact, down ~5px */
}
/* Grade NUMBER ("10" in .slab-lbl-grade-label) — right, matches PSA score */
.card-tilt.slab-beckett-pristine    .slab-lbl-grade-label,
.card-tilt.slab-beckett-black-label .slab-lbl-grade-label {
  order:          1;
  font-size:      clamp(21.528px, 18.486cqi, 49.92px); /* PSA "10" exact */
  font-weight:    600;
  letter-spacing: -0.02em;
  line-height:    1;
  white-space:    nowrap;
  overflow:       visible;
  transform:      translate(3.63cqi, 5px); /* PSA exact, down ~5px */
}

/* ── ACE cert photo front/back toggle ──────────────────────────── */
.ace-cert-toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.ace-cert-btn {
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  padding: 0.35rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ace-cert-btn.active,
.ace-cert-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

/* ── ACE cert mode — drag-to-spin 3D flip ─────────────────────────── */
.card-tilt.ace-cert-mode {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* Remove the box that clips the slab edges and shows as a border ring */
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.card-tilt.ace-cert-mode.spinning {
  cursor: grabbing;
}
.card-tilt.ace-cert-mode .card-img-inner {
  position: relative !important;
  top: auto !important; left: auto !important;
  width: 100% !important; height: auto !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Spinner wrapper — both faces + edges live here; rotates on Y */
.ace-spinner {
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
}

/* Each face — offset by half the slab depth so edges sit flush */
.ace-face {
  width: 100%;
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.ace-face img {
  width: 100%;
  height: auto;
  display: block;
}
.ace-face-front {
  transform: translateZ(9px);
}

/* Back face sits behind the front face */
.ace-face-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg) translateZ(9px);
}
.ace-face-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Slab edges (left, right, top, bottom) — 18px = ~6mm depth ─── */
.ace-edge {
  position: absolute;
  overflow: hidden;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.ace-edge-left,
.ace-edge-right {
  top: 0;
  width: 18px;
  height: 100%;
  /* Clear acrylic — semi-transparent grey, darker at corners, lighter midpoint */
  background: linear-gradient(
    to bottom,
    rgba(60, 62, 68, 0.55)  0%,
    rgba(105,108,118, 0.65) 25%,
    rgba(150,154,165, 0.72) 50%,
    rgba(105,108,118, 0.65) 75%,
    rgba(60, 62, 68, 0.55)  100%
  );
}
.ace-edge-left {
  left: -9px;
  transform: rotateY(-90deg);
}
.ace-edge-right {
  right: -9px;
  transform: rotateY(90deg);
}
/* Dynamic reflection — clean white specular as each edge faces the viewer */
.ace-edge-left::after,
.ace-edge-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent           0%,
    rgba(255,255,255,0.25) 30%,
    rgba(255,255,255,0.80) 50%,   /* bright acrylic specular */
    rgba(255,255,255,0.25) 70%,
    transparent           100%
  );
  opacity: 0;
}
.ace-edge-left::after  { opacity: var(--left-reflect,  0); }
.ace-edge-right::after { opacity: var(--right-reflect, 0); }

.ace-edge-top,
.ace-edge-bottom {
  left: 0;
  width: 100%;
  height: 18px;
  background: linear-gradient(
    to right,
    rgba(60, 62, 68, 0.55)  0%,
    rgba(105,108,118, 0.65) 25%,
    rgba(150,154,165, 0.72) 50%,
    rgba(105,108,118, 0.65) 75%,
    rgba(60, 62, 68, 0.55)  100%
  );
}
.ace-edge-top {
  top: -9px;
  transform: rotateX(90deg);
}
.ace-edge-bottom {
  bottom: -9px;
  transform: rotateX(-90deg);
}

/* Hint text under the spinner */
.ace-spin-hint {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.55rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* ── ACE slab — 511×866, shallower header than PSA ─────────────── */
.card-tilt.slab-ace { aspect-ratio: 511 / 866; }

/* Card window — higher start (smaller header) and wider opening */
.card-tilt.slab-ace .card-img-inner {
  top:        19%;
  left:       6.5%;
  width:      87%;
  height:     77%;
  background: #0d1424; /* dark navy — hides the ACE slab's white plastic tray */
}

/* ── ACE label: full-width two-column overlay ─────────────────── */
/*   Left col: dark navy — set name (gold) / card name (white) / disc+lang (gold)
     Right col: warm gold — grade number (black, huge) / grade word (black, small)
     Diagonal cut via clip-path + negative margin on the right column              */
.card-tilt.slab-ace .slab-label {
  top: 1.2%;
  left: 6.5%;
  width: 87%;
  height: 13.5%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 0;
  align-items: stretch;
}

/* Left column — navy */
.card-tilt.slab-ace .slab-lbl-left {
  flex: 0 0 67%;
  background: #0d1424;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1em;
  padding: 5% 4% 5% 8%;
  transform: none;
  min-width: 0;
  overflow: hidden;
}

/* Right column — gold, diagonal left edge */
.card-tilt.slab-ace .slab-lbl-right {
  flex: 1;
  background: #c5963a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  transform: none;
  overflow: visible;
  /* Pull left so clip-path diagonal overlaps the navy */
  margin-left: -7%;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
  padding-left: 18%;
  padding-right: 6%;
}

/* Set name — small, gold, bold */
.card-tilt.slab-ace .slab-lbl-set {
  font-size: clamp(5px, 0.82vw, 10px);
  font-weight: 800;
  color: #c5963a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding: 0;
  line-height: 1.2;
}

/* Card name — medium-large, white, heaviest weight */
.card-tilt.slab-ace .slab-lbl-name {
  font-size: clamp(7px, 1.3vw, 16px);
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  white-space: normal;
  word-break: break-word;
  display: block;
  padding: 0;
  line-height: 1.1;
}

/* Discriminator + language — small, gold */
.card-tilt.slab-ace .slab-lbl-brand {
  font-size: clamp(5px, 0.82vw, 10px);
  font-weight: 800;
  color: #c5963a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  padding: 0;
  line-height: 1.2;
}

/* Card number — hidden for ACE (shown in left col via slabBrand) */
.card-tilt.slab-ace .slab-lbl-num { display: none; }

/* Grade number ("10") — very large, black */
.card-tilt.slab-ace .slab-lbl-grade-label {
  font-size: clamp(18px, 3vw, 40px);
  font-weight: 900;
  color: #111111;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
}

/* Grade word ("GEM MINT") — small, black, tight tracking */
.card-tilt.slab-ace .slab-lbl-grade-num {
  font-size: clamp(5px, 0.82vw, 10px);
  font-weight: 800;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .card-tilt.slab-ace .slab-lbl-set,
  .card-tilt.slab-ace .slab-lbl-brand,
  .card-tilt.slab-ace .slab-lbl-grade-num { font-size: clamp(5px, 2vw, 10px); }
  .card-tilt.slab-ace .slab-lbl-name       { font-size: clamp(7px, 3.2vw, 16px); }
  .card-tilt.slab-ace .slab-lbl-grade-label { font-size: clamp(18px, 7.5vw, 40px); }
}

/* Beckett Pristine → black text (default is already #111, explicit for clarity) */
.slab-inner.slab-beckett-pristine .gsl-set,
.slab-inner.slab-beckett-pristine .gsl-name,
.slab-inner.slab-beckett-pristine .gsl-brand,
.slab-inner.slab-beckett-pristine .gsl-num,
.slab-inner.slab-beckett-pristine .gsl-grade-label,
.slab-inner.slab-beckett-pristine .gsl-grade-num { color: #111; }

/* Beckett Black Label → gold text */
.slab-inner.slab-beckett-black-label .gsl-set,
.slab-inner.slab-beckett-black-label .gsl-name,
.slab-inner.slab-beckett-black-label .gsl-brand,
.slab-inner.slab-beckett-black-label .gsl-num,
.slab-inner.slab-beckett-black-label .gsl-grade-label,
.slab-inner.slab-beckett-black-label .gsl-grade-num { color: #C9A227; }

/* Detail page slab label text colours */
.card-tilt.slab-beckett-black-label .slab-lbl-set,
.card-tilt.slab-beckett-black-label .slab-lbl-name,
.card-tilt.slab-beckett-black-label .slab-lbl-brand,
.card-tilt.slab-beckett-black-label .slab-lbl-num,
.card-tilt.slab-beckett-black-label .slab-lbl-grade-label,
.card-tilt.slab-beckett-black-label .slab-lbl-grade-num { color: #C9A227; }

.card-tilt.slab-beckett-pristine .slab-lbl-set,
.card-tilt.slab-beckett-pristine .slab-lbl-name,
.card-tilt.slab-beckett-pristine .slab-lbl-brand,
.card-tilt.slab-beckett-pristine .slab-lbl-num,
.card-tilt.slab-beckett-pristine .slab-lbl-grade-label,
.card-tilt.slab-beckett-pristine .slab-lbl-grade-num { color: #111; }

/* Detail page: slab container */
.card-tilt.slab-mode {
  aspect-ratio: 511 / 864;
  max-width: 350px;
  border-radius: 20px;
  background: transparent;
}
/* Normal mode: wrapper flows with the image */
.card-img-inner {
  position: relative;
  width: 100%;
}

/* Slab mode: wrapper clips to the card window with rounded corners */
.slab-mode .card-img-inner {
  position: absolute;
  inset: unset;
  top:    27.1%;
  left:   11.5%;
  width:  77.5%;
  height: 64.7%;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  background: #e8e8e8;
}
.slab-mode .card-detail-image {
  position: relative;
  inset: unset;
  top: auto; left: auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  z-index: 3;
}
.slab-mode .card-shine { z-index: 5; }
.card-tilt.slab-mode::after { display: none; }

/* Sealed products — no tilt, no glow, no crosshair */
.card-tilt.no-tilt {
  transform: none;
  transition: none;
  cursor: default;
  overflow: visible;
  box-shadow: none;
  background: transparent !important;
}
.card-tilt.no-tilt::after { display: none; }
.card-tilt.no-tilt .card-shine { display: none; }
.card-tilt.no-tilt .card-img-inner {
  background: #e8e8e8;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 0 0 1px var(--card-border);
}
.card-tilt.no-tilt .card-detail-image {
  border-radius: 8px;
}

/* PSA label — two independent columns */
.slab-label {
  position: absolute;
  top:    calc(4% + 16px);
  left:   13%;
  width:  70%;
  height: 10%;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0.4% 0 0.4% 0.5%;
  font-family: 'Arial Narrow', Arial, sans-serif;
  color: #111;
  pointer-events: none;
  overflow: visible;
  box-sizing: border-box;
  container-type: inline-size; /* enables cqi units inside */
}
/* Left column: set, name, brand — wraps independently */
.slab-lbl-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transform: translateX(-4px);
}
/* Right column: card#, grade label, grade num — always top-pinned */
.slab-lbl-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  transform: translateX(15px);
}
/* Left text: set, name, brand */
.slab-lbl-set,
.slab-lbl-name,
.slab-lbl-brand {
  font-size: clamp(7px, 1.1vw, 12px); /* scales with viewport in 2-col layout */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding-left: 6px;
}
/* Set and card name wrap; brand truncates */
.slab-lbl-set,
.slab-lbl-name {
  white-space: normal;
  word-break: break-word;
}
.slab-lbl-brand {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Right text: card number, grade label, grade number */
.slab-lbl-num,
.slab-lbl-grade-label,
.slab-lbl-grade-num {
  font-size: clamp(7px, 1.1vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
  color: #111;
}
/* Single-col layout (<860px): card fills viewport, scale font ~3% of vw */
@media (max-width: 860px) {
  .slab-lbl-set, .slab-lbl-name, .slab-lbl-brand,
  .slab-lbl-num, .slab-lbl-grade-label, .slab-lbl-grade-num {
    font-size: clamp(7px, 2.8vw, 12px);
  }
  .slab-lbl-left  { transform: none; }
  .slab-lbl-right { transform: none; }
}
/* Beckett detail grade text now uses the same cqi-based clamps as PSA
   (see .card-tilt.slab-beckett-* .slab-lbl-grade-* above), which scale with
   the label box on their own — no mobile vw override needed. */

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gsl-set, .gsl-name, .gsl-brand,
  .gsl-num, .gsl-grade-label, .gsl-grade-num {
    font-size: clamp(7px, 1.1vw, 12px);
  }
}
@media (max-width: 750px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .header-center { display: none; }
  .header-right .stat-chip { display: none; }
  .detail-name   { font-size: 1.7rem; }
  .detail-price  { font-size: 1.6rem; }
  .filters-inner { gap: 0.5rem; }
  .cat-btn { padding: 5px 10px; font-size: 0.78rem; }
  .gsl-set, .gsl-name, .gsl-brand,
  .gsl-num, .gsl-grade-label, .gsl-grade-num {
    font-size: clamp(6px, 1.5vw, 11px);
  }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .gallery-wrap { padding: 1rem 0.75rem 3rem; }
  .gsl-set, .gsl-name, .gsl-brand,
  .gsl-num, .gsl-grade-label, .gsl-grade-num {
    font-size: clamp(5px, 1.6vw, 9px);
  }
}
@media (max-width: 400px) {
  .gallery-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .gsl-set, .gsl-name, .gsl-brand,
  .gsl-num, .gsl-grade-label, .gsl-grade-num {
    font-size: clamp(9px, 2.5vw, 13px);
  }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Site-wide additional fixes
   ════════════════════════════════════════════════════════════ */

/* ── Filters bar (home page) ──────────────────────────────────── */
@media (max-width: 750px) {
  .filters-inner { padding: 0.65rem 1rem; row-gap: 0.5rem; }
  .filter-select { min-width: 0; flex: 1; }
}
@media (max-width: 560px) {
  .filters-inner { padding: 0.55rem 0.75rem; gap: 0.4rem; row-gap: 0.45rem; }
  .cat-btn { padding: 5px 7px; font-size: 0.72rem; }
  /* Search fills its own row at the bottom */
  .search-wrap { order: 10; flex-basis: 100%; min-width: 0; flex: none; }
  /* Selects share a row, sizing themselves to available space */
  .filter-select { padding: 7px 8px; font-size: 0.78rem; }
}
@media (max-width: 400px) {
  .cat-toggle { gap: 2px; padding: 2px; }
  .cat-btn { padding: 4px 6px; font-size: 0.68rem; }
}

/* ── Hero banner — theme switch & stat chip ───────────────────── */
@media (max-width: 600px) {
  .stat-chip { font-size: 0.72rem; padding: 4px 10px; }
  /* Compact theme switch: hide text labels, narrow the track */
  .tsw-label { display: none; }
  .tsw-track { width: 56px; }
  .theme-switch input:checked ~ .tsw-track .tsw-thumb { transform: translateX(22px); }
}
@media (max-width: 400px) {
  /* Hide stat chip on very small screens to give banner controls room */
  .stat-chip { display: none; }
}

/* ── Card navigation bar (detail page) ───────────────────────── */
@media (max-width: 600px) {
  .card-nav-inner  { padding: 0 0.75rem; gap: 0.5rem; }
  .card-nav-back   { font-size: 0.75rem; gap: 4px; }
  .card-nav-pager  { gap: 0.35rem; }
  .card-nav-btn    { padding: 6px 12px; font-size: 0.8rem; }
  .card-nav-pos    { font-size: 0.82rem; }
}
@media (max-width: 400px) {
  .card-nav-inner  { grid-template-columns: auto auto 0; }
  .card-nav-back span { display: none; }
  .card-nav-btn    { padding: 5px 9px; font-size: 0.75rem; gap: 3px; }
  .card-nav-btn svg { display: none; }
  .card-nav-pos    { font-size: 0.75rem; }
}

/* ── Recently added strip (home page) ────────────────────────── */
@media (max-width: 750px) {
  .recent-section { padding: 1.5rem 1rem 0; }
}
@media (max-width: 480px) {
  .recent-section { padding: 1.25rem 0.75rem 0; }
}

/* ── Similar price range (detail page) ───────────────────────── */
/* Reactive: fewer cards shown as the screen narrows, kept to one tidy row
   (overflow cards hidden rather than wrapping or horizontal-scrolling). */
@media (max-width: 1100px) {
  .similar-grid { grid-template-columns: repeat(5, 1fr); }
  .similar-grid .mini-card:nth-child(n+6) { display: none; }
}
@media (max-width: 900px) {
  .similar-grid { grid-template-columns: repeat(4, 1fr); }
  .similar-grid .mini-card:nth-child(n+5) { display: none; }
}
@media (max-width: 700px) {
  .similar-grid { grid-template-columns: repeat(3, 1fr); }
  .similar-grid .mini-card:nth-child(n+4) { display: none; }
}
@media (max-width: 500px) {
  .similar-grid { grid-template-columns: repeat(2, 1fr); }
  .similar-grid .mini-card:nth-child(n+3) { display: none; }
}
@media (max-width: 600px) {
  .similar-section { padding: 1.75rem 0 2.5rem; }
  .similar-inner   { padding: 0 0.75rem; }
}

/* ── Price history chart ─────────────────────────────────────── */
@media (max-width: 600px) {
  .price-chart-wrap { height: 120px; }
}

/* ── Welcome section additional mobile ───────────────────────── */
@media (max-width: 480px) {
  .welcome-section { margin: 0.75rem 0.75rem; border-radius: 12px; }
  .welcome-inner   { padding: 1.25rem 1rem; gap: 1rem; }
  .welcome-heading { font-size: 1.1rem; }
  .welcome-body    { font-size: 0.88rem; line-height: 1.65; }
}

/* ── Admin edit button — sits inside .banner-controls (header row) */
.admin-edit-fab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.3rem 0.75rem;
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.admin-edit-fab:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  text-shadow: none;
}
.admin-edit-fab svg {
  flex-shrink: 0;
}
.admin-edit-fab.fab-cancel {
  background: rgba(100,0,0,0.45);
  border-color: rgba(230,57,70,0.55);
  color: #fff;
}

/* ── Inline card edit form ──────────────────────────────────────── */
.edit-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.edit-form-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--card-border);
}
.edit-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.edit-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.edit-label {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.edit-input {
  width: 100%;
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  padding: 0.42rem 0.65rem;
  font-size: 0.88rem;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
  appearance: none;
}
.edit-input:focus {
  outline: none;
  border-color: var(--red);
}
.edit-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}
.edit-sold-row {
  flex-direction: row;
  align-items: center;
}
.edit-sold-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.edit-sold-chk {
  accent-color: var(--red);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.edit-actions {
  display: flex;
  gap: 0.65rem;
  padding-top: 0.25rem;
}
.edit-toast {
  font-size: 0.8rem;
  color: var(--red);
  padding: 0.25rem 0;
}

/* ── Edit form image upload zone ──────────────────────────────── */
.edit-img-zone {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px dashed var(--card-border);
  cursor: pointer;
  background: var(--bg3);
  transition: border-color 0.18s;
}
.edit-img-zone:hover,
.edit-img-zone.drag-over {
  border-color: var(--red);
}
.edit-img-zone.drag-over {
  background: rgba(230,57,70,0.07);
}
.edit-img-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s;
}
.edit-img-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.18s;
  pointer-events: none;
}
.edit-img-zone:hover .edit-img-overlay,
.edit-img-zone.drag-over .edit-img-overlay {
  opacity: 1;
}
.edit-img-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
}
.edit-img-status {
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: -0.3rem;
  min-height: 1.2em;
}
.edit-img-status.success  { color: #2ecc71; }
.edit-img-status.error    { color: var(--red); }
.edit-img-status.warning  { color: #f0a500; }
.edit-img-url-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.edit-img-url-input {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
}
.edit-img-url-btn {
  flex-shrink: 0;
  padding: 0.42rem 0.9rem;
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.edit-img-url-btn:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
}
.edit-img-url-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.edit-img-google-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: transparent;
  border: 1.5px solid var(--card-border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  width: 100%;
  justify-content: center;
}
.edit-img-google-btn:hover {
  border-color: #4285f4;
  color: #4285f4;
}
.edit-delete-row {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--card-border);
}
.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1.5px solid var(--red);
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.btn-danger:hover { opacity: 1; }
.btn-danger-armed {
  background: var(--red) !important;
  color: #fff !important;
  opacity: 1 !important;
  animation: danger-pulse 0.6s ease;
}
@keyframes danger-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Card detail page — back-to-front flip (raw cards only) ──────
   Reuses gallery keyframes (card-spin-reveal / card-back-fade /
   card-front-fade). JS inserts a .detail-face-back img, adds
   .detail-flip to #cardImgInner before img.src is assigned, then
   adds .detail-flipped once the front image finishes loading.     */

.card-img-inner.detail-flip {
  position: relative;
  aspect-ratio: 5 / 7;          /* holds height while images load */
  overflow: hidden;
  border-radius: var(--card-radius-lg);
}
.card-img-inner.detail-flip .detail-face-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--card-radius-lg);
  z-index: 1;
}
.card-img-inner.detail-flip .card-detail-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--card-radius-lg);
  opacity: 0;                    /* hidden until animation reveals */
  z-index: 2;
}

/* Flip triggered by JS adding .detail-flipped */
.card-img-inner.detail-flip.detail-flipped {
  animation: card-spin-reveal 0.8s linear forwards;
}
.card-img-inner.detail-flip.detail-flipped .detail-face-back {
  animation: card-back-fade 0.8s linear forwards;
}
.card-img-inner.detail-flip.detail-flipped .card-detail-image {
  animation: card-front-fade 0.8s linear forwards;
}

/* ── Interactive front↔back flip (raw cards with a real back photo) ──
   JS wraps the front <img> and a back <img> in .detail-rflip and toggles
   .flipped. The Front/Back toggle (#aceCertToggle) drives it.            */
.card-img-inner.has-rflip {
  position: relative;
  aspect-ratio: 5 / 7;
  perspective: 1600px;
  overflow: visible;
}
.detail-rflip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.detail-rflip.flipped { transform: rotateY(180deg); }
.detail-rface {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);   /* keep both faces in the 3-D context */
}
/* NOTE: do NOT put overflow:hidden / border-radius here — on a
   backface-visibility:hidden element it forces layer flattening in
   Chrome and disables backface culling (back face paints over front).
   Round the images instead. */
.detail-rface.back { transform: rotateY(180deg); }
.detail-rface .card-detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  border-radius: var(--card-radius-lg);
}

/* ── 3-D click+drag spin (raw cards with a real back photo) ──
   A flat card that rotates in perspective (the back edge recedes as it
   turns) — the same rotateY spin as the ACE slabs, but with NO slab box:
   zero thickness, no edges. JS drives `perspective() rotateY()`. Drag to
   spin, tap to open the lightbox.                                        */
/* Remove the clipping box + border ring so the near edge stays fully
   visible as the card turns (mirrors .ace-cert-mode). */
.card-tilt.raw-spin-mode {
  overflow: visible !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  cursor: grab;
}
.card-tilt.raw-spin-mode .card-shine { display: none; }
.card-img-inner.has-rspin {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: visible;
}
.raw-spinner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  cursor: grab;
  touch-action: pan-y;              /* let vertical scroll through; we own horizontal */
  -webkit-user-select: none;
  user-select: none;
}
.raw-spinner:active { cursor: grabbing; }

.raw-face {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius-lg);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.raw-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;             /* drag stays on the spinner, not the img */
  -webkit-user-drag: none;
}
.raw-face-front { transform: rotateY(0deg); }   /* flat — no translateZ depth */
.raw-face-back  { transform: rotateY(180deg); }

/* ════════════════════════════════════════════════════════════════
   ADMIN MULTI-PAGE COMPONENTS
   ════════════════════════════════════════════════════════════════ */

/* ── Financial page ─────────────────────────────────────────── */
.fin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.fin-stat {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.4rem 1.6rem;
}
.fin-stat-label {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 8px;
}
.fin-stat-value { font-size: 2rem; font-weight: 900; color: var(--yellow); line-height: 1; }
.fin-stat-sub   { font-size: 0.82rem; color: var(--text-dim); margin-top: 6px; }

.fin-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.fin-chart-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.4rem;
}
.fin-chart-title {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 1rem;
}
.fin-chart-wrap { position: relative; height: 220px; }

.fin-top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fin-top-item {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg3);
}
.fin-top-rank { font-size: 0.9rem; font-weight: 800; color: var(--text-dim); width: 26px; flex-shrink: 0; }
.fin-top-img  { width: 64px; height: 90px; object-fit: contain; border-radius: 5px; flex-shrink: 0; }
.fin-top-name { font-size: 0.96rem; font-weight: 700; color: var(--text); flex: 1; min-width: 0;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-top-set  { font-size: 0.8rem; color: var(--text-dim); font-weight: 400; }
.fin-top-val  { font-size: 1.1rem; font-weight: 800; color: var(--yellow); flex-shrink: 0; }

/* ── Movers page ─────────────────────────────────────────────── */
.movers-section { margin-bottom: 2.75rem; }
.movers-section-title {
  font-size: 0.85rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
.movers-section-title.up   { color: #4ade80; }
.movers-section-title.down { color: #f87171; }

.movers-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}
.mover-card {
  background: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mover-card-img-wrap {
  width: 100%;
  aspect-ratio: 2.5 / 3.5;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border-radius: 10px 10px 10px 10px;
}
.mover-card-img-wrap.no-img::after {
  content: '🃏';
  font-size: 2.5rem;
  opacity: 0.25;
}
.mover-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mover-card-body {
  padding: 0.85rem 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}
.mover-card-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.mover-card-meta {
  font-size: 0.73rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.4rem;
}
.mover-card-change {
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
.mover-card-pct {
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
}
.mover-card-up   .mover-card-change,
.mover-card-up   .mover-card-pct { color: #4ade80; }
.mover-card-down .mover-card-change,
.mover-card-down .mover-card-pct { color: #f87171; }

.mover-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 1rem 0;
}

/* ── Admin notes textarea */
.admin-notes-box {
  width: 100%; box-sizing: border-box;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 8px; padding: 0.65rem 0.85rem;
  color: var(--text); font-family: inherit; font-size: 0.84rem;
  resize: vertical; min-height: 80px;
}
.admin-notes-box:focus { outline: none; border-color: rgba(255,255,255,0.3); }

/* ── Uploads page ────────────────────────────────────────────── */
.upload-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.upload-history-table th {
  text-align: left; padding: 8px 12px;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); font-weight: 700;
  border-bottom: 1px solid var(--card-border);
}
.upload-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text);
}
.upload-history-table tr:last-child td { border-bottom: none; }
.upload-history-table tr:hover td { background: var(--bg3); }

/* ── Settings page ───────────────────────────────────────────── */
.settings-section {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.5rem;
}
.settings-section-title {
  font-size: 0.9rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 1.1rem;
}

/* Tidied settings layout: grouped sections in a responsive grid */
.settings-page-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 1.5rem; }
.settings-group { margin-bottom: 2.25rem; }
.settings-group:last-child { margin-bottom: 0; }
.settings-group-title {
  font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--red); margin: 0 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--card-border);
}
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.25rem; align-items: start; }
.settings-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.settings-section-wide { grid-column: 1 / -1; }
.settings-desc { color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; margin: -0.3rem 0 0.95rem; }
.settings-err { color: var(--red); font-size: 0.84rem; margin-bottom: 0.75rem; display: none; }
.settings-subsection { border-top: 1px solid var(--card-border); padding-top: 1.25rem; margin-top: 0.5rem; }
.settings-subhead { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.85rem; }
.form-hint { color: var(--text-muted); font-weight: 400; }
@media (max-width: 560px) { .settings-grid-2 { grid-template-columns: 1fr; } }
.admin-user-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
}
.admin-user-row:last-child { border-bottom: none; }
.admin-user-name { font-size: 0.88rem; font-weight: 600; color: var(--text); }
.admin-user-date { font-size: 0.84rem; color: var(--text-muted); }

/* ── Backup page ─────────────────────────────────────────────── */
.backup-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.75rem;
  max-width: 480px;
  margin-bottom: 1.25rem;
}
.backup-card-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
.backup-card-desc  { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 1.25rem; line-height: 1.5; }

/* ── Publish page ─────────────────────────────────────────────── */
.pub-tally-bar {
  position: sticky; top: 62px; z-index: 90;
  background: var(--bg3);
  border-bottom: 1px solid var(--card-border);
  padding: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.pub-tally-inner {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  max-width: 1400px; margin: 0 auto;
}
.pub-tally-group { display: flex; flex-direction: column; gap: 2px; }
.pub-tally-label { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.pub-tally-val   { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.pub-tally-fee   { color: var(--yellow); }
.pub-tally-actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pub-publish-btn { padding: 10px 24px; font-size: 0.92rem; }
.pub-unpublish-btn { color: var(--red); border-color: var(--red); }

.pub-pricing-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.pub-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.25rem;
}
.pub-section-title {
  font-size: 1rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 0.6rem;
}
.pub-count-chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg3); color: var(--text-muted);
  border-radius: 100px; font-size: 0.84rem; font-weight: 700;
  padding: 2px 10px; letter-spacing: 0.02em;
}
.pub-pricing-grid { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pub-pricing-row  { display: flex; flex-direction: column; gap: 0.4rem; min-width: 200px; cursor: default; }
.pub-pricing-label { font-size: 0.88rem; font-weight: 600; color: var(--text-dim); }
.pub-pricing-input-wrap {
  display: flex; align-items: center;
  background: var(--bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 0 10px; gap: 4px;
}
.pub-pricing-prefix, .pub-pricing-suffix {
  font-size: 0.85rem; font-weight: 700; color: var(--text-muted); user-select: none;
}
.pub-pricing-input {
  border: none; background: transparent; color: var(--text); font-family: inherit;
  font-size: 0.9rem; font-weight: 700; width: 80px; padding: 8px 4px; outline: none;
}
.pub-pricing-save { padding: 8px 18px; font-size: 0.84rem; }

.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pub-card {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.pub-card:hover { box-shadow: var(--shadow-hover); }
.pub-card:has(.pub-card-check:checked) {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-glow);
}
.pub-card-check {
  position: absolute; top: 10px; right: 10px;
  width: 18px; height: 18px; cursor: pointer; z-index: 2;
  accent-color: var(--red);
}
.pub-card-img {
  width: 100%; aspect-ratio: 3/4; object-fit: contain;
  background: var(--bg); display: block;
}
.pub-card-img-placeholder {
  aspect-ratio: 3/4; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
}
/* Cards without images — greyed out and unselectable in publish flow */
.pub-card-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}
.pub-card-disabled .pub-card-check { pointer-events: none; }
.pub-no-image-note {
  font-size: 0.7rem;
  color: var(--red);
  margin-top: 0.3rem;
  font-style: italic;
}
/* Danger zone — delete collection */
.danger-zone {
  border: 1px solid rgba(230,57,70,0.25);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2rem;
  background: rgba(230,57,70,0.04);
}
.danger-zone-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.danger-zone-title::before {
  content: '⚠';
  font-size: 0.85rem;
}
.danger-zone-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.danger-zone-desc {
  flex: 1;
  min-width: 200px;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.btn-danger {
  background: transparent;
  border: 1px solid var(--red);
  color: var(--red);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.danger-seller-select {
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 0.45rem 0.75rem;
  min-width: 180px;
}
.pub-card-body { padding: 0.75rem; flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.pub-type-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 2px 8px; border-radius: 100px; width: fit-content;
}
.pub-type-raw    { background: rgba(59,130,246,0.15); color: #3b82f6; }
.pub-type-graded { background: rgba(232,100,10,0.15); color: var(--red); }
.pub-type-sealed { background: rgba(74,222,128,0.15); color: #4ade80; }
.pub-card-name { font-size: 0.8rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.pub-card-set  { font-size: 0.84rem; color: var(--text-muted); }
.pub-card-fee  { font-size: 0.84rem; font-weight: 700; color: var(--yellow); margin-top: auto; padding-top: 0.4rem; }
.pub-card-live-badge {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #4ade80;
}
.pub-empty {
  text-align: center; padding: 3rem 1rem; color: var(--text-muted); font-size: 0.9rem;
}


/* ── Payment modal ────────────────────────────────────────────── */
.pay-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 300; backdrop-filter: blur(4px);
}
.pay-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 301;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); padding: 2rem;
  width: min(520px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem); overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.pay-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: color var(--transition);
}
.pay-modal-close:hover { color: var(--red); }
.pay-modal-head { margin-bottom: 1.25rem; }
.pay-modal-title { font-size: 1.15rem; font-weight: 800; color: var(--text); margin-bottom: 0.2rem; }
.pay-modal-sub   { font-size: 0.85rem; color: var(--text-dim); }

.pay-breakdown {
  background: var(--bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}
.pay-bd-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.84rem; color: var(--text-dim); padding: 4px 0;
}
.pay-bd-total {
  border-top: 1px solid var(--card-border); margin-top: 6px; padding-top: 8px;
  font-weight: 800; color: var(--text); font-size: 0.95rem;
}

.pay-super-note {
  font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1rem; line-height: 1.5;
}
.pay-super-btn { width: 100%; padding: 12px; font-size: 0.95rem; }

.pay-option {
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 1.25rem; margin-bottom: 1rem;
}
.pay-option-label {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  margin-bottom: 1rem;
}
.pay-pp-logo { font-size: 1.1rem; letter-spacing: -0.02em; }
.pay-option-divider {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--text-muted); font-size: 0.78rem; margin: 1rem 0;
}
.pay-option-divider::before, .pay-option-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--card-border);
}
.pay-note { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.75rem; }
.pay-note code { font-family: monospace; background: var(--bg3); padding: 1px 5px; border-radius: 3px; }
.pay-invoice-btn { width: 100%; }

.pay-success {
  text-align: center; padding: 1rem 0;
}
.pay-success-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(74,222,128,0.15); color: #4ade80;
  font-size: 1.6rem; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.pay-success-title { font-size: 1.1rem; font-weight: 800; color: var(--text); margin-bottom: 0.4rem; }
.pay-success-msg   { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 1.25rem; }

.pay-error {
  background: rgba(230,57,70,0.1); border: 1px solid rgba(230,57,70,0.3);
  border-radius: var(--radius-sm); padding: 0.75rem 1rem;
  font-size: 0.84rem; color: var(--red); margin-top: 0.75rem;
}

/* ── Seller profile page ──────────────────────────────────────── */
.seller-main {
  max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem 4rem;
}
.seller-profile {
  display: flex; gap: 2rem; align-items: flex-start;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--card-radius); padding: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.seller-avatar {
  width: 100px; height: 100px; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
}
.seller-avatar-img  { width: 100%; height: 100%; object-fit: cover; }
.seller-avatar-initials {
  font-size: 2.4rem; font-weight: 800; color: var(--red); text-transform: uppercase;
}
.seller-info { flex: 1; min-width: 200px; }
.seller-name { font-size: 1.8rem; font-weight: 800; color: var(--text); margin: 0 0 0.4rem; }
.seller-bio  { font-size: 0.92rem; color: var(--text-dim); line-height: 1.6; margin: 0 0 0.75rem; }
.seller-meta { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 1.25rem; }
.seller-contact-btn { display: inline-block; text-decoration: none; }
.seller-error { text-align: center; padding: 4rem 1rem; color: var(--text-muted); }

.seller-cards-section { }
.seller-cards-heading {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 1rem; font-weight: 800; color: var(--text);
  margin-bottom: 1rem;
}
.seller-cards-count {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg3); border-radius: 100px; padding: 2px 10px;
}
.seller-sort-bar {
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.seller-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }

/* ── Card detail — seller attribution chip ────────────────────── */
.dp-seller-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg3); border: 1px solid var(--card-border);
  border-radius: 100px; padding: 6px 14px;
  text-decoration: none; margin-bottom: 0.75rem;
  transition: border-color var(--transition), background var(--transition);
}
.dp-seller-chip:hover { border-color: var(--red); background: var(--bg); }
.dp-seller-chip-label { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.dp-seller-chip-name  { font-size: 0.82rem; font-weight: 800; color: var(--red); }

/* Gallery seller badge — now an anchor */
a.gc-seller-badge {
  text-decoration: none; cursor: pointer;
  display: block;
}
a.gc-seller-badge:hover { color: var(--red); opacity: 0.8; }

/* ════════════════════════════════════════════════════════════════
   AG ARRIVAL EXPERIENCE — Cinematic homepage sections
   All dark-navy by design; unaffected by light/dark toggle
   ════════════════════════════════════════════════════════════════ */

/* ── Hero banner (plain — no overlay) ─────────────────────────── */


/* ── Trust strip ───────────────────────────────────────────────── */
.ag-trust-strip {
  background: var(--ag-bg-1);
  border-bottom: 1px solid var(--ag-line);
  padding: 0.55rem 1.5rem;
  display: flex; align-items: center;
  justify-content: center;
  gap: 0.55rem; flex-wrap: wrap;
  font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-text-3);
}
.ag-ts-dot { opacity: 0.30; }

/* ── Format pillars ────────────────────────────────────────────── */
.ag-formats {
  padding: 1.25rem 1.5rem 1rem;
  background: var(--ag-bg-0);
  border-bottom: 1px solid var(--ag-line);
}
.ag-formats-inner {
  max-width: 680px; margin: 0 auto;
  display: flex; gap: 0.75rem; justify-content: center;
}
.ag-format-pill {
  flex: 1; max-width: 200px;
  background: var(--ag-surface);
  border: 1px solid var(--ag-line);
  border-radius: var(--ag-radius-md);
  padding: 1rem 0.6rem 0.9rem;
  display: flex; flex-direction: column;
  align-items: center; gap: 0.3rem;
  cursor: pointer;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  text-align: center; font-family: inherit;
}
.ag-format-pill:hover,
.ag-format-pill.active {
  border-color: rgba(89,200,255,0.50);
  box-shadow: var(--ag-glow-cyan);
  background: rgba(89,200,255,0.06);
}
@media (prefers-reduced-motion: reduce) {
  .ag-format-pill { transition: none; }
}
.ag-fp-icon { font-size: 1.4rem; line-height: 1; margin-bottom: 0.15rem; }
.ag-fp-label {
  font-size: 0.85rem; font-weight: 800;
  color: var(--ag-text-1);
  letter-spacing: 0.01em;
}
.ag-fp-sub {
  font-size: 0.60rem; font-weight: 600;
  color: var(--ag-text-3);
  letter-spacing: 0.07em; text-transform: uppercase;
}

/* ── New In shelf ──────────────────────────────────────────────── */
.ag-shelf {
  background: var(--ag-bg-0);
  padding: 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--ag-line);
}
.ag-shelf-header {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 0.85rem;
}
.ag-shelf-title {
  font-size: 1rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-primary);
}
.ag-shelf-all {
  font-size: 0.78rem; font-weight: 600;
  color: var(--ag-cyan); background: none; border: none;
  cursor: pointer; padding: 0; opacity: 0.82;
  transition: opacity 0.15s; font-family: inherit;
}
.ag-shelf-all:hover { opacity: 1; }
.ag-shelf-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding-bottom: 1.25rem;
}
.ag-shelf-scroll::-webkit-scrollbar { display: none; }
.ag-shelf-grid {
  display: flex; gap: 0.75rem; width: max-content;
}
/* Shelf cards: smaller fixed width */
.ag-shelf-grid .gc {
  width: 148px; flex-shrink: 0;
  font-size: 0.85em;
}
.ag-shelf-grid .gc-img { height: 206px; }
.ag-shelf-grid .gc-name { font-size: 0.78rem; }
.ag-shelf-grid .gc-meta { font-size: 0.65rem; }
.ag-shelf-grid .gc-price { font-size: 0.75rem; }

/* The New Arrivals shelf has a permanently dark background, so its card text
   must stay light in BOTH themes (light mode would otherwise render it dark
   and unreadable on the dark shelf). */
.ag-shelf .gc-name,
.ag-shelf .gc-name-text { color: #fff; }
.ag-shelf .gc-meta       { color: rgba(255,255,255,0.55); }
.ag-shelf .gc-grade-val  { color: #fff; }
.ag-shelf .gc-grade-word { color: rgba(255,255,255,0.62); }
.ag-shelf .gc-price      { color: #4ade80; }

/* ── Card Edit Page ──────────────────────────────────────────────── */

/* Slightly lighter background than rest of admin for data-entry feel */
.card-edit-page { background: #121528; }
.card-edit-page .admin-container { background: transparent; }

/* Accordion sections: more card-like with stronger contrast */
.card-edit-page .acc-section {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
.card-edit-page .acc-header {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}
.card-edit-page .acc-header:hover,
.card-edit-page .acc-section.open .acc-header { background: rgba(255,255,255,0.07); }

/* Form inputs: brighter so they stand out from the darker background */
.card-edit-page .form-input {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
  color: var(--text);
}
.card-edit-page .form-input:focus { border-color: var(--red); background: rgba(255,255,255,0.12); }

/* Circled section numbers */
.acc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 1.45rem;
  font-weight: 800;
  margin-right: 0.4rem;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Page header: back button, title, save actions */
.ce-page-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.ce-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.ce-back-btn:hover { border-color: var(--red); color: var(--text); }

.ce-header-text { flex: 1; min-width: 0; }
.ce-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.ce-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ce-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.ce-save-status { font-size: 0.8rem; color: var(--text-muted); }
.ce-pick-hint { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.3rem; min-height: 1em; }
.ce-pick-hint.loading { color: var(--text-muted); font-style: italic; }
.ce-pick-hint.ok  { color: #36c275; }
.ce-pick-hint.err { color: var(--red); }
.ce-sold-btn {
  background: none;
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.ce-sold-btn:hover { border-color: var(--red); }

/* Two-column layout */
.ce-layout {
  display: grid;
  grid-template-columns: 273px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 700px) {
  .ce-layout { grid-template-columns: 1fr; }
}

/* Left: sticky image column */
.ce-image-col {
  position: sticky;
  top: calc(56px + 1.5rem);  /* admin nav height + gap */
}
.ce-image-panel {
  background: none;
  border: none;
  border-radius: var(--card-radius);
  overflow: hidden;
}

/* Thumbnail */
.ce-thumb-wrap {
  width: 100%;
  aspect-ratio: 2.5 / 3.5;  /* standard card ratio */
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}
.ce-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ce-no-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

/* Image controls */
.ce-img-controls {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ce-img-ctrl-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ce-url-input {
  font-size: 0.75rem !important;
  padding: 7px 10px !important;
}
.ce-img-btn-row { display: flex; gap: 0.4rem; }
.ce-img-btn {
  flex: 1;
  font-size: 0.75rem !important;
  padding: 6px 8px !important;
  text-align: center;
}
.ce-img-status {
  font-size: 0.75rem;
  min-height: 1em;
  color: var(--text-muted);
}
.ce-img-ok  { color: #4ade80; }
.ce-img-err { color: var(--red); }
.ce-img-create-note {
  padding: 0.85rem 0.9rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255,255,255,0.07);
  text-align: center;
  line-height: 1.45;
}

/* Raw card front/back photo uploader */
.ce-raw-photos {
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ce-raw-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: -0.2rem;
}
.ce-raw-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.ce-raw-slot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ce-raw-thumb {
  aspect-ratio: 2.5 / 3.5;
  background: rgba(0,0,0,0.25);
  background-size: cover;
  background-position: center;
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ce-raw-thumb.has-img { border-style: solid; border-color: rgba(255,255,255,0.12); }
.ce-raw-thumb span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ce-raw-remove {
  background: none;
  border: none;
  color: var(--red);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 2px;
  text-decoration: underline;
}

/* Crop modal */
.ce-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ce-crop-dialog {
  background: var(--surface, #1b1d23);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  width: min(560px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ce-crop-head {
  padding: 0.9rem 1rem;
  font-size: 0.85rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ce-crop-stage {
  flex: 1;
  min-height: 0;
  background: #000;
  padding: 0.6rem;
}
.ce-crop-stage img { max-width: 100%; display: block; }
/* Cropper needs a bounded box to compute its layout */
.ce-crop-stage > img { max-height: 62vh; }
.ce-crop-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ce-crop-lock.active {
  color: var(--accent, #ff7a1a);
  border-color: var(--accent, #ff7a1a);
}
.ce-crop-status {
  padding: 0.5rem 1rem 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-dim, #aaa);
  min-height: 1.2em;
}
.ce-crop-status.ce-crop-ok  { color: #38c172; }
.ce-crop-status.ce-crop-err { color: #ff6b6b; }

/* Right: form column */
.ce-form-col { min-width: 0; }

/* ── ACE Quick Add panel (create mode) ──────────────────────────── */
.ce-ace-quick-add {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(212,144,10,0.07);
  border: 1.5px solid rgba(212,144,10,0.30);
  border-radius: var(--card-radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.ce-ace-quick-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(212,144,10,0.15);
  color: #c4860e;
  flex-shrink: 0;
  margin-top: 2px;
}
.ce-ace-quick-body { flex: 1; min-width: 0; }
.ce-ace-quick-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 0.2rem;
}
.ce-ace-quick-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.ce-ace-quick-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.ce-ace-cert-input {
  max-width: 180px;
  font-size: 0.85rem !important;
  padding: 7px 10px !important;
}
.ce-ace-lookup-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.ce-ace-status {
  font-size: 0.78rem;
  min-height: 1.1em;
  margin-top: 0.5rem;
  color: var(--text-muted);
}
.ce-ace-status.ok   { color: #4ade80; }
.ce-ace-status.err  { color: var(--red); }
.ce-ace-status.warn { color: #f59e0b; }

/* Cert field row with inline Lookup button */
.ce-ace-field-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.ce-ace-field-row .form-input { flex: 1; }
.ce-ace-inline-lookup {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem !important;
  padding: 7px 10px !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Bottom actions row */
.ce-bottom-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.ce-delete-btn {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(230,57,70,0.35);
  color: var(--red);
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ce-delete-btn:hover { background: rgba(230,57,70,0.08); }
.ce-duplicate-btn {
  background: none;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ce-duplicate-btn:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--text-dim);
  color: var(--text);
}
.ce-duplicate-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Gallery vault — keep on dark bg in dark mode ─────────────── */
/* (no change needed; existing vars handle it) */

/* ── Admin Dashboard — status pills ─────────────────────────────── */
.dash-status-row {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
  flex-wrap: wrap;
}
.dash-status-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 1.5rem;
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  text-decoration: none;
  min-width: 90px;
  transition: border-color 0.18s, background 0.18s;
}
.dash-status-pill:hover { border-color: var(--red); background: rgba(232,100,10,0.06); }
.dsp-count {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.dsp-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.dash-pill-live   .dsp-count { color: #4ade80; }
.dash-pill-hidden .dsp-count { color: var(--text-muted); }
.dash-pill-sold   .dsp-count { color: var(--red); }

/* ── Admin Dashboard — quick action cards ─────────────────────── */
.dash-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.dash-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  cursor: pointer;
  text-align: center;
}
.dash-action-card:hover {
  border-color: var(--red);
  background: rgba(232,100,10,0.06);
  transform: translateY(-2px);
}
.dash-action-card svg { opacity: 0.75; }

/* ── Admin Dashboard — movers mini ──────────────────────────────── */
.dash-movers-wrap {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.25rem 1.5rem 1.5rem;
}
.dash-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.dash-movers-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 600px) { .dash-movers-cols { grid-template-columns: 1fr; } }
.dash-movers-col-hd {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.dash-movers-col-hd.up   { color: #4ade80; }
.dash-movers-col-hd.dn   { color: var(--red); }
.dash-mover-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dash-mover-card:last-child { border-bottom: none; }
.dash-mover-img {
  width: 36px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.dash-mover-noimg {
  background: var(--card-border);
  border-radius: 4px;
}
.dash-mover-info { flex: 1; min-width: 0; }
.dash-mover-name {
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-mover-meta { font-size: 0.68rem; color: var(--text-muted); }
.dash-mover-val {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-mover-up { color: #4ade80; }
.dash-mover-dn { color: var(--red); }
.dash-mover-empty { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.dash-movers-link {
  display: block;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  text-align: right;
}
.dash-movers-link:hover { color: var(--red); }

/* ── My Collection — product type tabs ───────────────────────────── */
.coll-type-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--card-border);
  margin-bottom: 0;
}
.coll-type-tab {
  padding: 0.85rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.coll-type-tab:hover { color: var(--text); }
.coll-type-tab.active {
  color: var(--text);
  border-bottom-color: var(--red);
}
.coll-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.42rem;
  min-width: 20px;
  color: var(--text-muted);
}
.coll-type-tab.active .coll-tab-count { background: rgba(232,100,10,0.2); color: var(--red); }

/* ── Admin slab filter tabs (secondary row under Graded tab) ─────── */
.admin-slab-tabs {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.admin-slab-tab {
  background: none;
  border: 1.5px solid var(--card-border);
  border-radius: 20px;
  padding: 0.34rem 1.1rem;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.admin-slab-tab img {
  height: 20px;
  width: auto;
  display: block;
  filter: none;
  opacity: 1;
  transition: filter 0.15s, opacity 0.15s;
}
.admin-slab-tab:hover { color: var(--text); border-color: rgba(212,144,10,0.45); }
.admin-slab-tab:hover img { filter: grayscale(1); opacity: 0.6; }
.admin-slab-tab.active {
  background: rgba(212,144,10,0.12);
  border-color: rgba(212,144,10,0.55);
  color: #c4860e;
}
.admin-slab-tab.active img {
  filter: none;
  opacity: 1;
}

/* ── Financial page — tab bar ─────────────────────────────────────── */
.fin-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--card-border);
  margin: 1.5rem 0 1.75rem;
}
.fin-tab {
  padding: 0.6rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.fin-tab:hover { color: var(--text); }
.fin-tab.active { color: var(--text); border-bottom-color: var(--red); }

/* ── Responsive: arrival experience ───────────────────────────── */
@media (max-width: 600px) {
  .ag-formats-inner { gap: 0.5rem; }
  .ag-format-pill { padding: 0.75rem 0.4rem; max-width: none; }
  .ag-fp-sub { display: none; }
  .ag-shelf { padding: 1rem 0.75rem 0; }
  .ag-trust-strip { gap: 0.4rem; font-size: 0.58rem; }
}

/* ════════════════════════════════════════════════════════════════
   SETS / BUNDLES  —  admin controls, panel, list view, build modal,
   front shelf, detail page, and card "part of a set" banner
   ════════════════════════════════════════════════════════════════ */

/* ── Admin filter bar: Sets toggle + grid/list view switch ──────── */
.admin-sets-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1.5px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 0.86rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transition);
}
.admin-sets-toggle:hover { color: var(--text); border-color: rgba(212,144,10,0.5); }
.admin-sets-toggle.active {
  background: rgba(212,144,10,0.12);
  border-color: rgba(212,144,10,0.55);
  color: #c4860e;
}
.admin-sets-toggle svg { flex-shrink: 0; }
.admin-sets-toggle .coll-tab-count { font-weight: 700; opacity: 0.75; }

.admin-view-toggle {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--card-border);
  border-radius: 100px; overflow: hidden;
  margin-left: 2px;
}
.admin-view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--text-muted);
  padding: 5px 10px; cursor: pointer;
  transition: all var(--transition);
}
.admin-view-btn:hover { color: var(--text); }
.admin-view-btn.active { background: var(--red); color: #fff; }
.admin-view-btn svg { display: block; }

/* ── Sets manager panel ─────────────────────────────────────────── */
.sets-panel {
  background: var(--bg2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0 0 1.5rem;
}
.sets-panel-hd {
  display: flex; align-items: baseline; gap: 0.6rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.sets-panel-title {
  font-size: 1rem; font-weight: 800;
  letter-spacing: 0.04em; color: var(--text);
}
.sets-panel-hint { font-size: 0.78rem; color: var(--text-muted); }
.sets-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.sets-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 1.75rem 1rem;
  color: var(--text-muted); font-size: 0.88rem;
}
.sets-empty strong { color: var(--text-dim); }

.set-card {
  display: flex; flex-direction: column;
  background: var(--bg3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--transition), transform 0.15s;
}
.set-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.18); transform: translateY(-1px); }
.set-card-sold { opacity: 0.62; }
.set-card-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px; background: var(--card-border);
}
.set-card-thumbs img,
.set-card-thumbs .set-thumb-empty {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  background: var(--bg);
  display: block;
}
.set-card-body { padding: 0.7rem 0.85rem 0.4rem; }
.set-card-name {
  font-size: 0.92rem; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  line-height: 1.3;
}
.set-status {
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 100px;
}
.set-status-live  { background: rgba(22,163,74,0.16);  color: #16a34a; }
.set-status-draft { background: rgba(120,120,160,0.18); color: var(--text-dim); }
.set-status-sold  { background: rgba(230,57,70,0.16);   color: var(--red); }
.set-card-meta {
  font-size: 0.78rem; color: var(--text-dim);
  margin-top: 0.3rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.set-card-guide { color: var(--text-muted); }
.set-card-actions {
  display: flex; gap: 0.4rem; padding: 0.55rem 0.85rem 0.75rem;
  flex-wrap: wrap;
}
.set-card-actions .btn-sm { padding: 4px 10px; font-size: 0.76rem; }
.set-del { color: var(--red) !important; }
.set-del:hover { background: rgba(230,57,70,0.12) !important; }

/* ── Admin tile: select checkbox + "in a set" badge ─────────────── */
.tile-select {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,24,0.55);
  border-radius: 7px; cursor: pointer;
  backdrop-filter: blur(3px);
}
.tile-select input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--red); }
.tile-setbadge {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: calc(100% - 16px);
  background: rgba(212,144,10,0.92); color: #1c1408;
  font-size: 0.66rem; font-weight: 800;
  padding: 3px 8px; border-radius: 100px;
  text-decoration: none; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.tile-setbadge:hover { background: #d4900a; }

/* ── Admin LIST view ────────────────────────────────────────────── */
.admin-card-grid.view-list {
  display: flex; flex-direction: column; gap: 0;
}
.admin-card-row {
  display: grid;
  grid-template-columns: 34px 52px minmax(0,1fr) auto auto auto;
  align-items: center; gap: 0.85rem;
  padding: 0.55rem 0.75rem;
  background: var(--bg2);
  border: 1px solid var(--card-border);
  border-bottom: none;
  transition: background var(--transition);
}
.admin-card-row:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.admin-card-row:last-child  { border-bottom: 1px solid var(--card-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.admin-card-row:hover { background: var(--bg3); }
.admin-card-row.tile-hidden { opacity: 0.45; }
.admin-card-row.tile-sold .row-thumb img { opacity: 0.5; }
.admin-card-row.tile-new { box-shadow: inset 3px 0 0 #eab308; }

.row-select { display: flex; align-items: center; justify-content: center; }
.row-select .tile-select,
.row-select .row-setbadge { position: static; top: auto; left: auto; }
.row-select .tile-select { background: transparent; backdrop-filter: none; width: auto; height: auto; }
.row-setbadge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(212,144,10,0.18); color: #c4860e;
  text-decoration: none; font-size: 0.95rem;
}
.row-setbadge:hover { background: rgba(212,144,10,0.3); }

.row-thumb {
  width: 52px; height: 70px; border-radius: 6px; overflow: hidden;
  background: var(--bg3); display: block; position: relative;
}
.row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-no-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.row-main { min-width: 0; }
.row-name {
  font-size: 0.92rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-sub {
  font-size: 0.75rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.row-inset { color: #c4860e; font-weight: 600; }
.row-status { display: flex; gap: 0.4rem; align-items: center; }
.row-price { display: flex; align-items: center; gap: 2px; }
.row-price .tile-price-input { width: 78px; }
.row-actions { display: flex; gap: 0.3rem; align-items: center; }

/* ── Selection action bar (sticky bottom) ───────────────────────── */
.sel-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--bg2);
  border-top: 1px solid var(--card-border);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.22);
  padding: 0.7rem 1rem;
}
.sel-bar-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.sel-bar-count { font-size: 0.9rem; color: var(--text); }
.sel-bar-count strong { color: var(--red); font-weight: 800; }
.sel-bar-total { font-size: 0.85rem; color: var(--text-dim); }
.sel-bar-actions {
  margin-left: auto; display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap;
}
.sel-add-wrap { display: flex; align-items: center; gap: 0.4rem; }
.bulk-set-select {
  background: var(--bg3);
  border: 1.5px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text); font-size: 0.82rem;
  padding: 5px 9px; cursor: pointer; font-family: inherit;
}

/* ── Build / Edit Set modal ─────────────────────────────────────── */
.set-modal-card {
  background: var(--bg2);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.5rem; width: 100%; max-width: 460px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.set-members {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 6px;
}
.set-member {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 5px 8px; border-radius: 6px;
  background: var(--bg3);
}
.set-member-name {
  flex: 1; min-width: 0; font-size: 0.82rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.set-member-price { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.set-member-x {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.15rem; line-height: 1;
  padding: 0 2px; transition: color 0.15s;
}
.set-member-x:hover { color: var(--red); }

/* ════════════════════════════════════════════════════════════════
   FRONT — Sets & Bundles shelf  (2 per row, bigger tiles)
   ════════════════════════════════════════════════════════════════ */
.sets-shelf {
  background: var(--ag-bg-0);
  padding: 1.25rem 1.5rem 1.75rem;
  border-bottom: 1px solid var(--ag-line);
}
.sets-shelf .ag-shelf-header { margin-bottom: 1rem; }
.sets-shelf-sub { font-size: 0.78rem; color: var(--text-muted); }
.sets-shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.set-tile {
  position: relative; cursor: pointer;
  background: var(--bg2);
  border: 1px solid var(--ag-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.set-tile:hover {
  transform: translateY(-3px);
  border-color: var(--ag-line-strong);
  box-shadow: 0 14px 36px rgba(0,0,0,0.3);
}
.set-tile-badge {
  position: absolute; top: 10px; left: 10px; z-index: 30;
  background: rgba(212,144,10,0.96); color: #1c1408;
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
/* Fanned, overlapping card stack — priciest card front-left, cheaper behind.
   Every card in the set is rendered; the per-card overlap is set inline by
   gallery.js (tighter the more cards there are) so the fan always fits. */
.set-tile-fan {
  display: flex;
  align-items: flex-start;     /* cards hang from a top baseline below the badge */
  justify-content: center;
  padding: 2.7rem 1.1rem 1.8rem;
  min-height: 300px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(126,157,216,0.10), transparent 70%),
    var(--ag-bg-0);
}
.set-tile-fancard {
  width: 152px;            /* 50% larger again (was 101) */
  aspect-ratio: 63 / 88;   /* real trading-card proportions — no vertical crop */
  flex-shrink: 0;
  border-radius: 9px;
  overflow: hidden;
  background: var(--bg3);
  border: 2px solid var(--bg2);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  transform-origin: 50% 85%; /* pivot near the base so rotation fans like a hand */
}
.set-tile-fancard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-tile-info { padding: 0.85rem 1rem 1rem; }
.set-tile-name { font-size: 1.02rem; font-weight: 800; color: var(--text); line-height: 1.25; }
.set-tile-desc {
  font-size: 0.8rem; color: var(--text-dim); margin-top: 0.3rem;
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.set-tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.7rem;
}
.set-tile-price { font-size: 1.05rem; font-weight: 800; color: #4ade80; }
.set-tile-cta { font-size: 0.8rem; font-weight: 600; color: var(--ag-cyan); }

@media (max-width: 900px) {
  .sets-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sets-shelf-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SET DETAIL PAGE  (set.html)
   ════════════════════════════════════════════════════════════════ */
.set-detail { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.set-detail-loading,
.set-detail-empty {
  text-align: center; padding: 4rem 1rem; color: var(--text-muted);
}
.set-detail-empty h1 { font-size: 1.4rem; color: var(--text); margin-bottom: 0.5rem; }
.btn-back-home {
  display: inline-block; margin-top: 1.25rem;
  color: var(--red); font-weight: 600; text-decoration: none;
}
.btn-back-home:hover { text-decoration: underline; }

.set-hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.75rem; margin-bottom: 2.5rem;
}
.set-hero-fan {
  display: flex; align-items: flex-start; justify-content: center;
  width: 100%; padding: 3.25rem 1rem 2rem; min-height: 340px;
  border-radius: var(--radius);
  background: radial-gradient(120% 80% at 50% 0%, rgba(126,157,216,0.12), transparent 70%), var(--ag-bg-0);
}
.set-hero-fancard {
  width: 182px; aspect-ratio: 63 / 88; flex-shrink: 0;
  border-radius: 11px; overflow: hidden;
  background: var(--bg3); border: 2px solid var(--bg2);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  transform-origin: 50% 85%;
}
.set-hero-fancard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-hero-body { padding-top: 0.25rem; max-width: 640px; text-align: center; }
.set-hero-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(212,144,10,0.16); color: #c4860e;
  padding: 4px 10px; border-radius: 100px; margin-bottom: 0.85rem;
}
.set-hero-name { font-size: 1.75rem; font-weight: 800; color: var(--text); line-height: 1.15; }
.set-hero-desc { font-size: 0.95rem; color: var(--text-dim); line-height: 1.6; margin-top: 0.85rem; }
.set-hero-pricerow {
  display: flex; align-items: baseline; justify-content: center; gap: 0.85rem;
  margin-top: 1.25rem; flex-wrap: wrap;
}
.set-hero-price { font-size: 1.85rem; font-weight: 800; color: #4ade80; }
.set-hero-guide { font-size: 0.85rem; color: var(--text-muted); }
.set-hero-seller { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.85rem; }
.set-hero-seller strong { color: var(--text); }
.set-hero-enquire {
  display: inline-block; margin-top: 1.5rem;
  background: var(--red); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 0.95rem;
  padding: 0.75rem 1.5rem; border-radius: 100px;
  box-shadow: 0 4px 16px var(--red-glow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.set-hero-enquire:hover { transform: translateY(-1px); box-shadow: 0 6px 22px var(--red-glow); }

.set-members-title {
  font-size: 1.05rem; font-weight: 800; color: var(--text);
  letter-spacing: 0.02em; margin: 2.25rem 0 1.1rem;
}
.set-members-title:first-of-type { margin-top: 0; }

/* ── At-a-glance facts strip ───────────────────────────────────── */
.set-facts {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem; margin: 0 0 2.25rem;
}
.set-fact {
  flex: 1 1 auto;   /* size to content, share leftover space, never force a wrap inside */
  background: var(--bg2); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 0.7rem 0.95rem;
}
.set-fact-k {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
.set-fact-v {
  font-size: 1rem; font-weight: 800; color: var(--text);
  margin-top: 3px; line-height: 1.2; white-space: nowrap;
}

/* ── Card-by-card breakdown table ──────────────────────────────── */
.set-table-wrap {
  border: 1px solid var(--card-border); border-radius: var(--radius);
  overflow-x: auto; background: var(--bg2);
}
.set-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
  white-space: nowrap;
}
.set-table thead th {
  text-align: left; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
  padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--card-border);
  background: var(--bg3); position: sticky; top: 0;
}
.set-table tbody td {
  padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--card-border);
  color: var(--text-dim);
}
.set-table tbody tr:last-child td { border-bottom: none; }
.set-row { cursor: pointer; transition: background 0.12s; }
.set-row:hover { background: var(--bg3); }
.set-row.is-sold { opacity: 0.55; }
.set-col-name { white-space: normal; min-width: 160px; }
.set-col-name a { color: var(--text); font-weight: 700; text-decoration: none; }
.set-row:hover .set-col-name a { color: var(--red); }
.set-col-price { text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.set-col-grade { color: #c4860e; font-weight: 600; }
.set-row-sold {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 100px; vertical-align: middle; margin-left: 4px;
}
.set-table tfoot td {
  padding: 0.75rem 0.85rem; border-top: 1px solid var(--card-border);
  background: var(--bg3); font-weight: 700; color: var(--text);
}
.set-table-foot-label { text-align: right; color: var(--text-dim); }
.set-table-foot-ask { color: #4ade80; }
.set-col-price.set-table-foot-ask { font-size: 1rem; }
.set-members-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.1rem;
}
.set-member-card {
  display: flex; flex-direction: column;
  background: var(--bg2); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
.set-member-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.set-member-card.is-sold { opacity: 0.6; }
.set-member-img {
  position: relative; background: var(--bg3); aspect-ratio: 63 / 88;   /* true card ratio — no top/bottom crop */
  margin: 7px 7px 0;
  border-radius: calc(var(--card-radius) / 2);   /* round all 4 corners, half the home-page radius */
  overflow: hidden;
}
.set-member-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.set-member-sold {
  position: absolute; top: 8px; right: 8px;
  background: var(--red); color: #fff;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 8px; border-radius: 100px;
}
.set-member-info { padding: 0.65rem 0.75rem 0.8rem; }
.set-member-cardname { font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.3; }
.set-member-grade { font-size: 0.74rem; color: #c4860e; font-weight: 600; margin-top: 2px; }
.set-member-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.set-member-est { font-size: 0.82rem; color: var(--text-dim); font-weight: 700; margin-top: 0.4rem; }

@media (max-width: 720px) {
  .set-hero { gap: 1.25rem; }
  .set-hero-fan { padding: 2.5rem 0.5rem 1.5rem; min-height: 260px; }
  .set-hero-fancard { width: 140px; }
  .set-hero-name { font-size: 1.45rem; }
}

/* ── "Part of a set" banner on the card detail page ─────────────── */
.dp-set-banner {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(212,144,10,0.1);
  border: 1px solid rgba(212,144,10,0.35);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem; margin-bottom: 1rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.dp-set-banner:hover { background: rgba(212,144,10,0.16); border-color: rgba(212,144,10,0.55); }
.dp-set-banner-icon { font-size: 1.1rem; color: #c4860e; flex-shrink: 0; }
.dp-set-banner-text { flex: 1; font-size: 0.88rem; color: var(--text-dim); }
.dp-set-banner-text strong { color: var(--text); }
.dp-set-banner-cta { font-size: 0.82rem; font-weight: 700; color: #c4860e; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════
   "Sell to us" — header pill + seller submission page
   ════════════════════════════════════════════════════════════════════ */

/* Header pill (homepage banner) */
.banner-sell-link {
  position: absolute; bottom: 1.6rem; right: 1.5rem;
  z-index: 11;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 14px 35px; border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 1.52rem; font-weight: 800; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 26px var(--red-glow);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.banner-sell-link svg { width: 22px; height: 22px; }
.banner-sell-link:hover { background: #c62e3a; transform: translateY(-2px); box-shadow: 0 10px 34px var(--red-glow); }
.banner-controls { display: flex; align-items: center; gap: 0.9rem; }
@media (max-width: 640px) {
  .banner-sell-link { bottom: 0.8rem; right: 0.8rem; padding: 9px 19px; font-size: 0.9rem; gap: 0.4rem; }
  .banner-sell-link svg { width: 15px; height: 15px; }
}

/* Page shell */
.sell-page { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.sell-head { margin: 0.5rem 0 1.75rem; }
.sell-title { font-size: 2rem; font-weight: 800; margin: 0 0 0.5rem; }
.sell-sub { color: var(--text-dim); font-size: 0.95rem; max-width: 640px; line-height: 1.5; margin: 0; }

.sell-gate {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 2rem; text-align: center;
}
.sell-gate p { color: var(--text-dim); margin: 0 0 1.25rem; }
.sell-gate-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

.sell-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.sell-card-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1.1rem; }
.sell-count { color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }

.sell-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sell-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sell-field-qty { max-width: 90px; }
.sell-label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.sell-input {
  background: var(--bg2); border: 1px solid var(--card-border); color: var(--text);
  border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; font-size: 0.9rem;
  font-family: inherit; width: 100%;
}
.sell-input:focus { outline: none; border-color: var(--red); }
.sell-hint { font-size: 0.74rem; color: var(--text-muted); min-height: 1em; }
.sell-hint.ok { color: #4ade80; }
.sell-hint.err { color: var(--red); }
.sell-hint.loading { color: var(--text-dim); }

/* Type selector */
.sell-type-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.sell-type-btn {
  flex: 1 1 auto; min-width: 84px; padding: 0.6rem 0.9rem;
  background: var(--bg2); border: 1px solid var(--card-border); color: var(--text-dim);
  border-radius: var(--radius-sm); font-weight: 700; font-size: 0.85rem; cursor: pointer;
  font-family: inherit; transition: all 0.15s;
}
.sell-type-btn:hover { color: var(--text); border-color: var(--text-dim); }
.sell-type-btn.active { background: var(--red); border-color: var(--red); color: #fff; }

/* Builder grid + card preview to the right of the fields */
.sell-builder-main { display: flex; align-items: flex-start; gap: 1.5rem; }
.sell-builder-main .sell-builder { flex: 1; min-width: 0; }
.sell-builder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sell-builder-foot {
  display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem;
  padding-top: 1.25rem; border-top: 1px solid var(--card-border);
}
.sell-thumb {
  width: 70px; height: 98px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--bg2); border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sell-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sell-thumb-ph { font-size: 0.68rem; color: var(--text-muted); text-align: center; }
/* Enlarged preview (3× the default) sitting beside the add-item fields */
.sell-thumb-lg { width: 210px; height: 294px; border-radius: var(--radius); }
.sell-thumb-lg .sell-thumb-ph { font-size: 0.95rem; }
.sell-builder-actions { display: flex; align-items: center; gap: 0.9rem; }

/* Item list table */
.sell-list-wrap { overflow-x: auto; }
.sell-list { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.sell-list thead th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); font-weight: 700; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--card-border);
}
.sell-list td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
.sell-empty-row td { color: var(--text-muted); text-align: center; padding: 1.5rem; }
.sell-li-thumb { width: 80px; }
.sell-li-thumb img { width: 68px; height: 94px; object-fit: cover; border-radius: 6px; }
.sell-li-noimg { display: inline-block; width: 68px; height: 94px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--card-border); }
.sell-li-type { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.sell-li-type-raw { background: rgba(59,130,246,0.16); color: #60a5fa; }
.sell-li-type-graded { background: rgba(232,100,10,0.16); color: var(--red); }
.sell-li-type-sealed { background: rgba(74,222,128,0.16); color: #4ade80; }
.sell-li-type-other { background: rgba(168,85,247,0.16); color: #c084fc; }
.sell-li-name { font-weight: 600; }
.sell-li-num { color: var(--text-muted); font-weight: 500; }
.sell-li-det { color: var(--text-dim); }
.sell-li-qty { text-align: center; }
.sell-li-rm button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--card-border);
  background: var(--bg2); color: var(--text-muted); cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.sell-li-rm button:hover { color: var(--red); border-color: var(--red); }
.sell-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1.25rem; }
.sell-thanks p { color: var(--text-dim); margin: 0 0 1.25rem; }

/* How-it-works steps */
.sell-steps { margin: 0 0 1.75rem; }
.sell-steps-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 1rem; }
.sell-steps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem;
}
.sell-step {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.1rem 1rem;
}
.sell-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--red); color: #fff;
  font-weight: 800; font-size: 1.35rem; margin-bottom: 0.85rem;
}
.sell-step-text { font-size: 0.86rem; color: var(--text-dim); line-height: 1.5; }
.sell-step-text strong { color: var(--text); display: block; margin-bottom: 0.2rem; font-size: 0.95rem; }

/* Custom combobox (set / card pickers) */
.sell-combo { position: relative; }
.sell-combo-pop {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  max-height: 280px; overflow-y: auto;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}
.sell-combo-pop.open { display: block; }
.sell-combo-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid var(--card-border);
}
.sell-combo-opt:last-child { border-bottom: none; }
.sell-combo-opt:hover, .sell-combo-opt.active { background: var(--bg3); }
.sell-combo-opt-main { color: var(--text); }
.sell-combo-opt-sub { color: var(--text-muted); font-size: 0.74rem; white-space: nowrap; }
.sell-combo-empty { padding: 0.7rem 0.75rem; color: var(--text-muted); font-size: 0.82rem; }

@media (max-width: 860px) { .sell-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .sell-grid-2, .sell-builder { grid-template-columns: 1fr; }
  .sell-steps-grid { grid-template-columns: 1fr; }
  .sell-builder-main { flex-direction: column-reverse; }
  .sell-thumb-lg { width: 100%; max-width: 210px; align-self: center; }
}

/* Dark mode: lift inputs off the panel so they stand out */
[data-theme="dark"] .sell-input { background: #1a2143; border-color: rgba(120,160,255,0.20); }
[data-theme="dark"] .sell-input:focus { border-color: var(--red); }
[data-theme="dark"] .sell-type-btn { background: #1a2143; border-color: rgba(120,160,255,0.18); }
[data-theme="dark"] .sell-type-btn.active { background: var(--red); border-color: var(--red); }
[data-theme="dark"] .sell-combo-pop { background: #161b38; }
[data-theme="dark"] .sell-combo-opt:hover, [data-theme="dark"] .sell-combo-opt.active { background: #232a52; }

/* ════════════════════════════════════════════════════════════════════
   Admin — "Sell to us" review queue
   ════════════════════════════════════════════════════════════════════ */
.subs-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start; }
.subs-list-pane {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1rem; position: sticky; top: 1rem;
}
.subs-list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.9rem; }
.subs-h1 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.subs-default-pct { font-size: 0.72rem; color: var(--text-muted); }
.subs-muted { color: var(--text-muted); font-size: 0.85rem; }
.subs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.subs-list-item {
  text-align: left; background: var(--bg2); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); padding: 0.7rem 0.8rem; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.subs-list-item:hover { border-color: var(--text-dim); }
.subs-list-item.active { border-color: var(--red); background: rgba(232,100,10,0.08); }
.subs-li-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.subs-li-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.subs-li-meta { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.2rem; }
.subs-li-ref { font-size: 0.72rem; font-weight: 700; color: var(--red); letter-spacing: 0.05em; margin-top: 0.2rem; }

.subs-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.subs-badge-pending { background: rgba(232,100,10,0.18); color: var(--red); }
.subs-badge-reviewing { background: rgba(59,130,246,0.18); color: #60a5fa; }
.subs-badge-accepted { background: rgba(74,222,128,0.18); color: #4ade80; }
.subs-badge-partial { background: rgba(212,144,10,0.18); color: #d4900a; }
.subs-badge-rejected { background: rgba(148,148,148,0.18); color: var(--text-muted); }

.subs-detail-pane {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; min-height: 300px;
}
.subs-empty { color: var(--text-muted); text-align: center; padding: 4rem 1rem; }
.subs-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.subs-detail-name { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.3rem; }
.subs-detail-sub { font-size: 0.82rem; color: var(--text-dim); }
.subs-detail-sub a { color: var(--text-dim); }
.subs-pct-control { display: flex; align-items: center; gap: 0.5rem; }
.subs-pct-control label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.subs-pct-control input { width: 70px; background: var(--bg2); border: 1px solid var(--card-border); color: var(--text); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; font-family: inherit; }

.subs-items-wrap { overflow-x: auto; }
.subs-items { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.subs-items thead th {
  text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); font-weight: 700; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--card-border); white-space: nowrap;
}
.subs-items td { padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
.subs-item-row.subs-item-accepted { background: rgba(74,222,128,0.06); }
.subs-item-row.subs-item-rejected { opacity: 0.5; }
.subs-it-thumb { width: 56px; }
.subs-it-thumb img { width: 48px; height: 67px; object-fit: cover; border-radius: 5px; }
.subs-noimg { display: inline-block; width: 48px; height: 67px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--card-border); }

/* New-submissions bell on the admin nav */
.nav-bell {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 7px;
  color: var(--red); vertical-align: middle;
  transform-origin: top center;
  animation: nav-bell-ring 1.4s ease-in-out infinite;
}
.nav-bell svg { width: 17px; height: 17px; filter: drop-shadow(0 0 5px var(--red)); }
.nav-bell-count {
  background: var(--red); color: #fff; font-size: 0.66rem; font-weight: 800;
  min-width: 17px; height: 17px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 0 8px var(--red); animation: nav-bell-pulse 1.4s ease-in-out infinite;
}
@keyframes nav-bell-ring {
  0%, 55%, 100% { transform: rotate(0); }
  62% { transform: rotate(14deg); }
  72% { transform: rotate(-12deg); }
  82% { transform: rotate(7deg); }
  90% { transform: rotate(-3deg); }
}
@keyframes nav-bell-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-bell, .nav-bell-count { animation: none; }
}
.subs-type { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; }
.subs-type-raw { background: rgba(59,130,246,0.16); color: #60a5fa; }
.subs-type-graded { background: rgba(232,100,10,0.16); color: var(--red); }
.subs-type-sealed { background: rgba(74,222,128,0.16); color: #4ade80; }
.subs-type-other { background: rgba(168,85,247,0.16); color: #c084fc; }
.subs-it-name { font-weight: 600; min-width: 140px; }
.subs-num { color: var(--text-muted); font-weight: 500; }
.subs-it-set { font-size: 0.74rem; color: var(--text-muted); font-weight: 400; }
.subs-it-det { color: var(--text-dim); white-space: nowrap; }
.subs-it-qty { text-align: center; }
.subs-price, .subs-pctovr {
  width: 72px; background: var(--bg2); border: 1px solid var(--card-border); color: var(--text);
  border-radius: 6px; padding: 0.35rem 0.4rem; font-family: inherit; font-size: 0.82rem;
}
.subs-pctovr { width: 56px; }
.subs-it-offer { font-weight: 700; color: #4ade80; white-space: nowrap; text-align: right; }
.subs-it-ebay a { display: inline-flex; opacity: 0.85; }
.subs-it-ebay a:hover { opacity: 1; }
.subs-it-decide { white-space: nowrap; }
.subs-dec {
  width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--card-border);
  background: var(--bg2); cursor: pointer; font-size: 0.95rem; line-height: 1; margin: 0 1px; color: var(--text-muted);
}
.subs-dec-accept.on { background: #4ade80; border-color: #4ade80; color: #06270f; }
.subs-dec-reject.on { background: var(--red); border-color: var(--red); color: #fff; }

.subs-detail-foot { display: flex; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--card-border); }
.subs-notes { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 280px; }
.subs-notes label { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.subs-notes textarea { background: var(--bg2); border: 1px solid var(--card-border); color: var(--text); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; font-family: inherit; font-size: 0.85rem; resize: vertical; }
.subs-notes button { align-self: flex-start; }
.subs-foot-right { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; flex: 1 1 320px; }
.subs-total { font-size: 0.95rem; color: var(--text-dim); text-align: right; }
.subs-total strong { color: #4ade80; font-size: 1.15rem; margin-left: 0.4rem; }
.subs-foot-actions { display: flex; gap: 0.6rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }

/* Buylist offer/payout stage statuses */
.subs-badge-offered { background: rgba(59,130,246,0.18); color: #60a5fa; }
.subs-badge-received { background: rgba(212,144,10,0.20); color: #e0a82e; }
.subs-badge-paid { background: rgba(74,222,128,0.22); color: #4ade80; }
.subs-badge-completed { background: rgba(148,148,148,0.18); color: var(--text-dim); }
.subs-badge-declined { background: rgba(229,72,77,0.16); color: #f4787c; }
.subs-badge-cancelled { background: rgba(148,148,148,0.18); color: var(--text-muted); }
.subs-credit { color: #4ade80; font-weight: 700; }

.subs-stage-note { text-align: left; font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; }
.subs-stage-note strong { color: var(--text); }
.subs-stage-ok strong { color: #4ade80; }
.subs-payout { display: inline; }
.subs-link-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.subs-link-row input { flex: 1; min-width: 0; background: var(--bg2); border: 1px solid var(--card-border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; font-family: inherit; font-size: 0.76rem; }

@media (max-width: 860px) {
  .subs-layout { grid-template-columns: 1fr; }
  .subs-list-pane { position: static; }
}

/* ── Buylist offer page (offer.html) ───────────────────────────── */
.offer-page { max-width: 720px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.offer-loading { text-align: center; color: var(--text-muted); padding: 4rem 1rem; }
.offer-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 2rem 1.75rem; }
.offer-head { margin-bottom: 1.25rem; }
.offer-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; color: var(--red); margin: 0 0 0.5rem; }
.offer-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 0.6rem; line-height: 1.2; }
.offer-sub { color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.offer-items { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.5rem 0; }
.offer-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.8rem; background: var(--bg2); border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.offer-thumb { width: 44px; flex-shrink: 0; }
.offer-thumb img { width: 44px; height: 61px; object-fit: cover; border-radius: 5px; }
.offer-thumb-ph { display: flex; align-items: center; justify-content: center; width: 44px; height: 61px; border-radius: 5px; background: var(--bg3); color: var(--text-muted); font-weight: 800; }
.offer-item-main { flex: 1; min-width: 0; }
.offer-item-name { font-weight: 700; font-size: 0.95rem; }
.offer-qty { color: var(--text-muted); font-weight: 600; }
.offer-item-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.offer-item-price { font-weight: 800; color: #4ade80; white-space: nowrap; }
.offer-total-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0.2rem; border-top: 2px solid var(--card-border); font-size: 1.05rem; color: var(--text-dim); }
.offer-total-row strong { font-size: 1.6rem; font-weight: 800; color: #4ade80; }
.offer-section-h { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.8rem; }
.offer-payout { margin: 1rem 0; }
.offer-radio { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border: 1px solid var(--card-border); border-radius: var(--radius-sm); margin-bottom: 0.6rem; cursor: pointer; transition: border-color 0.15s; }
.offer-radio:hover { border-color: var(--red); }
.offer-radio input { accent-color: var(--red); width: 18px; height: 18px; flex-shrink: 0; }
.offer-paypal-wrap { margin: -0.2rem 0 0.6rem 2.4rem; }
.offer-amt { color: #4ade80; }
.offer-bonus-badge { display: inline-block; background: rgba(74,222,128,0.18); color: #4ade80; font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin: 0 0.15rem; vertical-align: middle; }
.offer-input { width: 100%; background: var(--bg2); border: 1px solid var(--card-border); color: var(--text); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; font-family: inherit; font-size: 0.9rem; }
.offer-err { color: #f4787c; font-size: 0.85rem; margin: 0.5rem 0; }
.offer-actions { display: flex; gap: 0.8rem; margin-top: 1.5rem; }
.offer-actions .offer-accept { flex: 1; }
.offer-fineprint { font-size: 0.74rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.5; }
.offer-result { text-align: center; padding: 2.5rem 1.75rem; }
.offer-result-icon { font-size: 2.2rem; width: 72px; height: 72px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--bg2); color: var(--text-dim); }
.offer-result-icon.offer-ok { background: rgba(74,222,128,0.16); color: #4ade80; }
.offer-result .offer-sub { max-width: 460px; margin: 0 auto 1.5rem; }
.offer-ship { text-align: left; background: var(--bg2); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; margin: 1.5rem 0; }
.offer-address { font-family: inherit; font-size: 0.95rem; white-space: pre-wrap; margin: 0.5rem 0; color: var(--text); }

/* Consignment reference + packing instructions on the accepted screen */
.offer-ref {
  background: var(--red-glow); border: 1px dashed var(--red); border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem; margin: 1.5rem 0; text-align: center;
}
.offer-ref-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 700; margin-bottom: 0.4rem; }
.offer-ref-code { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: 0.1em; color: var(--red); }
.offer-ref-note { display: block; font-size: 0.76rem; color: var(--text-muted); margin-top: 0.5rem; }
.offer-instructions { text-align: left; margin: 1.5rem 0; }
.offer-checklist { margin: 0 0 0.8rem; padding-left: 1.25rem; color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }
.offer-checklist li { margin-bottom: 0.45rem; }
.offer-checklist strong { color: var(--text); }

@media (max-width: 560px) {
  .offer-card { padding: 1.5rem 1.1rem; }
  .offer-actions { flex-direction: column-reverse; }
}