/* ========================================
   GevelBeheer Mega Menu - Override theme styles
   ======================================== */

/* Nav bar */
#header .gb-nav {
    border-bottom: 1px solid #e5e7eb;
    position: relative;
    z-index: 100;
    background: #fff !important;
    padding: 0;
    margin: 0;
}
#header .gb-nav .gb-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    gap: 16px;
    flex-wrap: wrap;
}
#header .gb-nav .gb-nav__left,
#header .gb-nav .gb-nav__right {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
#header .gb-nav a.gb-nav__link {
    color: #374151 !important;
    font-size: 15px;
    text-decoration: none !important;
    background: none !important;
    padding: 0;
    display: inline;
    font-weight: 400;
}
#header .gb-nav a.gb-nav__link:hover {
    color: #101960 !important;
}

/* Assortiment button */
#header .gb-nav .gb-nav__assortiment-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #101960 !important;
    color: #fff !important;
    border: none;
    border-radius: 50px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    line-height: 1.4;
}
#header .gb-nav .gb-nav__assortiment-btn:hover {
    background: #0c1250 !important;
    color: #fff !important;
}
.gb-nav__chevron {
    transition: transform 0.2s;
    width: 16px;
    height: 16px;
}
.gb-nav__chevron.rotated {
    transform: rotate(180deg);
}

/* Zakelijk button */
#header .gb-nav a.gb-nav__zakelijk {
    display: inline-flex;
    align-items: center;
    background: #f0f3ff !important;
    color: #101960 !important;
    border-radius: 50px;
    padding: 8px 20px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none !important;
}
#header .gb-nav a.gb-nav__zakelijk:hover {
    background: #e0e5ff !important;
    color: #101960 !important;
}

/* Overlay */
.gb-mega-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.18);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
}
.gb-mega-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Mega menu container */
.gb-mega {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 95;
    background: #fff !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    border-top: 1px solid #e5e7eb;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    pointer-events: none;
}
.gb-mega.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.gb-mega .gb-mega__inner {
    display: flex;
    min-height: 480px;
    max-height: 75vh;
}

/* Sidebar */
.gb-mega .gb-mega__sidebar {
    width: 260px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    padding: 8px 0;
    overflow-y: auto;
    background: #fff;
}
.gb-mega a.gb-mega__sidebar-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px !important;
    color: #374151 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    transition: all 0.12s;
    border-left: 3px solid transparent;
    background: transparent !important;
    font-weight: 400 !important;
}
.gb-mega a.gb-mega__sidebar-item svg {
    opacity: 0.3;
    flex-shrink: 0;
}
.gb-mega a.gb-mega__sidebar-item:hover,
.gb-mega a.gb-mega__sidebar-item.active {
    background: #f4f6fb !important;
    color: #101960 !important;
    font-weight: 500 !important;
    border-left-color: #101960;
}
.gb-mega a.gb-mega__sidebar-item.active svg {
    opacity: 0.6;
}

/* Content panels */
.gb-mega .gb-mega__content {
    flex: 1;
    padding: 28px 32px;
    overflow-y: auto;
    position: relative;
    background: #fff;
}
.gb-mega .gb-mega__panel {
    display: none;
}
.gb-mega .gb-mega__panel.active {
    display: block;
    animation: gbFadePanel 0.15s ease;
}
@keyframes gbFadePanel {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Legacy grid - kept for compatibility */
.gb-mega .gb-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 36px;
    align-items: start;
}

/* Subcategory links */
.gb-mega .gb-mega__links {
    display: flex;
    flex-direction: column;
}
.gb-mega a.gb-mega__link {
    padding: 7px 0 !important;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    background: none !important;
    display: block !important;
    font-weight: 400 !important;
}
.gb-mega a.gb-mega__link:last-child {
    border-bottom: none;
}
.gb-mega a.gb-mega__link:hover {
    color: #101960 !important;
}

/* Two-column layout: subcats left, grandchildren right */
.gb-mega .gb-mega__two-col {
    display: flex;
    gap: 0;
    min-height: 400px;
}
.gb-mega .gb-mega__subcats {
    width: 240px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
}
.gb-mega a.gb-mega__subcat-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px 9px 0 !important;
    color: #374151 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    background: none !important;
    border-left: 2px solid transparent;
    font-weight: 400 !important;
    transition: all 0.1s;
    padding-left: 12px !important;
}
.gb-mega a.gb-mega__subcat-item svg {
    opacity: 0.25;
    flex-shrink: 0;
}
.gb-mega a.gb-mega__subcat-item:hover,
.gb-mega a.gb-mega__subcat-item.active {
    color: #101960 !important;
    background: #f8f9fc !important;
    border-left-color: #101960;
    font-weight: 500 !important;
}
.gb-mega a.gb-mega__subcat-item.active svg {
    opacity: 0.5;
}

/* Grandchildren column */
.gb-mega .gb-mega__grandchildren {
    flex: 1;
    padding-left: 28px;
}
.gb-mega .gb-mega__gc-panel {
    display: none;
}
.gb-mega .gb-mega__gc-panel.active {
    display: block;
    animation: gbFadePanel 0.12s ease;
}
.gb-mega h4.gb-mega__gc-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #101960 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
}
.gb-mega .gb-mega__gc-links {
    display: flex;
    flex-direction: column;
}

/* View all link — aligned with subcat items (same horizontal padding + left border offset) */
.gb-mega .gb-mega__subcats a.gb-mega__view-all {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: #101960 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    background: none !important;
    padding: 9px 16px 9px 12px !important;
    border-left: 2px solid transparent;
}
.gb-mega .gb-mega__subcats a.gb-mega__view-all:hover {
    gap: 10px;
    color: #101960 !important;
}
/* View all inside empty state (no subcat list) — keep original inline style */
.gb-mega .gb-mega__empty a.gb-mega__view-all {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    color: #101960 !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    background: none !important;
    padding: 0 !important;
}
.gb-mega .gb-mega__empty a.gb-mega__view-all:hover {
    gap: 10px;
    color: #101960 !important;
}

/* Empty state */
.gb-mega .gb-mega__empty {
    padding: 20px 0;
}
.gb-mega .gb-mega__empty p {
    color: #6b7280 !important;
    font-size: 14px;
    margin-bottom: 12px;
}

/* Promo sidebar */
.gb-mega .gb-mega__promo {
    width: 280px;
    flex-shrink: 0;
    padding: 24px;
    border-left: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    background: #fff;
}
.gb-mega .gb-mega__promo-inner {
    background: #f0f3fa;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    width: 100%;
}
.gb-mega .gb-mega__promo-icon {
    color: #101960;
    margin-bottom: 12px;
}
.gb-mega .gb-mega__promo-subtitle {
    display: block;
    color: #101960 !important;
    font-size: 13px;
    margin-bottom: 4px;
}
.gb-mega .gb-mega__promo-title {
    color: #101960 !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 20px;
}
.gb-mega a.gb-mega__promo-btn {
    display: block !important;
    background: #101960 !important;
    color: #fff !important;
    border-radius: 50px;
    padding: 10px 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-align: center;
}
.gb-mega a.gb-mega__promo-btn:hover {
    background: #0c1250 !important;
    color: #fff !important;
}

/* Hide old menu when new one is active */
#header .gb-nav ~ .header__menu {
    display: none !important;
}

/* ========================================
   TAP HIGHLIGHT — verwijder mobile tap grijze flash
   ======================================== */
html, html * {
    -webkit-tap-highlight-color: transparent !important;
}


/* ========================================
   LAYOUT — Consistent container widths
   Breng alles op dezelfde breedte: header, breadcrumbs, content.
   De WP customizer zet .shop .container op 1550px, maar de header
   gebruikt de theme-default var(--container) = 1320px. We normaliseren.
   ======================================== */

/* Shop container: zelfde breedte als header (override WP customizer 1550px) */
.shop .container {
    max-width: var(--container) !important;
}

/* ========================================
   BULK PRICING TABEL — Advanced Dynamic Pricing staffel tabel
   Netjes gemaakt op single product page en overal waar 'ie voorkomt.
   Override inline CSS van plugin met hogere specificity.
   ======================================== */
html body .wdp_bulk_table_content,
html body .wdp_pricing_table_wrap {
    display: block !important;
    margin: 12px 0 24px 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 420px !important;
    overflow: visible !important;
}
html body .wdp_bulk_table_content .bulk_table {
    border: 1px solid #e8e9ea !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html body .wdp_bulk_table_content .wdp_pricing_table_caption {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    text-align: left !important;
}
html body table.wdp_pricing_table {
    width: 100% !important;
    max-width: 420px !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    table-layout: auto !important;
}
html body table.wdp_pricing_table thead td {
    background: #f7f8fa !important;
    color: #555 !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 8px 10px !important;
    border: none !important;
    border-bottom: 1px solid #e8e9ea !important;
    text-align: left !important;
}
html body table.wdp_pricing_table tbody td {
    background: #fff !important;
    color: #1a1a1a !important;
    padding: 8px 10px !important;
    border: none !important;
    border-bottom: 1px solid #f0f2f5 !important;
    font-size: 12.5px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
html body table.wdp_pricing_table tbody tr:last-child td {
    border-bottom: none !important;
}
html body table.wdp_pricing_table tbody tr:hover td {
    background: #f9fafc !important;
}
html body table.wdp_pricing_table tbody td .woocommerce-Price-amount {
    font-weight: 700 !important;
    color: #006aff !important;
    font-size: 13px !important;
}
html body .wdp_bulk_table_content .wdp_pricing_table_footer {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 4px !important;
    font-style: italic !important;
}
@media (max-width: 600px) {
    html body table.wdp_pricing_table thead td,
    html body table.wdp_pricing_table tbody td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }
    html body table.wdp_pricing_table tbody td .woocommerce-Price-amount {
        font-size: 12px !important;
    }
}

/* ========================================
   WINKELWAGEN — Product titels iets kleiner, alle apparaten
   ======================================== */
html body .woocommerce-cart-form .product-name,
html body .woocommerce-cart-form .product-name a,
html body .woocommerce-cart .cart_item .product-name,
html body .woocommerce-cart .cart_item .product-name a {
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}
@media (max-width: 767px) {
    html body .woocommerce-cart-form .product-name,
    html body .woocommerce-cart-form .product-name a,
    html body .woocommerce-cart .cart_item .product-name,
    html body .woocommerce-cart .cart_item .product-name a {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }
}

/* Cart item prijs blok: per stuk + subtotaal duidelijk */
html body .shout-cart-unit-price {
    font-size: 12px !important;
    color: #777 !important;
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}
html body .shout-cart-unit-price__label {
    font-weight: 500 !important;
    margin-right: 4px !important;
}
html body .shout-cart-unit-price__value {
    font-weight: 600 !important;
    color: #555 !important;
    white-space: nowrap !important;
}
html body .shout-cart-unit-price .shout-cart-vat {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #999 !important;
    margin-left: 2px !important;
}
html body .shout-cart-subtotal {
    font-size: 13px !important;
    color: #1a1a1a !important;
    line-height: 1.4 !important;
}
html body .shout-cart-subtotal__label {
    font-weight: 500 !important;
    color: #555 !important;
    margin-right: 6px !important;
    font-size: 12px !important;
}
html body .shout-cart-subtotal__value {
    font-weight: 700 !important;
    color: #101960 !important;
    font-size: 15px !important;
    white-space: nowrap !important;
}
html body .shout-cart-subtotal__value .woocommerce-Price-amount {
    color: inherit !important;
    font-weight: inherit !important;
}

/* Quantity input compacter in winkelwagen */
html body .woocommerce-cart-form .product-quantity .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 36px !important;
    max-width: 110px !important;
}
html body .woocommerce-cart-form .product-quantity .quantity input.qty {
    width: 50px !important;
    height: 36px !important;
    border: none !important;
    border-left: 1px solid #d8dde5 !important;
    border-right: 1px solid #d8dde5 !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
    background: #fff !important;
}
html body .woocommerce-cart-form .product-quantity .quantity input.qty::-webkit-inner-spin-button,
html body .woocommerce-cart-form .product-quantity .quantity input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
html body .woocommerce-cart-form .product-quantity .quantity .minus,
html body .woocommerce-cart-form .product-quantity .quantity .plus,
html body .woocommerce-cart-form .product-quantity .quantity .wcmmq-minus,
html body .woocommerce-cart-form .product-quantity .quantity .wcmmq-plus {
    width: 30px !important;
    height: 36px !important;
    border: none !important;
    background: #f7f8fa !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .woocommerce-cart-form .product-quantity .quantity .minus:hover,
html body .woocommerce-cart-form .product-quantity .quantity .plus:hover {
    background: #eee !important;
}

/* Shipping calculator dropdown — netjes */
html body .shop_table .shipping-calculator-form,
html body .shout-cart-totals .shipping-calculator-form {
    margin-top: 10px !important;
    padding: 12px !important;
    background: #f7f8fa !important;
    border: 1px solid #e8e9ea !important;
    border-radius: 8px !important;
}
html body .shipping-calculator-form .form-row {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
html body .shipping-calculator-form .form-row:last-child {
    margin-bottom: 0 !important;
}
html body .shipping-calculator-form .form-row label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555 !important;
    margin-bottom: 4px !important;
}
html body .shipping-calculator-form input[type="text"],
html body .shipping-calculator-form select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px 12px !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    height: 38px !important;
    line-height: 1.4 !important;
}
/* Select2 country dropdown — volledige reset + nette uitlijning */
html body .shipping-calculator-form .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
}
html body .shipping-calculator-form .select2-container--default .select2-selection--single {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}
html body .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: block !important;
    line-height: 36px !important;
    padding: 0 32px 0 12px !important;
    color: #1a1a1a !important;
    font-size: 13px !important;
    height: 36px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 30px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Verberg native border-arrow */
html body .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}
/* Eigen single arrow via ::after */
html body .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 4px 0 4px;
    border-color: #555 transparent transparent transparent;
    transition: transform 0.15s;
}
html body .shipping-calculator-form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: rotate(180deg);
}

/* Select2 OPEN dropdown — opties netjes (deze worden in body geplaatst,
   niet in de form, dus aparte selectors nodig) */
html body .select2-container .select2-dropdown {
    border: 1px solid #d8dde5 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    background: #fff !important;
}
html body .select2-container .select2-results__options {
    max-height: 280px !important;
    padding: 4px 0 !important;
}
html body .select2-container .select2-results__option {
    padding: 8px 14px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    background: transparent !important;
}
html body .select2-container .select2-results__option--highlighted[aria-selected],
html body .select2-container .select2-results__option--highlighted.select2-results__option--selectable {
    background: #006aff !important;
    color: #fff !important;
}
html body .select2-container .select2-results__option[aria-selected="true"] {
    background: #f0f3ff !important;
    color: #006aff !important;
    font-weight: 600 !important;
}
html body .select2-container .select2-search--dropdown {
    padding: 8px !important;
    border-bottom: 1px solid #f0f2f5 !important;
}
html body .select2-container .select2-search--dropdown .select2-search__field {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #d8dde5 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}
html body .shipping-calculator-form button.button {
    width: 100% !important;
    padding: 10px 14px !important;
    background: #006aff !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
    cursor: pointer !important;
}
html body .shipping-calculator-button {
    display: inline-block !important;
    font-size: 13px !important;
    color: #006aff !important;
    text-decoration: underline !important;
    margin-top: 4px !important;
}

/* Betaalmethode icoontjes groter op product pagina */
html body .single-product .product__payment img {
    width: 70px !important;
    height: 44px !important;
    padding: 6px !important;
    border-radius: 6px !important;
}
@media (max-width: 767px) {
    html body .single-product .product__payment img {
        width: 58px !important;
        height: 38px !important;
    }
}

/* Archive grid images: VIERKANT (1:1) op alle schermformaten, contain fit */
html body .woocommerce ul.products li.product img,
html body .woocommerce-page ul.products li.product img,
html body .shop .container .blk-8.blk-md-12 .products.columns-3 li img,
html body .shop .container .blk-8 .products li.product img {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: block !important;
    border-radius: 12px 12px 0 0 !important;
}


/* Row layout: filters sidebar + content volle breedte van container — ALLEEN desktop */
@media (min-width: 1201px) {
    .shop .container .row.mt-10 {
        gap: 24px !important;
        flex-wrap: nowrap !important;
    }
    .shop .container .filters.blk-3 {
        max-width: 280px !important;
        min-width: 280px !important;
        flex-shrink: 0 !important;
    }
    .shop .container .blk-8.blk-md-12 {
        max-width: none !important;
        flex: 1 !important;
    }
}

/* Breadcrumbs: nette styling binnen de container */
.woocommerce .woocommerce-breadcrumb {
    font-size: 13px;
    color: #6b7280;
    padding: 14px 0 0 0;
    margin: 0;
}
.woocommerce .woocommerce-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}
.woocommerce .woocommerce-breadcrumb a:hover {
    color: #101960;
}

/* ========================================
   RESPONSIVE — Desktop compact (≤1200px)
   ======================================== */
@media (max-width: 1200px) {
    .gb-mega .gb-mega__inner {
        min-height: 420px;
    }
    .gb-mega .gb-mega__sidebar {
        width: 220px;
    }
    .gb-mega .gb-mega__subcats {
        width: 210px;
    }
    .gb-mega .gb-mega__promo {
        width: 240px;
        padding: 18px;
    }
    .gb-mega .gb-mega__content {
        padding: 20px 24px;
    }
    #header .gb-nav .gb-nav__left,
    #header .gb-nav .gb-nav__right {
        gap: 20px;
    }
}

/* ========================================
   RESPONSIVE — Tablet (≤992px)
   Alleen gb-nav en mega menu. Top header (topbar__meta/search/account)
   blijft onaangeraakt — dat is theme-beheer.
   ======================================== */
@media (max-width: 992px) {
    /* gb-nav: compact */
    #header .gb-nav .gb-nav__inner {
        padding: 10px 0;
        gap: 12px;
    }
    #header .gb-nav .gb-nav__left,
    #header .gb-nav .gb-nav__right {
        gap: 16px;
    }
    #header .gb-nav .gb-nav__assortiment-btn {
        padding: 9px 18px;
        font-size: 14px;
    }
    #header .gb-nav a.gb-nav__link,
    #header .gb-nav a.gb-nav__zakelijk {
        font-size: 14px;
    }
    #header .gb-nav a.gb-nav__zakelijk {
        padding: 7px 16px;
    }

    /* Mega menu: hide promo, keep 2-col */
    .gb-mega .gb-mega__promo {
        display: none;
    }
    .gb-mega .gb-mega__sidebar {
        width: 200px;
    }
    .gb-mega .gb-mega__subcats {
        width: 200px;
    }
    .gb-mega .gb-mega__content {
        padding: 18px 18px;
    }
}

/* ========================================
   RESPONSIVE — Tablet (≤1200px) — alleen breadcrumbs
   Product grid overlaten aan theme + WP customizer
   ======================================== */
@media (max-width: 1200px) {
    .woocommerce .woocommerce-breadcrumb {
        font-size: 12px;
    }
}

/* ========================================
   RESPONSIVE — Mobile (≤767px)
   gb-nav + mega menu VOLLEDIG verbergen. De bestaande hamburger +
   mobile-menu drawer van het theme neemt de navigatie over.
   ======================================== */
@media (max-width: 767px) {
    #header .gb-nav,
    .gb-mega,
    .gb-mega-overlay {
        display: none !important;
    }
    body.mega-menu-open {
        overflow: auto !important;
    }

    /* Breadcrumbs compact op mobiel */
    .woocommerce .woocommerce-breadcrumb {
        font-size: 11px !important;
        padding: 10px 0 0 0 !important;
        line-height: 1.4 !important;
    }
    /* Mobile product cards: zie aparte sectie aan het einde van dit bestand */

    /* ---- Mobile drawer accordion smooth-open fix ---- */
    .mobile-menu-content .sub-menu {
        display: block !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.35s ease !important;
        height: auto !important;
    }
    .mobile-menu-content .menu-item-has-children.active > .sub-menu {
        max-height: 2500px !important;
    }

    /* --- Mobile menu dividers (streepjes tussen items) --- */
    html body .mobile-menu-content > ul > li {
        border-bottom: 1px solid #e0e0e0 !important;
        display: block !important;
        list-style: none !important;
    }
    html body .mobile-menu-content .sub-menu > li {
        border-bottom: 1px solid #e8e9ea !important;
        display: block !important;
        list-style: none !important;
    }
    html body .mobile-menu-content > ul > li:last-child,
    html body .mobile-menu-content .sub-menu > li:last-child {
        border-bottom: none !important;
    }

    /* --- Mobile menu items styling --- */
    html body .mobile-menu-content > ul > li > a,
    html body .mobile-menu-content .sub-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 15px 20px !important;
        color: #38393a !important;
        text-decoration: none !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        position: relative !important;
    }
    html body .mobile-menu-content .sub-menu > li > a {
        padding-left: 40px !important;
        font-size: 15px !important;
        font-weight: 400 !important;
    }

    /* --- Chevron pijltje voor items met sub-menu --- */
    html body .mobile-menu-content li.menu-item-has-children > a::after {
        content: "›" !important;
        display: inline-block !important;
        font-size: 24px !important;
        font-weight: 300 !important;
        color: #666 !important;
        margin-left: auto !important;
        transition: transform 0.3s ease !important;
        line-height: 1 !important;
    }
    html body .mobile-menu-content li.menu-item-has-children.active > a::after {
        transform: rotate(90deg) !important;
    }

    /* Sub-menu achtergrond */
    html body .mobile-menu-content .sub-menu {
        background: #f8f9fa !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==================================================================
   PHOTOSWIPE LIGHTBOX — Compleet uitschakelen, te buggy.
   Click op product foto doet niets speciaals meer. Zie mu-plugin
   shout-customizations.php voor disabling theme support.
   ================================================================== */

/* ==================================================================
   MOBIELE PRODUCT CARDS — FRESH REWRITE
   Schrijft alles van het theme + customizer over met hoge specificity.
   Werkt met de DOM structuur:
     li.product
       > a (contains img + h2 title + .meta wrapper)
         > img
         > h2.woocommerce-loop-product__title
         > .meta (contains price + stock-archieve)
       > form.cart  (contains quantity input + .button)
       > span.wdp_bulk_table_content  (hidden bulk pricing)

   Strategie:
   - Card = flex column, border-radius, shadow, white bg
   - Image: VASTE hoogte 150px (object-fit contain)
   - Titel: VASTE hoogte 38px (2 regels clamped), duidelijke padding boven
   - Meta: margin-top auto (pushed naar onderkant)
   - Prijs + stock: duidelijk uitgelijnd links
   - Form: absolute positioned, 32x32 groene knop rechtsonder
   ================================================================== */
@media (max-width: 767px) {
    /* --- UL GRID --- */
    html body.woocommerce ul.products,
    html body .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        list-style: none !important;
    }
    /* Archive content box: interne padding weg zodat grid zelf ademt */
    html body .archive-content-box {
        padding: 15px 0 !important;
    }
    html body.woocommerce ul.products::before,
    html body.woocommerce ul.products::after {
        display: none !important;
        content: none !important;
    }

    /* --- LI.PRODUCT CARD --- */
    html body.woocommerce ul.products li.product {
        /* reset alles wat theme/customizer zet */
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        float: none !important;
        clear: none !important;
        margin: 0 !important;
        padding: 0 !important;
        /* card structuur */
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff !important;
        border: none !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    /* --- OUTER <A> WRAPPER --- */
    html body.woocommerce ul.products li.product > a,
    html body.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
    html body.woocommerce ul.products li.product a.woocommerce-loop-product__link {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        text-decoration: none !important;
        color: inherit !important;
    }

    /* --- IMAGE op mobiel: vierkant (1:1), zelfde als desktop --- */
    /* De globale image rule hierboven (buiten media query) dekt al alles:
       aspect-ratio: 1/1, contain, wit bg, 10px padding.
       Hier alleen border-radius override voor de top van de card. */
    html body.woocommerce ul.products li.product img,
    html body.woocommerce ul.products li.product a img {
        border-radius: 12px 12px 0 0 !important;
        margin: 0 !important;
    }

    /* --- TITEL ---
       Clean 2-line clamp zonder overflow glitch. Spacing via margin (niet
       padding) zodat content box exact past in max-height. Geen
       interference tussen line-clamp berekening en padding.
       - font-size 12px * line-height 1.35 = 16.2px per regel
       - 2 regels = 32.4px → max-height: 34px (buffer voor descenders)
    */
    html body.woocommerce ul.products li.product h2,
    html body.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
    html body .woocommerce .products ul li.product h2 {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        /* Exact 2-line height, no padding interference */
        max-height: 34px !important;
        min-height: 34px !important;
        height: 34px !important;
        /* Spacing via margin (outside content box, geen invloed op clamp) */
        margin: 18px 0 8px 0 !important;
        /* Horizontale padding voor tekst insprong */
        padding: 0 12px !important;
        /* Typografie */
        font-size: 12px !important;
        line-height: 1.35 !important;
        font-weight: 600 !important;
        text-align: left !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* --- META (prijs + stock) --- */
    html body.woocommerce ul.products li.product .meta,
    html body .woocommerce ul.products li.product .meta {
        margin: auto 0 0 0 !important;
        padding: 10px 12px 48px 12px !important;
        display: block !important;
        text-align: left !important;
    }

    html body.woocommerce ul.products li.product .meta .price,
    html body.woocommerce ul.products li.product .price {
        font-size: 14px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        line-height: 1.4 !important;
    }
    html body.woocommerce ul.products li.product .price .woocommerce-Price-amount {
        font-size: 14px !important;
    }
    html body.woocommerce ul.products li.product .price .wts-vat-text {
        font-size: 10px !important;
        font-weight: 400 !important;
        margin-left: 4px !important;
    }
    html body.woocommerce ul.products li.product .stock-archieve {
        font-size: 11px !important;
        font-weight: 500 !important;
        margin: 6px 0 0 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
    }

    /* --- FORM.CART (buiten de <a>) --- */
    html body.woocommerce ul.products li.product form.cart {
        margin: 0 !important;
        padding: 0 !important;
    }
    html body.woocommerce ul.products li.product form.cart .quantity,
    html body.woocommerce ul.products li.product form.cart div.quantity {
        display: none !important;
    }
    html body.woocommerce ul.products li.product .wdp_bulk_table_content {
        display: none !important;
    }

    /* --- CART BUTTON (groene knop met basket icon uit theme) --- */
    html body .woocommerce ul.products li.product .button,
    html body .highlighted-products .woocommerce li.product .button,
    html body .woocommerce section.shop div.container div.meta .button,
    html body section.categories div.container div.meta .button,
    html body.woocommerce ul.products li.product .button,
    html body.woocommerce ul.products li.product form.cart .button,
    html body.woocommerce ul.products li.product form.cart .single_add_to_cart_button {
        position: absolute !important;
        width: 34px !important;
        height: 34px !important;
        right: 10px !important;
        bottom: 10px !important;
        background-size: 16px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- SALE BADGE --- */
    html body.woocommerce ul.products li.product .onsale {
        top: 8px !important;
        left: 8px !important;
        right: auto !important;
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }

    /* --- PAGINATION: meer ruimte boven --- */
    html body .woocommerce nav.woocommerce-pagination,
    html body .woocommerce-pagination,
    html body.woocommerce .pagination {
        margin-top: 32px !important;
        padding: 0 14px !important;
    }

    /* ============================================================
       STICKY ADD-TO-CART BAR — Top, ONDER de sticky header
       Header is position:sticky top:0 z-index:1000, dus we plaatsen
       onze bar daaronder met top: var(--sticky-bar-top) en lagere z-index.
       ============================================================ */
    html body .sticky-add-to-cart {
        position: fixed !important;
        top: -300px !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 10px 0 !important;
        background: #fff !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        z-index: 999 !important;
        transition: top 0.3s ease-in-out !important;
    }
    html body.active-sticky-cart .sticky-add-to-cart {
        top: var(--shout-header-h, 78px) !important;
    }
    /* Sticky bar button: COMPACT 40x40 icoon-knop (cart icon ipv tekst) */
    html body .sticky-add-to-cart .btn {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        background: #006aff url('/wp-content/themes/ecoteers/assets/images/basket.svg') no-repeat center center !important;
        background-size: 18px 18px !important;
        color: transparent !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px !important;
        overflow: hidden !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
    }
    /* Container in sticky bar: gelijk padding links/rechts, ruimte voor titel */
    html body .sticky-add-to-cart .container {
        margin: 0 auto !important;
        padding: 0 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    html body .sticky-add-to-cart .row {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    /* Title block: vult remaining space */
    html body .sticky-add-to-cart .blk-9,
    html body .sticky-add-to-cart .blk-md-6 {
        flex: 1 1 auto !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 !important;
    }
    /* Button block: alleen zo breed als de icon-knop */
    html body .sticky-add-to-cart .blk-3 {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }
    /* Titel: 2 regels max, geen overflow */
    html body .sticky-add-to-cart .product-meta {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
    html body .sticky-add-to-cart .product-meta p {
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: break-word !important;
    }

    /* ============================================================
       SINGLE PRODUCT PAGE: add-to-cart button. Op mobiel forceren we
       de hele form.cart container naar block layout zodat quantity en
       button onder elkaar staan en de button NOOIT uit beeld kan vallen.
       ============================================================ */
    html body .single-product div.product form.cart,
    html body .single-product .summary form.cart,
    html body .single-product.woocommerce div.product form.cart {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    /* Quantity input boven de knop */
    html body .single-product .summary form.cart .quantity,
    html body .single-product div.product form.cart .quantity,
    html body .single-product.woocommerce div.product form.cart div.quantity {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 120px !important;
        margin: 0 0 12px 0 !important;
    }
    html body .single-product .summary form.cart .quantity input.qty,
    html body .single-product div.product form.cart .quantity input.qty {
        width: 100% !important;
        max-width: 120px !important;
        text-align: center !important;
    }
    /* Button: FULL WIDTH, 100% van form, niet meer flex/inline */
    html body .single-product div.product form.cart .single_add_to_cart_button,
    html body .single-product .summary form.cart .single_add_to_cart_button,
    html body .single-product.woocommerce div.product form.cart .button,
    html body .single-product.woocommerce div.product form.cart .single_add_to_cart_button {
        display: block !important;
        position: relative !important;
        float: none !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        background: #006aff !important;
        color: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        visibility: visible !important;
        opacity: 1 !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        white-space: normal !important;
        box-sizing: border-box !important;
    }
}