/* ═══════════════════════════════════════
   MBX Retro — Warm Retrowave Glass
   ═══════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* Full-page retrowave background — матовое стекло */
#bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
#bg-video-wrap .bg-image,
#bg-video-wrap img {
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(12px);
  transform: scale(1.05);
}
#bg-video-wrap .bg-frost-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 24, 0.5);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0a0618; }
::-webkit-scrollbar-thumb { background: #4a3c80; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #6e60a0; }

/* Modal scrollbars — thin, inside rounded corners */
.modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.modal-scroll::-webkit-scrollbar { width: 4px; }
.modal-scroll::-webkit-scrollbar-track { background: transparent; margin-top: 12px; margin-bottom: 12px; }
.modal-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

::selection { background: rgba(255, 149, 72, 0.25); color: #fff; }
*:focus-visible { outline: 2px solid rgba(160, 144, 208, 0.4); outline-offset: 2px; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

a, button, input, textarea, select { transition: all 0.3s ease; }
img { transition: transform 0.5s ease, opacity 0.3s ease; }

/* Поиск и сортировка — поверх карточек */
#search-dropdown.search-dropdown-z,
#sort-menu.search-dropdown-z { z-index: 100; }

/* Выпадающий поиск — затемнённый фон */
html:not(.light-theme) #search-dropdown {
  background: rgba(12, 8, 28, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Product cards — изображение 64% (на 20% меньше дважды) */
.product-card .product-card-img { transform: scale(0.64); }
.product-card:hover .product-card-img { transform: scale(0.67); }

/* ══════════════════════════════════
   STARFIELD
   ══════════════════════════════════ */

.stars-bg {
  background-color: #0a0618;
  background-image: none;
}

/* ══════════════════════════════════
   NAV — GLASS
   ══════════════════════════════════ */

/* Fallback for browsers without backdrop-filter (Firefox < 103, old Safari) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-glass, .glass, .modal-glass, .admin-glass, .admin-glass-solid, .login-glass,
  .catalog-dropdown-panel .glass, .toast-glass { background: rgba(12, 8, 28, 0.92) !important; }
}

.nav-glass {
  background: rgba(10, 6, 24, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.nav-link { transition: color 0.3s ease; }

.nav-btn-accent {
  background: rgba(160, 144, 208, 0.15);
  border: 1px solid rgba(160, 144, 208, 0.2);
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 16px; border-radius: 10px; font-weight: 500;
  transition: all 0.3s ease;
}
.nav-btn-accent:hover {
  background: rgba(160, 144, 208, 0.25);
  border-color: rgba(160, 144, 208, 0.35);
}

/* ══════════════════════════════════
   CATALOG DROPDOWN
   ══════════════════════════════════ */

.catalog-dropdown-panel {
  transform: translateY(4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.group\/cat:hover .catalog-dropdown-panel {
  transform: translateY(0);
}

/* Dark theme — matte dropdown */
.catalog-dropdown-panel .glass {
  background: rgba(14, 10, 32, 0.92) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Light theme — matte dropdown */
html.light-theme .catalog-dropdown-panel .glass {
  background: rgba(210,202,192,0.95) !important;
  backdrop-filter: blur(32px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.4) !important;
}
html.light-theme .catalog-dropdown-panel .glass .text-white\/30,
html.light-theme .catalog-dropdown-panel .glass .text-white\/40 {
  color: var(--lt-muted) !important;
}
html.light-theme .catalog-dropdown-panel .glass a,
html.light-theme .catalog-dropdown-panel .glass button {
  color: var(--lt-text) !important;
}
html.light-theme .catalog-dropdown-panel .glass a:hover,
html.light-theme .catalog-dropdown-panel .glass button:hover {
  color: var(--lt-accent) !important;
}

/* ══════════════════════════════════
   HERO
   ══════════════════════════════════ */

.hero-banner { position: relative; overflow: hidden; }
.hero-banner img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center center;
}
.hero-banner video {
  width: 100%; display: block;
  object-fit: contain;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(10, 6, 24, 0.4) 85%,
    #0a0618 100%
  );
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }

/* Retro title glow */
.retro-glow {
  position: relative;
}
.retro-glow::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff9548, #e879a8, #a78bfa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(12px);
  opacity: 0.4;
  pointer-events: none;
}

/* ══════════════════════════════════
   GLASS
   ══════════════════════════════════ */

.glass {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.glass-hover {
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.glass-hover:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════
   PRODUCT CARD
   ══════════════════════════════════ */

.product-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 176, 112, 0.15);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

/* Каталог: карточки — светлее фона */
html:not(.light-theme) main .product-card.glass {
  background: rgba(42, 36, 72, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.1);
}
html:not(.light-theme) main .product-card:hover {
  background: rgba(52, 44, 88, 0.52) !important;
  border-color: rgba(255, 176, 112, 0.22);
}

/* ══════════════════════════════════
   BUTTONS
   ══════════════════════════════════ */

.btn-warm {
  background: linear-gradient(135deg, #ff9548, #d088c0);
  color: white; font-weight: 600; border: none;
  transition: all 0.3s ease;
}
.btn-warm:hover {
  box-shadow: 0 4px 24px rgba(255, 149, 72, 0.3);
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.btn-warm:active { transform: translateY(0); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500; transition: all 0.3s ease;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: white;
}

/* ══════════════════════════════════
   INPUTS
   ══════════════════════════════════ */

.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.input-glass:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 176, 112, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(255, 176, 112, 0.08);
}

/* ══════════════════════════════════
   TOAST
   ══════════════════════════════════ */

.toast-glass {
  background: rgba(30, 20, 72, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════
   DARK THEME — OPAQUE MODALS
   ══════════════════════════════════ */

/* Modal container glass — translucent glass with readable text */
:not(.light-theme) .modal-glass,
:not(.light-theme) #request-modal > .glass,
:not(.light-theme) #contact-modal > .glass,
:not(.light-theme) #preorder-modal .modal-glass,
:not(.light-theme) #preorder-modal > .modal-overlay + .glass {
  background: rgba(12, 8, 28, 0.82) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Request & contact modals — they use .glass directly, not .modal-glass */
:not(.light-theme) #request-modal .relative.glass,
:not(.light-theme) #contact-modal .relative.glass,
:not(.light-theme) #preorder-modal .relative.glass {
  background: rgba(12, 8, 28, 0.82) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Sticky headers inside dark modals — slightly denser so text below doesn't bleed */
:not(.light-theme) .modal-glass .modal-sticky-header,
:not(.light-theme) .modal-glass .sticky.glass {
  background: rgba(12, 8, 28, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Inner glass panels inside dark modals */
:not(.light-theme) .modal-glass .glass:not(.modal-sticky-header):not(.sticky),
:not(.light-theme) .modal-glass .input-glass {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Product cards inside modal */
:not(.light-theme) .modal-glass .product-card {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Favorites modal — same card style as catalog */
html:not(.light-theme) #favorites-modal .product-card.glass {
  background: rgba(42, 36, 72, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.1);
}
html:not(.light-theme) #favorites-modal .product-card:hover {
  background: rgba(52, 44, 88, 0.52) !important;
  border-color: rgba(255, 176, 112, 0.22);
}

/* Modal overlays (backdrop behind modal) — slightly darker for contrast */
:not(.light-theme) .modal-overlay,
:not(.light-theme) #request-overlay,
:not(.light-theme) #contact-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Cookie consent banner */
:not(.light-theme) #cookie-consent .glass {
  background: rgba(12, 8, 28, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.35) !important;
}

/* ══════════════════════════════════
   MODAL STICKY HEADER — auto-hide
   ══════════════════════════════════ */

.modal-sticky-header {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.modal-sticky-header.header-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ══════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 0.6s ease forwards; }

.stagger > * { opacity: 0; animation: fadeInUp 0.5s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.4s; }
.stagger > *:nth-child(n+9) { animation-delay: 0.45s; }

/* ══════════════════════════════════
   MOBILE / TOUCH OPTIMIZATION
   ══════════════════════════════════ */

/* Catalog dropdown — open state (mobile click) */
#catalog-dropdown.catalog-open .catalog-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mobile: ensure background covers */
@media (max-width: 640px) {
  #bg-video-wrap .bg-image { min-height: 100vh; object-fit: cover; }
}

/* Mobile nav — solid background (hamburger + menu readable), prevent text overlap */
@media (max-width: 640px) {
  .nav-glass,
  #mobile-menu {
    background: rgba(12, 8, 28, 0.96) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .mobile-menu-bar {
    background: rgba(255, 255, 255, 0.95) !important;
  }
  /* Prevent nav items overlap — allow shrink, reduce crowding */
  nav .max-w-7xl > div:first-child {
    gap: 0.5rem;
    min-width: 0;
  }
  nav .flex.gap-3 { gap: 0.375rem; }
  /* Right section: align hamburger + theme toggle to the right */
  nav > div > div:last-child { justify-content: flex-end; }
  #catalog-toggle {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .mobile-menu-link {
    white-space: nowrap;
    line-height: 1.5;
    padding: 0.875rem 1rem;
  }
  #mobile-menu .space-y-1 > * + * { margin-top: 0.5rem; }
}
@media (max-width: 640px) {
  html.light-theme .nav-glass,
  html.light-theme #mobile-menu { background: rgba(210, 202, 192, 0.98) !important; }
  html.light-theme .mobile-menu-bar { background: rgba(58, 44, 112, 0.9) !important; }
}

/* Touch targets — min 44px for interactive elements */
@media (pointer: coarse) {
  .fav-btn, .modal-close-btn, button[type="submit"], .btn-warm, .btn-ghost {
    min-height: 44px;
    min-width: 44px;
  }
  .product-card { cursor: pointer; -webkit-tap-highlight-color: transparent; }
}

/* Safe area for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
  #cookie-consent .max-w-3xl { padding-bottom: env(safe-area-inset-bottom); }
  #back-to-top { bottom: calc(1.25rem + env(safe-area-inset-bottom)); right: calc(1.25rem + env(safe-area-inset-right)); }
  #global-toast { right: calc(1.5rem + env(safe-area-inset-right)); bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* Delivery modal — "Как заказать" 4-step grid on mobile */
@media (max-width: 480px) {
  #delivery-modal .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Modal padding on very small screens */
@media (max-width: 380px) {
  #request-modal .relative.glass, #contact-modal .relative.glass,
  #cart-modal .relative, #favorites-modal .relative { margin: 0.5rem; max-height: calc(100vh - 1rem); }
}

/* Prevent zoom on input focus (iOS) — font-size 16px minimum */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ══════════════════════════════════
   ADMIN TABLE
   ══════════════════════════════════ */
@media (max-width: 640px) {
  table { font-size: 0.75rem; }
  table th, table td { padding: 0.5rem; }
}

/* ══════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════ */

.light-theme #theme-toggle { background: #d1d5db; border-color: #9ca3af; }
.light-theme #theme-toggle .theme-dot { left: calc(100% - 1.125rem); background: #fbbf24; }
.light-theme .theme-icon-moon { display: none; }
.light-theme .theme-icon-sun { display: block !important; }
:not(.light-theme) .theme-icon-moon { display: block; }
:not(.light-theme) .theme-icon-sun { display: none; }

/* ══════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════ */

.light-theme {
  --lt-bg: #c8c0b4;
  --lt-surface: #d2ccc2;
  --lt-surface2: #c0b8a8;
  --lt-border: rgba(0,0,0,0.12);
  --lt-border2: rgba(0,0,0,0.18);
  --lt-text: #1a1428;
  --lt-text2: #2a2440;
  --lt-text3: #44405a;
  --lt-muted: #3e3858;
  --lt-accent: #c05010;
  --lt-accent2: #a04008;
}

.light-theme body,
.light-theme.stars-bg,
body.stars-bg:is(.light-theme *) {
  color: var(--lt-text) !important;
}

/* Override stars background */
html.light-theme .stars-bg,
html.light-theme body.stars-bg {
  background-color: #beb6aa !important;
  background-image: none !important;
}

/* Navigation */
html.light-theme .nav-glass {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
html.light-theme .nav-glass a,
html.light-theme .nav-glass button {
  color: var(--lt-text2);
}
html.light-theme .nav-glass a:hover {
  color: var(--lt-text) !important;
}
html.light-theme .nav-glass .text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .nav-glass .text-warm-300 { color: var(--lt-accent2) !important; }
html.light-theme .nav-glass .text-blue-400 { color: #2563eb !important; }
html.light-theme .nav-glass .font-display { color: var(--lt-text) !important; }

html.light-theme .nav-btn-accent {
  background: rgba(160,144,208,0.15) !important;
  border-color: rgba(160,144,208,0.3) !important;
  color: #3a2c70 !important;
}

/* Scrollbar */
html.light-theme ::-webkit-scrollbar-track { background: #beb6aa; }
html.light-theme ::-webkit-scrollbar-thumb { background: #9888b8; }
html.light-theme ::-webkit-scrollbar-thumb:hover { background: #7868a0; }

/* Modal scrollbars — light theme */
html.light-theme .modal-scroll { scrollbar-color: rgba(0,0,0,0.12) transparent; }
html.light-theme .modal-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
html.light-theme .modal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

/* Glass surfaces */
html.light-theme .glass {
  background: rgba(210,202,192,0.5) !important;
  border-color: rgba(0,0,0,0.07) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

/* Product cards */
html.light-theme .product-card {
  background: rgba(210,202,192,0.5) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
html.light-theme .product-card:hover {
  background: rgba(210,202,192,0.65) !important;
  border-color: rgba(192,80,16,0.2) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}
html.light-theme .product-card h3 { color: var(--lt-text) !important; }
html.light-theme .product-card .text-warm-400 { color: var(--lt-accent) !important; }

/* Text overrides — all darker for readability */
html.light-theme .text-white { color: var(--lt-text) !important; }
html.light-theme .text-white\/90 { color: var(--lt-text) !important; }
html.light-theme .text-white\/80 { color: var(--lt-text2) !important; }
html.light-theme .text-white\/70 { color: var(--lt-text2) !important; }
html.light-theme .text-white\/60 { color: var(--lt-text3) !important; }
html.light-theme .text-white\/50 { color: var(--lt-muted) !important; }
html.light-theme .text-white\/45 { color: var(--lt-muted) !important; }
html.light-theme .text-white\/40 { color: #504a68 !important; }
html.light-theme .text-white\/35 { color: #585070 !important; }
html.light-theme .text-white\/30 { color: #605878 !important; }
html.light-theme .text-white\/25 { color: #706888 !important; }
html.light-theme .text-white\/20 { color: #787098 !important; }
html.light-theme .text-white\/15 { color: #8880a0 !important; }
html.light-theme .text-white\/10 { color: #9890b0 !important; }

/* Backgrounds */
html.light-theme .bg-dark-600,
html.light-theme .bg-dark-700,
html.light-theme .bg-dark-700\/40,
html.light-theme .bg-dark-700\/50,
html.light-theme .bg-dark-800 {
  background-color: var(--lt-surface2) !important;
}
html.light-theme .bg-dark-600\/30 { background-color: #ccc6ba !important; }

/* Borders */
html.light-theme .border-dark-500\/20,
html.light-theme .border-dark-500\/50,
html.light-theme .border-white\/\[0\.03\],
html.light-theme .border-white\/\[0\.04\],
html.light-theme .border-white\/\[0\.05\],
html.light-theme .border-white\/\[0\.07\] {
  border-color: var(--lt-border) !important;
}

/* Inputs */
html.light-theme .input-glass,
html.light-theme .input-retro {
  background: rgba(210,202,192,0.5) !important;
  border-color: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--lt-text) !important;
}
html.light-theme .input-glass::placeholder,
html.light-theme .input-retro::placeholder {
  color: #706888 !important;
}
html.light-theme .placeholder-white\/30::placeholder,
html.light-theme .placeholder-white\/25::placeholder {
  color: #706888 !important;
}
html.light-theme .input-glass:focus,
html.light-theme .input-retro:focus {
  background: rgba(210,202,192,0.6) !important;
  border-color: rgba(192,80,16,0.3) !important;
  box-shadow: 0 0 0 3px rgba(192,80,16,0.08) !important;
}

/* Buttons */
html.light-theme .btn-warm {
  background: linear-gradient(135deg, #e06820, #c060a0) !important;
  color: #fff !important;
}
html.light-theme .btn-ghost {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--lt-text2) !important;
}
html.light-theme .btn-ghost:hover {
  background: rgba(0,0,0,0.1) !important;
  color: var(--lt-text) !important;
}

/* Hero */
html.light-theme .hero-banner img,
html.light-theme .hero-banner video { opacity: 1; }
html.light-theme .hero-overlay {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(144,136,128,0.4) 85%,
    var(--lt-bg) 100%
  ) !important;
}
html.light-theme .hero-content h1 { color: var(--lt-text) !important; text-shadow: none !important; }
html.light-theme .hero-content p { color: var(--lt-text3) !important; }
html.light-theme .retro-glow::after { opacity: 0.2; }

/* Toast */
html.light-theme .toast-glass {
  background: rgba(210,202,192,0.95) !important;
  border-color: var(--lt-border) !important;
  color: var(--lt-text) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
}

/* Sidebar active / glass tints */
html.light-theme .bg-white\/\[0\.06\] { background: rgba(0,0,0,0.06) !important; }
html.light-theme .bg-white\/\[0\.04\] { background: rgba(0,0,0,0.04) !important; }
html.light-theme .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.03) !important; }
html.light-theme .bg-white\/\[0\.02\] { background: rgba(0,0,0,0.02) !important; }
html.light-theme .bg-white\/\[0\.08\] { background: rgba(0,0,0,0.06) !important; }
html.light-theme .bg-black\/20 { background: rgba(255,255,255,0.5) !important; }

/* Material buttons */
html.light-theme .mat-btn {
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--lt-text3) !important;
}

/* Badge + add-to-cart buttons */
html.light-theme .bg-warm-400 { background-color: var(--lt-accent) !important; }
html.light-theme .bg-warm-400\/80 { background-color: var(--lt-accent) !important; }
html.light-theme .bg-warm-400\/80:hover { background-color: var(--lt-accent2) !important; }

/* Fav button */
html.light-theme .fav-btn { background: rgba(255,255,255,0.6) !important; color: #706888 !important; }
html.light-theme .fav-btn.text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .fav-btn:hover { color: var(--lt-accent) !important; }

/* Cart qty controls */
html.light-theme .bg-white\/\[0\.06\]:is(button),
html.light-theme button.bg-white\/\[0\.06\] {
  background: rgba(0,0,0,0.06) !important;
  color: var(--lt-text2) !important;
}
html.light-theme button.bg-white\/\[0\.06\]:hover {
  background: rgba(0,0,0,0.1) !important;
  color: var(--lt-text) !important;
}

/* Select — dark theme (default) */
select option {
  background: #1a1232 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Select — light theme */
html.light-theme select {
  background: rgba(210,202,192,0.5) !important;
  color: var(--lt-text) !important;
  border-color: rgba(0,0,0,0.1) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html.light-theme select option {
  background: #ccc6ba !important;
  color: var(--lt-text) !important;
}

/* ===== All Modals — shared glass styles ===== */
/* Light theme — semi-transparent glass for ALL modals */
html.light-theme .modal-glass,
html.light-theme #request-modal .glass,
html.light-theme #contact-modal .glass {
  background: rgba(210, 202, 192, 0.88) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
html.light-theme .modal-glass .text-white,
html.light-theme #request-modal .glass .text-white,
html.light-theme #contact-modal .glass .text-white {
  color: var(--lt-text) !important;
}
html.light-theme .modal-glass .text-white\/80,
html.light-theme .modal-glass .text-white\/70 {
  color: var(--lt-text) !important;
}
html.light-theme .modal-glass .text-white\/40,
html.light-theme .modal-glass .text-white\/45,
html.light-theme .modal-glass .text-white\/50,
html.light-theme #request-modal .glass .text-white\/40,
html.light-theme #contact-modal .glass .text-white\/40,
html.light-theme #request-modal .glass .text-white\/50,
html.light-theme #contact-modal .glass .text-white\/50 {
  color: var(--lt-text3) !important;
}
html.light-theme .modal-glass .text-white\/25,
html.light-theme .modal-glass .text-white\/15,
html.light-theme .modal-glass .text-white\/30,
html.light-theme .modal-glass .text-white\/20,
html.light-theme .modal-glass .text-white\/35,
html.light-theme #request-modal .glass .text-white\/25,
html.light-theme #contact-modal .glass .text-white\/25,
html.light-theme #request-modal .glass .text-white\/15,
html.light-theme #contact-modal .glass .text-white\/15,
html.light-theme #request-modal .glass .text-white\/30,
html.light-theme #contact-modal .glass .text-white\/30,
html.light-theme #request-modal .glass .text-white\/20,
html.light-theme #contact-modal .glass .text-white\/20 {
  color: var(--lt-muted) !important;
}
html.light-theme .modal-glass .border-white\/\[0\.05\],
html.light-theme #request-modal .glass .border-white\/\[0\.05\],
html.light-theme #contact-modal .glass .border-white\/\[0\.05\] {
  border-color: rgba(0,0,0,0.06) !important;
}
html.light-theme .modal-glass .input-glass,
html.light-theme #request-modal .glass .input-glass,
html.light-theme #contact-modal .glass .input-glass {
  background: rgba(0,0,0,0.04) !important;
  color: var(--lt-text) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
html.light-theme .modal-glass .input-glass::placeholder,
html.light-theme #request-modal .glass .input-glass::placeholder,
html.light-theme #contact-modal .glass .input-glass::placeholder {
  color: rgba(0,0,0,0.4) !important;
}
html.light-theme .modal-glass .bg-white\/\[0\.04\],
html.light-theme .modal-glass .bg-white\/\[0\.03\],
html.light-theme .modal-glass .bg-white\/\[0\.06\],
html.light-theme .modal-glass .bg-white\/\[0\.02\],
html.light-theme #request-modal .glass .bg-white\/\[0\.04\],
html.light-theme #contact-modal .glass .bg-white\/\[0\.04\] {
  background: rgba(0,0,0,0.04) !important;
}
html.light-theme .modal-glass .product-card {
  background: rgba(200,194,184,0.5) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
html.light-theme .modal-glass .font-mono.text-warm-400 {
  color: var(--lt-accent) !important;
}
/* Request dropzone light */
html.light-theme #req-dropzone {
  border-color: rgba(0,0,0,0.12) !important;
}
html.light-theme #req-dropzone:hover {
  border-color: var(--lt-accent) !important;
}
/* Overlay for all modals */
html.light-theme .modal-overlay,
html.light-theme #request-overlay,
html.light-theme #contact-overlay {
  background: rgba(0,0,0,0.25) !important;
}
/* Sticky headers inside modal in light theme */
html.light-theme .modal-glass .sticky.glass {
  background: rgba(228,222,212,0.9) !important;
  backdrop-filter: blur(20px) !important;
}
html.light-theme .modal-glass .glass:not(.sticky) {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}
html.light-theme .modal-glass .text-white\/60 {
  color: var(--lt-text3) !important;
}
html.light-theme .modal-glass .text-white\/90 {
  color: var(--lt-text) !important;
}
html.light-theme .modal-glass .modal-overlay {
  background: rgba(0,0,0,0.2) !important;
}
html.light-theme .modal-glass .btn-ghost {
  color: var(--lt-text) !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* Ambient bg pages */
html.light-theme .ambient-bg {
  background: var(--lt-bg) !important;
}
html.light-theme #bg-video-wrap {
  display: none;
}

/* Neon text overrides */
html.light-theme .neon-text-pink,
html.light-theme .text-accent-400 {
  color: var(--lt-accent) !important;
  text-shadow: none !important;
}

/* Footer */
html.light-theme footer {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* "New" badge */
html.light-theme .bg-warm-400\/80 { background-color: var(--lt-accent) !important; }

/* Stock indicator */
html.light-theme .text-muted-lavender\/60 { color: #16a34a !important; }
html.light-theme .text-muted-lavender { color: #16a34a !important; }

/* Purple text for preorder */
html.light-theme .text-purple-300 { color: #6d28d9 !important; }
html.light-theme .text-purple-400 { color: #7c3aed !important; }
html.light-theme .text-purple-400\/60 { color: #6d28d9 !important; }
html.light-theme .text-purple-400\/80 { color: #5b21b6 !important; }
html.light-theme .bg-purple-500\/20 { background: rgba(109,40,217,0.12) !important; }
html.light-theme .bg-purple-500\/30 { background: rgba(109,40,217,0.18) !important; }
html.light-theme .bg-purple-500\/80 { background: #7c3aed !important; }
html.light-theme .hover\:bg-purple-500:hover { background: #6d28d9 !important; }
html.light-theme .hover\:bg-purple-500\/30:hover { background: rgba(109,40,217,0.18) !important; }
html.light-theme .hover\:text-purple-200:hover { color: #5b21b6 !important; }

/* Warm text variants */
html.light-theme .text-warm-400 { color: var(--lt-accent) !important; }
html.light-theme .text-warm-400\/80 { color: var(--lt-accent) !important; }
html.light-theme .text-warm-300 { color: var(--lt-accent2) !important; }

/* Green text */
html.light-theme .text-green-400 { color: #16a34a !important; }

/* Blue text */
html.light-theme .text-blue-400 { color: #2563eb !important; }

/* Footer specific text */
html.light-theme footer .text-white\/70 { color: var(--lt-text2) !important; }
html.light-theme footer .text-white\/40 { color: var(--lt-text3) !important; }
html.light-theme footer .text-white\/50 { color: var(--lt-muted) !important; }
html.light-theme footer .text-white\/30 { color: #585070 !important; }
html.light-theme footer h4 { color: var(--lt-text3) !important; }

/* Material buttons on product cards */
html.light-theme .mat-btn {
  border-color: rgba(0,0,0,0.10) !important;
  color: var(--lt-text3) !important;
  background: rgba(0,0,0,0.03) !important;
}
html.light-theme .mat-btn.bg-warm-400\/15,
html.light-theme .mat-btn.border-warm-400\/30 {
  background: rgba(192,80,16,0.12) !important;
  border-color: rgba(192,80,16,0.3) !important;
  color: var(--lt-accent) !important;
}

/* Cart badge */
html.light-theme #cart-badge { background-color: var(--lt-accent) !important; color: #fff !important; }

/* Selection */
html.light-theme ::selection { background: rgba(192,80,16,0.2); color: var(--lt-text); }

/* Sort dropdown — light theme */
html.light-theme #sort-menu {
  background: rgba(210,202,192,0.95) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.15) !important;
}
html.light-theme #sort-menu a {
  color: var(--lt-text3) !important;
}
html.light-theme #sort-menu a:hover {
  color: var(--lt-text) !important;
  background: rgba(0,0,0,0.05) !important;
}
html.light-theme #sort-menu a.text-warm-400 {
  color: var(--lt-accent) !important;
  background: rgba(0,0,0,0.05) !important;
}

/* Sort dropdown — dark theme */
#sort-menu {
  background: rgba(14,10,32,0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

/* Search autocomplete dropdown */
html.light-theme #search-dropdown {
  background: rgba(150,142,134,0.97) !important;
  border: 1px solid var(--lt-border);
  backdrop-filter: blur(20px);
}
html.light-theme #search-dropdown .ac-item {
  color: var(--lt-text) !important;
}
html.light-theme #search-dropdown .ac-item:hover,
html.light-theme #search-dropdown .ac-item.bg-white\/\[0\.08\] {
  background: rgba(0,0,0,0.04) !important;
}
html.light-theme #search-dropdown .text-white\/90 { color: var(--lt-text) !important; }
html.light-theme #search-dropdown .text-white\/35 { color: var(--lt-text3) !important; }
html.light-theme #search-dropdown .text-white\/40 { color: var(--lt-text3) !important; }
html.light-theme #search-dropdown .text-white\/30 { color: var(--lt-muted) !important; }
html.light-theme #search-dropdown .text-white\/20 { color: var(--lt-muted) !important; }
html.light-theme #search-dropdown .bg-white\/\[0\.03\] { background: rgba(0,0,0,0.04) !important; }
html.light-theme #search-dropdown .bg-white\/\[0\.06\] { background: rgba(0,0,0,0.06) !important; }
html.light-theme #search-dropdown .border-white\/\[0\.05\] { border-color: var(--lt-border) !important; }