/* ==========================================================================
   ZOLÉA Accessories — Apple-Grade Pro Dark Mode Design System
   Auto-adapts to device OS (prefers-color-scheme: dark) and manual toggle [data-theme="dark"]
   ========================================================================== */

/* 1. CSS Variable Definitions for Dark Theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  html:not([data-theme="light"]) {
    color-scheme: dark;
    background-color: #09090b !important;
    --color-bg: #09090b;
    --color-bg-subtle: #121215;
    --color-bg-secondary: #18181c;
    --color-bg-tertiary: #23232a;
    
    --color-text-primary: #f4f4f6;
    --color-text-secondary: #a1a1aa;
    --color-text-tertiary: #71717a;
    --color-text-inverse: #09090b;

    --color-border-subtle: rgba(255, 255, 255, 0.09);
    --color-border-medium: rgba(255, 255, 255, 0.16);
    --color-border-dark: #ffffff;

    --color-dark-accent: #ffffff;

    --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 14px 38px rgba(244, 70, 158, 0.28), 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 28px 70px rgba(0, 0, 0, 0.75);
    --shadow-drawer: -8px 0 40px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"],
html[data-theme="dark"] {
  color-scheme: dark;
  background-color: #09090b !important;
  --color-bg: #09090b;
  --color-bg-subtle: #121215;
  --color-bg-secondary: #18181c;
  --color-bg-tertiary: #23232a;
  
  --color-text-primary: #f4f4f6;
  --color-text-secondary: #a1a1aa;
  --color-text-tertiary: #71717a;
  --color-text-inverse: #09090b;

  --color-border-subtle: rgba(255, 255, 255, 0.09);
  --color-border-medium: rgba(255, 255, 255, 0.16);
  --color-border-dark: #ffffff;

  --color-dark-accent: #ffffff;

  --shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 14px 38px rgba(244, 70, 158, 0.28), 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 28px 70px rgba(0, 0, 0, 0.75);
  --shadow-drawer: -8px 0 40px rgba(0, 0, 0, 0.65);
}

/* 2. Global Dark Theme Component Overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: var(--color-bg);
    color: var(--color-text-primary);
  }

  :root:not([data-theme="light"]) .hero-carousel-section,
  :root:not([data-theme="light"]) .hero-carousel-container,
  :root:not([data-theme="light"]) .hero-carousel-track,
  :root:not([data-theme="light"]) .hero-slide-bg {
    background: #09090b;
  }

  :root:not([data-theme="light"]) .zolea-header,
  :root:not([data-theme="light"]) .zolea-header.scrolled {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :root:not([data-theme="light"]) .header-inner,
  :root:not([data-theme="light"]) .header-inner:hover,
  :root:not([data-theme="light"]) .zolea-header.scrolled .header-inner {
    background: rgba(20, 20, 26, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
  }

  :root:not([data-theme="light"]) .header-pill,
  :root:not([data-theme="light"]) .header-pill:hover,
  :root:not([data-theme="light"]) .zolea-header.scrolled .header-pill {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :root:not([data-theme="light"]) .header-border-beam-container {
    filter: drop-shadow(0 0 10px rgba(255, 42, 157, 1))
            drop-shadow(0 0 22px rgba(255, 42, 157, 0.85))
            drop-shadow(0 0 40px rgba(255, 42, 157, 0.55));
  }

  :root:not([data-theme="light"]) .nav-link.active::after {
    background-color: #ffffff;
  }

  :root:not([data-theme="light"]) .mobile-menu-btn {
    color: #f1f5f9;
  }

  :root:not([data-theme="light"]) .nav-link {
    color: #e4e4e7;
  }

  :root:not([data-theme="light"]) .header-icon-btn {
    color: #e4e4e7;
  }

  :root:not([data-theme="light"]) .currency-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #f4f4f6;
    border-color: rgba(255, 255, 255, 0.16);
  }

  :root:not([data-theme="light"]) .currency-toggle-btn:hover {
    background: rgba(244, 70, 158, 0.2);
    border-color: #f4469e;
    color: #f4469e;
  }

  /* Category Capsule Bar */
  :root:not([data-theme="light"]) .brand-pills-wrapper {
    background: rgba(26, 26, 30, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }

  :root:not([data-theme="light"]) .brand-pill {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .brand-pill:hover {
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .brand-pill.active {
    background: #f4469e !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(244, 70, 158, 0.45);
  }

  /* Mobile Model Chips */
  :root:not([data-theme="light"]) .mobile-chips-wrapper {
    background: transparent;
  }

  :root:not([data-theme="light"]) .mobile-chip {
    background: #1e1e23;
    color: #d4d4d8;
    border: 1px solid rgba(255, 255, 255, 0.09);
  }

  :root:not([data-theme="light"]) .mobile-chip:hover {
    border-color: rgba(244, 70, 158, 0.4);
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .mobile-chip.active {
    background: #f4469e !important;
    color: #ffffff !important;
    border-color: #f4469e !important;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(244, 70, 158, 0.45);
  }

  /* Catalog Layout & Sidebar */
  :root:not([data-theme="light"]) .catalog-section {
    background-color: var(--color-bg);
  }

  :root:not([data-theme="light"]) .catalog-title-wrap h2 {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .catalog-subtitle {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .catalog-sidebar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 24px 0 0 !important;
  }

  :root:not([data-theme="light"]) .sidebar-title {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .sidebar-group-title {
    color: #71717a;
  }

  :root:not([data-theme="light"]) .model-nav-item {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .model-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .model-nav-item.active {
    background: rgba(244, 70, 158, 0.16);
    color: #f4469e;
  }

  :root:not([data-theme="light"]) .catalog-sort-select,
  :root:not([data-theme="light"]) .sort-select,
  :root:not([data-theme="light"]) #catalog-sort-select {
    background: #1e1e23 !important;
    color: #f4f4f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .sort-select option,
  :root:not([data-theme="light"]) #catalog-sort-select option {
    background-color: #1e1e23 !important;
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .toolbar-count {
    color: #a1a1aa;
  }

  /* Catalog Empty State in Dark Mode (#161619 card styling) */
  :root:not([data-theme="light"]) .catalog-empty-card {
    background: #161619 !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  }

  :root:not([data-theme="light"]) .catalog-empty-icon-wrap {
    background: #242429 !important;
  }

  :root:not([data-theme="light"]) .catalog-empty-icon {
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .catalog-empty-title {
    color: #ffffff !important;
  }

  /* Mobile Share Button Dark Mode */
  :root:not([data-theme="light"]) .product-card-share-btn {
    background: rgba(28, 28, 34, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    color: #f4f4f6 !important;
  }
  :root:not([data-theme="light"]) .product-card-share-btn:active {
    background: rgba(45, 45, 54, 0.95) !important;
  }

  :root:not([data-theme="light"]) .catalog-empty-desc {
    color: #a1a1aa !important;
  }

  /* Product Cards in Dark Mode — Frameless & Clean */
  :root:not([data-theme="light"]) .product-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .product-card:hover {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .product-card-top {
    background: transparent !important;
  }

  :root:not([data-theme="light"]) .product-card-img-wrap {
    background: linear-gradient(180deg, #1d1b1b 0%, #0b0a0b 50%, #010101 100%) !important;
  }

  :root:not([data-theme="light"]) .product-card-name {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .product-card-price {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .product-card-original-price {
    color: #71717a;
  }

  :root:not([data-theme="light"]) .product-card-model {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .card-color-dot {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  }

  :root:not([data-theme="light"]) .card-color-dot.active {
    z-index: 2;
    transform: scale(1.1);
    box-shadow: 0 0 0 1.5px var(--color-bg, #09090b),
                0 0 0 2.8px #fb01a4,
                0 0 7px rgba(251, 1, 164, 0.85),
                0 0 16px rgba(251, 1, 164, 0.45) !important;
  }

  :root:not([data-theme="light"]) .card-color-thumb {
    background: #18181c;
    border: 1.5px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  :root:not([data-theme="light"]) .card-color-thumb:hover {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }

  :root:not([data-theme="light"]) .card-color-thumb.active {
    border-color: #fb01a4 !important;
    box-shadow: 0 0 0 1.5px #fb01a4, 0 0 8px rgba(251, 1, 164, 0.75), 0 4px 16px rgba(251, 1, 164, 0.45) !important;
  }

  /* Product Detail Page & Modals */
  :root:not([data-theme="light"]) .modal-container {
    background: #161619;
    color: #f4f4f6;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  :root:not([data-theme="light"]) #product-detail-modal,
  :root:not([data-theme="light"]) #pdp-modal-container {
    background: #09090b !important;
    color: #f4f4f6;
    border: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .pdp-back-btn,
  :root:not([data-theme="light"]) .pdp-share-pill-btn {
    background: rgba(255, 255, 255, 0.07);
    color: #f4f4f6;
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  :root:not([data-theme="light"]) .pdp-back-btn:hover,
  :root:not([data-theme="light"]) .pdp-share-pill-btn:hover {
    background: rgba(244, 70, 158, 0.16);
    border-color: rgba(244, 70, 158, 0.45);
    color: #f4469e;
  }

  :root:not([data-theme="light"]) .modal-action-btn,
  :root:not([data-theme="light"]) .modal-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #f4f4f6;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  :root:not([data-theme="light"]) .modal-close-btn {
    color: #f4469e;
  }

  :root:not([data-theme="light"]) .pdp-product-name {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .pdp-price-current {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .pdp-price-original {
    color: #71717a;
  }

  :root:not([data-theme="light"]) .pdp-colorway-label,
  :root:not([data-theme="light"]) .pdp-model-label {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .pdp-color-swatch-btn {
    background: #222227;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .pdp-color-swatch-btn:hover {
    border-color: #f4469e;
  }

  :root:not([data-theme="light"]) .pdp-color-swatch-btn.active {
    border-color: transparent !important;
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #18181c,
                0 0 0 3.5px #fb01a4,
                0 0 8px rgba(251, 1, 164, 0.8),
                0 0 18px rgba(251, 1, 164, 0.45) !important;
  }

  :root:not([data-theme="light"]) .pdp-custom-select,
  :root:not([data-theme="light"]) #pdp-model-dropdown,
  :root:not([data-theme="light"]) .pdp-single-model-pill {
    background: #222227 !important;
    color: #f4f4f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .pdp-custom-select:focus,
  :root:not([data-theme="light"]) #pdp-model-dropdown:focus {
    border-color: #f4469e !important;
    box-shadow: 0 0 0 3px rgba(244, 70, 158, 0.25) !important;
    outline: none !important;
  }

  :root:not([data-theme="light"]) .pdp-custom-select option,
  :root:not([data-theme="light"]) #pdp-model-dropdown option {
    background-color: #1e1e23 !important;
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .pdp-gallery-desktop-main,
  :root:not([data-theme="light"]) .pdp-mobile-carousel-viewport {
    background: linear-gradient(180deg, #1d1b1b 0%, #0b0a0b 50%, #010101 100%) !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .pdp-mobile-carousel-container,
  :root:not([data-theme="light"]) .pdp-mobile-carousel-track,
  :root:not([data-theme="light"]) .pdp-carousel-slide,
  :root:not([data-theme="light"]) .pdp-carousel-slide img {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .pdp-gallery-thumb {
    background: #1e1e23;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  :root:not([data-theme="light"]) .pdp-gallery-thumb.active {
    border-color: #f4469e;
  }

  :root:not([data-theme="light"]) .pdp-feature-row {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 !important;
    color: #d4d4d8 !important;
  }

  :root:not([data-theme="light"]) .pdp-feature-row strong {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .pdp-feature-row svg {
    color: #f4469e !important;
    stroke: currentColor !important;
  }

  :root:not([data-theme="light"]) .pdp-accordion-header {
    color: #f4f4f6;
    border-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .pdp-accordion-content {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .pdp-specs-table th {
    color: #71717a;
    border-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .pdp-specs-table td {
    color: #d4d4d8;
    border-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .pdp-showcase-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  :root:not([data-theme="light"]) .pdp-showcase-title {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .pdp-showcase-viewport {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .pdp-showcase-thumb {
    background: transparent !important;
    border-color: transparent;
  }

  :root:not([data-theme="light"]) .pdp-showcase-thumb.active {
    border-color: #f4469e !important;
    box-shadow: 0 0 0 2px rgba(244, 70, 158, 0.5), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  }

  /* Cart Drawer in Dark Mode */
  :root:not([data-theme="light"]) .cart-drawer {
    background: #161619 !important;
    color: #f4f4f6 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5) !important;
  }

  :root:not([data-theme="light"]) .cart-drawer-header {
    background: #161619 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  }

  :root:not([data-theme="light"]) .cart-drawer-header h3 {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .cart-drawer-header .header-icon-btn {
    color: #ffffff !important;
    opacity: 0.85;
  }

  :root:not([data-theme="light"]) .cart-drawer-header .header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    opacity: 1;
  }

  :root:not([data-theme="light"]) .cart-free-shipping-bar {
    background: #1e1e23 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  :root:not([data-theme="light"]) .cart-free-shipping-bar.is-unlocked {
    background: rgba(45, 106, 79, 0.25) !important;
    border-bottom: 1px solid rgba(74, 222, 128, 0.25) !important;
  }

  :root:not([data-theme="light"]) .cart-free-shipping-bar.is-unlocked .shipping-progress-text {
    color: #86efac !important;
  }

  :root:not([data-theme="light"]) .cart-free-shipping-bar.is-unlocked .shipping-progress-fill {
    background: #22c55e !important;
  }

  :root:not([data-theme="light"]) .shipping-progress-text {
    color: #d4d4d8 !important;
  }

  :root:not([data-theme="light"]) .shipping-progress-text strong {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .shipping-progress-track {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  :root:not([data-theme="light"]) .shipping-progress-fill {
    background: #f4469e !important;
  }

  :root:not([data-theme="light"]) .cart-items-list {
    background: #161619 !important;
  }

  :root:not([data-theme="light"]) .cart-item-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  :root:not([data-theme="light"]) .cart-item-thumb {
    background: #1e1e23 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .cart-item-title {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .cart-item-meta {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .cart-item-price {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .qty-control {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }

  :root:not([data-theme="light"]) .qty-btn {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .qty-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
  }

  :root:not([data-theme="light"]) .qty-val {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .cart-drawer-footer {
    background: #141416 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  }

  :root:not([data-theme="light"]) .cart-summary-row {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .cart-summary-row span:last-child {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .cart-summary-row.total {
    color: #ffffff !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .cart-summary-row.total span {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .cart-social-banner {
    background: rgba(147, 51, 234, 0.14) !important;
    border: 1px solid rgba(168, 85, 247, 0.28) !important;
  }

  :root:not([data-theme="light"]) .cart-social-banner-text {
    color: #e9d5ff !important;
  }

  :root:not([data-theme="light"]) .empty-cart-title {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .empty-cart-desc {
    color: #a1a1aa !important;
  }

  /* Cart & Checkout Promo / Coupon Code in Dark Theme */
  :root:not([data-theme="light"]) .cart-promo-input,
  :root:not([data-theme="light"]) #drawer-promo-input,
  :root:not([data-theme="light"]) #checkout-promo-input,
  :root:not([data-theme="light"]) .promo-input {
    background-color: #222227 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color-scheme: dark !important;
  }

  :root:not([data-theme="light"]) .cart-promo-input::placeholder,
  :root:not([data-theme="light"]) #drawer-promo-input::placeholder,
  :root:not([data-theme="light"]) #checkout-promo-input::placeholder,
  :root:not([data-theme="light"]) .promo-input::placeholder {
    color: #8e8e93 !important;
  }

  :root:not([data-theme="light"]) .cart-promo-input:focus,
  :root:not([data-theme="light"]) #drawer-promo-input:focus,
  :root:not([data-theme="light"]) #checkout-promo-input:focus,
  :root:not([data-theme="light"]) .promo-input:focus {
    border-color: #f951ad !important;
    box-shadow: 0 0 0 3px rgba(249, 81, 173, 0.25) !important;
    background-color: #28282e !important;
  }

  :root:not([data-theme="light"]) .cart-promo-btn,
  :root:not([data-theme="light"]) #drawer-promo-btn,
  :root:not([data-theme="light"]) #checkout-promo-btn,
  :root:not([data-theme="light"]) .promo-apply-btn {
    background: #2a2a32 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }

  :root:not([data-theme="light"]) .cart-promo-btn:hover,
  :root:not([data-theme="light"]) #drawer-promo-btn:hover,
  :root:not([data-theme="light"]) #checkout-promo-btn:hover,
  :root:not([data-theme="light"]) .promo-apply-btn:hover {
    background: #f951ad !important;
    border-color: #f951ad !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(249, 81, 173, 0.35) !important;
  }

  :root:not([data-theme="light"]) .cart-promo-applied-box {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1.5px dashed rgba(34, 197, 94, 0.45) !important;
  }

  :root:not([data-theme="light"]) .cart-promo-desc {
    color: #4ade80 !important;
  }

  :root:not([data-theme="light"]) .cart-promo-remove-btn {
    color: #f87171 !important;
  }

  :root:not([data-theme="light"]) .cart-promo-remove-btn:hover {
    background: rgba(248, 113, 113, 0.15) !important;
  }

  /* Checkout Modal */
  :root:not([data-theme="light"]) #checkout-modal .modal-container,
  :root:not([data-theme="light"]) #checkout-modal-content {
    background: #161619 !important;
    color: #f4f4f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .checkout-main-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-top-eyebrow {
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .checkout-section-heading {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-cart-heading {
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .checkout-label {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .checkout-input,
  :root:not([data-theme="light"]) .checkout-select,
  :root:not([data-theme="light"]) .checkout-textarea,
  :root:not([data-theme="light"]) #cust-name,
  :root:not([data-theme="light"]) #cust-phone,
  :root:not([data-theme="light"]) #cust-city,
  :root:not([data-theme="light"]) #cust-address {
    background-color: #222227 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color-scheme: dark !important;
  }

  :root:not([data-theme="light"]) .checkout-input::placeholder,
  :root:not([data-theme="light"]) #cust-name::placeholder,
  :root:not([data-theme="light"]) #cust-phone::placeholder,
  :root:not([data-theme="light"]) #cust-address::placeholder {
    color: #71717a !important;
  }

  :root:not([data-theme="light"]) .checkout-input:focus,
  :root:not([data-theme="light"]) .checkout-select:focus,
  :root:not([data-theme="light"]) #cust-name:focus,
  :root:not([data-theme="light"]) #cust-phone:focus,
  :root:not([data-theme="light"]) #cust-city:focus,
  :root:not([data-theme="light"]) #cust-address:focus {
    border-color: #f4469e !important;
    box-shadow: 0 0 0 3px rgba(244, 70, 158, 0.25) !important;
    outline: none !important;
  }

  :root:not([data-theme="light"]) .checkout-select option,
  :root:not([data-theme="light"]) #cust-city option {
    background-color: #1e1e23 !important;
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-payment-box {
    background: #1e1e23 !important;
    border: 1px solid rgba(244, 70, 158, 0.35) !important;
  }

  :root:not([data-theme="light"]) .checkout-payment-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-payment-desc {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .checkout-payment-desc strong {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-review-card {
    background: #1a1a1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
  }

  :root:not([data-theme="light"]) .checkout-review-item-name {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-total-row {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .checkout-total-row span:last-child {
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .qpay-order-summary-box,
  :root:not([data-theme="light"]) .chat-order-summary-box {
    background: #1e1e23 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .qpay-summary-num,
  :root:not([data-theme="light"]) .qpay-summary-total,
  :root:not([data-theme="light"]) .chat-order-num {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .chat-steps-box {
    background: #1e1e23 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  :root:not([data-theme="light"]) .chat-steps-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .chat-steps-list {
    color: #d4d4d8 !important;
  }

  :root:not([data-theme="light"]) .chat-steps-list strong {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) #copy-chat-order-btn {
    background: rgba(244, 70, 158, 0.16) !important;
    border-color: #f4469e !important;
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .qpay-social-box {
    background: #1e1e23 !important;
    border: 1px solid rgba(244, 70, 158, 0.25) !important;
  }

  :root:not([data-theme="light"]) .order-summary-box {
    background: #1c1c20;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* Pending Payment Screen & Confirmation Dark Mode */
  :root:not([data-theme="light"]) .pending-clock-badge {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.18) !important;
  }

  :root:not([data-theme="light"]) .pending-eyebrow {
    color: #fbbf24 !important;
  }

  :root:not([data-theme="light"]) .pending-main-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .pending-desc {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .pending-desc strong {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .pending-summary-card {
    background: #1c1c21 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .pending-summary-card span {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .pending-summary-card strong {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .pending-status-pill {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
  }

  :root:not([data-theme="light"]) .pending-status-dot {
    background: #fbbf24 !important;
  }

  :root:not([data-theme="light"]) .pending-total-val {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .pending-btn-pay {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4) !important;
  }

  :root:not([data-theme="light"]) .pending-btn-pay:hover {
    box-shadow: 0 6px 22px rgba(236, 72, 153, 0.55) !important;
  }

  :root:not([data-theme="light"]) .pending-btn-recheck {
    background: #232328 !important;
    color: #f4f4f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  :root:not([data-theme="light"]) .pending-btn-recheck:hover {
    background: #2c2c34 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) .pending-social-box {
    background: #1c1c21 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .pending-social-box-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .pending-social-box-desc {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .pending-back-btn {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .pending-back-btn:hover {
    color: #ffffff !important;
  }

  /* Checkout Payment Option Cards Dark Mode */
  :root:not([data-theme="light"]) .checkout-payment-option-card {
    background: #1c1c21 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  }

  :root:not([data-theme="light"]) .checkout-payment-option-card.is-selected {
    background: rgba(244, 70, 158, 0.12) !important;
    border: 2px solid #ec4899 !important;
  }

  :root:not([data-theme="light"]) .payment-card-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .payment-card-desc {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .payment-pill {
    background: #25252b !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .payment-badge-muted {
    background: #25252b !important;
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .chat-order-summary-box {
    background: #1c1c21 !important;
    border: 1px solid rgba(216, 70, 239, 0.3) !important;
  }

  :root:not([data-theme="light"]) .chat-order-num {
    color: #f472b6 !important;
  }

  :root:not([data-theme="light"]) .chat-steps-box {
    background: #1c1c21 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  :root:not([data-theme="light"]) .chat-steps-title {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .chat-steps-list {
    color: #a1a1aa !important;
  }

  :root:not([data-theme="light"]) .chat-steps-list strong {
    color: #ffffff !important;
  }

  :root:not([data-theme="light"]) #copy-chat-order-btn {
    background: #25252b !important;
    border: 1px solid rgba(244, 114, 182, 0.4) !important;
    color: #f472b6 !important;
  }

  /* Spotlight Search */
  :root:not([data-theme="light"]) .search-box-card {
    background: #18181c;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  }

  :root:not([data-theme="light"]) #spotlight-search-input {
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .search-result-name {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .search-result-item:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  /* Mobile Drawer Menu */
  :root:not([data-theme="light"]) .mobile-drawer-content {
    background: #161619 !important;
    color: #f4f4f6 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  :root:not([data-theme="light"]) .mobile-nav-item,
  :root:not([data-theme="light"]) .mobile-nav-link {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .mobile-nav-item svg {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .mobile-nav-item:hover,
  :root:not([data-theme="light"]) .mobile-nav-item.active {
    background: rgba(244, 70, 158, 0.14) !important;
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .mobile-nav-item.active svg,
  :root:not([data-theme="light"]) .mobile-nav-item:hover svg {
    color: #f4469e !important;
  }

  :root:not([data-theme="light"]) .mobile-drawer-close-btn {
    background: #242428 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .mobile-drawer-content .btn-primary {
    background: #f951ad !important;
    color: #ffffff !important;
    border: 1px solid #f951ad !important;
    box-shadow: 0 4px 14px rgba(249, 81, 173, 0.35) !important;
  }

  :root:not([data-theme="light"]) .mobile-drawer-content .social-follow-btn {
    background: #222227 !important;
    color: #f4f4f6 !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  /* Terms / Policy Modal */
  :root:not([data-theme="light"]) #terms-modal .modal-container,
  :root:not([data-theme="light"]) .policy-modal-card {
    background: #161619 !important;
    color: #f4f4f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  :root:not([data-theme="light"]) .policy-panel > div {
    background: #1e1e24 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #d4d4d8 !important;
  }

  :root:not([data-theme="light"]) .policy-panel h4 {
    color: #f4f4f6 !important;
  }

  :root:not([data-theme="light"]) .policy-panel p {
    color: #a1a1aa !important;
  }

  /* Footer */
  :root:not([data-theme="light"]) .zolea-footer {
    background: #0d0d10;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .footer-column h4 {
    color: #f4f4f6;
  }

  :root:not([data-theme="light"]) .footer-link {
    color: #a1a1aa;
  }

  :root:not([data-theme="light"]) .footer-link:hover {
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .footer-bottom {
    border-color: rgba(255, 255, 255, 0.08);
    color: #71717a;
  }

  /* Floating Social Widget */
  :root:not([data-theme="light"]) .floating-social-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .floating-social-item {
    color: #ffffff;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .floating-social-trigger {
    background: rgba(20, 20, 26, 0.72) !important;
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    color: #f4f4f6 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .floating-social-trigger:hover {
    background: rgba(28, 28, 36, 0.9) !important;
    border-color: rgba(249, 81, 173, 0.5) !important;
    box-shadow: none !important;
  }

  :root:not([data-theme="light"]) .chat-trigger-pulse {
    border-color: #161619 !important;
    box-shadow: none !important;
  }

  /* Badges */
  :root:not([data-theme="light"]) .badge-pill.new {
    background-color: rgba(251, 146, 60, 0.18);
    color: #fdba74;
    border-color: rgba(251, 146, 60, 0.3);
  }

  :root:not([data-theme="light"]) .badge-pill.bestseller {
    background-color: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
  }

  :root:not([data-theme="light"]) .badge-pill.magsafe {
    background-color: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
  }

  :root:not([data-theme="light"]) .badge-pill.luxury {
    background-color: rgba(255, 255, 255, 0.15);
    color: #f4f4f6;
  }
}

/* 3. Explicit [data-theme="dark"] Rules (when user or system sets data-theme="dark") */
[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

[data-theme="dark"] .hero-carousel-section,
[data-theme="dark"] .hero-carousel-container,
[data-theme="dark"] .hero-carousel-track,
[data-theme="dark"] .hero-slide-bg {
  background: #09090b;
}

[data-theme="dark"] .zolea-header,
[data-theme="dark"] .zolea-header.scrolled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .header-inner,
[data-theme="dark"] .header-inner:hover,
[data-theme="dark"] .zolea-header.scrolled .header-inner {
  background: rgba(20, 20, 26, 0.48) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
}

[data-theme="dark"] .header-pill,
[data-theme="dark"] .header-pill:hover,
[data-theme="dark"] .zolea-header.scrolled .header-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-theme="dark"] .header-border-beam-container {
  filter: drop-shadow(0 0 10px rgba(255, 42, 157, 1))
          drop-shadow(0 0 22px rgba(255, 42, 157, 0.85))
          drop-shadow(0 0 40px rgba(255, 42, 157, 0.55));
}

[data-theme="dark"] .nav-link.active::after {
  background-color: #ffffff;
}

[data-theme="dark"] .mobile-menu-btn {
  color: #f1f5f9;
}

[data-theme="dark"] .nav-link {
  color: #e4e4e7;
}

[data-theme="dark"] .header-icon-btn {
  color: #e4e4e7;
}

[data-theme="dark"] .currency-toggle-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #f4f4f6;
  border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .currency-toggle-btn:hover {
  background: rgba(244, 70, 158, 0.2);
  border-color: #f4469e;
  color: #f4469e;
}

[data-theme="dark"] .brand-pills-wrapper {
  background: rgba(26, 26, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .brand-pill {
  color: #a1a1aa;
}

[data-theme="dark"] .brand-pill:hover {
  color: #ffffff;
}

[data-theme="dark"] .brand-pill.active {
  background: #f4469e !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(244, 70, 158, 0.45);
}

[data-theme="dark"] .mobile-chips-wrapper {
  background: transparent;
}

[data-theme="dark"] .mobile-chip {
  background: #1e1e23;
  color: #d4d4d8;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

[data-theme="dark"] .mobile-chip:hover {
  border-color: rgba(244, 70, 158, 0.4);
  color: #ffffff;
}

[data-theme="dark"] .mobile-chip.active {
  background: #f4469e !important;
  color: #ffffff !important;
  border-color: #f4469e !important;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(244, 70, 158, 0.45);
}

[data-theme="dark"] .catalog-section {
  background-color: var(--color-bg);
}

[data-theme="dark"] .catalog-title-wrap h2 {
  color: #ffffff !important;
}

[data-theme="dark"] .catalog-subtitle {
  color: #a1a1aa !important;
}

[data-theme="dark"] .catalog-sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 24px 0 0 !important;
}

[data-theme="dark"] .sidebar-title {
  color: #f4f4f6;
}

[data-theme="dark"] .sidebar-group-title {
  color: #71717a;
}

[data-theme="dark"] .model-nav-item {
  color: #a1a1aa;
}

[data-theme="dark"] .model-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f4f4f6;
}

[data-theme="dark"] .model-nav-item.active {
  background: rgba(244, 70, 158, 0.16);
  color: #f4469e;
}

[data-theme="dark"] .catalog-sort-select,
[data-theme="dark"] .sort-select,
[data-theme="dark"] #catalog-sort-select {
  background: #1e1e23 !important;
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color-scheme: dark;
}

[data-theme="dark"] .sort-select option,
[data-theme="dark"] #catalog-sort-select option {
  background-color: #1e1e23 !important;
  color: #f4f4f6 !important;
}

[data-theme="dark"] .toolbar-count {
  color: #a1a1aa;
}

[data-theme="dark"] .catalog-empty-card {
  background: #161619 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .catalog-empty-icon-wrap {
  background: #242429 !important;
}

[data-theme="dark"] .catalog-empty-icon {
  color: #f4469e !important;
}

[data-theme="dark"] .catalog-empty-title {
  color: #ffffff !important;
}

[data-theme="dark"] .catalog-empty-desc {
  color: #a1a1aa !important;
}

/* Mobile Share Button Dark Mode */
[data-theme="dark"] .product-card-share-btn {
  background: rgba(28, 28, 34, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  color: #f4f4f6 !important;
}
[data-theme="dark"] .product-card-share-btn:active {
  background: rgba(45, 45, 54, 0.95) !important;
}

[data-theme="dark"] .product-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .product-card:hover {
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] .product-card-top {
  background: transparent !important;
}

[data-theme="dark"] .product-card-img-wrap {
  background: linear-gradient(180deg, #1d1b1b 0%, #0b0a0b 50%, #010101 100%) !important;
}

[data-theme="dark"] .product-card-name {
  color: #f4f4f6;
}

[data-theme="dark"] .product-card-price {
  color: #f4f4f6;
}

[data-theme="dark"] .product-card-original-price {
  color: #71717a;
}

[data-theme="dark"] .product-card-model {
  color: #a1a1aa;
}

[data-theme="dark"] .card-color-dot {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .card-color-dot.active {
  z-index: 2;
  transform: scale(1.1);
  box-shadow: 0 0 0 1.5px var(--color-bg, #09090b),
              0 0 0 2.8px #fb01a4,
              0 0 7px rgba(251, 1, 164, 0.85),
              0 0 16px rgba(251, 1, 164, 0.45) !important;
}

[data-theme="dark"] .card-color-thumb {
  background: #18181c;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .card-color-thumb:hover {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .card-color-thumb.active {
  border-color: #fb01a4 !important;
  box-shadow: 0 0 0 1.5px #fb01a4, 0 0 8px rgba(251, 1, 164, 0.75), 0 4px 16px rgba(251, 1, 164, 0.45) !important;
}

[data-theme="dark"] .modal-container {
  background: #161619;
  color: #f4f4f6;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] #product-detail-modal,
[data-theme="dark"] #pdp-modal-container {
  background: #09090b !important;
  color: #f4f4f6;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .pdp-back-btn,
[data-theme="dark"] .pdp-share-pill-btn {
  background: rgba(255, 255, 255, 0.07);
  color: #f4f4f6;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .pdp-back-btn:hover,
[data-theme="dark"] .pdp-share-pill-btn:hover {
  background: rgba(244, 70, 158, 0.16);
  border-color: rgba(244, 70, 158, 0.45);
  color: #f4469e;
}

[data-theme="dark"] .modal-action-btn,
[data-theme="dark"] .modal-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #f4f4f6;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .modal-close-btn {
  color: #f4469e;
}

[data-theme="dark"] .pdp-product-name {
  color: #f4f4f6;
}

[data-theme="dark"] .pdp-price-current {
  color: #f4f4f6;
}

[data-theme="dark"] .pdp-price-original {
  color: #71717a;
}

[data-theme="dark"] .pdp-colorway-label,
[data-theme="dark"] .pdp-model-label {
  color: #a1a1aa;
}

[data-theme="dark"] .pdp-color-swatch-btn {
  background: #222227;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f4f4f6;
}

[data-theme="dark"] .pdp-color-swatch-btn:hover {
  border-color: #f4469e;
}

[data-theme="dark"] .pdp-color-swatch-btn.active {
  border-color: transparent !important;
  transform: scale(1.08);
  box-shadow: 0 0 0 2px #18181c,
              0 0 0 3.5px #fb01a4,
              0 0 8px rgba(251, 1, 164, 0.8),
              0 0 18px rgba(251, 1, 164, 0.45) !important;
}

[data-theme="dark"] .pdp-custom-select,
[data-theme="dark"] #pdp-model-dropdown,
[data-theme="dark"] .pdp-single-model-pill {
  background: #222227 !important;
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color-scheme: dark;
}

[data-theme="dark"] .pdp-custom-select:focus,
[data-theme="dark"] #pdp-model-dropdown:focus {
  border-color: #f4469e !important;
  box-shadow: 0 0 0 3px rgba(244, 70, 158, 0.25) !important;
  outline: none !important;
}

[data-theme="dark"] .pdp-custom-select option,
[data-theme="dark"] #pdp-model-dropdown option {
  background-color: #1e1e23 !important;
  color: #f4f4f6 !important;
}

[data-theme="dark"] .pdp-gallery-desktop-main,
[data-theme="dark"] .pdp-mobile-carousel-viewport {
  background: linear-gradient(180deg, #1d1b1b 0%, #0b0a0b 50%, #010101 100%) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .pdp-mobile-carousel-container,
[data-theme="dark"] .pdp-mobile-carousel-track,
[data-theme="dark"] .pdp-carousel-slide,
[data-theme="dark"] .pdp-carousel-slide img {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .pdp-gallery-thumb {
  background: #1e1e23;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .pdp-gallery-thumb.active {
  border-color: #f4469e;
}

[data-theme="dark"] .pdp-feature-row {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
  color: #d4d4d8 !important;
}

[data-theme="dark"] .pdp-feature-row strong {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .pdp-feature-row svg {
  color: #f4469e !important;
  stroke: currentColor !important;
}

[data-theme="dark"] .pdp-accordion-header {
  color: #f4f4f6;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pdp-accordion-content {
  color: #a1a1aa;
}

[data-theme="dark"] .pdp-specs-table th {
  color: #71717a;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pdp-specs-table td {
  color: #d4d4d8;
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .pdp-showcase-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

[data-theme="dark"] .pdp-showcase-title {
  color: #ffffff !important;
}

[data-theme="dark"] .pdp-showcase-viewport {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .pdp-showcase-thumb {
  background: transparent !important;
  border-color: transparent;
}

[data-theme="dark"] .pdp-showcase-thumb.active {
  border-color: #f4469e !important;
  box-shadow: 0 0 0 2px rgba(244, 70, 158, 0.5), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .cart-drawer {
  background: #161619 !important;
  color: #f4f4f6 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .cart-drawer-header {
  background: #161619 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .cart-drawer-header h3 {
  color: #ffffff !important;
}

[data-theme="dark"] .cart-drawer-header .header-icon-btn {
  color: #ffffff !important;
  opacity: 0.85;
}

[data-theme="dark"] .cart-drawer-header .header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  opacity: 1;
}

[data-theme="dark"] .cart-free-shipping-bar {
  background: #1e1e23 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cart-free-shipping-bar.is-unlocked {
  background: rgba(45, 106, 79, 0.25) !important;
  border-bottom: 1px solid rgba(74, 222, 128, 0.25) !important;
}

[data-theme="dark"] .cart-free-shipping-bar.is-unlocked .shipping-progress-text {
  color: #86efac !important;
}

[data-theme="dark"] .cart-free-shipping-bar.is-unlocked .shipping-progress-fill {
  background: #22c55e !important;
}

[data-theme="dark"] .shipping-progress-text {
  color: #d4d4d8 !important;
}

[data-theme="dark"] .shipping-progress-text strong {
  color: #ffffff !important;
}

[data-theme="dark"] .shipping-progress-track {
  background: rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .shipping-progress-fill {
  background: #f4469e !important;
}

[data-theme="dark"] .cart-items-list {
  background: #161619 !important;
}

[data-theme="dark"] .cart-item-card {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .cart-item-thumb {
  background: #1e1e23 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cart-item-title {
  color: #ffffff !important;
}

[data-theme="dark"] .cart-item-meta {
  color: #a1a1aa !important;
}

[data-theme="dark"] .cart-item-price {
  color: #ffffff !important;
}

[data-theme="dark"] .qty-control {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

[data-theme="dark"] .qty-btn {
  color: #ffffff !important;
}

[data-theme="dark"] .qty-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .qty-val {
  color: #ffffff !important;
}

[data-theme="dark"] .cart-drawer-footer {
  background: #141416 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
}

[data-theme="dark"] .cart-summary-row {
  color: #a1a1aa !important;
}

[data-theme="dark"] .cart-summary-row span:last-child {
  color: #ffffff !important;
}

[data-theme="dark"] .cart-summary-row.total {
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .cart-summary-row.total span {
  color: #ffffff !important;
}

[data-theme="dark"] .cart-social-banner {
  background: rgba(147, 51, 234, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.28) !important;
}

[data-theme="dark"] .cart-social-banner-text {
  color: #e9d5ff !important;
}

[data-theme="dark"] .empty-cart-title {
  color: #ffffff !important;
}

[data-theme="dark"] .empty-cart-desc {
  color: #a1a1aa !important;
}

/* Cart & Checkout Promo / Coupon Code in Dark Theme */
[data-theme="dark"] .cart-promo-input,
[data-theme="dark"] #drawer-promo-input,
[data-theme="dark"] #checkout-promo-input,
[data-theme="dark"] .promo-input {
  background-color: #222227 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color-scheme: dark !important;
}

[data-theme="dark"] .cart-promo-input::placeholder,
[data-theme="dark"] #drawer-promo-input::placeholder,
[data-theme="dark"] #checkout-promo-input::placeholder,
[data-theme="dark"] .promo-input::placeholder {
  color: #8e8e93 !important;
}

[data-theme="dark"] .cart-promo-input:focus,
[data-theme="dark"] #drawer-promo-input:focus,
[data-theme="dark"] #checkout-promo-input:focus,
[data-theme="dark"] .promo-input:focus {
  border-color: #f951ad !important;
  box-shadow: 0 0 0 3px rgba(249, 81, 173, 0.25) !important;
  background-color: #28282e !important;
}

[data-theme="dark"] .cart-promo-btn,
[data-theme="dark"] #drawer-promo-btn,
[data-theme="dark"] #checkout-promo-btn,
[data-theme="dark"] .promo-apply-btn {
  background: #2a2a32 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

[data-theme="dark"] .cart-promo-btn:hover,
[data-theme="dark"] #drawer-promo-btn:hover,
[data-theme="dark"] #checkout-promo-btn:hover,
[data-theme="dark"] .promo-apply-btn:hover {
  background: #f951ad !important;
  border-color: #f951ad !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(249, 81, 173, 0.35) !important;
}

[data-theme="dark"] .cart-promo-applied-box {
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1.5px dashed rgba(34, 197, 94, 0.45) !important;
}

[data-theme="dark"] .cart-promo-desc {
  color: #4ade80 !important;
}

[data-theme="dark"] .cart-promo-remove-btn {
  color: #f87171 !important;
}

[data-theme="dark"] .cart-promo-remove-btn:hover {
  background: rgba(248, 113, 113, 0.15) !important;
}

[data-theme="dark"] #checkout-modal .modal-container,
[data-theme="dark"] #checkout-modal-content {
  background: #161619 !important;
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .checkout-main-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-top-eyebrow {
  color: #f4469e !important;
}

[data-theme="dark"] .checkout-section-heading {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-cart-heading {
  color: #f4469e !important;
}

[data-theme="dark"] .checkout-label {
  color: #a1a1aa !important;
}

[data-theme="dark"] .checkout-input,
[data-theme="dark"] .checkout-select,
[data-theme="dark"] .checkout-textarea,
[data-theme="dark"] #cust-name,
[data-theme="dark"] #cust-phone,
[data-theme="dark"] #cust-city,
[data-theme="dark"] #cust-address {
  background-color: #222227 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color-scheme: dark !important;
}

[data-theme="dark"] .checkout-input::placeholder,
[data-theme="dark"] #cust-name::placeholder,
[data-theme="dark"] #cust-phone::placeholder,
[data-theme="dark"] #cust-address::placeholder {
  color: #71717a !important;
}

[data-theme="dark"] .checkout-input:focus,
[data-theme="dark"] .checkout-select:focus,
[data-theme="dark"] #cust-name:focus,
[data-theme="dark"] #cust-phone:focus,
[data-theme="dark"] #cust-city:focus,
[data-theme="dark"] #cust-address:focus {
  border-color: #f4469e !important;
  box-shadow: 0 0 0 3px rgba(244, 70, 158, 0.25) !important;
  outline: none !important;
}

[data-theme="dark"] .checkout-select option,
[data-theme="dark"] #cust-city option {
  background-color: #1e1e23 !important;
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-payment-box {
  background: #1e1e23 !important;
  border: 1px solid rgba(244, 70, 158, 0.35) !important;
}

[data-theme="dark"] .checkout-payment-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-payment-desc {
  color: #a1a1aa !important;
}

[data-theme="dark"] .checkout-payment-desc strong {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-review-card {
  background: #1a1a1e !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .checkout-review-item-name {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-total-row {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .checkout-total-row span:last-child {
  color: #f4469e !important;
}

[data-theme="dark"] .qpay-order-summary-box,
[data-theme="dark"] .chat-order-summary-box {
  background: #1e1e23 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .qpay-summary-num,
[data-theme="dark"] .qpay-summary-total,
[data-theme="dark"] .chat-order-num {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .chat-steps-box {
  background: #1e1e23 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .chat-steps-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .chat-steps-list {
  color: #d4d4d8 !important;
}

[data-theme="dark"] .chat-steps-list strong {
  color: #f4f4f6 !important;
}

[data-theme="dark"] #copy-chat-order-btn {
  background: rgba(244, 70, 158, 0.16) !important;
  border-color: #f4469e !important;
  color: #f4469e !important;
}

[data-theme="dark"] .qpay-social-box {
  background: #1e1e23 !important;
  border: 1px solid rgba(244, 70, 158, 0.25) !important;
}

[data-theme="dark"] .order-summary-box {
  background: #1c1c20;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Pending Payment Screen & Confirmation Dark Mode */
[data-theme="dark"] .pending-clock-badge {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.18) !important;
}

[data-theme="dark"] .pending-eyebrow {
  color: #fbbf24 !important;
}

[data-theme="dark"] .pending-main-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .pending-desc {
  color: #a1a1aa !important;
}

[data-theme="dark"] .pending-desc strong {
  color: #ffffff !important;
}

[data-theme="dark"] .pending-summary-card {
  background: #1c1c21 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .pending-summary-card span {
  color: #a1a1aa !important;
}

[data-theme="dark"] .pending-summary-card strong {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .pending-status-pill {
  background: rgba(245, 158, 11, 0.18) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

[data-theme="dark"] .pending-status-dot {
  background: #fbbf24 !important;
}

[data-theme="dark"] .pending-total-val {
  color: #ffffff !important;
}

[data-theme="dark"] .pending-btn-pay {
  background: linear-gradient(135deg, #ec4899, #db2777) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4) !important;
}

[data-theme="dark"] .pending-btn-pay:hover {
  box-shadow: 0 6px 22px rgba(236, 72, 153, 0.55) !important;
}

[data-theme="dark"] .pending-btn-recheck {
  background: #232328 !important;
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] .pending-btn-recheck:hover {
  background: #2c2c34 !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .pending-social-box {
  background: #1c1c21 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .pending-social-box-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .pending-social-box-desc {
  color: #a1a1aa !important;
}

[data-theme="dark"] .pending-back-btn {
  color: #a1a1aa !important;
}

[data-theme="dark"] .pending-back-btn:hover {
  color: #ffffff !important;
}

/* Checkout Payment Option Cards Dark Mode */
[data-theme="dark"] .checkout-payment-option-card {
  background: #1c1c21 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .checkout-payment-option-card.is-selected {
  background: rgba(244, 70, 158, 0.12) !important;
  border: 2px solid #ec4899 !important;
}

[data-theme="dark"] .payment-card-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .payment-card-desc {
  color: #a1a1aa !important;
}

[data-theme="dark"] .payment-pill {
  background: #25252b !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .payment-badge-muted {
  background: #25252b !important;
  color: #a1a1aa !important;
}

[data-theme="dark"] .chat-order-summary-box {
  background: #1c1c21 !important;
  border: 1px solid rgba(216, 70, 239, 0.3) !important;
}

[data-theme="dark"] .chat-order-num {
  color: #f472b6 !important;
}

[data-theme="dark"] .chat-steps-box {
  background: #1c1c21 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .chat-steps-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .chat-steps-list {
  color: #a1a1aa !important;
}

[data-theme="dark"] .chat-steps-list strong {
  color: #ffffff !important;
}

[data-theme="dark"] #copy-chat-order-btn {
  background: #25252b !important;
  border: 1px solid rgba(244, 114, 182, 0.4) !important;
  color: #f472b6 !important;
}

[data-theme="dark"] .search-box-card {
  background: #18181c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] #spotlight-search-input {
  color: #ffffff;
}

[data-theme="dark"] .search-result-name {
  color: #f4f4f6;
}

[data-theme="dark"] .search-result-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mobile-drawer-content {
  background: #161619 !important;
  color: #f4f4f6 !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .mobile-nav-item,
[data-theme="dark"] .mobile-nav-link {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .mobile-nav-item svg {
  color: #a1a1aa;
}

[data-theme="dark"] .mobile-nav-item:hover,
[data-theme="dark"] .mobile-nav-item.active {
  background: rgba(244, 70, 158, 0.14) !important;
  color: #f4469e !important;
}

[data-theme="dark"] .mobile-nav-item.active svg,
[data-theme="dark"] .mobile-nav-item:hover svg {
  color: #f4469e !important;
}

[data-theme="dark"] .mobile-drawer-close-btn {
  background: #242428 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f4f4f6 !important;
}

[data-theme="dark"] .mobile-drawer-content .btn-primary {
  background: #f951ad !important;
  color: #ffffff !important;
  border: 1px solid #f951ad !important;
  box-shadow: 0 4px 14px rgba(249, 81, 173, 0.35) !important;
}

[data-theme="dark"] .mobile-drawer-content .social-follow-btn {
  background: #222227 !important;
  color: #f4f4f6 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

[data-theme="dark"] #terms-modal .modal-container,
[data-theme="dark"] .policy-modal-card {
  background: #161619 !important;
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .policy-panel > div {
  background: #1e1e24 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #d4d4d8 !important;
}

[data-theme="dark"] .policy-panel h4 {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .policy-panel p {
  color: #a1a1aa !important;
}

[data-theme="dark"] .zolea-footer {
  background: #0d0d10;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .footer-column h4 {
  color: #f4f4f6;
}

[data-theme="dark"] .footer-link {
  color: #a1a1aa;
}

[data-theme="dark"] .footer-link:hover {
  color: #ffffff;
}

[data-theme="dark"] .footer-bottom {
  border-color: rgba(255, 255, 255, 0.08);
  color: #71717a;
}

[data-theme="dark"] .floating-social-menu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .floating-social-item {
  color: #ffffff;
  box-shadow: none !important;
}

[data-theme="dark"] .floating-social-trigger {
  background: rgba(20, 20, 26, 0.72) !important;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  color: #f4f4f6 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .floating-social-trigger:hover {
  background: rgba(28, 28, 36, 0.9) !important;
  border-color: rgba(249, 81, 173, 0.5) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .chat-trigger-pulse {
  border-color: #161619 !important;
  box-shadow: none !important;
}

[data-theme="light"] .floating-social-trigger {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  color: #0a0a0c !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: none !important;
}

[data-theme="light"] .floating-social-trigger:hover {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(249, 81, 173, 0.45) !important;
  box-shadow: none !important;
}

[data-theme="light"] .chat-trigger-pulse {
  border-color: #ffffff !important;
  box-shadow: none !important;
}

[data-theme="dark"] .badge-pill.new {
  background-color: rgba(251, 146, 60, 0.18);
  color: #fdba74;
  border-color: rgba(251, 146, 60, 0.3);
}

[data-theme="dark"] .badge-pill.bestseller {
  background-color: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .badge-pill.magsafe {
  background-color: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .badge-pill.luxury {
  background-color: rgba(255, 255, 255, 0.15);
  color: #f4f4f6;
}

/* ==========================================================================
   3. Theme Toggle Buttons & Switcher UI
   ========================================================================== */
.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #1a1a1f;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  color: #f4469e;
  background-color: rgba(244, 70, 158, 0.12);
}

.theme-toggle-btn:active {
  transform: scale(0.92);
}

.theme-icon-sun {
  display: none;
  width: 19px;
  height: 19px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-icon-moon {
  display: block;
  width: 19px;
  height: 19px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* System Dark Mode (when not forced light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle-btn {
    color: #e4e4e7;
  }
  :root:not([data-theme="light"]) .theme-toggle-btn:hover {
    color: #f4469e;
    background-color: rgba(244, 70, 158, 0.16);
  }
  :root:not([data-theme="light"]) .theme-icon-sun {
    display: block;
  }
  :root:not([data-theme="light"]) .theme-icon-moon {
    display: none;
  }
}

/* Explicit Dark Theme */
[data-theme="dark"] .theme-toggle-btn {
  color: #e4e4e7;
}

[data-theme="dark"] .theme-toggle-btn:hover {
  color: #f4469e;
  background-color: rgba(244, 70, 158, 0.16);
}

[data-theme="dark"] .theme-icon-sun {
  display: block;
}

[data-theme="dark"] .theme-icon-moon {
  display: none;
}

/* Explicit Light Theme (even if OS is dark) */
[data-theme="light"] .theme-toggle-btn {
  color: #1a1a1f;
}

[data-theme="light"] .theme-icon-sun {
  display: none !important;
}

[data-theme="light"] .theme-icon-moon {
  display: block !important;
}



/* Explicit Light Theme: Product Card Image Wrap & PDP Gallery Studio Gradient */
[data-theme="light"] .product-card-img-wrap,
:root[data-theme="light"] .product-card-img-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 50%, #e2e2e8 100%) !important;
}

[data-theme="light"] .pdp-gallery-desktop-main,
:root[data-theme="light"] .pdp-gallery-desktop-main,
[data-theme="light"] .pdp-mobile-carousel-viewport,
:root[data-theme="light"] .pdp-mobile-carousel-viewport {
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 50%, #e2e2e8 100%) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Explicit Light Theme: PDP Custom Select & Feature Rows */
[data-theme="light"] .pdp-custom-select,
[data-theme="light"] #pdp-model-dropdown {
  background-color: #ffffff !important;
  color: #1d1d1f !important;
  border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
  color-scheme: light;
}

[data-theme="light"] .pdp-custom-select option,
[data-theme="light"] #pdp-model-dropdown option {
  background-color: #ffffff !important;
  color: #1d1d1f !important;
}

[data-theme="light"] .pdp-feature-row {
  background: transparent !important;
  border: none !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="light"] .pdp-feature-row strong {
  color: #1d1d1f !important;
}

[data-theme="light"] .pdp-feature-row svg {
  color: #0a0a0c !important;
  stroke: currentColor !important;
}

/* Explicit Light Theme: Checkout Modal */
[data-theme="light"] #checkout-modal .modal-container,
[data-theme="light"] #checkout-modal-content {
  background: #ffffff !important;
  color: #0a0a0c !important;
}

[data-theme="light"] .checkout-main-title {
  color: #0a0a0c !important;
}

[data-theme="light"] .checkout-top-eyebrow {
  color: #391F85 !important;
}

[data-theme="light"] .checkout-section-heading {
  color: #0a0a0c !important;
}

[data-theme="light"] .checkout-cart-heading {
  color: #391F85 !important;
}

[data-theme="light"] .checkout-label {
  color: #1a1a1f !important;
}

[data-theme="light"] .checkout-input,
[data-theme="light"] .checkout-select,
[data-theme="light"] #cust-name,
[data-theme="light"] #cust-phone,
[data-theme="light"] #cust-city,
[data-theme="light"] #cust-address {
  background-color: #ffffff !important;
  color: #0a0a0c !important;
  border: 1px solid var(--color-border-medium) !important;
  color-scheme: light !important;
}

[data-theme="light"] .checkout-payment-box {
  background: #faf5ff !important;
  border: 1.5px solid #d8b4fe !important;
}

[data-theme="light"] .checkout-payment-title {
  color: #0a0a0c !important;
}

[data-theme="light"] .checkout-payment-desc {
  color: #475569 !important;
}

[data-theme="light"] .checkout-review-card {
  background: var(--color-bg-subtle) !important;
}

[data-theme="light"] .checkout-review-item-name {
  color: #0a0a0c !important;
}

[data-theme="light"] .checkout-total-row {
  color: #0a0a0c !important;
}

/* Mobile Drawer Theme Row */
.mobile-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  border: 1px solid var(--color-border-subtle);
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s;
}

.mobile-theme-row:hover {
  background: rgba(244, 70, 158, 0.06);
  border-color: rgba(244, 70, 158, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mobile-theme-row {
    background: rgba(255, 255, 255, 0.05);
  }
}

[data-theme="dark"] .mobile-theme-row {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-theme-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.mobile-theme-pill {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(244, 70, 158, 0.15);
  color: #f4469e;
  border: 1px solid rgba(244, 70, 158, 0.3);
}

/* 3-Column Grid Hero Banner Product — Frameless, Sharp Corners & Product Studio Gradient */
[data-theme="dark"] .grid-hero-banner-card {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #1d1b1b 0%, #0b0a0b 50%, #010101 100%) !important;
}

[data-theme="dark"] .grid-hero-banner-card:hover {
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .grid-hero-banner-card,
:root[data-theme="light"] .grid-hero-banner-card {
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 50%, #e2e2e8 100%) !important;
}

[data-theme="light"] .grid-hero-banner-card:hover,
:root[data-theme="light"] .grid-hero-banner-card:hover {
  border: none !important;
  box-shadow: none !important;
}

/* Day Mode (Light Theme): PNG Studio Mode Adaptive Typography & Overlays */
[data-theme="light"] .grid-hero-banner-card.is-png-mode,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode {
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f6 50%, #e2e2e8 100%) !important;
  color: #09090b !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-title,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-title {
  color: #09090b !important;
  text-shadow: none !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-subtitle,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-subtitle {
  color: #4b5563 !important;
  text-shadow: none !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-price-tag .price-current,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-price-tag .price-current {
  color: #09090b !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-price-tag .price-original,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-price-tag .price-original {
  color: #8e8e93 !important;
}

.grid-banner-overlay,
[data-theme="light"] .grid-hero-banner-card .grid-banner-overlay,
:root[data-theme="light"] .grid-hero-banner-card .grid-banner-overlay {
  display: none !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #09090b !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge h4,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge h4 {
  color: #09090b !important;
}

[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge p,
:root[data-theme="light"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge p {
  color: #52525b !important;
}

/* Night Mode (Dark Theme): PNG Studio Mode Adaptive Typography & Overlays */
[data-theme="dark"] .grid-hero-banner-card.is-png-mode {
  background: linear-gradient(180deg, #1d1b1b 0%, #0b0a0b 50%, #010101 100%) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-title {
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-subtitle {
  color: #d4d4d8 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-price-tag .price-current {
  color: #ffffff !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-price-tag .price-original {
  color: #71717a !important;
}

[data-theme="dark"] .grid-hero-banner-card .grid-banner-overlay {
  display: none !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge h4 {
  color: #ffffff !important;
}

[data-theme="dark"] .grid-hero-banner-card.is-png-mode .grid-banner-floating-badge p {
  color: #cbd5e1 !important;
}

/* Luxury Share Sheet Modal Dark Theme */
[data-theme="dark"] .share-sheet-container {
  background: rgba(22, 22, 26, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .share-sheet-handle {
  background: rgba(255, 255, 255, 0.22) !important;
}

[data-theme="dark"] .share-sheet-title {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .share-sheet-close {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f4f6 !important;
}

[data-theme="dark"] .share-sheet-close:active {
  background: rgba(255, 255, 255, 0.16) !important;
}

[data-theme="dark"] .share-sheet-preview {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .share-sheet-img-wrap {
  background: #141418 !important;
}

[data-theme="dark"] .share-sheet-info h4 {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .copy-circle,
[data-theme="dark"] .more-circle {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #f4f4f6 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .share-action-text {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .share-sheet-cancel {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f4f4f6 !important;
}

[data-theme="dark"] .share-sheet-cancel:active {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ==========================================================================
   DARK MODE OVERRIDES: MOBILE DUAL FILTER CAPSULES & BOTTOM SHEET
   ========================================================================== */
[data-theme="dark"] .mobile-filter-pill {
  background: rgba(20, 20, 26, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4), inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .mobile-filter-pill:active {
  background: rgba(26, 26, 34, 0.65) !important;
}

[data-theme="dark"] .mobile-pill-icon-circle {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-pill-label {
  color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .mobile-pill-value {
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-filter-sheet-overlay {
  background: rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .mobile-filter-sheet-content {
  background: rgba(18, 18, 24, 0.52) !important;
  border-top-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.6), inset 0 1.5px 2px rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .mobile-sheet-handle {
  background: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="dark"] .mobile-sheet-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .mobile-sheet-title {
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-sheet-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-sheet-search-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .mobile-sheet-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .mobile-sheet-item:last-child {
  border-bottom: none !important;
}

[data-theme="dark"] .mobile-sheet-item:active {
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .mobile-sheet-item.active {
  background: rgba(244, 70, 158, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .mobile-sheet-item-name {
  color: #f4f4f6 !important;
}

[data-theme="dark"] .mobile-sheet-item.active .mobile-sheet-item-name {
  color: #ff66b2 !important;
}

[data-theme="dark"] .mobile-sheet-check-icon {
  color: #ff66b2 !important;
}