/* ============================================================
   10 THEMES — body.theme-<name> { ... }
   Меняются через переключатель в верхней панели.
   ============================================================ */

/* =========================================================
   1. CURRENT — текущий тёмно-серый постер
   ========================================================= */
body.theme-current {
  background: #4a4a4a;
  color: #fff;
}
body.theme-current .card {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
body.theme-current .card-price { color: #1a1a1a; }
body.theme-current .card-bottom { color: #1a1a1a; }

/* =========================================================
   2. PURE APPLE MINIMAL — белый фон, как apple.com/shop
   ========================================================= */
body.theme-pure-apple {
  background: #f5f5f7;
  color: #1d1d1f;
  font-family: 'Inter', -apple-system, sans-serif;
}
body.theme-pure-apple .site-header,
body.theme-pure-apple .site-footer {
  border-color: rgba(0,0,0,0.08);
}
body.theme-pure-apple .hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1d1d1f;
}
body.theme-pure-apple .card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.06);
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 16px;
}
body.theme-pure-apple .card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.08);
}
body.theme-pure-apple .card-tile {
  background: linear-gradient(180deg, #fff 0%, #f5f5f7 100%) !important;
  color: #1d1d1f;
  min-height: 120px;
  padding: 18px 22px 14px;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.theme-pure-apple .card-tile .nominal {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1d1d1f;
}
body.theme-pure-apple .card-tile .apple { fill: #1d1d1f; width: 20px; height: 20px; }
body.theme-pure-apple .card-tile .label {
  font-size: 13px;
  color: rgba(0,0,0,0.45);
  font-weight: 500;
}
body.theme-pure-apple .card-bottom {
  padding: 12px 22px 14px;
}
body.theme-pure-apple .card-price {
  color: #1d1d1f;
  font-size: 20px;
}
body.theme-pure-apple .card-btn {
  background: #0071e3;
  border-radius: 980px;
  padding: 8px 20px;
  font-size: 14px;
}
body.theme-pure-apple .card-btn:hover { background: #0077ed; }
body.theme-pure-apple .card-btn.in-cart { background: #1d1d1f; }
body.theme-pure-apple .catalog-footer { color: rgba(0,0,0,0.55); }

/* =========================================================
   3. DARK GLASS — глубокий фиолетово-синий, frosted glass
   ========================================================= */
body.theme-dark-glass {
  background: radial-gradient(ellipse at top left, #1a0b2e 0%, #0a0a1a 50%, #000010 100%);
  color: #fff;
  min-height: 100vh;
}
body.theme-dark-glass .hero h1 {
  background: linear-gradient(135deg, #fff 0%, #a0c4ff 60%, #c8b6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.theme-dark-glass .card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
}
body.theme-dark-glass .card-tile {
  background: linear-gradient(135deg,
    rgba(var(--tile-rgb, 100,100,200), 0.7) 0%,
    rgba(var(--tile-rgb, 100,100,200), 0.3) 100%),
    var(--tile-color, #4a4a8a) !important;
  position: relative;
  overflow: hidden;
}
body.theme-dark-glass .card-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.25) 0%, transparent 50%);
  pointer-events: none;
}
body.theme-dark-glass .card-price { color: #fff; }
body.theme-dark-glass .card-btn {
  background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
body.theme-dark-glass .card-btn:hover {
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.6);
}
body.theme-dark-glass .site-header,
body.theme-dark-glass .site-footer { border-color: rgba(255,255,255,0.08); }

/* =========================================================
   4. NEOBRUTALISM — жирные чёрные рамки, оффсет-тени
   ========================================================= */
body.theme-neobrutal {
  background: #fff8e7;
  color: #000;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
body.theme-neobrutal .hero h1 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
body.theme-neobrutal .card {
  background: #fff;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 6px 6px 0 0 #000;
  padding: 12px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.theme-neobrutal .card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 0 #000;
}
body.theme-neobrutal .card-tile {
  border-radius: 0;
  border: 3px solid #000;
  font-family: 'Space Grotesk', sans-serif;
}
body.theme-neobrutal .card-tile .nominal {
  font-weight: 700;
  font-size: 26px;
}
body.theme-neobrutal .card-price {
  color: #000;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}
body.theme-neobrutal .card-btn {
  background: #000;
  border-radius: 0;
  border: 3px solid #000;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
}
body.theme-neobrutal .card-btn:hover { background: #ff5722; color: #000; }
body.theme-neobrutal .logo {
  background: #000;
  color: #fff;
  padding: 4px 12px;
}

/* =========================================================
   5. HOLOGRAPHIC — переливающиеся карточки
   ========================================================= */
body.theme-holographic {
  background: #0a0a1a;
  color: #fff;
}
body.theme-holographic .hero h1 {
  background: linear-gradient(90deg, #ff006e, #fb5607, #ffbe0b, #8338ec, #3a86ff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-shift 6s linear infinite;
}
@keyframes holo-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
body.theme-holographic .card {
  background: #1a1a2e;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
body.theme-holographic .card-tile {
  background: linear-gradient(135deg, #ff006e 0%, #8338ec 25%, #3a86ff 50%, #06ffa5 75%, #ffbe0b 100%) !important;
  background-size: 300% 300%;
  animation: holo-shift 8s ease infinite;
  position: relative;
  overflow: hidden;
}
body.theme-holographic .card-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: holo-shine 3s ease infinite;
  pointer-events: none;
}
@keyframes holo-shine {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
body.theme-holographic .card-tile .nominal,
body.theme-holographic .card-tile .label {
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
body.theme-holographic .card-price { color: #fff; }
body.theme-holographic .card-btn {
  background: linear-gradient(135deg, #ff006e, #8338ec);
  border-radius: 999px;
}

/* =========================================================
   6. iOS WALLET STACK — карты как в Apple Wallet, раскрываются по клику
   ========================================================= */
body.theme-wallet {
  background: #000;
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
}
body.theme-wallet .hero {
  padding: 36px 0 16px;
}
body.theme-wallet .hero h1 {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
}
body.theme-wallet .catalog {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
  gap: 0;
  padding: 0 0 60px;
}
body.theme-wallet .card {
  padding: 0;
  background: transparent;
  margin-top: -100px;
  cursor: pointer;
  position: relative;
  z-index: calc(1 + var(--idx, 0));
  transition: margin-top 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.05), transform 0.3s ease;
}
body.theme-wallet .card:first-child { margin-top: 0; }
body.theme-wallet .card:hover {
  transform: scale(1.05) !important;
}
body.theme-wallet .card.wallet-expanded {
  margin-top: 16px;
  z-index: 60 !important;
}
body.theme-wallet .card.wallet-expanded + .card {
  margin-top: 20px;
}
body.theme-wallet .card-tile {
  border-radius: 16px;
  min-height: 180px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.4), 0 16px 32px rgba(0,0,0,0.6);
  padding: 22px 26px 22px;
}
body.theme-wallet .card-tile .nominal { font-size: 26px; }
body.theme-wallet .card-tile .label {
  font-size: 14px;
  opacity: 0.85;
}
body.theme-wallet .card-bottom {
  display: none;
}
body.theme-wallet .select-btn {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.1);
  border-radius: 0 0 16px 16px;
  padding: 14px 22px;
  text-decoration: none;
  color: #fff;
  -webkit-tap-highlight-color: rgba(255,255,255,0.15);
}
body.theme-wallet .card.wallet-expanded .select-btn {
  display: flex;
}
body.theme-wallet .select-price {
  font-size: 20px;
  font-weight: 700;
}
body.theme-wallet .select-text {
  background: rgba(255,255,255,0.95);
  color: #000;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 999px;
}

/* =========================================================
   7. MAGAZINE / EDITORIAL — сериф, асимметрия, премиум-лендинг
   ========================================================= */
body.theme-magazine {
  background: #f5efe6;
  color: #1a1a1a;
}
body.theme-magazine .hero {
  padding: 64px 0 40px;
  text-align: left;
}
body.theme-magazine .hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #1a1a1a;
  max-width: 880px;
}
body.theme-magazine .logo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
}
body.theme-magazine .catalog {
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
body.theme-magazine .card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  grid-column: span 4;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
body.theme-magazine .card:nth-child(7n+1) { grid-column: span 6; }
body.theme-magazine .card:nth-child(7n+4) { grid-column: span 6; }
body.theme-magazine .card-tile {
  background: var(--tile-color) !important;
  min-height: 210px;
}
body.theme-magazine .card-tile .label {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
}
body.theme-magazine .card-tile .nominal {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: 30px;
}
body.theme-magazine .card-price {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #1a1a1a;
}
body.theme-magazine .card-btn {
  background: #1a1a1a;
  border-radius: 0;
  border: 1px solid #1a1a1a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  padding: 10px 18px;
}
body.theme-magazine .catalog-footer {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 700;
}
body.theme-magazine .site-header,
body.theme-magazine .site-footer { border-color: rgba(0,0,0,0.1); }

@media (max-width: 800px) {
  body.theme-magazine .card,
  body.theme-magazine .card:nth-child(7n+1),
  body.theme-magazine .card:nth-child(7n+4) {
    grid-column: span 6;
  }
}
@media (max-width: 500px) {
  body.theme-magazine .card,
  body.theme-magazine .card:nth-child(7n+1),
  body.theme-magazine .card:nth-child(7n+4) {
    grid-column: span 12;
  }
}

/* =========================================================
   8. PIXEL / RETRO 90s
   ========================================================= */
body.theme-pixel {
  background: #1a1a2e;
  color: #fff;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  image-rendering: pixelated;
}
body.theme-pixel .hero h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(13px, 2vw, 20px);
  line-height: 1.8;
  color: #ff10f0;
  text-shadow: 3px 3px 0 #00fff5, 6px 6px 0 #ffe700;
  letter-spacing: 0;
}
body.theme-pixel .logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #ff10f0;
  text-shadow: 2px 2px 0 #00fff5;
}
body.theme-pixel .card {
  background: #2d2d44;
  border: 4px solid #fff;
  border-radius: 0;
  box-shadow: 8px 8px 0 0 #ff10f0;
  padding: 8px;
}
body.theme-pixel .card-tile {
  border: 3px solid #000;
  border-radius: 0;
  font-family: 'Press Start 2P', monospace;
  image-rendering: pixelated;
}
body.theme-pixel .card-tile .nominal {
  font-size: 14px;
  font-family: 'Press Start 2P', monospace;
  text-shadow: 2px 2px 0 #000;
}
body.theme-pixel .card-tile .label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.6;
  text-shadow: 2px 2px 0 #000;
}
body.theme-pixel .card-price {
  font-family: 'Press Start 2P', monospace;
  color: #00fff5;
  font-size: 14px;
}
body.theme-pixel .card-btn {
  background: #00fff5;
  color: #000;
  border-radius: 0;
  border: 3px solid #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  padding: 9px 12px;
}
body.theme-pixel .card-btn:hover { background: #ff10f0; color: #fff; }
body.theme-pixel .card-btn.in-cart { background: #ffe700; color: #000; }
body.theme-pixel .catalog-footer {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: #ffe700;
}

/* =========================================================
   9. MONOCHROME PREMIUM — чёрный + золото
   ========================================================= */
body.theme-mono-premium {
  background: #0a0a0a;
  color: #e8e8e8;
}
body.theme-mono-premium .hero h1 {
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #f0e9d2;
}
body.theme-mono-premium .logo {
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 16px;
  color: #d4af37;
}
body.theme-mono-premium .card {
  background: #141414;
  border: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 0 32px rgba(212, 175, 55, 0.06);
}
body.theme-mono-premium .card:hover {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}
body.theme-mono-premium .card-tile {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.2);
}
body.theme-mono-premium .card-tile .apple { fill: #d4af37; }
body.theme-mono-premium .card-tile .nominal {
  color: #d4af37;
  font-weight: 300;
  letter-spacing: 0.02em;
}
body.theme-mono-premium .card-tile .label {
  color: rgba(232, 232, 232, 0.6);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
}
body.theme-mono-premium .card-price {
  color: #f0e9d2;
  font-weight: 300;
  letter-spacing: 0.02em;
}
body.theme-mono-premium .card-btn {
  background: transparent;
  border: 1px solid #d4af37;
  color: #d4af37;
  border-radius: 0;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  padding: 9px 18px;
}
body.theme-mono-premium .card-btn:hover {
  background: #d4af37;
  color: #0a0a0a;
}
body.theme-mono-premium .card-btn.in-cart {
  background: #d4af37;
  color: #0a0a0a;
}
body.theme-mono-premium .catalog-footer {
  color: rgba(232, 232, 232, 0.5);
  font-weight: 300;
  letter-spacing: 0.05em;
}
body.theme-mono-premium .site-header,
body.theme-mono-premium .site-footer {
  border-color: rgba(212, 175, 55, 0.15);
}

/* =========================================================
   10. STACK 3D — карты в перспективе, наклон при ховере
   ========================================================= */
body.theme-stack3d {
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f1e 100%);
  color: #fff;
  min-height: 100vh;
}
body.theme-stack3d .catalog {
  perspective: 1200px;
  perspective-origin: 50% 30%;
}
body.theme-stack3d .card {
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-4deg);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1.05);
}
body.theme-stack3d .card:nth-child(even) {
  transform: rotateX(8deg) rotateY(4deg);
}
body.theme-stack3d .card:hover {
  transform: rotateX(0) rotateY(0) translateY(-8px) scale(1.05);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  z-index: 10;
}
body.theme-stack3d .card-tile {
  position: relative;
  overflow: hidden;
}
body.theme-stack3d .card-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  pointer-events: none;
}
body.theme-stack3d .card-price { color: #1a1a1a; }
body.theme-stack3d .card-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
body.theme-stack3d .hero h1 {
  background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}