/* ============================================================
   WICHITA INDUSTRIAL SALES – MASTER OVERRIDE STYLESHEET
   CLEAN + STABLE VERSION (NAV SAFE)
   - Removed custom NAV rebuild blocks that broke dropdowns/mega menu
   - Removed conflicting z-index/nav wars
   - Fixed 2 syntax/typo issues
   ============================================================ */

/* ------------------------------------------
   ROOT VARIABLES — GLOBAL BRAND SYSTEM
------------------------------------------- */
:root {
    --wis-blue-01: #07192B;
    --wis-blue-02: #0C2C4A;
    --wis-blue-03: #123B63;
    --wis-blue-04: #1A4E7F;

    --wis-white: #ffffff;
    --wis-text-light: #ffffff;
    --wis-text-dim: #c8daef;

    --wis-dark-text-1: #0a1b2e;
    --wis-dark-text-2: #0d2438;

    --wis-input-border: #2f699b;
    --wis-btn-bg: #2f699b;
    --wis-btn-hover: #18496d;

    --wis-price-orange: #ffb35a;

    --wis-success-green: #0FA958;

    --wis-white-opacity-15: rgba(255,255,255,0.15);
    --wis-white-opacity-35: rgba(255,255,255,0.35);

    --wis-tile-dark-bg: #0f1b2e;

    font-size: 16px;
}

/* ============================================================
   GLOBAL INTERNAL PAGE BACKGROUND (EXCLUDING HOME)
============================================================ */
body:not(.home) {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
    background-attachment: fixed;
    background-size: cover;
    color: var(--wis-text-light);
}

body:not(.home) .container,
body:not(.home) .content-area,
body:not(.home) .page-content,
body:not(.home) .catalog-view,
body:not(.home) #main,
body:not(.home) .row,
body:not(.home) .page-wrapper {
    background: transparent;
}

/* ============================================================
   TEXT + HEADINGS
============================================================ */
body:not(.home) h1,
body:not(.home) h2,
body:not(.home) h3,
body:not(.home) h4,
body:not(.home) h5,
body:not(.home) h6,
body:not(.home) p,
body:not(.home) span,
body:not(.home) a,
body:not(.home) label,
body:not(.home) .breadcrumb a,
body:not(.home) .filter-title span {
    color: var(--wis-text-light);
}

/* ============================================================
   FORM INPUTS
============================================================ */
body:not(.home) input[type="text"],
body:not(.home) input[type="number"],
body:not(.home) select,
body:not(.home) textarea {
    background: var(--wis-white);
    color: var(--wis-dark-text-2);
    border: 1px solid var(--wis-input-border);
}

body:not(.home) input::placeholder {
    color: #444;
}

/* ============================================================
   BUTTONS
============================================================ */
body:not(.home) .btn,
body:not(.home) button,
body:not(.home) a.btn {
    background: var(--wis-btn-bg);
    color: var(--wis-text-light);
    border: 1px solid var(--wis-btn-bg);
}

body:not(.home) .btn:hover,
body:not(.home) button:hover,
body:not(.home) a.btn:hover {
    background: var(--wis-btn-hover);
}

/* CTA — REPAIR WHITE BUTTONS */
.btn-white,
a.btn-white {
    background: var(--wis-white);
    color: var(--wis-dark-text-1);
    border: 1px solid rgba(13, 36, 56, 0.2);
    border-radius: 6px;
    padding: 10px 24px;
    font-weight: 600;
}

.btn-white:hover,
a.btn-white:hover {
    background: #f0f0f0;
    color: var(--wis-dark-text-1);
}

/* ============================================================
   PRICE — ORANGE FOR MAX VISIBILITY
============================================================ */
body:not(.home) .price,
body:not(.home) .price-label,
body:not(.home) .price-label span,
body:not(.home) .product-price,
body:not(.home) .product-price span,
body:not(.home) .has-price,
body:not(.home) .footer-wrapper-price .price-area .price-label,
body:not(.home) .product-item .price,
body:not(.home) .product-item .price span {
    color: var(--wis-price-orange);
    font-weight: 700;
}

/* UOM */
body:not(.home) .uom,
body:not(.home) .uom span,
body:not(.home) .uomvalue {
    color: var(--wis-text-dim);
}

/* ============================================================
   IN STOCK LABEL
============================================================ */
body:not(.home) .in-stock {
    background: var(--wis-success-green);
    color: var(--wis-white);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
}

/* ============================================================
   OUT OF STOCK / CALL FOR QUOTE — FIX WHITE-ON-WHITE
============================================================ */
.out-stock,
strong.out-stock,
.productdetails .out-stock,
.price-area .out-stock {
    background: var(--wis-blue-03);
    color: var(--wis-white);
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 700;
}

/* ============================================================
   PRODUCT CARD IMAGES — WHITE FRAME
============================================================ */
body:not(.home) .product-item img,
body:not(.home) .product-item .product-image img {
    width: 100%;
    background: var(--wis-white);
    padding: 6px;
    border-radius: 6px;
    object-fit: contain;
}

/* ============================================================
   QUICK VIEW IMAGE FIX — ALWAYS ABOVE GRADIENT
============================================================ */
#productquickview .product-image-quickview,
#productquickview .prod-image img {
    background: var(--wis-white);
    padding: 8px;
    border-radius: 8px;
    position: relative;
    z-index: 3;
}

/* Remove ghost overlays */
#productquickview .modal-overlay {
    display: none !important;
}

/* ============================================================
   CATEGORY TILE — FULL BLEED
============================================================ */
.cat-thumb-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--wis-tile-dark-bg);
}

.cat-thumb-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .cat-thumb-container { height: 160px; }
}

.tile p,
.tile p span {
    color: var(--wis-text-light);
    text-align: center;
    font-weight: 600;
    margin-top: 10px;
}

/* ============================================================
   PAGINATION
============================================================ */
body:not(.home) .pagination li a,
body:not(.home) .pagination li span {
    background: var(--wis-white-opacity-15);
    color: var(--wis-text-light);
    border: 1px solid var(--wis-white-opacity-35);
}

body:not(.home) .pagination li.active span,
body:not(.home) .pagination li a:hover {
    background: var(--wis-white);
    color: var(--wis-dark-text-1);
}

/* ============================================================
   MOBILE MENU — GRADIENT (SAFE)
============================================================ */
#mobileVueNav,
.cd-dropdown-content {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
}

#mobileVueNav a,
.cd-dropdown-content a {
    color: var(--wis-text-light);
}

/* ============================================================
   RECAPTCHA DISCLAIMER
============================================================ */
body:not(.home) .grecaptcha-links {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
    border-radius: 6px;
    padding: 1rem;
}

/* ============================================================
   QUICK VIEW / LOGIN MODALS — GRADIENT
============================================================ */
body:not(.home) #productquickview .modal-content,
body:not(.home) #productquickview .modal-body,
body:not(.home) #loginModal .modal-content,
body:not(.home) #loginModal .modal-body {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    );
    color: var(--wis-text-light);
}

/* Modal form inputs */
body:not(.home) #productquickview input.form-control,
body:not(.home) #loginModal input.form-control {
    background: var(--wis-white);
    color: var(--wis-dark-text-1);
    border: 1px solid var(--wis-input-border);
    border-radius: 6px;
}

/* ============================================================
   FIX — WHITE TEXT ON WHITE LABEL (Item Code)
============================================================ */
body:not(.home) .label.label-focus,
body:not(.home) span.label-focus,
body:not(.home) .prod-sku .label-focus,
body:not(.home) .prod-sku-wrapper .label-focus {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

/* ============================================================
   FIX — PRODUCT DETAIL IMAGE SHOULD FILL BOX
============================================================ */
body:not(.home) .productimagesolo,
body:not(.home) .product-image,
body:not(.home) .product-image img,
body:not(.home) img.productimagesolo.zoom {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: var(--wis-white) !important;
    padding: 8px !important;
    border-radius: 8px !important;
    display: block !important;
}

/* Ensure the outer image container is flex-stable */
body:not(.home) .prod-image,
body:not(.home) .prod-image img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/**************************************************************
 FIX 1 — PRODUCT TILE IMAGES MUST FILL THE THUMBNAIL BOX
**************************************************************/
.imgthumbnail {
    width: 100% !important;
    height: 240px !important;
    background: #0f1b2e !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.imgthumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

/**************************************************************
 FIX 2 — WHITE TEXT ON WHITE BACKGROUND (Item Code Labels)
**************************************************************/
.label.label-focus,
.label-focus,
.prod-sku .label,
.prod-sku-wrapper .label-focus {
    background: rgba(0,0,0,0.35) !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

.product-sku,
.prod-sku {
    color: #ffffff !important;
}

/**************************************************************
 FIX 3 — QUICK VIEW IMAGE GETS DARKENED BY GRADIENT
**************************************************************/
#productquickview .prod-image,
#productquickview .prod-image img {
    background: #0f1b2e !important;
    position: relative !important;
    z-index: 5 !important;
}

#productquickview .modal-body::before,
#productquickview .modal-body::after,
#productquickview .modal-content::before,
#productquickview .modal-content::after {
    display: none !important;
}

#productquickview img.product-image-quickview {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    position: relative !important;
    z-index: 10 !important;
}

/**************************************************************
 FIX 4 — “CALL FOR QUOTE” WHITE ON WHITE
**************************************************************/
.out-stock,
.out-stock strong,
strong.out-stock {
    color: #ffb35a !important;
    background: rgba(0,0,0,0.4) !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

/**************************************************************
 FIX 5 — PRODUCT DETAIL IMAGE SHOULD FILL STROKED BOX
**************************************************************/
.productimagesolo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ============================================================
   PATCH — PRODUCT TILE IMAGE BACKGROUND FIX
============================================================ */
body:not(.home) .imgthumbnail {
    background: var(--wis-white) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

body:not(.home) .imgthumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: var(--wis-white) !important;
    display: block !important;
}

/* ============================================================
   QUICK VIEW — FIX DARK IMAGE OVERLAY + WHITE GRADIENT ISSUES
============================================================ */
#productquickview .prod-image,
#productquickview .prod-image img {
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 8px !important;
    position: relative !important;
    z-index: 10 !important;
}

#productquickview .modal-overlay,
#productquickview .prod-image::before,
#productquickview .prod-image::after,
#productquickview .modal-body::before,
#productquickview .modal-body::after,
#productquickview .modal-content::before,
#productquickview .modal-content::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

#productquickview img.product-image-quickview {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 20 !important;
}

#productquickview .prod-description,
#productquickview .prod-description-content,
#productquickview p.prod-description,
#productquickview .prod-description .collapsible,
#productquickview .prod-description .collapsible span {
    background: transparent !important;
    color: var(--wis-text-light) !important;
    box-shadow: none !important;
}

#productquickview .label.label-focus,
#productquickview span.label-focus,
#productquickview .prod-sku .label-focus,
#productquickview .prod-sku-wrapper .label-focus {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
    border-radius: 4px !important;
    padding: 4px 10px !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

#productquickview h3,
#productquickview p,
#productquickview span {
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* ============================================================
   FIX — Product Per Page Dropdown
============================================================ */
body:not(.home) select.productperpage {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-2) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    appearance: none !important;
}

body:not(.home) select.productperpage option {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
}

/* ============================================================
   FIX — Quick View Modal Header
============================================================ */
#productquickview .modal-header {
    background: var(--wis-blue-02) !important;
    color: var(--wis-white) !important;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

#productquickview .modal-header h3 {
    color: var(--wis-white) !important;
}

#productquickview .modal-header .close i {
    color: var(--wis-white) !important;
}

/* ============================================================
   FIX — REMOVE BLUE/WHITE GRADIENT UNDER DESCRIPTION (QUICK VIEW ONLY)
============================================================ */
#productquickview .prod-description.collapsible::after,
#productquickview .collapsible.prod-description::after,
#productquickview .prod-description .collapsible::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

#productquickview .prod-description,
#productquickview .prod-description-content,
#productquickview p.prod-description,
#productquickview p.prod-description span {
    background: transparent !important;
    color: var(--wis-text-light) !important;
}

#productquickview .prod-description .prod-description-content {
    background: transparent !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* ============================================================
   WIS HEADER LOGO — MOBILE ALIGNMENT FIX
============================================================ */
@media (max-width: 768px) {
    a.logo img {
        position: relative !important;
        left: 25px !important;
    }
}

/* ============================================================
   FIX — Make "Sign In" strip BLUE in mobile menu
   (SAFE: no global background-image nuking)
============================================================ */
.dropdown-extras {
    background: var(--wis-blue-02) !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 12px 18px !important;
}

.dropdown-extras .dropdown-extras-btn.userpanel {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    display: block !important;
}

.dropdown-extras .dropdown-extras-btn.userpanel:hover {
    color: var(--wis-text-dim) !important;
}

/* ============================================================
   FIX — Prevent white-on-white text in mobile menu
============================================================ */
#mobileVueNav a,
.cd-dropdown-content a {
    color: var(--wis-text-light) !important;
    font-weight: 600 !important;
}

/* NOTE:
   REMOVED the rules that forced #mobileVueNav li and links to dark text.
   That was causing “random dark text” and clashes when backgrounds are dark.
*/

/* ================================
   FIX — Hi There! (User Menu Bubble)
================================== */
#Header div.userpanel-menu,
#Header .userpanel-menu,
.userpanel-menu {
    background: var(--wis-blue-02) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 8px !important;
    color: var(--wis-white) !important;
    padding: 12px 16px !important;
}

.userpanel-menu a,
.userpanel-menu .description,
.userpanel-menu li a,
.userpanel-menu .userpanel-item {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    display: block !important;
}

.userpanel-menu a:hover,
.userpanel-menu li a:hover {
    color: var(--wis-text-dim) !important;
}

.userpanel-menu::before,
.userpanel-menu::after {
    background: var(--wis-blue-02) !important;
    border: none !important;
}

/* ============================================================
   FIX — White-on-White Text in Search & Filter Modal Header
============================================================ */
#filtermodal .modal-header,
#filtermodal .modal-content .modal-header,
.modal-dialog .modal-content .modal-header .filter-title h3 {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
}

#filtermodal .modal-header h3,
.modal-content .modal-header h3,
.filter-title h3 {
    color: var(--wis-white) !important;
    font-weight: 700 !important;
}

#filtermodal .modal-header .close i,
.modal-content .modal-header .close i {
    color: var(--wis-white) !important;
    opacity: 1 !important;
}

/* ============================================================
   FIX — Remove Gradient from reCAPTCHA Disclaimer Box
============================================================ */
.grecaptcha-links,
body:not(.home) .grecaptcha-links {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
}

.grecaptcha-links a {
    color: var(--wis-btn-bg) !important;
    text-decoration: underline !important;
}

.grecaptcha-links a:hover {
    color: var(--wis-btn-hover) !important;
}

/* ============================================================
   FIX — SEARCH & FILTER PANEL (White-on-White Issue)
============================================================ */
#filterswrapper,
.filters_container,
.filters-mobile,
.shop-filters {
    background: var(--wis-blue-01) !important;
    color: var(--wis-white) !important;
    border-radius: 6px !important;
}

#filterswrapper .filter-title span,
#filterswrapper .filter-title,
.filter-title,
.filter-title.theme-2 span {
    color: var(--wis-white) !important;
}

#filterswrapper .filter-title,
.filter-title.theme-2 {
    background: transparent !important;
}

#filterswrapper h5,
#filterswrapper p,
#filterswrapper .desc,
#filterswrapper .count,
#filterswrapper label,
#filterswrapper a {
    color: var(--wis-white) !important;
}

#filterswrapper .count {
    color: var(--wis-text-dim) !important;
}

.filter-section-header h5 {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

.filter-section,
.filter-options,
.search-with-in,
.clean-search,
.searchlist,
.search-form {
    background: transparent !important;
}

.searchlistwithin_hd,
.search-with-in input.form-control {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

.searchlistwithin_hd::placeholder {
    color: #555 !important;
}

.relsearch button i {
    color: var(--wis-dark-text-1) !important;
}

.relsearch button {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
}

.filtername-instock h5 {
    color: var(--wis-white) !important;
}

.filtername-instock .switch label {
    border-color: var(--wis-white-opacity-35) !important;
}

.showhide-indicator i {
    color: var(--wis-white) !important;
}

/* ============================================================
   HARD OVERRIDE — DESKTOP SEARCH BAR
============================================================ */
header input.form-control.searchlist_hd.ajax-search-control,
.top-search input.form-control.searchlist_hd.ajax-search-control {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
}

header input.form-control.searchlist_hd.ajax-search-control::placeholder,
.top-search input.form-control.searchlist_hd.ajax-search-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

header input.form-control.searchlist_hd.ajax-search-control:focus,
.top-search input.form-control.searchlist_hd.ajax-search-control:focus {
    color: var(--wis-dark-text-1) !important;
    background: var(--wis-white) !important;
}

header .searchlist .fa-search,
.top-search .fa-search {
    color: var(--wis-dark-text-1) !important;
}

header .searchlist button,
.top-search .searchlist button {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
}

header .searchlist input[style],
.top-search input[style] {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
}

/* ============================================================
   FIX — Sort By (Dropdown) Blue-on-Blue Text
============================================================ */
.productorderby,
.sortby select,
.sortby .productorderby {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

.sortby select option {
    color: var(--wis-dark-text-1) !important;
    background: var(--wis-white) !important;
}

.sortby span {
    color: var(--wis-white) !important;
    font-weight: 600;
}

/* ============================================================
   FIX — LIST / GRID Icons
============================================================ */
.listgrid a,
.listgrid a:visited,
.listgrid a:link {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

.listgrid a:hover {
    color: var(--wis-text-dim) !important;
}

.listgrid i,
.listgrid .fa,
.listgrid svg {
    color: var(--wis-white) !important;
}

.listgrid {
    color: var(--wis-white) !important;
}

/* FORCE LIST / GRID SVG ICONS TO WHITE */
.listgrid svg,
.listgrid svg *,
.listgrid a svg,
.listgrid a svg * {
    fill: var(--wis-white) !important;
    stroke: var(--wis-white) !important;
    opacity: 1 !important;
}

/* ============================================================
   HARD FIX — Account Dropdown
============================================================ */
.headersection .dropdown-menu,
#header .dropdown-menu,
.userpanel .dropdown-menu,
.user-panel .dropdown-menu,
.account-dropdown,
.account-menu,
.dropdown-menu[aria-labelledby="userpanel"],
.dropdown-menu.show {
    background: var(--wis-blue-02) !important;
    color: var(--wis-white) !important;
    border: none !important;
}

.headersection .dropdown-menu .description,
#header .dropdown-menu .description,
.userpanel .dropdown-menu .description,
.user-panel .dropdown-menu .description,
.account-dropdown .description,
.account-menu .description,
.dropdown-menu.show .description {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

.headersection .dropdown-menu a,
#header .dropdown-menu a,
.userpanel .dropdown-menu a,
.user-panel .dropdown-menu a,
.account-dropdown a,
.account-menu a,
.dropdown-menu.show a {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

.headersection .dropdown-menu a:hover,
#header .dropdown-menu a:hover,
.userpanel .dropdown-menu a:hover,
.user-panel .dropdown-menu a:hover,
.account-dropdown a:hover,
.account-menu a:hover,
.dropdown-menu.show a:hover {
    color: var(--wis-price-orange) !important;
}

/* ============================================================
   LIST VIEW FIXES (Product Listing Page)
============================================================ */
.product-row.product-image .product-content .product-name a {
    color: var(--wis-dark-text-1) !important;
}

.product-row.product-image .product-content .label.label-focus,
.product-row.product-image .product-content .product-sku .label-focus {
    background: var(--wis-blue-03) !important;
    color: var(--wis-white) !important;
}

.product-row.product-image .product-content .product-category a {
    color: var(--wis-btn-bg) !important;
}

.product-row.product-image .product-content strong,
.product-row.product-image .product-content span,
.product-row.product-image .product-content p {
    color: var(--wis-dark-text-1) !important;
}

.product-row.product-image .uom,
.product-row.product-image .uomvalue {
    color: var(--wis-dark-text-2) !important;
}

/* Action Buttons, Icons, Compare Text */
.product-row.product-image .product-compare-action {
    color: var(--wis-dark-text-1) !important;
    font-weight: 600 !important;
}

.product-row.product-image .product-compare-action .fa,
.product-row.product-image .product-compare-action i,
.product-row.product-image .product-compare-action svg,
.product-row.product-image .product-compare-action svg * {
    color: var(--wis-dark-text-1) !important;
    fill: var(--wis-dark-text-1) !important;
    stroke: var(--wis-dark-text-1) !important;
}

.product-row.product-image .product-list-actions button,
.product-row.product-image .product-list-actions span {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

.product-row.product-image .product-list-actions .quickview-icon,
.product-row.product-image .product-list-actions .quickview-icon:before,
.product-row.product-image .product-list-actions .quickview-icon:after {
    background: var(--wis-dark-text-1) !important;
}

.product-row.product-image .product-list-actions .lightbox-icon,
.product-row.product-image .product-list-actions .lightbox-icon:before,
.product-row.product-image .product-list-actions .lightbox-icon:after {
    background: var(--wis-dark-text-1) !important;
}

.product-row.product-image .product-shopping-actions-addtoquicklist a {
    color: var(--wis-dark-text-1) !important;
}

.product-row.product-image .product-shopping-actions-addtoquicklist a:hover {
    color: var(--wis-price-orange) !important;
}

/* ============================================================
   QUICK VIEW — PRICE BOX FIX
============================================================ */
#productquickview .modal-body,
#productquickview .modal-content,
#productquickview .prod-description,
#productquickview .prod-description-content {
    background: none !important;
    box-shadow: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

#productquickview .modal-body::before,
#productquickview .modal-body::after,
#productquickview .modal-content::before,
#productquickview .modal-content::after,
#productquickview .prod-description::before,
#productquickview .prod-description::after,
#productquickview .prod-description-content::before,
#productquickview .prod-description-content::after {
    display: none !important;
    content: none !important;
}

#productquickview .price,
#productquickview .price .has-price {
    background: var(--wis-blue-02) !important;
    color: var(--wis-price-orange) !important;
    padding: 10px 18px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
}

#productquickview .price * {
    background: transparent !important;
}

#productquickview .prod-packsize {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    color: var(--wis-text-light) !important;
}

#productquickview .price-label-inc-vat {
    color: var(--wis-text-light) !important;
    opacity: 0.85 !important;
}

/* ============================================================
   FULL FIX — Customer Dashboard
============================================================ */
.dashboard-sortable .grid,
.dashboard-sortable .grid-body,
.dashboard-sortable .grid-title,
.dashboard-sortable .grid-footer,
.dashboard-sortable li,
.dashboard-sortable .grid.simple {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
}

.dashboard-sortable *,
.dashboard-sortable .row *,
.dashboard-sortable .col-sm-9,
.dashboard-sortable .col-sm-3,
.dashboard-sortable .content_value,
.dashboard-sortable .text-muted,
.dashboard-sortable .user-info-name,
.dashboard-sortable h3,
.dashboard-sortable h4,
.dashboard-sortable h5,
.dashboard-sortable h6,
.dashboard-sortable p,
.dashboard-sortable span,
.dashboard-sortable a {
    color: var(--wis-dark-text-1) !important;
}

.dashboard-sortable .text-muted { color: #555 !important; }
.dashboard-sortable table th { color: var(--wis-dark-text-1) !important; font-weight: 700 !important; }
.dashboard-sortable table td,
.dashboard-sortable table td span { color: var(--wis-dark-text-1) !important; }
.dashboard-sortable i.fa,
.dashboard-sortable i.fa-solid { color: var(--wis-dark-text-1) !important; }

.dashboard-sortable .grid-footer a { color: var(--wis-btn-bg) !important; }
.dashboard-sortable .grid-footer a:hover { color: var(--wis-btn-hover) !important; }

.dashboard-sortable .no_results h3,
.dashboard-sortable .no_results span { color: var(--wis-dark-text-1) !important; }

/* ============================================================
   FINAL UNIVERSAL DASHBOARD TEXT FIX
============================================================ */
.dashboard-sortable .text-muted,
.dashboard-sortable span.text-muted,
.dashboard-sortable .row span.text-muted,
.dashboard-sortable .col-md-6 span.text-muted,
.dashboard-sortable .col-sm-3 span.text-muted,
.dashboard-sortable .col-sm-9 span.text-muted {
    color: var(--wis-dark-text-1) !important;
}

.dashboard-sortable .col-md-6,
.dashboard-sortable .col-md-6 *,
.dashboard-sortable .col-sm-6,
.dashboard-sortable .col-sm-6 * {
    color: var(--wis-dark-text-1) !important;
}

.dashboard-sortable i.fa,
.dashboard-sortable i {
    color: var(--wis-dark-text-1) !important;
}

/* Hide Contact Us sidebar block (contactdetails_container) everywhere */
.contactdetails_container { display: none !important; }

/* ------------------------------------------
   CTA BUTTON — VIEW ALL BATTERIES (CENTERED)
------------------------------------------- */
a.cta-button {
    display: block !important;
    width: max-content !important;
    padding: 14px 28px !important;
    font-size: 20px !important;
    margin: 25px auto !important;
    text-align: center !important;
    background-color: #ff6a00 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

a.cta-button:hover { opacity: 0.85; }

/* ------------------------------------------
   BATTERY PAGE CONTENT — ALIGN WITH NEWSLETTER
------------------------------------------- */
#content_148 .content {
    max-width: 1140px;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

#content_148 .banner img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

#content_148 h1, 
#content_148 h2,
#content_148 p {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px;
    text-align: center;
}

/* ------------------------------------------
   SEARCH AUTOCOMPLETE — FIX WHITE TEXT ON WHITE
------------------------------------------- */
.ajax-results,
.ajax-results.open {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

.ajax-results .result span { color: #1a1a1a !important; font-weight: 500; }
.ajax-results .categories-wrapper h3 { color: #1a1a1a !important; }
.ajax-results .categories-wrapper .result span { color: #1a1a1a !important; }

.ajax-results .result img {
    max-width: 50px !important;
    height: auto !important;
    margin-right: 10px;
}

/* ------------------------------------------
   SWEETALERT — FIX WHITE TEXT ON WHITE POPUP
------------------------------------------- */
.sweet-alert,
.sweet-alert h2,
.sweet-alert p,
.sweet-alert .sa-error-container p,
.sweet-alert .sa-error-container .icon {
    color: #1a1a1a !important;
}

.sweet-alert .confirm {
    background: #005bbb !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
}

.sweet-alert {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
}

.sweet-alert input[type="text"],
.sweet-alert input[type="email"],
.sweet-alert input[type="password"] {
    color: #1a1a1a !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
}

/* ============================================================
   WIS CHECKOUT FIX — Continue Button White-on-White Issue
============================================================ */
.checkout .delivery-submit-area .button.next,
body.checkout .delivery-submit-area .button.next,
.delivery-submit-area button.button.next,
body.checkout button.button.next,
.checkout button.button.next {
    background-color: #2F699B !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 14px 24px !important;
    border-radius: 6px !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
}

.checkout .delivery-submit-area .button.next:hover,
body.checkout .delivery-submit-area .button.next:hover,
.delivery-submit-area button.button.next:hover,
body.checkout button.button.next:hover,
.checkout button.button.next:hover {
    background-color: #18496D !important;
    color: #ffffff !important;
}

/* FORCE FIX — EVOX CHECKOUT WHITE TEXT + WHITE BUTTON */
body.ex-checkout .panel button.button.next,
body.ex-checkout .delivery-submit-area button.button.next,
body.ex-checkout form button.button.next {
    background-color: #0c2c4a !important;
    color: #ffffff !important;
    border: 1px solid #0c2c4a !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    border-radius: 6px !important;
}

body.ex-checkout button.button.next:hover {
    background-color: #18496d !important;
    color: #ffffff !important;
}

body.ex-checkout .panel-title span,
body.ex-checkout .panel-title .checkout-delivery-details-title-text,
body.ex-checkout .panel-title .checkout-contact-details-title-text,
body.ex-checkout .panel-title .checkout-delivery-options-title-text,
body.ex-checkout .panel-title .checkout-payment-method-title-text {
    color: #0a1b2e !important;
}

body.ex-checkout label,
body.ex-checkout .box-title,
body.ex-checkout .checkout-order-note-title,
body.ex-checkout .checkout-po-number-title {
    color: #0a1b2e !important;
}

body.ex-checkout textarea.form-control,
body.ex-checkout input.form-control {
    background: #ffffff !important;
    color: #0a1b2e !important;
    border: 1px solid #2f699b !important;
}

body.ex-checkout textarea.form-control::placeholder,
body.ex-checkout input.form-control::placeholder {
    color: #666 !important;
}

body.ex-checkout .text-muted,
body.ex-checkout .delivery-selected span { color: #555 !important; }

body.ex-checkout .checkout-summary-total-label,
body.ex-checkout .checkout-summary-total-value { color: #0a1b2e !important; }

body.ex-checkout .selected-address * { color: #0a1b2e !important; }

/* ============================================
   ACCOUNT SIDEBAR
============================================ */
.nav.nav-pills.nav-stacked {
    background: var(--wis-blue-02) !important;
    padding: 15px !important;
    border-radius: 8px !important;
}

.nav.nav-pills.nav-stacked .group-name h4 {
    color: var(--wis-white) !important;
    font-weight: 700 !important;
    margin-top: 15px !important;
    margin-bottom: 10px !important;
}

.nav.nav-pills.nav-stacked li a {
    color: var(--wis-white) !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
}

.nav.nav-pills.nav-stacked li a i {
    color: var(--wis-white) !important;
    margin-right: 8px !important;
}

.nav.nav-pills.nav-stacked li a:hover,
.nav.nav-pills.nav-stacked li.active > a {
    background: var(--wis-blue-04) !important;
    color: var(--wis-white) !important;
}

.nav.nav-pills.nav-stacked li a:hover i,
.nav.nav-pills.nav-stacked li.active a i {
    color: var(--wis-white) !important;
}

.nav.nav-pills.nav-stacked .sidebar-logout a {
    background: rgba(255, 0, 0, 0.25) !important;
    color: #ffdddd !important;
    border: 1px solid rgba(255, 0, 0, 0.35) !important;
}

.nav.nav-pills.nav-stacked .sidebar-logout a:hover {
    background: rgba(255, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

/* ============================================================
   CUSTOMER ACCOUNT FLYOUT
============================================================ */
.customertools-container {
    background: linear-gradient(
        to bottom,
        var(--wis-blue-01) 0%,
        var(--wis-blue-02) 35%,
        var(--wis-blue-03) 65%,
        var(--wis-blue-04) 100%
    ) !important;
    color: var(--wis-white) !important;
    padding: 20px 24px 40px !important;
    border-radius: 8px !important;
}

.customertools-container,
.customertools-container * {
    color: var(--wis-white) !important;
    fill: var(--wis-white) !important;
    stroke: var(--wis-white) !important;
}

.customertools-container .your-account {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    color: var(--wis-white) !important;
}

.customertools-container .close-panel i {
    color: var(--wis-white) !important;
    font-size: 20px !important;
}

.customertools-container .group-name h4 {
    font-size: 16px !important;
    color: var(--wis-text-dim) !important;
    margin: 18px 0 6px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.customertools-container .nav.nav-pills.nav-stacked li a {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    color: var(--wis-white) !important;
    background: transparent !important;
}

.customertools-container .nav.nav-pills.nav-stacked li a i {
    margin-right: 10px !important;
    color: var(--wis-white) !important;
}

.customertools-container .nav.nav-pills.nav-stacked li a:hover {
    background: rgba(255,255,255,0.1) !important;
    color: var(--wis-white) !important;
}

.customertools-container .nav.nav-pills.nav-stacked .group-name {
    border-top: 1px solid rgba(255,255,255,0.25) !important;
    padding-top: 14px !important;
    margin-top: 10px !important;
}

.customertools-container .sidebar-logout a {
    background: rgba(255, 0, 0, 0.3) !important;
    color: #ffecec !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
}

.customertools-container .sidebar-logout a:hover {
    background: rgba(255, 0, 0, 0.45) !important;
    color: var(--wis-white) !important;
}

/* ============================================================
   ACCOUNT DASHBOARD — ADDRESS BOX
============================================================ */
.myaccountdashboard_container .with-padding-trl,
.grid.simple .with-padding-trl {
    background: var(--wis-blue-02) !important;
    border-radius: 6px !important;
    padding: 15px !important;
    color: var(--wis-white) !important;
}

.myaccountdashboard_container .with-padding-trl *,
.grid.simple .with-padding-trl * {
    color: var(--wis-white) !important;
}

.myaccountdashboard_container .with-padding-trl h4.text-muted,
.grid.simple .with-padding-trl h4.text-muted {
    color: var(--wis-text-dim) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
}

.myaccountdashboard_container .with-padding-trl i.fa,
.grid.simple .with-padding-trl i.fa {
    color: var(--wis-white) !important;
    opacity: 0.9 !important;
    margin-right: 6px !important;
}

.myaccountdashboard_container .with-padding-trl .address-name,
.grid.simple .with-padding-trl .address-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--wis-white) !important;
}

.myaccountdashboard_container .with-padding-trl .address-lines,
.grid.simple .with-padding-trl .address-lines {
    color: var(--wis-text-light) !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

/* ============================================================
   ACCOUNT PAGE TAB STRIP — FIXED (REMOVED STRAY BACKGROUND LINE)
============================================================ */
.myaccount .nav.nav-pills.nav-title {
    background: linear-gradient(
        to right,
        var(--wis-blue-01),
        var(--wis-blue-03)
    ) !important;

    padding: 8px 12px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    gap: 10px !important;
}

.myaccount .nav.nav-pills.nav-title li a {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
}

.myaccount .nav.nav-pills.nav-title li.active a,
.myaccount .nav.nav-pills.nav-title li.active a:focus,
.myaccount .nav.nav-pills.nav-title li.active a:hover {
    background: var(--wis-price-orange) !important;
    color: var(--wis-dark-text-1) !important;
    font-weight: 700 !important;
}

.myaccount .nav.nav-pills.nav-title li a:hover {
    background: rgba(255,255,255,0.15) !important;
    color: var(--wis-white) !important;
}

/* ============================================================
   ORDERS PAGE
============================================================ */
.myaccount #ordergrid thead tr th,
.myaccount #ordergrid thead tr th * {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    font-weight: 700 !important;
    border-bottom: 2px solid rgba(0,0,0,0.1) !important;
}

.myaccount #ordergrid thead tr th i.fa {
    color: var(--wis-dark-text-1) !important;
    opacity: 0.75 !important;
}

.myaccount #ordergrid {
    background: var(--wis-white) !important;
    border-radius: 6px !important;
}

.myaccount #ordergrid tbody td {
    color: var(--wis-dark-text-1) !important;
}

.myaccount .order-search input.form-control {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px !important;
}

.myaccount .order-search input.form-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

.myaccount .order-search button i.fa {
    color: var(--wis-dark-text-1) !important;
}

.myaccount .no_resource .big-message,
.myaccount .no_resource .big-message * {
    color: var(--wis-white) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.myaccount .search-group .search-input {
    background: var(--wis-white) !important;
    color: var(--wis-dark-text-1) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-radius: 6px 0 0 6px !important;
    padding: 10px 14px !important;
}

.myaccount .search-group .search-input::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

.myaccount .search-group .btn-search {
    background: var(--wis-white) !important;
    border: 1px solid var(--wis-input-border) !important;
    border-left: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 10px 16px !important;
}

.myaccount .search-group .btn-search .glyphicon-search,
.myaccount .search-group .btn-search span {
    color: var(--wis-dark-text-1) !important;
}

/* ============================================================
   MY ACCOUNT — SETTINGS PANEL
============================================================ */
.myaccount .block-grid,
.myaccount .grid-body.block-grid {
    background: var(--wis-blue-02) !important;
    color: var(--wis-white) !important;
    border-radius: 8px !important;
    padding: 20px !important;
}

.myaccount .block-grid *,
.myaccount .grid-body.block-grid * {
    color: var(--wis-white) !important;
}

.myaccount .block-grid .text-muted,
.myaccount .grid-body.block-grid .text-muted {
    color: var(--wis-text-dim) !important;
    opacity: 1 !important;
}

.myaccount .block-grid i.fa,
.myaccount .grid-body.block-grid i.fa {
    color: var(--wis-white) !important;
    opacity: 0.9 !important;
}

.myaccount .block-grid .body-title b,
.myaccount .block-grid .body-title i {
    color: var(--wis-white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.myaccount .myaccount-grid-title h2,
.myaccount .myaccount-grid-title h2 span {
    color: var(--wis-white) !important;
    font-weight: 700 !important;
}

.myaccount .myaccount-grid-title h2 i.fa {
    color: var(--wis-white) !important;
    opacity: 1 !important;
}

.myaccount .id-card,
.myaccount .id-card span {
    background-color: #add8e6 !important;
    color: var(--wis-dark-text-1) !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 25px !important;
    display: inline-block !important;
}

/* ============================================================
   MY ACCOUNT TABLE HEADER PANELS — WIS DARK BLUE STYLE
============================================================ */
.myaccount .gridcontent th,
.myaccount .gridcontentnew th {
    background: #0d2342 !important;
    color: var(--wis-white) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-right: none !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}

.myaccount .gridcontent th:last-child,
.myaccount .gridcontentnew th:last-child {
    border-right: 1px solid rgba(255,255,255,0.12) !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.myaccount .gridcontent th:first-child,
.myaccount .gridcontentnew th:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.myaccount .gridcontent th input.form-control,
.myaccount .gridcontent th select.form-control,
.myaccount .gridcontentnew th input.form-control,
.myaccount .gridcontentnew th select.form-control {
    background: #173961 !important;
    color: var(--wis-white) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 6px !important;
}

.myaccount .gridcontent th input::placeholder,
.myaccount .gridcontentnew th input::placeholder {
    color: rgba(255,255,255,0.75) !important;
}

/* REMOVE EMPTY LAST COLUMN IN GRID TABLES */
.myaccount table.dataset thead th:last-child { display: none !important; }
.myaccount table.dataset tbody td:last-child { display: none !important; }
.myaccount table.dataset { border-collapse: separate !important; }

/* MAKE SORT ICONS VISIBLE */
.myaccount table.dataset th i.fa-sort,
.myaccount table.dataset th i.fa-sort-asc,
.myaccount table.dataset th i.fa-sort-desc {
    color: var(--wis-white) !important;
    opacity: 0.85 !important;
    margin-left: 6px !important;
    font-size: 14px !important;
}

.myaccount table.dataset th:hover i.fa-sort,
.myaccount table.dataset th:hover i.fa-sort-asc,
.myaccount table.dataset th:hover i.fa-sort-desc {
    color: var(--wis-price-orange) !important;
    opacity: 1 !important;
}

/* FIX HOVER & EXPANDED ROW HIGHLIGHT */
.myaccount table.dataset tbody tr td,
.myaccount table.dataset tbody tr span.content_value {
    color: var(--wis-white) !important;
}

.myaccount table.dataset tbody tr:hover {
    background: #0d2342 !important;
    color: var(--wis-white) !important;
}

.myaccount table.dataset tbody tr.tr-header,
.myaccount table.dataset tbody tr.tr-header.collapsed,
.myaccount table.dataset tbody tr.tr-header:not(.collapsed) {
    background: #173961 !important;
    color: var(--wis-white) !important;
}

.myaccount table.dataset tbody tr i {
    color: var(--wis-white) !important;
    opacity: 0.85;
}

/* CONTRACT ITEMS FILTER PANEL FIX */
.filter-container,
.filterswrapper,
.filter-title.theme-2 span,
.filter-section h5,
.empty-result,
.empty-result i {
    color: var(--wis-white) !important;
}

.filter-container {
    background: #0d233f !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.filter-title.theme-2 {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

.filter-section .filter-static { color: var(--wis-white) !important; }
.filter-section .switch label { border-color: var(--wis-white) !important; }

.cmn-toggle-round-flat:checked + label {
    background-color: #1e90ff !important;
}

.filter-container ::placeholder,
.empty-result { color: rgba(255,255,255,0.6) !important; }

.arrow-down { border-top-color: var(--wis-white) !important; }

/* Contract Items Page Title Fix */
.myaccount-title h2,
.myaccount-title h2 span,
.myaccount-title h2 i {
    color: var(--wis-white) !important;
    font-weight: 600 !important;
}

.myaccount-title h2 {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}

/* Date Range Picker */
.daterangepicker .ranges li,
.daterangepicker .ranges li.active { color: #0a0a0a !important; }

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th,
.daterangepicker .month { color: #0a0a0a !important; }

.daterangepicker td.active,
.daterangepicker td.active span,
.daterangepicker .start-date,
.daterangepicker .end-date { color: #ffffff !important; }

.daterangepicker .prev span,
.daterangepicker .next span { border-color: #0a0a0a !important; }

.daterangepicker .drp-selected { color: #0a0a0a !important; }

.daterangepicker .applyBtn,
.daterangepicker .cancelBtn { color: #ffffff !important; }

.daterangepicker { color: #0a0a0a !important; }

/* Disable any scroll snapping */
html, body,
.wrapper, .page-wrapper,
.main-container, .content {
    scroll-snap-type: none !important;
    overscroll-behavior-y: auto !important;
}

html { scroll-behavior: smooth !important; }

/* Fix My Account input fields */
.myaccount input.form-control,
.myaccount select.form-control,
.myaccount textarea.form-control {
    color: #000 !important;
    background-color: #ffffff !important;
}

.myaccount input.form-control::placeholder,
.myaccount select.form-control::placeholder,
.myaccount textarea.form-control::placeholder {
    color: #555 !important;
    opacity: 1 !important;
}

input[type="email"].form-control { color: #000 !important; }

/* Fix "Additional Info" section text color (TYPO FIXED) */
.myaccount #details .right-details h4,
.myaccount #details .right-details p,
.myaccount #details .right-details label {
    color: #ffffff !important;
}

.myaccount #details .right-details .text-muted { color: #d0d0d0 !important; }

.myaccount.users form h4,
.myaccount #details .right-details h4 {
    color: #ffffff !important;
}

/* Modal contrast */
.modal-content,
.modal-body,
.modal-body * { color: #1e1e1e !important; }

.modal-body label { color: #000 !important; font-weight: 600; }

.modal-body .bolder,
.modal-body .name a { color: #000 !important; }

#addtoquicklistform label,
#addtoquicklistform h4,
#addtoquicklistform .form-group label { color: #000 !important; }

.modal-content h3,
.modal-body h3,
.modal-header h3 {
    color: #000 !important;
    font-weight: 600 !important;
}

.modal-content .btn-primary,
.modal-body .btn-primary {
    color: #ffffff !important;
    font-weight: 600;
}

.modal-content .btn-primary:hover,
.modal-body .btn-primary:hover {
    color: #ffffff !important;
    opacity: 0.9;
}

/* Quick list modal header */
#addtoquicklistModal .modal-header {
    background: #0a2740 !important;
    border-bottom: none !important;
}

#addtoquicklistModal .modal-header h3,
#addtoquicklistModal .modal-header .text-center { color: #ffffff !important; }

#addtoquicklistModal .modal-header .close,
#addtoquicklistModal .modal-header .close span {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

#addtoquicklistModal .modal-header .close:hover { color: #e6e6e6 !important; }

/* Express checkout fixes */
.ex-checkout,
body.ex-checkout { background: #021c32 !important; }

.ex-checkout .panel,
.ex-checkout .panel-body,
.ex-checkout .panel-title {
    background: transparent !important;
    color: #ffffff !important;
}

.ex-checkout .panel *,
.ex-checkout label,
.ex-checkout span,
.ex-checkout .box-title,
.ex-checkout h3,
.ex-checkout .checkout-summary-total-label,
.ex-checkout .checkout-summary-total-value { color: #ffffff !important; }

.ex-checkout .selected-address,
.ex-checkout .delivery-box-inner,
.ex-checkout .billing-box-inner {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 6px !important;
    padding: 12px !important;
}

.ex-checkout input,
.ex-checkout textarea,
.ex-checkout select {
    background: #ffffff !important;
    color: #000000 !important;
    border-radius: 4px !important;
}

.ex-checkout .order-summary-wrapper .panel,
.ex-checkout .order-summary-wrapper .panel-title,
.ex-checkout .order-summary-wrapper .panel-body,
.ex-checkout .order-summary-wrapper .panel-footer {
    background: rgba(0,0,0,0.2) !important;
    color: #ffffff !important;
}

.ex-checkout .button,
.ex-checkout button {
    background: #0056a6 !important;
    color: #ffffff !important;
    border: none !important;
}

/* Logout button cleanup */
#logoutButton {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 8px 14px !important;
    line-height: 1.2 !important;

    color: #ffffff !important;
    background: transparent !important;
    border: none !important;

    text-decoration: none !important;
    border-radius: 6px !important;

    outline: none !important;
    box-shadow: none !important;
}

#logoutButton:focus,
#logoutButton:active,
#logoutButton:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

#logoutButton i {
    font-size: 14px !important;
    line-height: 1 !important;
}

#logoutButton:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
}

/* Cart image wrapper */
tr.item td.thumb a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 8px !important;

    box-shadow: 0 2px 6px rgba(0,0,0,0.08);

    max-width: 90px;
}

tr.item td.thumb a img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Assistance box */
body .assistance-box,
body:not(.home) .assistance-box,
body.ex-checkout .assistance-box {
    background: #0C2C4A !important;
    color: #ffffff !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    font-weight: 600 !important;
}

body .assistance-box a,
body:not(.home) .assistance-box a,
body.ex-checkout .assistance-box a {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}

body .assistance-box a:hover { color: #ffb35a !important; }

/* Call for quote button contrast */
strong.out-stock {
    background: #0C2C4A !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

a.out-stock.wis-call-quote {
    background: #0C2C4A !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}

a.out-stock.wis-call-quote:hover { color: #ffb35a !important; }

/* Price contrast on blue */
.price {
    background: #0C2C4A !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.price .has-price,
.price span.has-price {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.price .prod-packsize,
.price .prod-packsize span,
.price .item_pack {
    color: #ffffff !important;
    opacity: 0.9 !important;
    font-weight: 600 !important;
}

.price * { color: #ffffff !important; }

/* Remove accidental tile outlines */
.row.product.tileparent-list {
    background: #ffffff !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px !important;
}

.imgthumbnail {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    border: none !important;
}

.imgthumbnail img {
    background: #ffffff !important;
    border-radius: 8px !important;
    display: block !important;
}

.imgthumbnail a,
.product-row button,
.product-row a {
    outline: none !important;
    box-shadow: none !important;
}

.product-row button:focus,
.product-row a:focus,
.product-row button:hover,
.product-row a:hover {
    outline: none !important;
    box-shadow: none !important;
}

.product-row { gap: 16px !important; }

/* PDP remove social */
.social-links { display: none !important; }
.fb-like,
.fb_iframe_widget,
iframe[src*="facebook.com"],
iframe[src*="twitter.com"],
.twitter-share-button { display: none !important; }

/* PDP description always expanded */
.margindiv.product-item-spacing.product-description-in-summary.collapsible,
.product-description-in-summary.collapsible {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-image: none !important;
    filter: none !important;
}

.margindiv.product-item-spacing.product-description-in-summary.collapsible::before,
.margindiv.product-item-spacing.product-description-in-summary.collapsible::after,
.product-description-in-summary.collapsible::before,
.product-description-in-summary.collapsible::after,
.product-description-in-summary .inner::before,
.product-description-in-summary .inner::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.product-description-in-summary.collapsible .inner,
.product-description-in-summary.collapsible custom-html,
.product-description-in-summary.collapsible custom-html * {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-image: none !important;
}

.product-description-in-summary .more,
.product-description-in-summary .less,
.product-description-in-summary .show-more,
.product-description-in-summary .show-less,
.product-description-in-summary [class*="show-more"],
.product-description-in-summary [class*="show-less"],
.product-description-in-summary [class*="read-more"],
.product-description-in-summary [class*="read-less"] {
    display: none !important;
}

/* Category tile image fill fix */
.tileparent .tile { padding: 0 !important; }

.tileparent .cat-thumb-container {
    width: 100% !important;
    height: 185px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #ffffff !important;
}

.tileparent .cat-thumb-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
}

/* Login modal link contrast */
#loginModal a.help-link,
#loginModal a.login-link-reset,
#loginModal a.login-link-request {
    color: #ffffff !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#loginModal a.help-link:hover,
#loginModal a.login-link-reset:hover,
#loginModal a.login-link-request:hover {
    color: #e6f0ff !important;
    text-decoration: underline !important;
}

/* Blog featured image gap */
.blogpostfeaturedimage_container:has(.blog-post-featured-image:empty) { display: none !important; }
.blogpostfeaturedimage_container .blog-post-featured-image:empty { display: none !important; }
.blogpostfeaturedimage_container { margin: 0 !important; padding: 0 !important; }

/* Front promo hero product reset */
.wis-hero-product {
  display: inline-block;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative;
}

.wis-hero-product::before,
.wis-hero-product::after {
  content: none !important;
  display: none !important;
}

.wis-hero-product img {
  display: block;
  max-width: 260px;
  height: auto;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Hero layout */
.wis-hero-wrap {
  position: relative;
  padding: 60px 60px;
  max-width: 100%;
}

.wis-hero-left { max-width: 520px; }

.wis-hero-headline {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 28px 0;
}

.wis-hero-product { margin: 0 0 20px 0; }

.wis-hero-product img {
  display: block;
  max-width: 220px;
  height: auto;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wis-hero-cta {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.wis-hero-cta:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
}

/* Product tile padding corrected */
.footer-wrapper {
    padding: 12px !important;
    box-sizing: border-box !important;
}

.footer-wrapper-price {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.buttons.group {
    padding: 12px !important;
    box-sizing: border-box !important;
}

.buttons.group input,
.buttons.group button { margin-top: 6px !important; }

.buttons.group .addtoquicklist-wrapper { margin-top: 8px !important; }

/* Recently viewed products */
.lastviewedproducts_container,
.lastviewedproducts_container .widget-lastviewedproducts-html {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container .widget-lastviewedproducts-html > .clearfix {
  margin: 0 !important;
  padding: 0 !important;
}

.lastviewedproducts_container .widget-lastviewedproducts-html h3 {
  margin: 10px 0 14px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-weight: 700 !important;
}

.lastviewedproducts_container .lastviewedproducts-content {
  position: relative !important;
  padding: 0 34px !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container .owl-stage-outer { overflow: hidden !important; }

.lastviewedproducts_container .owl-item {
  display: flex !important;
  justify-content: center !important;
}

.lastviewedproducts_container .tileparent.product {
  width: 260px !important;
  max-width: 260px !important;
  margin: 0 10px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .lastviewedproducts_container .tileparent.product { width: 240px !important; max-width: 240px !important; }
}
@media (max-width: 860px) {
  .lastviewedproducts_container .tileparent.product { width: 220px !important; max-width: 220px !important; }
}
@media (max-width: 640px) {
  .lastviewedproducts_container .lastviewedproducts-content { padding: 0 18px !important; }
  .lastviewedproducts_container .tileparent.product { width: 85vw !important; max-width: 85vw !important; margin: 0 8px !important; }
}

.lastviewedproducts_container .tile {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.lastviewedproducts_container a.product-tile-image {
  display: block !important;
  text-decoration: none !important;
}

.lastviewedproducts_container .imgthumbnail {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  padding: 14px !important;
  height: 190px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container .imgthumbnail img {
  max-height: 160px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.lastviewedproducts_container .product-list-actions,
.lastviewedproducts_container .showquickview,
.lastviewedproducts_container .showlistlighbox {
  display: none !important;
}

.lastviewedproducts_container .footer-wrapper-description,
.lastviewedproducts_container .brand-label,
.lastviewedproducts_container .product-name,
.lastviewedproducts_container .product-sku,
.lastviewedproducts_container .product-category,
.lastviewedproducts_container .indicators-grid,
.lastviewedproducts_container .rrp,
.lastviewedproducts_container .multiple-uom,
.lastviewedproducts_container .multiple-uom-label,
.lastviewedproducts_container .price-label-inc-vat,
.lastviewedproducts_container .addtoquicklist-wrapper,
.lastviewedproducts_container .product-compare-action {
  display: none !important;
}

.lastviewedproducts_container .footer-wrapper,
.lastviewedproducts_container .footer-wrapper-description {
  height: auto !important;
  min-height: 0 !important;
}

.lastviewedproducts_container .footer {
  padding: 12px 12px 10px 12px !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container .footer-wrapper-price {
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

.lastviewedproducts_container .price-label.has-price {
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.lastviewedproducts_container .price-label.has-price .uomvalue {
  font-size: 11px !important;
  opacity: 0.75 !important;
  margin-left: 6px !important;
}

.lastviewedproducts_container .buttons.group {
  display: grid !important;
  grid-template-columns: 62px 1fr !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container input.qty-list.inputquantity {
  width: 62px !important;
  height: 38px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container .btn-add-to-cart {
  width: 100% !important;
  height: 38px !important;
  border-radius: 8px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.lastviewedproducts_container .owl-nav {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.lastviewedproducts_container .owl-nav .owl-prev,
.lastviewedproducts_container .owl-nav .owl-next {
  pointer-events: auto !important;
  width: 28px !important;
  height: 48px !important;
  position: absolute !important;
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 10px !important;
}

.lastviewedproducts_container .owl-nav .owl-prev { left: 0 !important; }
.lastviewedproducts_container .owl-nav .owl-next { right: 0 !important; }

.lastviewedproducts_container .owl-dots { margin-top: 10px !important; }

/* Recently viewed: hide non-in-stock (requires :has support) */
.lastviewedproducts_container .tileparent.product:has(.product-stock .out-stock),
.lastviewedproducts_container .tileparent.product:has(.product-stock strong.out-stock) {
  display: none !important;
}

.lastviewedproducts_container .tileparent.product:not(:has(.product-stock .in-stock)) {
  display: none !important;
}

/* =========================================================
   WIS – QUANTITY FIELD WHITE OUTLINE REMOVAL
========================================================= */
.product-shopping-actions-addtocart .buttons.group,
.product-shopping-actions-addtocart .qnt-count{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.product-shopping-actions-addtocart .qnt-count input,
.qnt-count input[type="number"]{
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
}

.product-shopping-actions-addtocart .qnt-count input:focus,
.qnt-count input:focus{
    outline: none !important;
    box-shadow: none !important;
}

.qnt-count input[type="number"]::-webkit-outer-spin-button,
.qnt-count input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
}

.qnt-count input[type="number"]{
    -moz-appearance: textfield;
}

/* =========================================================
   WIS – ADD TO CART ROW (qty pill + long CTA)
========================================================= */
.product-shopping-actions-addtocart .buttons.group{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

.product-shopping-actions-addtocart .buttons.group > button#addItemToCart,
.product-shopping-actions-addtocart .buttons.group > a#addItemToCart,
.product-shopping-actions-addtocart .buttons.group .btn-add-to-cart,
.product-shopping-actions-addtocart .buttons.group .btn.btn-primary{
  flex:1 1 auto !important;
  height:44px !important;
  border-radius:10px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.product-shopping-actions-addtocart .qnt-count{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  height:44px !important;
  padding:6px 10px !important;

  border-radius:12px !important;
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;

  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.product-shopping-actions-addtocart .qnt-count a,
.product-shopping-actions-addtocart .qnt-count button{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;

  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#fff !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-decoration:none !important;
}

.product-shopping-actions-addtocart .qnt-count input,
.product-shopping-actions-addtocart .qnt-count input[type="number"],
.product-shopping-actions-addtocart .qnt-count .qnt,
.product-shopping-actions-addtocart .qnt-count .qnt-value,
.product-shopping-actions-addtocart .qnt-count .qty,
.product-shopping-actions-addtocart .qnt-count .quantity,
.product-shopping-actions-addtocart .qnt-count span{
  min-width:54px !important;
  height:36px !important;

  border-radius:10px !important;
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  color:#fff !important;
  font-weight:900 !important;
  text-align:center !important;

  padding:0 !important;
  margin:0 !important;
  opacity:1 !important;
  visibility:visible !important;
}

.product-shopping-actions-addtocart .qnt-count input[type="number"]{
  appearance:textfield !important;
  -moz-appearance:textfield !important;
  outline:none !important;
}

.product-shopping-actions-addtocart .qnt-count input[type="number"]::-webkit-outer-spin-button,
.product-shopping-actions-addtocart .qnt-count input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

@media (max-width: 520px){
  .product-shopping-actions-addtocart .buttons.group{ gap:10px !important; }
  .product-shopping-actions-addtocart .qnt-count{ height:42px !important; }
  .product-shopping-actions-addtocart .buttons.group > button#addItemToCart,
  .product-shopping-actions-addtocart .buttons.group .btn.btn-primary{ height:42px !important; }
}

/* Password visibility fix */
input[type="password"],
.form-control[type="password"],
#new_password,
#confirm_password {
    color: #000000 !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #000000 !important;
}

input[type="password"]::placeholder { color: #666666 !important; }

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000000 !important;
}

.password-verdict { color: #ffffff !important; }

/* ============================================================
   IMPORTANT:
   REMOVED the custom NAV rebuild + z-index/nav stacking blocks.
   Your navigation is now back to ECI’s native behavior.
============================================================ */
/* ============================================================
   WIS NAV — RESPONSIVE MEGA DROPDOWN (COLUMN GRID)
   Goal:
   - No giant empty white area
   - Columns auto-fit to available space
   - Collapses cleanly on smaller widths
   Paste at VERY BOTTOM of your CSS
============================================================ */

/* 1) Dropdown wrapper should size to content and not reserve mega width */
nav.menu ul.catalog > li.has-submenu > ul.submenu{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  background: transparent !important;
}

/* 2) The actual dropdown panel */
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer{
  /* panel sizing */
  width: auto !important;
  max-width: min(1100px, 92vw) !important;  /* keeps it from taking over the world */
  min-width: 320px !important;

  /* panel look */
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25) !important;

  /* spacing */
  padding: 18px 20px !important;

  /* scrolling if it gets tall */
  height: auto !important;
  max-height: 72vh !important;
  overflow: auto !important;

  /* IMPORTANT: turn the inside into a responsive grid */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 18px !important;
  align-content: start !important;
}

/* 3) ECI sometimes wraps columns as ULs or DIVs — make each act like a column */
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer > ul,
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer > div,
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer > li{
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 4) If there are nested ULs, normalize them */
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 5) Column “header” styling (usually the first link in each column) */
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer > ul > li:first-child > a,
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer > li:first-child > a{
  font-weight: 800 !important;
  color: #0a1b2e !important;
  padding: 6px 6px 10px 6px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 6) Link list styling (clean + compact) */
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer a{
  display: block !important;
  width: 100% !important;

  padding: 7px 10px !important;
  margin: 2px 0 !important;

  color: #0a1b2e !important;
  text-decoration: none !important;
  border-radius: 8px !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;

  transition: background 140ms ease, color 140ms ease !important;
}

/* Hover = subtle “button” feel (like your mockup, without going full pill everywhere) */
nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer a:hover{
  background: rgba(12,44,74,0.10) !important;
  color: #0c2c4a !important;
}

/* 7) Tighter packing on medium screens */
@media (max-width: 1100px){
  nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 14px !important;
  }
}

/* 8) Mobile: single column, full width, no weird overflow */
@media (max-width: 768px){
  nav.menu ul.catalog > li.has-submenu > ul.submenu{
    position: static !important;
    width: 100% !important;
  }

  nav.menu ul.catalog > li.has-submenu > ul.submenu .submenucontainer{
    max-width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
    max-height: 55vh !important;
  }
}