/* ─────────────────────────────────────────────────────────────────────────
   The Arsenal Zone — design tokens
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --navy-900: #0d1024;
  --navy-800: #161a36;
  --navy-700: #232853;
  --navy-600: #2e3469;
  --navy-500: #4753a8;

  --gold-600: #b8902c;
  --gold-500: #d4a93a;
  --gold-400: #e8c96f;
  --gold-300: #f0d995;
  --gold-100: #fdf4d8;

  --crimson-600: #8c2a2a;
  --crimson-500: #b03636;
  --crimson-100: #fde8e8;

  /* Neutrals (warm) */
  --cream-50:    #faf7f0;
  --cream-100:   #f5f0e6;
  --cream-200:   #ebe4d4;
  --paper:       #ffffff;
  --paper-tint:  #fdfbf5;

  --ink-900: #1a1a26;
  --ink-700: #3a3a4a;
  --ink-600: #3a3529;
  --ink-500: #6e6e80;
  --ink-400: #8d8d9e;
  --ink-300: #aeaebd;

  /* Indirection so the dark theme can retarget headings and links without
     fighting the navy palette, which stays put for the nav/footer chrome. */
  --heading:    var(--navy-900);
  --link:       var(--navy-600);
  --link-hover: var(--navy-700);

  --border:        #e8e1cf;
  --border-strong: #d4ccb6;
  --border-input:  #cfc6b0;

  /* Semantic */
  --success-bg:   #e3eedb;
  --success-text: #2d5a1f;
  --success-border:#bfd9af;

  --warning-bg:   #fbecc5;
  --warning-text: #6b4f0e;
  --warning-border:#e8d188;

  --danger-bg:    #fadcd9;
  --danger-text:  #721c24;
  --danger-border:#f0b8b8;

  --info-bg:      #dbe5f3;
  --info-text:    #1c3a6e;
  --info-border:  #b9c9e2;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 2px rgba(40, 30, 10, 0.05), 0 1px 1px rgba(40, 30, 10, 0.03);
  --shadow-md: 0 2px 6px rgba(40, 30, 10, 0.07), 0 4px 14px rgba(40, 30, 10, 0.05);
  --shadow-lg: 0 8px 24px rgba(40, 30, 10, 0.10), 0 4px 12px rgba(40, 30, 10, 0.06);
  --shadow-card-hover: 0 14px 32px rgba(40, 30, 10, 0.18), 0 6px 16px rgba(40, 30, 10, 0.10);

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Motion */
  --t-fast: 120ms ease-out;
  --t-base: 200ms ease-out;
  --t-slow: 300ms ease-out;
}

/* ─────────────────────────────────────────────────────────────────────────
   Reset + base
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(232, 201, 111, 0.10), transparent 70%),
    var(--cream-50);
  color: var(--ink-900);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--heading);
}

a { color: var(--link); transition: color var(--t-fast); }
a:hover { color: var(--link-hover); }

button { font-family: inherit; }

::selection { background: var(--gold-300); color: var(--navy-900); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Navigation
   ───────────────────────────────────────────────────────────────────────── */
.nav, .admin-nav {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.9rem 1.5rem;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(212, 169, 58, 0.30);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.nav-brand {
  display: inline-flex; align-items: center; gap: 0.35rem;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.2rem;
  padding: 0.15rem 0;
  flex: 0 0 auto;
}

/* Logo mark in place of the wordmark. Served from a 192px source so it stays
   crisp on retina without shipping the full-size hero file on every page. */
.nav-logo {
  display: block;
  width: 60px; height: 60px;
  border-radius: 8px;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.nav-brand:hover .nav-logo {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(212, 169, 58, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45);
}
/* The logo is taller than the wordmark it replaced, so the storefront nav gives
   back some vertical padding rather than growing the sticky bar. Scoped to .nav
   so the admin bar, which has no logo, keeps its original height. */
.nav { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.nav-brand .brand-mark {
  color: var(--gold-400);
  letter-spacing: 0.15em;
  position: relative;
}
.nav-brand .brand-mark::after {
  content: '◆';
  display: inline-block;
  margin: 0 0.3rem 0 0.45rem;
  font-size: 0.55em;
  color: var(--gold-500);
  vertical-align: middle;
  transform: translateY(-2px);
}
.nav-brand .brand-text { color: #fff; letter-spacing: 0.06em; font-weight: 600; }
.nav-brand:hover .brand-mark { color: var(--gold-300); }

.nav-links { display: flex; gap: 1rem; align-items: center; margin-left: auto; }


.nav a:not(.nav-brand), .admin-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.65rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav a:not(.nav-brand):hover, .admin-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.admin-nav a.active {
  color: var(--gold-400);
  background: rgba(212, 169, 58, 0.10);
}

.btn-link {
  background: none; border: none;
  color: rgba(255,255,255,0.72); cursor: pointer;
  font-size: 0.9rem; font-weight: 500;
  padding: 0.4rem 0.65rem; border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.btn-link:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Cart badge */
/* Sits last in the desktop flex row; `order` moves it up beside the logo on
   phones (see the mobile block), where it is a thumb-sized tap target. */
.cart-link {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem;
  order: 4; margin-left: 0.25rem;
}
.cart-icon { flex: 0 0 auto; }
.cart-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--gold-500); color: var(--navy-900);
  border-radius: 999px; font-size: 0.7rem; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.nav-brand { order: 1; }
.nav-search { order: 2; }
.nav-links  { order: 3; }

/* ─────────────────────────────────────────────────────────────────────────
   Main layout
   ───────────────────────────────────────────────────────────────────────── */
.store-main, .admin-main {
  max-width: 1200px;
  margin: 1.75rem auto 3rem;
  padding: 0 1.5rem;
}

.admin-main h1 { margin-bottom: 1.25rem; font-size: 1.6rem; }

h1 .count, .count {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem; font-weight: 400; color: var(--ink-500);
  letter-spacing: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Flash + alerts
   ───────────────────────────────────────────────────────────────────────── */
.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  background: var(--success-bg);
  color: var(--success-text);
  border: 1px solid var(--success-border);
  font-size: 0.9rem;
}
.flash a { color: var(--success-text); font-weight: 600; }

.error {
  color: var(--danger-text);
  margin-bottom: 1rem;
  font-size: 0.875rem;
  background: var(--danger-bg);
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--danger-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  line-height: 1.2;
}
.btn-primary {
  background: var(--navy-800);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover:not(:disabled) {
  background: var(--navy-700);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
  background: var(--paper);
  color: var(--ink-700);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--cream-100); border-color: var(--ink-400); }

/* ─────────────────────────────────────────────────────────────────────────
   Login
   ───────────────────────────────────────────────────────────────────────── */
.login-wrap {
  max-width: 380px;
  margin: 5rem auto;
  padding: 2.25rem 2rem;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  position: relative;
}
.login-wrap::before {
  content: '';
  position: absolute; top: 0; left: 1.5rem; right: 1.5rem;
  height: 3px; background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  border-radius: 999px;
}
.login-wrap h1 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.06em;
}
.login-wrap label {
  display: block; margin-bottom: 1.25rem;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-700);
}
.login-wrap input {
  display: block; width: 100%;
  padding: 0.65rem 0.85rem; margin-top: 0.4rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-size: 1rem;
  background: var(--paper-tint);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.login-wrap input:focus {
  outline: none;
  border-color: var(--gold-500);
  background: var(--paper);
}
.login-wrap button {
  width: 100%;
  padding: 0.75rem;
  background: var(--navy-800);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-top: 0.25rem;
  transition: background var(--t-fast);
}
.login-wrap button:hover { background: var(--navy-700); }

/* ─────────────────────────────────────────────────────────────────────────
   Tables (inventory + cart shared)
   ───────────────────────────────────────────────────────────────────────── */
.listings-table {
  width: 100%; border-collapse: collapse;
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
.listings-table th {
  padding: 0.75rem 0.9rem;
  text-align: left;
  background: var(--cream-100);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border-strong);
}
.listings-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}
.listings-table tr:last-child td { border-bottom: none; }
.listings-table tbody tr { transition: background var(--t-fast); }
.listings-table tbody tr:hover td { background: var(--cream-50); }

.edit-link {
  color: var(--navy-600);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.edit-link:hover { background: var(--info-bg); }

.thumb {
  width: 42px; height: 58px;
  object-fit: cover;
  border-radius: var(--r-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  background: var(--cream-200);
}
.thumb-cell { width: 54px; }

/* Mobile: horizontal scroll for tables */
.listings-table-wrap {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}
.listings-table-wrap .listings-table {
  border-radius: 0; border: none; box-shadow: none;
  min-width: 720px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Badges
   ───────────────────────────────────────────────────────────────────────── */
.condition-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.cond-nm { background: var(--success-bg); color: var(--success-text); border-color: var(--success-border); }
.cond-lp { background: var(--info-bg);    color: var(--info-text);    border-color: var(--info-border); }
.cond-mp { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-border); }
.cond-hp { background: var(--danger-bg);  color: var(--danger-text);  border-color: var(--danger-border); }

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-active { background: var(--success-bg); color: var(--success-text); }
.status-hidden { background: #e7e3d8;           color: #5d5946; }
.status-sold   { background: var(--danger-bg);  color: var(--danger-text); }

/* ─────────────────────────────────────────────────────────────────────────
   Filters bar (admin + store)
   ───────────────────────────────────────────────────────────────────────── */
.listings-filters {
  display: flex; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.filter-input,
.filter-select,
.filter-search {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-size: 0.9rem;
  background: var(--paper);
  transition: border-color var(--t-fast);
  font-family: inherit;
}
.filter-input  { flex: 1; max-width: 320px; min-width: 0; }
.filter-search { flex: 1; min-width: 0; }
.btn-clear-filters {
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn-clear-filters:hover {
  background: var(--crimson-100);
  color: var(--crimson-600);
  border-color: var(--crimson-500);
}
.filter-input:focus,
.filter-select:focus,
.filter-search:focus { outline: none; border-color: var(--gold-500); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-500);
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.empty-state p { margin-bottom: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Admin listing tool (search + detail panels)
   ───────────────────────────────────────────────────────────────────────── */
.list-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .list-layout { grid-template-columns: 1fr; }
}

.list-search-col, .list-detail-col {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}

.search-box { padding: 1rem; border-bottom: 1px solid var(--border); }
.search-box input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-size: 1rem;
  background: var(--paper-tint);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.search-box input:focus { outline: none; border-color: var(--gold-500); background: var(--paper); }
.search-hint {
  display: block; margin-top: 0.5rem;
  font-size: 0.8rem; color: var(--ink-400);
}

.search-results { max-height: 560px; overflow-y: auto; }
.search-loading, .search-empty, .search-error {
  padding: 1.25rem;
  font-size: 0.9rem;
  color: var(--ink-500);
  text-align: center;
}
.search-error { color: var(--danger-text); }
.search-loading::after {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 0.5rem;
  border: 2px solid var(--cream-200);
  border-top-color: var(--gold-500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.results-table { width: 100%; border-collapse: collapse; }
.results-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: var(--cream-100);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  z-index: 1;
}
.results-table td {
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.result-row { cursor: pointer; transition: background var(--t-fast); }
.result-row:hover td { background: var(--gold-100); }
.result-row.selected td { background: var(--gold-100); box-shadow: inset 3px 0 0 var(--gold-500); }
.result-row:focus { outline: none; }
.result-row:focus td { background: var(--gold-100); box-shadow: inset 3px 0 0 var(--gold-500); }

.price-col { text-align: right; font-size: 0.8rem; color: var(--ink-700); font-weight: 600; }

.thumb-placeholder {
  display: block; width: 28px; height: 40px;
  background: var(--cream-200);
  border-radius: var(--r-sm);
}

/* Detail panel */
.detail-placeholder {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--ink-400);
  font-size: 0.95rem;
}

.card-preview {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--paper-tint) 0%, var(--paper) 100%);
}
.card-img-large {
  width: 150px; border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.card-img-large:hover { transform: scale(1.04); }
.card-img-medium {
  width: 120px; border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.card-img-placeholder {
  width: 150px; height: 210px;
  background: var(--cream-200);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: var(--ink-400);
  flex-shrink: 0;
}
.card-preview-info h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.card-meta { font-size: 0.9rem; color: var(--ink-500); margin-top: 0.25rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Forms (listing + edit)
   ───────────────────────────────────────────────────────────────────────── */
.listing-form { padding: 1.5rem; }
.form-row { margin-bottom: 1.1rem; }
.form-row label {
  display: block;
  font-size: 0.875rem; font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--ink-700);
}
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--paper);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--gold-500);
}
.form-row input[type="number"] { max-width: 130px; }
.form-row small {
  display: block; margin-top: 0.3rem;
  font-size: 0.78rem; color: var(--ink-400);
}

.market-ref {
  font-size: 0.82rem; font-weight: 500; color: var(--ink-400);
  margin-left: 0.5rem;
}
.market-ref strong { color: var(--ink-700); font-weight: 600; }

.market-lookup {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; margin-top: 0.5rem;
}

.btn-tcgplayer {
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  background: var(--info-bg);
  color: var(--info-text);
  border: 1px solid var(--info-border);
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  transition: background var(--t-fast);
}
.btn-tcgplayer:hover { background: #c8d6ec; }

.btn-sync-price {
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  background: var(--warning-bg);
  color: var(--warning-text);
  border: 1px solid var(--warning-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  transition: background var(--t-fast);
}
.btn-sync-price:hover:not(:disabled) { background: #f6e3ad; }
.btn-sync-price:disabled { opacity: 0.6; cursor: default; }

.sync-status { font-size: 0.78rem; font-weight: 500; }
.sync-ok   { color: var(--success-text); }
.sync-warn { color: var(--warning-text); }
.sync-err  { color: var(--danger-text); }

.optional {
  font-weight: 400;
  color: var(--ink-400);
  font-size: 0.8rem;
}

.price-input-wrap {
  display: flex; align-items: center;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 200px;
  transition: border-color var(--t-fast);
}
.price-input-wrap:focus-within { border-color: var(--gold-500); }
.price-prefix {
  padding: 0.6rem 0.7rem;
  background: var(--cream-100);
  border-right: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--ink-500);
  font-weight: 600;
}
.price-input-wrap input {
  border: none !important;
  border-radius: 0 !important;
  outline: none;
  flex: 1;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  background: var(--paper) !important;
}

.form-actions {
  display: flex; gap: 0.75rem; align-items: center;
  padding-top: 0.5rem; flex-wrap: wrap;
}

/* Edit layout */
.edit-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  max-width: 760px;
}
@media (max-width: 640px) {
  .edit-layout { grid-template-columns: 1fr; padding: 1.25rem; }
}
.edit-preview h2 { font-size: 1.1rem; margin: 0.6rem 0 0.3rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Store header + filter bar
   ───────────────────────────────────────────────────────────────────────── */
.store-header {
  display: flex; align-items: baseline;
  gap: 0.85rem; margin-bottom: 1rem;
  flex-wrap: wrap;
}
.store-header h1 { margin: 0; font-size: 1.75rem; letter-spacing: 0.04em; }

.store-filters {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.store-filters .filter-search,
.store-filters .filter-select { width: 100%; }

.filter-price-wrap {
  display: flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
  transition: border-color var(--t-fast);
}
.filter-price-wrap:focus-within { border-color: var(--gold-500); }
.filter-price-wrap .price-prefix {
  padding: 0.45rem 0.5rem;
  background: var(--cream-100);
  border-right: 1px solid var(--border);
  font-size: 0.85rem;
}
.filter-price-input {
  width: 60px;
  padding: 0.45rem 0.4rem;
  border: none;
  outline: none;
  font-size: 0.9rem;
  text-align: right;
  background: transparent;
}
.filter-price-sep { color: var(--ink-400); font-size: 0.85rem; padding: 0 0.15rem; }

@media (max-width: 900px) {
  .store-filters { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .store-filters { grid-template-columns: 1fr; }
}

/* Loading indicator */
.search-loading {
  text-align: center;
  color: var(--ink-500);
  padding: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Store grid (image-forward FAB cards)
   ───────────────────────────────────────────────────────────────────────── */
.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.store-card {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.store-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--gold-300);
}

.store-card-img {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(232, 201, 111, 0.15), transparent 70%),
    var(--cream-100);
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 5 / 7;
  overflow: hidden;
}
.store-card-img img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0.6rem;
  transition: transform var(--t-slow);
}
.store-card:hover .store-card-img img { transform: scale(1.05); }
.store-card-img-placeholder {
  color: var(--ink-400);
  font-size: 0.8rem;
  padding: 2rem;
  text-align: center;
}

.store-card-body {
  padding: 0.9rem 1rem 1rem;
  display: flex; flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.store-card-name {
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--ink-900);
}
.store-card-meta {
  font-size: 0.78rem;
  color: var(--ink-500);
  line-height: 1.5;
}
.store-card-footer {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.4rem;
}
.store-card-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-900);
  margin-left: auto;
  letter-spacing: 0.01em;
}
.store-card-qty {
  font-size: 0.72rem;
  color: var(--ink-400);
  margin: 0;
}

.btn-add-cart {
  margin-top: 0.6rem;
  width: 100%;
  font-size: 0.88rem;
  padding: 0.55rem;
  letter-spacing: 0.04em;
}
.btn-add-cart.btn-added {
  background: var(--success-text);
  color: #fff;
}
.btn-add-cart.btn-added:hover { background: #20471a; }

.store-empty {
  grid-column: 1/-1;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--ink-500);
  font-size: 0.95rem;
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

/* Load more */
.load-more-wrap { text-align: center; margin: 2.5rem 0 1rem; }
.load-more-wrap .btn-secondary { min-width: 180px; padding: 0.7rem 1.5rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Cart page
   ───────────────────────────────────────────────────────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.75rem;
  align-items: start;
  margin-top: 1rem;
}
@media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-items-col .listings-table {
  /* Reuse styles, but tables on cart can scroll on mobile */
}
/* Same min-width:0 fix as .account-orders — belt and braces here, since the
   table itself already drops its min-width below 720px (see the mobile block
   further down), but a grid item defaults to shrink-resistant regardless of
   what its content does. */
.cart-items-col { min-width: 0; }

.cart-row-unavailable td { opacity: 0.55; }

.cart-summary-col { position: sticky; top: 5rem; min-width: 0; }

.cart-summary {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  padding: 1.5rem;
  position: relative;
}
.cart-summary::before {
  content: '';
  position: absolute; top: 0; left: 1rem; right: 1rem; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  border-radius: 999px;
}
.cart-summary h2 {
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.04em;
}
.summary-row {
  display: flex; justify-content: space-between;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
  color: var(--ink-700);
}
.summary-row strong { color: var(--ink-900); }
.summary-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.85rem 0;
}
.summary-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-900);
}
.summary-total strong { color: var(--navy-900); }

.cart-error {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--danger-text);
  background: var(--danger-bg);
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-md);
  border: 1px solid var(--danger-border);
}
.text-danger { color: var(--crimson-500); font-size: 0.85rem; font-weight: 500; }

#paypal-button-container { margin-top: 1.25rem; }

.btn-remove {
  background: none;
  /* A visible resting border: as a transparent-bordered text fragment this did
     not read as a button at all, particularly on mobile. */
  border: 1px solid var(--border-strong);
  color: var(--ink-500);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.btn-remove:hover {
  color: var(--crimson-500);
  background: var(--crimson-100);
  border-color: var(--danger-border);
}

/* ─────────────────────────────────────────────────────────────────────────
   Order confirmation
   ───────────────────────────────────────────────────────────────────────── */
.confirmation-box {
  max-width: 500px;
  margin: 5rem auto 3rem;
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  padding: 3rem 2.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.confirmation-box::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--gold-500));
}
.confirmation-icon {
  width: 72px; height: 72px;
  background: var(--success-bg);
  color: var(--success-text);
  border: 2px solid var(--success-border);
  border-radius: 50%;
  font-size: 2.25rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 12px rgba(45, 90, 31, 0.15);
}
.confirmation-box h1 {
  font-size: 1.7rem;
  margin-bottom: 0.85rem;
  letter-spacing: 0.04em;
}
.confirmation-box p {
  color: var(--ink-500);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.order-ref {
  font-size: 0.95rem;
  color: var(--ink-500);
  margin: 1.25rem 0 1.75rem;
  padding: 0.6rem 1rem;
  background: var(--cream-100);
  border-radius: var(--r-md);
  display: inline-block;
}
.order-ref strong { color: var(--navy-900); font-family: 'Cinzel', serif; letter-spacing: 0.05em; }

/* ─────────────────────────────────────────────────────────────────────────
   Store card link wrappers + low-stock badge
   ───────────────────────────────────────────────────────────────────────── */
.store-card-img-link, .store-card-name-link {
  text-decoration: none; color: inherit;
}
.store-card-img-link { display: block; position: relative; }

.store-card-badge {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: var(--crimson-500); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
  text-transform: uppercase;
}
.badge-stock-low { background: var(--crimson-500); }

.stock-low {
  font-size: 0.78rem;
  color: var(--crimson-500);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Card detail page
   ───────────────────────────────────────────────────────────────────────── */
.card-detail-breadcrumb {
  margin-bottom: 1rem;
}
.card-detail-breadcrumb a {
  font-size: 0.9rem;
  color: var(--ink-500);
  text-decoration: none;
}
.card-detail-breadcrumb a:hover { color: var(--navy-700); }

.card-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 760px) {
  .card-detail-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Sticky only while the two-column grid is in play. Below 760px the layout
   collapses to a single column, where a sticky image pins itself under the nav
   and covers the listings the buyer is scrolling to. */
.card-detail-image { position: static; }
@media (min-width: 761px) {
  .card-detail-image { position: sticky; top: 5rem; }
}
.card-detail-image img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(40, 30, 10, 0.20), 0 6px 12px rgba(40, 30, 10, 0.12);
  background: var(--cream-100);
}
/* Card art is portrait (~546x762, 1.40:1). At width:100% in the collapsed
   single-column layout that renders ~523px tall on a 375px screen — about 79%
   of the viewport — so the price and Add to cart sit below the fold and the
   buyer has to scroll past a full screen of image to reach them. Cap the
   height and let width follow the aspect ratio. */
@media (max-width: 760px) {
  .card-detail-image img {
    width: auto;
    max-width: 100%;
    max-height: 50vh;
    margin-inline: auto;
    display: block;
  }
}

.card-detail-info {
  display: flex; flex-direction: column; gap: 1rem;
}
.card-detail-name {
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  margin: 0;
}
.card-detail-h2 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  margin: 1rem 0 0.5rem;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
}

.card-detail-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.meta-tag {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  background: var(--cream-100);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink-700);
}
.meta-tag strong { color: var(--navy-900); font-weight: 600; }
.meta-pitch-1 { background: #fef3d3; border-color: #f0d995; }
.meta-pitch-2 { background: #d8e3f3; border-color: #b9c9e2; }
.meta-pitch-3 { background: var(--danger-bg); border-color: var(--danger-border); }

.functional-text {
  background: var(--paper-tint);
  border-left: 3px solid var(--gold-500);
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink-700);
  white-space: pre-line;
  font-family: Georgia, 'Iowan Old Style', serif;
}

.card-detail-printing {
  font-size: 0.88rem;
  color: var(--ink-500);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}
.card-detail-printing strong { color: var(--navy-900); }

.card-listings {
  display: flex; flex-direction: column; gap: 0.6rem;
}
.card-listing-row {
  display: grid;
  grid-template-columns: 50px 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card-listing-row:hover { border-color: var(--gold-300); box-shadow: var(--shadow-sm); }
.cl-thumb img { width: 50px; height: 70px; object-fit: cover; border-radius: var(--r-sm); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.cl-info { min-width: 0; }
.cl-printing { font-size: 0.9rem; margin: 0; }
.cl-condition {}
.cl-price { font-size: 1.1rem; font-weight: 700; color: var(--navy-900); }
.cl-action { min-width: 130px; }
.cl-action .btn-add-cart { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.85rem; margin: 0; }

@media (max-width: 640px) {
  .card-listing-row {
    grid-template-columns: 50px 1fr;
    grid-template-areas:
      "thumb info"
      "cond  price"
      "act   act";
    gap: 0.6rem;
  }
  .cl-thumb { grid-area: thumb; }
  .cl-info  { grid-area: info; }
  .cl-condition { grid-area: cond; }
  .cl-price { grid-area: price; text-align: right; }
  .cl-action { grid-area: act; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Admin order detail
   ───────────────────────────────────────────────────────────────────────── */
.admin-nav-user      { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.admin-nav-username  { font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.admin-nav-logout    { display: inline; }

.order-detail-header {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.order-detail-header h1 { margin: 0; }

.order-detail-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 880px) { .order-detail-grid { grid-template-columns: 1fr; } }

.order-main-col, .order-side-col {
  display: flex; flex-direction: column; gap: 1.25rem;
}

.panel {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.4rem;
}
.panel-h {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-500);
  margin: 0 0 0.85rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.panel p { font-size: 0.9rem; margin-bottom: 0.3rem; }
.panel .card-meta { margin-top: 0.1rem; }

.panel-table {
  margin: -0.25rem -0.4rem 0;
  width: calc(100% + 0.8rem);
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.panel-table th { background: transparent; padding-top: 0; padding-bottom: 0.5rem; }
.panel-table tfoot td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--border-strong); }

.ship-addr {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-700);
}
.mono-text {
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 0.78rem;
  color: var(--ink-700);
  word-break: break-all;
}

.ship-form textarea, .panel textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.ship-form textarea:focus, .panel textarea:focus {
  outline: none; border-color: var(--gold-500);
}

/* ─────────────────────────────────────────────────────────────────────────
   Admin page header (heading + action buttons row)
   ───────────────────────────────────────────────────────────────────────── */
.admin-page-header {
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.admin-page-header h1 { margin: 0; }
.btn-sm {
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Info pages (about, shipping)
   ───────────────────────────────────────────────────────────────────────── */
.info-page { max-width: 760px; }
.info-page h1 {
  font-size: 1.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--gold-500);
  display: inline-block;
}
.info-content {
  background: var(--paper);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 2rem 2.25rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-700);
}
.info-content h2 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.75rem;
  color: var(--navy-900);
  letter-spacing: 0.03em;
}
.info-content h2:first-of-type { margin-top: 1.25rem; }
.info-content h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
  font-family: 'Cinzel', serif;
}
.info-content p { margin-bottom: 0.9rem; }
.info-content ul {
  margin: 0.5rem 0 1rem 1.5rem;
}
.info-content li { margin-bottom: 0.4rem; }
.info-content a { font-weight: 600; }

@media (max-width: 640px) {
  .info-content { padding: 1.25rem 1.25rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 4rem;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.75);
  padding: 2.5rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(212, 169, 58, 0.30);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
}
.footer-col p { margin-bottom: 0.4rem; font-size: 0.88rem; }
.footer-col a {
  display: block;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.2rem 0;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--gold-400); }

.footer-brand {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.footer-brand .brand-mark { color: var(--gold-400); letter-spacing: 0.15em; }
.footer-brand .brand-mark::after {
  content: '◆'; margin: 0 0.3rem 0 0.45rem;
  font-size: 0.55em; color: var(--gold-500);
  display: inline-block; transform: translateY(-2px);
}
.footer-brand .brand-text { color: #fff; letter-spacing: 0.06em; }
.footer-tagline { color: rgba(255,255,255,0.55); font-style: italic; }

.footer-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-400);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.footer-bottom {
  max-width: 1200px; margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Mobile refinements
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav, .admin-nav {
    padding: 0.45rem 0.85rem;
    gap: 0.4rem;
    flex-wrap: wrap;
  }
  .nav-brand { font-size: 1.05rem; }
  /* 60px is a lot of a phone's sticky header; step it down here only. */
  .nav-logo  { width: 48px; height: 48px; }

  /* Cart moves to the top-right corner, level with the logo, and drops its
     text label — an icon plus the count badge is a bigger, more obvious tap
     target than a word wrapped onto a third row. */
  .cart-link {
    order: 2;
    margin-left: auto;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
    border-radius: var(--r-md);
  }
  .cart-link:hover, .cart-link:focus-visible { background: rgba(255, 255, 255, 0.08); }
  .cart-link-text { display: none; }
  .cart-icon { width: 24px; height: 24px; }
  /* Search takes its own full-width row under logo + cart. */
  .nav-search { order: 3; flex: 1 1 100%; max-width: none; }
  .nav-links  { order: 4; }
  /* Sized to keep all five links on a single row down to a 360px viewport —
     a second wrapped row costs ~30px of a sticky header. Still wraps rather
     than overflowing if the text ever grows. */
  .nav-links { gap: 0.2rem; flex-wrap: wrap; justify-content: flex-end; }
  .nav a:not(.nav-brand), .admin-nav a {
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
  }
  .theme-toggle { width: 28px; height: 28px; }

  .store-main, .admin-main {
    padding: 0 1rem;
    margin-top: 1.25rem;
  }

  .store-header h1 { font-size: 1.4rem; }
  .admin-main h1 { font-size: 1.3rem; }

  .store-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .store-card-name { font-size: 0.85rem; }
  .store-card-meta { font-size: 0.72rem; }
  .store-card-price { font-size: 1rem; }
  .store-card-body { padding: 0.7rem 0.8rem 0.8rem; }
  .btn-add-cart { font-size: 0.8rem; padding: 0.5rem; }

  .login-wrap { margin: 2rem 1rem; padding: 1.75rem 1.5rem; }
  .confirmation-box { margin: 2rem 1rem; padding: 2.25rem 1.5rem 2rem; }

  .card-preview { padding: 1rem; gap: 1rem; }
  .card-img-large, .card-img-placeholder { width: 110px; }
  .card-img-placeholder { height: 154px; }
  .listing-form { padding: 1rem; }
}

@media (max-width: 380px) {
  .store-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Global nav search + autocomplete
   ───────────────────────────────────────────────────────────────────────── */
.nav-search { flex: 1 1 auto; max-width: 460px; position: relative; }
.nav-search-inner { position: relative; display: flex; align-items: center; }
.nav-search-input {
  width: 100%;
  padding: 0.5rem 2.4rem 0.5rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.10);
  color: #fff; font-size: 0.9rem; font-family: inherit;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.nav-search-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.nav-search-input:focus {
  outline: none; background: #fff; color: #23200f; border-color: var(--gold-400);
}
.nav-search-input:focus::placeholder { color: #9a927a; }
.nav-search-btn {
  position: absolute; right: 0; top: 0; height: 100%; width: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: rgba(255, 255, 255, 0.7); cursor: pointer;
}
.nav-search-btn:hover { color: var(--gold-300); }
.nav-search-input:focus ~ .nav-search-btn { color: var(--gold-600); }

.nav-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 0.35rem;
  background: var(--paper, #fff); color: #23200f;
  border: 1px solid var(--border, #e8e1cf); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); z-index: 200; max-height: 72vh; overflow-y: auto;
}
.nav-suggest-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.4rem 0.5rem; border-radius: var(--r-md); cursor: pointer;
}
.nav-suggest-item.active,
.nav-suggest-item:hover { background: var(--gold-100, #fdf4d8); }
.nav-suggest-thumb {
  flex: 0 0 auto; width: 32px; height: 45px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--navy-900, #1a1a2e);
  display: flex; align-items: center; justify-content: center;
}
.nav-suggest-thumb img { width: 100%; height: 100%; object-fit: contain; }
.nav-suggest-noimg {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, #ececec, #ececec 4px, #f7f7f7 4px, #f7f7f7 8px);
}
.nav-suggest-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nav-suggest-name { font-size: 0.88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-suggest-meta { font-size: 0.74rem; color: #8a8168; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-suggest-price { flex: 0 0 auto; font-size: 0.85rem; font-weight: 700; color: var(--success-text, #2d5a1f); }

@media (max-width: 720px) {
  .nav { flex-wrap: wrap; }
  .nav-search { order: 3; flex-basis: 100%; max-width: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Product page: cross-sell + recently viewed
   ───────────────────────────────────────────────────────────────────────── */
.product-section { margin-top: 2.5rem; }
.product-section-title {
  font-size: 1.15rem; font-weight: 700; margin-bottom: 1rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border, #e8e1cf);
}
.mini-card-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  gap: 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.6rem;
  scroll-snap-type: x proximity;
}
@media (min-width: 900px) {
  /* Wrap into a full grid on wide screens instead of scrolling. */
  .mini-card-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-columns: auto; overflow: visible; }
}
.mini-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--paper, #fff);
  border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--t-fast, .15s), box-shadow var(--t-fast, .15s), border-color var(--t-fast, .15s);
}
.mini-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover, 0 14px 32px rgba(40,30,10,.18));
  border-color: var(--gold-400, #e8c96f);
}
.mini-card-img {
  aspect-ratio: 223 / 311; background: var(--navy-900, #1a1a2e);
  display: flex; align-items: center; justify-content: center;
}
.mini-card-img img { width: 100%; height: 100%; object-fit: contain; }
.mini-card-noimg {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, #2a2a40, #2a2a40 6px, #23233a 6px, #23233a 12px);
}
.mini-card-body { padding: 0.5rem 0.6rem 0.65rem; display: flex; flex-direction: column; gap: 0.15rem; }
.mini-card-name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card-set { font-size: 0.72rem; color: #8a8168; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card-price { font-size: 0.82rem; font-weight: 700; color: var(--success-text, #2d5a1f); margin-top: 0.1rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Admin: TCGplayer CSV import
   ───────────────────────────────────────────────────────────────────────── */
.import-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .import-wrap { grid-template-columns: 1fr; } }
.import-form {
  background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px); padding: 1.5rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start;
}
.import-file-label { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; }
.import-file-title { font-weight: 600; font-size: 0.9rem; }
.import-form input[type="file"] { font-size: 0.9rem; }
.import-help {
  background: var(--paper-tint, #fdfbf5); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px); padding: 1.25rem 1.5rem; font-size: 0.9rem;
}
.import-help h2 { font-size: 1rem; margin-bottom: 0.6rem; }
.import-help ol { margin: 0 0 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.import-help-cols { font-size: 0.82rem; color: #6b6350; margin-top: 0.6rem; line-height: 1.5; }
.import-help code { background: #efe9d8; padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.8rem; }

.import-filename { color: #6b6350; font-size: 0.88rem; margin-bottom: 1rem; }
.import-filename code { background: #efe9d8; padding: 0.05rem 0.3rem; border-radius: 4px; }
.import-summary { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.import-summary .stat {
  background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-md, 8px); padding: 0.5rem 0.9rem; font-size: 0.85rem; color: #6b6350;
}
.import-summary .stat-num { font-size: 1.15rem; font-weight: 700; color: #23200f; margin-right: 0.3rem; }
.import-summary .stat-warn { background: var(--warning-bg, #fbecc5); border-color: var(--warning-border, #e8d188); color: var(--warning-text, #6b4f0e); }
.import-summary .stat-warn .stat-num { color: var(--warning-text, #6b4f0e); }

.import-confirm {
  background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; justify-content: space-between;
}
.import-mode { border: none; display: flex; gap: 1.25rem; align-items: center; font-size: 0.88rem; }
.import-mode legend { font-weight: 600; font-size: 0.82rem; color: #6b6350; margin-bottom: 0.35rem; }
.import-mode label { display: inline-flex; gap: 0.35rem; align-items: center; cursor: pointer; }
.import-actions { display: flex; gap: 0.75rem; align-items: center; }

.import-table td { vertical-align: middle; }
.tag-new    { background: var(--success-bg, #e3eedb); color: var(--success-text, #2d5a1f); font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px; }
.tag-update { background: var(--info-bg, #dbe5f3);   color: var(--info-text, #1c3a6e);   font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 999px; }
/* Price was blank/below minimum in the export and got floored on import. */
.tag-floor  { background: #f3e8d0; color: #6b4e12; font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 999px; vertical-align: middle; cursor: help; }

.import-issues { margin-top: 1.75rem; }
.import-issues h2 { font-size: 1rem; margin-bottom: 0.4rem; }
.import-issue-help { font-size: 0.84rem; color: #6b6350; margin-bottom: 0.6rem; }
.import-issue-list { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; max-height: 320px; overflow-y: auto; }
.import-issue-list .muted { color: #8a8168; }
.muted { color: #8a8168; }

/* ─────────────────────────────────────────────────────────────────────────
   Cart: shipping + free-shipping ticker
   ───────────────────────────────────────────────────────────────────────── */
.ship-free { color: var(--success-text, #2d5a1f); font-weight: 700; letter-spacing: 0.03em; }
.freeship-ticker {
  margin: 0.75rem 0; padding: 0.65rem 0.8rem;
  background: var(--gold-100, #fdf4d8); border: 1px solid var(--gold-300, #f0d995);
  border-radius: var(--r-md, 8px); font-size: 0.85rem; color: #6b4f0e;
}
.freeship-msg { margin: 0 0 0.5rem; }
.freeship-ticker strong { color: #5a3e00; }
.freeship-bar { height: 7px; background: #e7d9ac; border-radius: 999px; overflow: hidden; }
.freeship-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500, #d4a93a), var(--gold-400, #e8c96f)); transition: width 0.3s ease; }
.freeship-unlocked { background: var(--success-bg, #e3eedb); border-color: var(--success-border, #bfd9af); color: var(--success-text, #2d5a1f); text-align: center; }
.freeship-unlocked strong { color: var(--success-text, #2d5a1f); }

/* Discount code in cart */
.discount-box { margin: 0.85rem 0; }
.discount-input { display: flex; gap: 0.5rem; }
.discount-input input { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid var(--border-input, #cfc6b0); border-radius: var(--r-md, 8px); font-size: 0.9rem; text-transform: uppercase; }
.discount-input input:focus { outline: 2px solid var(--gold-400, #e8c96f); border-color: transparent; }
.discount-note { font-size: 0.8rem; color: var(--warning-text, #6b4f0e); margin-top: 0.4rem; }
.discount-error { font-size: 0.82rem; color: var(--danger-text, #721c24); margin-top: 0.4rem; }
.discount-applied { display: flex; align-items: center; justify-content: space-between; font-size: 0.88rem; padding: 0.5rem 0.7rem; background: var(--success-bg, #e3eedb); border: 1px solid var(--success-border, #bfd9af); border-radius: var(--r-md, 8px); color: var(--success-text, #2d5a1f); }
.summary-discount strong { color: var(--success-text, #2d5a1f); }

/* Admin discounts — and reused as-is by admin/sealed.ejs's form+list layout. */
.discount-admin { display: grid; grid-template-columns: 320px 1fr; gap: 1.75rem; align-items: start; }
@media (max-width: 820px) { .discount-admin { grid-template-columns: 1fr; } }
.discount-form { background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf); border-radius: var(--r-lg, 12px); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); }
.discount-form h2 { font-size: 1.05rem; margin-bottom: 1rem; }
/* Same min-width:0 fix as .account-orders above — the table inside would
   otherwise force this grid track past the viewport width. */
.discount-list-wrap { min-width: 0; }
.discount-list-wrap h2 { font-size: 1.05rem; margin-bottom: 0.85rem; }
.row-inactive { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────────────────
   Accounts, sealed product, bulk add
   ───────────────────────────────────────────────────────────────────────── */
.auth-wrap {
  max-width: 420px; margin: 0 auto;
  background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px); padding: 1.75rem; box-shadow: var(--shadow-sm);
}
.auth-wrap h1 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.auth-sub { color: #6b6350; font-size: 0.9rem; margin-bottom: 1.25rem; }
.auth-form .form-row { margin-bottom: 1rem; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"] {
  width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border-input, #cfc6b0);
  border-radius: var(--r-md, 8px); font-size: 0.95rem; font-family: inherit;
}
.auth-form input:focus { outline: 2px solid var(--gold-400, #e8c96f); border-color: transparent; }
.auth-guest { margin-top: 1.1rem; font-size: 0.85rem; color: #8a8168; text-align: center; }
.check-inline { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; cursor: pointer; }

.account-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.75rem; align-items: start; }
@media (max-width: 860px) { .account-layout { grid-template-columns: 1fr; } }
/* Grid items default to min-width:auto, so a wide table inside would otherwise
   force this whole column — and with it the page — wider than the viewport
   instead of scrolling inside its own .listings-table-wrap. This is what was
   making the whole account page render zoomed out on phones. */
.account-orders { min-width: 0; }
.account-orders h2, .account-settings h2 { font-size: 1.1rem; margin-bottom: 0.85rem; }
/* This table is only six narrow columns (#, date, count, price, status, a
   link) — nothing like the wide admin tables .listings-table-wrap's 720px
   min-width was written for. Forcing that width here meant, once the column
   itself was correctly allowed to shrink (min-width:0 above), the wrapper's
   own horizontal scrollbar clipped it to whatever fit — on a phone, roughly
   half the columns, with no visible cue that the rest was one swipe away.
   Letting it size to its own content instead means it just fits. */
.account-orders .listings-table-wrap .listings-table { min-width: 0; }
.account-settings {
  background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm);
}
.account-sub { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8a8168; margin: 1.25rem 0 0.6rem; }
.account-logout { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border, #e8e1cf); text-align: right; }

.sealed-buy {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem;
  background: var(--paper, #fff); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-lg, 12px);
}
.sealed-price { font-size: 1.8rem; font-weight: 700; color: var(--success-text, #2d5a1f); }

.bulk-picker { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.bulk-picker select { padding: 0.5rem 0.7rem; border: 1px solid var(--border-input, #cfc6b0); border-radius: var(--r-md, 8px); font-size: 0.9rem; min-width: 260px; }
.bulk-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--paper-tint, #fdfbf5); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-md, 8px); padding: 0.6rem 0.9rem; margin-bottom: 0.85rem; font-size: 0.88rem;
}
.bulk-actions { display: flex; gap: 0.6rem; align-items: center; }
.bulk-table td { vertical-align: middle; }
.bulk-qty, .bulk-price { width: 5.5rem; padding: 0.35rem 0.45rem; border: 1px solid var(--border-input, #cfc6b0); border-radius: var(--r-sm, 4px); font-size: 0.9rem; }
.bulk-cond { padding: 0.3rem 0.4rem; border: 1px solid var(--border-input, #cfc6b0); border-radius: var(--r-sm, 4px); font-size: 0.85rem; }
.bulk-market { white-space: nowrap; color: #6b6350; }
.bulk-pager-note { margin: -0.4rem 0 0.75rem; font-size: 0.82rem; }
.bulk-pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1.1rem 0 0.5rem; font-size: 0.88rem;
}
.bulk-pager .is-disabled { opacity: 0.45; pointer-events: none; }

/* Account security + destructive actions.
   Uses the semantic danger-* tokens so both themes stay legible. */
.btn-danger {
  background: #a12b2b; color: #fff; border: 1px solid #8a2222;
  border-radius: var(--r-sm, 4px); padding: 0.55rem 1rem;
  font-weight: 600; cursor: pointer;
}
.btn-danger:hover { background: #8a2222; }
.danger-zone {
  margin-top: 1.75rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--danger-border, #e0b4b4);
  border-radius: var(--r-md, 8px);
  background: var(--danger-bg, #fdf6f6);
}
.danger-zone > summary { cursor: pointer; font-weight: 600; color: var(--danger-text, #8a2222); }
.danger-zone > summary::marker { color: var(--danger-text, #8a2222); }
.danger-zone .form-hint { margin: 0.75rem 0; }
.admin-account-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem; align-items: start;
}
a.admin-nav-username { text-decoration: none; }
a.admin-nav-username:hover { text-decoration: underline; }

/* Contact details on the storefront */
.contact-email-block {
  font-size: 1.15rem; font-weight: 600;
  background: var(--paper-tint, #fdfbf5); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-md, 8px); padding: 0.85rem 1rem; margin: 1rem 0;
  text-align: center; word-break: break-word;
}
.info-links { margin-top: 2rem; font-size: 0.9rem; }
.footer-email { word-break: break-word; }
.error-contact { margin-top: 1.75rem; font-size: 0.9rem; color: var(--ink-500, #6b6350); }

/* Legal pages: long-form reading, so tighter measure and clearer hierarchy */
.info-content.legal { max-width: 68ch; }
.info-content.legal h2 {
  margin-top: 2.25rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border, #e8e1cf);
}
.info-content.legal h3 { margin-top: 1.4rem; font-size: 1rem; }
.info-content.legal li { margin-bottom: 0.45rem; }
.legal-meta { color: var(--ink-500, #6b6350); font-size: 0.88rem; margin-bottom: 1.5rem; }
.legal-address {
  font-style: normal; line-height: 1.7;
  background: var(--paper-tint, #fdfbf5); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-md, 8px); padding: 0.9rem 1rem; margin: 1rem 0;
}
.form-consent {
  margin-top: 1rem; font-size: 0.85rem; color: var(--ink-500, #6b6350); text-align: center;
}

.price-basis {
  display: inline-block; margin-left: 2px; cursor: help;
  color: var(--warning-text, #8a6d1a); font-weight: 700;
}

/* Marketing composer */
.marketing-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1rem; align-items: start;
}
@media (max-width: 900px) { .marketing-grid { grid-template-columns: 1fr; } }
.marketing-actions {
  display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap;
  padding: 0.75rem; border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-md, 8px); background: var(--paper-tint, #fdfbf5);
}
.marketing-actions .form-row { flex: 1 1 15rem; margin: 0; }
.marketing-sep { border: none; border-top: 1px solid var(--border, #e8e1cf); margin: 1.25rem 0; }
.campaign-body {
  white-space: pre-wrap; word-break: break-word; font-family: inherit;
  background: var(--paper-tint, #fdfbf5); border: 1px solid var(--border, #e8e1cf);
  border-radius: var(--r-md, 8px); padding: 0.9rem; margin: 0; line-height: 1.6;
}

/* Admin nav alert for unresolved orphaned captures */
.admin-nav-alert { color: #ffd9d9 !important; font-weight: 600; }
.admin-nav-count {
  display: inline-block; min-width: 1.3em; padding: 0 0.35em; margin-left: 0.2em;
  background: #a12b2b; color: #fff; border-radius: 999px;
  font-size: 0.78rem; text-align: center; line-height: 1.5;
}
.flash-warn {
  background: var(--danger-bg, #fbeaea);
  border-color: var(--danger-border, #d99);
  color: var(--danger-text, #7a1f1f);
}
.row-muted { opacity: 0.55; }
.resolve-form { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* Order status / refund panel */
.status-form .form-row-check { margin: 0.75rem 0; }
.status-form .form-row-check label { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.status-form .form-row-check label.is-disabled { opacity: 0.6; }
.status-form .form-row-check .form-hint { display: block; margin: 0.3rem 0 0 1.6rem; }

/* Error / not-found page */
.error-page { max-width: 520px; margin: 3rem auto; text-align: center; }
.error-status { font-size: 3.5rem; font-weight: 700; color: var(--gold-400, #e8c96f); line-height: 1; margin-bottom: 0.5rem; }
.error-page h1 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.error-message { color: #6b6350; margin-bottom: 1.5rem; }
.error-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.auth-forgot { margin-top: 0.85rem; font-size: 0.85rem; text-align: center; }

/* ═════════════════════════════════════════════════════════════════════════
   MOBILE EXPERIENCE
   Collapsible filters, stacked cart, comfortable touch targets.
   ═════════════════════════════════════════════════════════════════════════ */

/* The filter controls are grid children on desktop (display: contents keeps the
   existing .store-filters grid intact); on mobile they become a collapsible panel. */
.filter-controls { display: contents; }
.filters-toggle { display: none; }

@media (max-width: 760px) {
  .store-filters {
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    margin-bottom: 1rem;
  }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 44px; padding: 0 0.9rem;
    border: 1px solid var(--border-input, #cfc6b0);
    border-radius: var(--r-md, 8px);
    background: var(--paper, #fff); color: var(--ink-600, #3a3529);
    font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
  }
  .filters-toggle[aria-expanded="true"] {
    background: var(--navy-800, #1a1a2e); color: #fff; border-color: transparent;
  }
  .filters-badge {
    background: var(--gold-400, #e8c96f); color: #23200f;
    font-size: 0.72rem; font-weight: 700; min-width: 1.15rem; height: 1.15rem;
    padding: 0 0.3rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Collapsed by default; expands to a full-width stack. */
  .filter-controls { display: none; }
  .filter-controls.open {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr; gap: 0.5rem;
    padding-top: 0.6rem; margin-top: 0.15rem;
    border-top: 1px solid var(--border, #e8e1cf);
  }
  .filter-controls.open .filter-price-wrap,
  .filter-controls.open .btn-clear-filters { grid-column: 1 / -1; }

  /* 16px minimum prevents iOS Safari from auto-zooming on focus. */
  .filter-search, .filter-select, .filter-price-input,
  .nav-search-input, .discount-input input, .qty-input,
  .listing-form input, .listing-form select, .listing-form textarea,
  .discount-form input, .discount-form select { font-size: 16px; }

  /* Comfortable tap targets (Apple/Google guidance is ~44px). */
  .filter-select, .filter-search, .btn-clear-filters,
  .btn-primary, .btn-secondary, .btn-add-cart { min-height: 44px; }

  .store-main, .admin-main { padding: 0 1rem; margin-top: 1.25rem; }
  .store-header h1 { font-size: 1.4rem; }
}

/* Denser card grid on phones — two across reads better than one giant tile. */
@media (max-width: 620px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
  .store-card-body { padding: 0.6rem 0.65rem 0.7rem; }
  .store-card-name { font-size: 0.85rem; }
  .store-card-meta { font-size: 0.72rem; }
}
@media (max-width: 380px) {
  .store-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Cart: reflow the table into stacked cards instead of a 720px h-scroll. */
@media (max-width: 640px) {
  .cart-items-col .listings-table-wrap { overflow-x: visible; border: none; background: none; }
  .cart-items-col .listings-table { min-width: 0; width: 100%; }
  .cart-items-col .listings-table thead { display: none; }
  /* Condition (3) and quantity (4) each get their own area. They previously
     shared one — two grid items assigned the same area stack on top of each
     other, which is what made the badge and the count overlap in portrait. */
  .cart-items-col .listings-table tr {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "thumb card  remove"
      "thumb cond  cond"
      "thumb qty   price";
    gap: 0.4rem 0.7rem;
    align-items: center;
    background: var(--paper, #fff);
    border: 1px solid var(--border, #e8e1cf);
    border-radius: var(--r-lg, 12px);
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.7rem;
  }
  .cart-items-col .listings-table td { border: none; padding: 0; }
  .cart-items-col .listings-table td:nth-child(1) { grid-area: thumb; align-self: start; }
  .cart-items-col .listings-table td:nth-child(2) { grid-area: card; align-self: start; }
  .cart-items-col .listings-table td:nth-child(3) { grid-area: cond; }
  .cart-items-col .listings-table td:nth-child(4) { grid-area: qty; }
  .cart-items-col .listings-table td:nth-child(5) {
    grid-area: price; font-weight: 700; font-size: 1rem; text-align: right;
  }
  .cart-items-col .listings-table td:nth-child(6) { grid-area: remove; align-self: start; }
  .cart-items-col .thumb { width: 56px; height: auto; }
  .btn-remove { min-height: 36px; }

  /* Summary sits below the items and stays reachable. */
  .cart-summary { position: static; }
}

/* Product page: image first, buy box comfortable on phones. */
@media (max-width: 640px) {
  .card-detail-layout { gap: 1.25rem; }
  .card-detail-name { font-size: 1.35rem; }
  .card-listing-row { flex-wrap: wrap; gap: 0.5rem; }
  .card-listing-row .cl-action { margin-left: auto; }
  .mini-card-row { grid-auto-columns: minmax(130px, 1fr); }
}

/* Admin nav wraps rather than overflowing on small screens. */
@media (max-width: 760px) {
  .admin-nav { flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0.7rem 1rem; }
  .admin-nav-user { margin-left: auto; }
  .admin-main .listings-table-wrap { -webkit-overflow-scrolling: touch; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Admin: dashboard, orders workflow
   ───────────────────────────────────────────────────────────────────────── */
.dash-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem; margin: 1.25rem 0 0.5rem;
}
.dash-tile {
  background: #fffdf8; border: 1px solid var(--border, #e8e1cf); border-radius: 10px;
  padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.dash-tile-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .07em; color: #7a7360; font-weight: 600; }
.dash-tile-value { font-size: 1.55rem; font-weight: 700; color: #0d1024; line-height: 1.15; }
.dash-tile-sub   { font-size: 0.8rem; color: #6b6350; }
.delta-up   { color: #2d5a1f; font-weight: 600; }
.delta-down { color: #9a3412; font-weight: 600; }
.dash-footnote { font-size: 0.78rem; color: #8a8168; margin: 0 0 1.25rem; }

.dash-action { border-left: 3px solid var(--gold-500, #b8912f); }
.dash-action-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dash-clear { color: #2d5a1f; font-weight: 600; }

.age-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.4rem;
  border-radius: 999px; background: #eef1e9; color: #4a5a3f;
}
.age-badge.age-late { background: #f8e3d8; color: #9a3412; }
.row-needs-action td { background: #fffaf0; }

.dash-spark { width: 100%; height: 90px; display: block; }
.dash-spark-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: #8a8168; margin-top: 0.3rem; }

.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.dash-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; margin: 0 0 0.85rem; font-size: 0.9rem; }
.dash-dl dt { color: #6b6350; }
.dash-dl dd { margin: 0; font-weight: 600; text-align: right; }
.dash-dl.compact { margin-top: 0.5rem; margin-bottom: 0; font-size: 0.85rem; }
.dash-hint { font-size: 0.8rem; color: #8a6d1f; background: #fdf6e3; border: 1px solid #e8d9a8;
             padding: 0.35rem 0.55rem; border-radius: 6px; margin: 0 0 0.6rem; }
.panel-sub { font-size: 0.75rem; font-weight: 500; color: #8a8168; text-transform: none; letter-spacing: 0; }
.panel-head-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.orders-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.orders-summary { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.88rem; color: #55503f;
                  margin: 0.5rem 0 0.9rem; }
.orders-summary-action { color: #9a3412; }
.orders-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.orders-filters input[type="search"] { min-width: 220px; padding: 0.4rem 0.6rem;
  border: 1px solid #d4ccb6; border-radius: 6px; font-size: 0.9rem; }
.orders-filters select { padding: 0.4rem 0.6rem; border: 1px solid #d4ccb6; border-radius: 6px; font-size: 0.9rem; }

.order-totals { margin-top: 1rem; margin-left: auto; min-width: 260px; border-collapse: collapse; }
.order-totals td { padding: 0.25rem 0.6rem; font-size: 0.9rem; }
.order-totals td.num { text-align: right; }
.order-totals td.discount { color: #9a3412; }
.order-totals tr.grand td { border-top: 1.5px solid #1a1a26; font-weight: 700; font-size: 1rem; padding-top: 0.45rem; }

.order-history { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; }
.order-history li { display: flex; gap: 0.45rem; align-items: baseline; }
.form-hint { font-size: 0.82rem; color: #6b6350; margin: 0.4rem 0 0.7rem; }

@media (max-width: 860px) {
  .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-tile-value { font-size: 1.3rem; }
  .orders-filters input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .order-totals { min-width: 0; width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Landing page (GET /)
   Dark hero + closing band bookend the cream body, echoing the logo's
   steel-on-black palette; the pillars in between stay on the site's paper.
   ───────────────────────────────────────────────────────────────────────── */
.home { display: block; }

.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  border-bottom: 1px solid rgba(212, 169, 58, 0.30);
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(212, 169, 58, 0.16), transparent 68%),
    radial-gradient(760px 400px at 50% 112%, rgba(140, 42, 42, 0.30), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, #090b1a 52%, var(--navy-800) 100%);
}
/* Two columns on desktop — logo beside the copy rather than stacked above it,
   which is what kept the old hero so tall. Collapses to one centred column
   below 820px. */
.hero-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 2.75rem 1.5rem 3rem;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 2.75rem;
}

.hero-media { text-align: center; }

.hero-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}

.hero-wordmark {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 6.5vw, 2.9rem);
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.hero-wordmark .brand-mark { color: var(--gold-400); letter-spacing: 0.14em; }
.hero-wordmark .brand-mark::after {
  content: '◆';
  display: inline-block;
  margin: 0 0.25rem 0 0.4rem;
  font-size: 0.5em;
  color: var(--gold-500);
  transform: translateY(-0.25em);
}
.hero-wordmark .brand-text { color: #fff; letter-spacing: 0.06em; }

.hero-kicker {
  margin-top: 0.5rem;
  font-size: clamp(0.62rem, 2vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.hero-title {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-lead {
  margin-top: 0.7rem;
  max-width: 46ch;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 500;
  color: var(--gold-300);
}

.hero-copy {
  margin-top: 0.8rem;
  max-width: 60ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.74);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 0.85rem;
  margin-top: 1.6rem;
}

.btn-hero {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-600) 100%);
  color: var(--navy-900);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.btn-hero:hover {
  color: var(--navy-900);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.btn-hero:active { transform: translateY(0); }

.btn-hero-ghost {
  background: transparent;
  color: var(--gold-300);
  border-color: rgba(212, 169, 58, 0.55);
  box-shadow: none;
}
.btn-hero-ghost:hover {
  /* Literal: the hero is dark in both themes, and --gold-100 flips to a dark
     surface tint in the dark theme, which would black out this label on hover. */
  color: #fdf4d8;
  background: rgba(212, 169, 58, 0.12);
  border-color: var(--gold-400);
}

.hero-stat {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  padding-left: 0.35rem;
}
.hero-stat strong { color: var(--gold-400); font-weight: 700; }

/* ── Pillars ─────────────────────────────────────────────────────────── */
.pillars-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}

.pillar {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.3rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-500), var(--crimson-500));
  opacity: 0.75;
}
.pillar:hover {
  transform: translateY(-3px);
  border-color: var(--gold-300);
  box-shadow: var(--shadow-md);
}

.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.75rem;
  border-radius: var(--r-md);
  color: var(--gold-400);
  background: linear-gradient(180deg, var(--navy-800), var(--navy-900));
  box-shadow: inset 0 0 0 1px rgba(212, 169, 58, 0.25);
}

.pillar-title {
  font-size: 1.02rem;
  line-height: 1.35;
  margin-bottom: 0.5rem;
}
.pillar-copy { font-size: 0.9rem; color: var(--ink-700); }

/* ── Fresh arrivals strip ────────────────────────────────────────────── */
.home-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 2.25rem;
}
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.home-section-head h2 { font-size: 1.35rem; letter-spacing: 0.03em; }
.home-section-link { font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.home-section-link:hover { text-decoration: underline; }

/* ── Closing band ────────────────────────────────────────────────────── */
.closing {
  color: #fff;
  border-top: 1px solid rgba(212, 169, 58, 0.30);
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(140, 42, 42, 0.26), transparent 70%),
    linear-gradient(180deg, var(--navy-900) 0%, #090b1a 100%);
}
.closing-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 2.75rem;
  text-align: center;
}
.closing-rule {
  display: block;
  width: 140px;
  height: 1px;
  margin: 0 auto 1.15rem;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
}
.closing-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: #fff;
  margin-bottom: 0.75rem;
}
.closing-copy {
  margin: 0.4rem auto 0;
  max-width: 58ch;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.74);
}
.closing-copy-em {
  color: var(--gold-300);
  font-style: italic;
}
.closing-inner .btn-hero { margin-top: 1.5rem; }

/* Stack the hero once the two columns stop earning their keep. */
@media (max-width: 820px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    padding: 2.25rem 1.5rem 2.5rem;
  }
  .hero-logo   { max-width: 200px; }
  .hero-lead,
  .hero-copy   { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-stat   { flex-basis: 100%; padding-left: 0; }
}

@media (max-width: 640px) {
  .hero-inner   { padding: 2rem 1.25rem 2.25rem; }
  .hero-logo    { max-width: 160px; }
  .hero-actions { gap: 0.6rem; }
  .btn-hero     { padding: 0.75rem 1.35rem; font-size: 0.82rem; }
  .pillars-inner    { padding: 1.75rem 1rem 1.25rem; gap: 0.9rem; }
  .pillar           { padding: 1.15rem 1.1rem; }
  .home-section-inner { padding: 0.5rem 1rem 1.75rem; }
  .home-section-head h2 { font-size: 1.2rem; }
  .closing-inner    { padding: 2.25rem 1.25rem 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Theme toggle button
   Lives in the nav, which is dark navy under both themes — so it is styled
   once, light-on-navy, rather than per theme.
   ───────────────────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover {
  color: var(--gold-300);
  background: rgba(212, 169, 58, 0.14);
  border-color: rgba(212, 169, 58, 0.5);
}
.theme-icon { display: none; }
/* Show the theme you'd switch *to*, which is the usual convention. */
:root:not([data-theme="dark"]) .theme-icon-moon { display: block; }
:root[data-theme="dark"]       .theme-icon-sun  { display: block; }

/* ─────────────────────────────────────────────────────────────────────────
   Dark theme
   Surfaces, ink and semantic pairs are re-pointed at dark values; the navy /
   gold / crimson brand palette is left alone because the nav, footer, hero and
   closing band are already dark in both themes. The rules below the token block
   are the handful of components that hardcode a light colour instead of a token.
   ───────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --cream-50:    #0f1120;
  --cream-100:   #1a1d33;
  --cream-200:   #242844;
  --paper:       #161930;
  --paper-tint:  #1c2039;

  /* Ink */
  --ink-900: #eceaf4;
  --ink-700: #c5c2d4;
  --ink-600: #d5d2e0;
  --ink-500: #9b98ad;
  --ink-400: #817e94;
  --ink-300: #66647c;

  --border:        #2b2f4c;
  --border-strong: #3d4266;
  --border-input:  #3d4266;

  /* Gold-100 is used as a "highlighted row" surface, so it has to invert too. */
  --gold-100: #372c11;

  --heading:    var(--ink-900);
  --link:       var(--gold-300);
  --link-hover: var(--gold-400);

  /* Semantic pairs: dark fill, light text */
  --success-bg:   #16301c;  --success-text: #a5d98f;  --success-border: #2d5433;
  --warning-bg:   #342a0e;  --warning-text: #ecca74;  --warning-border: #59461a;
  --danger-bg:    #3a1b1e;  --danger-text:  #f2acac;  --danger-border: #5f2c30;
  --info-bg:      #17223c;  --info-text:    #aac6ec;  --info-border:   #2d3e62;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.50), 0 4px 14px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-card-hover: 0 14px 32px rgba(0, 0, 0, 0.60), 0 6px 16px rgba(0, 0, 0, 0.45);
}

/* Warm parchment glow → cool, so the page doesn't read as a muddy brown. */
:root[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(212, 169, 58, 0.07), transparent 70%),
    var(--cream-50);
}

/* ── Dark: text that hardcodes navy or a warm grey ──────────────────────── */
:root[data-theme="dark"] .info-page h1,
:root[data-theme="dark"] .info-content h2,
:root[data-theme="dark"] .store-card-price,
:root[data-theme="dark"] .summary-total,
:root[data-theme="dark"] .summary-total strong,
:root[data-theme="dark"] .order-ref strong,
:root[data-theme="dark"] .meta-tag strong,
:root[data-theme="dark"] .card-detail-printing strong,
:root[data-theme="dark"] .cl-price,
:root[data-theme="dark"] .nav-suggest,
:root[data-theme="dark"] .import-summary .stat-num,
:root[data-theme="dark"] .dash-tile-value { color: var(--ink-900); }

:root[data-theme="dark"] .edit-link { color: var(--gold-300); }
:root[data-theme="dark"] .card-detail-breadcrumb a:hover { color: var(--gold-400); }

:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .import-issue-list .muted,
:root[data-theme="dark"] .nav-suggest-meta,
:root[data-theme="dark"] .mini-card-set,
:root[data-theme="dark"] .import-help-cols,
:root[data-theme="dark"] .import-filename,
:root[data-theme="dark"] .import-summary .stat,
:root[data-theme="dark"] .import-mode legend,
:root[data-theme="dark"] .import-issue-help,
:root[data-theme="dark"] .auth-sub,
:root[data-theme="dark"] .auth-guest,
:root[data-theme="dark"] .account-sub,
:root[data-theme="dark"] .bulk-market,
:root[data-theme="dark"] .error-message,
:root[data-theme="dark"] .dash-tile-label,
:root[data-theme="dark"] .dash-tile-sub,
:root[data-theme="dark"] .dash-footnote,
:root[data-theme="dark"] .dash-dl dt,
:root[data-theme="dark"] .panel-sub,
:root[data-theme="dark"] .dash-spark-axis,
:root[data-theme="dark"] .form-hint,
:root[data-theme="dark"] .orders-summary { color: var(--ink-500); }

/* ── Dark: chips, badges and small light fills ──────────────────────────── */
:root[data-theme="dark"] .status-hidden { background: var(--cream-200); color: var(--ink-500); }
:root[data-theme="dark"] .btn-tcgplayer:hover  { background: var(--info-border); }
:root[data-theme="dark"] .btn-sync-price:hover:not(:disabled) { background: var(--warning-border); }
:root[data-theme="dark"] .meta-pitch-1 { background: #33290d; border-color: #59461a; }
:root[data-theme="dark"] .meta-pitch-2 { background: #17223c; border-color: #2d3e62; }
:root[data-theme="dark"] .tag-floor    { background: var(--warning-bg); color: var(--warning-text); }
:root[data-theme="dark"] .import-help code,
:root[data-theme="dark"] .import-filename code { background: var(--cream-200); color: var(--ink-700); }

:root[data-theme="dark"] .nav-suggest-noimg {
  background: repeating-linear-gradient(45deg, #23273f, #23273f 4px, #2b3049 4px, #2b3049 8px);
}

/* ── Dark: free-shipping ticker ─────────────────────────────────────────── */
:root[data-theme="dark"] .freeship-ticker { color: var(--warning-text); border-color: var(--warning-border); }
:root[data-theme="dark"] .freeship-ticker strong { color: var(--gold-300); }
:root[data-theme="dark"] .freeship-bar { background: #3a3220; }
:root[data-theme="dark"] .freeship-unlocked strong { color: var(--success-text); }


/* ── Dark: admin dashboard + orders ─────────────────────────────────────── */
:root[data-theme="dark"] .dash-tile { background: var(--paper); }
:root[data-theme="dark"] .delta-up,
:root[data-theme="dark"] .dash-clear { color: var(--success-text); }
:root[data-theme="dark"] .delta-down,
:root[data-theme="dark"] .orders-summary-action,
:root[data-theme="dark"] .order-totals td.discount { color: var(--danger-text); }
:root[data-theme="dark"] .age-badge { background: var(--cream-200); color: var(--ink-700); }
:root[data-theme="dark"] .age-badge.age-late { background: var(--danger-bg); color: var(--danger-text); }
:root[data-theme="dark"] .row-needs-action td { background: #2a2312; }
:root[data-theme="dark"] .dash-hint {
  background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text);
}
:root[data-theme="dark"] .orders-filters input[type="search"],
:root[data-theme="dark"] .orders-filters select {
  background: var(--paper); color: var(--ink-900); border-color: var(--border-input);
}
:root[data-theme="dark"] .order-totals tr.grand td { border-top-color: var(--border-strong); }

/* ── Dark: form controls ────────────────────────────────────────────────── */
/* type="search" is deliberately absent: the only two live on the navy nav bar
   and in the admin order filter, both of which are styled explicitly. */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--border-input);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--ink-400); }

/* Navy-800 all but disappears against a near-black page; lift the filled
   buttons a step so they still read as the primary action. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .login-wrap button { background: var(--navy-600); }
:root[data-theme="dark"] .btn-primary:hover:not(:disabled),
:root[data-theme="dark"] .login-wrap button:hover { background: var(--navy-500); }

/* ─────────────────────────────────────────────────────────────────────────
   Google Sign-In button
   Colours come from Google's sign-in branding guidelines rather than the site
   palette — the whole point of the button is that it looks the same everywhere.
   Google publishes a dark variant, so this one component themes itself properly.
   ───────────────────────────────────────────────────────────────────────── */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 42px;
  padding: 0.6rem 0.9rem;
  border: 1px solid #747775;
  border-radius: var(--r-md);
  background: #ffffff;
  color: #1f1f1f;
  font-size: 0.925rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.btn-google:hover        { background: #f7f8f8; box-shadow: var(--shadow-sm); text-decoration: none; }
.btn-google:active       { background: #eff0f0; }
.btn-google:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.btn-google-mark { flex: 0 0 auto; }

:root[data-theme="dark"] .btn-google {
  background: #131314;
  border-color: #8e918f;
  color: #e3e3e3;
}
:root[data-theme="dark"] .btn-google:hover  { background: #1d1d1f; }
:root[data-theme="dark"] .btn-google:active { background: #262628; }

/* "or" rule between the Google button and the email/password form. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
  color: var(--ink-400);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ─────────────────────────────────────────────────────────────────────────
   Checkout contact email (cart summary)
   ───────────────────────────────────────────────────────────────────────── */
.checkout-email { margin-top: 1.25rem; }
.checkout-email label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
}
.checkout-email input[type="email"] {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font-size: 0.95rem;
}
.checkout-email input[type="email"]:focus {
  outline: 2px solid var(--gold-400);
  border-color: transparent;
}
.checkout-email select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font-size: 0.95rem;
  font-family: inherit;
}
.checkout-email select:focus {
  outline: 2px solid var(--gold-400);
  border-color: transparent;
}
.checkout-email-fixed {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper-tint);
  color: var(--ink-900);
  font-size: 0.925rem;
  word-break: break-all;
}
.checkout-email-note  { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--ink-500); }
.checkout-email-error { margin: 0.4rem 0 0; font-size: 0.8rem; color: var(--danger-text); }

/* ─────────────────────────────────────────────────────────────────────────
   PayPal button panel

   PayPal renders each funding source in its own iframe and offers no dark
   variant — the buttons and the sheet they sit on are always light, and nothing
   this stylesheet does can reach inside a cross-origin frame. Rather than leave
   a raw white slab bleeding into a dark summary card, the buttons get a
   deliberate light "payment sheet": padded, rounded and framed, so the light
   area reads as a designed surface. The buttons themselves are left untouched,
   which PayPal's branding terms require anyway.

   In light mode the panel is invisible — the sheet already matches the card.
   ───────────────────────────────────────────────────────────────────────── */
.paypal-panel {
  margin-top: 1.25rem;
  border-radius: var(--r-lg);
  transition: opacity var(--t-fast);
}
.paypal-panel-locked {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.paypal-gate-hint {
  display: none;
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-500);
  text-align: center;
}
.paypal-panel-locked + .paypal-gate-hint { display: block; }

:root[data-theme="dark"] .paypal-panel {
  background: #ffffff;
  padding: 0.7rem 0.7rem 0.5rem;
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
/* Locked, on a white sheet, plain opacity would wash out to near-invisible. */
:root[data-theme="dark"] .paypal-panel-locked { opacity: 0.55; }

/* ─────────────────────────────────────────────────────────────────────────
   Order confirmation: ship-to echo
   ───────────────────────────────────────────────────────────────────────── */
.confirm-ship {
  margin: 1.5rem auto 0;
  max-width: 22rem;
  padding: 1rem 1.25rem;
  text-align: left;
  background: var(--paper-tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--r-md);
}
.confirm-ship-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-500);
  margin-bottom: 0.4rem;
}
.confirm-ship .ship-addr { color: var(--ink-900); }
/* One purchased line on the order confirmation. The name block wraps over two
   or three lines, so the price has to align to the top rather than stretch. */
.confirm-item {
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.confirm-item:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.confirm-item strong { white-space: nowrap; }
.confirm-item .card-meta { font-weight: 400; }
.confirm-ship-note {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-500);
}

/* ─────────────────────────────────────────────────────────────────────────
   Admin: Analytics — revenue-by-state bars
   Same "flat CSS bar" idea as the dashboard's sparkline neighbor: width is
   value/max as a percentage, no charting library.
   ───────────────────────────────────────────────────────────────────────── */
.state-bar-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.state-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
}
.state-bar-label { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.state-bar-track { height: 10px; background: var(--cream-100); border-radius: 999px; overflow: hidden; }
.state-bar-fill   { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-400)); border-radius: 999px; }
.state-bar-value  { white-space: nowrap; font-weight: 600; color: var(--ink-900); text-align: right; min-width: 7rem; }

@media (max-width: 640px) {
  .state-bar-row { grid-template-columns: 90px 1fr auto; font-size: 0.8rem; }
  .state-bar-value { min-width: 5.5rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Cart: quantity stepper
   ───────────────────────────────────────────────────────────────────────── */
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-input);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.qty-btn {
  width: 32px;
  min-height: 32px;
  border: none;
  background: none;
  color: var(--ink-700);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.qty-btn:hover:not(:disabled) { background: var(--cream-100); color: var(--navy-900); }
.qty-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qty-value {
  min-width: 2rem;
  padding: 0 0.15rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qty-stock-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--warning-text);
}
.qty-unit-price {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-500);
}

@media (max-width: 640px) {
  /* Comfortable thumb targets on the cart card layout. */
  .qty-btn   { width: 40px; min-height: 40px; font-size: 1.1rem; }
  .qty-value { min-width: 2.4rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Favourite (heart) toggle
   Overlaid on the card art in the browse grid; inline beside the title on a
   product page. Shown to signed-out visitors too — tapping prompts sign-in.
   ───────────────────────────────────────────────────────────────────────── */
.store-card { position: relative; }
.store-card .fav-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}
.fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-400);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast), transform var(--t-fast);
}
.fav-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.fav-btn:hover:not(:disabled) {
  color: var(--crimson-500);
  border-color: var(--crimson-500);
  transform: scale(1.08);
}
.fav-btn.is-fav {
  color: var(--crimson-500);
  border-color: var(--crimson-500);
  background: var(--danger-bg);
}
/* Filled heart once saved — the clearest possible on/off signal. */
.fav-btn.is-fav svg { fill: currentColor; }
.fav-btn:disabled { opacity: 0.6; cursor: default; }

.card-detail-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-detail-title-row .fav-btn { flex: 0 0 auto; margin-top: 0.2rem; }

.badge-oos { background: var(--ink-500); }
.account-quicklinks { margin-bottom: 1rem; }

@media (max-width: 640px) {
  /* Bigger tap target on phones, matching the cart/nav minimums. */
  .fav-btn { width: 40px; height: 40px; }
  .store-card .fav-btn { top: 0.4rem; right: 0.4rem; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Demo mode
   Only rendered when DEMO_MODE=true. Deliberately reads as chrome sitting
   above the shop rather than part of it: a vendor should be able to picture
   the bar gone. Everything here is token-based so it follows the theme.
   ───────────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.demo-bar {
  background: var(--navy-900);
  border-bottom: 2px solid var(--gold-500);
  /* Literal, not a token. This bar is navy in BOTH themes, but the warm
     tint tokens flip to dark surface colours in the dark theme
     (--gold-100 becomes #372c11), which painted near-black text on navy.
     Anything drawn on this bar must use fixed light values. */
  color: #f7eed6;
}
.demo-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.demo-bar-tag {
  flex: none;
  background: #d4a93a;
  color: #0d1024;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm, 4px);
}
.demo-bar-text {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  color: #f7eed6;
}
.demo-bar-link {
  flex: none;
  color: #0d1024;
  background: #e8c96f;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-md, 6px);
  white-space: nowrap;
}
.demo-bar-link:hover { background: #f0d995; }

/* On a phone the sentence is the first thing to go; the tag and the price
   link are what matter when someone is holding it at a table. */
@media (max-width: 600px) {
  .demo-bar-inner { gap: 0.5rem; }
  .demo-bar-text { display: none; }
  .demo-bar-link { margin-left: auto; }
}

/* ── /what-this-costs ───────────────────────────────────────────────────── */
.pitch {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.pitch-head { margin-bottom: 2.5rem; }
.pitch-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.pitch-head h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1.15;
  color: var(--heading);
}
.pitch-lede {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-700);
}
.pitch-section { margin-bottom: 2.5rem; }
.pitch-section h2 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  color: var(--heading);
}
.pitch-list { margin: 0; padding: 0; list-style: none; }
.pitch-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
  color: var(--ink-700);
}
.pitch-list li:last-child { border-bottom: 0; }
.pitch-list strong { color: var(--heading); display: block; margin-bottom: 0.15rem; }

/* Wide content scrolls inside its own box rather than the page. */
.pitch-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.pitch-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pitch-table th {
  text-align: right;
  padding: 0 0 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border-strong);
}
.pitch-table th:first-child { text-align: left; }
.pitch-table td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--heading);
  vertical-align: top;
}
.pitch-table td:last-child { text-align: right; color: var(--ink-700); }
.pitch-table tr:last-child td { border-bottom: 0; }
.pitch-note, .pitch-math p {
  margin: 0;
  line-height: 1.65;
  color: var(--ink-700);
}
.pitch-math {
  background: var(--paper-tint);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--r-md, 6px);
  padding: 1.25rem;
}
.pitch-math h2 { margin-top: 0; }

.pitch-cta {
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
}
.pitch-cta h2 { margin: 0 0 0.75rem; font-size: 1.5rem; color: var(--heading); }
.pitch-cta p {
  margin: 0 auto 1.5rem;
  max-width: 34rem;
  line-height: 1.65;
  color: var(--ink-700);
}
.pitch-buttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.pitch-buttons .btn { padding: 0.7rem 1.4rem; }

/* ── Game tabs on /store ─────────────────────────────────────────────────── */
.game-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.game-tab {
  padding: 0.45rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-700);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.game-tab:hover { background: var(--cream-100); }
.game-tab.active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}

/* Secondary demo-bar action: outlined instead of filled so the pricing link
   stays the loudest thing in the bar. */
.demo-bar-link-ghost {
  background: transparent;
  color: #f0d995;
  border: 1px solid #d4a93a;
}
.demo-bar-link-ghost:hover { background: rgba(212, 169, 58, 0.18); }

/* Read-only banner across the top of the demo admin. */
.admin-demo-note {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-bottom: 1px solid var(--warning-border);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.admin-demo-note a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Show pause ──────────────────────────────────────────────────────────── */
/* Buyer-facing banner while online checkout is paused. Styled like the demo
   bar family: chrome above the shop, not part of it. */
.pause-bar {
  background: var(--warning-bg);
  border-bottom: 2px solid var(--warning-border);
  color: var(--warning-text);
}
.pause-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.pause-bar-tag {
  flex: none;
  background: var(--warning-text);
  color: var(--warning-bg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-sm, 4px);
}
.pause-bar-text {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
}

/* The admin toggle. Amber when armed, so a paused shop is loud in the admin. */
.admin-pause-form { display: inline; }
.admin-pause-btn {
  border: 1px solid var(--border-strong);
  background: var(--paper);
  color: var(--ink-700);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-md, 6px);
  cursor: pointer;
  white-space: nowrap;
}
.admin-pause-btn:hover { border-color: var(--ink-400); }
.admin-pause-btn.is-paused {
  background: var(--warning-bg);
  color: var(--warning-text);
  border-color: var(--warning-border);
}