/* CS Lumise top bar restyle: dark navy + smaller logo */

/* Keep Lumise's native bar height — only swap colors and shrink logo */
#lumise-navigations {
    background: linear-gradient(180deg, #0F1E2E 0%, #0B1626 100%) !important;
    border-bottom: 1px solid rgba(96, 165, 250, .18) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
}

#lumise-navigations a[data-view="logo"] {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    vertical-align: top !important;
}
#lumise-navigations a[data-view="logo"] img {
    max-height: 22px !important;
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 18px !important;
    filter: brightness(1.05);
}

#lumise-navigations ul[data-block="left"] li > span,
#lumise-navigations ul[data-block="right"] li > span,
#lumise-navigations li[data-tool] > span {
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

#lumise-navigations li[data-tool]:hover > span,
#lumise-navigations li[data-tool].active > span {
    color: #64B5F6 !important;
}

#lumise-navigations li[data-view="sp"] {
    background: rgba(96, 165, 250, .15) !important;
}

/* Submenu dropdowns */
#lumise-navigations ul[data-view="sub"] {
    background: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .15) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55) !important;
}
#lumise-navigations ul[data-view="sub"] li > span,
#lumise-navigations ul[data-view="sub"] li {
    color: #E5EAF2 !important;
    line-height: normal !important;
    height: auto !important;
}
#lumise-navigations ul[data-view="sub"] li:hover {
    background: rgba(37, 99, 235, .15) !important;
}
#lumise-navigations ul[data-view="sub"] header h3 {
    color: #F3F6FA !important;
    border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
}
#lumise-navigations ul[data-view="sub"] small {
    color: #9CA3AF !important;
}

/* Cart / add-to-cart button — keep brand blue */
#lumise-navigations [class*="cart"],
#lumise-navigations [class*="add-to-cart"],
.lumise-add-to-cart,
button[class*="cart"] {
    background: #2196f3 !important;
    color: #FFFFFF !important;
    border-color: #2196f3 !important;
    border-radius: 99px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}
#lumise-navigations [class*="cart"]:hover,
.lumise-add-to-cart:hover {
    background: #1D4ED8 !important;
}

#lumise-navigations ul[data-block="right"] li {
    color: #E5EAF2 !important;
}

#lumise-navigations li.disabled > span,
#lumise-navigations li[data-active="false"] > span {
    color: #6B7280 !important;
}

/* ==========================================================
   CS Lumise dark theme extensions
   Added rules only. Do not duplicate selectors above.
   ========================================================== */

/* ---------- 1. Left tools panel + tab body ---------- */
#lumise-workspace,
#lumise-main {
    background: #0B1626 !important;
}

.lumise-left-nav-wrp {
    background: #0F1E2E !important;
    border-right: 1px solid rgba(96, 165, 250, .15) !important;
}

ul.lumise-left-nav {
    background: #0F1E2E !important;
}

ul.lumise-left-nav > li {
    color: #E5EAF2 !important;
    border-bottom: 1px solid rgba(96, 165, 250, .08) !important;
    background: transparent !important;
}

ul.lumise-left-nav > li > i,
ul.lumise-left-nav > li [class*="lumisex-"],
ul.lumise-left-nav > li [class*="lumise-icon-"] {
    color: #64B5F6 !important;
}

ul.lumise-left-nav > li:hover {
    background: rgba(96, 165, 250, .08) !important;
}

ul.lumise-left-nav > li.active,
ul.lumise-left-nav > li[data-active="true"] {
    background: rgba(37, 99, 235, .18) !important;
    border-left: 3px solid #2196f3 !important;
}

ul.lumise-left-nav > li.active > i,
ul.lumise-left-nav > li.active [class*="lumisex-"],
ul.lumise-left-nav > li[data-active="true"] [class*="lumisex-"] {
    color: #93C5FD !important;
}

.lumise-tabs-nav {
    background: #0F1E2E !important;
    border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
    color: #E5EAF2 !important;
}

.lumise-tabs-nav > li,
.lumise-tabs-nav li > span,
.lumise-tabs-nav li > a {
    color: #9CA3AF !important;
}

.lumise-tabs-nav li.active,
.lumise-tabs-nav li[data-active="true"] {
    color: #64B5F6 !important;
    border-bottom: 2px solid #2196f3 !important;
}

.lumise-tab-body-wrp,
.lumise-tab-body-wrp.smooth,
.lumise-tab-body-wrp.lumise-x-thumbn {
    background: #0B1626 !important;
    color: #E5EAF2 !important;
    scrollbar-color: #2196f3 #0F1E2E;
}

.lumise-tab-body-wrp h1,
.lumise-tab-body-wrp h2,
.lumise-tab-body-wrp h3,
.lumise-tab-body-wrp h4,
.lumise-tab-body-wrp label,
.lumise-tab-body-wrp .lumise-label,
.lumise-tab-body-wrp p,
.lumise-tab-body-wrp small {
    color: #E5EAF2 !important;
}

.lumise-tab-body-wrp ::-webkit-scrollbar { width: 8px; height: 8px; }
.lumise-tab-body-wrp ::-webkit-scrollbar-track { background: #0F1E2E; }
.lumise-tab-body-wrp ::-webkit-scrollbar-thumb { background: rgba(96,165,250,.3); border-radius: 4px; }
.lumise-tab-body-wrp ::-webkit-scrollbar-thumb:hover { background: rgba(96,165,250,.5); }

/* ---------- 2. Stage / canvas wash ---------- */
#lumise-main,
#lumise-stage-nav,
#lumise-zoom-wrp {
    background: #0B1626 !important;
}

#lumise-stage-nav {
    color: #E5EAF2 !important;
    border-top: 1px solid rgba(96, 165, 250, .15) !important;
}

#lumise-stage-nav a,
#lumise-stage-nav span,
#lumise-stage-nav i {
    color: #E5EAF2 !important;
}

#lumise-stage-nav a:hover,
#lumise-stage-nav i:hover {
    color: #64B5F6 !important;
}

#lumise-zoom-thumbn {
    background: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
}

/* ---------- 3. Buttons ---------- */
.lumise-btn-primary,
button.lumise-btn-primary {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    border-radius: 6px !important;
    transition: background .15s ease !important;
}
.lumise-btn-primary:hover,
button.lumise-btn-primary:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
    color: #FFFFFF !important;
}

.lumise-btn,
button.lumise-btn {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    border-radius: 6px !important;
}
.lumise-btn:hover {
    background-color: #283851 !important;
    border-color: rgba(96, 165, 250, .45) !important;
    color: #FFFFFF !important;
}

.lumise-btn.gray,
.lumise-btn.white {
    background-color: #1F2D40 !important;
    color: #E5EAF2 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}
.lumise-btn.gray:hover,
.lumise-btn.white:hover {
    background-color: #283851 !important;
    color: #FFFFFF !important;
}

/* Add-to-cart CTA in cart panel matches top bar cart button */
#lumise-cart-action .lumise-btn-primary,
#lumise-cart-action button,
.lumise-cart-options .lumise-btn-primary,
.lumise-cart-options button[type="submit"] {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
    color: #FFFFFF !important;
    border-radius: 99px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
}
#lumise-cart-action .lumise-btn-primary:hover,
.lumise-cart-options .lumise-btn-primary:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}

/* ---------- 4. Loading / processing overlay ---------- */
#LumiseDesign[data-processing=true]:after {
    background: rgba(11, 22, 38, 0.92) !important;
}
#LumiseDesign[data-processing=true]:before {
    background-color: #0F1E2E !important;
    color: #E5EAF2 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .6) !important;
}
.lumise-loading {
    background-color: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}

/* Pre-init wrapper: kill the white flash before Lumise paints */
#LumiseDesign,
#lumise-no-product {
    background: #0B1626 !important;
    color: #E5EAF2 !important;
}

/* ---------- 5. Right-side cart options panel ---------- */
#lumise-cart-wrp,
.lumise-cart-options,
#lumise-cart-options,
.lumise-cart-attributes,
#lumise-cart-attributes,
#lumise-cart-items {
    background: #0F1E2E !important;
    color: #E5EAF2 !important;
    border-left: 1px solid rgba(96, 165, 250, .15) !important;
}

.lumise-cart-option-label,
.lumise-cart-options label,
.lumise-cart-attributes label {
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 500 !important;
}

.lumise-cart-options select,
.lumise-cart-options input[type="text"],
.lumise-cart-options input[type="number"],
.lumise-cart-options input[type="email"],
.lumise-cart-options textarea,
.lumise-cart-attributes select,
.lumise-cart-attributes input,
.lumise-tab-body-wrp select,
.lumise-tab-body-wrp input[type="text"],
.lumise-tab-body-wrp input[type="number"],
.lumise-tab-body-wrp input[type="search"],
.lumise-tab-body-wrp textarea {
    background: #0B1626 !important;
    color: #F3F6FA !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    border-radius: 6px !important;
    font-family: "Inter", system-ui, sans-serif !important;
}
.lumise-cart-options select:focus,
.lumise-cart-options input:focus,
.lumise-cart-options textarea:focus,
.lumise-cart-attributes select:focus,
.lumise-cart-attributes input:focus,
.lumise-tab-body-wrp select:focus,
.lumise-tab-body-wrp input:focus,
.lumise-tab-body-wrp textarea:focus {
    outline: none !important;
    border-color: #64B5F6 !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, .25) !important;
}

.lumise-price,
.lumise-product-price,
.lumise-price.lumise-product-price {
    color: #F3F6FA !important;
    font-weight: 700 !important;
}

/* ---------- 6. Color presets, prints, switches, toggles ---------- */
.lumise-color-presets,
#lumise-color-presets,
.lumise-prints {
    background: transparent !important;
}
.lumise-color-presets li,
#lumise-color-presets li {
    border: 1px solid rgba(96, 165, 250, .25) !important;
    box-shadow: 0 0 0 2px transparent !important;
}
.lumise-color-presets li.active,
#lumise-color-presets li.active {
    box-shadow: 0 0 0 2px #64B5F6 !important;
    border-color: #64B5F6 !important;
}
.lumise-save-color {
    background-color: #1F2D40 !important;
    color: #64B5F6 !important;
    border: 1px dashed rgba(96, 165, 250, .35) !important;
}

/* Switches and toggles */
.lumise-switch,
.lumise-switch.mr2 {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
    color: #9CA3AF !important;
    border-radius: 6px !important;
}
.lumise-switch > * {
    color: #9CA3AF !important;
}
.lumise-switch .active,
.lumise-switch [data-active="true"],
.lumise-switch > .selected {
    background: #2196f3 !important;
    color: #FFFFFF !important;
}

.lumise-toggle-button {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}
.lumise-toggle-button.active,
.lumise-toggle-button[data-active="true"] {
    background: #2196f3 !important;
    border-color: #2196f3 !important;
}
.lumise-toggle-handle {
    background: #E5EAF2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important;
}
.lumise-toggle-button.active .lumise-toggle-handle,
.lumise-toggle-button[data-active="true"] .lumise-toggle-handle {
    background: #FFFFFF !important;
}
.lumise-toggle-label {
    color: #E5EAF2 !important;
    font-family: "Inter", system-ui, sans-serif !important;
}

/* Radios used in tab bodies */
.lumise-radio,
.lumise_radios li {
    color: #E5EAF2 !important;
}
.lumise_radios li.active,
.lumise-radio.active {
    background: rgba(37, 99, 235, .18) !important;
    color: #93C5FD !important;
}

/* List items (uploads, designs, fonts) */
.lumise-list-items,
#lumise-upload-list,
#lumise-saved-designs,
#lumise-fonts {
    background: transparent !important;
    color: #E5EAF2 !important;
}
.lumise-list-items > li,
#lumise-upload-list > li,
#lumise-saved-designs > li,
#lumise-fonts > li {
    background-color: #1F2D40 !important;
    border: 1px solid rgba(96, 165, 250, .12) !important;
    color: #E5EAF2 !important;
}
.lumise-list-items > li:hover,
#lumise-upload-list > li:hover,
#lumise-saved-designs > li:hover,
#lumise-fonts > li:hover {
    background-color: #283851 !important;
    border-color: rgba(96, 165, 250, .3) !important;
}

/* Top tools bar inside the stage (text/transform tools when an object is selected) */
#lumise-top-tools,
#lumise-text-tools,
#lumise-position-wrp {
    background: #0F1E2E !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    color: #E5EAF2 !important;
}
#lumise-top-tools [class*="lumisex-"],
#lumise-text-tools [class*="lumisex-"] {
    color: #E5EAF2 !important;
}
#lumise-top-tools [class*="lumisex-"]:hover,
#lumise-text-tools [class*="lumisex-"]:hover {
    color: #64B5F6 !important;
}

/* Notices */
#lumise-notices {
    background: #0F1E2E !important;
    color: #E5EAF2 !important;
    border: 1px solid rgba(96, 165, 250, .25) !important;
}

/* ==========================================================
   CS Lumise dark theme — mobile / tablet overrides
   Targets responsive.css fallbacks that revert to teal #00acc1.
   Selectors here intentionally mirror responsive.css specificity
   so we win without resorting to broader !important hammers.
   ========================================================== */
@media only screen and (max-width: 1170px) {
    /* Top-bar "file" submenu when toggled open on tablet */
    div#LumiseDesign div#lumise-navigations ul[data-block][data-resp="file"].active {
        background: linear-gradient(180deg, #0F1E2E 0%, #0B1626 100%) !important;
        border-bottom: 1px solid rgba(96, 165, 250, .15) !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, .35) !important;
    }

    /* back_mobile link sits on the navy bar — keep text readable */
    div#LumiseDesign div#lumise-navigations ul[data-block]>li a.back_mobile,
    div#LumiseDesign div#lumise-navigations ul[data-block]>li.back_mobile a {
        color: #E5EAF2 !important;
    }
    div#LumiseDesign div#lumise-navigations ul[data-block]>li a.back_mobile:hover,
    div#LumiseDesign div#lumise-navigations ul[data-block]>li.back_mobile a:hover {
        color: #64B5F6 !important;
    }
}

@media only screen and (max-width: 736px) {
    /* Bottom-docked left nav active item: brand blue, not teal */
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active {
        background: #2196f3 !important;
        color: #FFFFFF !important;
    }
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active i,
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active [class*="lumisex-"] {
        color: #FFFFFF !important;
    }
    html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li:not(.active):hover {
        background: rgba(96, 165, 250, .12) !important;
        color: #E5EAF2 !important;
    }

    /* Whole bottom nav strip should match the navy panel */
    div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp {
        background: #0F1E2E !important;
        border-top: 1px solid rgba(96, 165, 250, .15) !important;
    }
}


/* === CS brand override: kill Lumise greens/oranges === */
.woocommerce a.lumise-edit-design,
a.lumise-edit-design {
    background-color: #2196f3 !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: "Inter", system-ui, sans-serif !important;
    font-weight: 600 !important;
}
a.lumise-edit-design:hover {
    background: #1976d2 !important;
    color: #fff !important;
    box-shadow: 0 6px 18px -4px rgba(33,150,243,.5) !important;
}
body .lumise-button.alt,
.lumise-button.alt {
    background: #2196f3 !important;
    color: #fff !important;
    border-radius: 999px !important;
}
body .lumise-button.alt:hover,
.lumise-button.alt:hover {
    background: #1976d2 !important;
    color: #fff !important;
}

/* Montserrat static faces (iOS Thin-VF fix, jul 2026) - customizer vuurt geen wp_head dus cs_fonts.php faces ontbreken hier */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/montserrat-v31-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/montserrat-v31-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('/wp-content/uploads/fonts/montserrat-v31-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('/wp-content/uploads/fonts/montserrat-v31-latin-900.woff2') format('woff2'); }


/* ===== CS UX-ronde 25 aug 2026 ===== */

/* Taal-vlaggetjes (topbar + dropdown): bron-PNG is 48x48 met de vlag als
   4:3-band erin; Lumise rendert 48x20 en drukt ze plat. 27x20 met cover
   toont de vlag op de juiste verhouding zonder de balkhoogte te raken. */
#LumiseDesign img[src*="assets/flags/"] {
    width: 27px !important;
    height: 20px !important;
    object-fit: cover !important;
}

/* "Afdrukken" hoort al verborgen te zijn (lumise_settings user_print=0) maar
   Lumise escapet zijn eigen style-attribuut kapot (esc_attr om het hele
   attribuut, wordt "display:none"), dus hij bleef zichtbaar.
   "Help" = de Quick help / hotkeys-lijst, nutteloos voor klanten (user-besluit
   25 aug 2026). Beide via CSS dicht; plugin-updates overleven dit. */
#lumise-navigations li[data-tool="print"],
#lumise-navigations li[data-tool="help"] {
    display: none !important;
}

/* "+ Nieuw ontwerp"-topbarknop (cs_lumise_ux.php): zelfde ritme als de andere items */
#cs-new-design-btn {
    padding: 17px 14px 16px !important;
    cursor: pointer;
}
#cs-new-design-btn > span {
    color: #64B5F6 !important;
    font-weight: 600 !important;
}
#cs-new-design-btn:hover > span {
    color: #90CAF9 !important;
}

/* ===== CS UX-ronde 26 aug 2026: mobiel ===== */

/* Lumise (stock, niet onze restyle) drukt op telefoons de hele rechterkant van
   de topbar (prijs, cart, Toevoegen aan winkelwagen) achter de statusbalk:
   #lumise-proceed stond 60px breed verstopt op y=51. Klanten konden mobiel
   dus NIET toevoegen. Vaste CTA boven de tab-balk. */
@media (max-width: 767px) {
    #lumise-proceed {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 70px !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        z-index: 99998 !important;
        background: linear-gradient(180deg, #2196F3, #1976D2) !important;
        border-radius: 999px !important;
        text-align: center !important;
        padding: 14px 10px !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .45) !important;
    }
    #lumise-proceed > span {
        color: #fff !important;
        font-weight: 700 !important;
        letter-spacing: .02em !important;
    }
    /* Eigen "+ Nieuw ontwerp"-knop overlapt mobiel de opslaan-balk; de
       "Nieuw product starten"-link in de succes-popup volstaat daar. */
    #cs-new-design-btn { display: none !important; }
}

/* Kleuren-teller linksonder (grijze pil "Used N colors"): zonder nut bij
   full-colour print, oogt als kapot leeg element. */
#nav-bottom-left { display: none !important; }

/* Lumise verbergt mobiel de tekst in de proceed-knop (alleen pijl-icoon over);
   forceer het label terug in onze vaste CTA. */
@media (max-width: 767px) {
    #lumise-proceed > span,
    #lumise-proceed span {
        display: inline !important;
        visibility: visible !important;
        font-size: 15px !important;
    }
}

/* Geen donker sub-blokje in de mobiele CTA */
@media (max-width: 767px) {
    #lumise-proceed span {
        background: transparent !important;
    }
}

/* Succes-popup na toevoegen: tekst stond licht-op-licht (Lumise-modal) */
#lumise-update-cart-confirm em {
    color: #14171C !important;
    font-weight: 600 !important;
}

/* ===== CS UX-ronde 26 aug 2026: winkelwagen-popup + blauwe accenten ===== */

/* Lightbox-schil: zachte hoeken + diepe schaduw */
#lumise-lightbox-content {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}

/* "Je winkelwagengegevens": header in huisstijl-navy met blauwe accentlijn */
#lumise-cart-details h3.title {
    background: linear-gradient(180deg, #0F1E2E, #0B1626) !important;
    color: #E5EAF2 !important;
    border-bottom: 2px solid #2196F3 !important;
    font-family: "Inter", system-ui, sans-serif !important;
    letter-spacing: .01em;
}
#lumise-cart-details .lumise-table thead th {
    color: #0F1E2E !important;
    border-bottom: 2px solid rgba(33, 150, 243, .35) !important;
    font-weight: 700 !important;
}
#lumise-cart-details td.product-thumb img {
    background: #f5f6f8 !important;
    border: 1px solid rgba(15, 30, 46, .10) !important;
    border-radius: 10px !important;
    padding: 6px !important;
}
#lumise-cart-details a[href="#edit"] {
    color: #2196F3 !important;
    font-weight: 600;
}
#lumise-cart-details td.lumise-total {
    color: #0F1E2E !important;
}
#lumise-cart-details .lumise-btn-primary,
#lumise-update-cart-confirm .lumise-btn-primary {
    background: linear-gradient(180deg, #2196F3, #1976D2) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    box-shadow: 0 8px 20px -10px rgba(33, 150, 243, .7);
}

/* Lumise-teal accenten -> CardSticker-blauw */
#lumise-general-status a,
#lumise-navigations a:not([data-view="logo"]),
#lumise-product header desc a,
#lumise-update-cart-confirm a {
    color: #2196F3 !important;
}

/* ===== Mini-cart dropdown (winkelwagen-icoon in customizer-topbar) ===== */
#lumise-cart-options ul[data-view="sub"] header {
    background: linear-gradient(180deg, #0F1E2E, #0B1626) !important;
    border-bottom: 2px solid #2196F3 !important;
}
#lumise-cart-options ul[data-view="sub"] header h3 {
    color: #E5EAF2 !important;
}
#lumise-cart-options ul[data-view="sub"] header i {
    color: rgba(229, 234, 242, .7) !important;
}
/* Witte kaart-preview op wit: geef het een licht tegeltje met rand */
#lumise-cart-options [data-view="thumbn"] img {
    background: #eef1f5 !important;
    border: 1px solid rgba(15, 30, 46, .12) !important;
    border-radius: 8px !important;
}
/* Totaal-regel: was grijs-op-wit (laag contrast) */
#lumise-cart-options ul[data-view="items"] li:last-child {
    background: #f5f6f8 !important;
}
#lumise-cart-options ul[data-view="items"] li:last-child strong {
    color: #0F1E2E !important;
}

/* Mini-cart header: de dropdown is div#lumise-cart-items, geen ul */
#lumise-cart-items > header {
    background: linear-gradient(180deg, #0F1E2E, #0B1626) !important;
    border-bottom: 2px solid #2196F3 !important;
}
#lumise-cart-items > header h3 {
    color: #E5EAF2 !important;
}
#lumise-cart-items > header i.close {
    color: rgba(229, 234, 242, .7) !important;
}

/* ===== Mini-cart dropdown afmaken: witte body, geen navy kieren ===== */
#lumise-cart-items {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    padding: 0 !important;
}
#lumise-cart-items ul[data-view="items"] {
    background: #ffffff !important;
}
#lumise-cart-items ul[data-view="items"] li {
    border-bottom: 1px solid rgba(15, 30, 46, .08);
}
#lumise-cart-items ul[data-view="items"] li quantity,
#lumise-cart-items ul[data-view="items"] li price {
    color: #5b6b7b !important;
}
#lumise-cart-items > footer {
    background: linear-gradient(180deg, #0F1E2E, #0B1626) !important;
    margin: 0 !important;
    padding: 12px 16px !important;
}

/* QR-tool (dumpt direct een kaartvullende QR, verwarrend) en "Opties"
   (3 cryptische poweruser-toggles) uit de klant-UI. Scoped op
   #lumise-top-tools zodat de object-toolbar intact blijft. */
#lumise-top-tools li[data-callback="qrcode"],
#lumise-top-tools li[data-tool="options"] {
    display: none !important;
}

/* Eigen toast (vervangt native alert(), zie cs_lumise_ux.php) */
.cs-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 12px);
    background: #0F1E2E;
    color: #E5EAF2;
    border: 1px solid rgba(96, 165, 250, .35);
    border-radius: 999px;
    padding: 10px 22px;
    font: 500 14px "Inter", system-ui, sans-serif;
    z-index: 2147483647;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    max-width: 80vw;
}
.cs-toast.on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Kleurkiezer: eerste swatch overlapte het "Achtergrondkleur:"-label */
.lumise-cart-field[data-type="product_color"] .lumise-cart-field-label {
    display: block !important;
    margin-bottom: 8px !important;
}
.lumise-cart-field[data-type="product_color"] ul.lumise-product-color {
    margin-left: 0 !important;
}

/* Kleurkiezer definitief: label op eigen regel, swatches eronder */
.lumise-cart-field[data-type="product_color"] .lumise_form_group {
    display: block !important;
}
.lumise-cart-field[data-type="product_color"] .lumise-cart-field-label {
    display: block !important;
    width: auto !important;
    margin: 0 0 8px !important;
}
.lumise-cart-field[data-type="product_color"] .lumise_form_content {
    display: block !important;
    margin-left: 0 !important;
    width: 100% !important;
}

/* Kleurkiezer v3: groep expliciet flex-wrap, label full-width regel */
#lumise-product .lumise-cart-field[data-type="product_color"] .lumise_form_group {
    display: flex !important;
    flex-wrap: wrap !important;
}
#lumise-product .lumise-cart-field[data-type="product_color"] span.lumise-cart-field-label {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 8px !important;
}
#lumise-product .lumise-cart-field[data-type="product_color"] .lumise_form_content {
    flex: 1 1 100% !important;
    margin-left: 0 !important;
}

/* ===== CS customizer-ronde 1 sep 2026: productkiezer + taal-dropdown ===== */

/* Productkiezer (lightbox bij binnenkomst / "+ Nieuw ontwerp"): er is maar
   1 categorie (stickers) en 3 producten, dus de categorieen-zijbalk en de
   zoekbalk zijn ruis. Zijbalk + zoekbalk weg, grid vol-breed. */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"],
#lumise-lightbox #lumise-change-products-wrp h3[data-view="top"] {
    display: none !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] {
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
}

/* Lumise-teal -> CardSticker-blauw in de kiezer: prijsbadge, hover-naam,
   vinkje op het huidige product */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="price"] {
    color: #2196F3 !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li:not([data-current="true"]):hover span[data-view="name"] {
    color: #2196F3 !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-current="true"]:after {
    background: #2196F3 !important;
}

/* Taal-dropdown: header stond nog op Lumise-lichtgrijs (#f7f7f7) terwijl
   onze restyle de titel bijna-wit maakte = "groot wit vlak". Zelfde
   behandeling als de mini-cart-header. Geldt voor alle sub-dropdowns. */
#lumise-navigations ul[data-view="sub"] header {
    background: linear-gradient(180deg, #0F1E2E, #0B1626) !important;
    border-bottom: 2px solid #2196F3 !important;
}
#lumise-navigations ul[data-view="sub"] header i {
    color: rgba(229, 234, 242, .7) !important;
}
/* caret boven de dropdown was ook lichtgrijs */
div#LumiseDesign div#lumise-navigations ul[data-block] li [data-view="sub"]:after {
    border-bottom-color: #0F1E2E !important;
}
/* actieve-taal-vinkje teal -> blauw */
div#LumiseDesign div#lumise-navigations ul[data-block="right"]>li[data-tool="languages"] i {
    background-color: #2196F3 !important;
}

/* ===== CS 1 sep 2026 (2): productkiezer op donker huisstijl-thema =====
   De kiezer-lightbox stond nog op Lumise-grijs (#f2f2f2 body/grid, witte
   kaarten, #f1f1f1 naamstrook). Alleen deze lightbox donker; andere
   popups (winkelwagen e.d.) blijven licht, vandaar :has-scoping. */
#lumise-lightbox #lumise-lightbox-body:has(#lumise-change-products-wrp) {
    background: linear-gradient(180deg, #10202F, #0B1626) !important;
}
#lumise-lightbox #lumise-change-products-wrp,
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] {
    background: transparent !important;
}
/* kaarten: donker paneel met subtiele blauwe rand, blauwe gloed op hover */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li {
    background: linear-gradient(180deg, #16293E, #101D2C) !important;
    border: 1px solid rgba(96, 165, 250, .18) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6) !important;
    overflow: hidden !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li:not([data-current="true"]):hover {
    border-color: rgba(33, 150, 243, .55) !important;
    box-shadow: 0 14px 32px -12px rgba(33, 150, 243, .35) !important;
}
/* naamstrook onder de kaart */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="name"] {
    background: transparent !important;
    color: #E5EAF2 !important;
    border-top: 1px solid rgba(96, 165, 250, .15) !important;
}
/* hover-pil ("Klik om te ontwerpen") in huisstijl-blauw */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li:not([data-current="true"]) span[data-view="thumbn"]:after {
    background: linear-gradient(180deg, #2196F3, #1976D2) !important;
    color: #fff !important;
    border-radius: 999px !important;
}
/* prijs als witte pil met blauw cijfer (kleur staat in ronde 1) */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="price"] {
    background: rgba(255, 255, 255, .92) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
}
/* geen-resultaten en paginering netjes op donker, geen kaart-look */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="noitem"],
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"],
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="pagination"] ul {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-view="noitem"] {
    color: #9CA3AF !important;
}

/* Kiezer: Lumise zet overflow:scroll = permanente scrollbalken rechts/onder,
   ook als alles past. Auto + donkere balk voor als er echt overflow is. */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"]::-webkit-scrollbar {
    width: 8px;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"]::-webkit-scrollbar-track {
    background: transparent;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"]::-webkit-scrollbar-thumb {
    background: rgba(96, 165, 250, .35) !important;
    border-radius: 999px;
}

/* Hover-glow gold alleen voor niet-actieve kaarten (stock :not([data-current]));
   het actieve product hoort 'm ook te krijgen */
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-current="true"]:hover {
    border-color: rgba(33, 150, 243, .55) !important;
    box-shadow: 0 14px 32px -12px rgba(33, 150, 243, .35) !important;
}
#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-current="true"]:hover span[data-view="name"] {
    color: #2196F3 !important;
}