/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0b0d1a;
  --bg-card: #131630;
  --bg-card-hover: #1a1e3d;
  --bg-input: #161a35;
  --border: #252a4a;
  --text: #e0e0f0;
  --text-muted: #a5a5c5;
  --accent: #d4a843;
  --accent-hover: #c49830;
  --accent-light: rgba(212, 168, 67, 0.12);
  --purple: #7c5cbf;
  --purple-light: rgba(124, 92, 191, 0.15);
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --ink-amber: #d4a843;
  --ink-amethyst: #9b59b6;
  --ink-emerald: #2ecc71;
  --ink-ruby: #e74c3c;
  --ink-sapphire: #3498db;
  --ink-steel: #95a5a6;
  /* WCAG AA-safe text variants (>=4.5:1 against dark bgs / tinted pills).
     Use these for small-text labels, pills, badges, filter tags.
     The originals above stay in use for borders, gradients and backgrounds. */
  --purple-text: #b19cf5;
  --ink-amethyst-text: #c49fdc;
  --ink-ruby-text: #f87171;
  --ink-sapphire-text: #7fb8e8;
  --ink-steel-text: #bdc3c7;
  --danger-text: #f87171;
}
/* ===== ACCESSIBILITY ===== */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  background-image: radial-gradient(ellipse at 20% 0%, rgba(124,92,191,0.08) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 100%, rgba(212,168,67,0.06) 0%, transparent 50%);
  /* Kill horizontal page-level scroll on mobile so the page feels like a
     native app (no rubber-band sideways drag). Tiny 1-2px overflow from
     stray rounding in card grids, .category-pills overflow-x containment
     leaks, etc. used to enable iOS swipe-left-right on the whole page.
     Internal scrollers (.category-pills nav, /cart-shared image, etc.) keep
     their own overflow-x:auto so this only clips page-level overflow.
     IMPORTANT: must be `clip`, NOT `hidden`. `overflow:hidden` creates a
     scrolling context that cancels position:sticky on descendant elements
     (the sticky <header> and the products-topbar). `clip` does the same
     visual containment without breaking sticky. iOS Safari 15.5+. */
  overflow-x: clip;
}
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ===== LAYOUT ===== */
.container { max-width: 100%; margin: 0 auto; padding: 0 24px; }
.page-content { min-height: calc(100vh - 160px); padding: 30px 0; }

/* ===== HEADER ===== */
.header {
  background: rgba(11,13,26,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100; padding: 14px 0;
}
.header .container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.logo-icon { font-size: 1.8rem; }
.logo .brand { color: var(--accent); }
.search-container { flex: 1; min-width: 200px; position: relative; }
.search-bar {
  display: flex; width: 100%;
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.search-bar select { background: var(--bg-card); border: none; border-right: 1px solid var(--border); padding: 10px 12px; color: var(--text-muted); cursor: pointer; min-width: 140px; }
.search-bar input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 16px; color: var(--text); outline: none; }
.search-bar input::placeholder { color: var(--text-muted); }
.search-bar button { background: var(--accent); border: none; padding: 10px 20px; color: #fff; cursor: pointer; transition: background 0.2s; font-weight: 700; }
.search-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  /* Audit 2026-05-22: was z-index 200; mobile-bottom-nav is 1000 so the
     last few autocomplete results + "ดูทั้งหมด" link were obscured on
     mobile. Raise above bottom-nav. */
  box-shadow: var(--shadow); z-index: 1100; max-height: 480px; overflow-y: auto;
}
.search-dropdown.active { display: block; }
.search-dropdown-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  cursor: pointer; transition: background 0.15s; text-decoration: none; color: var(--text);
}
.search-dropdown-item:hover, .search-dropdown-item.highlighted { background: var(--bg-card-hover); color: var(--text); }
.search-dropdown-item img { width: 44px; height: 62px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.search-dropdown-info { flex: 1; min-width: 0; }
.search-dropdown-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dropdown-meta { font-size: 0.75rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.search-dropdown-price { font-weight: 700; color: var(--accent); font-size: 0.88rem; white-space: nowrap; }
.search-dropdown-footer {
  padding: 10px 14px; text-align: center; font-size: 0.85rem; color: var(--accent);
  border-top: 1px solid var(--border); cursor: pointer;
}
.search-dropdown-footer:hover { background: var(--accent-light); }
.search-dropdown-empty { padding: 20px 14px; text-align: center; color: var(--text-muted); font-size: 0.88rem; }
.search-bar button:hover { background: var(--accent-hover); }
.nav-links { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-links a { color: var(--text-muted); font-size: 0.88rem; transition: color 0.2s; white-space: nowrap; }
.nav-links a:hover { color: var(--text); }
.cart-link {
  position: relative; display: flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: var(--radius); color: var(--text) !important; font-weight: 500;
}
.cart-badge {
  background: var(--accent); color: #000; font-size: 0.7rem; font-weight: 800;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: -6px; right: -6px;
  transform-origin: center;
}
/* Quick celebratory bump when an item lands in cart. JS toggles the class
   on count-increase only (see updateCartBadge in main.js); CSS does the
   rest so the animation is GPU-cheap and respects prefers-reduced-motion. */
.cart-badge-bump { animation: cartBadgeBump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes cartBadgeBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); box-shadow: 0 0 14px rgba(212,168,67,0.55); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cart-badge-bump { animation: none; }
}
.user-menu { display: flex; align-items: center; gap: 8px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--accent); object-fit: cover; }
.user-avatar-placeholder {
  width: 32px; height: 32px; border-radius: 50%; background: var(--purple-light);
  border: 2px solid var(--purple); display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--purple-text);
}
.user-dropdown-wrap { position: relative; }
.user-dropdown-toggle { background: none; border: none; cursor: pointer; color: var(--text); font-size: inherit; font-family: inherit; padding: 0; }
.user-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 1000; overflow: hidden;
}
.user-dropdown-wrap.open .user-dropdown-menu { display: block; }
.user-dropdown-menu a {
  display: block; padding: 12px 18px; color: var(--text); text-decoration: none;
  font-size: 0.88rem; border-bottom: 1px solid var(--border); transition: background 0.15s;
}
.user-dropdown-menu a:last-child { border-bottom: none; }
.user-dropdown-menu a:hover { background: rgba(255,255,255,0.05); }

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--purple-light) 0%, var(--accent-light) 50%, transparent 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 60px 40px; margin-bottom: 40px; text-align: center;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 40%, rgba(212,168,67,0.08), transparent 40%),
              radial-gradient(circle at 70% 60%, rgba(124,92,191,0.08), transparent 40%);
  animation: shimmer 8s ease-in-out infinite;
}
@keyframes shimmer { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2%, 2%); } }
/* Floating sparkles — same pattern as .promo-banner uses, scoped to .hero
   so the existing .sparkle / .sparkle.s1-s5 keyframes apply directly. */
.hero-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero h1 {
  font-size: 3rem; font-weight: 800; margin-bottom: 14px;
  position: relative; z-index: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 18px rgba(212,168,67,0.18);
}
.hero h1 .brand {
  background: linear-gradient(135deg, var(--accent) 0%, #f0d78c 50%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroBrandShine 4s ease-in-out infinite;
}
@keyframes heroBrandShine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.hero h1 .magic { color: var(--purple); }
.hero p { color: var(--text-muted); font-size: 1.1rem; max-width: 650px; margin: 0 auto; position: relative; z-index: 1; }
@media (max-width: 640px) {
  .hero { padding: 40px 22px; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 0.95rem; }
}

/* ===== PROMO BANNER ===== */
.promo-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a0a2e 0%, #0d1b3e 40%, #1a0a2e 70%, #2a1040 100%);
  border: 1px solid rgba(212,168,67,0.3); border-radius: var(--radius);
  padding: 36px 40px; margin-bottom: 36px; text-align: center;
}
.promo-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(212,168,67,0.08) 0%, rgba(124,92,191,0.1) 50%, rgba(212,168,67,0.05) 100%);
  pointer-events: none;
}
.promo-banner::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,168,67,0.06), transparent);
  animation: promoShine 4s ease-in-out infinite;
}
@keyframes promoShine { 0% { left: -100%; } 100% { left: 200%; } }

.promo-sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute; color: var(--accent); opacity: 0;
  animation: sparklePulse 3s ease-in-out infinite;
  font-size: 1rem;
}
.sparkle.s1 { top: 12%; left: 8%; animation-delay: 0s; font-size: 1.2rem; }
.sparkle.s2 { top: 20%; right: 12%; animation-delay: 0.6s; font-size: 0.8rem; }
.sparkle.s3 { bottom: 18%; left: 15%; animation-delay: 1.2s; }
.sparkle.s4 { bottom: 25%; right: 8%; animation-delay: 1.8s; font-size: 1.1rem; }
.sparkle.s5 { top: 50%; left: 50%; animation-delay: 2.4s; font-size: 0.7rem; }
@keyframes sparklePulse {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

.promo-content { position: relative; z-index: 1; }
.promo-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), #e6c570);
  color: #1a0a2e; font-size: 0.7rem; font-weight: 800; letter-spacing: 2px;
  padding: 5px 18px; border-radius: 50px; margin-bottom: 14px;
  text-transform: uppercase;
}
.promo-title {
  font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 6px;
  line-height: 1.2;
}
.promo-percent {
  font-size: 3.2rem; font-weight: 900;
  background: linear-gradient(135deg, var(--accent), #f0d78c, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShift 3s ease-in-out infinite;
}
@keyframes goldShift { 0%, 100% { background-position: 0% center; } 50% { background-position: 200% center; } }
.promo-off { color: var(--accent); font-weight: 700; }
.promo-desc { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 18px; }

.promo-code-wrap {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(0,0,0,0.4); border: 2px dashed var(--accent);
  border-radius: 10px; padding: 2px; margin-bottom: 12px;
}
.promo-code-label {
  color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
  padding: 10px 8px 10px 16px; letter-spacing: 1px;
}
.promo-code {
  font-size: 1.4rem; font-weight: 900; letter-spacing: 3px;
  color: var(--accent); padding: 10px 8px;
  font-family: 'Courier New', monospace;
}
.promo-copy-btn {
  background: var(--accent); color: #1a0a2e; border: none;
  padding: 10px 14px; border-radius: 0 8px 8px 0; cursor: pointer;
  font-size: 1rem; transition: all 0.2s; font-weight: 700;
}
.promo-copy-btn:hover { background: var(--accent-hover); }
.promo-copy-btn.copied { background: var(--success); color: #fff; }

.promo-expires {
  color: var(--text-muted); font-size: 0.78rem; opacity: 0.7;
  font-style: italic;
}

.promo-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.promo-circle {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(212,168,67,0.1);
}
.promo-circle.c1 { width: 200px; height: 200px; top: -60px; right: -40px; }
.promo-circle.c2 { width: 150px; height: 150px; bottom: -50px; left: -30px; }

/* ===== SECTION ===== */
.section { margin-bottom: 44px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.section-header h1, .section-header h2 {
  font-size: 1.4rem; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  margin: 0;
}
.section-header h1::before, .section-header h2::before {
  content: ''; display: block; width: 4px; height: 26px;
  background: linear-gradient(to bottom, var(--accent), var(--purple));
  border-radius: 2px;
}

/* ===== INK COLOR TAGS ===== */
.ink-tag {
  display: inline-block; padding: 3px 10px; border-radius: 50px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.ink-Amber { background: rgba(212,168,67,0.2); color: var(--ink-amber); }
.ink-Amethyst { background: rgba(155,89,182,0.2); color: var(--ink-amethyst-text); }
.ink-Emerald { background: rgba(46,204,113,0.2); color: var(--ink-emerald); }
.ink-Ruby { background: rgba(231,76,60,0.2); color: var(--ink-ruby-text); }
.ink-Sapphire { background: rgba(52,152,219,0.2); color: var(--ink-sapphire-text); }
.ink-Steel { background: rgba(149,165,166,0.2); color: var(--ink-steel-text); }
.ink-Mixed { background: rgba(255,255,255,0.1); color: var(--text-muted); }

.rarity-tag { font-size: 0.7rem; font-weight: 600; }
.rarity-Enchanted { color: var(--accent); }
.rarity-Legendary { color: #f1c40f; }
.rarity-Super.Rare, .rarity-SuperRare { color: var(--purple-text); }
.rarity-Rare { color: var(--ink-sapphire-text); }

/* ===== SIDEBAR FILTER ===== */
.products-layout { display: flex; gap: 24px; align-items: flex-start; }
.sidebar-filter {
  width: 240px; flex-shrink: 0; position: sticky; top: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  max-height: calc(100vh - 40px); overflow: hidden;
}
/* Close (X) button and backdrop: only visible on mobile drawer mode */
.sidebar-close { display: none; }
.sidebar-filter-backdrop { display: none; }
.sidebar-filter form {
  padding: 20px; max-height: calc(100vh - 42px); overflow-y: auto;
}
/* max-width:100% is the load-bearing rule on mobile, where .products-layout
   becomes flex-direction:column. In column flex, min-width:0 doesn't keep
   the child from exceeding the parent — only a max-width does. Without
   this, an inner intrinsic-wide element (the pills row) would push the
   whole listing off-screen. */
.products-main { flex: 1; min-width: 0; max-width: 100%; }
/* Category pills wrapper — fixed at 100% width of products-main so the
   inner overflow-x:auto scrolls only inside the row. Without this guard
   the bare nav can push the parent on mobile when the pill list is long. */
.category-pills-wrap { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; margin: 0 0 12px; }
.category-pills { width: 100%; max-width: 100%; min-width: 0; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 12px; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.category-pills::-webkit-scrollbar { height: 4px; }
.category-pills::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.category-pill { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg-card); color: var(--text-muted); text-decoration: none; font-size: 0.88rem; font-weight: 600; white-space: nowrap; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.category-pill:hover { border-color: var(--accent); color: var(--text); }
.category-pill.is-active { background: var(--accent); border-color: var(--accent); color: #1a1a2e; box-shadow: 0 2px 8px rgba(212,168,67,0.25); }
@media (max-width: 480px) {
  .category-pill { padding: 7px 12px; font-size: 0.82rem; }
}
/* Filter + Sort on one row — Fizzy-style. nowrap variant prevents the
   row from breaking on narrow viewports (default .filter-bar-row wraps). */
.filter-bar-row-nowrap { flex-wrap: nowrap; }
/* Use compound selector + media-query mirror at the bottom to beat the
   .sidebar-toggle-mobile padding/font-size overrides in 768px and 480px
   media queries below. */
.sidebar-toggle-mobile.filter-btn-prominent { display: inline-flex; align-items: center; gap: 6px; padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-weight: 600; font-size: 1rem; line-height: 1; cursor: pointer; }
.filter-btn-prominent:hover { border-color: var(--accent); }
.sort-by-label { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
.products-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.products-topbar .section-header { margin-bottom: 0; }
.products-topbar .filter-bar { margin-bottom: 0; }

.sidebar-section { margin-bottom: 16px; }
.sidebar-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; margin-bottom: 6px; }
.sidebar-input,
.sidebar-select {
  /* iOS Safari was rendering this 16-20 px tall on real devices (user-reported)
     while desktop Chrome saw the expected ~34 px. Two iOS-specific gotchas:
     (1) font-size < 16 px triggers auto-zoom on focus AND a different default
         line-height calc that squashes the box, (2) `line-height: normal` on
         iOS picks a value smaller than the desktop default. Pin both, plus
         min-height for a consistent tap target, plus -webkit-appearance:none
         to drop iOS's native input chrome that'd otherwise clip the borders. */
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  min-height: 42px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.sidebar-select { cursor: pointer; }
.sidebar-input:focus,
.sidebar-select:focus { border-color: var(--accent); }

.sidebar-toggle { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.toggle-btn {
  flex: 1; padding: 7px 0; text-align: center; font-size: 0.78rem; font-weight: 600;
  background: var(--bg-input); color: var(--text-muted); border: none; cursor: pointer; transition: all 0.2s;
}
.toggle-btn.active { background: var(--accent); color: #fff; }

.sidebar-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.color-btn {
  width: 38px; height: 44px; padding: 2px; border-radius: 8px; border: 3px solid transparent;
  background: none; cursor: pointer; transition: all 0.2s; opacity: 0.5;
}
.color-btn img { display: block; width: 100%; height: 100%; object-fit: contain; }
.color-btn:hover { opacity: 0.8; transform: scale(1.1); }
.color-btn.active {
  opacity: 1; border-color: var(--accent); transform: scale(1.15);
  box-shadow: 0 0 10px rgba(212, 168, 67, 0.6), 0 0 3px rgba(212, 168, 67, 0.4);
  background: rgba(212, 168, 67, 0.15);
}

.sidebar-buttons { display: flex; gap: 8px; margin-top: 20px; }
.sidebar-btn-search {
  flex: 1; padding: 10px; background: var(--accent); color: #fff; border: none;
  border-radius: 6px; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: background 0.2s;
}
.sidebar-btn-search:hover { background: var(--accent-hover); }
.sidebar-btn-reset {
  flex: 1; padding: 10px; background: var(--bg-input); color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 6px; font-weight: 600; font-size: 0.85rem; cursor: pointer; text-align: center; text-decoration: none; transition: all 0.2s;
}
.sidebar-btn-reset:hover { border-color: var(--text-muted); color: var(--text); }

/* Always show the Filter button (was mobile-only) so Filter+Sort can sit
   on the same row at every viewport — Fizzy-style. The button itself
   still triggers the sidebar drawer on mobile and the existing .sidebar-filter
   form on desktop. */
.sidebar-toggle-mobile { display: inline-flex; align-items: center; gap: 6px; }

/* ===== CATEGORY / FILTER TAGS ===== */
.category-tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.category-tag {
  display: inline-block; padding: 8px 18px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 50px; color: var(--text-muted); font-size: 0.85rem; transition: all 0.2s;
}
.category-tag:hover, .category-tag.active {
  background: var(--accent-light); border-color: var(--accent); color: var(--accent);
}

/* Filter Section */
.filter-section { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.filter-group { display: flex; align-items: flex-start; gap: 10px; }
.filter-label { font-size: 0.82rem; color: var(--text-muted); padding: 7px 0; min-width: 50px; flex-shrink: 0; }
.filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tag {
  display: inline-block; padding: 6px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 50px; color: var(--text-muted); font-size: 0.82rem; transition: all 0.2s; text-decoration: none;
}
.filter-tag:hover { background: var(--bg-card-hover); border-color: var(--text-muted); color: var(--text); }
.filter-tag.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.filter-tag.ink-filter.active { background: transparent; }
.filter-tag.ink-Amber { border-color: var(--ink-amber); color: var(--ink-amber); }
.filter-tag.ink-Amber.active { background: var(--ink-amber); color: #000; }
.filter-tag.ink-Amethyst { border-color: var(--ink-amethyst); color: var(--ink-amethyst-text); }
.filter-tag.ink-Amethyst.active { background: var(--ink-amethyst); color: #fff; }
.filter-tag.ink-Emerald { border-color: var(--ink-emerald); color: var(--ink-emerald); }
.filter-tag.ink-Emerald.active { background: var(--ink-emerald); color: #fff; }
.filter-tag.ink-Ruby { border-color: var(--ink-ruby); color: var(--ink-ruby-text); }
.filter-tag.ink-Ruby.active { background: var(--ink-ruby); color: #fff; }
.filter-tag.ink-Sapphire { border-color: var(--ink-sapphire); color: var(--ink-sapphire-text); }
.filter-tag.ink-Sapphire.active { background: var(--ink-sapphire); color: #fff; }
.filter-tag.ink-Steel { border-color: var(--ink-steel); color: var(--ink-steel-text); }
.filter-tag.ink-Steel.active { background: var(--ink-steel); color: #fff; }
.filter-tag.rarity-Enchanted { border-color: #ff6b9d; color: #ff6b9d; }
.filter-tag.rarity-Enchanted.active { background: #ff6b9d; color: #fff; }
.filter-tag.rarity-Legendary { border-color: #f1c40f; color: #f1c40f; }
.filter-tag.rarity-Legendary.active { background: #f1c40f; color: #000; }
.filter-tag.rarity-Superrare { border-color: var(--purple); color: var(--purple-text); }
.filter-tag.rarity-Superrare.active { background: var(--purple); color: #fff; }
.filter-tag.rarity-Rare { border-color: var(--ink-sapphire); color: var(--ink-sapphire-text); }
.filter-tag.rarity-Rare.active { background: var(--ink-sapphire); color: #fff; }

.filter-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.filter-bar-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-bar-spacer { flex: 1 1 auto; }
.filter-bar-info { color: var(--text-muted); font-size: 0.85rem; }
.filter-bar-row-secondary { font-size: 0.9rem; }

/* Sticky Filter + Sort row on mobile — keeps these controls accessible
   while scrolling through long product lists. The h1 title now sits
   above .products-topbar (so it scrolls away), and the per-page row sits
   below (so it scrolls away too). Only the topbar (~60px) stays pinned.
   Sticky parent = .products-main (~20000px tall), so the row stays
   pinned through the entire product list scroll. */
@media (max-width: 768px) {
  /* Force the inner .filter-bar to span full width so .filter-bar-spacer
     can actually push the sort <select> flush right. */
  .products-topbar .filter-bar { width: 100%; flex: 0 0 100%; }
  .products-topbar {
    position: sticky;
    /* Sit just below the page header (.header sticky, ~112px tall on mobile
       — 14px padding top + 14px padding bottom + line content). 100px caused
       a small overlap with the header bottom edge; 112px clears it cleanly. */
    top: 112px;
    z-index: 30;
    background: var(--bg);
    margin: 0 -12px 12px;
    padding: 8px 12px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    border-bottom: 1px solid var(--border);
  }
}

/* ===== PAGINATION ===== */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 30px; flex-wrap: wrap; }
.pagination-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: 0.9rem; transition: all 0.2s;
}
.pagination-btn:hover { background: var(--bg-card-hover); border-color: var(--accent); color: var(--accent); }
.pagination-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pagination-dots { color: var(--text-muted); padding: 0 4px; }

/* ===== PRODUCT GRID ===== */
.product-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.product-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: all 0.3s;
  display: flex; flex-direction: column;
}
.product-card:hover {
  border-color: var(--accent); transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(212, 168, 67, 0.1);
}
.product-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.product-card-link:hover .product-card-name { color: var(--accent); }
.product-card-info { padding: 10px 12px 6px; }
.product-card-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); line-height: 1.3; transition: color 0.2s; }
.card-num { font-weight: 500; font-size: 0.78em; color: var(--text-muted); opacity: 0.7; }
.card-name-link { color: var(--text); text-decoration: none; }
.card-name-link:hover { color: var(--accent); }
.product-card-category { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0; }
.product-card-image {
  aspect-ratio: 3/4; background: linear-gradient(135deg, #1a1e3d 0%, #0f1228 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
/* Skeleton shimmer — visible *behind* the <img> until it loads. If the
   image never loads (slow network, AVIF unsupported, broken URL), the
   shimmer stays as a graceful placeholder instead of the browser's
   default broken-image icon. The loader script in footer.ejs adds .loaded
   on successful img.onload to fade the image in over the shimmer. */
.product-card-image::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 65%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
/* Once the image inside loads (loader script in footer.ejs adds .loaded),
   stop the shimmer + hide the gradient. Without this, the animation runs
   forever and bleeds through the letterbox margins of object-fit:contain
   images — visible as a moving sheen behind cards that look "done". */
.product-card-image:has(img.loaded)::before { display: none; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.card-zoom { cursor: pointer; }
.product-card-image img {
  width: 100%; height: 100%; object-fit: contain;
  position: relative; z-index: 1;
  opacity: 0; transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.product-card-image img.loaded { opacity: 1; }
/* Subtle image zoom on hover — adds tactility without being distracting.
   Only on hoverable pointers (skips touch devices to avoid janky scale on
   first tap), and the .product-card-image still has overflow:hidden so
   the scaled image stays clipped to the rounded container. */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-image img.loaded,
  .product-card-link:hover .product-card-image img.loaded {
    transform: scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .product-card-image img { transition: opacity 0.25s ease; }
  .product-card:hover .product-card-image img.loaded,
  .product-card-link:hover .product-card-image img.loaded { transform: none; }
}
/* If the image errors, the loader script sets [hidden] — keep it gone so
   the shimmer/fallback shows instead of the broken-image icon. */
.product-card-image img[hidden] { display: none; }
.product-card-image .no-image { color: var(--text-muted); font-size: 4rem; position: relative; z-index: 1; }
/* Foil holographic sheen — TWO layered ::after gradients painted on top
   of the image with mix-blend-mode:screen for a bright "rainbow + light
   bar travelling across the card" effect.
     Layer 1: a strong diagonal white sheen that travels from right to
              left every 4s — reads as a moving highlight catching real
              foil at an angle.
     Layer 2: a full 6-color rainbow base (pink → purple → cyan → green
              → gold → red) that slowly drifts so the underlying tint
              shifts as the sheen passes over it.
   Only renders when the parent has .is-foil (set by
   partials/product-card-link.ejs based on product.variant === 'foil').
   On hover the saturation/blur is boosted for an even more dramatic
   "tilt-card-into-the-light" beat. Disabled under prefers-reduced-motion
   so customers who opted out of animations get a static rainbow tint
   instead of a moving overlay. Same class is reused by the detail page
   (.product-image-main.is-foil) below. */
.product-card-image.is-foil::after,
.product-image-main.is-foil::after {
  /* z-index:1 sits ABOVE the img (also z:1, but ::after renders after
     children in the same stacking layer) and BELOW the badge/sold-out
     overlays at z:2 — so the gold FOIL badge and SOLD OUT text stay
     readable instead of being washed out by the rainbow. */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    /* Layer 1 — white-light sweep, softer than the STRONG preset */
    linear-gradient(
      105deg,
      transparent 28%,
      rgba(255,255,255,0.28) 46%,
      rgba(255,255,255,0.60) 50%,
      rgba(255,255,255,0.28) 54%,
      transparent 72%
    ),
    /* Layer 2 — full-rainbow holo base at ~0.35 alpha so the artwork shows
       through more clearly. The tint reads as foil but doesn't drown out
       card text/art. */
    linear-gradient(
      135deg,
      rgba(255, 80, 200, 0.35) 0%,
      rgba(168, 85, 247, 0.35) 20%,
      rgba(56, 189, 248, 0.35) 40%,
      rgba(52, 211, 153, 0.35) 60%,
      rgba(251, 191, 36, 0.35) 80%,
      rgba(255, 80, 120, 0.35) 100%
    );
  background-size: 250% 100%, 220% 220%;
  background-position: 200% 0, 0% 0%;
  mix-blend-mode: screen;
  /* 5s loop — slower than 4s STRONG, faster than 6s SUBTLE — reads as a
     calm holographic shimmer rather than a frantic flash. */
  animation: foil-holo 5s linear infinite;
  border-radius: inherit;
  transition: filter 0.3s ease;
  /* GPU hint — the animation churns background-position 60 fps × every
     foil card on screen. will-change promotes the layer so the
     compositor doesn't repaint per frame. */
  will-change: background-position;
}
/* Hover boost — ONLY on devices that report a true hover capability.
   Without this guard iOS Safari treats first tap as "hover", sticking
   the boosted state on after the user moves on (until they tap empty
   space). The same guard pattern is already used elsewhere for the
   image-zoom hover. Boost is gentle (saturate 1.3, brightness 1.05) so
   hover feels like "the card catches more light" rather than "the
   card became neon". */
@media (hover: hover) and (pointer: fine) {
  .product-card-image.is-foil:hover::after,
  .product-image-main.is-foil:hover::after {
    filter: saturate(1.3) brightness(1.05);
  }
}
@keyframes foil-holo {
  0%   { background-position: 200% 0, 0% 0%; }
  100% { background-position: -120% 0, 200% 200%; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card-image.is-foil::after,
  .product-image-main.is-foil::after {
    animation: none;
    background-position: 60% 0, 50% 50%;
  }
}
.sold-out-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; color: #ef4444; letter-spacing: 3px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7); z-index: 2;
}
.product-card.sold-out { opacity: 0.6; }
.product-card.sold-out .add-cart-btn,
.product-card.sold-out .qty-controls,
.product-card.sold-out .wish-btn-inline { pointer-events: none; }
.zoom-btn {
  position: absolute; bottom: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.product-card:hover .zoom-btn { opacity: 1; }
.zoom-btn:hover { background: rgba(0,0,0,0.85); border-color: var(--accent); }
.product-card-bottom { padding: 8px 12px 12px; }
.mob-card-name, .mob-card-set { display: none; }
.mob-card-stock { display: block; font-size: 0.78rem; color: var(--success); text-align: center; margin-bottom: 6px; }
.qty-input-mob { display: none; }
.qty-mob { display: none; } /* mobile qty stepper — shown in mobile media query */
.product-card-price { font-size: 1.1rem; font-weight: 700; color: var(--accent); text-align: center; margin-bottom: 8px; }
.product-card-cart { display: flex; gap: 6px; align-items: center; }
.qty-select {
  width: 48px; padding: 6px 4px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--bg-input); color: var(--text);
  font-size: 0.82rem; cursor: pointer; text-align: center;
}
.add-cart-btn {
  flex: 1; padding: 7px 10px; border: none; border-radius: 4px;
  background: var(--accent); color: #000; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; transition: background 0.2s;
  letter-spacing: 0.2px;
  white-space: nowrap; /* never wrap "+ ตะกร้า" / "+ Cart" — short enough */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  -webkit-appearance: none;
  min-height: 44px;
  position: relative;
  z-index: 5;
}
.add-cart-btn:hover { background: #e8b84a; }
.product-card-stock { font-size: 0.78rem; color: var(--success); text-align: center; margin-bottom: 6px; }
/* Low-stock urgency: when stock <= 2, switch to amber + add a pulsing dot
   to draw the eye. Drives "FOMO" conversion on rare cards in scarce supply. */
/* Tier 1: stock 3-5 = amber pulse (mild urgency) */
.product-card-stock.stock-low { color: #f59e0b; font-weight: 700; display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.product-card-stock.stock-low strong { color: #fbbf24; }
/* Tier 2: stock 1-2 = red + "รีบสั่ง!" CTA (high urgency) */
.product-card-stock.stock-critical { color: #ef4444; font-weight: 700; display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; }
.product-card-stock.stock-critical strong { color: #fca5a5; }
.product-card-stock.stock-critical .stock-urgent-dot { background: #ef4444; }
.stock-critical-cta {
  font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 8px;
  background: rgba(239,68,68,0.18); color: #fca5a5; letter-spacing: 0.3px;
  text-transform: uppercase;
}
/* Backward compat for any leftover .stock-urgent class refs */
.product-card-stock.stock-urgent { color: #f59e0b; font-weight: 700; display: flex; align-items: center; gap: 6px; justify-content: center; }
.product-card-stock.stock-urgent strong { color: #fbbf24; }
.stock-urgent-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #f59e0b; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  animation: stock-pulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
.stock-critical .stock-urgent-dot {
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65);
  animation: stock-pulse-critical 1.2s ease-out infinite;
}
@keyframes stock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes stock-pulse-critical {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.65); }
  70%  { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Filter button: active-count badge — gold pill next to "Filter" text */
.filter-active-count {
  display: inline-block;
  margin-left: 4px;
  min-width: 18px;
  padding: 1px 6px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.4;
  border-radius: 10px;
  background: var(--accent);
  color: #1a1a2e;
  text-align: center;
  vertical-align: 1px;
}
/* Subtle active state on the Filter button itself when filters applied */
.filter-btn-prominent.has-active-filters {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(212,168,67,0.4) inset;
}
.out-of-stock { color: var(--danger) !important; }
/* Zoom Modal */
.zoom-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 9999;
  align-items: center; justify-content: center; cursor: pointer;
}
.zoom-modal.active { display: flex; }
.zoom-modal img {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 0 60px rgba(0,0,0,0.5);
}
.zoom-modal-close {
  position: absolute; top: 20px; right: 30px;
  color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.2s;
}
.zoom-modal-close:hover { background: rgba(255,255,255,0.1); }

/* ===== PRODUCT PAGE LAYOUT ===== */
.product-page-layout { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.product-detail { display: grid; grid-template-columns: 350px 1fr; gap: 40px; margin-bottom: 50px; }
.product-image-col { position: sticky; top: 20px; }
.product-buy-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.product-buy-box .product-price-big { margin-bottom: 8px; }
.product-buy-box .product-stock-info { margin-bottom: 16px; }
.product-add-row { display: flex; gap: 12px; align-items: center; }
.product-add-btn { flex: 1; font-size: 1rem; padding: 14px 20px; border-radius: 10px; }
.product-add-row .qty-controls { border-radius: 10px; }
.product-add-row .qty-btn { width: 44px; height: 44px; font-size: 1.2rem; }
.product-add-row input { width: 50px; height: 44px; font-size: 1rem; background: var(--bg-input); color: var(--text); }
.mobile-buy-bar { display: none; }

.product-image-main {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
  position: relative; min-height: 280px; /* min height so the skeleton has a stable box before the img dimensions land */
}
/* Skeleton shimmer for the detail page hero image — same pattern as the
   listing card (CSS rule on .product-card-image). The detail page hero is
   typically the largest image on the site (~560x784) so the skeleton is
   doubly worth showing while it loads, especially on mobile. */
.product-image-main::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 65%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}
.product-image-main img {
  width: 100%; height: auto; object-fit: contain;
  position: relative; z-index: 1;
  opacity: 0; transition: opacity 0.25s ease;
}
.product-image-main img.loaded { opacity: 1; }
.product-image-main img[hidden] { display: none; }
.product-image-main .no-image { font-size: 8rem; color: var(--text-muted); position: relative; z-index: 1; }
.product-info h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; }
.product-info .category-link { display: inline-block; color: var(--purple-text); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
.product-meta-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.product-price-big { font-size: 2.4rem; font-weight: 800; color: var(--accent); margin-bottom: 20px; }
.product-description { color: var(--text-muted); line-height: 1.8; margin-bottom: 24px; white-space: pre-wrap; }
.product-stock-info { padding: 12px 16px; background: var(--bg-input); border-radius: var(--radius); margin-bottom: 20px; font-size: 0.9rem; }
/* Sidebar */
.product-sidebar {
  position: sticky; top: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; max-height: calc(100vh - 40px); overflow-y: auto;
}
.sidebar-header { margin-bottom: 14px; }
.sidebar-header h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.sidebar-set-name { font-size: 0.78rem; color: var(--text-muted); }
.sidebar-cards { display: flex; flex-direction: column; gap: 10px; }
.sidebar-card {
  display: flex; gap: 10px; padding: 8px; border-radius: 8px;
  background: var(--bg-input); transition: all 0.2s; text-decoration: none; color: var(--text);
}
.sidebar-card:hover { background: var(--bg-card-hover); transform: translateX(3px); }
.sidebar-card.sold-out { opacity: 0.5; }
.sidebar-card-img {
  width: 60px; min-width: 60px; aspect-ratio: 3/4;
  border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #1a1e3d, #0f1228);
  display: flex; align-items: center; justify-content: center;
}
.sidebar-card-img img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-card-img .no-image { font-size: 1.2rem; color: var(--text-muted); }
.sidebar-card-info { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sidebar-card-name {
  font-size: 0.82rem; font-weight: 600; line-height: 1.3; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-card-meta { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; }
.sidebar-card-price { font-size: 0.9rem; font-weight: 700; color: var(--accent); }
.rarity-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.rarity-dot.rarity-common { background: #9ca3af; }
.rarity-dot.rarity-uncommon { background: #60a5fa; }
.rarity-dot.rarity-rare { background: #a78bfa; }
.rarity-dot.rarity-superrare { background: #f59e0b; }
.rarity-dot.rarity-legendary { background: #ef4444; }
.rarity-dot.rarity-enchanted { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.rarity-dot.rarity-epic { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.rarity-dot.rarity-iconic { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rarity-dot.rarity-promo { background: linear-gradient(135deg, #059669, #34d399); }
.sidebar-view-all {
  display: block; text-align: center; padding: 12px; margin-top: 14px;
  color: var(--accent); font-weight: 600; font-size: 0.88rem; text-decoration: none;
  border-top: 1px solid var(--border); transition: color 0.2s;
}
.sidebar-view-all:hover { color: #e8b84a; }
.quantity-selector { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.quantity-selector label { font-weight: 600; }
.qty-controls { display: flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qty-btn {
  background: var(--bg-card); border: none; width: 42px; height: 42px; cursor: pointer;
  color: var(--text); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: background 0.2s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-appearance: none;
}
.qty-btn:hover { background: var(--bg-card-hover); }
.qty-controls input[type="number"] {
  width: 48px; text-align: center; border: none; background: var(--bg-input); color: var(--text);
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  font-size: 1rem; -moz-appearance: textfield;
}
.qty-controls input[type="number"]::-webkit-inner-spin-button,
.qty-controls input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-selector input {
  width: 50px; text-align: center; border: none;
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  background: var(--bg-input); height: 42px;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: none; border-radius: var(--radius);
  font-weight: 600; cursor: pointer; transition: all 0.2s; font-size: 0.95rem; text-align: center;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #b8902e); color: #000; }
.btn-primary:hover { background: linear-gradient(135deg, var(--accent-hover), #a17d28); color: #000; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-card-hover); color: var(--text); }
.btn-success { background: var(--success); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-purple { background: var(--purple); color: #fff; }
.btn-sm { padding: 6px 14px; font-size: 0.85rem; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-google { background: #fff; color: #333; border: 1px solid #ddd; }
.btn-google:hover { background: #f5f5f5; color: #333; }
.btn-facebook { background: #1877f2; color: #fff; }
.btn-facebook:hover { background: #166fe5; color: #fff; }

/* ===== CART (CardTrader-style) ===== */
.cart-page-title { font-size: 1.6rem; font-weight: 700; margin: 24px 0 20px; }
.cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.cart-items-col { min-width: 0; }
.cart-items-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; font-size: 0.9rem; color: var(--text-muted); }
.cart-items-header strong { color: var(--text); }
.cart-items-list { border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); transition: background 0.15s; }
.cart-row:last-child { border-bottom: none; }
.cart-row:hover { background: var(--bg-card-hover); }
.cart-row-img { width: 52px; height: 72px; border-radius: 6px; overflow: hidden; flex-shrink: 0; cursor: pointer; background: var(--bg-input); }
.cart-row-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.4rem; }
.cart-row-info { flex: 1; min-width: 0; }
.cart-row-name { font-weight: 600; font-size: 0.92rem; color: var(--text); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-row-name:hover { color: var(--accent); }
.cart-row-meta { display: flex; gap: 8px; font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; flex-wrap: wrap; }
.cart-row-meta span { white-space: nowrap; }
.cart-row-rarity { color: var(--accent); font-weight: 500; }
.cart-row-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cart-row-price { font-weight: 700; font-size: 0.95rem; white-space: nowrap; min-width: 70px; text-align: right; }
.cart-row-actions { display: flex; align-items: center; gap: 10px; }
.cart-qty-wrap { display: flex; align-items: center; gap: 4px; }
.cart-qty-select { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; font-size: 0.85rem; cursor: pointer; min-width: 44px; }
.cart-qty-of { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.cart-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 4px 6px; border-radius: 4px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.cart-remove-btn:hover { color: var(--danger-text); background: rgba(239,68,68,0.1); }
/* Cart Summary Sidebar */
.cart-summary-col { position: sticky; top: 90px; }
.cart-summary-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.cart-summary-box h3 { font-size: 1.1rem; margin-bottom: 16px; }
.cart-summary-stats { margin-bottom: 4px; }
.cart-summary-stat { display: flex; justify-content: space-between; font-size: 0.88rem; padding: 4px 0; }
.cart-summary-divider { height: 1px; background: var(--border); margin: 12px 0; }
.cart-summary-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.92rem; }
.cart-free-ship { color: var(--success); font-weight: 600; }
.cart-summary-hint { font-size: 0.78rem; color: var(--text-muted); padding: 2px 0 4px; }
.cart-summary-total-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: 1.15rem; font-weight: 700; }
.cart-summary-total-price { color: var(--accent); }
.cart-checkout-btn { display: block; width: 100%; text-align: center; padding: 14px; background: var(--accent); color: #1a1a2e; font-weight: 700; font-size: 1rem; border-radius: 8px; text-decoration: none; margin-top: 16px; transition: background 0.2s; }
.cart-checkout-btn:hover { background: #e8b84a; }
/* Mobile sticky checkout bar — hidden on desktop, fixed-bottom on phones.
   Frees the customer from scrolling to the side panel to find the CTA. */
.cart-mobile-bar { display: none; }
@media (max-width: 900px) {
  .cart-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 470; padding: 10px 14px; background: rgba(20, 22, 32, 0.95);
    backdrop-filter: blur(8px); border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); align-items: center; gap: 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cart-mobile-bar-total { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
  .cart-mobile-bar-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
  .cart-mobile-bar-price { font-size: 1.2rem; font-weight: 800; color: var(--accent); }
  .cart-mobile-bar-cta { background: var(--accent); color: #1a1a2e; font-weight: 800; font-size: 0.95rem;
    padding: 12px 18px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
  /* Leave room above the mobile bottom-nav (which is at z-index ~460-480).
     Also pad the bottom of the cart so content isn't hidden behind the bar. */
  body.has-cart-mobile-bar { padding-bottom: 84px; }
}
.cart-share-btn { display: block; width: 100%; text-align: center; padding: 12px; background: var(--bg-input); color: var(--text); border: 1px solid var(--border); font-weight: 600; font-size: 0.9rem; border-radius: 8px; cursor: pointer; margin-top: 10px; transition: background 0.2s; }
.cart-share-btn:hover { background: var(--bg-card); }
.cart-share-btn:disabled { opacity: 0.6; cursor: default; }
.cart-continue-link { display: block; text-align: center; margin-top: 12px; color: var(--text-muted); font-size: 0.85rem; text-decoration: none; }
.cart-continue-link:hover { color: var(--accent); }
/* Cart Empty */
.cart-empty {
  text-align: center; padding: 64px 24px; color: var(--text-muted);
  max-width: 560px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(212,168,67,0.04) 0%, transparent 70%);
  border-radius: 18px;
}
.cart-empty-icon {
  font-size: 3rem; margin-bottom: 16px; opacity: 0.55;
  display: inline-flex; align-items: center; justify-content: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
  animation: emptyCartFloat 3.5s ease-in-out infinite;
}
@keyframes emptyCartFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .cart-empty-icon { animation: none; } }
.cart-empty h2 { margin-bottom: 10px; color: var(--text); font-size: 1.5rem; }
.cart-empty p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 24px; }
.cart-empty-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 8px;
}
.cart-empty-cta-primary { padding: 12px 28px; font-weight: 700; }
.cart-empty-cta-ghost {
  padding: 12px 22px; font-weight: 600;
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 10px; text-decoration: none;
  transition: background 0.18s ease, transform 0.15s ease;
}
.cart-empty-cta-ghost:hover {
  background: var(--accent-light); transform: translateY(-1px); color: var(--accent);
}
@media (max-width: 520px) {
  .cart-empty-actions { flex-direction: column; align-items: stretch; }
  .cart-empty-cta-primary, .cart-empty-cta-ghost { width: 100%; }
}

/* ===== FORMS ===== */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
.form-group label .required { color: var(--accent); }
.form-control {
  width: 100%; padding: 11px 14px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-control::placeholder { color: var(--text-muted); opacity: 0.55; transition: opacity 0.2s ease; }
.form-control:hover:not(:focus):not(:disabled) {
  border-color: rgba(212,168,67,0.5);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-input);
  box-shadow: 0 0 0 3px var(--accent-light);
}
.form-control:focus::placeholder { opacity: 0.3; }
.form-control:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .form-control, .form-control::placeholder { transition: none; } }
.password-wrapper { position: relative; }
.password-wrapper .form-control { padding-right: 44px; }
.password-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 40px; background: transparent; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; transition: color 0.2s; }
.password-toggle:hover { color: var(--text); }
textarea.form-control { resize: vertical; min-height: 80px; }
select.form-control { cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; }
.form-card h3 { margin-bottom: 16px; }

/* ===== CHECKOUT ===== */
.co-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.co-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.co-card-title { font-size: 0.95rem; margin: 0 0 14px; }
.co-field { margin-bottom: 8px; }
.co-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 3px; }
.co-input { width: 100%; padding: 8px 10px; font-size: 0.84rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.co-input:focus { border-color: var(--accent); outline: none; }
.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-right { position: sticky; top: 20px; align-self: start; }
.co-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.co-totals { margin-bottom: 12px; }
.co-total-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 3px 0; }
.co-grand { font-weight: 700; font-size: 1rem; padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--border); }
.co-grand span:last-child { color: var(--accent); }
.co-discount { margin-bottom: 12px; }
.co-discount-btn { padding: 8px 12px; font-size: 0.82rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; white-space: nowrap; }
.co-submit-btn { display: block; width: 100%; padding: 14px; background: var(--accent); color: #1a1a2e; font-weight: 700; font-size: 1rem; border: none; border-radius: 8px; cursor: pointer; margin-bottom: 16px; transition: background 0.2s; }
.co-submit-btn:hover { background: #e8b84a; }
.co-item-list { border-top: 1px solid var(--border); padding-top: 14px; }
.co-sitem { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.co-sitem:last-child { border: none; }
.co-sitem-info { flex: 1; min-width: 0; }
.co-sitem-name { font-size: 0.82rem; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.co-sitem-row { display: flex; align-items: center; gap: 8px; }
.co-sitem-row select { padding: 2px 6px; font-size: 0.78rem; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); cursor: pointer; }
.co-sitem-price { font-size: 0.78rem; color: var(--text-muted); }
.co-sitem-line { font-size: 0.82rem; font-weight: 700; margin-left: auto; color: var(--accent); }
.co-sitem-img { display: none; }

/* ===== PAYMENT ===== */
.payment-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; text-align: center; max-width: 520px; margin: 0 auto; }
.payment-box h2 { margin-bottom: 8px; }
.payment-box .amount { font-size: 2.2rem; font-weight: 800; color: var(--accent); margin: 16px 0; }
.qr-code { background: #fff; border-radius: var(--radius); display: inline-block; padding: 20px; margin: 16px 0; }
.qr-code img { width: 260px; height: 260px; }
.payment-info { font-size: 0.9rem; color: var(--text-muted); margin-top: 12px; }
.upload-slip { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.file-input-wrapper { position: relative; display: inline-block; }
.file-input-wrapper input[type=file] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; }

/* ===== ORDER / STATUS ===== */
.status-badge { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 0.8rem; font-weight: 600; }
.status-pending { background: rgba(234,179,8,0.15); color: var(--warning); }
.status-reviewing { background: rgba(59,130,246,0.15); color: #60a5fa; }
.status-paid { background: rgba(34,197,94,0.15); color: var(--success); }
.status-shipped { background: rgba(139,92,246,0.15); color: #a78bfa; }
.status-completed { background: rgba(34,197,94,0.15); color: var(--success); }
.status-cancelled { background: rgba(239,68,68,0.15); color: var(--danger-text); }
.order-timeline { display: flex; justify-content: center; gap: 0; margin: 30px 0; flex-wrap: wrap; }
.timeline-step { display: flex; align-items: center; gap: 8px; padding: 10px 16px; color: var(--text-muted); font-size: 0.85rem; }
.timeline-step.active { color: var(--accent); font-weight: 600; }
.timeline-step.done { color: var(--success); }
.timeline-step::after { content: '>'; margin-left: 8px; color: var(--border); }
.timeline-step:last-child::after { display: none; }
.track-box { max-width: 500px; margin: 40px auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; text-align: center; }
.track-box h1 { margin-bottom: 20px; }

/* ===== AUTH ===== */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.auth-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; width: 100%; max-width: 440px; }
.auth-box h1 { text-align: center; margin-bottom: 6px; }
.auth-box .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 24px; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 20px 0; color: var(--text-muted); font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.social-buttons { display: flex; flex-direction: column; gap: 10px; }
.login-error, .alert-error { background: rgba(239,68,68,0.15); color: var(--danger-text); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; border: 1px solid rgba(239,68,68,0.3); }
.alert-success { background: rgba(34,197,94,0.15); color: var(--success); padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 0.9rem; border: 1px solid rgba(34,197,94,0.3); }

/* ===== FORM VALIDATION ===== */
.password-strength { margin-top: 8px; }
.strength-rule { font-size: 0.78rem; color: var(--danger); padding: 2px 0; transition: color 0.2s; }
.strength-rule.pass { color: var(--success); }
.field-error { font-size: 0.78rem; color: var(--danger); margin-top: 4px; }
.form-control.valid { border-color: var(--success) !important; }
.form-control.invalid { border-color: var(--danger) !important; }

/* ===== PROVIDER BADGE ===== */
.provider-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 50px; font-size: 0.7rem; font-weight: 600; }
.provider-local { background: rgba(149,165,166,0.2); color: var(--ink-steel); }
.provider-google { background: rgba(234,67,53,0.15); color: #ea4335; }
.provider-facebook { background: rgba(24,119,242,0.15); color: #1877f2; }

/* ===== META DECKS ===== */
.decks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.decks-grid-full { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.deck-card { display: flex; align-items: flex-start; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; transition: all 0.2s; color: var(--text); text-decoration: none; }
.deck-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(212,168,67,0.1); color: var(--text); }
.deck-card-inks { display: flex; flex-shrink: 0; align-items: center; }
.deck-card-inks img { width: 38px; height: 44px; object-fit: contain; }
.deck-card-inks img:last-child { margin-left: -8px; }
.deck-card-info { flex: 1; min-width: 0; }
.deck-card-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.deck-card-meta { font-size: 0.78rem; color: var(--text-muted); display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.deck-tier { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }
.tier-s { background: rgba(212,168,67,0.15); color: var(--accent); }
.tier-a { background: var(--purple-light); color: var(--purple-text); }
.tier-b { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.deck-card-cost { font-weight: 700; color: var(--accent); font-size: 0.85rem; }
.deck-card-desc { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Deck Detail v2 */
.deck-page .container { max-width: 800px; margin: 0 auto; padding: 0 16px; }
.deck-page { padding: 0; }
.deck-page .search-container { display: none !important; }

/* Hero */
.deck-hero {
  position: relative; overflow: hidden; border-radius: 0 0 20px 20px;
  background: linear-gradient(160deg, #0d1b3e 0%, #1a0a2e 50%, #0d1b3e 100%);
  padding: 32px 20px 24px; margin: -30px -16px 20px; text-align: center;
}
.deck-hero-bg {
  position: absolute; inset: 0; opacity: 0.12;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 50%),
              radial-gradient(circle at 70% 70%, var(--purple) 0%, transparent 50%);
}
.deck-hero-content { position: relative; z-index: 1; }
.deck-hero-inks { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.deck-hero-inks img { width: 40px; height: 40px; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
.deck-hero-name { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.deck-hero .deck-tier { font-size: 0.75rem; padding: 3px 14px; margin-bottom: 10px; display: inline-block; }
.deck-hero-desc { color: var(--text-muted); font-size: 0.82rem; max-width: 500px; margin: 0 auto; line-height: 1.5; }

/* Stats Bar v2 */
.deck-stats-bar2 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 24px;
}
.deck-stat2 {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px;
}
.deck-stat2-icon { font-size: 1.2rem; flex-shrink: 0; }
.deck-stat2-value { display: block; font-size: 1rem; font-weight: 800; line-height: 1.2; }
.deck-stat2-label { display: block; font-size: 0.65rem; color: var(--text-muted); }
.deck-stat2-stock { color: var(--success); }
.deck-stat2-cost { color: var(--accent); }

/* Category sections */
.deck-cat-section { margin-bottom: 20px; }
.deck-cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(212,168,67,0.08), transparent);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
}
.deck-cat-icon { font-size: 1rem; }
.deck-cat-name { font-weight: 700; font-size: 0.9rem; flex: 1; }
.deck-cat-count {
  font-size: 0.72rem; font-weight: 700; color: var(--accent);
  background: rgba(212,168,67,0.1); padding: 2px 8px; border-radius: 50px;
}

/* Card List Rows */
.deck-card-list { display: flex; flex-direction: column; gap: 4px; }
.deck-card-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: all 0.2s;
}
.deck-card-row:hover { border-color: rgba(212,168,67,0.3); background: var(--bg-card-hover); }
.deck-row-sold { opacity: 0.55; }
.deck-row-unavail { opacity: 0.35; }

.deck-card-qty {
  font-size: 0.82rem; font-weight: 800; color: var(--accent);
  min-width: 24px; text-align: center; flex-shrink: 0;
}
.deck-card-img2 {
  width: 42px; height: 58px; flex-shrink: 0; border-radius: 4px; overflow: hidden;
  background: var(--bg-input); position: relative;
}
.deck-card-img2 a { display: block; width: 100%; height: 100%; }
.deck-card-img2 img { width: 100%; height: 100%; object-fit: cover; }
.deck-card-noimg2 {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text-muted);
}
.deck-card-soldtag {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(239,68,68,0.85); color: #fff;
  font-size: 0.5rem; font-weight: 800; text-align: center;
  padding: 1px 0; letter-spacing: 0.5px;
}

.deck-card-info2 { flex: 1; min-width: 0; }
.deck-card-name2 { font-weight: 600; font-size: 0.85rem; line-height: 1.3; margin-bottom: 2px; }
.deck-card-name2 a { color: var(--text); }
.deck-card-name2 a:hover { color: var(--accent); }
.deck-card-name2 span { color: var(--text-muted); }
.deck-card-meta2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deck-rarity-dot { font-size: 0.62rem; font-weight: 600; padding: 1px 6px; border-radius: 50px; }
.rarity-dot-common { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.rarity-dot-uncommon { background: rgba(52,152,219,0.12); color: #5dade2; }
.rarity-dot-rare { background: rgba(46,204,113,0.12); color: #58d68d; }
.rarity-dot-super-rare { background: rgba(155,89,182,0.12); color: #bb8fce; }
.rarity-dot-legendary { background: rgba(212,168,67,0.15); color: var(--accent); }
.rarity-dot-enchanted { background: rgba(212,168,67,0.25); color: #f0d78c; }
.rarity-dot-epic { background: rgba(231,76,60,0.12); color: #ec7063; }
.rarity-dot-iconic { background: rgba(212,168,67,0.3); color: var(--accent); }
.rarity-dot-promo { background: rgba(52,152,219,0.12); color: #5dade2; }
.deck-set-name { font-size: 0.62rem; color: var(--text-muted); }

.deck-card-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0; min-width: 60px;
}
.deck-card-price2 { font-weight: 700; font-size: 0.82rem; color: var(--accent); }
.deck-add-btn {
  font-size: 0.68rem; padding: 4px 10px; border-radius: 6px; white-space: nowrap;
  background: var(--accent); color: #000; border: none; font-weight: 700; cursor: pointer;
  transition: all 0.2s;
}
.deck-add-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
.deck-stock-label { font-size: 0.62rem; color: var(--success); font-weight: 600; }
.deck-sold-label { font-size: 0.68rem; color: var(--danger); font-weight: 600; }
.deck-na-label { font-size: 0.68rem; color: var(--text-muted); }

/* Foil upsell chip — suggests foil version when normal is out of stock (or alongside) */
.deck-foil-suggest {
  display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap;
}
.deck-foil-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 50px;
  background: linear-gradient(135deg, rgba(192,164,77,0.18), rgba(245,230,163,0.12), rgba(192,164,77,0.18));
  border: 1px solid rgba(192,164,77,0.5);
  font-size: 0.68rem; line-height: 1.4;
  text-decoration: none;
}
.deck-foil-chip:hover {
  background: linear-gradient(135deg, rgba(192,164,77,0.28), rgba(245,230,163,0.2), rgba(192,164,77,0.28));
  border-color: #c0a44d;
}
.deck-foil-badge {
  background: linear-gradient(135deg, #c0a44d 0%, #f5e6a3 35%, #fff6c8 50%, #f5e6a3 65%, #c0a44d 100%);
  color: #1a1a2e; font-weight: 800; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px; font-size: 0.58rem;
}
.deck-foil-price { color: #f5e6a3; font-weight: 700; }
.deck-foil-stock { color: var(--success); font-size: 0.6rem; }
/* Out-of-stock foil chip — muted gray, links to product page where wishlist/notify lives */
.deck-foil-chip.foil-oos {
  background: linear-gradient(135deg, rgba(148,163,184,0.14), rgba(226,232,240,0.08), rgba(148,163,184,0.14));
  border-color: rgba(148,163,184,0.4);
  opacity: 0.85;
}
.deck-foil-chip.foil-oos:hover {
  background: linear-gradient(135deg, rgba(148,163,184,0.22), rgba(226,232,240,0.14), rgba(148,163,184,0.22));
  border-color: rgba(148,163,184,0.65);
  opacity: 1;
}
.deck-foil-chip.foil-oos .deck-foil-badge {
  background: linear-gradient(135deg, #94a3b8, #cbd5e1, #94a3b8);
  color: #1a1a2e;
}
.deck-foil-notify { color: #cbd5e1; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1px; }
/* Small Add button for foil — high specificity overrides to defeat .add-cart-btn's
   flex:1 / min-height:44px which previously made this button huge. */
.deck-foil-suggest .deck-foil-add,
.deck-card-row .deck-foil-suggest .deck-foil-add {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  padding: 3px 10px !important;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  border-radius: 999px !important;
  white-space: nowrap;
  background: linear-gradient(135deg, #c0a44d 0%, #f5e6a3 35%, #fff6c8 50%, #f5e6a3 65%, #c0a44d 100%);
  color: #1a1a2e; border: none; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}
.deck-foil-suggest .deck-foil-add:hover { filter: brightness(1.08); transform: scale(1.04); }
.deck-foil-suggest .deck-foil-add:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; }
/* When the normal is sold, brighten the foil suggestion so it stands out */
.deck-row-sold .deck-foil-suggest,
.deck-card-row:has(.deck-sold-label) .deck-foil-suggest {
  margin-top: 3px;
}

.deck-actions {
  display: flex; gap: 10px; justify-content: center; margin: 24px 0 10px; flex-wrap: wrap;
}

/* Rarity badges (still used elsewhere) */
.rarity-badge { font-size: 0.65rem; padding: 1px 6px; border-radius: 50px; margin-left: 4px; }
.rarity-common { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.rarity-uncommon { background: rgba(52,152,219,0.15); color: #3498db; }
.rarity-rare { background: rgba(46,204,113,0.15); color: #2ecc71; }
.rarity-super-rare { background: rgba(155,89,182,0.15); color: #9b59b6; }
.rarity-legendary { background: rgba(212,168,67,0.15); color: var(--accent); }
.rarity-enchanted { background: rgba(212,168,67,0.25); color: var(--accent); }
.rarity-epic { background: rgba(231,76,60,0.15); color: #e74c3c; }
.rarity-iconic { background: rgba(212,168,67,0.3); color: var(--accent); }

/* ===== FOOTER ===== */
.footer { background: var(--bg-card); border-top: 1px solid var(--border); padding: 36px 0; margin-top: 40px; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.footer h2 { font-size: 1rem; margin-bottom: 12px; font-weight: 700; }
.footer p, .footer a { color: var(--text-muted); font-size: 0.9rem; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 6px; }
.footer-bottom { text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; }

/* ===== ADMIN ===== */
.admin-layout { display: flex; min-height: 100vh; background: linear-gradient(180deg, var(--bg) 0%, #06080f 100%); }
.admin-sidebar {
  width: 240px; background: linear-gradient(180deg, var(--bg-card) 0%, rgba(11,13,26,0.95) 100%);
  border-right: 1px solid var(--border);
  padding: 24px 0; position: fixed; height: 100vh; overflow-y: auto;
  backdrop-filter: blur(8px);
}
.admin-sidebar .logo { padding: 0 22px; margin-bottom: 28px; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.3px; }
.admin-nav a {
  display: flex; align-items: center; gap: 11px; padding: 11px 22px;
  color: var(--text-muted); font-size: 0.9rem; transition: all 0.18s ease;
  border-left: 3px solid transparent; position: relative;
}
.admin-nav { display: flex; flex-direction: column; min-height: calc(100vh - 120px); }
.admin-nav a:hover { color: var(--text); background: rgba(212,168,67,0.06); border-left-color: rgba(212,168,67,0.4); }
.admin-nav a.active { color: var(--accent); background: rgba(212,168,67,0.1); border-left-color: var(--accent); font-weight: 600; }
.nav-group-label {
  padding: 14px 22px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.55;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.admin-nav > .nav-group-label:first-of-type { border-top: none; margin-top: 10px; }
.admin-main { flex: 1 1 auto; margin-left: 240px; padding: 28px 32px; min-width: 0; width: calc(100% - 240px); box-sizing: border-box; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.admin-header h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.2px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 30px; }
.stat-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(11,13,26,0.6) 100%);
  border: 1px solid var(--border); border-radius: 12px; padding: 20px;
  transition: all 0.2s ease; position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}
.stat-card:hover { transform: translateY(-2px); border-color: rgba(212,168,67,0.3); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.stat-card .label { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }
.stat-card .value { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.5px; }
.stat-card .value.accent { color: var(--accent); }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: 10px 14px; background: var(--bg-card); border-bottom: 1px solid var(--border); font-size: 0.82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:hover td { background: var(--bg-card); }
.admin-table .thumb { width: 80px; height: 112px; border-radius: 6px; background: #1a1e3d; overflow: hidden; display: flex; align-items: center; justify-content: center; position: relative; cursor: zoom-in; transition: transform 0.15s ease, z-index 0s; }
.admin-table .thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-table .thumb:hover { transform: scale(2.6); z-index: 50; box-shadow: 0 12px 32px rgba(0,0,0,0.65); }
.admin-table tr:hover .thumb:not(:hover) { transition-delay: 0s; }
.admin-actions { display: flex; gap: 8px; }
.admin-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; width: 100%; max-width: 400px; }
.login-box h1 { text-align: center; margin-bottom: 8px; }
.login-box .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 24px; }
.image-preview { width: 120px; height: 160px; border: 2px dashed var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; color: var(--text-muted); font-size: 0.85rem; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ===== PAYMENT METHOD ===== */
.payment-methods { display: flex; gap: 12px; margin-bottom: 16px; }
.payment-method-option {
  flex: 1; padding: 16px; background: var(--bg-input); border: 2px solid var(--border);
  border-radius: var(--radius); cursor: pointer; text-align: center; transition: all 0.2s;
}
.payment-method-option:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.payment-method-option input { display: none; }
.payment-method-option .method-icon { font-size: 1.5rem; margin-bottom: 6px; }
.payment-method-option .method-name { font-weight: 600; font-size: 0.9rem; }

/* ===== CHECKOUT PROGRESS INDICATOR ===== */
.checkout-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 28px; padding: 0 20px;
}
.progress-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; flex: 1; max-width: 140px;
}
.progress-step-circle {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border);
  background: var(--bg-card); display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted); z-index: 1; position: relative;
  transition: all 0.3s;
}
.progress-step.active .progress-step-circle {
  background: var(--accent); border-color: var(--accent); color: #000;
}
.progress-step.completed .progress-step-circle {
  background: var(--success); border-color: var(--success); color: #fff;
}
.progress-step-label {
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px;
}
.progress-step.active .progress-step-label { color: var(--accent); }
.progress-step.completed .progress-step-label { color: var(--success); }
.progress-connector {
  flex: 1; height: 2px; background: var(--border); margin-top: -22px; max-width: 60px;
}
.progress-connector.completed { background: var(--success); }

/* ===== ACTIVE FILTER CHIPS ===== */
.active-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px;
}
.active-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 12px; border-radius: 50px;
  background: var(--accent-light); border: 1px solid var(--accent);
  color: var(--accent); font-size: 0.78rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s;
}
.active-filter-chip:hover { background: var(--accent); color: #000; }
.active-filter-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(212,168,67,0.3); font-size: 0.65rem; font-weight: 900;
  line-height: 1;
}
.active-filter-chip:hover .active-filter-chip-x { background: rgba(0,0,0,0.2); }
.active-filters-clear {
  font-size: 0.75rem; color: var(--text-muted); text-decoration: underline;
  cursor: pointer; background: none; border: none; padding: 0; transition: color 0.2s;
}
.active-filters-clear:hover { color: var(--danger); }

/* ===== HAMBURGER MOBILE NAV ===== */
.hamburger-btn {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 4px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  transition: background 0.2s;
}
.hamburger-btn:hover { background: var(--bg-card-hover); }
.hamburger-btn span {
  display: block; width: 100%; height: 2px; background: var(--text);
  border-radius: 2px; transition: all 0.3s;
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links.mobile-open {
  display: flex !important; flex-direction: column; align-items: flex-end;
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 200;
  background: rgba(11,13,26,0.97); backdrop-filter: blur(16px);
  padding: 80px 24px 24px; gap: 20px;
}
.nav-links.mobile-open a { font-size: 1.1rem; color: var(--text); }
.nav-links.mobile-open .cart-link { position: static; padding: 12px 20px; }
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,0.5);
}
.nav-overlay.active { display: block; }

/* ===== FORM VALIDATION ===== */
.form-control.error { border-color: var(--danger) !important; }
.field-error {
  color: var(--danger); font-size: 0.78rem; margin-top: 4px; display: flex; align-items: center; gap: 4px;
}
.field-error::before { content: '!'; display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: var(--danger);
  color: #fff; font-size: 0.65rem; font-weight: 900; flex-shrink: 0;
}

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--bg-card); border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius); padding: 12px 16px 12px 18px; color: var(--text);
  font-weight: 500; z-index: 1000;
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px;
  max-width: 360px;
}
.toast.toast-error { border-color: var(--danger); }
.toast.leaving { animation: toastOut 0.25s ease forwards; }
.toast-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--accent);
  font-size: 0.8rem; font-weight: 800; line-height: 1;
}
.toast.toast-error .toast-icon { background: rgba(239,68,68,0.15); color: var(--danger); }
.toast-message { flex: 1; min-width: 0; }
.toast-close {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0; flex-shrink: 0; transition: color 0.2s;
}
.toast-close:hover { color: var(--text); }
@keyframes toastIn { from { transform: translateY(24px) scale(0.9); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toastOut { to { transform: translateY(8px); opacity: 0; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.leaving { animation: none; }
}

/* Cart Toast (with image) */
.cart-toast {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001;
  background: var(--bg-card); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 20px 28px; box-shadow: 0 12px 60px rgba(0,0,0,0.6);
  animation: cartToastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: all 0.3s ease; max-width: calc(100vw - 32px);
}
.cart-toast.leaving { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
@keyframes cartToastIn { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.cart-toast-inner { display: flex; align-items: center; gap: 14px; }
.cart-toast-inner img { width: 56px; height: 78px; object-fit: contain; border-radius: 6px; background: #1a1e3d; flex-shrink: 0; }
.cart-toast-info { min-width: 0; flex: 1; }
.cart-toast-check { color: var(--success); font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
.cart-toast-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cart-toast-qty { font-size: 0.78rem; color: var(--text-muted); }
.cart-toast-close {
  align-self: flex-start; background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 8px; flex-shrink: 0; transition: color 0.2s;
}
.cart-toast-close:hover { color: var(--text); }

/* Button spinner */
.btn-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,0.2); border-top-color: #000;
  border-radius: 50%; animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.add-cart-btn.btn-added { background: var(--success); color: #fff; }

/* ===== WISHLIST BUTTON ===== */
.wish-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.25s ease;
  line-height: 1;
}
.product-card:hover .wish-btn, .wish-btn.wishlisted { opacity: 1; }
.wish-btn:hover { transform: scale(1.15); background: rgba(0,0,0,0.7); }
.wish-btn.wishlisted {
  color: #ef4444; background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
}
.wish-btn.wishlisted::after { content: ''; }
/* Inline wishlist button (next to Add to Cart) */
.wish-btn-inline {
  position: static;
  opacity: 1;
  flex-shrink: 0;
  width: 32px; height: 32px;
}
.out-of-stock { display: flex; align-items: center; justify-content: space-between; }

/* ===== PROFILE PAGE ===== */
.profile-layout { max-width: 700px; margin: 0 auto; }
.profile-back { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 0.9rem; margin-bottom: 8px; }
.profile-header { text-align: center; margin-bottom: 30px; }
.profile-header h2 { font-size: 1.6rem; font-weight: 700; }
.profile-section {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; margin-bottom: 20px;
}
.profile-section h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.profile-field { margin-bottom: 18px; }
.profile-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 4px; }
.profile-value { font-size: 1rem; font-weight: 500; color: var(--text); word-break: break-word; }
.profile-value.muted { color: var(--text-muted); font-style: italic; }
.profile-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.profile-actions .btn { min-width: 140px; }
.btn-outline-danger {
  background: transparent; border: 1px solid var(--danger); color: var(--danger);
  padding: 10px 20px; border-radius: var(--radius); font-weight: 600; cursor: pointer; font-size: 0.9rem;
  transition: all 0.2s;
}
.btn-outline-danger:hover { background: rgba(239,68,68,0.1); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 10px 20px; border-radius: var(--radius); font-weight: 600; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; }
.btn-outline:hover { border-color: var(--text-muted); }

/* Edit profile modal */
.modal-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 500; align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto;
  animation: slideUp 0.3s ease;
}
.modal-box h3 { margin-bottom: 20px; }
.modal-close {
  float: right; background: none; border: none; color: var(--text-muted);
  font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* ===== SET SUMMARY BAR ===== */
.set-summary-bar {
  display: flex; gap: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 20px; overflow: hidden;
}
.set-summary-item {
  flex: 1; padding: 14px 16px; text-align: center;
  border-right: 1px solid var(--border);
}
.set-summary-item:last-child { border-right: none; }
.set-summary-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; }
.set-summary-value { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.set-summary-total { background: var(--accent-light); }
.set-summary-total .set-summary-value { color: var(--accent); font-size: 1.2rem; }

/* ===== SETS GRID ===== */
.sets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.set-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; transition: all 0.3s; text-decoration: none; color: var(--text);
}
.set-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(212,168,67,0.1); }
.set-card-img {
  width: 80px; height: 80px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #1a1e3d, #0f1228);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.set-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.set-card-icon { font-size: 2rem; }
.set-card-info { flex: 1; min-width: 0; }
.set-card-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.set-card-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.set-card-number { font-size: 0.68rem; font-weight: 700; background: var(--accent-light); color: var(--accent); padding: 2px 8px; border-radius: 50px; white-space: nowrap; flex-shrink: 0; }
.set-card-stats { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.set-card-dot { margin: 0 4px; }
.set-card-stock { color: var(--success); }
.set-card-value { font-size: 0.82rem; color: var(--text-muted); }
.set-card-value strong { color: var(--accent); }

/* ===== 404 ===== */
.page-404 { text-align: center; padding: 80px 20px; }
.page-404 .error-icon { font-size: 4rem; margin-bottom: 16px; opacity: 0.7; }
.page-404 h1 { font-size: 5rem; color: var(--accent); }
.page-404 p { color: var(--text-muted); margin: 16px 0 24px; }
.page-404 .error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  padding: 4px 10px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.lang-toggle:hover {
  background: var(--accent);
  color: #000;
}

/* ===== RESPONSIVE ===== */

/* --- Large desktop / small laptop (<=1200px): 4 columns --- */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- iPad landscape (<=1024px): 4 columns --- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .product-page-layout { grid-template-columns: 1fr 280px; gap: 20px; }
  .product-detail { grid-template-columns: 300px 1fr; gap: 24px; }

  .hero h1 { font-size: 2.2rem; }
  .hero { padding: 44px 30px; }

  .container { padding: 0 16px; }
}

/* --- iPad portrait (<=768px): 3 columns, sidebar collapses --- */
@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }

  /* Header: stack search below logo/nav */
  .header .container {
    flex-wrap: wrap;
  }
  .search-container {
    order: 10;
    flex: 0 0 100%;
    min-width: 0;
    margin-top: 8px;
  }
  .search-bar select { display: none; }
  .nav-links { display: none; gap: 10px; }
  .nav-links a { font-size: 0.8rem; }
  .hamburger-btn { display: flex; }

  /* Sidebar: side drawer on mobile, opens from left */
  .products-layout { flex-direction: column; }
  .sidebar-filter {
    display: block;
    width: 85%;
    max-width: 360px;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    max-height: 100vh;
    z-index: 500;
    border-radius: 0 14px 14px 0;
    border: none;
    overflow-y: auto;
    padding: 68px 20px 24px;
    background: #0a0c18;
    box-shadow: 8px 0 30px rgba(0,0,0,0.45);
    transform: translateX(-105%);
    transition: transform 0.26s cubic-bezier(.4,.0,.2,1);
    -webkit-overflow-scrolling: touch;
  }
  .sidebar-filter.open {
    transform: translateX(0);
  }
  .sidebar-filter form {
    max-height: none;
    padding: 0;
  }
  /* Backdrop */
  .sidebar-filter-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 499;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }
  .sidebar-filter-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  /* Close (X) button — floats at top-right of viewport, outside the drawer */
  .sidebar-close {
    position: fixed;
    top: 14px; right: 14px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(10,12,24,0.82);
    border: 1.5px solid rgba(255,255,255,0.8);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 501;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
  }
  .sidebar-close.open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }
  .sidebar-close.open:active { transform: scale(0.94); }
  /* Body scroll lock when drawer open */
  body.body-no-scroll { overflow: hidden; touch-action: none; }
  .sidebar-toggle-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
  }

  /* Hero */
  .hero h1 { font-size: 1.8rem; }
  .hero { padding: 30px 20px; margin-bottom: 24px; }
  .hero p { font-size: 0.95rem; }

  /* Product page: sidebar below on mobile */
  .product-page-layout {
    grid-template-columns: 1fr;
  }
  .product-detail {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .product-image-col { position: static; }
  .product-detail .product-image-main { max-width: 400px; margin: 0 auto; }
  .product-info h1 { font-size: 1.4rem; }
  .product-price-big { font-size: 2rem; }
  .product-sidebar {
    position: static; max-height: none;
  }
  .mobile-buy-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: var(--bg-card); border-top: 1px solid var(--border);
    padding: 12px 16px; align-items: center; justify-content: space-between; gap: 12px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  }
  .mobile-buy-price { font-size: 1.3rem; font-weight: 800; color: var(--accent); }
  .mobile-buy-btn { font-size: 0.95rem; padding: 12px 24px; border-radius: 10px; white-space: nowrap; }
  .sidebar-cards { flex-direction: row; flex-wrap: wrap; }
  .sidebar-card { flex: 1 1 calc(50% - 5px); min-width: 180px; }

  /* Checkout */
  .co-layout { grid-template-columns: 1fr; }
  .co-right { position: static; }

  /* Cart: stack layout on mobile */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary-col { position: static; }
  .cart-row { flex-wrap: wrap; gap: 10px; }
  .cart-row-right { width: 100%; justify-content: space-between; margin-top: 4px; padding-left: 66px; }
  .cart-row-name { white-space: normal; }

  /* Footer: stack columns */
  .footer-content { grid-template-columns: 1fr; gap: 20px; }
  .footer { padding: 24px 0; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* Admin */
  .admin-sidebar { display: none; }
  .admin-main { margin-left: 0; padding: 16px; }

  /* Pagination */
  .pagination { gap: 4px; }
  .pagination-btn { min-width: 34px; height: 34px; font-size: 0.82rem; padding: 0 8px; }

  /* Payment */
  .payment-methods { flex-direction: column; }
  .payment-box { padding: 24px 16px; }
  .qr-code img { width: 200px; height: 200px; }
}

/* --- Mobile (<=480px): 2 columns, fully stacked --- */
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* Header: compact mobile layout */
  .header { padding: 10px 0; }
  .header .container { gap: 10px; }
  .logo { font-size: 1.15rem; }
  .logo-icon { font-size: 1.3rem; }
  .nav-links { gap: 6px; }
  .nav-links a { font-size: 0.72rem; }
  .cart-link { padding: 6px 10px; font-size: 0.82rem; }
  .cart-badge { width: 16px; height: 16px; font-size: 0.6rem; }

  /* Search bar compact */
  .search-bar input { padding: 8px 10px; font-size: 0.85rem; }
  .search-bar button { padding: 8px 12px; font-size: 0.82rem; }

  /* Container */
  .container { padding: 0 10px; }
  .page-content { padding: 16px 0; }

  /* Product cards: horizontal list layout on mobile (like Fizzy) */
  .product-grid { grid-template-columns: 1fr; gap: 10px; }
  .product-card { flex-direction: row; }
  .product-card:hover { transform: none; }
  .product-card-link { display: flex; flex-direction: row; width: 40%; flex-shrink: 0; }
  .product-card-link .product-card-info { display: none; }
  .product-card-link .product-card-image { aspect-ratio: 3/4; width: 100%; border-radius: 0; }
  .product-card-bottom {
    padding: 10px 12px; display: flex; flex-direction: column;
    justify-content: center; flex: 1; min-width: 0;
  }
  .product-card-bottom .product-card-price {
    font-size: 1.05rem; text-align: left; margin-bottom: 8px;
  }
  .product-card-cart { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
  .desktop-qty { display: none; }
  /* Mobile qty stepper widget */
  .qty-mob {
    display: flex; align-items: center; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  }
  .qty-mob .qty-btn {
    width: 32px; height: 36px; font-size: 1.1rem; font-weight: 700;
    background: var(--bg-input); color: var(--text); border: none;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .qty-mob .qty-btn:active { background: rgba(212,168,67,0.15); }
  .qty-mob .qty-input-mob {
    display: block; width: 36px; height: 36px; text-align: center;
    border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    background: var(--bg-card); color: var(--text); font-size: 15px; font-weight: 600;
    -moz-appearance: textfield; -webkit-appearance: none; padding: 0;
  }
  .add-cart-btn { padding: 8px 10px; font-size: 0.72rem; flex: 1; min-height: 36px; border-radius: 6px; }
  /* Recently Viewed uses .add-cart-btn as a navigation link with no .product-card-cart wrapper.
     Without this override, flex:1 on the button + flex-direction:column on the parent stretches
     it to fill the row height (188×133 instead of ~150×36). */
  .product-card-bottom > .add-cart-btn { flex: 0 0 auto; }
  .wish-btn-inline { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
  .product-card-stock { font-size: 0.72rem; }
  /* Mobile: zoom-btn visible always (no hover state). Sized 40px tap target
     per WCAG 2.5.5 minimum + drop-shadow so it pops over light card art. */
  .zoom-btn { opacity: 1; width: 40px; height: 40px; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  /* Show name+set+stock on mobile cards */
  .mob-card-name { display: block; font-weight: 600; font-size: 0.82rem; color: var(--text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-card-set { display: block; font-size: 0.68rem; color: var(--text-muted); margin-bottom: 4px; }
  .mob-card-stock { display: block; font-size: 0.68rem; color: var(--success); margin-bottom: 6px; }

  /* Hero */
  .hero h1 { font-size: 1.4rem; }
  .hero p { font-size: 0.85rem; }
  .hero { padding: 20px 14px; margin-bottom: 16px; }
  .promo-banner { padding: 24px 16px; margin-bottom: 20px; }
  .promo-title { font-size: 1.4rem; }
  .promo-percent { font-size: 2.2rem; }
  .promo-code { font-size: 1.1rem; letter-spacing: 2px; }
  .promo-code-label { font-size: 0.7rem; padding: 8px 6px 8px 12px; }
  .promo-copy-btn { padding: 8px 12px; }
  .sparkle.s1, .sparkle.s4 { display: none; }

  /* Deck detail responsive */
  .deck-stats-bar2 { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .deck-stat2 { padding: 8px 10px; }
  .deck-stat2-value { font-size: 0.88rem; }
  .deck-hero { padding: 24px 16px 20px; margin: -30px -16px 16px; }
  .deck-hero-name { font-size: 1.3rem; }
  .deck-hero-inks img { width: 34px; height: 34px; }
  .deck-card-row { padding: 6px 8px; gap: 8px; }
  .deck-card-img2 { width: 36px; height: 50px; }
  .deck-card-name2 { font-size: 0.78rem; }
  .deck-card-price2 { font-size: 0.75rem; }

  /* Section headers */
  .section-header h1, .section-header h2 { font-size: 1.1rem; }
  .section { margin-bottom: 28px; }

  /* Product detail */
  .product-detail { gap: 12px; }
  .product-detail .product-image-main { max-width: 300px; }
  .product-info h1 { font-size: 1.2rem; }
  .product-price-big { font-size: 1.6rem; margin-bottom: 14px; }
  .product-stock-info { padding: 10px 12px; font-size: 0.82rem; }
  .product-add-row { flex-wrap: wrap; }
  .product-add-btn { font-size: 0.9rem; padding: 12px 16px; }
  .product-add-row .qty-btn { width: 40px; height: 40px; }
  .product-add-row input { width: 44px; height: 40px; }
  .sidebar-card { flex: 1 1 100%; min-width: 0; }

  /* Sidebar overlay adjustments */
  .sidebar-filter {
    padding: 16px;
  }
  .sidebar-toggle-mobile { font-size: 0.78rem; padding: 6px 10px; }

  /* Category tags */
  .category-tags { gap: 6px; margin-bottom: 16px; }
  .category-tag { padding: 6px 12px; font-size: 0.78rem; }

  /* Filter tags */
  .filter-tag { padding: 4px 10px; font-size: 0.75rem; }

  /* Cart mobile small */
  .cart-row-right { padding-left: 0; }
  .cart-row-img { width: 44px; height: 62px; }
  .cart-row-name { font-size: 0.85rem; }
  .cart-summary-box { padding: 16px; }
  .cart-summary-total-line { font-size: 1rem; }

  /* Checkout */
  .co-layout { gap: 12px; }

  /* Payment */
  .payment-box .amount { font-size: 1.6rem; }
  .qr-code img { width: 180px; height: 180px; }

  /* Auth */
  .auth-box { padding: 24px 16px; }

  /* Footer */
  .footer { padding: 20px 0; margin-top: 24px; }
  .footer h2 { font-size: 0.9rem; }
  .footer p, .footer a { font-size: 0.82rem; }
  .footer-bottom { font-size: 0.78rem; }

  /* Admin */
  .admin-header h1 { font-size: 1.2rem; }
  .admin-header { flex-wrap: wrap; gap: 10px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .value { font-size: 1.3rem; }
  .admin-table { font-size: 0.82rem; }

  /* Order timeline */
  .order-timeline { flex-direction: column; align-items: flex-start; gap: 4px; }
  .timeline-step::after { display: none; }

  /* Buttons */
  .btn { padding: 10px 18px; font-size: 0.88rem; }
  .btn-lg { padding: 12px 24px; font-size: 0.95rem; }

  /* 404 */
  .page-404 h1 { font-size: 3.5rem; }
  .page-404 { padding: 50px 16px; }

  /* Toast */
  .toast { left: 10px; right: 10px; bottom: 10px; text-align: center; }

  /* Language toggle */
  .lang-toggle { padding: 3px 8px; font-size: 0.68rem; }
}

/* ===== ORDER TABS ===== */
.order-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.order-tab {
  padding: 8px 16px; border-radius: 20px; font-size: 0.85rem;
  border: 1px solid var(--border); color: var(--text-muted);
  text-decoration: none; transition: all 0.2s;
}
.order-tab:hover { border-color: var(--accent); color: var(--accent); }
.order-tab.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }

/* ===== ORDER CARDS ===== */
.order-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
}
.order-card-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.order-card-body { padding: 16px 20px; }
.order-card-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.9rem;
}
.order-card-row:last-child { border-bottom: none; }
.order-card-row span:first-child { color: var(--text-muted); }
.order-card-footer { padding: 12px 20px; border-top: 1px solid var(--border); }

/* ===== FIZZY-STYLE ORDER STATUS TABS ===== */
.order-status-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.order-status-tab {
  padding: 7px 18px; border-radius: 20px; font-size: 0.82rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.order-status-tab:hover { border-color: var(--accent); color: var(--accent); }
.order-status-tab.active { background: var(--accent); color: #000; border-color: var(--accent); font-weight: 700; }

/* ===== FIZZY-STYLE ORDER CARDS GRID ===== */
.order-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.order-card-fizzy {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s;
}
.order-card-fizzy:hover { border-color: var(--accent); }
.order-card-fizzy-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.order-card-fizzy-number { font-weight: 700; font-size: 0.95rem; }
.order-card-fizzy-body { padding: 14px 18px; }
.order-card-fizzy-row {
  display: flex; justify-content: space-between; padding: 7px 0;
  font-size: 0.88rem; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.order-card-fizzy-row:last-child { border-bottom: none; }
.order-card-fizzy-row > span:first-child { color: var(--text-muted); }
.order-card-fizzy-row > span:last-child { font-weight: 500; text-align: right; }
.order-card-fizzy-total { font-weight: 700 !important; color: var(--accent); }
.order-card-fizzy-footer {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.order-card-fizzy-btn {
  padding: 6px 16px; font-size: 0.83rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); text-decoration: none; transition: all 0.2s;
  display: inline-block;
}
.order-card-fizzy-btn:hover { border-color: var(--accent); color: var(--accent); }
.order-card-fizzy-btn-pay {
  background: var(--accent); color: #000; border-color: var(--accent); font-weight: 600;
}
.order-card-fizzy-btn-pay:hover { background: var(--accent-hover); color: #000; }

@media (max-width: 768px) {
  .order-cards-grid { grid-template-columns: 1fr; }
}

/* Skip to content link */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--accent); color: #000; padding: 8px 16px;
  z-index: 10000; font-weight: 700; text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ===== MOBILE BOTTOM NAVIGATION ===== */
.mobile-bottom-nav {
  display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
    justify-content: space-around;
    align-items: center;
  }
  /* Audit 2026-05-22: cart-mobile-bar (Checkout CTA) lives at the same
     bottom:0 position and a lower z-index (~470). The bottom-nav was
     overlapping the gold "Checkout →" button, hiding the primary
     conversion target. On the cart page specifically, hide the nav so
     the CTA gets full prominence. server.js sets `currentPage='cart'`
     for /cart, which the body class picks up via `body.page-cart`. */
  body.page-cart .mobile-bottom-nav { display: none; }
  .bottom-nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.68rem;
    padding: 6px 8px 4px;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
    min-width: 60px;
    -webkit-tap-highlight-color: transparent;
  }
  /* Active state: gold bar above the item + icon scale + colour. The bar
     uses ::before instead of a separate element so it inherits colour
     transitions and stays absolutely positioned without disturbing the
     flex layout. */
  .bottom-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--accent);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .bottom-nav-item.active::before { transform: translateX(-50%) scaleX(1); }
  .bottom-nav-item:hover { color: var(--accent); }
  .bottom-nav-item.active {
    color: var(--accent);
  }
  .bottom-nav-item.active .bottom-nav-icon { transform: scale(1.08); }
  .bottom-nav-item:active { transform: scale(0.96); }
  @media (prefers-reduced-motion: reduce) {
    .bottom-nav-item, .bottom-nav-item::before, .bottom-nav-item .bottom-nav-icon {
      transition: none;
    }
  }
  .bottom-nav-icon {
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottom-nav-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .bottom-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--danger);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  /* Adjust body/footer for bottom nav space */
  body { padding-bottom: 64px; }
  .footer { margin-bottom: 0; }

  /* Hide hamburger button in header when bottom nav is present */
  .hamburger-btn { display: none !important; }

  /* Move cookie banner above bottom nav */
  .cookie-banner { bottom: 64px; }

  /* Move mobile buy bar above bottom nav */
  .mobile-buy-bar { bottom: 64px; }
}

/* Cookie Consent Banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 16px 24px; z-index: 9000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cookie-banner-text { flex: 1; min-width: 200px; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; }
.cookie-banner-text a { color: var(--accent); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn {
  padding: 8px 20px; border: none; border-radius: var(--radius);
  font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: all 0.2s;
}
.cookie-btn-accept { background: var(--accent); color: #000; }
.cookie-btn-accept:hover { background: #e8b84a; }
.cookie-btn-decline { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
.cookie-btn-decline:hover { border-color: var(--text); color: var(--text); }

/* ===== TRACK ORDER PAGE ===== */
.track-search-box {
  max-width: 500px; margin: 40px auto 30px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 32px;
}
.track-search-box h1 { font-size: 1.4rem; margin-bottom: 16px; }
.track-search-box .form-group { margin-bottom: 12px; }
.track-search-box .form-control {
  width: 100%; padding: 12px 16px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-size: 0.95rem; text-align: center;
}
.track-search-box .form-control:focus { outline: none; border-color: var(--accent); }
.track-search-box .btn-block { width: 100%; }

.track-results { max-width: 700px; margin: 0 auto; }
.track-results-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.track-back-link {
  font-size: 1.4rem; color: var(--text-muted); line-height: 1;
  transition: color 0.2s;
}
.track-back-link:hover { color: var(--accent); }
.track-results-header h2 { font-size: 1.2rem; font-weight: 700; }

.track-tabs {
  display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto;
  padding-bottom: 4px; flex-wrap: wrap;
}
.track-tab {
  padding: 7px 14px; border-radius: 20px; font-size: 0.8rem;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.track-tab:hover { border-color: var(--accent); color: var(--accent); }
.track-tab.active {
  background: var(--accent); color: #000; border-color: var(--accent);
  font-weight: 700;
}

.track-order-list { display: flex; flex-direction: column; gap: 12px; }
.track-order-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: all 0.2s;
}
.track-order-card:hover { border-color: rgba(212,168,67,0.3); }
.track-order-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.track-order-number { font-weight: 700; font-size: 0.95rem; }
.track-order-body { padding: 12px 18px; }
.track-order-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 0.88rem;
}
.track-order-row + .track-order-row { border-top: 1px solid rgba(255,255,255,0.04); }
.track-label { color: var(--text-muted); font-size: 0.82rem; }
.track-value { font-weight: 500; }
.track-order-footer {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end;
}

/* Status badges */
.status-badge {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.status-pending { background: rgba(234,179,8,0.15); color: var(--warning); }
.status-reviewing { background: rgba(124,92,191,0.15); color: var(--purple-text); }
.status-paid { background: rgba(59,130,246,0.15); color: #60a5fa; }
.status-shipped { background: rgba(34,197,94,0.15); color: var(--success); }
.status-completed { background: rgba(34,197,94,0.25); color: var(--success); }
.status-cancelled { background: rgba(239,68,68,0.15); color: var(--danger-text); }

@media (max-width: 480px) {
  .track-search-box { margin: 20px auto; padding: 24px 16px; }
  .track-search-box h1 { font-size: 1.2rem; }
  .track-tabs { gap: 4px; }
  .track-tab { padding: 5px 10px; font-size: 0.72rem; }
  .track-order-top, .track-order-body, .track-order-footer { padding-left: 14px; padding-right: 14px; }
  .track-order-row { font-size: 0.82rem; }
}

/* ===== FOIL BADGE ===== */
.foil-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, #c0a44d 0%, #f5e6a3 35%, #fff6c8 50%, #f5e6a3 65%, #c0a44d 100%);
  color: #1a1a2e;
  vertical-align: middle;
  letter-spacing: 0.5px;
}
.error-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, #dc2626, #ef4444, #dc2626);
  color: #fff;
  vertical-align: middle;
  letter-spacing: 0.5px;
  margin-right: 2px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.rarity-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}
.rarity-enchanted {
  background: linear-gradient(135deg, #8b5cf6, #d946ef, #8b5cf6);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.rarity-legendary {
  background: linear-gradient(135deg, #c0a44d 0%, #f5e6a3 35%, #fff6c8 50%, #f5e6a3 65%, #c0a44d 100%);
  color: #1a1a2e;
}
.rarity-super-rare {
  background: linear-gradient(135deg, #2563eb, #60a5fa, #2563eb);
  color: #fff;
}
.rarity-iconic {
  background: linear-gradient(135deg, #dc2626, #f87171, #dc2626);
  color: #fff;
}
.rarity-promo {
  background: linear-gradient(135deg, #059669, #34d399, #059669);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* P11: Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* P10: Screen-reader only text for accessibility */
.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;
}

/* P25: Minimum touch target for mobile buttons */
@media (max-width: 768px) {
  .qty-btn {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==================== Deck Import — Missing Cards Panel ==================== */
.deck-missing-panel {
  margin: 20px 0 24px;
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(212,168,67,0.06));
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 14px;
  padding: 18px 20px;
}
.deck-missing-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.deck-missing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.deck-missing-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.deck-missing-stat-owned { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.08); }
.deck-missing-stat-buy   { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.08); }
.deck-missing-stat-cost  { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); }
.deck-missing-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 4px;
}
.deck-missing-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.deck-missing-stat-owned .deck-missing-value { color: #60a5fa; }
.deck-missing-stat-buy   .deck-missing-value { color: #fbbf24; }
.deck-missing-stat-cost  .deck-missing-value { color: #10b981; }
.deck-missing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.deck-missing-btn-primary {
  padding: 14px 28px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(212,168,67,0.3);
  min-height: 56px;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}
.deck-missing-btn-sub {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.85;
}
.deck-missing-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .deck-missing-panel { padding: 14px 12px; }
  .deck-missing-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .deck-missing-value { font-size: 1.1rem; }
  .deck-missing-stat { padding: 8px 6px; }
  .deck-missing-btn-primary { padding: 12px 20px !important; font-size: 0.95rem !important; }
}

/* Owned count input inline with card row — matches product-card .qty-mob look */
.deck-owned-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  flex-wrap: nowrap;
}
.deck-owned-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.deck-owned-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.deck-owned-stepper .qty-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: none;
  background: var(--bg-input);
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}
.deck-owned-stepper .qty-btn:hover { background: var(--bg-card-hover); }
.deck-owned-stepper .qty-btn:active { background: rgba(212,168,67,0.15); }
.deck-owned-stepper .deck-owned-input {
  width: 40px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  padding: 0;
  -moz-appearance: textfield;
  flex-shrink: 0;
}
.deck-owned-stepper .deck-owned-input::-webkit-outer-spin-button,
.deck-owned-stepper .deck-owned-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.deck-owned-stepper .deck-owned-input:focus {
  outline: none;
  background: var(--bg-card);
  border-left-color: var(--border);
  border-right-color: var(--border);
}
.deck-owned-of {
  opacity: 0.75;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* Notify-when-restocked link on sold-out deck cards */
.deck-notify-link {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.deck-notify-link:hover {
  background: rgba(59,130,246,0.2);
  color: #93c5fd;
  text-decoration: none;
}

/* ===== BACK-TO-TOP BUTTON ===== */
.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 78px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(212,168,67,0.95);
  color: #1a1a2e;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 90;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: #e6b955; }
.back-to-top:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; }
.back-to-top svg { width: 20px; height: 20px; }
@media (min-width: 769px) {
  .back-to-top { bottom: 24px; right: 24px; width: 48px; height: 48px; }
}

/* ===== CATEGORY PILL COUNT BADGE ===== */
.category-pill .cat-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 10px;
  background: rgba(212,168,67,0.18);
  color: #d4a843;
  vertical-align: middle;
  line-height: 1.4;
}
.category-pill.is-active .cat-count {
  background: rgba(26,26,46,0.25);
  color: inherit;
}

/* ===== EMPTY CART — give the icon an actual glyph ===== */
.cart-empty-icon::before {
  content: '\1F6D2';  /* 🛒 shopping cart emoji */
  font-size: 3.5rem;
  display: inline-block;
  filter: grayscale(0.3);
}