/* Shared semantic light palette for the storefront and the standalone admin app. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --panel: #ffffff;
  --line: #e1e5ef;
  --text: #191d2d;
  --muted: #667085;
  --lime: #7548df;
  --purple: #366be9;
  --cyan: #079fc1;
  --surface: #ffffff;
  --surface-soft: #f8f9fd;
  --surface-raised: #ffffff;
  --text-primary: #191d2d;
  --text-secondary: #667085;
  --border: #e1e5ef;
  --input-bg: #ffffff;
  --focus: #6f55dc;
  --shadow: 0 12px 36px rgb(32 45 78 / 9%);
}

html[data-theme="light"] body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 8% 8%, rgb(117 72 223 / 8%), transparent 34%), radial-gradient(ellipse at 88% 32%, rgb(7 159 193 / 6%), transparent 31%), linear-gradient(180deg, #f8f9fd, #f2f5fb 75%, #f7f8fc);
  color: var(--text-primary);
}
html[data-theme="light"] body::before { opacity: .32; }
html[data-theme="light"] body::after { opacity: .08; background-image: radial-gradient(#667085 0.55px, transparent .55px); }
html[data-theme="light"] .ambient-scene { opacity: .2; }

/* Top-level surfaces and navigation */
html[data-theme="light"] .announcement { color: #415326; background: linear-gradient(90deg, #edf3e6, #f2f6e9 48%, #edf3e6); border-color: #e3eadb; }
html[data-theme="light"] .announce-end { color: #667456; }
html[data-theme="light"] .header { background: rgb(255 255 255 / 91%); border-color: #e6e9f1; box-shadow: 0 8px 28px rgb(35 43 69 / 6%); }
html[data-theme="light"] .desktop-nav { color: #4f586c; }
html[data-theme="light"] .desktop-nav a:hover, html[data-theme="light"] .footer a:hover { color: var(--cyan); }
html[data-theme="light"] .eyebrow, html[data-theme="light"] .hero-copy .eyebrow, html[data-theme="light"] .section-head > a, html[data-theme="light"] .product-topline > span:first-child, html[data-theme="light"] .search-wrap span, html[data-theme="light"] .benefit-icon { color: #087f9f; }
html[data-theme="light"] .stock-note { color: #087c59; }
html[data-theme="light"] .promo-banner h2 b { color: #087f9f; }
html[data-theme="light"] .icon-btn, html[data-theme="light"] .menu-toggle { background: #f7f8fc; border-color: var(--line); color: #343b50; }
html[data-theme="light"] .brand-mark { color: #fff; background: linear-gradient(145deg, #7854e8, #376fed); }
html[data-theme="light"] .brand-mark span { color: #e9faff; }
html[data-theme="light"] .brand-name > span { color: #7548df; }
html[data-theme="light"] .brand-name small { color: #7b8497; }
html[data-theme="light"] .cart-button { color: #fff; background: linear-gradient(120deg, #8747ed, #386ff0); box-shadow: 0 8px 18px rgb(102 76 218 / 19%); }
html[data-theme="light"] .cart-button b { color: #fff; background: rgb(26 30 48 / 22%); }
html[data-theme="light"] .search-panel { background: #fff; border-color: var(--line); box-shadow: 0 18px 48px rgb(30 39 65 / 16%); }
html[data-theme="light"] .search-wrap { background: var(--surface-soft); border-color: var(--line); }
html[data-theme="light"] .search-wrap input { color: var(--text); }
html[data-theme="light"] .search-result { background: #f1f3f9; color: var(--text); }
html[data-theme="light"] .mobile-drawer { background: #fff; color: var(--text); border-color: var(--line); box-shadow: 0 12px 48px rgb(27 35 59 / 17%); }
html[data-theme="light"] .mobile-drawer-head { border-color: var(--line); }
html[data-theme="light"] .drawer-close { color: #5b3bab; background: #f3effc; border-color: #e3daf7; }
html[data-theme="light"] .drawer-links a { color: #313a51; border-color: #e5e8f0; background: linear-gradient(120deg, #fff, #f7f8fc); }
html[data-theme="light"] .drawer-links a span { color: #6740ca; }
html[data-theme="light"] .drawer-links a:hover, html[data-theme="light"] .drawer-links a:focus-visible { color: #4d2e9a; border-color: #c8b8ef; background: linear-gradient(100deg, #f1ecfc, #edf8fb); box-shadow: inset 0 -2px #08a4c7, 0 8px 22px rgb(35 43 69 / 9%); }
html[data-theme="light"] .drawer-links a:hover span { color: #087f9f; }
html[data-theme="light"] .mobile-nav { background: rgb(255 255 255 / 96%); border-color: var(--line); box-shadow: 0 -8px 28px rgb(35 43 69 / 7%); }
html[data-theme="light"] .mobile-nav a { color: #59647a; }

/* Cards, content, product artwork containers and status colors */
html[data-theme="light"] .hero-visual { background: radial-gradient(ellipse at 55% 40%, #e5dcff, #e9eefb 48%, #f6f7fc 78%); border-color: #dfe4f0; box-shadow: 0 28px 70px rgb(57 68 105 / 12%), inset 0 0 45px rgb(117 72 223 / 5%); }
html[data-theme="light"] .hero-visual::before, html[data-theme="light"] .hero-visual::after { border-color: rgb(92 81 154 / 14%); }
html[data-theme="light"] .game-art { box-shadow: 0 24px 65px rgb(35 30 76 / 23%); }
html[data-theme="light"] .hero { color: #fff; border-color: #ded6f4; background-color: #111525; background-image: url("assets/catalog/product-gamepass.jpg"); background-position: center 42%; background-size: cover; box-shadow: inset 0 0 70px rgb(117 72 223 / 7%), 0 20px 60px rgb(35 43 69 / 10%); }
html[data-theme="light"] .hero::before { display: none; }
html[data-theme="light"] .hero::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(270deg, rgb(5 8 18 / 92%) 0%, rgb(5 8 18 / 84%) 42%, rgb(5 8 18 / 56%) 64%, rgb(5 8 18 / 7%) 100%); pointer-events: none; }
html[data-theme="light"] .hero-copy h1 { color: #fff; text-shadow: 0 2px 18px rgb(0 0 0 / 34%); }
html[data-theme="light"] .hero-copy > p { color: #e4e9f5; text-shadow: 0 1px 10px rgb(0 0 0 / 55%); }
html[data-theme="light"] .hero-proof { color: #eef2fa; text-shadow: 0 1px 8px rgb(0 0 0 / 55%); }
html[data-theme="light"] .hero-proof b { color: #fff !important; }
html[data-theme="light"] .hero-copy .eyebrow { color: #70e5ff; text-shadow: 0 1px 8px #000; }
html[data-theme="light"] .hero-proof .proof-avatars span { border-color: #f7f8fc; }
html[data-theme="light"] .floating-card { color: #20263a; background: rgb(255 255 255 / 94%); border-color: #e0e4ef; box-shadow: 0 12px 30px rgb(35 43 69 / 12%); }
html[data-theme="light"] .category-card { color: var(--text); border-color: #e1e5ef; background: linear-gradient(145deg, #fff, #f5f7fc); box-shadow: 0 10px 28px rgb(32 45 78 / 6%); }
html[data-theme="light"] .category-card:hover, html[data-theme="light"] .product-card:hover { border-color: rgb(117 72 223 / 42%); box-shadow: 0 18px 40px rgb(69 67 125 / 13%); }
html[data-theme="light"] .category-card small { color: #667085; }
html[data-theme="light"] .category-card .cat-icon { background: rgb(117 72 223 / 10%); color: #7548df; }
html[data-theme="light"] .category-card b, html[data-theme="light"] .category-card small { text-shadow: 0 1px 5px rgb(255 255 255 / 85%); }
html[data-theme="light"] .product-card { color: var(--text); border-color: #e1e5ef; background: linear-gradient(155deg, #fff, #f8f9fd 75%); box-shadow: 0 12px 34px rgb(32 45 78 / 8%); }
html[data-theme="light"] .product-art { background: radial-gradient(circle at 50% 45%, #eef0f8, #e4e8f2 65%, #f6f7fb); }
html[data-theme="light"] .product-image { filter: none; opacity: 1; }
html[data-theme="light"] .product-art.has-image::before { background: linear-gradient(transparent 20%, rgb(17 24 39 / 49%)); }
html[data-theme="light"] .product-info, html[data-theme="light"] .product-desc, html[data-theme="light"] .hero-copy > p, html[data-theme="light"] .detail-info > p { color: var(--text-secondary); }
html[data-theme="light"] .breadcrumb a { color: #46516a; }
html[data-theme="light"] .benefits, html[data-theme="light"] .advisor, html[data-theme="light"] .review-card, html[data-theme="light"] .box, html[data-theme="light"] .filters, html[data-theme="light"] .stat-card { color: var(--text); background: linear-gradient(140deg, #fff, #f8f9fd); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="light"] .advisor { background: radial-gradient(ellipse at 15% 30%, rgb(117 72 223 / 7%), transparent 50%), linear-gradient(120deg, #fff, #f5f7fc); }
html[data-theme="light"] .filter-group label, html[data-theme="light"] .summary-row, html[data-theme="light"] .page-subtitle { color: var(--text-secondary); }
html[data-theme="light"] .filters > summary { color: var(--text); }
html[data-theme="light"] .filter-group > b { color: #46516a; }
html[data-theme="light"] .filter-option { color: #58647a; }
html[data-theme="light"] .filter-option:hover { color: #5035a0; background: #f0ecfb; }
html[data-theme="light"] .price-range label { color: #667085; }
html[data-theme="light"] .sort-bar { color: #59647a; background: #fff; border-color: var(--line); box-shadow: 0 8px 22px rgb(32 45 78 / 5%); }
html[data-theme="light"] .sort-bar select { color: var(--text); background: #f8f9fc; }
html[data-theme="light"] .sort-bar span b { color: #0787aa; }
html[data-theme="light"] .faq-item { color: var(--text); background: #fff; border-color: var(--line); }
html[data-theme="light"] .faq-q span { color: #0787aa; }
html[data-theme="light"] .promo-banner { color: var(--text); border-color: #ded6f4; background: radial-gradient(ellipse at 12% 50%, rgb(54 107 233 / 9%), transparent 34%), radial-gradient(ellipse at 88% 12%, rgb(117 72 223 / 9%), transparent 38%), linear-gradient(110deg, #fff, #f3f2fb); box-shadow: var(--shadow); }
html[data-theme="light"] .promo-banner p { color: var(--text-secondary); }
html[data-theme="light"] .advisor-copy h2 { color: var(--text); }
html[data-theme="light"] .advisor-art { background: radial-gradient(circle at 50% 50%, #e9ddff, #f6f7fc 68%); }
html[data-theme="light"] .advisor-art .advisor-note { color: #39275f; background: rgb(255 255 255 / 95%); border-color: #ded6f2; box-shadow: 0 8px 22px rgb(32 45 78 / 10%); }
html[data-theme="light"] .advisor-results .ticket-card { color: #27324a; background: #fff; border-color: #e1e5ef; box-shadow: 0 7px 20px rgb(32 45 78 / 7%); }
html[data-theme="light"] .advisor-results .ticket-card p, html[data-theme="light"] .advisor-results .ticket-card small { color: #667085; }
html[data-theme="light"] .advisor-results .ticket-card a { color: #6540bb; }
html[data-theme="light"] .detail-visual { background: #eef1f7; border-color: var(--line); }
html[data-theme="light"] .detail-info .detail-price { color: #27324a; }
html[data-theme="light"] .stepper span { color: #707b90; }
html[data-theme="light"] .stepper span.active { color: #6740ca; }
html[data-theme="light"] .empty .empty-icon { color: #778198; }
html[data-theme="light"] .footer { color: var(--text); background: linear-gradient(180deg, transparent, #e9edf6 24%); border-color: #e0e5ef; }
html[data-theme="light"] .footer-help { color: #20263a; background: linear-gradient(130deg, #fff, #f3f1fb); border-color: #e1daf1; box-shadow: var(--shadow); }
html[data-theme="light"] .footer-help h3 { color: #20263a; }
html[data-theme="light"] .footer-help .eyebrow { color: #087f9f; }
html[data-theme="light"] .footer p, html[data-theme="light"] .footer a:not(.btn), html[data-theme="light"] .footer-bottom { color: #667085; }
html[data-theme="light"] .footer-bottom { border-color: var(--line); }

/* Product filters: semantic controls retain the existing URL/form behavior. */
.filters {
  --filter-accent: #a887ff;
  --filter-accent-2: #4c8dff;
  --filter-surface: rgb(20 22 34 / 96%);
  --filter-chip: #191c2a;
  --filter-chip-hover: #22243a;
  position: sticky;
  top: 96px;
  min-width: 0;
  padding: 0 15px 15px;
  overflow: hidden;
  border: 1px solid #373248;
  border-radius: 20px;
  background: radial-gradient(ellipse at 100% 0%, rgb(112 76 190 / 12%), transparent 42%), linear-gradient(155deg, #171824, #11131d 72%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 20%), inset 0 1px rgb(255 255 255 / 3%);
}
.filters > summary {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -15px;
  padding: 12px 15px;
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: linear-gradient(110deg, rgb(139 87 227 / 12%), rgb(56 109 221 / 5%) 68%, transparent);
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after { content: "⌄"; color: var(--filter-accent); font-size: 16px; transition: transform .18s ease; }
.filters[open] > summary::after { transform: rotate(180deg); }
.filter-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.filter-heading-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid rgb(168 135 255 / 24%); border-radius: 12px; color: #c5aaff; background: linear-gradient(145deg, rgb(139 87 227 / 23%), rgb(56 109 221 / 12%)); font-size: 21px; }
.filter-heading strong, .filter-heading small { display: block; }
.filter-heading strong { color: #f5f3ff; font-size: 13px; line-height: 1.5; }
.filter-heading small { color: #a4a8bb; font-size: 9px; line-height: 1.5; }
.filter-summary-count { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgb(83 180 255 / 22%); border-radius: 999px; color: #a7e9ff; background: rgb(44 140 199 / 11%); font-size: 9px; font-weight: 700; }
.filter-group { min-width: 0; margin: 0; padding: 14px 0; border-top: 1px solid rgb(255 255 255 / 8%); }
.filters form > .filter-group:first-child { border-top: 0; }
.filter-group > b { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; color: #e5e4f0; font-size: 10px; font-weight: 700; }
.filter-group > b small { color: #9298ad; font-size: 9px; font-weight: 500; }
.filter-section-icon { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 7px; color: #c2a3ff; background: rgb(139 87 227 / 13%); font-size: 14px; }
.filter-search-wrap { min-height: 46px; display: flex !important; align-items: center; gap: 9px !important; margin: 0 !important; padding: 0 12px; border: 1px solid #37394b; border-radius: 13px; color: #aaa2c5 !important; background: linear-gradient(145deg, #11131e, #191b29); transition: border-color .18s, box-shadow .18s, background .18s; }
.filter-search-wrap > span { flex: 0 0 auto; color: #b994ff; font-size: 22px; line-height: 1; }
.filter-search-wrap:focus-within { border-color: #9770ef; background: #171827; box-shadow: 0 0 0 3px rgb(151 112 239 / 12%), 0 7px 20px rgb(72 54 132 / 10%); }
.filter-search { width: 100%; min-width: 0; padding: 0 !important; border: 0 !important; outline: 0 !important; color: #f6f5fb !important; background: transparent !important; font-size: 10px !important; }
.filter-search::placeholder { color: #8c91a5 !important; opacity: 1; }
.filter-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.filter-option { position: relative; min-width: 0; min-height: 42px; display: flex !important; align-items: center; justify-content: center; gap: 6px !important; margin: 0 !important; padding: 7px 9px; overflow: hidden; border: 1px solid #303344; border-radius: 12px; color: #c4c6d3 !important; background: linear-gradient(145deg, #191b28, #151722); font-size: 9px !important; line-height: 1.45; text-align: center; cursor: pointer; transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease; }
.filter-option > span { min-width: 0; overflow-wrap: anywhere; pointer-events: none; }
.filter-option input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; appearance: none; }
.filter-option:hover { transform: translateY(-1px); border-color: #7663a9; color: #f3ecff !important; background: var(--filter-chip-hover); }
.filter-option:active { transform: scale(.98); }
.filter-option:has(input:checked) { border-color: #8b71d4; color: #fff !important; background: linear-gradient(120deg, rgb(126 73 209 / 38%), rgb(50 106 204 / 29%)); box-shadow: inset 0 0 0 1px rgb(198 169 255 / 8%), 0 5px 16px rgb(91 64 160 / 13%); }
.filter-option:has(input:checked)::after { content: "✓"; flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, #9c63ed, #438be8); font-size: 9px; }
.filter-option:has(input:focus-visible) { outline: 3px solid rgb(89 174 255 / 70%); outline-offset: 2px; }
.discount-option { justify-content: flex-start; min-height: 44px; padding-inline: 11px; text-align: right; }
.price-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.price-range label { min-width: 0; display: grid !important; gap: 5px !important; margin: 0 !important; color: #a6a9b8 !important; font-size: 9px !important; }
.price-range input { width: 100%; min-width: 0; min-height: 42px; padding: 8px 10px !important; border: 1px solid #343748 !important; border-radius: 11px !important; color: #f2f3fa !important; background: linear-gradient(145deg, #11131d, #191b28) !important; font-size: 10px !important; transition: border-color .18s, box-shadow .18s; }
.price-range input:focus { border-color: #9770ef !important; box-shadow: 0 0 0 3px rgb(151 112 239 / 12%); outline: 0; }
.filter-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 8%); }
.filter-actions .btn { min-height: 44px; padding: 9px 12px; font-size: 10px; }
.filter-actions .btn-primary { color: white; background: linear-gradient(120deg, #8248e7, #3971ed); box-shadow: 0 8px 18px rgb(91 64 180 / 19%); }
.filter-actions .btn-outline { color: #d0c8e6; border-color: #3d3a4d; background: #191a25; }
.filters :focus-visible { outline-color: #73caff; outline-offset: 3px; }

html[data-theme="light"] .filters { --filter-accent: #6941c6; --filter-accent-2: #2676ce; color: #27324a; border-color: #ded8ed; background: radial-gradient(ellipse at 100% 0%, rgb(117 72 223 / 7%), transparent 42%), linear-gradient(155deg, #fff, #f8f9fd 72%); box-shadow: 0 16px 38px rgb(32 45 78 / 9%), inset 0 1px #fff; }
html[data-theme="light"] .filters > summary { color: #27324a; border-color: #e8e7f0; background: linear-gradient(110deg, rgb(117 72 223 / 7%), rgb(54 107 233 / 4%) 68%, transparent); }
html[data-theme="light"] .filter-heading strong { color: #27324a; }
html[data-theme="light"] .filter-heading small { color: #727c90; }
html[data-theme="light"] .filter-summary-count { color: #176885; border-color: #c7e8f3; background: #edf8fc; }
html[data-theme="light"] .filter-group, html[data-theme="light"] .filter-actions { border-color: #e8e9f0; }
html[data-theme="light"] .filter-group > b { color: #374158; }
html[data-theme="light"] .filter-group > b small, html[data-theme="light"] .price-range label { color: #727c90 !important; }
html[data-theme="light"] .filter-section-icon { color: #6740ca; background: #f0ebfb; }
html[data-theme="light"] .filter-search-wrap { border-color: #dce1eb; color: #6740ca !important; background: linear-gradient(145deg, #fff, #f6f7fb); }
html[data-theme="light"] .filter-search-wrap:focus-within { border-color: #9770df; background: #fff; box-shadow: 0 0 0 3px rgb(117 72 223 / 11%), 0 7px 20px rgb(72 54 132 / 8%); }
html[data-theme="light"] .filter-search { color: #27324a !important; }
html[data-theme="light"] .filter-search::placeholder { color: #7d879a !important; }
html[data-theme="light"] .filter-option { color: #4d5870 !important; border-color: #e0e4ed; background: linear-gradient(145deg, #fff, #f7f8fc); }
html[data-theme="light"] .filter-option:hover { color: #4b2d91 !important; border-color: #b9a7e8; background: #f6f2ff; }
html[data-theme="light"] .filter-option:has(input:checked) { color: #4b2e91 !important; border-color: #a58be0; background: linear-gradient(120deg, #f1eaff, #edf5ff); box-shadow: inset 0 0 0 1px rgb(117 72 223 / 5%), 0 5px 14px rgb(91 64 160 / 8%); }
html[data-theme="light"] .price-range input { color: #27324a !important; border-color: #dce1eb !important; background: linear-gradient(145deg, #fff, #f7f8fc) !important; }
html[data-theme="light"] .filter-actions .btn-outline { color: #51466c; border-color: #ded9e9; background: #f8f7fb; }

@media (max-width: 900px) { .filters { top: 84px; } }
@media (min-width: 641px) { .filter-heading small { display: none; } .filter-heading strong { font-size: 11px; } .filter-heading-icon { width: 34px; height: 34px; flex-basis: 34px; } }
@media (max-width: 640px) {
  .filters { position: relative; top: auto; display: block; min-width: 0; width: 100%; padding: 0 13px 13px; overflow: visible; }
  .filters > summary { margin-inline: -13px; padding-inline: 13px; }
  .filters[open] > summary { border-radius: 19px 19px 0 0; }
  .filter-group { padding: 12px 0; }
  .filter-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .filter-option { min-height: 44px; padding: 8px 7px; font-size: 10px !important; }
  .filter-actions { position: sticky; bottom: calc(61px + env(safe-area-inset-bottom)); z-index: 4; padding: 10px 0 max(8px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--filter-surface) 22%); }
  html[data-theme="light"] .filter-actions { background: linear-gradient(180deg, transparent, #fff 22%); }
}
@media (prefers-reduced-motion: reduce) { .filters *, .filters *::before, .filters *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* Floating cart uses the one persisted cart array rendered by the storefront. */
.floating-cart { position: fixed; z-index: 25; left: max(24px, calc((100vw - 1320px) / 2)); bottom: max(24px, env(safe-area-inset-bottom)); min-width: 142px; min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 1px solid rgb(184 155 255 / 45%); border-radius: 18px; color: #fff; background: linear-gradient(120deg, #7842d9, #4a68e8 65%, #258ac7); box-shadow: 0 12px 32px rgb(27 22 61 / 32%), inset 0 1px rgb(255 255 255 / 22%); font-size: 12px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.floating-cart[hidden] { display: none !important; }
.floating-cart:hover { transform: translateY(-3px); border-color: rgb(218 202 255 / 80%); box-shadow: 0 16px 36px rgb(47 37 99 / 38%), 0 0 22px rgb(103 92 233 / 20%), inset 0 1px rgb(255 255 255 / 25%); }
.floating-cart:active { transform: translateY(0) scale(.97); }
.floating-cart:focus-visible { outline: 3px solid #71dfff; outline-offset: 4px; }
.floating-cart-icon { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: rgb(255 255 255 / 15%); }
.floating-cart-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.floating-cart-label { white-space: nowrap; }
.floating-cart-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px; border: 2px solid #573bb1; border-radius: 999px; color: #fff; background: linear-gradient(145deg, #ff527c, #e52f67); box-shadow: 0 3px 10px rgb(12 12 25 / 30%); font-size: 10px; font-weight: 900; line-height: 1; }
.floating-cart-count[hidden] { display: none !important; }
.floating-cart.is-updated { animation: floating-cart-pop .48s cubic-bezier(.2,.85,.3,1); }
@keyframes floating-cart-pop { 0% { transform: scale(1); } 38% { transform: scale(1.08); } 72% { transform: scale(.98); } 100% { transform: scale(1); } }
html[data-theme="light"] .floating-cart { color: #fff; border-color: rgb(255 255 255 / 50%); background: linear-gradient(120deg, #7941da, #4268e9 65%, #1688bd); box-shadow: 0 12px 30px rgb(74 65 138 / 24%), inset 0 1px rgb(255 255 255 / 25%); }
html[data-theme="light"] .floating-cart-count { border-color: #5571d4; }
body:has(#search-panel:not(.hidden)) .floating-cart { display: none; }
@media (max-width: 640px) {
  .floating-cart { left: 14px; bottom: calc(61px + 15px + env(safe-area-inset-bottom)); min-width: 56px; width: 56px; min-height: 56px; height: 56px; gap: 0; padding: 0; border-radius: 19px; box-shadow: 0 9px 24px rgb(30 27 74 / 33%), inset 0 1px rgb(255 255 255 / 24%); }
  .floating-cart-icon { width: 34px; height: 34px; flex-basis: 34px; border-radius: 12px; }
  .floating-cart-icon svg { width: 22px; height: 22px; }
  .floating-cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .floating-cart-count { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; border-color: #211b42; }
}
@media (prefers-reduced-motion: reduce) { .floating-cart, .floating-cart:hover { transition: none; } .floating-cart.is-updated { animation: none; } }

/* Fortnite Crew Pack purchase acknowledgement. */
.crew-rules-card { margin: 17px 0 14px; padding: 16px; border: 1px solid #51406e; border-radius: 18px; color: #eeeaf8; background: radial-gradient(ellipse at 100% 0%, rgb(142 88 221 / 14%), transparent 43%), linear-gradient(145deg, #1b1a2a, #131620 78%); box-shadow: 0 12px 30px rgb(0 0 0 / 14%), inset 0 1px rgb(255 255 255 / 3%); }
.crew-rules-heading { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid rgb(255 255 255 / 9%); }
.crew-rules-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid rgb(246 184 86 / 30%); border-radius: 11px; color: #ffd38a; background: rgb(246 184 86 / 12%); font-size: 17px; font-weight: 900; }
.crew-rules-heading h2 { margin: 0 0 3px; color: #faf7ff; font-size: 14px; line-height: 1.6; }
.crew-rules-heading p { margin: 0; color: #b6b4c5; font-size: 10px; line-height: 1.9; }
.crew-rules-list { display: grid; gap: 12px; margin: 14px 0; padding: 0; list-style: none; }
.crew-rules-list li { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: start; gap: 9px; min-width: 0; }
.crew-rule-number { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgb(168 135 255 / 35%); border-radius: 9px; color: #d5c3ff; background: linear-gradient(145deg, rgb(139 87 227 / 25%), rgb(56 109 221 / 14%)); font-size: 10px; font-weight: 800; }
.crew-rules-list b { display: block; margin: 0 0 2px; color: #e8d9ff; font-size: 10px; line-height: 1.8; }
.crew-rules-list p { margin: 0; color: #b8bbca; font-size: 9px; line-height: 1.9; }
.crew-rules-ack { position: relative; min-height: 54px; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #56447a; border-radius: 13px; color: #f5f1ff; background: linear-gradient(110deg, rgb(123 76 199 / 16%), rgb(42 92 167 / 11%)); font-size: 10px; font-weight: 700; line-height: 1.8; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.crew-rules-ack input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.crew-rules-check { width: 23px; height: 23px; flex: 0 0 23px; display: grid; place-items: center; border: 1.5px solid #8e77b8; border-radius: 7px; color: transparent; background: #11131c; transition: color .16s, border-color .16s, background .16s, box-shadow .16s; }
.crew-rules-check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crew-rules-ack:has(input:checked) { border-color: #8d6be0; background: linear-gradient(110deg, rgb(123 76 199 / 25%), rgb(42 92 167 / 18%)); }
.crew-rules-ack:has(input:checked) .crew-rules-check { color: #fff; border-color: #9466e8; background: linear-gradient(135deg, #9a5ae2, #407de0); box-shadow: 0 0 14px rgb(138 88 221 / 22%); }
.crew-rules-ack:has(input:focus-visible) { outline: 3px solid #70d5ff; outline-offset: 3px; }
.crew-rules-required { display: block; margin: 7px 2px 0; color: #c3a8f4; font-size: 9px; }
.detail-add-button:disabled { color: #a8a8b2 !important; border: 1px solid #42424f !important; background: linear-gradient(120deg, #393945, #30323e) !important; box-shadow: none !important; opacity: .78; cursor: not-allowed; transform: none !important; }
html[data-theme="light"] .crew-rules-card { color: #303950; border-color: #e1d8f2; background: radial-gradient(ellipse at 100% 0%, rgb(117 72 223 / 7%), transparent 45%), linear-gradient(145deg, #fff, #f8f7fc 78%); box-shadow: 0 12px 28px rgb(32 45 78 / 8%), inset 0 1px #fff; }
html[data-theme="light"] .crew-rules-heading { border-color: #e8e4ef; }
html[data-theme="light"] .crew-rules-heading h2 { color: #29334a; }
html[data-theme="light"] .crew-rules-heading p, html[data-theme="light"] .crew-rules-list p { color: #5c667b; }
html[data-theme="light"] .crew-rules-icon { color: #855600; border-color: #f0d9ae; background: #fff6e7; }
html[data-theme="light"] .crew-rules-list b { color: #50377e; }
html[data-theme="light"] .crew-rule-number { color: #5939a4; border-color: #d8c9f1; background: linear-gradient(145deg, #f3edff, #edf5ff); }
html[data-theme="light"] .crew-rules-ack { color: #344057; border-color: #d9d0e9; background: linear-gradient(110deg, #f5f0ff, #f0f6ff); }
html[data-theme="light"] .crew-rules-check { color: transparent; border-color: #9e8cbe; background: #fff; }
html[data-theme="light"] .crew-rules-ack:has(input:checked) { border-color: #a58be0; background: linear-gradient(110deg, #f1eaff, #edf5ff); }
html[data-theme="light"] .crew-rules-required { color: #6740aa; }
html[data-theme="light"] .detail-add-button:disabled { color: #697184 !important; border-color: #d9dce4 !important; background: linear-gradient(120deg, #e8eaf0, #dfe3ed) !important; }
@media (max-width: 640px) { .detail-layout:has(.crew-rules-card) { grid-template-columns: minmax(0, 1fr); } .detail-layout:has(.crew-rules-card) > .detail-info { width: 100%; min-width: 0; } .crew-rules-card { width: 100%; min-width: 0; margin: 14px 0 12px; padding: 13px; border-radius: 16px; } .crew-rules-heading h2 { font-size: 13px; } .crew-rules-list { gap: 10px; } .crew-rules-list p { font-size: 9px; } .crew-rules-ack { min-height: 56px; padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .crew-rules-ack, .crew-rules-check { transition: none; } }

/* Inputs, choices, dialogs, tables and admin */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] textarea, html[data-theme="light"] select { color: #20263a; background-color: #fff; border-color: #d7dce8; }
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #81899a; opacity: 1; }
html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus, html[data-theme="light"] button:focus-visible, html[data-theme="light"] a:focus-visible { outline-color: var(--focus); }
html[data-theme="light"] input:disabled, html[data-theme="light"] textarea:disabled, html[data-theme="light"] select:disabled { color: #8b92a2; background: #f0f2f7; }
html[data-theme="light"] input:-webkit-autofill, html[data-theme="light"] input:-webkit-autofill:hover, html[data-theme="light"] input:-webkit-autofill:focus { -webkit-text-fill-color: #20263a; box-shadow: 0 0 0 1000px #fff inset; caret-color: #20263a; }
html[data-theme="light"] .btn-outline, html[data-theme="light"] .option-chip, html[data-theme="light"] .profile-tab, html[data-theme="light"] .quantity button { color: #333b51; background: #f6f7fb; border-color: #dfe3ed; }
html[data-theme="light"] .option-chip.active, html[data-theme="light"] .profile-tab.active { color: #6740ca; background: rgb(117 72 223 / 8%); border-color: #9b82e8; }
html[data-theme="light"] .btn-primary { color: #fff; background: linear-gradient(120deg, #8248e7, #3971ed); box-shadow: 0 8px 20px rgb(102 76 218 / 18%); }
html[data-theme="light"] .btn-outline:hover { color: #6341c4; border-color: #a48de8; background: #f1edfc; }
html[data-theme="light"] .filters, html[data-theme="light"] .box, html[data-theme="light"] .stat-card { border-color: var(--line); }
html[data-theme="light"] .sort-bar select, html[data-theme="light"] .coupon input, html[data-theme="light"] .payment-option, html[data-theme="light"] .chat-box { color: var(--text); background: #fff; border-color: var(--line); }
html[data-theme="light"] .coupon button { color: #394158; background: #eceff6; }
html[data-theme="light"] .summary-row.total { color: var(--text); border-color: var(--line); }
html[data-theme="light"] .order-row, html[data-theme="light"] .data-table th, html[data-theme="light"] .data-table td { border-color: var(--line); }
html[data-theme="light"] .data-table th { color: #626d83; }
html[data-theme="light"] .data-table select { color: var(--text); background: #fff; border-color: #d7dce8; }
html[data-theme="light"] .admin-nav, html[data-theme="light"] .admin-menu-row, html[data-theme="light"] .admin-faq-add, html[data-theme="light"] .admin-faq-row, html[data-theme="light"] .admin-ticket, html[data-theme="light"] .admin-product-form { color: var(--text); background: #fff; border-color: var(--line); }
html[data-theme="light"] .admin-nav button { color: #4f586c; }
html[data-theme="light"] .admin-nav button.active { color: #6740ca; background: rgb(117 72 223 / 9%); }
html[data-theme="light"] .admin-tabs button.active { color: #5f39bb; background: #eee8fb; border-color: #b7a4e8; }
html[data-theme="light"] .admin-badge { color: #087f9f; }
html[data-theme="light"] .ticket-status-new { color: #895900 !important; }
html[data-theme="light"] .admin-menu-row label, html[data-theme="light"] .admin-faq-add label { color: #59647a; }
html[data-theme="light"] .admin-menu-row input:not([type="checkbox"]), html[data-theme="light"] .admin-reply input, html[data-theme="light"] .admin-faq-add input, html[data-theme="light"] .admin-settings input, html[data-theme="light"] .admin-price-form input { color: var(--text); background: #fff; border-color: #d7dce8; }
html[data-theme="light"] .admin-image-upload { color: #374158; background: #f5f6fa; border-color: #d8deeb; }
html[data-theme="light"] .admin-image-reset { color: #5c667c; }
html[data-theme="light"] .admin-message { color: #2f374d; background: #f0f3f9; border-color: #dfe4ef; }
html[data-theme="light"] .admin-message.from-admin { background: #eee9fa; border-color: #d7c9f5; }
html[data-theme="light"] .ticket-legend span { background: #f2f4f9; }
html[data-theme="light"] .chat-msg, html[data-theme="light"] .chat-msg.mine, html[data-theme="light"] .chat-msg.customer-message { color: #18364a; background: #e7f5fc !important; border-color: #b7e0f0 !important; }
html[data-theme="light"] .chat-msg.admin-message { color: #382556; background: #f1eafd; border-color: #d9c6f2; }
html[data-theme="light"] .chat-msg.customer-message small { color: #13789c !important; }
html[data-theme="light"] .chat-msg.admin-message small { color: #7145bb; }
html[data-theme="light"] .ticket-legend .admin-legend { color: #6540a8; background: #f3eefb; border-color: #ded2f2; }
html[data-theme="light"] .ticket-legend .customer-legend { color: #285d77; background: #edf7fb; border-color: #cfe5ee; }
html[data-theme="light"] .ticket-replied { color: #6740a6; }
html[data-theme="light"] .admin-message.from-admin { color: #3d2b5d; }
html[data-theme="light"] .status { color: #32643b; background: #e4f4e6; }
html[data-theme="light"] .test-banner, html[data-theme="light"] .notice { color: #72510b; background: #fff7df; border-color: #f0d995; }
html[data-theme="light"] .admin-error { color: #b42336; }
html[data-theme="light"] .mobile-sticky { background: rgb(255 255 255 / 96%); border-color: var(--line); box-shadow: 0 -8px 26px rgb(35 43 69 / 8%); }
html[data-theme="light"] .toast { color: #fff; background: #334155; }

/* Mobile quick links: one compact panel for all six destinations. */
@media (max-width: 760px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .mobile-nav {
    position: fixed;
    z-index: 30;
    inset-inline: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    height: 68px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    justify-content: stretch;
    padding: 5px;
    border: 1px solid #baff45;
    border-radius: 18px;
    background: rgb(14 20 12 / 97%);
    box-shadow: 0 0 18px rgb(186 255 69 / 24%), 0 8px 26px rgb(0 0 0 / 38%), inset 0 0 14px rgb(186 255 69 / 6%);
    backdrop-filter: blur(16px);
  }
  .mobile-nav a {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 12px;
    color: #d6e6bf;
    font-size: 18px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .mobile-nav a > span { line-height: 1; }
  .mobile-nav small { font-size: clamp(6px, 1.75vw, 8px); letter-spacing: -.25px; }
  .mobile-nav a:hover, .mobile-nav a:focus-visible, .mobile-nav a[aria-current="page"] {
    color: #d7ff7b;
    background: rgb(186 255 69 / 12%);
    outline-color: #baff45;
  }
  .mobile-sticky { bottom: calc(68px + max(8px, env(safe-area-inset-bottom))); }
  html[data-theme="light"] .mobile-nav {
    border-color: #d8e2ce;
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 -5px 24px rgb(35 43 69 / 12%), 0 5px 18px rgb(35 43 69 / 8%);
  }
  html[data-theme="light"] .mobile-nav a { color: #59647a; }
  html[data-theme="light"] .mobile-nav a:hover,
  html[data-theme="light"] .mobile-nav a:focus-visible,
  html[data-theme="light"] .mobile-nav a[aria-current="page"] {
    color: #476d15;
    background: rgb(155 211 54 / 14%);
    outline-color: #8ebd36;
  }
}

/* Accessible compact toggle, shared between storefront and admin pages. */
.theme-toggle { width: 39px; height: 39px; flex: 0 0 39px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: var(--panel); transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; }
.theme-toggle:hover { transform: translateY(-1px); border-color: var(--lime); box-shadow: 0 5px 16px rgb(117 72 223 / 14%); }
.theme-toggle:focus-visible { outline: 3px solid rgb(117 72 223 / 35%); outline-offset: 2px; }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-theme-toggle { margin-inline-start: 8px; vertical-align: middle; }
.admin-login-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) { .theme-toggle { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; } .theme-toggle svg { width: 17px; height: 17px; } .head-actions { gap: 6px; } }
@media (max-width: 640px) {
  html[data-theme="light"] .hero { min-height: 510px; padding-bottom: 22px; background-position: 38% center; background-size: cover; background-repeat: no-repeat; }
  html[data-theme="light"] .hero::after { background: linear-gradient(180deg, rgb(5 8 18 / 89%) 0%, rgb(5 8 18 / 82%) 58%, rgb(5 8 18 / 48%) 100%); }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

.password-change-notice{margin:16px 0;padding:16px 18px;border:1px solid rgba(255,170,48,.4);border-radius:16px;background:linear-gradient(135deg,rgba(255,156,41,.12),rgba(238,63,89,.08));color:var(--text,#f4f5fb)}.password-change-notice>b{color:#ffbd59}.password-change-notice p{margin:7px 0 12px;color:var(--muted,#aeb4c5);line-height:1.9}.password-change-notice .check-label{display:flex;align-items:flex-start;gap:10px;margin:0;color:var(--text,#f4f5fb);line-height:1.8}.password-change-notice input[type=checkbox]{accent-color:#a855f7;flex:0 0 auto;margin-top:5px}

html[data-theme="light"] .payment-card-details,html[data-theme="light"] .payment-option{background:#fff;color:var(--text);border-color:var(--line)}html[data-theme="light"] .payment-option:has(input:checked){border-color:#7950d8;box-shadow:0 0 0 2px #7950d822}