/* ============================================================
   COLOR SCHEME OVERRIDE — Dark / Light Mode
   Applied via  html[data-scheme="dark"]  or  html[data-scheme="light"]
   Loaded after the active theme stylesheet so it wins via specificity.
   Overrides all 6 themes' CSS custom properties.
   The accent --primary-color is intentionally NOT overridden so the
   user's chosen accent colour shows through in both modes.
   ============================================================ */

/* ──────────────────────────────────────────
   DARK MODE
   ────────────────────────────────────────── */
html[data-scheme="dark"] {
    /* backgrounds */
    --page-bg:       #0d0d10 !important;
    --nav-bg:        rgba(16,16,22,0.96) !important;
    --strip-bg:      #161619 !important;
    --sidebar-bg:    #111116 !important;
    --header-bg:     rgba(13,13,16,0.94) !important;
    --card-bg:       rgba(255,255,255,0.055) !important;
    --card-border:   rgba(255,255,255,0.10) !important;
    --glass-bg:      rgba(255,255,255,0.05) !important;

    /* text */
    --text:           #E8ECF4 !important;
    --text-1:         #E8ECF4 !important;
    --text-2:         #94A3B8 !important;
    --text-3:         #4A5568 !important;
    --text-primary:   #E8ECF4 !important;
    --text-secondary: #94A3B8 !important;
    --text-muted:     #94A3B8 !important;

    /* surfaces */
    --surface:        #15151b !important;

    /* borders & shadows */
    --border:       rgba(255,255,255,0.09) !important;
    --border-color: rgba(255,255,255,0.09) !important;
    --border-dark:  rgba(255,255,255,0.22) !important;
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.45) !important;
    --shadow-md:    0 4px 18px rgba(0,0,0,0.55) !important;
    --shadow-lg:    0 12px 42px rgba(0,0,0,0.65) !important;
}

html[data-scheme="dark"] body {
    background: #0d0d10 !important;
    background-image: none !important;
    background-attachment: initial !important;
    color: #E8ECF4 !important;
}

/* cards, product tiles — solid dark surface (the previous
   rgba(255,255,255,0.055) overlay was rendering as a near-white
   tint against light theme baselines that bled through). */
html[data-scheme="dark"] .card,
html[data-scheme="dark"] .product-card,
html[data-scheme="dark"] [class*="-card"]:not(.b-bar):not(.b-sidebar):not(.b-btn-primary):not(.b-btn-ghost) {
    background: #15151b !important;
    border-color: rgba(255,255,255,0.08) !important;
}
/* The big products grid + blog wrapper card on the home/category
   pages — explicitly transparent so it reads as the page itself,
   not a slightly-lighter slab in the middle of the dark canvas. */
html[data-scheme="dark"] .bestsell-card.data_grid,
html[data-scheme="dark"] .card.store-blog,
html[data-scheme="dark"] .card.store-blog--archive,
html[data-scheme="dark"] .card.store-post {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Card-body inside the products grid also stays transparent (the
   product tiles inside have their own dark surfaces). */
html[data-scheme="dark"] .bestsell-card.data_grid > .card-body,
html[data-scheme="dark"] .bestsell-card.data_grid > .card-header {
    background: transparent !important;
}

/* navigation / headers */
html[data-scheme="dark"] .main-menu,
html[data-scheme="dark"] .header-area,
html[data-scheme="dark"] .site-header,
html[data-scheme="dark"] .category-strip,
html[data-scheme="dark"] .navbar {
    background: rgba(16,16,22,0.96) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDE MENU LAYOUT — full dark sweep across every variant
   When the merchant picks "צדדי" for menu placement, the storefront
   gets a 260-280px fixed sidebar with the brand, categories, and
   action icons. Light defaults are hardcoded in custom.css (white
   bg, #1a1a1a text, light hovers, dark borders) — they all need
   counterparts here so dark mode looks intentional, not broken.
   ═══════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] body.layout-side .main-menu {
    background: #15151b !important;
    border-inline-end-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.45) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .navbar-hader {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item {
    color: #e8ecf4 !important;
    background: transparent;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--primary-color, #fff) !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .custom-list-group-item.active {
    background: var(--primary-color, #fff) !important;
    color: #0e1015 !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-cat-link {
    color: #cfd5e1 !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-cat-link:hover {
    color: #ffffff !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .title-category {
    color: #94a3b8 !important;
}
html[data-scheme="dark"] body.layout-side .main-menu .sub-toggle-btn {
    color: #cfd5e1 !important;
}
/* "Side menu actions" block at the top of the sidebar (search,
   profile, cart triggers + the brand name + tagline). */
html[data-scheme="dark"] body.layout-side .side-menu-actions {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__name {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-actions__tagline {
    color: #94a3b8 !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-extra__icon {
    background: rgba(255, 255, 255, 0.06) !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-extra__link {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body.layout-side .side-menu-extra__link:hover .side-menu-extra__icon {
    background: rgba(255, 255, 255, 0.10) !important;
}
html[data-scheme="dark"] body.layout-side .nav-item--divider {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Variant-specific overrides — each side variant has a slightly
   different surface treatment that needs adapting. */

/* FULL (default rich sidebar) */
html[data-scheme="dark"] body.layout-side.side-variant-full .main-menu {
    background: #15151b !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-full .side-menu-actions__name {
    color: #e8ecf4 !important;
}

/* ICONS — narrow icon-only rail */
html[data-scheme="dark"] body.layout-side.side-variant-icons .main-menu {
    background: #111116 !important;
}

/* DRAWER — slim tab that expands on hover */
html[data-scheme="dark"] body.layout-side.side-variant-drawer .main-menu {
    background: #111116 !important;
}

/* FLOATING — detached pill */
html[data-scheme="dark"] body.layout-side.side-variant-floating .main-menu {
    background: rgba(21, 21, 27, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-floating .main-menu .custom-list-group-item {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-floating .main-menu .custom-list-group-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-floating .main-menu .custom-list-group-item.active {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* GLASS — translucent blurred sidebar */
html[data-scheme="dark"] body.layout-side.side-variant-glass .main-menu {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-glass .navbar-hader,
html[data-scheme="dark"] body.layout-side.side-variant-glass .side-menu-actions {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-glass .side-menu-actions__name {
    color: #ffffff !important;
}

/* EDITORIAL — typographic, refined */
html[data-scheme="dark"] body.layout-side.side-variant-editorial .main-menu {
    background: #15151b !important;
}
html[data-scheme="dark"] body.layout-side.side-variant-editorial .main-menu .title-category {
    color: #6b7280 !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* The mobile drawer that toggles the sidebar open via .menu-open */
html[data-scheme="dark"] .main-menu-backdrop {
    background: rgba(0, 0, 0, 0.65) !important;
}

/* footer */
html[data-scheme="dark"] footer,
html[data-scheme="dark"] .footer-area {
    background: #0a0a0d !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* inputs & selects */
html[data-scheme="dark"] input,
html[data-scheme="dark"] select,
html[data-scheme="dark"] textarea {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #E8ECF4 !important;
}

/* modal / overlay panels */
html[data-scheme="dark"] .modal-content,
html[data-scheme="dark"] .cart-sidebar,
html[data-scheme="dark"] .offcanvas,
html[data-scheme="dark"] .dropdown-menu {
    background: #18181f !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #E8ECF4 !important;
}

/* ──────────────────────────────────────────
   COMPONENT TOKEN OVERRIDES (dark)
   The cart sidebar (--cart-*) and product card (--pc-*) keep their own
   colour tokens scoped to their root elements, so they don't pick up the
   global --card-bg / --text-1 / --border overrides above. Re-bind those
   tokens here so each component goes properly dark.
   ────────────────────────────────────────── */
html[data-scheme="dark"] #idcartpopup {
    --cart-bg:        #0f0f14 !important;
    --cart-surface:   rgba(255,255,255,0.045) !important;
    --cart-soft:      rgba(255,255,255,0.07) !important;
    --cart-border:    rgba(255,255,255,0.10) !important;
    --cart-divider:   rgba(255,255,255,0.08) !important;
    --cart-text-1:    #E8ECF4 !important;
    --cart-text-2:    #94A3B8 !important;
    --cart-text-3:    #6b7280 !important;
    --cart-shadow:    0 1px 2px rgba(0,0,0,0.45), 0 8px 28px rgba(0,0,0,0.55) !important;
}
html[data-scheme="dark"] #idcartpopup input.coupon {
    background: rgba(255,255,255,0.07) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] #idcartpopup input.coupon::placeholder { color: #94A3B8 !important; }

/* The product-card design tokens live on .pc (shared by every variant —
   .product-card--default / --compact / --minimal / --badge / --list /
   --showcase all include the .pc class). Targeting .pc directly is the
   only way to re-bind --pc-* in dark mode. */
html[data-scheme="dark"] .pc,
html[data-scheme="dark"] [class*="product-card"] {
    --pc-surface:  #15151b !important;
    --pc-soft:     rgba(255,255,255,0.075) !important;
    --pc-text-1:   #E8ECF4 !important;
    --pc-text-2:   #94A3B8 !important;
    --pc-text-3:   #6b7280 !important;
    --pc-divider:  rgba(255,255,255,0.10) !important;
    --pc-border:   1px solid rgba(255,255,255,0.10) !important;
    --pc-shadow-rest:  0 1px 3px rgba(0,0,0,0.40) !important;
    --pc-shadow-hover: 0 12px 32px rgba(0,0,0,0.60), 0 2px 4px rgba(0,0,0,0.30) !important;
}
/* Cards also have a few text fills that bypass --pc-text-1 (hardcoded
   #1a1a1a or #fff in card.css) — beat them with light text here. */
html[data-scheme="dark"] .pc h2,
html[data-scheme="dark"] .pc h3,
html[data-scheme="dark"] .pc h4,
html[data-scheme="dark"] .pc p,
html[data-scheme="dark"] .pc span,
html[data-scheme="dark"] [class*="product-card"] h2,
html[data-scheme="dark"] [class*="product-card"] h3,
html[data-scheme="dark"] [class*="product-card"] h4,
html[data-scheme="dark"] [class*="product-card"] p,
html[data-scheme="dark"] [class*="product-card"] span {
    color: var(--pc-text-1) !important;
}

/* Hero variants — text/banner have their own backgrounds. The text
   variant uses the active --primary as bg which already adapts; the
   slider variant has a card-bg fallback that needs flipping. */
html[data-scheme="dark"] .hero-slider {
    background: rgba(255,255,255,0.04) !important;
    color: #94A3B8 !important;
}

/* Filter / sort chrome inside the products card — those bits have
   hardcoded greys that look wrong against the dark page bg. */
html[data-scheme="dark"] .card-header,
html[data-scheme="dark"] .card-footer {
    background: transparent !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .card-title,
html[data-scheme="dark"] .card-text { color: #E8ECF4 !important; }
html[data-scheme="dark"] .sort-area .card-text,
html[data-scheme="dark"] .filter-by p { color: #94A3B8 !important; }

/* Dropdowns inside the navbar (profile, language, store switcher)
   use the global .dropdown-menu rule above for their bg but the
   individual items kept their hardcoded dark text. */
html[data-scheme="dark"] .dropdown-menu .dropdown-item { color: #E8ECF4 !important; }
html[data-scheme="dark"] .dropdown-menu .dropdown-item:hover,
html[data-scheme="dark"] .dropdown-menu .dropdown-item:focus {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
}

/* Trust strip + cart-side-panel + overlay backdrops */
html[data-scheme="dark"] .cart-trust,
html[data-scheme="dark"] .cart-side-panel,
html[data-scheme="dark"] .store-profile-popup__card {
    background: #15151b !important;
    color: #E8ECF4 !important;
    border-color: rgba(255,255,255,0.10) !important;
}
html[data-scheme="dark"] .store-profile-tile {
    background: rgba(255,255,255,0.05) !important;
    color: #E8ECF4 !important;
    border-color: rgba(255,255,255,0.10) !important;
}
html[data-scheme="dark"] .store-profile-tile:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.18) !important;
}
html[data-scheme="dark"] .store-profile-tile__icon {
    background: rgba(255,255,255,0.07) !important;
    color: #E8ECF4 !important;
    border-color: rgba(255,255,255,0.12) !important;
}
html[data-scheme="dark"] .store-profile-tile__label { color: #E8ECF4 !important; }
html[data-scheme="dark"] .store-profile-tile__hint  { color: #94A3B8 !important; }

/* Navbar action buttons (profile / cart / search triggers) */
html[data-scheme="dark"] .nav-cart-icon,
html[data-scheme="dark"] .nav-search-trigger,
html[data-scheme="dark"] .nav-profile-trigger,
html[data-scheme="dark"] .search-bar .btn.bg--gray,
html[data-scheme="dark"] .search-bar a.btn.bg--gray {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .nav-cart-icon:hover,
html[data-scheme="dark"] .nav-search-trigger:hover,
html[data-scheme="dark"] .nav-profile-trigger:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.18) !important;
}

/* Inline search input on dark headers */
html[data-scheme="dark"] .search-bar > .search-input input,
html[data-scheme="dark"] .search-bar > .search-input #search {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .search-bar > .search-input input::placeholder { color: #94A3B8 !important; }
html[data-scheme="dark"] .search-bar > .search-input .search-icon { color: #94A3B8 !important; }

/* ──────────────────────────────────────────
   CATCH-ALL: text contrast on every container
   The theme stylesheets (style-card-body.css and friends) sprinkle
   hardcoded dark text colours (#111, #0e1015, #1a1a1a, #333…) across
   most of the page. Each one of those would need its own override
   to look right against the dark page bg — easier to set a sensible
   light text default at the body level and reset specific exceptions
   below.
   ────────────────────────────────────────── */
html[data-scheme="dark"] body,
html[data-scheme="dark"] .vertical-layout,
html[data-scheme="dark"] .app-content,
html[data-scheme="dark"] .content-wrapper,
html[data-scheme="dark"] .content-body { color: #E8ECF4 !important; }

/* Headings + paragraphs + spans + list items that don't already have
   an explicit colour from a component rule. */
html[data-scheme="dark"] h1,
html[data-scheme="dark"] h2,
html[data-scheme="dark"] h3,
html[data-scheme="dark"] h4,
html[data-scheme="dark"] h5,
html[data-scheme="dark"] h6,
html[data-scheme="dark"] p,
html[data-scheme="dark"] label,
html[data-scheme="dark"] li { color: #E8ECF4; }

/* Muted text (subtitles, hints, secondary info) — uses --text-2 if a
   component already declares it, otherwise falls back to a soft grey. */
html[data-scheme="dark"] .text-muted,
html[data-scheme="dark"] small,
html[data-scheme="dark"] .form-hint,
html[data-scheme="dark"] .invoice-title:not(.total-title) { color: #94A3B8 !important; }

/* Cart line-item text — checkout-items / customer-name / invoice-amt
   in cart_sidebar use hardcoded #1a1a1a. */
html[data-scheme="dark"] .checkout-items,
html[data-scheme="dark"] .customer-name,
html[data-scheme="dark"] .customer-name .title,
html[data-scheme="dark"] .customer-name .title a,
html[data-scheme="dark"] .invoice-amt,
html[data-scheme="dark"] .invoice-amt.total-amount,
html[data-scheme="dark"] .invoice-title.total-title,
html[data-scheme="dark"] .pro_total_price,
html[data-scheme="dark"] .sub_total_price,
html[data-scheme="dark"] .total_pay_price,
html[data-scheme="dark"] .final_total_price { color: #E8ECF4 !important; }

/* The "Sort by" / "Filter by" right-area inside the products card */
html[data-scheme="dark"] .sort-area,
html[data-scheme="dark"] .filter-by { color: #94A3B8; }
html[data-scheme="dark"] .sort-icon { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.10); }
html[data-scheme="dark"] .sort-icon svg path { fill: #94A3B8; }
html[data-scheme="dark"] .sort-icon[style*="fill"] svg path,
html[data-scheme="dark"] a.sort-icon[data-val][class*="active"] svg path { fill: #E8ECF4 !important; }

/* The store-search-popup overlay backdrop already uses rgba(0,0,0,.72)
   so it works in both modes — only the centred card needs to flip. */
html[data-scheme="dark"] .store-search-popup--overlay .store-search-popup__inner,
html[data-scheme="dark"] .store-search-popup--dropdown .store-search-popup__inner {
    background: #15151b !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .store-search-popup__input { background: transparent !important; color: #E8ECF4 !important; }

/* Footer surfaces that aren't gradient/trust variants */
html[data-scheme="dark"] .store-footer:not(.store-footer--gradient):not(.store-footer--trust),
html[data-scheme="dark"] .store-footer__col h4,
html[data-scheme="dark"] .store-footer__col a,
html[data-scheme="dark"] .store-footer__brand-name { color: #E8ECF4 !important; }
html[data-scheme="dark"] .store-footer:not(.store-footer--gradient):not(.store-footer--trust) {
    background: #0a0a0d !important;
    border-top-color: rgba(255,255,255,0.10) !important;
}

/* ──────────────────────────────────────────
   LIGHT MODE
   ────────────────────────────────────────── */
html[data-scheme="light"] {
    /* backgrounds */
    --page-bg:       #F5F5F7 !important;
    --nav-bg:        rgba(255,255,255,0.96) !important;
    --strip-bg:      #ffffff !important;
    --sidebar-bg:    #ffffff !important;
    --header-bg:     rgba(255,255,255,0.96) !important;
    --card-bg:       #ffffff !important;
    --card-border:   #E5E7EB !important;
    --glass-bg:      rgba(0,0,0,0.03) !important;

    /* text */
    --text:           #111827 !important;
    --text-1:         #111827 !important;
    --text-2:         #374151 !important;
    --text-3:         #9CA3AF !important;
    --text-primary:   #111827 !important;
    --text-secondary: #6B7280 !important;
    --text-muted:     #6B7280 !important;

    /* surfaces */
    --surface:        #ffffff !important;

    /* borders & shadows */
    --border:       #E5E7EB !important;
    --border-color: #E5E7EB !important;
    --border-dark:  #111827 !important;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.07) !important;
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10) !important;
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.14) !important;
}

html[data-scheme="light"] body {
    background: #F5F5F7 !important;
    background-image: none !important;
    background-attachment: initial !important;
    color: #111827 !important;
}

/* navigation */
html[data-scheme="light"] .main-menu,
html[data-scheme="light"] .header-area,
html[data-scheme="light"] .site-header,
html[data-scheme="light"] .category-strip,
html[data-scheme="light"] .navbar {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
}

/* sidebar (overrides dark sidebars in theme2, theme3, theme5) */
html[data-scheme="light"] [class*="sidebar"],
html[data-scheme="light"] .main-menu {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
}

/* sidebar text fix */
html[data-scheme="light"] [class*="sidebar"] *,
html[data-scheme="light"] .main-menu * {
    color: #111827;
    border-color: #E5E7EB;
}
html[data-scheme="light"] [class*="sidebar"] a:hover,
html[data-scheme="light"] .main-menu a:hover {
    color: var(--primary-color, #1abc9c);
}

/* cards */
html[data-scheme="light"] .card,
html[data-scheme="light"] .product-card,
html[data-scheme="light"] [class*="-card"]:not(.b-bar):not(.b-sidebar):not(.b-btn-primary):not(.b-btn-ghost) {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
}

/* footer — generic light surface, but don't paint over the gradient
   variant which carries its own custom dark gradient background. */
html[data-scheme="light"] footer:not(.store-footer--gradient),
html[data-scheme="light"] .footer-area:not(.store-footer--gradient) {
    background: #F0F0F2 !important;
    border-color: #E5E7EB !important;
}

/* inputs */
html[data-scheme="light"] input,
html[data-scheme="light"] select,
html[data-scheme="light"] textarea {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
    color: #111827 !important;
}

/* modal / overlay panels */
html[data-scheme="light"] .modal-content,
html[data-scheme="light"] .cart-sidebar,
html[data-scheme="light"] .offcanvas,
html[data-scheme="light"] .dropdown-menu {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
    color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT POPUP — full coverage in dark mode
   Storefront uses a centred modal with a side-by-side gallery + body
   layout. The component's own <style> block in product_popup.blade.php
   hardcodes #fff, #f7f5f2, #111, #6b7280 throughout. We re-skin every
   surface here so the popup reads as a polished dark dialog.
   ═══════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] .pp-modal {
    background: #18181f !important;
    color: #E8ECF4 !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}
html[data-scheme="dark"] .pp-close {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #E8ECF4 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-scheme="dark"] .pp-close:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}
html[data-scheme="dark"] .pp-gallery {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-scheme="dark"] .pp-main-img-wrap {
    background: rgba(255, 255, 255, 0.06) !important;
}
html[data-scheme="dark"] .pp-thumb {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-scheme="dark"] .pp-thumb.is-active {
    border-color: rgba(255, 255, 255, 0.40) !important;
}
html[data-scheme="dark"] .pp-title { color: #E8ECF4 !important; }
html[data-scheme="dark"] .pp-meta,
html[data-scheme="dark"] .pp-meta-cat { color: #cfd5e1 !important; }
html[data-scheme="dark"] .pp-desc { color: #cfd5e1 !important; }
html[data-scheme="dark"] .pp-price { color: #E8ECF4 !important; }
html[data-scheme="dark"] .pp-price--old { color: #8b94a7 !important; }
html[data-scheme="dark"] .pp-divider,
html[data-scheme="dark"] .pp-body hr { border-color: rgba(255, 255, 255, 0.08) !important; }
/* Quantity stepper */
html[data-scheme="dark"] .pp-qty,
html[data-scheme="dark"] .pp-qty-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-scheme="dark"] .pp-qty-btn,
html[data-scheme="dark"] .pp-qty-value { color: #E8ECF4 !important; }
html[data-scheme="dark"] .pp-qty-btn:hover {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #E8ECF4 !important;
}
/* Variant pills */
html[data-scheme="dark"] .pp-variant-pill,
html[data-scheme="dark"] .pp-option {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .pp-variant-pill.is-active,
html[data-scheme="dark"] .pp-option.is-active {
    background: #E8ECF4 !important;
    color: #0e1015 !important;
    border-color: #E8ECF4 !important;
}
/* CTA + disabled */
html[data-scheme="dark"] .pp-cart-btn.disabled,
html[data-scheme="dark"] .pp-cart-btn:disabled {
    background: rgba(255, 255, 255, 0.10) !important;
    color: #8b94a7 !important;
}
/* Description scrollbar */
html[data-scheme="dark"] .pp-desc::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18) !important;
}
html[data-scheme="dark"] .pp-desc::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CART SIDEBAR — checkout body + detail forms + instruction card
   The "קלאסי" theme has several hardcoded #fff / #F9FAFB surfaces
   inside the checkout flow (delivery form rows, instruction blocks,
   the rgba(255,255,255,0.2) checkout-body that sits on the primary
   colour band). Re-skinning them here so the entire cart, top to
   bottom, reads as a single coherent dark surface.
   ═══════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] .checkout-body {
    background: rgba(255, 255, 255, 0.06) !important;
}
html[data-scheme="dark"] form.detail-form,
html[data-scheme="dark"] .delivery-card form.detail-form {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] .delivery-card .card-body .form-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-scheme="dark"] .delivery-card .card-body .form-group label,
html[data-scheme="dark"] .delivery-card .card-body .form-group input,
html[data-scheme="dark"] .delivery-card .card-body .form-group textarea,
html[data-scheme="dark"] .delivery-card .card-body .form-group select {
    background: transparent !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .delivery-card .card-body .form-group input::placeholder,
html[data-scheme="dark"] .delivery-card .card-body .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}
html[data-scheme="dark"] .instruction-card .card-body .card-text {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #E8ECF4 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT CARDS — showcase variant edge cases
   The "premium" / showcase variant has a few rules that hardcoded
   light backgrounds for the hover overlay + "NEW" badge.
   ═══════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] .pc-showcase__btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] .product-card--showcase .pc-new-badge {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #E8ECF4 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GENERIC FORM CONTROLS — last-resort sweep
   Catches any remaining text-style inputs that don't have a more
   specific dark rule. Keeps the storefront feel uniform across
   checkout, search, login, contact, coupon, newsletter, etc.
   ═══════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] input[type="text"],
html[data-scheme="dark"] input[type="email"],
html[data-scheme="dark"] input[type="tel"],
html[data-scheme="dark"] input[type="number"],
html[data-scheme="dark"] input[type="password"],
html[data-scheme="dark"] input[type="search"],
html[data-scheme="dark"] input[type="url"],
html[data-scheme="dark"] textarea,
html[data-scheme="dark"] select {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #E8ECF4 !important;
}
html[data-scheme="dark"] input[type="text"]::placeholder,
html[data-scheme="dark"] input[type="email"]::placeholder,
html[data-scheme="dark"] input[type="tel"]::placeholder,
html[data-scheme="dark"] input[type="number"]::placeholder,
html[data-scheme="dark"] input[type="password"]::placeholder,
html[data-scheme="dark"] input[type="search"]::placeholder,
html[data-scheme="dark"] textarea::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
}
html[data-scheme="dark"] input:focus,
html[data-scheme="dark"] textarea:focus,
html[data-scheme="dark"] select:focus {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BULLETPROOF DARK SWEEP — product tiles + blog tiles
   The merchant's screenshot still showed white product cards + blog
   tiles on a dark page. Either:
     (a) the theme's `.product-card { background: var(--card-bg) }`
         rule was being overridden by some other source still hitting
         the cards with white, or
     (b) cascade order was making an earlier light rule win.
   Either way, this block adds the maximum-specificity dark rules so
   every visible card-like surface is guaranteed to flip. The `body`
   in the selector ensures cascade order doesn't matter and every
   property uses !important.
   ═══════════════════════════════════════════════════════════════════ */
html[data-scheme="dark"] body .product-card,
html[data-scheme="dark"] body .product-card.pc,
html[data-scheme="dark"] body .pc,
html[data-scheme="dark"] body .product_item .product-card {
    background: #15151b !important;
    background-color: #15151b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .product-card .title,
html[data-scheme="dark"] body .product-card .product-detail .title,
html[data-scheme="dark"] body .product-card .product-detail h4.title,
html[data-scheme="dark"] body .product-card .pc-title,
html[data-scheme="dark"] body .product-card h2,
html[data-scheme="dark"] body .product-card h3,
html[data-scheme="dark"] body .product-card h4 {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .product-card .qty-item,
html[data-scheme="dark"] body .product-card .product-detail .qty-item,
html[data-scheme="dark"] body .product-card .pc-meta,
html[data-scheme="dark"] body .product-card .text-store {
    color: #94a3b8 !important;
}
html[data-scheme="dark"] body .product-card .price-spin,
html[data-scheme="dark"] body .product-card .product-detail .price-spin,
html[data-scheme="dark"] body .product-card .pc-price {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .product-card .product-image,
html[data-scheme="dark"] body .product-card .pc-image,
html[data-scheme="dark"] body .product-card .pc-soft {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Blog tiles + post wrappers — make the whole 'From the blog' band
   fit on the dark page. The link card itself stays transparent so
   the dark page shows through; only image placeholders + raised
   variants (cards / magazine lead) get a tinted surface. */
html[data-scheme="dark"] body .store-blog,
html[data-scheme="dark"] body .store-blog__head,
html[data-scheme="dark"] body .store-blog__post,
html[data-scheme="dark"] body .store-blog__link {
    background: transparent !important;
}
html[data-scheme="dark"] body .store-blog__title,
html[data-scheme="dark"] body .store-blog__title-line {
    color: #e8ecf4 !important;
}
html[data-scheme="dark"] body .store-blog__excerpt {
    color: #cfd5e1 !important;
}
html[data-scheme="dark"] body .store-blog__date {
    color: #94a3b8 !important;
}
html[data-scheme="dark"] body .store-blog__media {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-scheme="dark"] body .store-blog__media-placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}
/* Specifically the 'list' variant which DOES use a tile surface */
html[data-scheme="dark"] body .store-blog--list .store-blog__link {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-scheme="dark"] body .store-blog--list .store-blog__link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
/* Magazine + cards variants — their tiles are visually raised */
html[data-scheme="dark"] body .store-blog--magazine .store-blog__post:not(.store-blog__post--lead) .store-blog__link {
    background: rgba(255, 255, 255, 0.04) !important;
}
html[data-scheme="dark"] body .store-blog--minimal .store-blog__link {
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Side panel "About the store" + any other secondary card-shaped
   surface that uses --card-bg via the theme. */
html[data-scheme="dark"] body .about-store-section,
html[data-scheme="dark"] body .about-store-section .card,
html[data-scheme="dark"] body .delivery-card,
html[data-scheme="dark"] body .cart-card {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #e8ecf4 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Generic <section> tag — the vendor site.css ships with
   'section { background-color: #f8f8fb }', which is what was
   bleeding through behind the recommended-products band on the
   product page. Force every <section> on the storefront to a
   solid dark surface in dark mode. */
html[data-scheme="dark"] section,
html[data-scheme="dark"] body section {
    background-color: transparent !important;
}
/* Same vendor rule still gave a faint blue-grey #f8f8fb tile around
   storefront <section> tags in LIGHT mode (e.g. the blog band on the
   home page). Force transparency in light mode too so sections pick
   up the page background. */
html[data-scheme="light"] section,
html[data-scheme="light"] body section {
    background-color: transparent !important;
}
/* Belt + suspenders: the storefront blog band specifically, in case
   the scheme attribute isn't set yet or a more specific vendor rule
   gets added later. */
.store-blog,
section.store-blog,
.store-blog--archive,
section.store-blog--archive {
    background-color: transparent !important;
}