/*
 * Sportcore — Dark Theme
 * Loaded after style.css. Only dark-mode-specific presentation belongs here.
 */
body.dark {
  --ink: #f6f5f1;
  --muted: #b7c0c6;
  --paper: #0d151b;
  --surface: #17232b;
  --line: #34434c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --control-placeholder: #b7c0c6;
  color: var(--ink);
  background: var(--paper);
}
body.dark a {
  color: inherit;
}
body.dark .site-header {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-color: var(--line);
}
body.dark .site-header.scrolled {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
body.dark .nav a,
body.dark .nav-trigger,
body.dark .icon-btn {
  color: var(--ink);
}
body.dark .nav a:hover,
body.dark .nav-trigger:hover,
body.dark .nav a.active,
body.dark .icon-btn:hover {
  color: var(--accent);
}
body.dark .icon-btn:hover {
  background: var(--line);
}
body.dark .home-menu,
body.dark .mobile-menu {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
body.dark .home-menu a:hover {
  background: var(--paper);
}
body.dark .mobile-menu a,
body.dark .mobile-home-trigger {
  border-color: var(--line);
}
body.dark .hero {
  background: #0c141a;
  color: #fff;
}
/* Dark mode - Home 1 hero */
body.dark .hero:before {
  background:
    linear-gradient(90deg, rgba(5,10,13,.94), rgba(5,10,13,.48)),
    url('https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?auto=format&fit=crop&w=1800&q=85')
    center/cover no-repeat;
}

/* Dark mode - Home 2 hero */
body.dark .hero.home2-hero:before {
  background:
    linear-gradient(
      90deg,
      rgba(5,10,13,.80),
      rgba(5,10,13,.20)
    ),
    url("../images/background02.png") center/cover no-repeat;
}
body.dark .hero p,
body.dark .page-hero p,
body.dark .cta-band p {
  color: rgba(255, 255, 255, 0.88);
}
body.dark .hero .btn-outline,
body.dark .cta-band .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
body.dark .page-hero {
  background: #0b1217;
  color: #fff;
}
body.dark .sport-card,
body.dark .product-card,
body.dark .brand-card,
body.dark .feature-card,
body.dark .testimonial,
body.dark .info-card,
body.dark .auth-card,
body.dark .empty,
body.dark .modal,
body.dark .cart-row,
body.dark .total-box,
body.dark .brand-detail-card,
body.dark .category-detail-card {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
body.dark .sport-card-content {
  color: #fff;
}
body.dark .sport-card p {
  color: #e3e9ec;
}
body.dark .product-media,
body.dark .main-image {
  background: #111c23;
}
body.dark .product-name,
body.dark .price,
body.dark .feature-card h3,
body.dark .brand-detail-card h3,
body.dark .category-detail-card h3,
body.dark .auth-card h1,
body.dark .total-line.total {
  color: var(--ink);
}
body.dark .product-brand,
body.dark .feature-card p,
body.dark .testimonial small,
body.dark .old-price,
body.dark .muted,
body.dark .section-head p,
body.dark .brand-detail-card p,
body.dark .category-detail-card p {
  color: var(--muted);
}
body.dark .badge {
  color: #101820;
  background: var(--accent-2);
}
body.dark .wish-btn {
  color: var(--ink);
  background: #22323c;
}
body.dark .wish-btn:hover {
  background: var(--line);
}
body.dark .rating {
  color: #ffc94a;
}
body.dark .btn-outline {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--line);
}
body.dark .btn-outline:hover {
  color: #ffb703;
  border-color: #ffb703;
}
body.dark .btn-dark {
  background: #f6f5f1;
  color: #101820;
}
body.dark .btn-dark:hover {
  background: var(--accent-2);
  color: #101820;
}
body.dark .field,
body.dark .filters select,
body.dark .filters input,
body.dark .form-group input,
body.dark .form-group textarea,
body.dark .form-group select {
  color: var(--ink);
  background: #142129;
  border-color: var(--line);
}
body.dark .field::placeholder,
body.dark input::placeholder,
body.dark textarea::placeholder {
  color: var(--control-placeholder);
  opacity: 1;
}
body.dark select option {
  color: var(--ink);
  background: var(--surface);
}
body.dark .qty button {
  background: #22323c;
  color: var(--ink);
}

/* Keep the same content-card headings readable on dark surfaces. */
body.dark .feature-card h3,
body.dark .image-feature-card h3,
body.dark .process-card h3,
body.dark .team-card h3,
body.dark .brand-detail-card h3,
body.dark .category-detail-card h3 {
  color: #f2f5f6 !important;
}
body.dark .tag {
  color: var(--ink);
  border-color: var(--line);
}
body.dark .site-footer {
  background: #080f14;
  color: #f6f5f1;
  border-top: 1px solid #26343d;
}
body.dark .site-footer h3,
body.dark .site-footer .logo {
  color: #fff;
}
body.dark .site-footer p,
body.dark .site-footer a {
  color: #b7c0c6;
}
body.dark .site-footer a:hover {
  color: #fff;
}
body.dark .site-footer .field {
  color: #fff;
  background: #142129;
  border-color: #45545d;
}
body.dark .site-footer .field::placeholder {
  color: #b7c0c6;
}
body.dark .footer-bottom {
  border-color: #2f3d46;
  color: #9aa6ad;
}
body.dark .modal-backdrop {
  background: rgba(0, 0, 0, 0.78);
}
body.dark .toast,
body.dark .loader {
  background: #080f14;
  color: #fff;
}
body.dark .map {
  background:
    linear-gradient(135deg, rgba(8, 70, 58, 0.88), rgba(5, 12, 16, 0.94)),
    url("https://images.unsplash.com/photo-1524666041070-9a8762a9f7d0?auto=format&fit=crop&w=1200&q=75")
      center/cover;
  color: #fff;
}
body.dark .stat {
  background: var(--surface);
  color: var(--ink);
}
body.dark .stats {
  background: var(--line);
}
body.dark .stat span {
  color: var(--muted);
}
body.dark .auth-links a {
  color: var(--accent);
}
body.dark [style*="background:#dfe7e3"],
body.dark [style*="background: #dfe7e3"] {
  background: var(--surface) !important;
  color: var(--ink) !important;
}
body.dark [style*="background: var(--accent)"],
body.dark [style*="background:var(--accent)"] {
  background: var(--accent) !important;
  color: #fff !important;
}
body.dark .error {
  color: #ff7657;
}
body.dark {
  --muted: #c2cbd0;
}
body.dark .btn-primary {
  color: #fff;
}
body.dark .btn-primary:hover {
  background: #fff;
  color: #101820;
}
body.dark .dark-band {
  background: #101820;
  color: #f6f5f1;
}
body.dark .dark-band .muted {
  color: #c2cbd0;
}

/* =================================================================
   DARK MODE VISIBILITY FIX — Header & Sitewide
   Ensures every element is clearly readable on dark backgrounds.
   ================================================================= */

/* ── DARK MODE: Header background ────────────────────────────── */
body.dark .site-header {
  background: color-mix(in srgb, #0d151b 92%, transparent);
}

/* ── DARK MODE: Logo ──────────────────────────────────────────── */
body.dark .site-header .logo {
  color: #f6f5f1 !important;
}
body.dark .site-header .logo-mark {
  background: #c74325;
  color: #ffffff !important;
}

/* ── DARK MODE: Desktop Nav Links ────────────────────────────── */
body.dark .nav a,
body.dark .nav-trigger {
  color: #e8eff3 !important;
  background: none;
}
body.dark .nav a:hover,
body.dark .nav-trigger:hover {
  color: #ff7a5c !important;
}
body.dark .nav a.active,
body.dark .nav-trigger.active {
  color: #ff7a5c !important;
}

/* ── DARK MODE: Home Dropdown ────────────────────────────────── */
body.dark .home-menu {
  background: #17232b;
  border: 1px solid #34434c;
}
body.dark .home-menu a {
  color: #e8eff3 !important;
}
body.dark .home-menu a:hover {
  background: #0d151b;
  color: #ff7a5c !important;
}
body.dark .home-menu a.active {
  color: #ff7a5c !important;
  font-weight: 700;
}

/* ── DARK MODE: Icon Buttons ──────────────────────────────────── */
body.dark .site-header .icon-btn {
  color: #e8eff3 !important;
  background: transparent;
}
body.dark .site-header .icon-btn:hover {
  background: #34434c;
  color: #ffffff !important;
}

/* ── DARK MODE: Cart/Wishlist Badge ──────────────────────────── */
body.dark .site-header .count {
  background: #c74325;
  color: #ffffff !important;
  font-weight: 700;
}

/* ── DARK MODE: Mobile Menu ──────────────────────────────────── */
body.dark .mobile-menu {
  background: #17232b;
  border-bottom: 1px solid #34434c;
}
body.dark .mobile-menu a,
body.dark .mobile-home-trigger {
  color: #e8eff3 !important;
  border-bottom-color: #34434c;
}
body.dark .mobile-home-links a {
  color: #e8eff3 !important;
}
body.dark .mobile-menu a:hover,
body.dark .mobile-home-trigger:hover,
body.dark .mobile-home-links a:hover {
  color: #ff7a5c !important;
}
body.dark .mobile-menu a.active {
  color: #ff7a5c !important;
}

/* ── DARK MODE: Mobile Hamburger Toggle ──────────────────────── */
body.dark .menu-toggle {
  color: #e8eff3 !important;
  background: transparent;
}

/* ── DARK MODE SITEWIDE: Form elements ──────────────────────── */
body.dark .form-group label {
  color: #e8eff3;
}
body.dark .contact-form-section .contact-form label {
  color: #f2f5f6 !important;
}
body.dark .tag {
  color: #e8eff3;
  border-color: #34434c;
}
body.dark .empty {
  color: #e8eff3;
}
body.dark .modal {
  color: #e8eff3;
  background: #17232b;
}
body.dark .toast {
  color: #ffffff;
  background: #080f14;
}
body.dark .total-line {
  color: #b7c0c6;
}
body.dark .total-line.total {
  color: #f6f5f1;
}

/* ── DARK MODE SITEWIDE: Muted text contrast guard ──────────── */
body.dark .muted,
body.dark .section-head p,
body.dark .feature-card p,
body.dark .product-brand,
body.dark .person small {
  color: #c2cbd0;
}

/* ── DARK MODE: Cart row & qty ────────────────────────────────── */
body.dark .cart-row {
  color: #e8eff3;
}
body.dark .qty button {
  background: #22323c;
  color: #e8eff3;
}


/* =================================================================
   PAGE-SPECIFIC DARK MODE FIXES
   Keep hero imagery visible and section headings readable.
   ================================================================= */

/* Products — restore the hero image after the generic .page-hero dark rule. */
body.dark .products-hero {
  background:
    linear-gradient(90deg, rgba(5, 10, 13, 0.88), rgba(5, 10, 13, 0.50)),
    url("../images/background06.jpg") center/cover no-repeat !important;
}

/* Team Kits — identical hero image source in light and dark mode. */
body.dark .team-kit-hero {
  background:
    linear-gradient(rgba(5, 10, 13, 0.72), rgba(5, 10, 13, 0.72)),
    url("../images/background07.jpg") center/cover no-repeat !important;
}

/* Offers — identical hero image source in light and dark mode. */
body.dark .offers-hero {
  background:
    linear-gradient(rgba(5, 10, 13, 0.72), rgba(5, 10, 13, 0.72)),
    url("../images/background08.png") center/cover no-repeat !important;
}

/* About — restore the hero image after the generic .page-hero dark rule. */
body.dark .about-hero-bg {
  background:
    linear-gradient(rgba(5, 10, 13, 0.72), rgba(5, 10, 13, 0.72)),
    url("../images/background09.jpg") center/cover no-repeat !important;
}

/* Contact — restore the hero image after the generic .page-hero dark rule. */
body.dark.contact-page .contact-hero-bg {
  background:
    linear-gradient(90deg, rgba(5, 10, 13, 0.82), rgba(5, 10, 13, 0.48)),
    url("../images/background11.jpg") center/cover no-repeat !important;
}

/* Brands — force every section heading to remain readable in both themes. */
body.dark section[style*="background: #dfe7e3"] .section-head h2 {
  color: #101820 !important;
}
body.dark .brands-page-hero-section .brands-hero-display {
  color: #ffffff !important;
}
body.dark .brands-signature-collection-heading,
body.dark .brands-partnerships-heading {
  color: #ffffff !important;
}
body.dark .brands-discovery-intro-heading,
body.dark .brands-signature-collection-heading,
body.dark .brands-story-atlas-heading,
body.dark .brands-story-atlas-sg-entry h3,
body.dark .brands-story-atlas-yonex-entry h3,
body.dark .brands-story-atlas-adidas-entry h3 {
  color: #f6f5f1 !important;
}
body.dark .brands-signature-collection-energy-note h3,
body.dark .brands-signature-collection-team-note h3 {
  color: #f6f5f1 !important;
}
body.dark .brands-partnerships-heading,
body.dark .brands-discovery-finale-heading {
  color: #ffffff !important;
}
body.dark .brands-partnerships-section .brands-partnerships-eyebrow {
  color: #ffb703 !important;
}
body.dark .brands-partnerships-section .brands-partnerships-heading {
  color: #ffffff !important;
}
body.dark .brands-partnerships-section .brands-partnerships-text {
  color: #dbe5e9 !important;
}
body.dark .brands-partnerships-section .brands-partnerships-image-mark,
body.dark .brands-partnerships-section .brands-partnerships-signals span {
  color: #ffffff !important;
}
body.dark .brands-partnerships-section .brands-partnerships-signals {
  border-top-color: rgba(255, 255, 255, 0.38) !important;
}
body.dark .brands-partnerships-section .brands-partnerships-signals span {
  border-color: rgba(255, 255, 255, 0.42) !important;
}

/* Ensure the shared section-heading token is readable on dark surfaces. */
body.dark .brands-showcase-section h2,
body.dark .brands-categories-section h2,
body.dark .brands-products-section h2 {
  color: #f6f5f1 !important;
}