/* /assets/css/header.css */
/* ============================================================
   header.css — All static header styles extracted from header.php
   Loaded via <link> so the browser caches this file across pages.
   DO NOT add PHP here. Theme colours use CSS custom properties
   already set by theme-generator.php (loaded before this file).
   ============================================================ */

/* Twemoji fallback images (includes/footer.php) — size to the surrounding
   text like a native emoji glyph instead of a stray oversized image. */
img.twemoji-icon {
  height: 1em; width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  display: inline-block;
}

/* Custom base */
.glass-header {
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(209, 213, 219, 0.4);
}

/* ====== DARK MODE – Header Components ====== */
.dark .mobile-glass-header,
.dark .desktop-glass-header {
  background: #09090b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}

.dark .premium-search-container {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}
.dark .premium-search-container:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
.dark .premium-search-container:focus-within {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(var(--theme-500-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12) !important;
}
.dark .premium-search-input { color: #e2e8f0 !important; background-color: transparent !important; background: transparent !important; -webkit-appearance: none !important; color-scheme: light !important; }
.dark .premium-search-input::placeholder { color: #64748b !important; }
.dark input#searchInput { background-color: transparent !important; background: transparent !important; color-scheme: light !important; }
.dark .search-icon-wrapper {
  background: rgba(255, 255, 255, 0.06) !important;
}
.dark .search-icon-wrapper svg { color: #64748b !important; }
.dark .search-shortcut-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #64748b !important;
}

.dark .premium-side-menu {
  background: rgba(9, 9, 11, 0.98) !important;
  box-shadow: 4px 0 40px rgba(0, 0, 0, 0.7) !important;
}
.dark .premium-profile-header {
  background: linear-gradient(135deg, #0d0d0f 0%, #09090b 50%, #0d0d0f 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.dark .premium-menu-item:hover {
  background: linear-gradient(90deg, rgba(var(--theme-500-rgb), 0.08), rgba(22, 27, 34, 0.6)) !important;
}
.dark .menu-section-title { color: var(--ink-soft, #8b949e) !important; }
.dark .premium-menu-item span.text-gray-800 { color: var(--ink-2, #c9d1d9) !important; }

.dark .premium-dropdown {
  background: #161b22 !important;
  border-color: rgba(240, 246, 252, 0.1) !important;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.6) !important;
}
.dark .premium-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(var(--theme-500-rgb), 0.1), rgba(22, 27, 34, 0.8)) !important;
}
.dark .premium-dropdown-item span { color: var(--ink-2, #c9d1d9) !important; }

.dark .premium-support-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
.dark .premium-support-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
.dark .premium-support-btn span,
.dark .premium-support-btn i { color: #94a3b8 !important; }
.dark .premium-support-btn:hover span,
.dark .premium-support-btn:hover i { color: #ffffff !important; }

.dark .premium-balance-display {
  background: rgba(var(--theme-500-rgb), 0.1) !important;
  border-color: rgba(var(--theme-500-rgb), 0.2) !important;
  color: var(--theme-400) !important;
}

.dark .balance-btn {
  background: rgba(var(--theme-500-rgb), 0.1) !important;
  border-color: rgba(var(--theme-500-rgb), 0.2) !important;
  color: var(--theme-400) !important;
}

.dark .menu-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .menu-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

/* Desktop floating nav pill (dark mode) */
.dark .premium-nav-shell,
.dark .floating-nav-shell {
  background: rgba(9, 9, 11, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
              0 8px 32px -8px rgba(0, 0, 0, 0.7),
              inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.dark .floating-nav-shell:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07),
              0 12px 40px -8px rgba(0, 0, 0, 0.75),
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .floating-nav-shell .premium-nav-link {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
.dark .floating-nav-shell .premium-nav-link:hover {
  background: rgba(var(--theme-500-rgb), 0.12) !important;
  color: var(--theme-300) !important;
  border-color: rgba(var(--theme-500-rgb), 0.25) !important;
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.1) !important;
  transform: translateY(-2px);
}
.dark .floating-nav-shell .premium-nav-link.active {
  background: linear-gradient(135deg, var(--theme-500), var(--theme-600)) !important;
  color: #fff !important;
  border-color: rgba(var(--theme-400-rgb), 0.5) !important;
  box-shadow: 0 8px 24px rgba(var(--theme-500-rgb), 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.dark .premium-nav-link.text-gray-700 { color: var(--ink-soft, #8b949e) !important; }

.dark .auth-btn-login {
  background: #161b22 !important;
  border-color: var(--theme-500) !important;
  color: var(--theme-400) !important;
}
.dark .desktop-auth-btn-login {
  background: #161b22 !important;
  border-color: var(--theme-500) !important;
  color: var(--theme-400) !important;
}

.dark .dark-mode-toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.dark .dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Dark mode for footer */
.dark #desktopFooter {
  background: var(--paper-2, #111113) !important;
  border-top-color: var(--rule, rgba(255, 255, 255, 0.05)) !important;
}
/* Defaults only: the id sits in :where() and nothing is !important, so a
   theme's own footer and newsletter text wins with any selector of its own. */
.dark :where(#desktopFooter) h3,
.dark :where(#desktopFooter) h4 { color: var(--ink-2, #c9d1d9); }
.dark :where(#desktopFooter) p,
.dark :where(#desktopFooter) a,
.dark :where(#desktopFooter) li { color: var(--ink-soft, #8b949e); }
.dark :where(#desktopFooter) a:hover { color: var(--theme-400); }

/* Mobile bottom nav (dark mode) */
.dark .safe-area-bottom > div.mobile-bottom-nav {
  background: rgba(9, 9, 11, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04),
              0 -4px 24px -4px rgba(0, 0, 0, 0.6) !important;
}
.dark .safe-area-bottom a.text-gray-600 {
  color: #8b949e !important;
}
.dark .safe-area-bottom a.text-gray-600:hover {
  color: var(--theme-300) !important;
  background: rgba(var(--theme-500-rgb), 0.1) !important;
}
.dark .safe-area-bottom button.ring-4 {
  --tw-ring-color: rgba(22, 27, 34, 0.7) !important;
  border-color: rgba(var(--theme-400-rgb), 0.5) !important;
}

/* Explore sheet (dark mode) */
.dark #mobileExploreSheet .bg-white {
  background: #09090b !important;
}
.dark #mobileExploreSheet .rounded-t-3xl {
  border-top: 1px solid rgba(48, 54, 61, 0.4);
}
.dark #mobileExploreSheet .text-gray-900 { color: var(--ink, #e6edf3) !important; }
.dark #mobileExploreSheet .text-gray-600 { color: var(--ink-soft, #8b949e) !important; }
.dark #mobileExploreSheet .text-gray-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark #mobileExploreSheet .text-gray-800 { color: var(--ink-2, #c9d1d9) !important; }
.dark #mobileExploreSheet .bg-gray-100 { background: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .hover\:bg-gray-200:hover { background: #2d333b !important; }
.dark #mobileExploreSheet .from-white { --tw-gradient-from: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .to-white { --tw-gradient-to: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .border-theme-100\/70 { border-color: rgba(48, 54, 61, 0.4) !important; }
.dark #mobileExploreSheet .from-gray-100 { --tw-gradient-from: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .to-gray-50 { --tw-gradient-to: var(--paper-2, #161b22) !important; }
.dark #mobileExploreSheet .border-gray-200 { border-color: var(--rule, #30363d) !important; }
.dark #mobileExploreSheet .bg-white\/70 { background: color-mix(in srgb, var(--paper-2, #161b22) 70%, transparent) !important; }
.dark #mobileExploreSheet .text-gray-500 { color: #6e7681 !important; }
.dark #mobileExploreSheet .shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important; }

/* Dark mode logout modal */
.dark #logoutModal .bg-white {
  background: #161b22 !important;
}
.dark #logoutModal .text-gray-800 { color: var(--ink-2, #c9d1d9) !important; }
.dark #logoutModal .text-gray-600 { color: var(--ink-soft, #8b949e) !important; }
.dark #logoutModal .bg-gray-100 { background: var(--paper-3, #21262d) !important; }

/* Additional dark mode overrides for slate/gray classes */
.dark .text-slate-900 { color: var(--ink, #e6edf3) !important; }
.dark .text-slate-800 { color: var(--ink, #e6edf3) !important; }
.dark .text-slate-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-slate-600 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-slate-500 { color: var(--ink-soft, #8b949e) !important; }
.dark .bg-slate-50 { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-slate-100 { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-slate-200 { background-color: var(--paper-3, #21262d) !important; }
.dark .border-gray-100 { border-color: var(--rule, #30363d) !important; }
.dark .border-slate-100 { border-color: var(--rule, #30363d) !important; }
.dark .border-slate-200 { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .border-slate-300 { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .ring-gray-100 { --tw-ring-color: var(--rule, #30363d) !important; }
.dark .ring-gray-200 { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }

/* Dark mode for common cards and panels */
.dark .bg-white\/80 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 80%, transparent) !important; }
.dark .bg-white\/90 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 90%, transparent) !important; }
.dark .bg-white\/95 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 95%, transparent) !important; }
.dark .bg-gray-50\/50 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .from-white { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .to-white { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .from-gray-50 { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .to-gray-50 { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .from-gray-100 { --tw-gradient-from: var(--paper-2, #111113) !important; }
.dark .to-gray-100 { --tw-gradient-to: var(--paper-2, #111113) !important; }

/* Dark mode for swiper navigation */
.dark .swiper-button-prev::after,
.dark .swiper-button-next::after { color: var(--ink-2, #c9d1d9) !important; }

.dark body { background-color: var(--paper, #09090b) !important; }

/* Dark mode for colored accent backgrounds (-50 shades). No !important: a
   theme's own tile colour wins over these. */
.dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.2); }
.dark .bg-green-50 { background-color: rgba(20, 83, 45, 0.2); }
.dark .bg-yellow-50 { background-color: rgba(113, 63, 18, 0.2); }
.dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.2); }
.dark .bg-purple-50 { background-color: rgba(88, 28, 135, 0.2); }
.dark .bg-pink-50 { background-color: rgba(131, 24, 67, 0.2); }
.dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.2); }
.dark .bg-teal-50 { background-color: rgba(19, 78, 74, 0.2); }
.dark .bg-cyan-50 { background-color: rgba(22, 78, 99, 0.2); }
.dark .bg-indigo-50 { background-color: rgba(49, 46, 129, 0.2); }
.dark .bg-emerald-50 { background-color: color-mix(in srgb, var(--px-good, #10b981) 16%, var(--paper, #0b0b0f)); }
.dark .bg-rose-50 { background-color: rgba(136, 19, 55, 0.2); }
.dark .bg-violet-50 { background-color: rgba(91, 33, 182, 0.2); }
.dark .bg-orange-50 { background-color: rgba(124, 45, 18, 0.2); }
.dark .bg-sky-50 { background-color: rgba(12, 74, 110, 0.2); }
.dark .bg-sky-100 { background-color: rgba(12, 74, 110, 0.25); }
.dark .bg-blue-100 { background-color: rgba(30, 58, 138, 0.25); }
.dark .bg-green-100 { background-color: rgba(20, 83, 45, 0.25); }
.dark .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.25); }
.dark .bg-red-100 { background-color: rgba(127, 29, 29, 0.25); }
.dark .bg-purple-100 { background-color: rgba(88, 28, 135, 0.25); }
.dark .bg-emerald-100 { background-color: rgba(6, 78, 59, 0.25); }

/* Dark mode colored gradient stops (-50) */
.dark .from-blue-50 { --tw-gradient-from: rgba(30, 58, 138, 0.2) !important; }
.dark .from-green-50 { --tw-gradient-from: rgba(20, 83, 45, 0.2) !important; }
.dark .from-purple-50 { --tw-gradient-from: rgba(88, 28, 135, 0.2) !important; }
.dark .from-emerald-50 { --tw-gradient-from: rgba(6, 78, 59, 0.2) !important; }
.dark .from-amber-50 { --tw-gradient-from: rgba(120, 53, 15, 0.2) !important; }
.dark .from-indigo-50 { --tw-gradient-from: rgba(49, 46, 129, 0.2) !important; }
.dark .from-teal-50 { --tw-gradient-from: rgba(19, 78, 74, 0.2) !important; }
.dark .from-pink-50 { --tw-gradient-from: rgba(131, 24, 67, 0.2) !important; }
.dark .from-orange-50 { --tw-gradient-from: rgba(124, 45, 18, 0.2) !important; }
.dark .from-sky-50 { --tw-gradient-from: rgba(12, 74, 110, 0.2) !important; }
.dark .from-rose-50 { --tw-gradient-from: rgba(136, 19, 55, 0.2) !important; }

.dark .to-blue-50 { --tw-gradient-to: rgba(30, 58, 138, 0.15) !important; }
.dark .to-blue-100 { --tw-gradient-to: rgba(30, 58, 138, 0.2) !important; }
.dark .to-green-50 { --tw-gradient-to: rgba(20, 83, 45, 0.15) !important; }
.dark .to-purple-50 { --tw-gradient-to: rgba(88, 28, 135, 0.15) !important; }
.dark .to-indigo-50 { --tw-gradient-to: rgba(49, 46, 129, 0.15) !important; }
.dark .to-pink-50 { --tw-gradient-to: rgba(131, 24, 67, 0.15) !important; }
.dark .to-cyan-50 { --tw-gradient-to: rgba(22, 78, 99, 0.15) !important; }
.dark .to-teal-50 { --tw-gradient-to: rgba(19, 78, 74, 0.15) !important; }
.dark .to-amber-50 { --tw-gradient-to: rgba(120, 53, 15, 0.15) !important; }
.dark .to-amber-100 { --tw-gradient-to: rgba(120, 53, 15, 0.2) !important; }
.dark .to-orange-50 { --tw-gradient-to: rgba(124, 45, 18, 0.15) !important; }

/* Dark mode colored gradient stops (-100) */
.dark .from-blue-100 { --tw-gradient-from: rgba(30, 58, 138, 0.25) !important; }
.dark .from-green-100 { --tw-gradient-from: rgba(20, 83, 45, 0.25) !important; }
.dark .from-purple-100 { --tw-gradient-from: rgba(88, 28, 135, 0.25) !important; }
.dark .from-indigo-100 { --tw-gradient-from: rgba(49, 46, 129, 0.25) !important; }
.dark .from-amber-100 { --tw-gradient-from: rgba(120, 53, 15, 0.25) !important; }
.dark .from-pink-100 { --tw-gradient-from: rgba(131, 24, 67, 0.25) !important; }
.dark .from-teal-100 { --tw-gradient-from: rgba(19, 78, 74, 0.25) !important; }

.dark .to-blue-200 { --tw-gradient-to: rgba(30, 58, 138, 0.3) !important; }
.dark .to-green-100 { --tw-gradient-to: rgba(20, 83, 45, 0.2) !important; }
.dark .to-purple-100 { --tw-gradient-to: rgba(88, 28, 135, 0.2) !important; }
.dark .to-indigo-100 { --tw-gradient-to: rgba(49, 46, 129, 0.2) !important; }

/* Dark mode for transparent white backgrounds */
.dark .bg-white\/60 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 60%, transparent) !important; }
.dark .bg-white\/70 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 70%, transparent) !important; }
.dark .bg-white\/75 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 75%, transparent) !important; }
.dark .bg-white\/85 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 85%, transparent) !important; }
.dark .bg-white\/92 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 92%, transparent) !important; }

.dark .glass-card {
  background: rgba(22, 27, 34, 0.75) !important;
  border-color: rgba(240, 246, 252, 0.1) !important;
}

.dark .gradient-bg {
  background: linear-gradient(-45deg, #1e1b4b, #312e81, #161b22, #0c0f14) !important;
  background-size: 400% 400% !important;
}

/* Dark mode colored text */
.dark .text-blue-900 { color: #93c5fd !important; }
.dark .text-green-900 { color: #86efac !important; }
.dark .text-yellow-900 { color: #fde047 !important; }
.dark .text-yellow-800 { color: #fde047 !important; }
.dark .text-red-900 { color: #fca5a5 !important; }
.dark .text-purple-900 { color: #d8b4fe !important; }
.dark .text-orange-900 { color: #fdba74 !important; }
.dark .text-blue-800 { color: #93c5fd !important; }
.dark .text-green-800 { color: #86efac !important; }

/* Dark mode colored borders */
.dark .border-blue-100 { border-color: rgba(30, 58, 138, 0.35) !important; }
.dark .border-theme-200 { border-color: rgba(30, 58, 138, 0.4) !important; }
.dark .border-green-200 { border-color: rgba(20, 83, 45, 0.4) !important; }
.dark .border-yellow-200 { border-color: rgba(113, 63, 18, 0.4) !important; }
.dark .border-red-200 { border-color: rgba(127, 29, 29, 0.4) !important; }
.dark .border-purple-200 { border-color: rgba(88, 28, 135, 0.4) !important; }
.dark .border-orange-200 { border-color: rgba(124, 45, 18, 0.4) !important; }
.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--rule, #30363d) !important; }
.dark .text-theme-600 { color: var(--theme-400) !important; }
.dark .text-theme-700 { color: var(--theme-400) !important; }
.dark .backdrop-blur-lg { backdrop-filter: blur(16px) !important; }
.dark .search-input {
  background-color: #161b22 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}
.dark .search-placeholder { color: var(--ink-soft, #8b949e) !important; }
.dark .hover\:bg-gray-800:hover { background-color: #2d333b !important; }
.dark .bg-white.text-gray-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark .bg-gray-100.text-gray-400 { color: #6e7681 !important; }
.dark .border-dashed { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }

/* ====== GLOBAL DARK MODE OVERRIDES – Core Tailwind Utilities ====== */
.dark .bg-white { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-white\/50 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .bg-gray-50 { background-color: var(--paper, #09090b) !important; }
.dark .bg-gray-100 { background-color: var(--paper-2, #111113) !important; }
.dark .bg-gray-200 { background-color: var(--paper-3, #21262d) !important; }
.dark .bg-gray-300 { background-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .bg-gray-50\/50 { background-color: rgba(12, 15, 20, 0.5) !important; }
.dark .bg-gray-50\/80 { background-color: rgba(12, 15, 20, 0.8) !important; }
.dark .bg-gray-100\/50 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .bg-gray-100\/80 { background-color: color-mix(in srgb, var(--paper-2, #161b22) 80%, transparent) !important; }
.dark .text-gray-900 { color: var(--ink, #e6edf3) !important; }
.dark .text-gray-800 { color: var(--ink, #e6edf3) !important; }
/* Gold buttons (from-yellow-400) stay gold in dark mode, so their dark
   lettering must stay dark too; the rule above would turn it pale. */
.dark .from-yellow-400.text-gray-900 { color: #1c1300 !important; }
.dark .text-gray-700 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-gray-600 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-gray-500 { color: var(--ink-soft, #8b949e) !important; }
.dark .text-gray-400 { color: var(--ink-soft, #8b949e) !important; }
.dark .text-gray-300 { color: var(--ink-2, #c9d1d9) !important; }
.dark .text-black { color: var(--ink, #e6edf3) !important; }
.dark .border-gray-200 { border-color: var(--rule, #30363d) !important; }
.dark .border-gray-300 { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .border-gray-400 { border-color: #6e7681 !important; }
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--rule, #30363d) !important; }
.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .hover\:bg-gray-50:hover { background-color: color-mix(in srgb, var(--ink, #e6edf3) 8%, var(--paper, #0d1117)) !important; }
.dark .hover\:bg-gray-100:hover { background-color: color-mix(in srgb, var(--ink, #e6edf3) 8%, var(--paper, #0d1117)) !important; }
.dark .hover\:bg-gray-200:hover { background-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .hover\:bg-white:hover { background-color: color-mix(in srgb, var(--ink, #e6edf3) 8%, var(--paper, #0d1117)) !important; }
.dark .hover\:text-gray-700:hover { color: var(--ink-2, #c9d1d9) !important; }
.dark .hover\:text-gray-900:hover { color: var(--ink, #e6edf3) !important; }
.dark .hover\:border-gray-300:hover { border-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .hover\:border-gray-400:hover { border-color: #6e7681 !important; }
.dark .ring-gray-300 { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .ring-slate-200 { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .ring-slate-300 { --tw-ring-color: #6e7681 !important; }
.dark .focus\:ring-gray-200:focus { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .focus\:ring-gray-300:focus { --tw-ring-color: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark .placeholder-gray-400::placeholder { color: #6e7681 !important; }
.dark .placeholder-gray-500::placeholder { color: #6e7681 !important; }
/* The language picker's search box takes its placeholder from the picker and the theme. */
.dark input:not(.px-lang-picker__search-input)::placeholder,
.dark textarea::placeholder,
.dark select::placeholder { color: #6e7681 !important; }
.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important; }
.dark .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4) !important; }
.dark .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important; }
/* A theme that styles its own field in dark mode marks it .no-dark. */
/* Zero specificity (:where), so a theme's own !important field colours win
   over these without .no-dark; a plain utility class still doesn't. */
:where(.dark) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], .no-dark), textarea:not(.no-dark), select:not(.no-dark)) {
  background-color: #0d1117 !important;
  border-color: #30363d !important;
  color: #e6edf3 !important;
}
:where(.dark) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], .no-dark), textarea:not(.no-dark), select:not(.no-dark)):focus {
  border-color: var(--theme-500) !important;
}
.dark table { border-color: var(--rule, #30363d) !important; }
.dark thead { background-color: var(--paper-2, #161b22) !important; }
.dark thead:where(.px-thead--paper) { background-color: var(--paper, var(--paper-2, #161b22)) !important; }
.dark th { color: var(--ink-2, #c9d1d9) !important; border-color: var(--rule, #30363d) !important; }
.dark td { border-color: var(--rule, #30363d) !important; }
.dark tbody tr { border-color: var(--rule, #30363d) !important; }
.dark tbody tr:hover { background-color: color-mix(in srgb, var(--paper-2, #161b22) 50%, transparent) !important; }
.dark .even\:bg-gray-50:nth-child(even) { background-color: #0c0f14 !important; }
.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2, #161b22) !important; }
.dark .bg-black\/50 { background-color: rgba(0, 0, 0, 0.7) !important; }
.dark [class*="modal"] .bg-white,
.dark [x-show] .bg-white,
.dark [x-data] .bg-white { background-color: var(--paper-2, #161b22) !important; }
/* The theme's surface token, not a fixed navy, and not !important, so a
   theme's own card (seller dashboard, phone header) keeps its colour. */
.dark .bg-white.rounded-lg,
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-2xl,
.dark .bg-white.shadow,
.dark .bg-white.shadow-sm,
.dark .bg-white.shadow-md,
.dark .bg-white.shadow-lg,
.dark .bg-white.shadow-xl { background-color: var(--bg-secondary, var(--paper-2, #161b22)); }
.dark .from-gray-200 { --tw-gradient-from: var(--paper-3, #21262d) !important; }
.dark .to-gray-200 { --tw-gradient-to: var(--paper-3, #21262d) !important; }
.dark .via-white { --tw-gradient-via: var(--paper-2, #161b22) !important; }
.dark .via-gray-50 { --tw-gradient-via: #0c0f14 !important; }
/* Blue is the store's accent (dynamic-theme.css maps it to --theme-600 with
   !important), so after dark it takes the pale end of the accent. */
.dark .text-blue-600 { color: var(--theme-300, #60a5fa) !important; }
.dark .text-blue-700 { color: var(--theme-300, #60a5fa) !important; }
/* Status hues after dark. No !important, so a theme's own colour wins. */
.dark .text-green-600 { color: #4ade80; }
.dark .text-green-700 { color: #4ade80; }
.dark .text-red-600 { color: #f87171; }
.dark .text-red-700 { color: #f87171; }
.dark .text-yellow-600 { color: #facc15; }
.dark .text-yellow-700 { color: #facc15; }
.dark .text-purple-600 { color: #c084fc; }
.dark .text-purple-700 { color: #c084fc; }
.dark .text-orange-600 { color: #fb923c; }
.dark .text-orange-700 { color: #fb923c; }
.dark .text-indigo-600 { color: #818cf8; }
.dark .text-indigo-700 { color: #818cf8; }
.dark .text-pink-600 { color: #f472b6; }
.dark .text-pink-700 { color: #f472b6; }
.dark .text-teal-600 { color: #2dd4bf; }
.dark .text-teal-700 { color: #2dd4bf; }
.dark .text-emerald-600 { color: #34d399; }
.dark .text-emerald-700 { color: #34d399; }
.dark .text-amber-600 { color: #fbbf24; }
.dark .text-amber-700 { color: #fbbf24; }
.dark .text-cyan-600 { color: #22d3ee; }
.dark .text-cyan-700 { color: #22d3ee; }
.dark .text-rose-600 { color: #fb7185; }
.dark .text-rose-700 { color: #fb7185; }
.dark .border-blue-200 { border-color: rgba(30, 58, 138, 0.4) !important; }
.dark .border-green-100 { border-color: rgba(20, 83, 45, 0.35) !important; }
.dark .border-red-100 { border-color: rgba(127, 29, 29, 0.35) !important; }
.dark .border-red-200 { border-color: rgba(127, 29, 29, 0.4) !important; }
.dark .border-yellow-100 { border-color: rgba(113, 63, 18, 0.35) !important; }
.dark .border-purple-100 { border-color: rgba(88, 28, 135, 0.35) !important; }
.dark .border-indigo-200 { border-color: rgba(49, 46, 129, 0.4) !important; }
.dark .border-pink-200 { border-color: rgba(131, 24, 67, 0.4) !important; }
.dark .border-amber-200 { border-color: rgba(120, 53, 15, 0.4) !important; }
.dark .border-teal-200 { border-color: rgba(19, 78, 74, 0.4) !important; }
.dark .border-emerald-200 { border-color: rgba(6, 78, 59, 0.4) !important; }
.dark .border-cyan-200 { border-color: rgba(22, 78, 99, 0.4) !important; }
.dark .border-orange-100 { border-color: rgba(124, 45, 18, 0.35) !important; }
.dark .border-rose-200 { border-color: rgba(136, 19, 55, 0.4) !important; }
.dark .border-violet-200 { border-color: rgba(91, 33, 182, 0.4) !important; }
.dark .border-sky-200 { border-color: rgba(12, 74, 110, 0.4) !important; }
.dark .border-theme-100 { border-color: rgba(var(--theme-400-rgb, 96, 165, 250), 0.3) !important; }
.dark .bg-amber-100 { background-color: rgba(120, 53, 15, 0.25); }
.dark .bg-teal-100 { background-color: rgba(19, 78, 74, 0.25); }
.dark .bg-cyan-100 { background-color: rgba(22, 78, 99, 0.25); }
.dark .bg-indigo-100 { background-color: rgba(49, 46, 129, 0.25); }
.dark .bg-rose-100 { background-color: rgba(136, 19, 55, 0.25); }
.dark .bg-violet-100 { background-color: rgba(91, 33, 182, 0.25); }
.dark .bg-orange-100 { background-color: rgba(124, 45, 18, 0.25); }
.dark .bg-pink-100 { background-color: rgba(131, 24, 67, 0.25); }
.dark .bg-theme-50 { background-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.15) !important; }
.dark .bg-theme-100 { background-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.2) !important; }
.dark ::-webkit-scrollbar-track { background: #0c0f14 !important; }
.dark ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--rule, #30363d) 75%, var(--ink, #e6edf3)) !important; }
.dark ::-webkit-scrollbar-thumb:hover { background: #6e7681 !important; }
.dark hr { border-color: var(--rule, #30363d) !important; }
.dark pre { background-color: #0c0f14 !important; color: var(--ink-2, #c9d1d9) !important; }
.dark code { background-color: #0c0f14 !important; color: var(--ink-2, #c9d1d9) !important; }
.dark .breadcrumb a { color: var(--ink-soft, #8b949e) !important; }
.dark .breadcrumb a:hover { color: var(--ink-2, #c9d1d9) !important; }
.dark .swal2-popup { background-color: var(--paper-2, #161b22) !important; color: var(--ink, #e6edf3) !important; }
.dark .swal2-title { color: var(--ink, #e6edf3) !important; }
.dark .swal2-html-container { color: var(--ink-2, #c9d1d9) !important; }
.dark .swal2-input { background-color: #0d1117 !important; border-color: var(--rule, #30363d) !important; color: var(--ink, #e6edf3) !important; }
.dark [x-show][class*="bg-white"] { background-color: var(--paper-2, #161b22) !important; }
.dark [x-show][class*="border-gray"] { border-color: var(--rule, #30363d) !important; }
.dark option { background-color: var(--paper-2, #161b22) !important; color: var(--ink, #e6edf3) !important; }
.dark .from-white { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .to-white { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .via-white { --tw-gradient-via: var(--paper-2, #111113) !important; }
.dark .from-gray-50 { --tw-gradient-from: var(--paper, #09090b) !important; }
.dark .from-gray-100 { --tw-gradient-from: var(--paper-2, #111113) !important; }
.dark .to-gray-100 { --tw-gradient-to: var(--paper-2, #111113) !important; }
.dark .to-gray-50 { --tw-gradient-to: var(--paper, #09090b) !important; }
.dark .bg-\[\#f7f8fa\] { background-color: var(--paper, #09090b) !important; }
.dark .bg-\[\#f8fafc\] { background-color: var(--paper, #09090b) !important; }
.dark .bg-\[radial-gradient\(circle_at_20\%_50\%\,rgba\(255\,255\,255\,0\.1\)_0\%\,transparent_50\%\)\] {
  background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.03) 0%, transparent 50%) !important;
}
/* ====== END GLOBAL DARK MODE OVERRIDES ====== */

.nav-link {
  position: relative;
  padding-bottom: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--theme-500);
  transition: width 0.3s ease-in-out;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
#mobileMenu.hidden { display: none; }
/* Show the focus ring only for keyboard navigation, never on mouse clicks.
   Buttons are excluded entirely — their pressed/active states already give
   enough visual feedback, and icon-only buttons (close/FAB/etc.) don't read
   well with a ring stamped over them. */
input:focus-visible, a:focus-visible {
  outline: 2px solid var(--theme-500);
  outline-offset: 2px;
}
input:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}
button:focus, button:focus-visible {
  outline: none;
}

/* ── Back bars ──
   A page's back bar (header.safe-top-header) gives its title what the back
   button and the balance chip leave. A flex item never shrinks below its
   text without min-width:0, so a long title pushed the chip off a phone's
   screen; the title is clipped across too, so a theme whose .truncate shows
   overflow still can't paint over the chip. fit-title.js then steps the
   title's font down or wraps it. */
header.safe-top-header { overflow-x: clip; }
header.safe-top-header > .flex-grow,
header.safe-top-header > .flex-1 { min-width: 0; overflow-x: clip; }
header.safe-top-header:has(> .flex-grow, > .flex-1) > :not(.flex-grow):not(.flex-1) { flex-shrink: 0; }

/* ── RTL helper utilities ──
   The page itself is dir="rtl" in Arabic, so a row already runs from the
   right: .rtl-flex-row-reverse turns it back to left-to-right. It is kept
   for theme copies that still carry it; base components no longer do. */
[dir="rtl"] .rtl-flex-row-reverse { flex-direction: row-reverse; }
[dir="rtl"] .rtl-ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .rtl-ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .rtl-ml-0 { margin-left: 0; }
[dir="rtl"] .rtl-mr-2 { margin-right: 0.5rem; }
[dir="rtl"] .rtl-mr-0 { margin-right: 0; }
[dir="rtl"] .rtl-text-right { text-align: right; }
[dir="rtl"] .rtl-text-left { text-align: left; }
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

/* ── Alpine cloak ── */
[x-cloak] { display: none !important; }

/* ── Navigation loader ──
   .loader-spinner is the hook every theme's loader keeps; the plain ring is
   drawn only on an empty one, so a theme's own drawing (a lantern, a cake)
   never gets a border ring around it. Every .loader-spinner turns, because
   themes' turning records, wheels and cockerels rely on it; a theme whose
   drawing must stay upright adds .loader-still (or sets its own animation). */
.loader-spinner {
  animation: loader-spin 0.85s linear infinite;
}
.loader-spinner.loader-still { animation: none; }
.loader-spinner:empty {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 2px solid var(--rule);
  border-top-color: var(--theme-500);
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
.loader-bar {
  transform: translateX(-100%);
  animation: loader-bar 1.4s ease-in-out infinite;
}
@keyframes loader-bar {
  0%   { transform: translateX(-100%); opacity: 0.5; }
  50%  { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-spinner, .loader-bar { animation: none !important; }
  /* Tailwind's looping utilities (live dots, low-stock and skeleton pulses)
     and the shared float and marquee: a theme or plugin page that uses them
     needs no guard of its own. */
  .animate-ping, .animate-pulse, .animate-bounce, .animate-pulse-soft,
  .animate-marquee, .float-animate { animation: none !important; }
}

/* ── Shared text overflow helpers ── */
.truncate-soft {
  min-width: 0; max-width: 11rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
.truncate-soft-sm {
  min-width: 0; max-width: 8.5rem;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom;
}
/* A title kept on one line and shrunk to fit by header.js's fitText(). On a
   phone it wraps instead, at its own size, so a long word in another
   language is never cut; .text-fit-line keeps one line there too, for a
   label in a fixed-height row such as the bottom tab bar. */
.text-fit { min-width: 0; overflow-wrap: break-word; padding-inline: .12em; } /* room for a display face's overhanging first and last letters, which overflow: hidden would cut */
.text-fit-line,
.text-fit-line.text-fit {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .text-fit {
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* On a phone a title in a header row beside a button (a listing page's
   title and its "View all" link) wraps only between words: its column is
   never narrower than its longest word, and when that and the button don't
   fit side by side the button drops below. A title in an icon row inside
   that column gets the same floor, and when the icon and its longest word
   don't fit beside each other it goes under the icon (themes that keep the
   head on one row leave the title too little room for both). The html body
   prefix outranks the themes' own .text-fit rules, several of which break
   anywhere. */
@media (max-width: 639px) {
  html body h2.text-fit { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  :is(.flex-row, .sm\:flex-row):has(> .min-w-0 h2.text-fit) { flex-wrap: wrap; }
  :is(.flex-row, .sm\:flex-row):has(> .min-w-0 h2.text-fit) > .min-w-0,
  :is(.flex-row, .sm\:flex-row) > .min-w-0 .min-w-0:has(> h2.text-fit) { min-width: min-content; }
  :is(.flex-row, .sm\:flex-row) > .min-w-0 .flex:has(> .min-w-0 > h2.text-fit) { flex-wrap: wrap; }
}

/* ── User avatar SVG dark mode ── */
.ua-bg { fill: var(--theme-100, #e2e8f0) !important; }
.ua-text { fill: var(--theme-600, #475569) !important; }
.dark .ua-bg { fill: var(--theme-900, var(--paper-2, #161b22)) !important; }
.dark .ua-text { fill: var(--theme-300, #94a3b8) !important; }

/* ── Language dropdown fade indicator ── */
:root { --lang-dd-bg: #ffffff; }
.dark { --lang-dd-bg: #121218; }

/* ── Side menu scroll ── */
/* The drawer is as tall as what the phone actually shows (100dvh; Tailwind's
   h-full/max-h-screen stay as the fallback), and its foot clears the
   home-indicator strip, where taps don't land: the sign-in/sign-out button
   there otherwise sat partly under it, and on a browser whose 100vh is taller
   than the screen it fell below the bottom edge. */
#sideMenu {
  height: 100dvh;
  max-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.side-menu-scroll {
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Mobile glass header ── */
.mobile-glass-header {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(var(--theme-500-rgb), 0.1);
  box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.06), 0 2px 8px -1px rgba(0, 0, 0, 0.04);
}
.menu-btn {
  position: relative;
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-btn:hover {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--theme-500-rgb), 0.15);
}
.menu-btn:active { transform: scale(0.98); }
.logo-container { transition: all 0.3s ease; }
.logo-container:hover { transform: translateY(-1px); }
.logo-container img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
  transition: filter 0.3s ease;
}
.logo-container:hover img { filter: drop-shadow(0 4px 8px rgba(var(--theme-500-rgb), 0.15)); }
.balance-btn {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.2);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.balance-btn:hover {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  border-color: rgba(var(--theme-500-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}
.balance-btn:active { transform: translateY(0); }
.balance-btn .coin-icon { animation: coinFloat 2s ease-in-out infinite; }
@keyframes coinFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-2px) rotate(5deg); }
}
.auth-btn-login {
  background: white;
  border: 2px solid var(--theme-600);
  color: var(--theme-600);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.auth-btn-login:hover {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-color: var(--theme-700);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.2);
  transform: translateY(-1px);
}
.auth-btn-register {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  color: white; border: none;
  box-shadow: 0 4px 12px rgba(var(--theme-500-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.auth-btn-register:hover {
  background: linear-gradient(135deg, var(--theme-700) 0%, var(--theme-800) 100%);
  box-shadow: 0 6px 20px rgba(var(--theme-500-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.auth-btn-register:active { transform: translateY(0); }
.auth-btn-register .arrow-icon { transition: transform 0.3s ease; }
.auth-btn-register:hover .arrow-icon { transform: translateX(2px); }
@media (max-width: 640px) {
  .mobile-glass-header { padding-left: 1rem; padding-right: 1rem; }
}
/* The phone bar is one row: when the buttons on the right don't fit beside
   the logo (a long "Register" or "Install" label in Russian or German, a
   balance in the thousands), the logo gives way instead of the page
   scrolling sideways. The buttons themselves never shrink. */
.mobile-glass-header { gap: .5rem; }
.mobile-glass-header > :first-child { min-width: 0; }
.mobile-glass-header > :last-child,
.mobile-glass-header .menu-btn { flex-shrink: 0; }
.mobile-glass-header .logo-container,
.mobile-glass-header .logo-container img { min-width: 0; }
/* Before that, on phones the App chip drops its word and keeps its icon. */
@media (max-width: 419px) {
  .mobile-glass-header .pwa-chip__label { display: none; }
  .mobile-glass-header .pwa-chip { padding-left: .6rem; padding-right: .6rem; }
}

/* ── Language bottom sheet ── */
#langSheetBackdrop { transition: opacity 0.25s ease; }
#langSheet { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
#langSheet .lang-row:active { background: rgba(var(--theme-500-rgb), 0.08); }
.dark #langSheet { background: var(--paper, var(--paper, #09090b)) !important; border-top: 1px solid rgba(255,255,255,0.06); }
.dark #langSheet .lang-sheet-title { color: var(--ink, #e6edf3) !important; }
.dark #langSheet .lang-row { border-color: rgba(255,255,255,0.04); }
.dark #langSheet .lang-row:hover { background: rgba(255,255,255,0.04) !important; }
.dark #langSheet .lang-row-active { background: rgba(var(--theme-500-rgb), 0.1) !important; }
.dark #langSheet .lang-row span { color: var(--ink, #e6edf3) !important; }
.dark #langSheet .lang-drag-handle { background: rgba(255,255,255,0.15); }
.dark #langSheet .lang-close-btn { background: rgba(255,255,255,0.08); color: var(--ink-soft, #8b949e); }
.dark #langSheet .lang-close-btn:hover { background: rgba(255,255,255,0.13); }
.dark #langSheet .lang-sheet-header { border-bottom-color: rgba(255,255,255,0.06); }

/* ── RTL: mobile side drawer ──────────────────────────────────────────────
   The drawer is authored for LTR (anchored to the left, slides in from the
   left) and the shared openMenu()/closeMenu() JS toggles Tailwind's
   `-translate-x-full`. In RTL we mirror it to the right edge WITHOUT touching
   that JS — these `[dir="rtl"] #sideMenu…` rules outspecify the Tailwind
   utilities, so re-anchoring the panel and flipping the hidden transform to
   slide off the right (instead of the left) is enough. The inner border flips
   automatically because the markup uses the logical `border-inline-end`. */
[dir="rtl"] #sideMenu { left: auto; right: 0; }
[dir="rtl"] #sideMenu.-translate-x-full { transform: translateX(100%); }
[dir="rtl"] #sideMenu button[onclick="closeMenu()"],
[dir="rtl"] #sideMenu button[data-px-call="closeMenu"] { right: auto; left: 1rem; }
[dir="rtl"] #sideMenu .pr-8 { padding-right: 0; padding-left: 2rem; }
/* Bottom-sheet language rows read right-to-left */
[dir="rtl"] #langSheet .lang-row span { text-align: right; }

/* ── Side drawer ── */
.premium-side-menu {
  background: #ffffff;
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.10), 1px 0 0 rgba(0, 0, 0, 0.04);
}
.drawer-profile-hd {
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .drawer-profile-hd {
  background: #121218 !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.drawer-section-label {
  display: block; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft, #64748b); padding: 0 1rem;
  margin-top: 1.5rem; margin-bottom: 0.375rem;
}
.drawer-nav-row {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; margin: 0 0.5rem;
  border-radius: 0.75rem; color: #334155;
  font-size: 0.9rem; font-weight: 500;
  transition: background-color 0.15s ease;
  cursor: pointer; width: calc(100% - 1rem); text-align: left;
}
.dark .drawer-nav-row { color: #cbd5e1 !important; }
.drawer-nav-row:hover { background-color: #f1f5f9; }
.dark .drawer-nav-row:hover { background-color: rgba(255, 255, 255, 0.05) !important; }
.drawer-nav-row:active { background-color: #e2e8f0; }
.dark .drawer-nav-row:active { background-color: rgba(255, 255, 255, 0.08) !important; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  /* auto, not 100%: themes give these side margins, and at 100% plus a
     margin the button stuck out of the closed drawer at the screen's edge.
     #sideMenu is a flex column, so auto still fills its width. */
  width: auto; padding: 1rem 0; color: #ef4444;
  font-weight: 600; font-size: 0.875rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease;
  margin-top: auto; flex-shrink: 0;
}
.drawer-logout:hover { background-color: #fef2f2; }
.dark .drawer-logout { border-top-color: rgba(255, 255, 255, 0.05) !important; }
.dark .drawer-logout:hover { background-color: rgba(239, 68, 68, 0.08) !important; }
.drawer-login {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: auto; padding: 1rem 0; color: var(--theme-600);
  font-weight: 600; font-size: 0.875rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease;
  margin-top: auto; flex-shrink: 0;
}
.drawer-login:hover { background-color: var(--theme-50, #eff6ff); }
/* Zero-specificity :where(): a theme that draws this as a filled button sets
   its own colours, which must win in dark mode too. */
:where(.dark) .drawer-login { color: var(--theme-400); border-top-color: rgba(255, 255, 255, 0.05); }
:where(.dark) .drawer-login:hover { background-color: rgba(var(--theme-500-rgb), 0.08); }

/* ── Desktop premium styles ── */
.desktop-glass-header {
  background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(var(--theme-500-rgb), 0.08);
  box-shadow: 0 4px 30px -2px rgba(0, 0, 0, 0.05), 0 2px 12px -2px rgba(var(--theme-500-rgb), 0.04);
}
.desktop-logo-container { position: relative; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.desktop-logo-container::before {
  content: ''; position: absolute; inset: -4px;
  background: linear-gradient(135deg, rgba(var(--theme-500-rgb), 0.1), rgba(var(--theme-300-rgb), 0.05));
  border-radius: 12px; opacity: 0; transition: opacity 0.3s ease;
}
.desktop-logo-container:hover::before { opacity: 1; }
.desktop-logo-container img {
  position: relative;
  filter: drop-shadow(0 2px 6px rgba(var(--theme-500-rgb), 0.08));
  transition: all 0.3s ease;
}
.desktop-logo-container:hover img {
  filter: drop-shadow(0 4px 12px rgba(var(--theme-500-rgb), 0.15));
  transform: translateY(-1px);
}
.premium-search-container {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.12);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px -2px rgba(var(--theme-500-rgb), 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-search-container:hover {
  border-color: rgba(var(--theme-500-rgb), 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(var(--theme-500-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.premium-search-container:focus-within {
  border-color: rgba(var(--theme-500-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12), 0 8px 24px -4px rgba(var(--theme-500-rgb), 0.14);
  background: #FFFFFF;
}
.premium-search-input {
  background: transparent; border: none; outline: none;
  color: #1F2937; font-weight: 500; letter-spacing: 0.01em; line-height: 1.5;
}
.premium-search-input::placeholder { color: #9CA3AF; font-weight: 400; }
.search-icon-wrapper {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-radius: 10px; width: 32px; height: 32px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-search-container:hover .search-icon-wrapper {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  transform: scale(1.05);
}
.premium-search-container:focus-within .search-icon-wrapper {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.3);
}
.premium-search-container:focus-within .search-icon-wrapper svg { color: white !important; }
.search-shortcut-badge {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 12px; font-weight: 600; color: #9CA3AF;
  background: linear-gradient(180deg, #F9FAFB 0%, #F3F4F6 100%);
  border: 1px solid #E5E7EB; border-radius: 6px; padding: 2px 8px; line-height: 1.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease; align-items: center; justify-content: center;
}
.premium-nav-shell {
  background: linear-gradient(135deg, rgba(var(--theme-50-rgb), 0.85) 0%, rgba(255, 255, 255, 0.95) 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.12);
  border-radius: 9999px; padding: 6px 10px;
  box-shadow: 0 8px 24px -10px rgba(var(--theme-500-rgb), 0.25), 0 2px 8px -4px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.premium-nav-link {
  position: relative; padding: 8px 12px; border-radius: 10px;
  font-weight: 600; letter-spacing: 0.01em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-nav-link::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--theme-500-rgb), 0.08), rgba(var(--theme-300-rgb), 0.05));
  border-radius: 10px; opacity: 0; transition: opacity 0.3s ease;
}
.premium-nav-link:hover::before { opacity: 1; }
.premium-nav-link::after {
  content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px;
  height: 2.5px;
  background: linear-gradient(90deg, var(--theme-500), var(--theme-400));
  border-radius: 2px; transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-nav-link:hover::after, .premium-nav-link.active::after { transform: scaleX(1); }
.premium-nav-link.active { color: var(--theme-700); }
.premium-nav-link span { position: relative; z-index: 1; }
.premium-support-btn {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F4F6 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.2);
  border-radius: 12px; box-shadow: 0 2px 10px rgba(var(--theme-500-rgb), 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-support-btn:hover {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-color: rgba(var(--theme-500-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.15);
  transform: translateY(-2px);
}
.premium-support-btn i { transition: all 0.3s ease; }
.premium-support-btn:hover i { color: var(--theme-700); transform: scale(1.1); }
.premium-balance-display {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.25); border-radius: 9999px;
  box-shadow: 0 2px 12px rgba(var(--theme-500-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 700; letter-spacing: 0.02em;
}
.premium-balance-display:hover {
  background: linear-gradient(135deg, var(--theme-100) 0%, var(--theme-200) 100%);
  border-color: rgba(var(--theme-500-rgb), 0.4);
  box-shadow: 0 4px 20px rgba(var(--theme-500-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
.premium-balance-display .coin-icon { animation: desktopCoinFloat 2.5s ease-in-out infinite; }
@keyframes desktopCoinFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(8deg); }
}
.premium-user-avatar {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.premium-user-avatar:hover {
  background: linear-gradient(135deg, var(--theme-700) 0%, var(--theme-800) 100%);
  box-shadow: 0 6px 24px rgba(var(--theme-500-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px) scale(1.05);
}
.premium-user-avatar:active { transform: translateY(0) scale(1); }
.premium-dropdown {
  background: white; border: 1px solid rgba(var(--theme-500-rgb), 0.12);
  border-radius: 16px;
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15), 0 4px 16px -4px rgba(var(--theme-500-rgb), 0.1);
  overflow: hidden; min-width: 0;
}
.premium-dropdown-item { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
.premium-dropdown-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--theme-500), var(--theme-400));
  transform: scaleY(0); transition: transform 0.2s ease;
}
.premium-dropdown-item:hover::before { transform: scaleY(1); }
.premium-dropdown-item:hover {
  background: linear-gradient(90deg, rgba(var(--theme-500-rgb), 0.05) 0%, rgba(255, 255, 255, 1) 100%);
}
.desktop-auth-btn-login {
  background: white; border: 2px solid var(--theme-600); color: var(--theme-600);
  border-radius: 12px; box-shadow: 0 2px 12px rgba(var(--theme-500-rgb), 0.12);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.desktop-auth-btn-login:hover {
  background: linear-gradient(135deg, var(--theme-50) 0%, var(--theme-100) 100%);
  border-color: var(--theme-700); box-shadow: 0 4px 20px rgba(var(--theme-500-rgb), 0.25);
  transform: translateY(-2px);
}
.desktop-auth-btn-register {
  background: linear-gradient(135deg, var(--theme-500) 0%, var(--theme-700) 100%);
  color: white; border: none; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(var(--theme-500-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600; letter-spacing: 0.025em;
}
.desktop-auth-btn-register:hover {
  background: linear-gradient(135deg, var(--theme-700) 0%, var(--theme-800) 100%);
  box-shadow: 0 6px 24px rgba(var(--theme-500-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.desktop-auth-btn-register:active { transform: translateY(0); }
.desktop-auth-btn-register .arrow-icon { transition: transform 0.3s ease; }
.desktop-auth-btn-register:hover .arrow-icon { transform: translateX(3px); }

/* ── Flip animation for search placeholder ── */
/* The rotating search hint fills the field; a hint too long for it (German
   and other long languages on a phone) ends in an ellipsis rather than being
   cut off mid-word. */
.flip-wrapper {
  width: 100%; min-width: 0; height: 1.5em; overflow: hidden; perspective: 1000px;
}

/* Three turns through the hints, then it rests on the first one. */
.flip { display: flex; flex-direction: column; animation: flipCube 10s cubic-bezier(0.23, 1, 0.32, 1) 3; }
.flip div {
  height: 1.5em; line-height: 1.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform-origin: top; backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .flip { animation: none; }
}
@keyframes flipCube {
  0%, 18%   { transform: translateY(0); }
  22%, 43%  { transform: translateY(-1.5em); }
  47%, 68%  { transform: translateY(-3em); }
  72%, 93%  { transform: translateY(-4.5em); }
  97%, 100% { transform: translateY(0); }
}

/* ── Desktop header layout ── */
#desktopHeader { height: 64px; align-items: center; }
@media (min-width: 1024px) { #desktopHeader { display: flex; align-items: center; } }
#desktopHeader > a,
#desktopHeader > form,
#desktopHeader > div { align-self: center; }

/* ── Search bar — modern · theme-token driven ──
   Surfaces (--paper/--paper-2), ink (--ink/--ink-soft) and hairlines (--rule)
   come from the active storefront theme so the field, dropdown, chips, clear
   button and hint all match casino (felt+gold), classic (paper) and editorial
   out of the box — including dark mode, which flips via the same tokens.
   Grey fallbacks keep it sane if no theme stylesheet is loaded. The focus ring /
   chip-hover accent is the per-store colour from dynamic-theme.css (--theme-*).
   Themes may still ID-scope their own overrides (they load after this file). */
#desktopHeader .hdr-search {
  background: var(--paper-2, #f4f4f5); border: 1.5px solid var(--rule, transparent);
  border-radius: var(--radius, 14px); position: relative;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#desktopHeader .hdr-search:hover {
  background: var(--paper, #f9fafb);
  border-color: rgba(var(--theme-500-rgb), 0.28);
}
#desktopHeader .hdr-search:focus-within {
  background: var(--paper, #ffffff); border-color: var(--theme-500, #6366f1);
  box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb), 0.12), var(--shadow-md, 0 2px 16px -4px rgba(0,0,0,0.08));
}
#desktopHeader .hdr-search input { background: transparent; color: var(--ink, #111827); }
#desktopHeader .hdr-search input::placeholder { color: var(--ink-soft, #9ca3af); }
#desktopHeader .hdr-search #searchGlassIcon { color: var(--ink-soft, #9ca3af); transition: color 0.2s; }
#desktopHeader .hdr-search:focus-within #searchGlassIcon { color: var(--theme-500, #6366f1); }

/* Clear (×) button */
.hdr-search-clear {
  width: 20px; height: 20px; display: none;
  align-items: center; justify-content: center;
  border-radius: 50%; background: var(--rule-soft, #e5e7eb); color: var(--ink-soft, #6b7280);
  flex-shrink: 0; transition: background 0.15s, color 0.15s, transform 0.15s;
  border: none; cursor: pointer; padding: 0;
}
.hdr-search-clear:hover { background: var(--rule, #d1d5db); color: var(--ink, #111827); transform: scale(1.1); }
.hdr-search-clear.visible { display: flex; }

/* Suggestions dropdown panel */
.hdr-search-dropdown {
  display: none; position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  background: var(--paper-2, #ffffff); border: 1px solid var(--rule, rgba(0,0,0,0.08));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-md, 0 8px 32px -4px rgba(0,0,0,0.12)), 0 2px 8px -2px rgba(0,0,0,0.06);
  z-index: 200; overflow: hidden;
  animation: searchDropdownIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.hdr-search-dropdown.visible { display: block; }
@keyframes searchDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hdr-search-dropdown-inner { padding: 14px 14px 12px; }
.hdr-search-dropdown-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft, #9ca3af); margin-bottom: 10px;
}
.hdr-search-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500; color: var(--ink-2, #374151);
  background: var(--paper, #f9fafb); border: 1px solid var(--rule, #e5e7eb);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
  transition: all 0.15s ease; white-space: nowrap; line-height: 1.4;
}
.hdr-search-chip:hover {
  background: rgba(var(--theme-500-rgb), 0.10);
  border-color: rgba(var(--theme-500-rgb), 0.35);
  color: var(--theme-700, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--theme-500-rgb), 0.12);
}
.dark .hdr-search-chip:hover { color: var(--theme-300, #93c5fd); }
.hdr-search-hint {
  display: none; align-items: center; gap: 6px;
  padding: 8px 14px; border-top: 1px solid var(--rule, #f3f4f6);
  font-size: 11.5px; color: var(--ink-soft, #9ca3af);
}
.hdr-search-hint.visible { display: flex; }
.hdr-search-hint kbd {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 10.5px;
  background: var(--paper, #f3f4f6); border: 1px solid var(--rule, #e5e7eb);
  border-radius: 4px; padding: 1px 6px; color: var(--ink-soft, #6b7280); line-height: 1.5;
}

/* ── Desktop header icon/action buttons ── */
#desktopHeader .hdr-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; color: #6b7280;
  transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
#desktopHeader .hdr-btn:hover { background: #f3f4f6; color: #111827; }
.dark #desktopHeader .hdr-btn { color: var(--ink-soft, #8b949e); }
.dark #desktopHeader .hdr-btn:hover { background: rgba(255,255,255,0.08); color: var(--ink, #e6edf3); }
#desktopHeader .hdr-text-btn {
  height: 36px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 10px; font-size: 0.875rem; font-weight: 600;
  color: #374151; transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
#desktopHeader .hdr-text-btn:hover { background: #f3f4f6; }
.dark #desktopHeader .hdr-text-btn { color: var(--ink-2, #c9d1d9); }
.dark #desktopHeader .hdr-text-btn:hover { background: rgba(255,255,255,0.08); }
#desktopHeader .hdr-balance {
  height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 9999px; background: var(--theme-50, #eff6ff);
  border: 1.5px solid rgba(var(--theme-500-rgb), 0.22);
  color: var(--theme-700, #1d4ed8);
  font-size: 0.875rem; font-weight: 700;
  transition: background 0.15s, border-color 0.15s; flex-shrink: 0; min-width: 0;
}
#desktopHeader .hdr-balance:hover { background: var(--theme-100, #dbeafe); border-color: rgba(var(--theme-500-rgb), 0.4); }
.dark #desktopHeader .hdr-balance { background: rgba(var(--theme-500-rgb),.15); border-color: rgba(var(--theme-500-rgb),.3); color: var(--theme-300, #93c5fd); }
.dark #desktopHeader .hdr-balance:hover { background: rgba(var(--theme-500-rgb),.22); }
#desktopHeader .hdr-login {
  height: 36px; padding: 0 16px; border-radius: 10px;
  border: 2px solid var(--theme-500, #6366f1); color: var(--theme-600, #4f46e5);
  font-size: 0.875rem; font-weight: 600; transition: background 0.15s; white-space: nowrap;
}
#desktopHeader .hdr-login:hover { background: var(--theme-50, #eff6ff); }
.dark #desktopHeader .hdr-login { border-color: rgba(var(--theme-500-rgb),.6); color: var(--theme-400); background: transparent; }
#desktopHeader .hdr-register {
  height: 36px; padding: 0 16px; border-radius: 10px;
  background: var(--theme-600, #4f46e5); color: #fff;
  font-size: 0.875rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 1px 4px rgba(var(--theme-500-rgb),.35);
  transition: background 0.15s, box-shadow 0.15s; white-space: nowrap;
}
#desktopHeader .hdr-register:hover { background: var(--theme-700, #4338ca); box-shadow: 0 4px 12px rgba(var(--theme-500-rgb),.4); }
.dark #desktopHeader .hdr-register { background: var(--theme-500, #6366f1); }
.dark #desktopHeader .hdr-register:hover { background: var(--theme-600, #4f46e5); }

/* ──────────────────────────────────────────────────────────────────────────
   Mobile input zoom guard
   iOS Safari auto-zooms the viewport when a focused form control computes a
   font-size below 16px. Many inputs use Tailwind's text-sm/text-xs (14px/12px),
   which triggers this and forces the user to pinch back out. Enforce a 16px
   minimum on text-entry controls at phone widths only, so desktop styling and
   non-text controls are untouched. !important is required to beat single-class
   utilities like `text-sm`.
   ────────────────────────────────────────────────────────────────────────── */
/* A skipped theme moment (pxPlayThemeMoment(), header.js): hidden rather than
   emptied, so the theme's own timers finish with the overlay unseen. */
html.px-fx-skipped #pxThemeFx {
  visibility: hidden !important;
}

/* A moment played while a window is open (a prize window's 'win') runs
   beneath it: header.js puts the overlay just under the window's layer and
   names that z-index here, over each theme's own .px-fx--* stacking. A
   page-wide filter a theme puts on <html> or <body> for its switch (sepia,
   grayscale) would tint the window too, so it is left off meanwhile. */
html.px-fx-under #pxThemeFx {
  z-index: var(--px-fx-under-z, 0) !important;
}
html.px-fx-under,
html.px-fx-under body {
  filter: none !important;
}

/* ── Dark/light mode toggle transition ──
   toggleDarkMode() (header.js) briefly adds this class to <html> so the
   color-scheme swap fades instead of snapping. Scoped to a short-lived
   class (not a permanent global rule) so it never dampens unrelated
   animations/transforms elsewhere on the page. */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 260ms ease, border-color 260ms ease,
    color 260ms ease, fill 260ms ease, stroke 260ms ease,
    box-shadow 260ms ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}

/* ── Themed dark/light toggle effects (shared skeleton) ──
   header.js creates #pxThemeFx once and swaps its class to run a themed
   transition (see e.g. assets/themes/editorial/theme.css `.px-fx--editorial-roller`
   and assets/themes/halloween/theme.css `.px-fx--halloween-fog`) instead of the
   plain fade above. Themes without a registered effect never touch this. */
.px-fx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* A site that uploaded a logo but no dark-mode version: on a dark page the
   logo sits on a light plate in the theme's own ink colour, so dark lettering
   stays readable. Themes add .px-logo-plate only when no dark logo exists. */
html.dark .px-logo-plate {
  background: color-mix(in srgb, var(--ink, #f4efe2) 94%, transparent);
  padding: 4px 10px;
  border-radius: 10px;
  box-sizing: content-box;
}

/* Status strip (every theme's layout/desktop-nav.php and layout/topbar.php).
   Its labels are upper-cased with PHP's strtoupper(), which leaves accented
   and non-Latin letters alone ("LEILõES", "Тёмный режим"); upper-casing in
   CSS finishes them by the page language's own rules. The language list
   that drops down from it keeps its names as written. */
.hdr-strip, .hdr-strip button { text-transform: uppercase; }
.hdr-strip .ed-dropdown { text-transform: none; }
/* The strip's menu needs room: in Russian or German it pushed the strip
   past the window at 1280px. The "/" or dot before the menu hides with it,
   so the strip doesn't end on a lone separator. */
@media (max-width: 1439.98px) {
  .hdr-strip .xl\:inline-flex,
  .hdr-strip .xl\:inline-block { display: none !important; }
}

/* A soft hover for a small text button: --px-hover-ink and --px-hover-bg
   name its hover colours (were inline onmouseover/onmouseout styles). */
.px-hover { color: var(--ink-soft); background: transparent; }
.px-hover:hover, .px-hover:focus-visible { color: var(--px-hover-ink, var(--ink-soft)); background: var(--px-hover-bg, transparent); }

/* Status tones for chips, pills and notes in base components: a hue mixed
   into the theme's own --paper and --ink, so every theme and html.dark get a
   readable version without a copy. A theme moves a hue with --px-good,
   --px-warn, --px-crit or --px-info, or restyles .px-tone--* outright. */
:root { --px-good: #15803d; --px-warn: #b45309; --px-crit: #b91c1c; --px-info: var(--theme-600, var(--theme-500, #2563eb));
  /* Text on a solid tone fill (an urgent button): a theme with a pale tone sets its own. */
  --px-good-ink: #fff; --px-warn-ink: #fff; --px-crit-ink: #fff; --px-info-ink: var(--btn-ink, #fff); }
/* Dark mode's tones are light pastels, so text on them is near-black. */
html.dark { --px-good-ink: #0b1410; --px-warn-ink: #1a1200; --px-crit-ink: #1f0a0a; --px-info-ink: #0a1020; }
.px-tone--good { background: color-mix(in srgb, var(--px-good) 14%, var(--paper)); color: color-mix(in srgb, var(--px-good) 78%, var(--ink)); }
.px-tone--warn { background: color-mix(in srgb, var(--px-warn) 16%, var(--paper)); color: color-mix(in srgb, var(--px-warn) 78%, var(--ink)); }
.px-tone--crit { background: color-mix(in srgb, var(--px-crit) 14%, var(--paper)); color: color-mix(in srgb, var(--px-crit) 78%, var(--ink)); }
.px-tone--info { background: color-mix(in srgb, var(--px-info) 13%, var(--paper)); color: color-mix(in srgb, var(--px-info) 78%, var(--ink)); }
.px-tone--mut  { background: color-mix(in srgb, var(--ink) 8%, var(--paper)); color: var(--ink-2); }
.px-tone-border--warn { border-color: color-mix(in srgb, var(--px-warn) 35%, var(--rule)); }
.px-tone-text--good { color: color-mix(in srgb, var(--px-good) 78%, var(--ink)); }
.px-tone-text--warn { color: color-mix(in srgb, var(--px-warn) 78%, var(--ink)); }
.px-tone-text--crit { color: color-mix(in srgb, var(--px-crit) 78%, var(--ink)); }
.px-tone-text--info { color: color-mix(in srgb, var(--px-info) 78%, var(--ink)); }
.px-tone-border--info { border-color: color-mix(in srgb, var(--px-info) 35%, var(--rule)); }
.px-tone-border--good { border-color: color-mix(in srgb, var(--px-good) 35%, var(--rule)); }
.px-tone-border--crit { border-color: color-mix(in srgb, var(--px-crit) 35%, var(--rule)); }
.px-hover-crit:hover { color: var(--px-crit); }
/* A table's head (or foot) in a base component. It goes on the <thead>, never
   on the <tr>: a row paints over its thead, so a row colour hides a theme's
   thead colour. :where() keeps it at no weight, so a theme's own thead or th
   background always wins. */
:where(.px-thead) { background: var(--paper-2); }
:where(.px-thead--paper) { background: var(--paper); }
.px-dot { background: currentColor; }

/* Share buttons (components/item/share-row.php, a referral's share row):
   brand colours by default, each a shade deep enough for white text
   (4.5:1); a theme restyles them with --share-* or .px-share--* outright. */
:root { --share-fb: #0866FF; --share-x: #0f1419; --share-wa: #0e7a5e; --share-tg: #1a7cb3; --share-pin: #E60023; --share-ink: #fff; }
.px-share { color: var(--share-ink); }
.px-share:hover { filter: brightness(.94); }
.px-share--fb { background: var(--share-fb); }
.px-share--x { background: var(--share-x); }
.px-share--wa { background: var(--share-wa); }
.px-share--tg { background: var(--share-tg); }
.px-share--pin { background: var(--share-pin); }
/* A pickable card (a delivery address): the picked one takes a wash of the
   accent over the theme's own paper, so it stays dark in dark mode. */
.px-pick-card:hover { border-color: color-mix(in srgb, var(--theme-500) 45%, var(--rule)) !important; }
.px-pick-card:has(:checked) { border-color: var(--theme-500) !important; background: color-mix(in srgb, var(--theme-500) 8%, var(--paper)); }

/* ── Language moment ──
   pxLanguageMoment() in header.js. The <head> holds the new page back with
   .px-lang-arriving until the words the last page showed are in place (with
   a fallback, so a page whose script never runs still shows after 1.5s);
   then each line turns into its translation, lit in the theme's accent while
   it does, and <main> slides across when the reading direction flips. */
html.px-lang-saving, html.px-lang-saving * { cursor: progress !important; }
html.px-lang-arriving body {
  opacity: 0;
  animation: px-lang-show 0s linear 1.5s forwards;
}
@keyframes px-lang-show { to { opacity: 1; } }
.px-lang-glyph {
  text-shadow: 0 0 .55em color-mix(in srgb, var(--theme-500, currentColor) 55%, transparent),
               0 0 1px color-mix(in srgb, var(--theme-500, currentColor) 70%, transparent);
  transition: text-shadow .12s linear;
}
html.px-lang-flip.px-lang-in #px-spa-content { animation: px-lang-slide-in .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes px-lang-slide-in { from { transform: translateX(calc(var(--px-lang-shift, 0px) * -1)); opacity: .55; } }
/* The scene layer (pxLangScene()). It fades in on the old page; on the new
   one it is there from the first frame, so the switch never shows the
   reload. A theme's own scene draws inside it and may restyle it. */
.px-lang-stage {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: color-mix(in srgb, var(--theme-900, #0b1020) 46%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: auto;
}
.px-lang-stage-out { animation: px-lang-stage-in .18s ease-out both; }
.px-lang-stage-leaving { opacity: 0; transition: opacity .22s ease-in; }
@keyframes px-lang-stage-in { from { opacity: 0; } }
.px-lang-card {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px;
  max-width: min(560px, 100%); padding: 22px 26px; border-radius: 18px; box-sizing: border-box;
  background: var(--paper-2, #fff); color: var(--ink, #111827);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45);
  font: 600 clamp(15px, 3.6vw, 19px)/1.25 var(--font-display, system-ui, sans-serif);
}
.px-lang-side { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.px-lang-globe { flex: none; font-size: 1.15em; color: var(--theme-500, currentColor); opacity: .85; }
.px-lang-side b { overflow-wrap: anywhere; }
.px-lang-arrow { color: var(--theme-500, currentColor); font-size: 1.3em; }
.px-lang-stamp {
  position: absolute; right: -10px; top: -14px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: #fff;
  background: var(--theme-500, #2563eb); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .4);
  opacity: 0;
}
.px-lang-stage-out .px-lang-card { animation: px-lang-card-in .28s cubic-bezier(.2, .8, .3, 1.15) both; }
.px-lang-stage-out .px-lang-new { animation: px-lang-new-in .3s ease-out .32s both; }
.px-lang-stage-out .px-lang-arrow { animation: px-lang-new-in .25s ease-out .2s both; }
.px-lang-stage-in .px-lang-old { animation: px-lang-old-dim .3s ease .15s both; }
@keyframes px-lang-old-dim { to { opacity: .45; } }
.px-lang-stage-in .px-lang-stamp { animation: px-lang-stamp .32s cubic-bezier(.2, .9, .3, 1.3) .12s both; }
@keyframes px-lang-card-in { from { transform: translateY(14px) scale(.94); opacity: 0; } }
@keyframes px-lang-new-in { from { transform: translateX(-10px); opacity: 0; } }
@keyframes px-lang-stamp { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.px-lang-flip #px-spa-content { animation: none !important; }
}

/* Countdowns rewrite their digits every second; with proportional figures
   each tick changes the text's width ("1:11" is narrower than "0:58") and
   nudges whatever sits beside it. Every countdown the templates print
   carries one of these hooks; tabular figures give each digit one width. */
[data-end], [data-end-time], [data-ends], .countdown-timer, .countdown-box, [class*="-countdown-time"] {
  font-variant-numeric: tabular-nums;
}

/* /assets/themes/prism/assets/fonts/fonts.css */
/* Prism type, self-hosted (SIL Open Font License, see the OFL-*.txt files).
   Bricolage Grotesque for display, Geist for text, Geist Mono for figures.
   Bricolage has no Cyrillic or Greek and the mono face is only used for
   digits, so those scripts fall back as theme.css lists. */

/* Bricolage Grotesque, vietnamese */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/bricolage-grotesque-500-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Bricolage Grotesque, latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/bricolage-grotesque-500-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bricolage Grotesque, latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/bricolage-grotesque-500-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist, cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/geist-400-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Geist, vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/geist-400-700-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Geist, latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/geist-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist, latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/geist-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono, latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/geist-mono-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono, latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/assets/themes/prism/assets/fonts/geist-mono-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /assets/themes/prism/theme.css */
/* ============================================================
   PRISM THEME: the store's own colour, cut clean.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   A light-first storefront in the manner of a good product site:
   a cool off-white ground, white cards that sit on soft shadows,
   generous space, crisp type and one strong accent. The accent is
   the store's own: every accent here reads the kernel's brand scale
   (--theme-*, from tbl_settings.theme_color), never a fixed hue.
   Bricolage Grotesque sets the headings, Geist the text and Geist
   Mono every figure that ticks or adds up.

   The only ornament is the prism: a triangle with a line of light
   refracting through it. It is the emblem, the corner mark on a
   phone, the small dividers and the dark/light switch.

   After hours the ground goes to deep ink, cards are raised navy and
   the accent glows a step lighter.

   Steps of the brand scale, chosen so they read for any stock colour:
   by day a fill is step 700 under white letters and accent text is
   800; after hours a fill is 400 under ink letters and accent text is
   300. --theme-600 is pointed at 700 so plugin buttons drawn in it with
   white letters stay legible on light brand colours too.
   ============================================================ */

:root {
  --font-display: 'Bricolage Grotesque', 'Geist', 'Segoe UI', system-ui, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-ui:      'Geist', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  --font-num:     'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --paper:        #f4f5f7;
  --paper-2:      #ffffff;
  --paper-3:      #eef0f3;
  --ink:          #11131c;
  --ink-2:        #2b2f3c;
  --ink-soft:     #5a6072;
  --rule:         #e3e5ea;
  --rule-soft:    #eceef2;
  --radius:       22px;
  --radius-md:    16px;
  --radius-sm:    12px;
  --shadow:       0 1px 2px rgba(16, 18, 28, .04), 0 8px 24px rgba(16, 18, 28, .06);
  --shadow-md:    0 2px 4px rgba(16, 18, 28, .05), 0 18px 44px rgba(16, 18, 28, .1);
  --shadow-lift:  0 2px 6px rgba(16, 18, 28, .06), 0 22px 50px rgba(16, 18, 28, .13);

  /* The brand scale, as Prism uses it */
  --theme-600:     var(--theme-700);
  --theme-600-rgb: var(--theme-700-rgb);
  --theme-600-ink: #ffffff;
  --psm-accent:       var(--theme-700);
  --psm-accent-rgb:   var(--theme-700-rgb);
  --psm-on-accent:    #ffffff;
  --psm-accent-text:  var(--theme-800);
  --psm-accent-soft:  rgba(var(--theme-700-rgb), .1);
  --psm-accent-line:  rgba(var(--theme-700-rgb), .28);
  --psm-accent-glow:  rgba(var(--theme-500-rgb), .22);
  --psm-mark:         var(--theme-600);
  /* The ink panel (the box tile, the featured plan): near-black by day */
  --psm-panel:     #11131c;
  --psm-panel-2:   #1b1e2a;
  --psm-on-panel:  #f4f5f7;
  --psm-on-panel-soft: #b9bdcb;
  --psm-panel-accent: var(--theme-300);

  /* Neutral support colours: none of them competes with the accent */
  --psm-good:      #0f7a4b; --psm-good-soft: rgba(15, 122, 75, .1);
  --psm-warn:      #8a5a00; --psm-warn-soft: rgba(176, 116, 0, .12);
  --psm-bad:       #c0362c; --psm-bad-soft: rgba(192, 54, 44, .1);
  --psm-info:      #33507a; --psm-info-soft: rgba(51, 80, 122, .1);
  --psm-live:      #e5484d;
  --psm-focus:     var(--theme-700);
  --psm-glass:     rgba(255, 255, 255, .72);
  --psm-glass-line: rgba(255, 255, 255, .6);

  --px-good: #0f7a4b;
  --px-warn: #8a5a00;
  --px-crit: #c0362c;
  --px-info: #33507a;

  --notify-accent: var(--psm-accent);
  --nav-accent:    var(--psm-accent);
  --hdr-strip-bg:  #f4f5f7;
  --hdr-strip-rule: #e3e5ea;
  --text-primary:  var(--ink);

  /* Primary press: the accent, slightly lifted; secondary: a white card */
  --btn-bg:       var(--psm-accent);
  --btn-bg-hover: var(--psm-accent);
  --btn-ink:      #ffffff;
  --btn-edge:     transparent;
  --btn-face:     linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 60%);
  --btn-shadow:   0 1px 2px rgba(16, 18, 28, .12), 0 6px 16px -6px rgba(var(--theme-700-rgb), .55);
  --btn-shadow-hover: 0 2px 4px rgba(16, 18, 28, .12), 0 12px 24px -8px rgba(var(--theme-700-rgb), .6);
  --btn-shadow-down:  inset 0 2px 4px rgba(0, 0, 0, .2), 0 1px 2px rgba(16, 18, 28, .1);

  --psm-card: var(--paper-2);
  --psm-hair: var(--rule);

  /* The ground: off-white with the faintest cool lift at the top */
  --page-bg:
    radial-gradient(1400px 520px at 50% -260px, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%) no-repeat,
    #f4f5f7;

  /* The prism: a triangle, and the line of light through it, as masks */
  --psm-prism: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 22.4 21H1.6Z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M12 2.2 15.2 21' stroke='%23000' stroke-width='1.6' opacity='.6'/%3E%3C/svg%3E");
  --psm-prism-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 23 21.5H1Z'/%3E%3C/svg%3E");
  /* The divider: a short hairline with a little prism set in it */
  --psm-rule-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6h13M27 6h13' stroke='%23000' stroke-width='1'/%3E%3Cpath d='M20 1.5 25 10.5H15Z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* After hours: deep ink, raised navy, the accent a step brighter */
html.dark {
  --paper:        #0d0f17;
  --paper-2:      #161925;
  --paper-3:      #1f2331;
  --ink:          #eef0f6;
  --ink-2:        #d3d7e2;
  --ink-soft:     #a2a8ba;
  --rule:         #272b3a;
  --rule-soft:    #1f2331;
  --shadow:       0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-md:    0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 48px rgba(0, 0, 0, .45);
  --shadow-lift:  0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 56px rgba(0, 0, 0, .55);

  --theme-600:     var(--theme-700);
  --theme-600-rgb: var(--theme-700-rgb);
  --theme-600-ink: #ffffff;
  --psm-accent:       var(--theme-400);
  --psm-accent-rgb:   var(--theme-400-rgb);
  --psm-on-accent:    #0d0f17;
  --psm-accent-text:  var(--theme-300);
  --psm-accent-soft:  rgba(var(--theme-400-rgb), .16);
  --psm-accent-line:  rgba(var(--theme-400-rgb), .36);
  --psm-accent-glow:  rgba(var(--theme-400-rgb), .3);
  --psm-mark:         var(--theme-400);
  --psm-panel:     #eef0f6;
  --psm-panel-2:   #dfe2ec;
  --psm-on-panel:  #0d0f17;
  --psm-on-panel-soft: #3d4252;
  --psm-panel-accent: var(--theme-800);

  --psm-good:      #5fd6a0; --psm-good-soft: rgba(95, 214, 160, .14);
  --psm-warn:      #f2c46b; --psm-warn-soft: rgba(242, 196, 107, .14);
  --psm-bad:       #ff8f84; --psm-bad-soft: rgba(255, 143, 132, .14);
  --psm-info:      #9db8ea; --psm-info-soft: rgba(157, 184, 234, .14);
  --psm-live:      #ff6b6f;
  --psm-focus:     var(--theme-300);
  --psm-glass:     rgba(22, 25, 37, .72);
  --psm-glass-line: rgba(255, 255, 255, .08);

  --px-good: #5fd6a0;
  --px-warn: #f2c46b;
  --px-crit: #ff8f84;
  --px-info: #9db8ea;

  --hdr-strip-bg:  #0d0f17;
  --hdr-strip-rule: #1f2331;

  --btn-bg:       var(--psm-accent);
  --btn-bg-hover: var(--theme-300);
  --btn-ink:      #0d0f17;
  --btn-face:     linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  --btn-shadow:   0 0 0 1px rgba(255, 255, 255, .06) inset, 0 8px 24px -10px rgba(var(--theme-400-rgb), .6);
  --btn-shadow-hover: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 12px 30px -8px rgba(var(--theme-400-rgb), .7);
  --btn-shadow-down:  inset 0 2px 4px rgba(0, 0, 0, .35);

  --page-bg:
    radial-gradient(1200px 520px at 50% -240px, rgba(var(--theme-400-rgb), .1), rgba(var(--theme-400-rgb), 0) 70%) no-repeat,
    #0d0f17;
}

/* Colours the theme's drawings read (includes/art.php), with the day set
   as fallback inside each drawing */
:root {
  --psm-a-paper: #ffffff; --psm-a-line: #11131c; --psm-a-soft: #eef0f3; --psm-a-mid: #c9cdd8;
  --psm-a-glass: rgba(var(--theme-500-rgb), .12); --psm-a-beam: #ffffff;
  --psm-a-a3: var(--theme-300); --psm-a-a5: var(--theme-500); --psm-a-a7: var(--theme-700);
}
html.dark {
  --psm-a-paper: #161925; --psm-a-line: #eef0f6; --psm-a-soft: #1f2331; --psm-a-mid: #3a3f52;
  --psm-a-glass: rgba(var(--theme-400-rgb), .16); --psm-a-beam: #eef0f6;
  --psm-a-a3: var(--theme-200); --psm-a-a5: var(--theme-300); --psm-a-a7: var(--theme-400);
}

/* ── Game palette ──
   The earn arena hands these to each HTML5 board: the white card and
   the off-white well by day, raised navy at night; tiles climb from the
   palest neutral through the accent's own steps to ink. */
:root {
  --game-bg:        #eef0f3;
  --game-surface:   #e3e5ea;
  --game-surface-2: #ffffff;
  --game-ink:       #11131c;
  --game-muted:     #5a6072;
  --game-accent:    var(--theme-700);
  --game-accent-ink:#ffffff;
  --game-good:      #0f7a4b;
  --game-bad:       #c0362c;
  --game-tile-1:    #ffffff;
  --game-tile-2:    #eef0f3;
  --game-tile-3:    var(--theme-100);
  --game-tile-4:    var(--theme-200);
  --game-tile-5:    var(--theme-400);
  --game-tile-6:    var(--theme-600);
  --game-tile-7:    var(--theme-800);
  --game-tile-8:    #11131c;
  --game-radius:    12px;
  --game-font:      'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/prism/assets/fonts/fonts.css";
  --game-arena-screen: #eef0f3;
  --game-arena-coins:  #8a5a00;
  --game-arena-win:    #0f7a4b;
  --game-arena-danger: #c0362c;
  --game-pattern:   none;
}
html.dark {
  --game-bg:        #161925;
  --game-surface:   #0d0f17;
  --game-surface-2: #1f2331;
  --game-ink:       #eef0f6;
  --game-muted:     #a2a8ba;
  --game-accent:    var(--theme-400);
  --game-accent-ink:#0d0f17;
  --game-good:      #5fd6a0;
  --game-bad:       #ff8f84;
  --game-tile-1:    #1f2331;
  --game-tile-2:    #272b3a;
  --game-tile-3:    var(--theme-800);
  --game-tile-4:    var(--theme-700);
  --game-tile-5:    var(--theme-500);
  --game-tile-6:    var(--theme-400);
  --game-tile-7:    var(--theme-300);
  --game-tile-8:    #eef0f6;
  --game-arena-screen: #161925;
  --game-arena-coins:  #f2c46b;
  --game-arena-win:    #5fd6a0;
  --game-arena-danger: #ff8f84;
}

/* Bricolage covers Latin and Vietnamese and Geist adds Cyrillic, so
   Russian headings are set in Geist rather than mixing faces mid-word;
   Greek takes the system sans for both. Arabic, Urdu, Bengali and
   Chinese take a system face their script reads well in, with the line
   height their marks need. */
html:is(:lang(ar), :lang(ur)) {
  --font-display: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif;
  --font-ui: 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, system-ui, sans-serif;
}
html:lang(bn) {
  --font-display: 'Noto Sans Bengali', 'Vrinda', 'Nirmala UI', system-ui, sans-serif;
  --font-ui: 'Noto Sans Bengali', 'Vrinda', 'Nirmala UI', system-ui, sans-serif;
}
html:lang(zh) {
  --font-display: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif;
  --font-ui: 'Geist', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}
html:lang(ru) { --font-display: 'Geist', 'Segoe UI', system-ui, 'Noto Sans', sans-serif; }
html:lang(el) {
  --font-display: 'Segoe UI', system-ui, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Segoe UI', system-ui, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
html:is(:lang(ar), :lang(ur), :lang(bn)) body { line-height: 1.65; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) :is(.font-display, h1.display, h2.display, h3.display) { letter-spacing: 0; font-weight: 800; }

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html .font-sans { font-family: var(--font-ui); }
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
html body :is(h1, h2).font-display { letter-spacing: -0.03em; }
.display-italic { font-style: normal; font-family: var(--font-display); font-weight: 700; color: var(--psm-accent-text); }
/* Figures that tick, count or add up are set in the mono face */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums, html .font-mono { font-family: var(--font-num); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
::selection { background: rgba(var(--theme-500-rgb), .22); color: inherit; }
html.dark ::selection { background: rgba(var(--theme-400-rgb), .32); color: #ffffff; }
:focus-visible { outline-color: var(--psm-focus); }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--psm-accent-text); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* The eyebrow: a soft accent pill with a little prism before the word */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .85rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--psm-accent-text);
  background: var(--psm-accent-soft);
  border-radius: 999px;
  margin-bottom: 1rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat;
}
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .section-eyebrow { letter-spacing: 0; font-size: 12.5px; }

/* View all: a quiet link in the accent with its arrow; on hover or focus
   the arrow steps on and an underline draws in */
html body .btn-view-all {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px;
  padding: .55rem .2rem;
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--psm-accent-text); white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1.5px no-repeat;
  border: 0; border-radius: 0; box-shadow: none;
  transition: gap .25s ease, background-size .3s ease;
}
html body .btn-view-all svg { width: 14px; height: 14px; }
[dir="rtl"] body .btn-view-all { background-position: 100% calc(100% - 9px); }
html body .btn-view-all:hover, html body .btn-view-all:focus-visible { gap: .65rem; background-size: 100% 1.5px; }
html body .btn-view-all:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; border-radius: 4px; }
html[dir="rtl"] body .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: none; }

.ed-folio { font-family: var(--font-num); font-weight: 500; color: var(--ink-soft); }

[dir="rtl"] .psm-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-3);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#desktopHeader .hdr-search:focus-within { background: var(--paper-2); border-color: var(--psm-accent-line); box-shadow: 0 0 0 4px var(--psm-accent-soft); }
.ed-search { background: transparent; border: none; }

/* The top strip: a quiet utility row on the ground */
.hdr-strip { background: var(--hdr-strip-bg) !important; }
.hdr-strip, .hdr-strip .ed-status { color: var(--ink-soft); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--ink); }
html body .hdr-strip .psm-strip-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; }

/* The main bar's links, beside the logo */
.psm-mainnav { display: none; align-items: center; gap: .25rem; margin-inline-end: 1rem; }
@media (min-width: 1280px) { .psm-mainnav { display: flex; } }
.psm-navlink {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: 0 .8rem; border-radius: 10px;
  font: 500 15px/1 var(--font-ui); color: var(--ink-soft); text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.psm-navlink:hover { color: var(--ink); background: var(--paper-3); }
.psm-navlink.active { color: var(--ink); }
.psm-navlink.active::after { content: ''; display: none; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0; padding-inline-end: 1.25rem; border-inline-end: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-subnav-items { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .95rem; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--ink); color: var(--paper-2); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: 14px; color: var(--psm-accent-text);
  background: linear-gradient(currentColor, currentColor) left 100% / 0 1.5px no-repeat;
  padding-bottom: 3px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-size: 100% 1.5px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  color: var(--btn-ink);
  background: var(--btn-face), var(--btn-bg);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1);
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover,
html .ed-btn-primary:focus-visible, html .ed-plan-cta:focus-visible {
  background-color: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
/* A press settles the button flat against the page */
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(1px) scale(.99); box-shadow: var(--btn-shadow-down); }
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
/* The featured plan sits on the ink panel; its button is the panel's
   reverse */
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: var(--psm-on-panel); color: var(--psm-panel); box-shadow: none; }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 2px solid var(--psm-focus); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.35rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: 0;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 18, 28, .04);
  transition: box-shadow .25s ease, transform .25s cubic-bezier(.2, .8, .3, 1), border-color .2s ease;
}
.ed-btn-secondary:hover, .ed-btn-secondary:focus-visible { transform: translateY(-1px); color: var(--ink); border-color: #cfd3dc; box-shadow: var(--shadow); }
.ed-btn-secondary:active { transform: translateY(1px); box-shadow: none; }
html.dark .ed-btn-secondary { background: var(--paper-2); border-color: var(--rule); }
html.dark .ed-btn-secondary:hover, html.dark .ed-btn-secondary:focus-visible { border-color: #3a3f52; }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, html body .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover, html .ed-btn-primary:active { transform: none; }
}

/* ── Cards: white on the ground, a hairline and a soft shadow. On hover
   or focus a card lifts a little and its shadow deepens. ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--psm-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease, border-color .3s ease;
}
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within {
  transform: translateY(-3px); box-shadow: var(--shadow-lift);
}
html.dark .ed-plan:hover, html.dark .shop-card:hover, html.dark .shop-card:focus-within { border-color: #343a4e; }
html .ed-plan-featured {
  background: var(--psm-panel) !important;
  color: var(--psm-on-panel);
  border-color: var(--psm-panel);
}
html .ed-plan-featured::before { content: ''; position: absolute; top: 18px; inset-inline-end: 18px; width: 22px; height: 22px; background: var(--psm-panel-accent); -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat; pointer-events: none; }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: color-mix(in srgb, var(--psm-on-panel) 18%, transparent); }
@media (prefers-reduced-motion: reduce) { html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; } }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--ink); }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.2rem 1.5rem .5rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
html body #sideMenu .drawer-section-label { color: var(--ink-soft) !important; }
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: var(--psm-accent) !important; color: var(--psm-on-accent) !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  min-height: 48px;
  margin: 0 .75rem; padding: .7rem .85rem;
  border-radius: 12px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;
  border: 1px solid var(--rule); border-radius: 14px;
  font-weight: 600; color: var(--psm-bad);
}
.drawer-logout:hover { background: var(--psm-bad-soft); }

.mobile-glass-header {
  background: rgba(244, 245, 247, 0.86);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(13, 15, 23, 0.86); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--psm-accent); }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  padding: .35rem;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .9rem;
  border-radius: 12px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem .9rem .35rem;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-mobile-link.active { color: var(--psm-accent-text); }

/* ── Dark/light toggle: the beam ──
   A white beam crosses from the start edge to a prism that settles in
   the middle of the screen; out of the prism the light fans into the
   accent's spectrum, the fan opening until its bands fill the screen.
   The mode changes under the full fan, then the fan sweeps on and closes
   away past the far edge, leaving the other mode behind it. prism.js
   sets every colour on the overlay when it starts, so nothing on the
   cover changes at the flip. */
.px-fx--psm-beam { overflow: hidden; pointer-events: none; }
.px-fx--psm-beam .psm-fx-fan {
  position: absolute; inset: 0;
  background: var(--fx-bands);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  will-change: clip-path;
}
.px-fx--psm-beam .psm-fx-beam {
  position: absolute; top: 50%; height: 3px; margin-top: -1.5px;
  left: 0; width: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--fx-beam) 35%);
  box-shadow: 0 0 16px 1px var(--fx-beam-glow);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.px-fx--psm-beam.is-rtl .psm-fx-beam { left: auto; right: 0; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255, 255, 255, 0), var(--fx-beam) 35%); }
.px-fx--psm-beam .psm-fx-prism {
  position: absolute; left: 50%; top: 50%; width: 92px; height: 80px; margin: -48px 0 0 -46px;
  opacity: 0;
}
.px-fx--psm-beam .psm-fx-prism svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── Footer ── */
.psm-footer {
  background: var(--paper-2) !important;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
html.dark .psm-footer { background: #0a0c13 !important; }
.psm-footer a:hover { color: var(--psm-accent-text); }
html .psm-footer .ed-footer-heading {
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .psm-footer .ed-footer-link { color: var(--ink-soft); background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .psm-footer .ed-footer-link:hover, html .psm-footer .ed-footer-link:focus-visible { background-size: 100% 1px; color: var(--ink); }
[dir="rtl"] .psm-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: frosted glass, the page you are on an ink pill
   (white at night) */
html .ed-floating-nav {
  position: relative;
  background: var(--psm-glass);
  backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--rule);
  border-radius: 20px;
  box-shadow: 0 1px 0 var(--psm-glass-line) inset, 0 16px 40px -14px rgba(16, 18, 28, .28);
}
html.dark .ed-floating-nav { box-shadow: 0 1px 0 var(--psm-glass-line) inset, 0 20px 44px -16px rgba(0, 0, 0, .8); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 500; color: var(--ink-2); border-radius: 14px; }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--ink); color: var(--paper-2) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--paper-2) !important; }

/* The newsletter: a sunk card with the prism mark in its corner */
html body .psm-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--paper) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
html body .psm-footer .ed-newsletter::before { content: '' !important; display: block !important; position: absolute; top: 20px; inset-inline-end: 20px; width: 26px; height: 26px; opacity: 1; border: 0; background: var(--psm-mark); -webkit-mask: var(--psm-prism) center / contain no-repeat; mask: var(--psm-prism) center / contain no-repeat; }
html body .psm-footer .ed-newsletter::after { content: none !important; }
html body .psm-footer .ed-newsletter h4 { color: var(--ink) !important; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; padding-inline-end: 36px; }
html body .psm-footer .ed-newsletter p:not(#newsletter-msg) { color: var(--ink-soft) !important; opacity: 1; }
html body .psm-footer .ed-newsletter-input, html.dark body .psm-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: var(--paper-2) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 12px; font-family: var(--font-ui); min-height: 48px; }
html body .psm-footer .ed-newsletter-input::placeholder { color: var(--ink-soft); }
html body .psm-footer .ed-newsletter-input:focus { border-color: var(--psm-accent-line) !important; box-shadow: 0 0 0 4px var(--psm-accent-soft); }
html body .psm-footer .ed-newsletter-btn { background: var(--psm-accent); color: var(--psm-on-accent); border: 0; border-radius: 12px; min-height: 48px; font-family: var(--font-ui); font-weight: 600; box-shadow: var(--btn-shadow); transition: transform .2s ease, box-shadow .2s ease; }
html body .psm-footer .ed-newsletter-btn:hover { transform: translateY(-1px); box-shadow: var(--btn-shadow-hover); }
html body .psm-footer .ed-newsletter-btn:active { transform: translateY(1px); box-shadow: var(--btn-shadow-down); }
html body .psm-footer .ed-newsletter-age, html body .psm-footer .ed-newsletter label { color: var(--ink-soft) !important; }

/* Logo plate: the light-mode logo on a white card wherever it sits on
   something dark and there is no dark logo */
.psm-logoplate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.1rem;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
/* break-word, not anywhere: anywhere also lowers the item's min-content
   width, so a squeezed flex row split "Spielkosten" mid-word */
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow Prism's navy instead. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(13, 15, 23, 0.88) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: #0a0c13 !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(22, 25, 37, 0.94) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #1f2331, #0d0f17, #161925, #07080d) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields sit a
   step below the card. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #0d0f17 !important;
  border-color: #2e3344 !important;
  color: #eef0f6 !important;
}
html.dark { color-scheme: dark; }
html { accent-color: var(--psm-accent); }

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. At night those panels take the darkest ink. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #07080d;
  --paper: #eef0f6;
  border-color: #272b3a;
}

html header.safe-top-header[style] { background: rgba(244, 245, 247, .9) !important; }
html.dark header.safe-top-header[style] { background: rgba(13, 15, 23, .92) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(13, 15, 23, .92); }

/* ── Login / register / forgot-password brand panel: light falls through
   a large prism in its corner, the rest of the panel quiet ── */
:root {
  --brand-gradient: linear-gradient(180deg, #ffffff, #f4f5f7);
  --brand-glow-1: rgba(var(--theme-500-rgb), 0.12);
  --brand-glow-2: rgba(var(--theme-300-rgb), 0.1);
}
html.dark {
  --brand-gradient: linear-gradient(180deg, #161925, #0d0f17);
  --brand-glow-1: rgba(var(--theme-400-rgb), 0.16);
  --brand-glow-2: rgba(var(--theme-300-rgb), 0.08);
}
html body .brand-panel {
  position: relative;
  background:
    radial-gradient(70% 60% at 100% 0%, var(--brand-glow-1), transparent 70%),
    var(--brand-gradient) !important;
  color: var(--ink);
}
/* assets/css/pages/login.css draws ::after as a round glow; here it is
   the prism with its beam */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 28px !important; right: 7% !important; left: auto !important;
  width: 200px !important; height: 160px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--art-refraction) center / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 7% !important; transform: scaleX(-1) !important; }
html .brand-panel::before { content: none !important; }
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: var(--ink-soft) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: var(--ink) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: -.03em; }

/* ── Wallet balance card: frosted glass over the accent, the prism set
   large and faint in its corner, a refracted line crossing it
   (components/wallet/hero-balance.php) ── */
html body .wallet-hero {
  --wallet-hero-ink: #ffffff;
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(var(--theme-300-rgb), .45), rgba(var(--theme-300-rgb), 0) 60%),
    linear-gradient(135deg, var(--theme-700), var(--theme-900));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 24px 50px -24px rgba(var(--theme-700-rgb), .7);
  color: #ffffff;
  margin: 10px 0 18px;
}
html.dark body .wallet-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(var(--theme-400-rgb), .32), rgba(var(--theme-400-rgb), 0) 60%),
    linear-gradient(135deg, var(--theme-700), var(--theme-900));
}
html.dark body .wallet-hero { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 0 0 1px rgba(255, 255, 255, .06), 0 28px 60px -24px rgba(var(--theme-400-rgb), .45); }
/* The kernel gives ::before a fixed 2px height; the sizes here replace it */
html body .wallet-hero::before {
  content: ''; position: absolute; z-index: 0; inset: auto -24px -34px auto; width: 230px; height: 206px;
  pointer-events: none; background: rgba(255, 255, 255, .12);
  -webkit-mask: var(--psm-prism-solid) center / contain no-repeat; mask: var(--psm-prism-solid) center / contain no-repeat;
}
html body .wallet-hero::after {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .12) 52.4%, rgba(255, 255, 255, 0) 60%);
}
[dir="rtl"] body .wallet-hero::before { inset: auto auto -34px -24px; }
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { color: rgba(255, 255, 255, .88) !important; letter-spacing: .12em; font-family: var(--font-num); font-size: .72rem; font-weight: 600; }
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: rgba(255, 255, 255, .88) !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #ffffff !important; }
html body .wallet-hero .h-px { background: rgba(255, 255, 255, .28) !important; }
html body .wallet-hero .bg-emerald-400 { background: #7ef0b8 !important; }
html body .wallet-balance-num {
  font-family: var(--font-num); font-weight: 600; letter-spacing: -.03em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: tabular-nums;
}
html body .wallet-hero-btn-primary { background: #ffffff; color: #11131c; border: 0; font-family: var(--font-ui); font-weight: 600; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); transition: transform .2s ease, box-shadow .2s ease; }
html body .wallet-hero-btn-primary:hover { background: #ffffff; color: #11131c; transform: translateY(-1px); }
html body .wallet-hero-btn-primary:active { transform: translateY(1px); box-shadow: none; }
html body .wallet-hero .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 600; border-radius: 12px; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #ffffff; }
html body .wallet-hero .wallet-hero-btn-secondary:active { transform: translateY(1px); box-shadow: none; }
/* After dark the card is a pale grey: white glass on it left the label faint */
html.dark body .wallet-hero .wallet-hero-btn-secondary { background: rgba(13, 15, 23, .4); border-color: rgba(255, 255, 255, .24); }
/* Off the card, on a window's own panel, the quiet button is drawn in ink */
html body .wallet-modal-panel .wallet-hero-btn-secondary { --wallet-hero-ink: var(--ink); }

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
html .ed-card-mystery::before { content: none; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a white card on a deeper shadow ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-num); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pd-title { font-family: var(--font-display); font-weight: 800 !important; letter-spacing: -.03em; }

/* The box page's own spin button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) follow the store's own colour */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--psm-accent); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--psm-accent); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--psm-accent-text); }
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background: var(--btn-face), var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 12px; box-shadow: var(--btn-shadow);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--psm-accent-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--psm-accent-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: var(--psm-accent-line); }
html.dark .border-violet-200 { border-color: var(--psm-accent-line) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: var(--psm-accent-line); }
html .focus\:border-purple-400:focus { border-color: var(--psm-accent); }

/* The kernel's accent utilities, at the steps Prism reads them at */
html body .text-theme-500, html body .text-theme-600, html body .text-theme-700 { color: var(--psm-accent-text) !important; }
html body .hover\:text-theme-600:hover, html body .hover\:text-theme-700:hover { color: var(--psm-accent-text) !important; }
/* Shared markup also sets text in --theme-600 inline (the bids tiles,
   membership prices, support and profile links, the order tracker). Here
   that step is the dark fill under white letters, so after hours the text
   sank into the card; it takes the accent's text step instead. Fills that
   use the same variable keep it. */
html.dark body :is([style*="color:var(--theme-600"], [style*="color: var(--theme-600"]):not([style*="background:var(--theme-600"], [style*="background-color:var(--theme-600"], [style*="background: var(--theme-600"]) { color: var(--psm-accent-text) !important; }
html body .bg-theme-50, html body .bg-theme-100 { background-color: var(--psm-accent-soft) !important; }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are Prism's primary press */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-face), var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-face), var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: color-mix(in srgb, var(--btn-ink) 35%, transparent); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease; }
html .wnc:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); }

/* ── Cart and checkout: the order total on a card of its own ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 18px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 1.65rem);
  letter-spacing: -.02em;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: tabular-nums;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 12px; letter-spacing: .02em; }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* The hero's phone emblem is sized by components/home/hero.css, which
   arrives after this sheet; until it does it waits out of sight. */
.psm-hero__emblem { display: none; }

/* ── Small pieces ── */
/* The tones banners and categories are mapped to (psm_tone_for()): the
   accent at three depths, then two neutrals */
:root { --psm-t1: var(--theme-700); --psm-t2: var(--theme-900); --psm-t3: var(--theme-500); --psm-t4: #2b2f3c; --psm-t5: #5a6072; }
html.dark { --psm-t1: var(--theme-800); --psm-t2: var(--theme-700); --psm-t3: var(--theme-600); --psm-t4: #272b3a; --psm-t5: #3a3f52; }
.psm-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }

/* A tier's colour on anything that carries data-rarity or .psm-r--*:
   neutral, then the accent rising in depth, ink for the rarest */
.psm-r--common, [data-rarity="common"]       { --r: #9aa0b0;           --r-deep: #6b7184;          --r-ink: var(--ink-2);         --r-soft: rgba(154, 160, 176, .16); }
.psm-r--uncommon, [data-rarity="uncommon"]   { --r: var(--theme-300);  --r-deep: var(--theme-500); --r-ink: var(--theme-800);    --r-soft: rgba(var(--theme-300-rgb), .2); }
.psm-r--rare, [data-rarity="rare"]           { --r: var(--theme-500);  --r-deep: var(--theme-700); --r-ink: var(--theme-800);    --r-soft: rgba(var(--theme-500-rgb), .16); }
.psm-r--epic, [data-rarity="epic"]           { --r: var(--theme-700);  --r-deep: var(--theme-900); --r-ink: var(--theme-800);    --r-soft: rgba(var(--theme-700-rgb), .14); }
.psm-r--legendary, [data-rarity="legendary"] { --r: #11131c;           --r-deep: #000000;          --r-ink: #11131c;              --r-soft: rgba(17, 19, 28, .1); }
html.dark :is(.psm-r--uncommon, [data-rarity="uncommon"], .psm-r--rare, [data-rarity="rare"], .psm-r--epic, [data-rarity="epic"]) { --r-ink: var(--theme-300); }
html.dark :is(.psm-r--legendary, [data-rarity="legendary"]) { --r: #eef0f6; --r-deep: #c9cdd8; --r-ink: #eef0f6; --r-soft: rgba(238, 240, 246, .12); }

/* A label: a small pill, the word in the accent on a wash of it */
.psm-label {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem;
  font: 600 11.5px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--psm-accent-text);
  background: var(--psm-accent-soft);
  border-radius: 999px;
}
.psm-label--ink { color: var(--psm-on-panel); background: var(--psm-panel); }
.psm-label--red { color: var(--psm-bad); background: var(--psm-bad-soft); }
.psm-label--green { color: var(--psm-good); background: var(--psm-good-soft); }
.psm-label--yellow { color: var(--psm-warn); background: var(--psm-warn-soft); }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .psm-label { letter-spacing: 0; font-size: 12px; }

/* A tag: a soft rectangle, for counts and states */
.psm-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .65rem;
  font: 600 12px/1.25 var(--font-ui);
  color: var(--t, var(--ink-2));
  background: var(--c, var(--paper-3));
  border-radius: 8px;
}
.psm-tag--red { --c: var(--psm-bad-soft); --t: var(--psm-bad); }
.psm-tag--green { --c: var(--psm-good-soft); --t: var(--psm-good); }
.psm-tag--yellow { --c: var(--psm-warn-soft); --t: var(--psm-warn); }
.psm-tag--blue { --c: var(--psm-accent-soft); --t: var(--psm-accent-text); }
.psm-tag--ink { --c: var(--psm-panel); --t: var(--psm-on-panel); }

/* A stamp: a ring round the word */
.psm-stamp {
  display: inline-block;
  padding: .3rem .8rem;
  font: 600 11.5px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--psm-accent-text);
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

/* A note: a sunk panel for small print */
.psm-note {
  position: relative;
  background: var(--paper-3);
  color: var(--ink-2);
  border-radius: 14px;
}

/* A sheet for dialogs and panels: the white card, raised */
.psm-sheet {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 24px;
  box-shadow: 0 30px 80px -30px rgba(16, 18, 28, .45);
}
html.dark .psm-sheet { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 30px 80px -24px rgba(0, 0, 0, .9); }

/* The ink panel: near-black by day, near-white at night */
.psm-ink-panel {
  position: relative;
  color: var(--psm-on-panel);
  background: var(--psm-panel);
  border-radius: var(--radius);
}

.psm-balance, .psm-icon-btn { border: 1px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease; }
.psm-balance:hover, .psm-icon-btn:hover { border-color: #cfd3dc; box-shadow: var(--shadow); }
html.dark .psm-balance:hover, html.dark .psm-icon-btn:hover { border-color: #3a3f52; }
.psm-balance:active, .psm-icon-btn:active { transform: translateY(1px); box-shadow: none; }
.psm-balance [data-raw] { font-family: var(--font-num); font-weight: 600; }
html body [style*="background:#16a34a"] { background: var(--psm-good) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .psm-footer .ed-floating-nav { --ink: #11131c; --ink-2: #2b2f3c; --paper-2: #ffffff; --paper-3: #eef0f3; }
html.dark body .psm-footer .ed-floating-nav { --ink: #eef0f6; --ink-2: #d3d7e2; --paper-2: #0d0f17; --paper-3: #1f2331; }
/* The phone menu button: a white square with a hairline */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(1px); }

/* ── Micro-interactions shared by the whole store ──
   A tag or label rises into place once, the first time it comes into
   view (.psm-rise-in); the page's one big countdown slides a figure up
   when it changes (.psm-tick); in the last ten seconds the figures turn
   the live red (.psm-final, prism.js); whatever buys, bids or adds to the
   cart sends a ring of the accent out from the button and splits it into
   a few short rays (.psm-ring, .psm-ray). */
@media (prefers-reduced-motion: no-preference) {
  .psm-rise-in { animation: psm-rise-in .5s cubic-bezier(.2, .8, .3, 1) both; }
  .psm-tick { animation: psm-tick .32s cubic-bezier(.2, .8, .3, 1); }
}
@keyframes psm-rise-in { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes psm-tick { 0% { transform: translateY(.22em); opacity: .35; } 100% { transform: none; opacity: 1; } }
.psm-final { color: var(--psm-live) !important; }
.psm-ring {
  position: fixed; z-index: 2147482000; pointer-events: none;
  border-radius: 16px;
  box-shadow: 0 0 0 2px var(--psm-accent);
  animation: psm-ring .6s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes psm-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
.psm-ray {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px;
  background: var(--ray, var(--psm-accent));
  opacity: 0;
  animation: psm-ray .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes psm-ray { 0% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r0, 20px)) scaleX(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r1, 46px)) scaleX(1); } }

/* ── Drawings behind words ──
   Pages that carry words over a drawing keep it on a layer of its own,
   clear of the copy: at both sides of centred copy, nowhere at phone
   width. */
:root {
  --psm-mask-c: linear-gradient(90deg, #000 0, #000 9%, transparent 20%, transparent 80%, #000 91%, #000 100%);
}
@media (max-width: 1023px) {
  :root { --psm-mask-c: linear-gradient(transparent, transparent); }
}
.psm-wn, html body .psm-lit, html body .psm-err, body.psm-404, html body .brand-panel, .ga-marquee { isolation: isolate; }

/* Phones: a home section's title and its "View all" link share one line.
   The link turns compact (smaller, its arrow tucked in, still a 44px
   target) and the title keeps to its line, a size down; a title that
   still won't fit ends in an ellipsis rather than breaking mid-word or
   pushing the link below. Other headings break only between words. */
@media (max-width: 639px) {
  html body .reveal.flex-row.justify-between:has(> .btn-view-all) { flex-wrap: nowrap; align-items: flex-end; gap: .75rem; }
  html body .reveal.flex-row.justify-between:has(> .btn-view-all) > .min-w-0 { flex: 1 1 auto; min-width: 0; }
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit {
    font-size: clamp(1.3rem, 6.2vw, 1.75rem);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0;
  }
  html body .reveal.flex-row:has(> .btn-view-all) > .btn-view-all { flex: none; gap: .3rem; padding-inline: .1rem; font-size: 13px; }
  html body .reveal.flex-row:has(> .btn-view-all) > .btn-view-all svg { width: 12px; height: 12px; }
  /* a long link label (prism.js): a round arrow, the words for screen readers */
  html body .reveal.psm-head--compact > .btn-view-all {
    width: 44px; height: 44px; padding: 0; justify-content: center;
    border-radius: 999px; background: var(--psm-accent-soft);
  }
  html body .reveal.psm-head--compact > .btn-view-all svg { width: 16px; height: 16px; }
  html body .reveal.psm-head--compact > .btn-view-all .psm-vall__t {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* A product's ground: a soft well for thumbnails, the prize in a dialog,
   the icon of a notice */
:root {
  --psm-face: linear-gradient(180deg, #f7f8fa, #eef0f3);
  --psm-face-ring: inset 0 0 0 1px rgba(16, 18, 28, .05);
  --psm-gauge: var(--psm-accent);
  --psm-well: radial-gradient(80% 70% at 50% 35%, #ffffff, rgba(255, 255, 255, 0) 80%), #eef0f3;
}
html.dark {
  --psm-face: linear-gradient(180deg, #1f2331, #191c29);
  --psm-face-ring: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --psm-well: radial-gradient(80% 70% at 50% 35%, rgba(var(--theme-400-rgb), .12), rgba(var(--theme-400-rgb), 0) 80%), #1b1e2b;
}
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.4rem, 6.8vw, 2.2rem); }
  html body h1.text-fit.text-4xl { font-size: clamp(1.55rem, 7.4vw, 2.2rem); overflow-wrap: normal !important; }
}

/* "Live": a red dot with a slow halo */
.psm-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--psm-live); flex-shrink: 0; }
.psm-live--accent { background: var(--psm-accent); }
@media (prefers-reduced-motion: no-preference) {
  .psm-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: psm-halo 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
}
@keyframes psm-halo { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* A divider: a short hairline with the prism set in it */
.psm-divider { display: block; width: 40px; height: 12px; margin-inline: auto; background: var(--ink-soft); opacity: .6; -webkit-mask: var(--psm-rule-mark) center / contain no-repeat; mask: var(--psm-rule-mark) center / contain no-repeat; }
.psm-colophon { font-family: var(--font-ui); letter-spacing: .01em; }

/* Names other themes' shared markup reaches for */
:root {
  --gold: var(--theme-800); --gold-2: var(--theme-600); --gold-soft: rgba(var(--theme-500-rgb), .16); --gold-ink: #11131c;
  --felt: #11131c; --felt-2: #1b1e2a; --on-felt: #f4f5f7; --on-felt-soft: rgba(244, 245, 247, .78);
  --peacock: var(--theme-700); --peacock-soft: rgba(var(--theme-700-rgb), .1);
  --red: #c0362c; --red-soft: rgba(192, 54, 44, .1);
  --rose: #33507a; --rose-soft: rgba(51, 80, 122, .1);
  --night: #0d0f17; --night-2: #161925; --night-3: #1f2331; --on-night: #eef0f6; --on-night-soft: rgba(238, 240, 246, .78);
  --btn-side: transparent;
}
html.dark {
  --gold: var(--theme-300); --gold-2: var(--theme-400); --gold-soft: rgba(var(--theme-400-rgb), .16); --gold-ink: #eef0f6;
  --peacock: var(--theme-300); --peacock-soft: rgba(var(--theme-400-rgb), .16);
  --red: #ff8f84; --red-soft: rgba(255, 143, 132, .14);
  --rose: #9db8ea; --rose-soft: rgba(157, 184, 234, .14);
}

/* The loader mark: a prism outline with a bead of light running round
   it and the beam leaving its far side; for the page loader and the app
   splash */
.psm-spinner { position: relative; display: block; width: 64px; height: 56px; }
.psm-spinner svg { display: block; width: 100%; height: 100%; overflow: visible; }
.psm-spinner__edge { fill: none; stroke: var(--rule); stroke-width: 3; stroke-linejoin: round; }
.psm-spinner__run { fill: none; stroke: var(--psm-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 22 88; }
.psm-spinner__beam { stroke: var(--psm-accent); stroke-width: 2; stroke-linecap: round; opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .psm-spinner__run { animation: psm-run 1.1s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .psm-spinner__run { stroke-dasharray: none; }
}
@keyframes psm-run { to { stroke-dashoffset: -110; } }

/* Status tones and picked cards */
html body :is(.px-tone--good, .px-tone--warn, .px-tone--crit, .px-tone--info) { border-radius: 8px; }
html body .px-pick-card:has(:checked) { border-color: var(--psm-accent) !important; background: color-mix(in srgb, var(--psm-accent) 5%, var(--paper-2)); box-shadow: 0 0 0 3px var(--psm-accent-soft); }
html body .px-pick-card:hover { border-color: var(--psm-accent-line) !important; }
/* Seller Centre's tones follow the store's (its own rule loads later) */
html body :is(.sc-page, .sc-panel) { --sc-good: var(--px-good); --sc-warn: var(--px-warn); --sc-crit: var(--px-crit); --sc-info: var(--px-info); --sc-accent: var(--psm-accent); }
/* Review stars: a warm amber that reads on white and on navy */
:root { --px-star: #b26b00; }
html.dark { --px-star: #f2c46b; }

/* The ended draw's replay: a white pill, and the banner over the machine
   in ink with the accent label */
html body .lot-replay-btn { background: var(--paper-2); border-color: var(--rule); font-family: var(--font-ui); box-shadow: var(--shadow); }
html body .lot-replay-chip { background: rgba(13, 15, 23, .9); border-color: rgba(255, 255, 255, .12); font-family: var(--font-ui); }
html body .lot-replay-chip b, html body .lot-replay-chip button:focus-visible { color: var(--theme-300); outline-color: var(--theme-300); }

/* Above the footer: the prism set in a hairline */
.psm-footer-mark { display: flex; justify-content: center; padding: 56px 0 0; }
.psm-footer-mark .psm-divider { width: 64px; height: 18px; }
.psm-footer-about { margin: 0; max-width: 38ch; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.psm-live--good { background: var(--psm-good); }

/* Changing language, the scene (prism.js): a white card on a soft shadow,
   an ink strip across its top with the prism on it. A beam of white light
   crosses to the prism and fans out of it into the accent's spectrum (the
   brand scale's own steps); the old name splits into those colours and is
   gone, and the new one draws itself together out of them in Bricolage
   Grotesque, its code chip rising under it in Geist Mono. After the
   reload a glint runs across the card, the spectrum flares and the chip
   lights. Card and chip read the theme's tokens, so it is white by day and
   raised navy after hours; the strip stays ink so the light reads. It is
   the same on both pages, so the reload never shows. */
.psm-lang-stage { background: color-mix(in srgb, #0d0f17 42%, transparent); }
.psm-lang-scene {
  position: relative; overflow: hidden; width: min(480px, 100%); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 14px 22px;
  border-radius: var(--radius); background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule); box-shadow: var(--shadow-lift); font-family: var(--font-ui);
}
.psm-lang-optic {
  --psm-lang-at: 34%;
  position: relative; width: 100%; height: 76px; overflow: hidden; border-radius: calc(var(--radius) - 8px);
  background: radial-gradient(ellipse 60% 90% at var(--psm-lang-at) 50%, #1d2130, #11131c 70%);
}
html.dark .psm-lang-optic { background: radial-gradient(ellipse 60% 90% at var(--psm-lang-at) 50%, #151826, #07080d 70%); box-shadow: inset 0 0 0 1px var(--rule); }
.psm-lang-beam {
  position: absolute; left: 0; top: 50%; width: var(--psm-lang-at); height: 3px; margin-top: -1.5px; border-radius: 3px;
  background: #ffffff; box-shadow: 0 0 10px 1px rgba(255, 255, 255, .7); transform-origin: left center;
}
.psm-lang-fan {
  position: absolute; left: var(--psm-lang-at); right: 0; top: 0; bottom: 0; display: flex; flex-direction: column;
  clip-path: polygon(0 47%, 100% 4%, 100% 96%, 0 53%);
}
.psm-lang-fan i { flex: 1; }
.psm-lang-fan i:nth-child(1) { background: var(--theme-200); }
.psm-lang-fan i:nth-child(2) { background: var(--theme-300); }
.psm-lang-fan i:nth-child(3) { background: var(--theme-400); }
.psm-lang-fan i:nth-child(4) { background: var(--theme-500); }
.psm-lang-fan i:nth-child(5) { background: var(--theme-700); }
.psm-lang-fan i:nth-child(6) { background: var(--theme-800); }
.psm-lang-fan i:nth-child(7) { background: var(--theme-900); }
.psm-lang-prism {
  position: absolute; left: var(--psm-lang-at); top: 50%; width: 54px; height: 47px; margin: -25px 0 0 -27px; overflow: visible;
  fill: rgba(255, 255, 255, .16); stroke: #ffffff; stroke-width: 3; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45));
}
.psm-lang-prism .psm-lang-edge { fill: none; stroke-width: 2; opacity: .6; }
.psm-lang-words { display: grid; place-items: center; width: 100%; min-height: 56px; padding: 0 6px; box-sizing: border-box; }
.psm-lang-old, .psm-lang-new { grid-area: 1 / 1; max-width: 100%; text-align: center; overflow-wrap: anywhere; font: 700 clamp(26px, 7.6vw, 42px)/1.1 var(--font-display); letter-spacing: -.02em; }
.psm-lang-old { color: var(--ink-soft); opacity: 0; }
.psm-lang-new { color: var(--ink); }
.psm-lang-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--psm-accent-soft); color: var(--psm-accent-text); border: 1px solid var(--psm-accent-line);
  font: 600 12px/1 var(--font-num); letter-spacing: .14em;
}
.psm-lang-chip img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.psm-lang-glint {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--theme-200) 40%, rgba(255, 255, 255, .5)), transparent);
  transform: translateX(-110%);
}

/* Out: the beam reaches the prism and fans out; the old name splits into
   the spectrum and the new one draws together out of it. */
.px-lang-stage-out .psm-lang-scene { animation: psm-lang-up .32s cubic-bezier(.2, .8, .3, 1.05) both; }
.px-lang-stage-out .psm-lang-beam { animation: psm-lang-beam .2s cubic-bezier(.3, 0, .2, 1) .26s both; }
.px-lang-stage-out .psm-lang-prism { animation: psm-lang-prism .2s cubic-bezier(.2, .8, .3, 1.3) .34s both; }
.px-lang-stage-out .psm-lang-fan { animation: psm-lang-fan .34s cubic-bezier(.3, .6, .3, 1) .44s both; }
.px-lang-stage-out .psm-lang-old { animation: psm-lang-split .34s ease-in .48s both; }
.px-lang-stage-out .psm-lang-new { animation: psm-lang-join .36s cubic-bezier(.2, .7, .3, 1) .64s both; }
.px-lang-stage-out .psm-lang-chip { animation: psm-lang-rise .26s cubic-bezier(.2, .8, .3, 1) .86s both; }
/* In: it starts where out ended; a glint runs across, the spectrum flares
   and the chip lights. */
.px-lang-stage-in .psm-lang-glint { animation: psm-lang-glint .56s cubic-bezier(.4, 0, .3, 1) .08s both; }
.px-lang-stage-in .psm-lang-fan { animation: psm-lang-flare .5s ease-in-out .2s both; }
.px-lang-stage-in .psm-lang-chip { animation: psm-lang-light .6s ease-out .3s both; }
.px-lang-stage-in .psm-lang-scene { animation: psm-lang-away .26s ease-in .98s both; }
@keyframes psm-lang-up { from { transform: translateY(32px) scale(.97); opacity: 0; } }
@keyframes psm-lang-away { to { transform: translateY(20px) scale(.98); opacity: 0; } }
@keyframes psm-lang-beam { from { transform: scaleX(0); } }
@keyframes psm-lang-prism { from { transform: scale(.6); opacity: 0; } }
@keyframes psm-lang-fan { from { clip-path: polygon(0 47%, 0 47%, 0 53%, 0 53%); } 55% { clip-path: polygon(0 47%, 100% 40%, 100% 60%, 0 53%); } }
@keyframes psm-lang-split {
  from { opacity: 1; text-shadow: none; filter: none; }
  60%  { opacity: .8; color: transparent; text-shadow: -6px 0 var(--theme-300), 0 0 var(--theme-500), 6px 0 var(--theme-800); }
  to   { opacity: 0; color: transparent; text-shadow: -16px -4px var(--theme-300), 0 0 var(--theme-500), 16px 4px var(--theme-800); filter: blur(3px); }
}
@keyframes psm-lang-join {
  from { opacity: 0; color: transparent; text-shadow: -16px 4px var(--theme-300), 0 0 var(--theme-500), 16px -4px var(--theme-800); filter: blur(3px); }
  45%  { opacity: 1; color: transparent; text-shadow: -5px 0 var(--theme-300), 0 0 var(--theme-500), 5px 0 var(--theme-800); filter: none; }
  to   { opacity: 1; text-shadow: none; filter: none; }
}
@keyframes psm-lang-rise { from { transform: translateY(8px); opacity: 0; } }
@keyframes psm-lang-glint { from { transform: translateX(-110%); opacity: 0; } 15%, 80% { opacity: 1; } to { transform: translateX(280%); opacity: 0; } }
@keyframes psm-lang-flare { 45% { filter: brightness(1.25) saturate(1.2); transform: scaleY(1.08); } }
@keyframes psm-lang-light { 35% { box-shadow: 0 0 0 6px var(--psm-accent-glow); } to { box-shadow: 0 0 0 12px transparent; } }
@media (max-width: 460px) {
  .psm-lang-scene { padding: 10px 10px 18px; gap: 14px; }
  .psm-lang-optic { height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-lang-stage-out :is(.psm-lang-scene, .psm-lang-beam, .psm-lang-prism, .psm-lang-fan, .psm-lang-old, .psm-lang-new, .psm-lang-chip),
  .px-lang-stage-in :is(.psm-lang-scene, .psm-lang-glint, .psm-lang-fan, .psm-lang-chip) { animation: none !important; }
}


/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }
/* The shine that crosses a card on hover rests just off its edge, and these
   cards don't clip it: on a still strip it would show on the bare ground
   beside the first card, so it waits there unseen. */
html body .wt-wrap[data-wt-still] .wt-card:not(:hover)::after { opacity: 0; }

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --ink-soft: #545a6b;
  --theme-500: var(--theme-700);
}
html.dark [role="dialog"] {
  --ink-soft: #a9afc0;
  --theme-500: var(--theme-300);
}
/* rev 109f855ebbc0816a */

/* /assets/css/focus-ring.css */
/*
 * Keyboard focus for every storefront page, whatever the theme does with
 * outlines. Linked right after the theme's stylesheet by
 * theme_head_tags_for() (includes/themes.php).
 *
 * The ring is the theme's ink on a halo of its paper: two colours far apart,
 * so one of them stands out against whatever it sits on, light or dark.
 * :not(#px-focus-off) lifts the rule above a theme's own `outline: none`
 * (ids included) and !important above its !important ones. A theme can
 * recolour it with --px-focus-ring / --px-focus-halo but can't switch it off
 * by accident.
 *
 * The two colours are taken from the page's own ink and paper, not a
 * section's: a footer band or a panel that redefines --ink/--paper for its
 * own colours (sometimes to the same value) would otherwise hide the ring.
 */
:root {
  --px-focus-ring: var(--ink, #15131a);
  --px-focus-halo: var(--paper, #ffffff);
}

/* A date field's own calendar button takes focus without :focus-visible. */
:root :focus-visible:not(#px-focus-off),
:root input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]):focus:not(#px-focus-off) {
  outline: 2px solid var(--px-focus-ring, var(--ink, #15131a)) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)) !important;
}

/* Something focused by script so a screen reader starts there (the page's
   main region after the skip link, a dialog with nothing to press yet). */
:root [tabindex="-1"]:focus:not(#px-focus-off),
:root [data-px-focus-target]:focus:not(#px-focus-off) {
  outline: none !important;
  box-shadow: none !important;
}

.px-skip-link {
  position: fixed;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: 2147483000;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background: var(--ink, #15131a);
  color: var(--paper, #ffffff);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.px-skip-link:focus {
  transform: none;
}

/*
 * A card that is one link. The title's link (.px-stretch-link) is the card's
 * only way to its page; its ::after spreads over the whole card
 * (.px-stretch), so a click on the picture lands on the same link and
 * keyboard and screen-reader users meet it once, named by the title. The
 * card's own buttons sit above that layer. Its focus ring is drawn on the
 * layer, round the card, because a title clamped to two lines would clip a
 * ring drawn on the text.
 */
.px-stretch {
  position: relative;
}
.px-stretch .px-stretch-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}
.px-stretch :is(button, input, select, textarea, label, summary, [role="button"], a[href]:not(.px-stretch-link)) {
  position: relative;
  z-index: 6;
}
:root .px-stretch .px-stretch-link:focus-visible:not(#px-focus-off) {
  outline: none !important;
  box-shadow: none !important;
}
:root .px-stretch .px-stretch-link:focus-visible:not(#px-focus-off)::after {
  box-shadow:
    inset 0 0 0 2px var(--px-focus-halo, var(--paper, #ffffff)),
    inset 0 0 0 4px var(--px-focus-ring, var(--ink, #15131a)),
    inset 0 0 0 6px var(--px-focus-halo, var(--paper, #ffffff));
}