/* SONIICSHOP theme switch. Loaded after page CSS and generated light overrides. */
html { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8faff;
  --bg2: #f1f4fb;
  --panel: #fff;
  --panel2: #f6f8fe;
  --line: #dbe2ef;
  --text: #1c2539;
  --muted: #586579;
  --purple: #7735ce;
  --purple2: #7b42d5;
  --purple3: #5728a3;
  --red: #be2a57;
  --green: #11835a;
  --shadow: 0 14px 40px rgba(45, 54, 92, .09);
}

/* Switch: reachable in both mobile and desktop header, keyboard focus visible. */
.theme-toggle {
  flex-shrink: 0;
  min-width: 44px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #464060;
  background: #19152d;
  color: #fff;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: #a653ff; background: #291d43; }
.theme-toggle:focus-visible { outline: 3px solid #a653ff; outline-offset: 3px; }
.theme-icon { font-size: 19px; line-height: 1; }
.theme-icon-moon { display: none; }
html[data-theme="light"] .theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-moon { display: inline; }
html[data-theme="light"] .theme-toggle { background: #fff; border-color: #ccd6e8; color: #42206e; }
html[data-theme="light"] .theme-toggle:hover { background: #f1ebff; border-color: #8647c7; }
@media (max-width: 1100px) {
  .theme-label { display: none; }
  .theme-toggle { padding: 0 9px; }
  .header-tools { gap: 12px; }
}
@media (max-width: 520px) {
  .theme-toggle { width: 38px; min-width: 38px; height: 38px; border-radius: 11px; padding: 0; }
  .theme-icon { font-size: 19px; }
  .header-main { gap: 7px; }
  .header-tools { gap: 8px; }
}

/* Prefer a real light UI rather than merely inverting the dark interface. */
html[data-theme="light"] body { background: #f8faff; color: #1c2539; }
html[data-theme="light"] .topbar { background: #f6f8fe; color: #4c5b70; }
html[data-theme="light"] .site-header { background: rgba(255,255,255,.95); }
html[data-theme="light"] .main-nav { background: #f1f4fb; }
html[data-theme="light"] .header-search { background: #fff; }
html[data-theme="light"] .header-search input { color: #19263a; }
html[data-theme="light"] .header-search button,
html[data-theme="light"] .category-cta,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .checkout-btn,
html[data-theme="light"] .add-to-cart,
html[data-theme="light"] .checkout-form button,
html[data-theme="light"] .price-filter-form button,
html[data-theme="light"] .coupon-form button,
html[data-theme="light"] .quick-add button:hover,
html[data-theme="light"] .products-pagination .current,
html[data-theme="light"] .product-badge,
html[data-theme="light"] .discount-badge,
html[data-theme="light"] .product-badge.new { color: #fff; }
html[data-theme="light"] .tool-icon b { color: #fff; border-color: #fff; }
html[data-theme="light"] .brand-mark-image { background: #0a091a; }
html[data-theme="light"] .brand-copy strong { color: #18223a; }
html[data-theme="light"] .brand-copy small { color: #53627b; }
html[data-theme="light"] .site-message { box-shadow: var(--shadow); }
html[data-theme="light"] :is(input, textarea, select)::placeholder { color: #7a879d; opacity: 1; }
html[data-theme="light"] :is(input,textarea,select):focus-visible { outline-color: #7437bb; }
html[data-theme="light"] :is(a, button):focus-visible { outline: 3px solid #9356e6; outline-offset: 3px; }

/* The intentionally dark hero art and promotional overlays retain high contrast. */
html[data-theme="light"] .hero-section,
html[data-theme="light"] .repair-hero,
html[data-theme="light"] .about-hero,
html[data-theme="light"] .dark-promo-inner { color: #fff; }
html[data-theme="light"] .hero-section :is(h1,h2,h3,strong),
html[data-theme="light"] .repair-hero :is(h1,h2,h3,strong),
html[data-theme="light"] .about-hero :is(h1,h2,h3,strong) { color: #fff; }
html[data-theme="light"] .hero-section .btn-ghost { background: rgba(17,20,36,.68); color: #fff; border-color: #58506e; }
html[data-theme="light"] .hero-section .btn-primary { color: #fff; }
html[data-theme="light"] .hero-section .sonic-offer-item { color: #17233a; }
html[data-theme="light"] .hero-section .sonic-offer-name { color: #17233a; }
html[data-theme="light"] .hero-section .sonic-offer-price { color: #08774f; }
html[data-theme="light"] .hero-section .sonic-offers-heading { color: #fff; }
html[data-theme="light"] .hero-section .sonic-offers-heading small { color: #c5d4e9; }

/* Key retail surfaces: product, catalog, checkout and customer profile. */
html[data-theme="light"] :is(.store-product-card,.products-grid .product-card,.category-tile,
  .products-sidebar,.product-detail-section,.product-trust-box > div,
  .related-product-card,.cart-item,.cart-summary,.checkout-form,.checkout-summary,
  .empty-cart,.account-security-card,.product-reviews-section,.product-review-card,
  .product-review-form) { box-shadow: 0 8px 26px rgba(25,39,69,.04); }
html[data-theme="light"] .store-product-title { background: #fff; }
html[data-theme="light"] .store-product-title a,
html[data-theme="light"] .products-grid .product-name,
html[data-theme="light"] .price-row strong { color: #1d2940; }
html[data-theme="light"] :is(.store-product-image,.products-grid .product-image,.product-detail-image,
 .related-product-image,.category-tile-image,.cart-item-image) { background: #f1f4fb; }
html[data-theme="light"] .wish-btn { background: #fff; color: #5c348c; }
html[data-theme="light"] .quick-add button { background: #f4f0ff; border-color: #d5c4f1; color: #642da5; }
html[data-theme="light"] .quick-add button:hover { background: #7132cd; }
html[data-theme="light"] .sort-form select,
html[data-theme="light"] .filter-section select,
html[data-theme="light"] .price-filter-form input,
html[data-theme="light"] .checkout-form :is(input,textarea,select),
html[data-theme="light"] .coupon-form input,
html[data-theme="light"] .product-review-form :is(select,textarea),
html[data-theme="light"] .repair-form-grid :is(input,textarea),
html[data-theme="light"] .track-form input { color: #1c2539; background: #fff; border-color: #cdd6e6; }
html[data-theme="light"] .quantity-box :is(input,button),
html[data-theme="light"] .cart-item-quantity button { color: #1c2539; background: #f1f4fb; }
html[data-theme="light"] .product-detail-discount,
html[data-theme="light"] .product-detail-out-stock,
html[data-theme="light"] .form-errors,
html[data-theme="light"] .coupon-error { background: #fff0f3; color: #a7224b; border-color: #f1bac8; }
html[data-theme="light"] .product-detail-stock,
html[data-theme="light"] .product-stock { color: #13764e; }
html[data-theme="light"] .summary-row strong,
html[data-theme="light"] .checkout-item strong { color: #1c2539; }

/* Legal, support and informational routes, including their page-specific CSS. */
html[data-theme="light"] .contact-page,
html[data-theme="light"] .track-page,
html[data-theme="light"] .guide-hero,
html[data-theme="light"] .info-hero,
html[data-theme="light"] .about-store-contact-section {
  background: radial-gradient(circle at top right, rgba(119,60,208,.085), transparent 35%), #f8faff;
}
html[data-theme="light"] .guide-card,
html[data-theme="light"] .faq details,
html[data-theme="light"] .guide-cta,
html[data-theme="light"] .contact-card,
html[data-theme="light"] .contact-form-box,
html[data-theme="light"] .contact-social-panel,
html[data-theme="light"] .contact-quick-links > a,
html[data-theme="light"] .info-sidebar,
html[data-theme="light"] .info-card,
html[data-theme="light"] .info-notice,
html[data-theme="light"] .order-result,
html[data-theme="light"] .track-help,
html[data-theme="light"] .track-form {
  background: #fff; border-color: #dbe2ef; box-shadow: var(--shadow);
}
html[data-theme="light"] .contact-card .contact-value,
html[data-theme="light"] .info-sidebar a { color: #282c42; }
html[data-theme="light"] .contact-social-links > a { color: #622eab; background: #f3edff; border-color: #d2b9ed; }
html[data-theme="light"] .info-notice { background: #f3eaff; color: #4e3a72; border-color: #d1b5eb; }
html[data-theme="light"] .step.active { color: #602a9b; }
html[data-theme="light"] .track-error { background: #fff0f3; color: #9c2847; }

/* Footer remains consistent with the rest of the selected palette. */
html[data-theme="light"] .site-footer,
html[data-theme="light"] .sonic-footer { background: #edf2fa; border-top: 1px solid #d5deeb; }
html[data-theme="light"] .site-footer :is(h3,strong),
html[data-theme="light"] .sonic-footer .footer-grid h3 { color: #1b2840; }
html[data-theme="light"] .sonic-footer :is(.footer-brand p,.footer-contact p,.footer-grid a) { color: #485a72; }
html[data-theme="light"] .sonic-footer .footer-tagline,
html[data-theme="light"] .sonic-footer .footer-grid a:hover { color: #6936ba; }
html[data-theme="light"] .footer-bottom { border-color: #d5deeb; color: #526176; }
html[data-theme="light"] .footer-socials a { border-color: #c9d3e3; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}
@media print {
  .theme-toggle { display: none !important; }
}

/* High-specificity overrides for the later Sonic product-card redesign. */
html[data-theme="light"] .sonic-product-card {
  background: #fff;
  border-color: #dee5f1;
  box-shadow: 0 14px 32px rgba(35,48,78,.07);
}
html[data-theme="light"] .sonic-product-card .store-product-image {
  background: radial-gradient(circle at 50% 25%, #fff, #f0f3fb 75%);
}
html[data-theme="light"] .sonic-product-card .store-product-title,
html[data-theme="light"] .sonic-product-card .store-product-info { background: #fff; }
html[data-theme="light"] .sonic-product-card .store-product-title a,
html[data-theme="light"] .sonic-product-card .price-row strong { color: #19253b; }
html[data-theme="light"] .sonic-product-card .quick-add button {
  color: #fff;
  border-color: #7132cd;
  background: linear-gradient(135deg,#7132cd,#8a42e0);
}
html[data-theme="light"] .sonic-product-card .rating-row span { color: #733db9; }
html[data-theme="light"] .sonic-brand .brand-mark-image {
  background: #070814;
  border-color: #9251ec;
}

/* Keep the mobile search field inside the sticky header, not on top of content. */
@media (max-width: 760px) {
  .sonic-header .header-main {
    height: 136px;
    align-items: flex-start;
    padding-top: 14px;
  }
  .sonic-header .header-search {
    top: 83px;
    right: 4%;
    left: 4%;
    width: 92%;
    margin: 0;
  }
  .sonic-header .mobile-menu-btn,
  .sonic-header .header-tools,
  .sonic-header .sonic-brand { align-self: flex-start; }
}