/* ================================================================
   FRONTEND LIGHT MODE — Admin Dashboard White Theme
   Applies to ALL user-facing pages when body.light-mode is set.
   Design tokens match admin-layout.css + admin-modern.css exactly.

   Tokens:
     --bg-page : #f8f9fa
     --bg-card : #ffffff
     --text-1  : #1a1d21
     --text-2  : #6c757d
     --border  : rgba(primary,.06)
     --shadow  : 0 4px 24px rgba(primary,.06)
     --radius  : 16-24px
   ================================================================ */

/* ──────────────────────────────────────────────────────────────
   §0  GLOBAL PAGE BACKGROUND & BODY TEXT
   ────────────────────────────────────────────────────────────── */
body.light-mode {
    background: #f8f9fa !important;
    color: #1a1d21 !important;
}

/* All major page wrapper classes */
body.light-mode .hp,
body.light-mode .sp,
body.light-mode .cp,
body.light-mode .ck,
body.light-mode .pdp,
body.light-mode .ct,
body.light-mode .ab,
body.light-mode .orders-page,
body.light-mode .success-page,
body.light-mode .payment-page,
body.light-mode .failed-page,
body.light-mode .order-page {
    background: #f8f9fa !important;
    color: #1a1d21 !important;
}

/* ──────────────────────────────────────────────────────────────
   §1  SUPPRESS DARK SCI-FI EFFECTS
   (mesh grids, scan lines, noise grain, dark overlays)
   ────────────────────────────────────────────────────────────── */
body.light-mode .cp-mesh,
body.light-mode .cp-grid,
body.light-mode .ck-mesh,
body.light-mode .ck-grid,
body.light-mode .sp-header-scan,
body.light-mode .sp-header-grain,
body.light-mode .ct-hero-scan,
body.light-mode .ct-hero-grain,
body.light-mode .ab-hero-scan,
body.light-mode .ab-hero-grain,
body.light-mode .pdp-img-scan,
body.light-mode .hero-scan,
body.light-mode .hero-noise,
body.light-mode .hero-grid,
body.light-mode .hero-corner-tl,
body.light-mode .hero-corner-tr,
body.light-mode .hero-corner-bl,
body.light-mode .hero-corner-br {
    opacity: 0 !important;
    animation: none !important;
}

/* ──────────────────────────────────────────────────────────────
   §2  NAVBAR — Admin white with primary accent (replaces lavender)
   ────────────────────────────────────────────────────────────── */
body.light-mode .navbar {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 2px 16px rgba(var(--primary-color-rgb), .07), 0 1px 0 rgba(var(--primary-color-rgb), .05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.light-mode .navbar.scrolled {
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .1), 0 1px 0 rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .navbar::before {
    background-image:
        linear-gradient(rgba(var(--primary-color-rgb), .02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-color-rgb), .02) 1px, transparent 1px) !important;
}
/* Nav brand light mode */
body.light-mode .nav-brand,
body.light-mode .nav-brand:visited,
body.light-mode .nav-brand:hover,
body.light-mode .nav-brand:active { color: #1a1d21 !important; }
body.light-mode .nb-name {
    background: linear-gradient(135deg, #1a1d21 10%, var(--button-color, #dc3545) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 6px rgba(var(--primary-color-rgb), 0.25)) !important;
}
body.light-mode .nb-sep   { background: linear-gradient(to bottom, transparent, rgba(26,29,33,0.18) 30%, rgba(26,29,33,0.18) 70%, transparent) !important; }
body.light-mode .nb-icon  { color: var(--button-color, #dc3545) !important; filter: drop-shadow(0 0 4px rgba(var(--primary-color-rgb), 0.4)) !important; }
body.light-mode .nav-menu li a { color: rgba(26, 29, 33, .72) !important; }
body.light-mode .nav-menu li a:hover,
body.light-mode .nav-menu li a.active { color: var(--primary-color) !important; opacity: 1 !important; }
body.light-mode .nav-menu li a::after { background: var(--primary-color) !important; }
body.light-mode .btn-nav-link {
    color: rgba(26, 29, 33, .78) !important;
    background: rgba(var(--primary-color-rgb), .06) !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
}
body.light-mode .btn-nav-link:hover {
    background: rgba(var(--primary-color-rgb), .12) !important;
    border-color: rgba(var(--primary-color-rgb), .22) !important;
}
body.light-mode .btn-nav-secondary { background: var(--primary-color) !important; color: #fff !important; }
body.light-mode .btn-logout {
    color: rgba(26, 29, 33, .78) !important;
    background: rgba(var(--primary-color-rgb), .06) !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
}
body.light-mode .btn-logout:hover { background: rgba(var(--primary-color-rgb), .12) !important; }
body.light-mode .btn-cart {
    background: linear-gradient(135deg, var(--button-color, var(--primary-color)), var(--button-hover-color, var(--primary-color))) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), .28) !important;
}
body.light-mode .btn-cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(var(--primary-color-rgb), .4) !important;
}
body.light-mode .mobile-menu-btn {
    color: #1a1d21 !important;
    background: rgba(var(--primary-color-rgb), .05) !important;
    border-color: rgba(var(--primary-color-rgb), .14) !important;
}
body.light-mode .mobile-menu-btn:hover {
    background: rgba(var(--primary-color-rgb), .10) !important;
    border-color: rgba(var(--primary-color-rgb), .28) !important;
    box-shadow: 0 0 18px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .mobile-menu-btn.is-active {
    background: rgba(var(--primary-color-rgb), .12) !important;
    border-color: rgba(var(--primary-color-rgb), .30) !important;
    box-shadow: 0 0 20px rgba(var(--primary-color-rgb), .10) !important;
}
body.light-mode .hamburger-line {
    background: #1a1d21 !important;
}
body.light-mode .mobile-menu-btn.is-active .hamburger-line {
    background: var(--primary-color) !important;
}
body.light-mode .nav-menu {
    background: #ffffff !important;
    box-shadow: 0 10px 32px rgba(var(--primary-color-rgb), .1), 0 0 0 1px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .nav-menu li { border-bottom-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .nav-menu li a { color: rgba(26, 29, 33, .78) !important; }
body.light-mode .currency-btn {
    background: rgba(var(--primary-color-rgb), .06) !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    color: #1a1d21 !important;
}
body.light-mode .currency-dropdown {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 8px 28px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .currency-option { color: #1a1d21 !important; }
body.light-mode .currency-option:hover { background: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .theme-toggle-btn {
    background: rgba(var(--primary-color-rgb), .06) !important;
    border-color: rgba(var(--primary-color-rgb), .14) !important;
    color: #1a1d21 !important;
}
body.light-mode .theme-toggle-btn:hover {
    background: rgba(var(--primary-color-rgb), .12) !important;
    border-color: rgba(var(--primary-color-rgb), .25) !important;
}
body.light-mode .theme-toggle-btn .theme-icon {
    stroke: #1a1d21;
}

/* ──────────────────────────────────────────────────────────────
   §3  PAGE HERO SECTIONS — Soft white with primary-colour radial glow
   (matches admin page-header-modern: white bg + primary colour accents)
   ────────────────────────────────────────────────────────────── */

/* Shop page header */
body.light-mode .sp-header {
    background:
        radial-gradient(ellipse 80% 130% at 75% -15%, rgba(var(--primary-color-rgb), .13) 0%, transparent 58%),
        radial-gradient(ellipse 45% 65% at -5% 80%, rgba(var(--primary-color-rgb), .07) 0%, transparent 55%),
        #ffffff !important;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), .1) !important;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .sp-header::before {
    background:
        radial-gradient(circle at 80% 20%, rgba(var(--primary-color-rgb), .05) 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, rgba(var(--primary-color-rgb), .03) 0%, transparent 50%) !important;
}
body.light-mode .sp-header .sp-h-label,
body.light-mode .sp-header .sec-label { color: var(--primary-color) !important; }
body.light-mode .sp-header .sec-label-line { background: var(--primary-color) !important; opacity: .35; }
body.light-mode .sp-header-ttl,
body.light-mode .sp-h-title,
body.light-mode .sp-header h1 { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .sp-header .grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 50%, #1a1d21 80%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .sp-header p,
body.light-mode .sp-h-sub { color: #6c757d !important; }
body.light-mode .sp-header .sp-btn-outline {
    border-color: rgba(var(--primary-color-rgb), .28) !important;
    color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .sp-header .sp-btn-outline:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}
/* Device mockup in header — light on white bg */
body.light-mode .sphd-laptop-screen { background: #f0f2f5 !important; }
body.light-mode .sphd-chrome { background: #e2e6ea !important; }
body.light-mode .sphd-content { background: #f8f9fa !important; }

/* Contact hero */
body.light-mode .ct-hero {
    background:
        radial-gradient(ellipse 80% 130% at 75% -15%, rgba(var(--primary-color-rgb), .13) 0%, transparent 58%),
        radial-gradient(ellipse 45% 65% at -5% 80%, rgba(var(--primary-color-rgb), .07) 0%, transparent 55%),
        #ffffff !important;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), .1) !important;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .ct-hero::before {
    background:
        radial-gradient(circle at 85% 30%, rgba(var(--primary-color-rgb), .05) 0%, transparent 50%),
        radial-gradient(circle at 10% 70%, rgba(var(--primary-color-rgb), .03) 0%, transparent 50%) !important;
}
body.light-mode .ct-hero-title { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .ct-hero-title .grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 50%, #1a1d21 80%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .ct-hero-sub { color: #6c757d !important; }
body.light-mode .ct-hero-eyebrow {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}

/* About hero */
body.light-mode .ab-hero {
    background:
        radial-gradient(ellipse 80% 130% at 75% -15%, rgba(var(--primary-color-rgb), .13) 0%, transparent 58%),
        radial-gradient(ellipse 45% 65% at -5% 80%, rgba(var(--primary-color-rgb), .07) 0%, transparent 55%),
        #ffffff !important;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), .1) !important;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .ab-hero::before {
    background:
        radial-gradient(circle at 85% 30%, rgba(var(--primary-color-rgb), .05) 0%, transparent 50%),
        radial-gradient(circle at 10% 70%, rgba(var(--primary-color-rgb), .03) 0%, transparent 50%) !important;
}
body.light-mode .ab-hero-title { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .ab-hero-title .grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 50%, #1a1d21 80%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .ab-hero-sub { color: #6c757d !important; }
body.light-mode .ab-hero-eyebrow {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .ab-btn-outline {
    border-color: rgba(var(--primary-color-rgb), .28) !important;
    color: var(--primary-color) !important;
    background: rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .ab-btn-outline:hover { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; }
body.light-mode .ab-hero-num { color: rgba(var(--primary-color-rgb), .06) !important; opacity: 1 !important; }

/* Product detail breadcrumb + hero */
body.light-mode .pdp-breadcrumb-bar {
    background: rgba(255,255,255,.97) !important;
    border-bottom-color: rgba(var(--primary-color-rgb), .08) !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
}
body.light-mode .pdp-breadcrumb-bar::after {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--primary-color-rgb),.2) 22%, rgba(var(--primary-color-rgb),.2) 78%, transparent 100%) !important;
}
body.light-mode .pdp-bc-back {
    color: rgba(30,30,50,.42) !important;
    border-right-color: rgba(0,0,0,.07) !important;
}
body.light-mode .pdp-bc-back:hover { color: var(--primary-color) !important; }
body.light-mode .pdp-bc-back-arrow {
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.09) !important;
}
body.light-mode .pdp-bc-back:hover .pdp-bc-back-arrow {
    background: rgba(var(--primary-color-rgb),.09) !important;
    border-color: rgba(var(--primary-color-rgb),.22) !important;
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb),.14) !important;
}
body.light-mode .pdp-breadcrumb a { color: rgba(30,30,50,.48) !important; }
body.light-mode .pdp-breadcrumb a:hover { color: var(--primary-color) !important; background: rgba(var(--primary-color-rgb),.07) !important; }
body.light-mode .pdp-breadcrumb-sep { color: rgba(30,30,50,.2) !important; }
body.light-mode .pdp-breadcrumb-cur {
    color: #1a1d21 !important;
    background: rgba(var(--primary-color-rgb),.07) !important;
    border-color: rgba(var(--primary-color-rgb),.18) !important;
    box-shadow: none !important;
}
body.light-mode .pdp-bc-right { border-left-color: rgba(0,0,0,.07) !important; }
body.light-mode .pdp-bc-cat-tag {
    background: rgba(var(--primary-color-rgb),.06) !important;
    border-color: rgba(var(--primary-color-rgb),.16) !important;
}
body.light-mode .pdp-hero {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
body.light-mode .pdp-hero::before {
    /* Subtle warm-white radial glow only — no grid boxes */
    background:
        radial-gradient(ellipse 60% 55% at 100% 0%,   rgba(var(--primary-color-rgb),.06) 0%, transparent 60%),
        radial-gradient(ellipse 45% 40% at 0%   100%,  rgba(var(--primary-color-rgb),.04) 0%, transparent 55%),
        radial-gradient(ellipse 80% 60% at 50%   50%,  rgba(var(--primary-color-rgb),.025) 0%, transparent 70%) !important;
}
/* Kill all dark-themed decorators on the PDP hero in light mode */
body.light-mode .pdp-hero-grid    { display: none !important; }
body.light-mode .pdp-hero-ambient { display: none !important; }
body.light-mode .pdp-gallery-scan { display: none !important; }
body.light-mode .pdp-orb          { display: none !important; }
/* Key info-column text colours */
body.light-mode .pdp-title        { color: #111827 !important; }
body.light-mode .pdp-price        { color: #111827 !important; text-shadow: none !important; }
body.light-mode .pdp-price-unit, body.light-mode .pdp-price-note { color: #6b7280 !important; }
body.light-mode .pdp-desc         { color: #4b5563 !important; }
body.light-mode .pdp-attr         { background: #f9fafb !important; border-color: rgba(0,0,0,.07) !important; }
body.light-mode .pdp-attr-label   { color: #9ca3af !important; }
body.light-mode .pdp-attr-val     { color: #111827 !important; }
body.light-mode .pdp-sec-accent   { color: var(--primary-color) !important; }
body.light-mode .pdp-stock-row    { background: none !important; }
/* Details / tabs section */
body.light-mode .pdp-details { background: #f9fafb !important; border-top: 1px solid rgba(0,0,0,.05); }
/* Related section */
body.light-mode .pdp-related  { background: #f9fafb !important; }

/* ──────────────────────────────────────────────────────────────
   §4  HOME PAGE HERO — Soft white with primary-colour radial glow
   ────────────────────────────────────────────────────────────── */
body.light-mode .hp .hero {
    background:
        radial-gradient(ellipse 90% 110% at 68% -10%, rgba(var(--primary-color-rgb), .13) 0%, transparent 58%),
        radial-gradient(ellipse 50% 65% at -5% 68%, rgba(var(--primary-color-rgb), .08) 0%, transparent 55%),
        #ffffff !important;
    border-bottom: 2px solid rgba(var(--primary-color-rgb), .1) !important;
    border-radius: 0 0 32px 32px;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .hp .hero-bg { background: none !important; animation: none !important; }
body.light-mode .hp .hero-fade-top { background: none !important; }
body.light-mode .hp .hero-fade-left { background: none !important; }
body.light-mode .hp .hero-grid::before {
    background-image:
        repeating-linear-gradient(to right, transparent calc(100%/14 - 1px), rgba(var(--primary-color-rgb), .025) calc(100%/14)),
        repeating-linear-gradient(to bottom, transparent calc(100%/10 - 1px), rgba(var(--primary-color-rgb), .018) calc(100%/10)) !important;
}
body.light-mode .hp .hero-grid::after {
    background: linear-gradient(to top, rgba(var(--primary-color-rgb), .06) 0%, transparent 100%) !important;
}
body.light-mode .hp .hero-title,
body.light-mode .hp .ht-line1 { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .hp .ht-line2 {
    background: linear-gradient(118deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 45%, #1a1d21 80%) !important;
    background-size: 280% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .hp .ht-line3 { color: rgba(var(--primary-color-rgb), .05) !important; }
body.light-mode .hp .hero-desc { color: #6c757d !important; }
body.light-mode .hp .hero-eyebrow {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .hp .hero-sp-txt { color: #6c757d !important; }
body.light-mode .hp .hero-sp-txt strong { color: #1a1d21 !important; }
body.light-mode .hp .hero-sp-sep { background: rgba(0,0,0,.12) !important; }
body.light-mode .hp .hero-av { border-color: rgba(var(--primary-color-rgb), .2) !important; }
body.light-mode .hp .hero-arr {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .hp .hero-arr:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .hp .hero-dot { background: rgba(var(--primary-color-rgb), .2) !important; }
body.light-mode .hp .hero-dot.act { background: var(--primary-color) !important; }

/* Stats strip inside hero */
body.light-mode .hp .hero-stats {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .hp .hero-stats::before {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .12) 20%, rgba(var(--primary-color-rgb), .12) 80%, transparent) !important;
    box-shadow: none !important;
}
body.light-mode .hp .hero-stats::after { background: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .hp .hs-num   { color: #1a1d21 !important; }
body.light-mode .hp .hs-label { color: #6c757d !important; }
body.light-mode .hp .hs-item  { border-right-color: rgba(0,0,0,.08) !important; }
body.light-mode .hp .hs-item:hover { background: rgba(var(--primary-color-rgb), .04) !important; }
body.light-mode .hp .hs-ico {
    background: linear-gradient(145deg, rgba(var(--primary-color-rgb), .1), rgba(var(--primary-color-rgb), .04)) !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), .08) !important;
}

/* PSS card on hero */
body.light-mode .hp .pss-shadow2 { background: rgba(var(--primary-color-rgb), .05) !important; border-color: rgba(var(--primary-color-rgb), .1) !important; }
body.light-mode .hp .pss-shadow3 { background: rgba(var(--primary-color-rgb), .03) !important; border-color: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .hp .pss-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    box-shadow: 0 24px 70px rgba(var(--primary-color-rgb), .12), 0 0 0 1px rgba(var(--primary-color-rgb), .08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.light-mode .hp .pss-card.on {
    border-color: rgba(var(--primary-color-rgb), .32) !important;
    box-shadow: 0 28px 80px rgba(var(--primary-color-rgb), .15), 0 0 0 1px rgba(var(--primary-color-rgb), .14), inset 0 1px 0 #fff, 0 0 55px rgba(var(--primary-color-rgb), .1) !important;
}
/* Light image zone: soft pastel background, product fully visible */
body.light-mode .hp .pss-img { background: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(var(--primary-color-rgb),.08) 0%, #f0f4ff 68%) !important; }
body.light-mode .hp .pss-img-backdrop { background: radial-gradient(ellipse 55% 60% at 50% 46%, rgba(var(--primary-color-rgb),.16) 0%, rgba(var(--primary-color-rgb),.04) 50%, transparent 72%) !important; }
body.light-mode .hp .pss-img-mist { background: linear-gradient(0deg, #f8faff 0%, rgba(240,244,255,.6) 40%, rgba(240,244,255,0) 100%) !important; }
body.light-mode .hp .pss-img-scan { background: linear-gradient(90deg,transparent 0%,rgba(var(--primary-color-rgb),.35) 25%,rgba(var(--primary-color-rgb),.35) 75%,transparent 100%) !important; }
/* Badges on image: clean white pill */
body.light-mode .hp .pss-badge-new,
body.light-mode .hp .pss-badge-stars { background: #ffffff !important; border-color: rgba(0,0,0,.09) !important; color: #1a1d21 !important; box-shadow: 0 2px 10px rgba(0,0,0,.07) !important; }
body.light-mode .hp .pss-badge-new { color: #374151 !important; }
body.light-mode .hp .pss-star-val { color: #6c757d !important; }
/* Card body in light mode */
body.light-mode .hp .pss-body { background: #ffffff !important; }
body.light-mode .hp .pss-name  { color: #1a1d21 !important; }
body.light-mode .hp .pss-price { color: #1a1d21 !important; }
body.light-mode .hp .pss-price-tag { color: rgba(0,0,0,.38) !important; }
body.light-mode .hp .pss-sold-lbl { color: #6c757d !important; }
/* Navigation in light mode */
body.light-mode .hp .pss-nav { background: #ffffff !important; border-top-color: rgba(0,0,0,.06) !important; }
body.light-mode .hp .pss-dot   { background: rgba(var(--primary-color-rgb), .18) !important; }
body.light-mode .hp .pss-dot.on { background: var(--primary-color) !important; }
body.light-mode .hp .pss-arr-btn {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .hp .pss-arr-btn:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
/* Floating live badges in light mode */
body.light-mode .hp .pss-float-order { background: #ffffff !important; border-color: rgba(74,222,128,.35) !important; box-shadow: 0 8px 30px rgba(0,0,0,.1), 0 0 14px rgba(74,222,128,.1) !important; }
body.light-mode .hp .pss-float-sold  { background: #ffffff !important; border-color: rgba(var(--primary-color-rgb),.3) !important; box-shadow: 0 8px 30px rgba(0,0,0,.1), 0 0 14px rgba(var(--primary-color-rgb),.1) !important; }
body.light-mode .hp .pss-ft { color: #1a1d21 !important; }
body.light-mode .hp .pss-fs { color: #6c757d !important; }

/* ──────────────────────────────────────────────────────────────
   §5  HOME — CONTENT SECTIONS (on white #f8f9fa bg)
   ────────────────────────────────────────────────────────────── */

/* Page body wrapper */
body.light-mode .hp { background: #f8f9fa !important; color: #1a1d21 !important; }

/* Shared text */
body.light-mode .hp .sec-title { color: #1a1d21 !important; }
body.light-mode .hp .sec-title .grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 45%, #1a1d21 70%, var(--primary-color) 100%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .hp .sec-sub { color: #6c757d !important; }
body.light-mode .hp .gem-divider {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .1) 30%, rgba(var(--primary-color-rgb), .1) 70%, transparent) !important;
}
body.light-mode .hp .btn-outline {
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    color: var(--primary-color) !important;
}
body.light-mode .hp .btn-outline:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* Marquee */
body.light-mode .hp .marquee-section {
    background: #fff !important;
    border-top-color: rgba(var(--primary-color-rgb), .07) !important;
    border-bottom-color: rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .hp .marquee-section::before { background: linear-gradient(90deg, #fff, transparent) !important; }
body.light-mode .hp .marquee-section::after  { background: linear-gradient(270deg, #fff, transparent) !important; }
body.light-mode .hp .mq-item { color: #6c757d !important; background: rgba(var(--primary-color-rgb), .04) !important; border-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .hp .mq-item:hover { background: rgba(var(--primary-color-rgb), .08) !important; border-color: rgba(var(--primary-color-rgb), .18) !important; color: #1a1d21 !important; }
body.light-mode .hp .mq-item em { color: #1a1d21 !important; }
body.light-mode .hp .mq-item-icon { background: rgba(var(--primary-color-rgb), .08) !important; border-color: rgba(var(--primary-color-rgb), .14) !important; }
body.light-mode .hp .mq-sep { color: rgba(var(--primary-color-rgb), .15) !important; }

/* Collections v2 */
body.light-mode .hp .collections-section { background: #f0f2f6 !important; }
body.light-mode .hp .col-card {
    background: #e8eaee !important;
    border-color: rgba(var(--primary-color-rgb), .09) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .hp .col-card:hover {
    border-color: rgba(var(--primary-color-rgb), .26) !important;
    box-shadow: 0 20px 56px rgba(var(--primary-color-rgb), .14) !important;
}
body.light-mode .hp .col-vignette {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.22) 100%) !important;
}
body.light-mode .hp .col-name { color: #1a1d21 !important; text-shadow: none !important; }
body.light-mode .hp .col-foot { border-top-color: rgba(var(--primary-color-rgb), .1) !important; }
body.light-mode .hp .col-cta-txt { color: rgba(30,30,50,.62) !important; }
body.light-mode .hp .col-card:hover .col-cta-txt { color: var(--primary-color) !important; }
body.light-mode .hp .col-scroll-card {
    background: #e8eaee !important;
    border-color: rgba(var(--primary-color-rgb), .09) !important;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .hp .col-scroll-card .col-vignette {
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.04) 55%, rgba(0,0,0,.2) 100%) !important;
}
body.light-mode .hp .col-scroll-card .col-cta-txt { color: rgba(30,30,50,.62) !important; }
body.light-mode .hp .col-card-viewall {
    background: rgba(var(--primary-color-rgb), .04) !important;
    border: 1px dashed rgba(var(--primary-color-rgb), .22) !important;
}
body.light-mode .hp .col-card-viewall:hover {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .38) !important;
}
body.light-mode .hp .col-scroll-card-viewall {
    background: rgba(var(--primary-color-rgb), .04) !important;
    border: 1px dashed rgba(var(--primary-color-rgb), .22) !important;
}
body.light-mode .hp .col-viewall-count { color: var(--primary-color) !important; }

/* Featured Products */
body.light-mode .hp .products-section { background: #f6f7fb !important; }
body.light-mode .hp .prod-card {
    background: linear-gradient(160deg, #ffffff 0%, #f9fafc 100%) !important;
    border-color: rgba(var(--primary-color-rgb), .10) !important;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06) !important;
}
body.light-mode .hp .prod-card::before {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .4) 30%, rgba(var(--primary-color-rgb), .65) 50%, rgba(var(--primary-color-rgb), .4) 70%, transparent) !important;
}
body.light-mode .hp .prod-card:hover {
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .10), 0 4px 16px rgba(0,0,0,.07) !important;
}
body.light-mode .hp .prod-spotlight { opacity: 0 !important; }
body.light-mode .hp .prod-img-grad { background: linear-gradient(to top, rgba(249,250,252,.95) 0%, transparent 100%) !important; }
body.light-mode .hp .prod-cat { color: var(--primary-color) !important; }
body.light-mode .hp .prod-name { color: #1a1d21 !important; }
body.light-mode .hp .prod-card:hover .prod-name { color: var(--primary-color) !important; }
body.light-mode .hp .prod-rating { color: #6c757d !important; }
body.light-mode .hp .prod-price { color: #111318 !important; }
body.light-mode .hp .prod-price-note { color: #8890a4 !important; }
body.light-mode .hp .prod-foot { border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .hp .prod-badge {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(0,0,0,.10) !important;
    color: #1a1d21 !important;
}
body.light-mode .hp .prod-badge-new {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .hp .prod-action-btn {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.10) !important;
    color: #1a1d21 !important;
}
body.light-mode .hp .no-prods h3 { color: #1a1d21 !important; }
body.light-mode .hp .no-prods p { color: #6c757d !important; }

/* How it Works */
body.light-mode .hp .hiw-section { background: #f8f9fa !important; }
body.light-mode .hp .hiw-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .hp .hiw-card:hover {
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .12) !important;
}
body.light-mode .hp .hiw-num { color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .hp .hiw-ico-wrap {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .14) !important;
}
body.light-mode .hp .hiw-title { color: #1a1d21 !important; }
body.light-mode .hp .hiw-text { color: #6c757d !important; }

/* Testimonials */
body.light-mode .hp .testimonials-section { background: #ffffff !important; }
body.light-mode .hp .tst-card {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .hp .tst-card:hover {
    border-color: rgba(var(--primary-color-rgb), .18) !important;
    box-shadow: 0 12px 40px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .hp .tst-quote-ico { color: rgba(var(--primary-color-rgb), .15) !important; }
body.light-mode .hp .tst-body { color: #495057 !important; }
body.light-mode .hp .tst-name { color: #1a1d21 !important; }
body.light-mode .hp .tst-role { color: #6c757d !important; }
body.light-mode .hp .tst-av { border-color: rgba(var(--primary-color-rgb), .15) !important; }

/* CTA section */
body.light-mode .hp .cta-section {
    background: #f8f9fa !important;
}
body.light-mode .hp .cta-inner {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .hp .cta-inner::before {
    background: radial-gradient(ellipse 70% 100% at 0% 50%, rgba(var(--primary-color-rgb), .06) 0%, transparent 60%) !important;
}
body.light-mode .hp .cta-inner::after {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .18), transparent) !important;
}
body.light-mode .hp .cta-tag { color: var(--primary-color) !important; }
body.light-mode .hp .cta-tag-line { background: var(--primary-color) !important; }
body.light-mode .hp .cta-h { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .hp .cta-h .hl {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 60%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .hp .cta-p { color: #6c757d !important; }
body.light-mode .hp .cta-corner.tl,
body.light-mode .hp .cta-corner.br { border-color: rgba(var(--primary-color-rgb), .22) !important; }

/* ──────────────────────────────────────────────────────────────
   §6  SHOP PAGE — product cards, filters, pagination
   ────────────────────────────────────────────────────────────── */
body.light-mode .sp { background: #f8f9fa !important; color: #1a1d21 !important; }

/* ── Slim page bar ── */
body.light-mode .sp-page-bar { background: #ffffff !important; border-bottom: 1px solid rgba(var(--primary-color-rgb), .08) !important; box-shadow: 0 2px 16px rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .sp-page-bar::before { background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(var(--primary-color-rgb), .07) 0%, transparent 65%) !important; }
body.light-mode .sp-header-eyebrow { background: rgba(var(--primary-color-rgb), .06) !important; border-color: rgba(var(--primary-color-rgb), .18) !important; }
body.light-mode .sp-page-title { color: #1a1d21 !important; }
body.light-mode .sp-hstat { color: #6c757d !important; }
body.light-mode .sp-hstat strong { color: #1a1d21 !important; }
body.light-mode .sp-hstat-dot { background: rgba(var(--primary-color-rgb), .5) !important; }

/* Filters bar */
body.light-mode .sp-filters-bar,
body.light-mode .sp-filters {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 2px 12px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .sp-filter-btn,
body.light-mode .sp-sort-btn {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #1a1d21 !important;
}
body.light-mode .sp-filter-btn:hover,
body.light-mode .sp-sort-btn:hover,
body.light-mode .sp-filter-btn.act,
body.light-mode .sp-sort-btn.act {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .sp-filter-lbl,
body.light-mode .sp-results-lbl { color: #6c757d !important; }

/* Product cards */
body.light-mode .sp-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .sp-card:hover {
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .12) !important;
    transform: translateY(-4px) !important;
}
body.light-mode .sp-card-img-wrap { background: #f8f9fa !important; }
body.light-mode .sp-card-img-grad {
    background: linear-gradient(0deg, rgba(255,255,255,.85) 0%, transparent 100%) !important;
}
body.light-mode .sp-card-badge {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.09) !important;
    color: #1a1d21 !important;
}
body.light-mode .sp-card-badge-new {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .sp-card-body { background: #ffffff !important; }
body.light-mode .sp-card-cat { color: var(--primary-color) !important; }
body.light-mode .sp-card-name { color: #1a1d21 !important; }
body.light-mode .sp-card:hover .sp-card-name { color: var(--primary-color) !important; }
body.light-mode .sp-card-rating { color: #6c757d !important; }
body.light-mode .sp-card-price { color: #1a1d21 !important; }
body.light-mode .sp-card-footer { border-top-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .sp-card-footer { background: #ffffff !important; }
body.light-mode .sp-card-action-btn {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    color: var(--primary-color) !important;
}
body.light-mode .sp-card-action-btn:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .sp-btn-outline {
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    color: var(--primary-color) !important;
    background: transparent !important;
}
body.light-mode .sp-btn-outline:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
}
/* Breadcrumb / section labels in content area */
body.light-mode .sp .sec-label { color: var(--primary-color) !important; }
body.light-mode .sp .sec-label-line { background: linear-gradient(90deg, var(--primary-color), transparent) !important; }
body.light-mode .sp .sp-divider {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .12) 30%, rgba(var(--primary-color-rgb), .12) 70%, transparent) !important;
}
/* Empty state */
body.light-mode .sp-empty h3,
body.light-mode .sp-empty-title { color: #1a1d21 !important; }
body.light-mode .sp-empty p,
body.light-mode .sp-empty-sub { color: rgba(30,30,60,.5) !important; }
body.light-mode .sp-empty-ico-wrap { background: linear-gradient(145deg, rgba(var(--primary-color-rgb),.08), rgba(var(--primary-color-rgb),.02)) !important; border-color: rgba(var(--primary-color-rgb),.12) !important; }
body.light-mode .sp-empty-ico-wrap::before { border-color: rgba(var(--primary-color-rgb),.08) !important; }
body.light-mode .sp-empty-ico-wrap::after { border-color: rgba(var(--primary-color-rgb),.04) !important; }
body.light-mode .sp-empty-sug { background: rgba(0,0,0,.02) !important; border-color: rgba(0,0,0,.06) !important; color: #495057 !important; }
body.light-mode .sp-empty-sug:hover { background: rgba(var(--primary-color-rgb),.05) !important; border-color: rgba(var(--primary-color-rgb),.15) !important; }
body.light-mode .sp-empty-divider::before, body.light-mode .sp-empty-divider::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,.06), transparent) !important; }
body.light-mode .sp-empty-divider span { color: rgba(30,30,60,.2) !important; }
body.light-mode .sp-empty-feat { color: rgba(30,30,60,.35) !important; }
/* No results */
body.light-mode .sp-no-results { color: #6c757d !important; }

/* ── Shop body background ── */
body.light-mode .sp-body { background: #f8f9fa !important; }

/* ── Header text elements ── */
body.light-mode .sp-header-eyebrow {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .sp-eyebrow-dot { background: var(--primary-color) !important; box-shadow: 0 0 6px rgba(var(--primary-color-rgb), .4) !important; }
body.light-mode .sp-header-title { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .sp-title-grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 45%, #1a1d21 80%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .sp-header-sub { color: #6c757d !important; }
body.light-mode .sp-hstat { color: #495057 !important; }
body.light-mode .sp-hstat strong { color: #1a1d21 !important; }
body.light-mode .sp-hstat-dot { background: rgba(var(--primary-color-rgb), .5) !important; }

/* ── Device showcase in header ── */
body.light-mode .sphd-content { background: #f5f7fa !important; }
body.light-mode .sphd-nav { background: rgba(0,0,0,.03) !important; border-bottom-color: rgba(0,0,0,.06) !important; }
body.light-mode .sphd-logo { color: #1a1d21 !important; }
body.light-mode .sphd-nav-link { color: #6c757d !important; }
body.light-mode .sphd-hero-area { background: linear-gradient(135deg, rgba(var(--primary-color-rgb),.14), rgba(var(--primary-color-rgb),.04)) !important; }
body.light-mode .sphd-hero-area::before { background: radial-gradient(ellipse 80% 70% at 70% 40%, rgba(var(--primary-color-rgb),.12), transparent 70%) !important; }
body.light-mode .sphd-hero-tag { color: var(--primary-color) !important; }
body.light-mode .sphd-hero-ttl { color: #1a1d21 !important; }
body.light-mode .sphd-prods-lbl { color: #9ca3af !important; }
body.light-mode .sphd-prod { background: #fff !important; border-color: rgba(0,0,0,.07) !important; }
body.light-mode .sphd-prod-name { color: #1a1d21 !important; }
body.light-mode .sphd-prod-price { color: #1a1d21 !important; }
body.light-mode .sphd-phone-frame { background: #1c1c2e !important; }
body.light-mode .sphd-float-badge {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(var(--primary-color-rgb), .18) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.1), 0 0 12px rgba(var(--primary-color-rgb),.07) !important;
}
body.light-mode .sphd-bnum { color: #1a1d21 !important; }
body.light-mode .sphd-blbl { color: #6c757d !important; }
body.light-mode .sphd-bico { background: rgba(var(--primary-color-rgb),.08) !important; border-color: rgba(var(--primary-color-rgb),.18) !important; }

/* ── Sidebar / filters ── */
body.light-mode .sp-sidebar-card {
    background: #ffffff !important;
    border: 1.5px solid rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .06) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.light-mode .sp-sidebar-card::before { background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb),.25), transparent) !important; }
body.light-mode .sp-sidebar-head { border-bottom-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .sp-sidebar-title { color: #1a1d21 !important; }
body.light-mode .sp-sidebar-title-ico { background: linear-gradient(145deg, rgba(var(--primary-color-rgb),.1), rgba(var(--primary-color-rgb),.03)) !important; border-color: rgba(var(--primary-color-rgb),.15) !important; }
body.light-mode .sp-sidebar-clear { color: rgba(30,30,60,.4) !important; }
body.light-mode .sp-sidebar-clear:hover { color: var(--primary-color) !important; }
body.light-mode .sp-filter-group { border-bottom-color: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .sp-filter-label { color: var(--primary-color) !important; }
body.light-mode .sp-search-ico { color: rgba(30,30,60,.3) !important; }
body.light-mode .sp-search-wrap:focus-within .sp-search-ico { color: var(--primary-color) !important; }
body.light-mode .sp-search-input {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #1a1d21 !important;
}
body.light-mode .sp-search-input::placeholder { color: #adb5bd !important; }
body.light-mode .sp-search-input:focus {
    background: #fff !important;
    border-color: rgba(var(--primary-color-rgb), .45) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), .08), 0 0 22px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .sp-cat-opt::before { background: var(--primary-color) !important; }
body.light-mode .sp-cat-opt:hover { background: rgba(var(--primary-color-rgb), .04) !important; border-color: rgba(var(--primary-color-rgb), .1) !important; }
body.light-mode .sp-cat-opt.active { background: rgba(var(--primary-color-rgb), .07) !important; border-color: rgba(var(--primary-color-rgb), .2) !important; }
body.light-mode .sp-cat-dot { border-color: rgba(0,0,0,.18) !important; }
body.light-mode .sp-cat-opt.active .sp-cat-dot { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }
body.light-mode .sp-cat-name { color: #495057 !important; }
body.light-mode .sp-cat-opt.active .sp-cat-name { color: var(--primary-color) !important; }
body.light-mode .sp-cat-count { color: #9ca3af !important; background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.06) !important; }
body.light-mode .sp-cat-opt:hover .sp-cat-count { background: rgba(var(--primary-color-rgb),.06) !important; border-color: rgba(var(--primary-color-rgb),.14) !important; color: rgba(var(--primary-color-rgb),.7) !important; }
body.light-mode .sp-cat-opt.active .sp-cat-count { background: rgba(var(--primary-color-rgb),.1) !important; border-color: rgba(var(--primary-color-rgb),.25) !important; color: var(--primary-color) !important; }
body.light-mode .sp-cat-thumb { border-color: rgba(0,0,0,.08) !important; background: #f4f5f7 !important; }
body.light-mode .sp-cat-opt:hover .sp-cat-thumb { border-color: rgba(var(--primary-color-rgb),.25) !important; }
body.light-mode .sp-cat-opt.active .sp-cat-thumb { border-color: rgba(var(--primary-color-rgb),.4) !important; }
body.light-mode .sp-cat-thumb-icon { background: rgba(var(--primary-color-rgb),.06) !important; border-color: rgba(var(--primary-color-rgb),.1) !important; color: rgba(var(--primary-color-rgb),.55) !important; }
body.light-mode .sp-cat-opt:hover .sp-cat-thumb-icon { background: rgba(var(--primary-color-rgb),.1) !important; color: var(--primary-color) !important; }
body.light-mode .sp-cat-opt.active .sp-cat-thumb-icon { background: rgba(var(--primary-color-rgb),.14) !important; border-color: rgba(var(--primary-color-rgb),.3) !important; color: var(--primary-color) !important; }
body.light-mode .sp-cat-all-ico { background: rgba(var(--primary-color-rgb),.06) !important; border-color: rgba(var(--primary-color-rgb),.12) !important; color: var(--primary-color) !important; }
body.light-mode .sp-cat-child::after { background: linear-gradient(180deg, rgba(var(--primary-color-rgb),.08), rgba(var(--primary-color-rgb),.02)) !important; }
body.light-mode .sp-cat-list { scrollbar-color: rgba(var(--primary-color-rgb),.15) transparent !important; }
body.light-mode .sp-sort-select {
    background-color: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #1a1d21 !important;
}
body.light-mode .sp-sort-select:focus { border-color: rgba(var(--primary-color-rgb), .45) !important; box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .sp-sort-select option { background: #fff !important; color: #1a1d21 !important; }
/* Mobile filter toggle */
body.light-mode .sp-mob-filter-btn {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #1a1d21 !important;
    box-shadow: 0 2px 10px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .sp-mob-filter-btn:hover { border-color: rgba(var(--primary-color-rgb), .28) !important; }
body.light-mode .sp-mob-filter-tag { background: rgba(var(--primary-color-rgb), .1) !important; color: var(--primary-color) !important; }

/* ── Results bar ── */
body.light-mode .sp-results-bar {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .09) !important;
    box-shadow: 0 2px 12px rgba(var(--primary-color-rgb), .05) !important;
    backdrop-filter: none !important;
}
body.light-mode .sp-result-count { color: #6c757d !important; }
body.light-mode .sp-result-count strong { color: #1a1d21 !important; }
body.light-mode .sp-active-tag {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}

/* ── Product cards (extended) ── */
body.light-mode .sp-img-wrap { background: #f8f9fa !important; }
body.light-mode .sp-img-shine { background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 42%) !important; }
body.light-mode .sp-img-grad { background: linear-gradient(0deg, rgba(255,255,255,.9) 0%, transparent 100%) !important; }
body.light-mode .sp-badge {
    background: rgba(255,255,255,.94) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #1a1d21 !important;
}
body.light-mode .sp-badge-new { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }
body.light-mode .sp-badge-low { background: rgba(251,146,60,.1) !important; border-color: rgba(251,146,60,.3) !important; color: #d97706 !important; }
body.light-mode .sp-badge-out { background: rgba(239,68,68,.08) !important; border-color: rgba(239,68,68,.25) !important; color: #dc2626 !important; }
body.light-mode .sp-quick-view {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #1a1d21 !important;
}
body.light-mode .sp-quick-view:hover { background: rgba(var(--primary-color-rgb),.12) !important; border-color: rgba(var(--primary-color-rgb),.25) !important; color: var(--primary-color) !important; }
body.light-mode .sp-card-meta { /* parent row */ }
body.light-mode .sp-cat-tag { color: var(--primary-color) !important; }
body.light-mode .sp-stars { color: #f59e0b !important; }
body.light-mode .sp-rating { color: #9ca3af !important; }
body.light-mode .sp-card-foot { border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .sp-price { color: #1a1d21 !important; }
body.light-mode .sp-price-note { color: #9ca3af !important; }
body.light-mode .sp-spotlight { background: radial-gradient(350px circle at var(--mx,50%) var(--my,50%), rgba(var(--primary-color-rgb),.06) 0%, transparent 60%) !important; }

/* ── Pagination ── */
body.light-mode .sp-pag-inner {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .07) !important;
    backdrop-filter: none !important;
}
body.light-mode .sp-pag-btn {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #495057 !important;
}
body.light-mode .sp-pag-btn:hover:not(.sp-pag-dis) {
    background: rgba(var(--primary-color-rgb), .1) !important;
    border-color: rgba(var(--primary-color-rgb), .3) !important;
    color: var(--primary-color) !important;
}
body.light-mode .sp-pag-num {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    color: #495057 !important;
}
body.light-mode .sp-pag-num:hover {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .25) !important;
    color: var(--primary-color) !important;
}
body.light-mode .sp-pag-num.active {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color, var(--primary-color))) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), .38) !important;
}
body.light-mode .sp-pag-info { color: #9ca3af !important; }

/* ── Toast (shop page) ── */
body.light-mode .sp-toast {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(var(--primary-color-rgb),.06) !important;
}
body.light-mode .spt-title { color: #1a1d21 !important; }
body.light-mode .spt-msg { color: #6c757d !important; }
body.light-mode .spt-close { color: #9ca3af !important; }
body.light-mode .spt-close:hover { background: rgba(0,0,0,.06) !important; color: #1a1d21 !important; }
body.light-mode .spt-bar { background: rgba(0,0,0,.06) !important; }
body.light-mode .spta-ghost {
    background: #f8f9fa !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #6c757d !important;
}
body.light-mode .spta-ghost:hover { background: #f0f2f5 !important; }

/* ── Dark mode polish overrides (light mode corrections) ── */
/* Header bottom bleed → light bg */
body.light-mode .sp-header::after { background: linear-gradient(to bottom, transparent, #f8f9fa) !important; }
/* Cards: no dark ambient aura, use soft primary glow instead */
body.light-mode .sp-card:hover {
    box-shadow: 0 16px 52px rgba(var(--primary-color-rgb), .1), 0 0 0 1px rgba(var(--primary-color-rgb), .16) !important;
}
/* Primary btn before shimmer: lighter for light mode */
body.light-mode .sp-btn-primary::before, body.light-mode .sp-add-btn::before { background: linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent) !important; }
/* Pagination active: softer pulse */
body.light-mode .sp-pag-num.active { box-shadow: 0 4px 18px rgba(var(--primary-color-rgb), .38) !important; animation: none !important; }

/* ──────────────────────────────────────────────────────────────
   §7  CART PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .cp { background: #f8f9fa !important; color: #1a1d21 !important; }

body.light-mode .cp-back { color: #6c757d !important; }
body.light-mode .cp-back:hover { color: var(--primary-color) !important; }
body.light-mode .cp-title { color: #1a1d21 !important; }
body.light-mode .cp-title span { color: var(--primary-color) !important; }
body.light-mode .cp-sub { color: #6c757d !important; }

/* Cart panels — admin card style */
body.light-mode .cp-panel {
    background: #ffffff !important;
    border: 2px solid rgba(var(--primary-color-rgb), .08) !important;
    border-radius: 24px !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .cp-panel::before { display: none !important; }
body.light-mode .cp-panel-head { border-bottom-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .cp-panel-title { color: #1a1d21 !important; }

/* Cart items */
body.light-mode .ci {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .ci:hover {
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    background: rgba(var(--primary-color-rgb), .03) !important;
}
body.light-mode .ci-img { border-color: rgba(0,0,0,.08) !important; }
body.light-mode .ci-name { color: #1a1d21 !important; }
body.light-mode .ci-stock { color: #6c757d !important; }
body.light-mode .ci-unit { color: #6c757d !important; }
body.light-mode .ci-qty {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ci-qty-btn {
    background: rgba(var(--primary-color-rgb), .07) !important;
    color: #1a1d21 !important;
}
body.light-mode .ci-qty-btn:hover:not(:disabled) {
    background: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .ci-qty-val { color: #1a1d21 !important; }

/* Cart summary */
body.light-mode .cs-title { color: #1a1d21 !important; border-bottom-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .cs-row { color: #6c757d !important; }
body.light-mode .cs-val { color: #1a1d21 !important; }
body.light-mode .cs-row.cs-total { color: #1a1d21 !important; }
body.light-mode .cs-continue { color: #6c757d !important; }
body.light-mode .cs-continue:hover { color: var(--primary-color) !important; }

/* Empty cart state */
body.light-mode .cp-empty-ico-wrap { background: linear-gradient(145deg, rgba(var(--primary-color-rgb),.08), rgba(var(--primary-color-rgb),.02)) !important; border-color: rgba(var(--primary-color-rgb),.12) !important; }
body.light-mode .cp-empty-ico-wrap::before { border-color: rgba(var(--primary-color-rgb),.06) !important; }
body.light-mode .cp-empty-title { color: #1a1d21 !important; }
body.light-mode .cp-empty-sub { color: rgba(30,30,60,.5) !important; }
body.light-mode .cp-empty-divider { color: rgba(30,30,60,.25) !important; }
body.light-mode .cp-empty-divider::before, body.light-mode .cp-empty-divider::after { background: rgba(0,0,0,.08) !important; }
body.light-mode .cp-empty-feat { color: rgba(30,30,60,.45) !important; }

/* ──────────────────────────────────────────────────────────────
   §8  CHECKOUT PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .ck { background: #f8f9fa !important; color: #1a1d21 !important; }
body.light-mode .ck-back { color: #6c757d !important; }
body.light-mode .ck-back:hover { color: var(--primary-color) !important; }
body.light-mode .ck-title { color: #1a1d21 !important; }
body.light-mode .ck-sub { color: #6c757d !important; }

/* Stepper */
body.light-mode .ck-step:not(:last-child)::after { background: rgba(var(--primary-color-rgb), .12) !important; }
body.light-mode .ck-step.active:not(:last-child)::after { background: rgba(var(--primary-color-rgb), .35) !important; }
body.light-mode .ck-step-num {
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    background: #fff !important;
    color: #6c757d !important;
}
body.light-mode .ck-step.active .ck-step-num {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}
body.light-mode .ck-step.done .ck-step-num {
    background: rgba(40,167,69,.1) !important;
    border-color: rgba(40,167,69,.3) !important;
    color: #28a745 !important;
}
body.light-mode .ck-step-lbl { color: #6c757d !important; }
body.light-mode .ck-step.active .ck-step-lbl { color: #1a1d21 !important; }

/* Checkout panels */
body.light-mode .ck-panel {
    background: #ffffff !important;
    border: 2px solid rgba(var(--primary-color-rgb), .08) !important;
    border-radius: 24px !important;
    backdrop-filter: none !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .ck-panel::before { display: none !important; }
body.light-mode .ck-section + .ck-section { border-top-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .ck-sec-ico {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .18) !important;
}
body.light-mode .ck-sec-title { color: #1a1d21 !important; }

/* Checkout form inputs */
body.light-mode .ck-label { color: #6c757d !important; }
body.light-mode .ck-input,
body.light-mode .ck-select,
body.light-mode .ck-textarea {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #1a1d21 !important;
}
body.light-mode .ck-input::placeholder,
body.light-mode .ck-textarea::placeholder { color: #adb5bd !important; }
body.light-mode .ck-input:focus,
body.light-mode .ck-select:focus,
body.light-mode .ck-textarea:focus {
    border-color: var(--primary-color) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ck-select { background-color: #f8f9fa !important; }
body.light-mode .ck-select option { background: #ffffff !important; color: #1a1d21 !important; }

/* Payment options */
body.light-mode .ck-pay-lbl {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ck-pay-opt input:checked + .ck-pay-lbl {
    background: rgba(var(--primary-color-rgb), .06) !important;
    border-color: rgba(var(--primary-color-rgb), .4) !important;
}
body.light-mode .ck-pay-name { color: #1a1d21 !important; }
body.light-mode .ck-pay-desc { color: #6c757d !important; }

/* Checkout order summary */
body.light-mode .cks-title { color: #1a1d21 !important; border-bottom-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .cks-name { color: #1a1d21 !important; }
body.light-mode .cks-qty { color: #6c757d !important; }
body.light-mode .cks-item { border-bottom-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .cks-totals { border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .cks-row { color: #6c757d !important; }
body.light-mode .cks-val { color: #1a1d21 !important; }
body.light-mode .cks-row.cks-grand { color: #1a1d21 !important; border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .cks-img { border-color: rgba(0,0,0,.07) !important; }

/* ── Digital section — light-mode overrides ──────────────────── */

/* Section heading redesign for digital section */
body.light-mode .ck-section--digital .ck-sec-ico {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb),.14), 0 4px 16px rgba(var(--primary-color-rgb),.3) !important;
}
body.light-mode .ck-section--digital .ck-sec-title {
    color: #0f0f1e !important;
    font-weight: 900 !important;
}
body.light-mode .ck-sec-sub { color: var(--primary-color) !important; opacity: 1 !important; }

/* Digital info banner */
body.light-mode .ck-digital-banner {
    background:
        linear-gradient(135deg, rgba(var(--primary-color-rgb),.1) 0%, rgba(var(--primary-color-rgb),.04) 100%),
        #ffffff !important;
    border-color: rgba(var(--primary-color-rgb),.35) !important;
    border-left-color: var(--primary-color) !important;
    box-shadow: 0 2px 16px rgba(var(--primary-color-rgb),.1) !important;
}
body.light-mode .ck-digital-banner-icon {
    background: var(--primary-color) !important;
    box-shadow: 0 4px 14px rgba(var(--primary-color-rgb),.35) !important;
}
body.light-mode .ck-digital-banner-txt strong {
    color: #0f0f1e !important;
    text-shadow: none !important;
}
body.light-mode .ck-digital-banner-txt p { color: #3a3a52 !important; }
body.light-mode .ck-digital-banner-badge {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Mixed-cart notice */
body.light-mode .ck-mixed-notice {
    background: rgba(245,158,11,.07) !important;
    border-color: rgba(245,158,11,.3) !important;
    border-left-color: rgba(245,158,11,.7) !important;
    color: #3a3020 !important;
}
body.light-mode .ck-mixed-notice strong { color: #92400e !important; }

/* Section intro callout */
body.light-mode .ck-digital-section-intro {
    background:
        rgba(var(--primary-color-rgb),.06),
        #f0f0fa !important;
    color: #1a1a2e !important;
    border-left-color: var(--primary-color) !important;
    box-shadow: 0 1px 6px rgba(var(--primary-color-rgb),.08) !important;
}
body.light-mode .ck-digital-section-intro svg { color: var(--primary-color) !important; }

/* Product digital cards */
body.light-mode .ck-digital-card {
    background: #f8f8ff !important;
    border-color: rgba(var(--primary-color-rgb),.2) !important;
    box-shadow: 0 2px 14px rgba(var(--primary-color-rgb),.07) !important;
}
body.light-mode .ck-digital-card-head {
    background:
        linear-gradient(90deg, rgba(var(--primary-color-rgb),.12) 0%, rgba(var(--primary-color-rgb),.04) 100%),
        #ffffff !important;
    border-bottom-color: rgba(var(--primary-color-rgb),.14) !important;
}
body.light-mode .ck-digital-card-head svg { color: var(--primary-color) !important; }
body.light-mode .ck-digital-card-head span { color: #0f0f1e !important; font-weight: 800 !important; }
body.light-mode .ck-digital-card-body { background: transparent !important; }
body.light-mode .ck-digital-card-body .ck-label { color: #6c757d !important; }
body.light-mode .ck-digital-card-instructions {
    background: rgba(var(--primary-color-rgb),.05) !important;
    border-bottom-color: rgba(var(--primary-color-rgb),.1) !important;
    color: #2a2a3e !important;
}
body.light-mode .ck-digital-card-instructions svg { color: var(--primary-color) !important; }
body.light-mode .ck-digital-card-instructions strong { color: #0f0f1e !important; }

/* ──────────────────────────────────────────────────────────────
   §9  PRODUCT DETAIL PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .pdp { background: #f8f9fa !important; color: #1a1d21 !important; }

/* Product image panel */
body.light-mode .pdp-img-main {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .08) !important;
}
body.light-mode .pdp-img-shine { background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 45%) !important; }
body.light-mode .pdp-img-ph { background: linear-gradient(135deg, rgba(var(--primary-color-rgb), .05), rgba(var(--primary-color-rgb), .02)) !important; }
body.light-mode .pdp-zoom-hint {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #6c757d !important;
}
body.light-mode .pdp-trust-pill {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    color: #495057 !important;
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), .06) !important;
}

/* Product info column */
body.light-mode .pdp-cat-pill {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .18) !important;
}
body.light-mode .pdp-rating-txt { color: #6c757d !important; }
body.light-mode .pdp-title { color: #1a1d21 !important; }
body.light-mode .pdp-price { color: #1a1d21 !important; }
body.light-mode .pdp-price-unit,
body.light-mode .pdp-price-note { color: #6c757d !important; }
body.light-mode .pdp-badge {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #1a1d21 !important;
}
body.light-mode .pdp-badge-new { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }

/* Product detail sections */
body.light-mode .pdp-tab-bar,
body.light-mode .pdp-tabs {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 2px 12px rgba(var(--primary-color-rgb), .05) !important;
}
body.light-mode .pdp-tab {
    color: #6c757d !important;
}
body.light-mode .pdp-tab.act,
body.light-mode .pdp-tab:hover { color: var(--primary-color) !important; }
body.light-mode .pdp-tab.act { border-bottom-color: var(--primary-color) !important; }
body.light-mode .pdp-tab-content { color: #495057 !important; }
body.light-mode .pdp-section,
body.light-mode .pdp-desc-card,
body.light-mode .pdp-related-card,
body.light-mode .pdp-spec-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .pdp-sec-title { color: #1a1d21 !important; }
body.light-mode .pdp-desc { color: #495057 !important; }
body.light-mode .pdp-spec-row { border-bottom-color: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .pdp-spec-key { color: #6c757d !important; }
body.light-mode .pdp-spec-val { color: #1a1d21 !important; }
body.light-mode .pdp-divider {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .1) 30%, rgba(var(--primary-color-rgb), .1) 70%, transparent) !important;
}

/* ── Stock status ── */
body.light-mode .pdp-stock-in  { background: rgba(21,128,61,.07) !important; border-color: rgba(34,197,94,.22) !important; color: #15803d !important; }
body.light-mode .pdp-stock-low { background: rgba(217,119,6,.07) !important; border-color: rgba(251,146,60,.22) !important; color: #b45309 !important; }
body.light-mode .pdp-stock-out { background: rgba(220,38,38,.06) !important; border-color: rgba(239,68,68,.22) !important; color: #dc2626 !important; }

/* ── Info column text ── */
body.light-mode .pdp-short-desc { color: #495057 !important; border-bottom-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .pdp-cat-pill { background: rgba(var(--primary-color-rgb), .08) !important; border-color: rgba(var(--primary-color-rgb), .18) !important; color: var(--primary-color) !important; }
body.light-mode .pdp-eyebrow { color: var(--primary-color) !important; }

/* ── Price ── */
body.light-mode .pdp-price-note { color: #9ca3af !important; }
body.light-mode .pdp-price-unit { color: #9ca3af !important; }

/* ── Qty control ── */
body.light-mode .pdp-qty-wrap { background: #fff !important; border-color: rgba(var(--primary-color-rgb), .15) !important; }
body.light-mode .pdp-qty-btn { color: #495057 !important; background: transparent !important; }
body.light-mode .pdp-qty-btn:hover:not(:disabled) { background: rgba(var(--primary-color-rgb), .1) !important; color: var(--primary-color) !important; }
body.light-mode .pdp-qty-num { color: #1a1d21 !important; }

/* ── Wishlist btn ── */
body.light-mode .pdp-wish-btn { background: #fff !important; border-color: rgba(var(--primary-color-rgb), .14) !important; color: #9ca3af !important; }
body.light-mode .pdp-wish-btn:hover { background: rgba(239,68,68,.06) !important; border-color: rgba(239,68,68,.2) !important; color: #dc2626 !important; }

/* ── Share row ── */
body.light-mode .pdp-share-row { border-top-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .pdp-share-lbl { color: #9ca3af !important; }
body.light-mode .pdp-share-btn { background: #f8f9fa !important; border-color: rgba(0,0,0,.1) !important; color: #6c757d !important; }
body.light-mode .pdp-share-btn:hover { background: rgba(var(--primary-color-rgb), .08) !important; border-color: rgba(var(--primary-color-rgb), .2) !important; color: var(--primary-color) !important; }

/* ── Image scan / zoom ── */
body.light-mode .pdp-img-scan {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 100%) !important;
}

/* ── Image badges ── */
body.light-mode .pdp-badge     { background: rgba(255,255,255,.93) !important; border-color: rgba(0,0,0,.09) !important; color: #1a1d21 !important; }
body.light-mode .pdp-badge-new { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }
body.light-mode .pdp-badge-low { background: rgba(217,119,6,.1) !important; border-color: rgba(251,146,60,.28) !important; color: #b45309 !important; }
body.light-mode .pdp-badge-out { background: rgba(220,38,38,.08) !important; border-color: rgba(239,68,68,.25) !important; color: #dc2626 !important; }
body.light-mode .pdp-badge-in  { background: rgba(21,128,61,.08) !important; border-color: rgba(34,197,94,.22) !important; color: #15803d !important; }

/* ── Details section bg ── */
body.light-mode .pdp-details { background: #f8f9fa !important; }

/* ── Accordion ── */
body.light-mode .pdp-accordion {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .06) !important;
    backdrop-filter: none !important;
}
body.light-mode .pdp-acc-item    { border-bottom-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .pdp-acc-head:hover { background: rgba(var(--primary-color-rgb), .03) !important; }
body.light-mode .pdp-acc-title   { color: #1a1d21 !important; }
body.light-mode .pdp-acc-item.open .pdp-acc-title { color: var(--primary-color) !important; }
body.light-mode .pdp-acc-chevron { color: #9ca3af !important; }
body.light-mode .pdp-acc-item.open .pdp-acc-chevron { color: var(--primary-color) !important; }
body.light-mode .pdp-acc-inner   { color: #495057 !important; }

/* ── Quick specs sidebar ── */
body.light-mode .pdp-specs {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .06) !important;
    backdrop-filter: none !important;
}
body.light-mode .pdp-specs-head  { border-bottom-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .pdp-specs-title { color: #1a1d21 !important; }
body.light-mode .pdp-spec-row    { border-bottom-color: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .pdp-spec-lbl    { color: #9ca3af !important; }
body.light-mode .pdp-spec-val    { color: #1a1d21 !important; }
body.light-mode .pdp-spec-val .badge-in  { background: rgba(21,128,61,.08) !important; color: #15803d !important; border-color: rgba(34,197,94,.2) !important; }
body.light-mode .pdp-spec-val .badge-low { background: rgba(217,119,6,.08) !important; color: #b45309 !important; border-color: rgba(251,146,60,.2) !important; }
body.light-mode .pdp-spec-val .badge-out { background: rgba(220,38,38,.08) !important; color: #dc2626 !important; border-color: rgba(239,68,68,.2) !important; }

/* ── Related products section ── */
body.light-mode .pdp-related  { background: #f8f9fa !important; }
body.light-mode .pdp-sec-head { border-bottom-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .pdp-sec-label      { color: var(--primary-color) !important; }
body.light-mode .pdp-sec-label-line { background: linear-gradient(90deg, var(--primary-color), transparent) !important; }
body.light-mode .pdp-see-all { border-color: rgba(var(--primary-color-rgb), .22) !important; color: var(--primary-color) !important; }
body.light-mode .pdp-see-all:hover  { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; }

/* ── Related product cards ── */
body.light-mode .pdp-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .09) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .pdp-card:hover { border-color: rgba(var(--primary-color-rgb), .2) !important; box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .12) !important; }
body.light-mode .pdp-card-img-wrap  { background: #f8f9fa !important; }
body.light-mode .pdp-card-img-grad  { background: linear-gradient(0deg, rgba(255,255,255,.9) 0%, transparent 100%) !important; }
body.light-mode .pdp-card-img-shine { background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, transparent 42%) !important; }
body.light-mode .pdp-card-badge     { background: rgba(255,255,255,.92) !important; border-color: rgba(0,0,0,.09) !important; color: #1a1d21 !important; }
body.light-mode .pdp-card-badge-new { background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; }
body.light-mode .pdp-card-body      { background: #ffffff !important; }
body.light-mode .pdp-card-cat       { color: var(--primary-color) !important; }
body.light-mode .pdp-card-name      { color: #1a1d21 !important; }
body.light-mode .pdp-card:hover .pdp-card-name { color: var(--primary-color) !important; }
body.light-mode .pdp-card-foot      { border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .pdp-card-price     { color: #1a1d21 !important; }
body.light-mode .pdp-spotlight      { background: radial-gradient(350px circle at var(--mx,50%) var(--my,50%), rgba(var(--primary-color-rgb),.05) 0%, transparent 60%) !important; }
body.light-mode .pdp-card-quick { background: rgba(255,255,255,.9) !important; border-color: rgba(var(--primary-color-rgb),.12) !important; color: var(--primary-color) !important; }

/* ── Toast (PDP) ── */
body.light-mode .pdp-toast {
    background: rgba(255,255,255,.98) !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.12), 0 0 0 1px rgba(var(--primary-color-rgb),.06) !important;
}
body.light-mode .pdpt-title    { color: #1a1d21 !important; }
body.light-mode .pdpt-msg      { color: #6c757d !important; }
body.light-mode .pdpt-close    { color: #9ca3af !important; }
body.light-mode .pdpt-close:hover { background: rgba(0,0,0,.06) !important; color: #1a1d21 !important; }
body.light-mode .pdpt-bar      { background: rgba(0,0,0,.06) !important; }
body.light-mode .pdpta-ghost   { background: #f8f9fa !important; border-color: rgba(0,0,0,.1) !important; color: #6c757d !important; }
body.light-mode .pdpta-ghost:hover { background: #f0f2f5 !important; }

/* ── Lightbox ── */
body.light-mode .pdp-lightbox { background: rgba(0,0,0,.82) !important; }
body.light-mode .pdp-lb-close { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.2) !important; }

/* ── PDP dark mode polish overrides for light mode ── */
/* Remove dark text-shadow from price */
body.light-mode .pdp-price { text-shadow: none !important; }
/* Softer card hover glow */
body.light-mode .pdp-card:hover {
    box-shadow: 0 16px 52px rgba(var(--primary-color-rgb), .1), 0 0 0 1px rgba(var(--primary-color-rgb), .18) !important;
}
/* Image rim glow: lighter primary tint */
body.light-mode .pdp-img-main:hover {
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    box-shadow: 0 0 32px -6px rgba(var(--primary-color-rgb), .18), 0 0 0 1px rgba(var(--primary-color-rgb), .12) !important;
}
/* Accordion accent: use primary colour on lighter bg */
body.light-mode .pdp-acc-item.open { box-shadow: inset 4px 0 0 rgba(var(--primary-color-rgb), .35) !important; }
/* Breadcrumb separator glow: none on light bg */
body.light-mode .pdp-breadcrumb-bar { box-shadow: 0 4px 20px rgba(0,0,0,.05) !important; }
body.light-mode .pdp-breadcrumb-cur { box-shadow: none !important; }
/* Spec row hover: light tint */
body.light-mode .pdp-spec-row:hover { background: rgba(var(--primary-color-rgb), .03) !important; }
/* Add btn shimmer on light bg */
body.light-mode .pdp-add-btn::before { background: linear-gradient(105deg, transparent, rgba(255,255,255,.25), transparent) !important; }

/* ── New §2b extra classes — light mode ── */
body.light-mode .pdp-info-sep { background: linear-gradient(90deg, rgba(var(--primary-color-rgb),.35), rgba(0,0,0,.07) 55%, transparent) !important; }
body.light-mode .pdp-img-accent-bar { background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-color-rgb),.15) 60%, transparent) !important; }
body.light-mode .pdp-feature:hover { background: rgba(var(--primary-color-rgb),.03) !important; }
body.light-mode .pdp-feature-ico { background: rgba(var(--primary-color-rgb),.08) !important; border-color: rgba(var(--primary-color-rgb),.2) !important; }
body.light-mode .pdp-feature:hover .pdp-feature-ico { background: rgba(var(--primary-color-rgb),.14) !important; }
body.light-mode .pdp-feature-lbl { color: rgba(30,30,50,.72) !important; }
body.light-mode .pdp-qty-label { color: rgba(30,30,50,.45) !important; }
body.light-mode .pdp-delivery-box { background: #f9f9fc !important; border-color: rgba(0,0,0,.09) !important; }
body.light-mode .pdp-delivery-box:hover { background: rgba(var(--primary-color-rgb),.04) !important; border-color: rgba(var(--primary-color-rgb),.22) !important; }
body.light-mode .pdp-dlv-title { color: #1a1d21 !important; }
body.light-mode .pdp-dlv-sub { color: rgba(30,30,50,.48) !important; }
body.light-mode .pdp-dlv-badge { background: rgba(21,128,61,.09) !important; color: #15803d !important; border-color: rgba(34,197,94,.22) !important; }
body.light-mode .pdp-safe { background: rgba(21,128,61,.05) !important; border-color: rgba(34,197,94,.15) !important; }
body.light-mode .pdp-safe-lbl { color: rgba(30,30,50,.5) !important; }
/* Image shadow override for light mode */
body.light-mode .pdp-img-main { box-shadow: 0 8px 40px rgba(var(--primary-color-rgb),.08), 0 0 0 1px rgba(var(--primary-color-rgb),.07) !important; }

/* ── PDP digital fields block — light mode ── */
body.light-mode .pdp-digital-box {
    background:
        linear-gradient(135deg, rgba(var(--primary-color-rgb),.07) 0%, rgba(var(--primary-color-rgb),.02) 100%),
        #ffffff !important;
    border-color: rgba(var(--primary-color-rgb),.22) !important;
    box-shadow: 0 2px 18px rgba(var(--primary-color-rgb),.08), 0 1px 3px rgba(0,0,0,.04) !important;
}
body.light-mode .pdp-digital-box-head {
    background:
        linear-gradient(90deg, rgba(var(--primary-color-rgb),.12) 0%, rgba(var(--primary-color-rgb),.03) 100%),
        #f8f8ff !important;
    border-bottom-color: rgba(var(--primary-color-rgb),.12) !important;
}
body.light-mode .pdp-digital-box-icon {
    background: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb),.14), 0 4px 12px rgba(var(--primary-color-rgb),.32) !important;
}
body.light-mode .pdp-digital-box-title { color: #0f0f1e !important; text-shadow: none !important; }
body.light-mode .pdp-digital-box-sub   { color: #6c757d !important; }
body.light-mode .pdp-digital-box-badge {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}
body.light-mode .pdp-digital-intro {
    color: #2a2a3e !important;
    background: rgba(var(--primary-color-rgb),.06) !important;
    border-left-color: var(--primary-color) !important;
}
body.light-mode .pdp-digital-label { color: var(--primary-color) !important; opacity: 1 !important; }
body.light-mode .pdp-digital-field {
    background: #f4f4fc !important;
    border-color: rgba(var(--primary-color-rgb),.22) !important;
    color: #1a1d21 !important;
}
body.light-mode .pdp-digital-field:focus {
    background: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb),.1) !important;
}
body.light-mode .pdp-digital-field::placeholder { color: #9ca3af !important; }
body.light-mode .pdp-digital-empty { color: #6c757d !important; }
body.light-mode .pdp-digital-instructions {
    background: rgba(var(--primary-color-rgb),.06) !important;
    border-color: rgba(var(--primary-color-rgb),.2) !important;
    color: #2a2a3e !important;
}
body.light-mode .pdp-digital-instructions strong { color: #0f0f1e !important; }

/* ──────────────────────────────────────────────────────────────
   §10  CONTACT PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .ct { background: #f8f9fa !important; color: #1a1d21 !important; }

/* Content sections */
body.light-mode .ct-info { background: #f8f9fa !important; }
body.light-mode .ct-sec-title { color: #1a1d21 !important; }
body.light-mode .ct-sec-title .grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 45%, #1a1d21 70%, var(--primary-color) 100%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .ct-sec-label { color: var(--primary-color) !important; }
body.light-mode .ct-sec-label-line { background: linear-gradient(90deg, var(--primary-color), transparent) !important; }
body.light-mode .ct-divider {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .1) 30%, rgba(var(--primary-color-rgb), .1) 70%, transparent) !important;
}

/* Info cards */
body.light-mode .ct-info-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .ct-info-card:hover {
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ct-info-card::after { opacity: 0 !important; }
body.light-mode .ct-info-card:hover::after { opacity: 1 !important; }
body.light-mode .ct-info-ico {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
}
body.light-mode .ct-info-title { color: #1a1d21 !important; }
body.light-mode .ct-info-subtext { color: #6c757d !important; }

/* Form card */
body.light-mode .ct-main { background: #f8f9fa !important; }
body.light-mode .ct-form-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .ct-form-card::after { background: linear-gradient(90deg, transparent, var(--primary-color), transparent) !important; }
body.light-mode .ct-form-title { color: #1a1d21 !important; }
body.light-mode .ct-form-sub { color: #6c757d !important; }
body.light-mode .ct-fg label { color: #6c757d !important; }
body.light-mode .ct-fc {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    color: #1a1d21 !important;
}
body.light-mode .ct-fc::placeholder { color: #adb5bd !important; }
body.light-mode .ct-fc:focus {
    border-color: var(--primary-color) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ct-social-box { border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .ct-social-title { color: #6c757d !important; }
body.light-mode .ct-soc-link {
    background: #f8f9fa !important;
    border-color: rgba(0,0,0,.1) !important;
    color: #6c757d !important;
}

/* Map card */
body.light-mode .ct-map-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .ct-map-header {
    border-bottom-color: rgba(var(--primary-color-rgb), .08) !important;
}

/* ──────────────────────────────────────────────────────────────
   §11  ABOUT PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .ab { background: #f8f9fa !important; color: #1a1d21 !important; }

/* Section titles */
body.light-mode .ab-sec-title { color: #1a1d21 !important; }
body.light-mode .ab-sec-title .grd {
    background: linear-gradient(125deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 45%, #1a1d21 70%, var(--primary-color) 100%) !important;
    background-size: 250% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .ab-sec-label { color: var(--primary-color) !important; }
body.light-mode .ab-sec-label-line { background: linear-gradient(90deg, var(--primary-color), transparent) !important; }
body.light-mode .ab-sec-sub { color: #6c757d !important; }
body.light-mode .ab-divider {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .1) 30%, rgba(var(--primary-color-rgb), .1) 70%, transparent) !important;
}

/* Story section */
body.light-mode .ab-story { background: #f8f9fa !important; }
body.light-mode .ab-story::before { background: radial-gradient(ellipse 60% 55% at 100% 50%, rgba(var(--primary-color-rgb), .04), transparent 65%) !important; }
body.light-mode .ab-story-visual {
    background: rgba(var(--primary-color-rgb), .04) !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ab-story-chip {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .14) !important;
    box-shadow: 0 8px 28px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ab-chip-num { color: #1a1d21 !important; }
body.light-mode .ab-chip-lbl { color: #6c757d !important; }
body.light-mode .ab-story-heading { color: #1a1d21 !important; }
body.light-mode .ab-story-p { color: #495057 !important; }

/* Mission/Vision cards */
body.light-mode .ab-mv { background: #ffffff !important; }
body.light-mode .ab-mv-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .ab-mv-card:hover {
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    box-shadow: 0 20px 60px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ab-mv-num { color: rgba(var(--primary-color-rgb), .06) !important; }
body.light-mode .ab-mv-text { color: #495057 !important; }

/* Stats */
body.light-mode .ab-stats {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 100%) !important;
}
body.light-mode .ab-stats::before { background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.1) 0%, transparent 60%) !important; }
body.light-mode .ab-stats-border { background: linear-gradient(90deg, transparent, rgba(255,255,255,.25) 30%, rgba(255,255,255,.25) 70%, transparent) !important; }
body.light-mode .ab-stat-card { border-right-color: rgba(255,255,255,.15) !important; }
body.light-mode .ab-stat-num { color: #fff !important; }
body.light-mode .ab-stat-lbl { color: rgba(255,255,255,.78) !important; }

/* Values / Team cards */
body.light-mode .ab-val-card,
body.light-mode .ab-team-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .ab-val-card:hover,
body.light-mode .ab-team-card:hover {
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ab-val-title,
body.light-mode .ab-team-name { color: #1a1d21 !important; }
body.light-mode .ab-val-text,
body.light-mode .ab-team-role { color: #6c757d !important; }
body.light-mode .ab-val-ico-wrap,
body.light-mode .ab-team-ico {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .14) !important;
}

/* CTA section */
body.light-mode .ab-cta {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color, var(--primary-color)) 100%) !important;
}
body.light-mode .ab-cta .ab-sec-title { color: #fff !important; -webkit-text-fill-color: #fff !important; }
body.light-mode .ab-cta .ab-sec-sub { color: rgba(255,255,255,.78) !important; }
body.light-mode .ab-cta .ab-sec-label { color: rgba(255,255,255,.75) !important; }
body.light-mode .ab-cta .ab-sec-label-line { background: rgba(255,255,255,.35) !important; }
body.light-mode .ab-cta .ab-btn-outline {
    border-color: rgba(255,255,255,.35) !important;
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}
body.light-mode .ab-cta .ab-btn-outline:hover { background: rgba(255,255,255,.22) !important; color: #fff !important; }

/* ──────────────────────────────────────────────────────────────
   §12  ORDERS PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .orders-page { background: #f8f9fa !important; color: #1a1d21 !important; }
body.light-mode .page-title {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color, var(--primary-color))) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .page-subtitle { color: #6c757d !important; }
body.light-mode .order-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .order-card:hover {
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    box-shadow: 0 12px 40px rgba(var(--primary-color-rgb), .12) !important;
}
body.light-mode .order-header { border-bottom-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .order-number { color: #1a1d21 !important; }
body.light-mode .order-date { color: #6c757d !important; }
body.light-mode .order-items-preview { border-top-color: rgba(var(--primary-color-rgb), .07) !important; }
body.light-mode .order-item-name { color: #495057 !important; }
body.light-mode .order-item-qty { color: #6c757d !important; }
body.light-mode .order-total-label { color: #6c757d !important; }
body.light-mode .order-total-amount { color: var(--primary-color) !important; }

/* Empty orders */
body.light-mode .empty-orders {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .empty-orders h3 { color: #1a1d21 !important; }
body.light-mode .empty-orders p { color: #6c757d !important; }

/* ──────────────────────────────────────────────────────────────
   §13  ORDER DETAILS PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .order-page { background: #f8f9fa !important; color: #1a1d21 !important; }
body.light-mode .order-title { color: #1a1d21 !important; -webkit-text-fill-color: #1a1d21 !important; }
body.light-mode .order-subtitle { color: #6c757d !important; }
body.light-mode .status-card {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), .06) 0%, rgba(var(--primary-color-rgb), .03) 100%) !important;
    border-color: rgba(var(--primary-color-rgb), .14) !important;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .status-icon {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border: 1px solid rgba(var(--primary-color-rgb), .12) !important;
}
body.light-mode .info-card,
body.light-mode .items-card,
body.light-mode .summary-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .06) !important;
}
body.light-mode .info-title,
body.light-mode .section-title { color: #1a1d21 !important; }
body.light-mode .info-row-label { color: #6c757d !important; }
body.light-mode .info-row-value { color: #1a1d21 !important; }
body.light-mode .order-item-card {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .07) !important;
}
body.light-mode .item-name { color: #1a1d21 !important; }
body.light-mode .item-detail { color: #6c757d !important; }
body.light-mode .total-row { border-top-color: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .total-label { color: #6c757d !important; }
body.light-mode .total-value { color: #1a1d21 !important; }
body.light-mode .grand-total .total-value { color: var(--primary-color) !important; }

/* ──────────────────────────────────────────────────────────────
   §14  PAYMENT PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .payment-page { background: #f8f9fa !important; color: #1a1d21 !important; }
body.light-mode .payment-title {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color, var(--primary-color))) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}
body.light-mode .payment-subtitle { color: #6c757d !important; }
body.light-mode .shipping-review,
body.light-mode .order-review,
body.light-mode .payment-card,
body.light-mode .payment-method-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .07) !important;
    border-radius: 16px !important;
}
body.light-mode .review-title { color: #1a1d21 !important; }
body.light-mode .review-content { color: #495057 !important; }
body.light-mode .review-label { color: #6c757d !important; }
body.light-mode .review-value { color: #1a1d21 !important; }
body.light-mode .payment-method-title { color: #1a1d21 !important; }
body.light-mode .payment-method-option {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .payment-method-option:hover,
body.light-mode .payment-method-option.active {
    background: rgba(var(--primary-color-rgb), .05) !important;
    border-color: rgba(var(--primary-color-rgb), .35) !important;
}
body.light-mode .payment-method-name { color: #1a1d21 !important; }
body.light-mode .payment-method-desc { color: #6c757d !important; }
body.light-mode .mpesa-section {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    border-radius: 12px !important;
}
body.light-mode .mpesa-label { color: #6c757d !important; }
body.light-mode .mpesa-input {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    color: #1a1d21 !important;
}
body.light-mode .mpesa-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), .1) !important;
}

/* ──────────────────────────────────────────────────────────────
   §15  CHECKOUT SUCCESS PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .success-page { background: #f8f9fa !important; color: #1a1d21 !important; }
body.light-mode .success-page::before { display: none !important; }
body.light-mode .success-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .1) !important;
    backdrop-filter: none !important;
}
body.light-mode .success-title { color: #1a1d21 !important; }
body.light-mode .success-message { color: #6c757d !important; }
body.light-mode .success-order-id { color: #6c757d !important; }
body.light-mode .success-order-id span { color: var(--primary-color) !important; }
body.light-mode .success-details {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    border-radius: 12px !important;
}
body.light-mode .success-detail-label { color: #6c757d !important; }
body.light-mode .success-detail-value { color: #1a1d21 !important; }

/* ──────────────────────────────────────────────────────────────
   §16  PAYMENT FAILED PAGE
   ────────────────────────────────────────────────────────────── */
body.light-mode .failed-page { background: #f8f9fa !important; color: #1a1d21 !important; }
body.light-mode .failed-page::before { display: none !important; }
body.light-mode .failed-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .08) !important;
    backdrop-filter: none !important;
}
body.light-mode .failed-title { color: #1a1d21 !important; }
body.light-mode .failed-message { color: #6c757d !important; }
body.light-mode .failed-details {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .08) !important;
    border-radius: 12px !important;
}

/* ──────────────────────────────────────────────────────────────
   §17  SHARED UTILITIES ACROSS ALL PAGES
   ────────────────────────────────────────────────────────────── */

/* Back links */
body.light-mode .cp-back,
body.light-mode .ck-back { color: #6c757d !important; }
body.light-mode .cp-back:hover,
body.light-mode .ck-back:hover { color: var(--primary-color) !important; }

/* Dividers */
body.light-mode .sp-divider,
body.light-mode .ct-divider,
body.light-mode .ab-divider,
body.light-mode .pdp-divider {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .1) 30%, rgba(var(--primary-color-rgb), .1) 70%, transparent) !important;
}

/* Status badges (consistent on all pages) */
body.light-mode .status-pending   { background: rgba(255,193,7,.12) !important; color: #856404 !important; border-color: rgba(255,193,7,.35) !important; }
body.light-mode .status-processing { background: rgba(13,110,253,.1) !important; color: #0a58ca !important; border-color: rgba(13,110,253,.3) !important; }
body.light-mode .status-completed,
body.light-mode .status-paid      { background: rgba(25,135,84,.1) !important; color: #146c43 !important; border-color: rgba(25,135,84,.3) !important; }
body.light-mode .status-cancelled,
body.light-mode .status-failed    { background: rgba(220,53,69,.1) !important; color: #b02a37 !important; border-color: rgba(220,53,69,.3) !important; }
body.light-mode .status-shipped,
body.light-mode .status-delivered { background: rgba(32,201,151,.1) !important; color: #13795b !important; border-color: rgba(32,201,151,.3) !important; }

/* ──────────────────────────────────────────────────────────────
   §18  FOOTER — full light mode adaptation
   ────────────────────────────────────────────────────────────── */
body.light-mode .footer {
    background: #f4f5f9 !important;
    border-top-color: rgba(var(--primary-color-rgb), 0.12) !important;
    color: #4a4d5e !important;
}
body.light-mode .footer::before {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.45) 45%, rgba(var(--primary-color-rgb), 0.45) 55%, transparent) !important;
}
body.light-mode .footer::after {
    background: radial-gradient(ellipse at center, rgba(var(--primary-color-rgb), 0.04), transparent 68%) !important;
}
body.light-mode .footer-section h3 {
    color: #1a1d21 !important;
}
body.light-mode .footer-section p,
body.light-mode .footer-section a {
    color: #6c757d !important;
}
body.light-mode .footer-section:first-child > p {
    color: rgba(80, 85, 105, 0.68) !important;
}
body.light-mode .footer-section a:hover {
    color: var(--primary-color) !important;
}
body.light-mode .ft-contact-txt { color: #6c757d !important; }
body.light-mode .ft-contact-ico {
    background: rgba(var(--primary-color-rgb), 0.07) !important;
    border-color: rgba(var(--primary-color-rgb), 0.14) !important;
}
body.light-mode .ft-contact-row:hover .ft-contact-ico {
    background: rgba(var(--primary-color-rgb), 0.14) !important;
    border-color: rgba(var(--primary-color-rgb), 0.28) !important;
}
body.light-mode .ft-contact-row:hover .ft-contact-txt { color: #3a3d50 !important; }
body.light-mode .social-link {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.14) !important;
    color: #4a4e60 !important;
}
/* Keep brand hover colours in light mode too */
body.light-mode .social-link[aria-label="Facebook"]:hover   { background: #1877f2 !important; border-color: #1877f2 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(24,119,242,.35) !important; }
body.light-mode .social-link[aria-label="Instagram"]:hover  { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4) !important; border-color: #dd2a7b !important; color: #fff !important; box-shadow: 0 8px 22px rgba(221,42,123,.32) !important; }
body.light-mode .social-link[aria-label="X / Twitter"]:hover{ background: #000 !important; border-color: #333 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.3) !important; }
body.light-mode .social-link[aria-label="WhatsApp"]:hover   { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; box-shadow: 0 8px 22px rgba(37,211,102,.35) !important; }
body.light-mode .newsletter-form input {
    background: #ffffff !important;
    border-color: #dde1eb !important;
    color: #1a1d21 !important;
}
body.light-mode .newsletter-form input:focus {
    border-color: rgba(var(--primary-color-rgb), 0.5) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1) !important;
    background: #fff !important;
}
body.light-mode .newsletter-form input::placeholder { color: #b0b8ca !important; }
body.light-mode .ft-nl-input-wrap > svg { color: #b0b8ca !important; }
body.light-mode .footer-divider {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.09) 25%, rgba(0,0,0,0.09) 75%, transparent) !important;
}
body.light-mode .footer-bottom {
    color: rgba(100, 108, 130, 0.55) !important;
}

/* ──────────────────────────────────────────────────────────────
   §19  AUTH PAGES — Login & Register (.ap)
   White mode mirrors admin dashboard: white card, f8f9fa page bg,
   primary-colour accents, soft radial glow on brand panel.
   ────────────────────────────────────────────────────────────── */

/* ── Page shell ── */
body.light-mode .ap {
    background: #f8f9fa !important;
}

/* ── Background layers: suppress dark mesh, apply soft light glow ── */
body.light-mode .ap-mesh {
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(var(--primary-color-rgb), .07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 10% 80%, rgba(var(--primary-color-rgb), .04) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 90% 90%, rgba(var(--primary-color-rgb), .03) 0%, transparent 50%) !important;
}
body.light-mode .ap-grid {
    background-image:
        linear-gradient(rgba(var(--primary-color-rgb), .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-color-rgb), .025) 1px, transparent 1px) !important;
}

/* Suppress animated particles in light mode */
body.light-mode .ap-particles { display: none !important; }

/* ── Left brand panel ── */
body.light-mode .ap-brand {
    background:
        radial-gradient(ellipse 110% 80% at 80% -10%, rgba(var(--primary-color-rgb), .1) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at -10% 90%, rgba(var(--primary-color-rgb), .06) 0%, transparent 50%),
        #ffffff !important;
    border-right: 1px solid rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ap-brand::after {
    background: linear-gradient(180deg, transparent, rgba(var(--primary-color-rgb), .12) 30%, rgba(var(--primary-color-rgb), .12) 70%, transparent) !important;
}
body.light-mode .ap-brand::before {
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), .06) 0%, transparent 65%) !important;
    opacity: .5 !important;
}

/* Floating radial orbs — keep but lighten */
body.light-mode .ap-f1 {
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), .08), transparent 65%) !important;
}
body.light-mode .ap-f2 {
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), .05), transparent 65%) !important;
}

/* Brand text */
body.light-mode .ap-brand-name { color: #1a1d21 !important; }
body.light-mode .ap-brand-tagline { color: #6c757d !important; }
body.light-mode .ap-headline { color: #1a1d21 !important; }
body.light-mode .ap-headline em { color: var(--primary-color) !important; }
body.light-mode .ap-desc { color: #6c757d !important; }

/* Logo box */
body.light-mode .ap-logo-box {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .22) !important;
}

/* Feature pills */
body.light-mode .ap-feat {
    background: rgba(var(--primary-color-rgb), .04) !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
    backdrop-filter: none !important;
}
body.light-mode .ap-feat-ico {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .18) !important;
    /* filter out dark emoji tones — can't do much for emoji, but the bg helps */
}
body.light-mode .ap-feat-text { color: #495057 !important; }

/* Mini stats strip */
body.light-mode .ap-stats-row {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .12) !important;
}
body.light-mode .ap-stat-item {
    border-right-color: rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .ap-stat-val { color: #1a1d21 !important; }
body.light-mode .ap-stat-val span { color: var(--primary-color) !important; }
body.light-mode .ap-stat-lbl { color: #9ca3af !important; }

/* Brand bottom bar */
body.light-mode .ap-brand-bottom { color: #9ca3af !important; }
body.light-mode .ap-brand-bottom a { color: #9ca3af !important; }
body.light-mode .ap-brand-bottom a:hover { color: var(--primary-color) !important; }
body.light-mode .ap-badge {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .ap-badge-dot {
    background: var(--primary-color) !important;
}

/* ── Form panel background ── */
body.light-mode .ap-form-panel {
    background: transparent !important;
}

/* ── Back link ── */
body.light-mode .ap-back {
    color: #9ca3af !important;
}
body.light-mode .ap-back:hover {
    color: var(--primary-color) !important;
}

/* ── Mobile top bar ── */
body.light-mode .ap-mobile-logo-box {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .18) !important;
}
body.light-mode .ap-mobile-name { color: #1a1d21 !important; }

/* ── Form card — admin white card style ── */
body.light-mode .ap-card {
    background: #ffffff !important;
    border: 2px solid rgba(var(--primary-color-rgb), .08) !important;
    box-shadow: 0 8px 40px rgba(var(--primary-color-rgb), .1), 0 2px 8px rgba(0,0,0,.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.light-mode .ap-card::before {
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), .25), transparent) !important;
}

/* ── Card header text ── */
body.light-mode .ap-form-title { color: #1a1d21 !important; }
body.light-mode .ap-form-sub { color: #6c757d !important; }
body.light-mode .ap-eyebrow {
    background: rgba(var(--primary-color-rgb), .08) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
    color: var(--primary-color) !important;
}
body.light-mode .ap-eyebrow-dot { background: var(--primary-color) !important; }

/* ── Alerts ── */
body.light-mode .ap-alert-err {
    background: rgba(239, 68, 68, .06) !important;
    border-color: rgba(239, 68, 68, .2) !important;
    color: #c0392b !important;
}
body.light-mode .ap-alert-ok {
    background: rgba(25, 135, 84, .06) !important;
    border-color: rgba(25, 135, 84, .2) !important;
    color: #146c43 !important;
}

/* ── Form fields ── */
/* Old label selector — kept for backward compat */
body.light-mode .fg-label span,
body.light-mode .fg-label.fg-lbl-plain,
body.light-mode label.fg-label {
    color: #495057 !important;
}
body.light-mode .fg-label a { color: #9ca3af !important; }
body.light-mode .fg-label a:hover { color: var(--primary-color) !important; }

/* New label system (.fg-lbl / .fg-label-row / .fg-lbl-link) */
body.light-mode .fg-lbl,
body.light-mode label.fg-lbl { color: #6c757d !important; }
body.light-mode .fg-lbl-link { color: #9ca3af !important; }
body.light-mode .fg-lbl-link:hover { color: var(--primary-color) !important; }

body.light-mode .fg-input {
    background: #f8f9fa !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    color: #1a1d21 !important;
}
body.light-mode .fg-input::placeholder { color: #adb5bd !important; }
body.light-mode .fg-input:focus {
    background: #ffffff !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), .1) !important;
}
body.light-mode .fg-input.invalid {
    border-color: rgba(220, 53, 69, .5) !important;
    background: rgba(220, 53, 69, .03) !important;
}
body.light-mode .fg-ico { color: #adb5bd !important; }
body.light-mode .fg-wrap:focus-within .fg-ico { color: var(--primary-color) !important; }
body.light-mode .fg-eye { color: #adb5bd !important; }
body.light-mode .fg-eye:hover { color: #495057 !important; }
body.light-mode .fg-err { color: #c0392b !important; }

/* ── Remember / opts row ── */
body.light-mode .fg-check { color: #6c757d !important; }
body.light-mode .fg-forgot { color: #9ca3af !important; }
body.light-mode .fg-forgot:hover { color: var(--primary-color) !important; }

/* ── Divider ── */
body.light-mode .ap-div { color: #ced4da !important; }
body.light-mode .ap-div::before,
body.light-mode .ap-div::after { background: rgba(var(--primary-color-rgb), .1) !important; }

/* ── Card footer link ── */
body.light-mode .ap-card-foot { color: #6c757d !important; }
body.light-mode .ap-card-foot a { color: var(--primary-color) !important; }

/* ── Password strength meter ── */
body.light-mode .ap-strength-bar { background: rgba(var(--primary-color-rgb), .08) !important; }
body.light-mode .ap-strength-label { color: #6c757d !important; }

/* ── Arrow button icon ── */
body.light-mode .ap-btn-arrow { color: #ffffff !important; }

/* ──────────────────────────────────────────────────────────────
   §HOME HERO DESIGN 2 — Coverflow Carousel (.h2o-card)
   ────────────────────────────────────────────────────────────── */

/* Suppress dark radial glow & scan line */
body.light-mode .hp .h2o-glow { opacity: 0 !important; animation: none !important; }
body.light-mode .hp .h2o-scan { opacity: 0 !important; animation: none !important; }
body.light-mode .hp .h2o-progress-ring { border-color: transparent !important; }

/* Individual cards */
body.light-mode .hp .h2o-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 8px 32px rgba(var(--primary-color-rgb), .08), 0 2px 8px rgba(0,0,0,.06) !important;
}
body.light-mode .hp .h2o-card.h2o-active {
    border-color: rgba(var(--primary-color-rgb), .35) !important;
    box-shadow: 0 20px 60px rgba(var(--primary-color-rgb), .14), 0 0 40px rgba(var(--primary-color-rgb), .08) !important;
    animation: none !important;
}
body.light-mode .hp .h2o-card.h2o-side {
    border-color: rgba(var(--primary-color-rgb), .07) !important;
}

/* Image zone */
body.light-mode .hp .h2o-img-grad {
    background: linear-gradient(0deg, rgba(255,255,255,.9) 0%, transparent 100%) !important;
}

/* Rating badge (top-right) */
body.light-mode .hp .h2o-badge-rate {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(0,0,0,.09) !important;
    color: #f59e0b !important;
}
body.light-mode .hp .h2o-badge-rate span { color: #6c757d !important; }

/* Card body text */
body.light-mode .hp .h2o-name  { color: #1a1d21 !important; }
body.light-mode .hp .h2o-price { color: var(--primary-color) !important; }

/* Floating notification chips */
body.light-mode .hp .h2o-chip-order,
body.light-mode .hp .h2o-chip-sold {
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.1) !important;
}
body.light-mode .hp .h2o-chip-t { color: #1a1d21 !important; }
body.light-mode .hp .h2o-chip-s { color: #6c757d !important; }

/* Navigation dots & arrows */
body.light-mode .hp .h2o-dot { background: rgba(var(--primary-color-rgb), .18) !important; }
body.light-mode .hp .h2o-dot.h2o-dot-on {
    background: rgba(var(--primary-color-rgb), .22) !important;
    box-shadow: 0 0 8px rgba(var(--primary-color-rgb), .2) !important;
}
body.light-mode .hp .h2o-arr {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .18) !important;
    color: var(--primary-color) !important;
}
body.light-mode .hp .h2o-arr:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Pause badge */
body.light-mode .hp .h2o-pause-badge {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(var(--primary-color-rgb), .15) !important;
    color: #6c757d !important;
}

/* ──────────────────────────────────────────────────────────────
   §HOME HERO DESIGN 3 — Grid Mosaic (.h3d-card)
   ────────────────────────────────────────────────────────────── */

/* Suppress dark mesh grid background */
body.light-mode .hp .h3-mesh {
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(var(--primary-color-rgb), .025) 40px),
        repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(var(--primary-color-rgb), .025) 40px) !important;
}

/* Left-column text */
body.light-mode .hp .h3-title { color: #1a1d21 !important; }
body.light-mode .hp .h3-t1    { color: #1a1d21 !important; }
body.light-mode .hp .h3-t2    { -webkit-text-stroke: 2px var(--primary-color) !important; -webkit-text-fill-color: transparent !important; }
body.light-mode .hp .h3-desc  { color: #6c757d !important; }
body.light-mode .hp .h3-trust-chip { color: #6c757d !important; }
body.light-mode .hp .h3-badge {
    background: rgba(var(--primary-color-rgb), .07) !important;
    border-color: rgba(var(--primary-color-rgb), .2) !important;
}

/* Product grid cards */
body.light-mode .hp .h3d-card {
    background: #ffffff !important;
    border-color: rgba(var(--primary-color-rgb), .1) !important;
    box-shadow: 0 6px 24px rgba(var(--primary-color-rgb), .08), 0 2px 8px rgba(0,0,0,.06) !important;
}
body.light-mode .hp .h3d-card:hover {
    border-color: rgba(var(--primary-color-rgb), .28) !important;
    box-shadow: 0 16px 48px rgba(var(--primary-color-rgb), .14) !important;
}

/* Image filter — brighten up on light bg */
body.light-mode .hp .h3d-img img {
    filter: brightness(.72) saturate(1.05) !important;
}
body.light-mode .hp .h3d-card:hover .h3d-img img {
    filter: brightness(.58) saturate(1.15) !important;
}

/* Dark overlay gradient → lighter */
body.light-mode .hp .h3d-overlay {
    background: linear-gradient(0deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.1) 55%, transparent 100%) !important;
}

/* Category badge */
body.light-mode .hp .h3d-badge {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(var(--primary-color-rgb), .22) !important;
    color: var(--primary-color) !important;
    backdrop-filter: none !important;
}

/* Card info (bottom) */
body.light-mode .hp .h3d-name  { color: #1a1d21 !important; }
body.light-mode .hp .h3d-price { color: var(--primary-color) !important; }