/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    --lm-dark:    #1e2530;
    --lm-dark2:   #2a3240;
    --lm-white:   #ffffff;
    --lm-grey:    #f5f5f5;
    --lm-text:    #222222;
    --lm-muted:   #888888;
    --lm-border:  #e0e0e0;
    --lm-accent:  #1e2530;
    --lm-font:    'Helvetica Neue', Arial, sans-serif;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--lm-font);
    color: var(--lm-text);
    background: var(--lm-white);
    margin: 0;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    background: var(--lm-dark) !important;
    border-bottom: none !important;
    padding: 0 !important;
}

.site-header .col-full {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.site-branding {
    flex-shrink: 0;
}

.site-title a,
.site-title a:visited {
    color: var(--lm-white) !important;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.custom-logo {
    max-height: 40px;
    width: auto;
}

/* NAV */
.main-navigation {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.main-navigation ul li a {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 14px !important;
    font-weight: 500;
    transition: color 0.2s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
    color: var(--lm-white) !important;
    background: transparent !important;
}

.main-navigation ul ul {
    background: var(--lm-dark2) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* CART ICON IN HEADER */
.site-header-cart .cart-contents {
    color: var(--lm-white) !important;
    background: transparent !important;
    padding: 8px 14px !important;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 2px;
    transition: border-color 0.2s;
}

.site-header-cart .cart-contents:hover {
    border-color: var(--lm-white) !important;
}

.site-header-cart .amount,
.site-header-cart .count {
    color: var(--lm-white) !important;
}

/* ============================================
   HERO / PAGE BANNER
   ============================================ */
.page-header,
.woocommerce-products-header {
    background: var(--lm-dark);
    color: var(--lm-white);
    padding: 60px 40px;
    text-align: left;
    position: relative;
}

.page-header h1,
.woocommerce-products-header h1 {
    color: var(--lm-white);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.content-area {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px;
}

.site-main {
    padding: 0;
}

/* ============================================
   SHOP / PRODUCT ARCHIVE
   ============================================ */

/* Layout: sidebar left + products right */
.woocommerce .col2-set,
.woocommerce-page .col2-set {
    display: flex;
    gap: 40px;
}

/* Category sidebar */
.widget_product_categories,
.woocommerce-widget-layered-nav,
.widget_layered_nav {
    background: var(--lm-grey);
    padding: 24px;
    border-radius: 2px;
}

.widget_product_categories .widget-title,
.widget_layered_nav .widget-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--lm-text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--lm-dark);
}

.product-categories li a {
    color: var(--lm-text);
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    padding: 5px 0;
    transition: color 0.15s;
}

.product-categories li a:hover,
.product-categories li.current-cat > a {
    color: var(--lm-dark);
    font-weight: 600;
}

.product-categories .children {
    padding-left: 14px;
    border-left: 2px solid var(--lm-border);
    margin-left: 4px;
}

/* Products grid */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.products li.product {
    margin: 0 !important;
    background: var(--lm-white);
    border: 1px solid var(--lm-border);
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    position: relative;
}

ul.products li.product:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Productkaart-afbeeldingen: verwijderd hier (oudere laag, object-fit:cover,
   200px). De actieve regel staat in design.css (.woocommerce ul.products
   li.product a img, object-fit:contain), die door zijn hogere specificiteit
   (extra .woocommerce-klasse) toch al won, maar deze dubbele/conflicterende
   regel hoort hier niet meer thuis (2026-07-28, consolidatie). */

ul.products li.product .product-category-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lm-muted);
    padding: 12px 16px 0;
    display: block;
}

ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lm-text);
    padding: 4px 16px 8px;
    margin: 0;
    line-height: 1.3;
}

ul.products li.product .price {
    font-size: 0.85rem;
    color: var(--lm-text);
    padding: 0 16px 12px;
    display: block;
}

/* De oude ronde "+"-knop-CSS die hier stond is verwijderd/geconsolideerd —
   zie design.css, blok "aantal-veld + Reserveer-knop" (batch 6a, 2026-07-28). */

/* Category tiles (subcategory view) */
ul.products li.product-category a {
    display: block;
    text-decoration: none;
}

ul.products li.product-category .woocommerce-loop-category__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--lm-text);
    padding: 12px 16px;
    text-align: center;
}

/* ============================================
   PRODUCT DETAIL PAGE
   ============================================ */
.single-product div.product {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding: 40px 0;
}

.single-product .woocommerce-product-gallery {
    grid-column: 1;
}

.single-product .summary {
    grid-column: 2;
}

.single-product .product_title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--lm-text);
    margin-bottom: 8px;
    line-height: 1.2;
}

.single-product .price {
    font-size: 1.2rem;
    color: var(--lm-text);
    font-weight: 600;
    margin-bottom: 16px;
}

.single-product .woocommerce-product-details__short-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.single-product .availability {
    font-size: 0.85rem;
    color: #2ecc71;
    margin-bottom: 16px;
}

/* Add to cart button */
.single-product .single_add_to_cart_button,
.single-product button[name="add-to-cart"] {
    background: var(--lm-dark) !important;
    color: var(--lm-white) !important;
    border: 2px solid var(--lm-dark) !important;
    padding: 14px 32px !important;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 0;
    width: 100%;
    margin-top: 16px;
}

.single-product .single_add_to_cart_button:hover {
    background: #000 !important;
    border-color: #000 !important;
}

/* ============================================
   CART PAGE
   ============================================ */
.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

.woocommerce-cart table.cart {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

.woocommerce-cart table.cart th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lm-muted);
    padding: 12px 16px;
    border-bottom: 2px solid var(--lm-dark);
    text-align: left;
    font-weight: 600;
}

.woocommerce-cart table.cart td {
    padding: 20px 16px;
    border-bottom: 1px solid var(--lm-border);
    vertical-align: middle;
}

.woocommerce-cart .cart_item td.product-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 2px;
}

.woocommerce-cart .cart_item td.product-name a {
    color: var(--lm-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.woocommerce-cart .cart_item td.product-name a:hover {
    color: var(--lm-dark);
}

.woocommerce-cart .cart_item td.product-price,
.woocommerce-cart .cart_item td.product-subtotal {
    font-size: 0.95rem;
    color: var(--lm-text);
}

.woocommerce-cart .quantity input {
    border: 1px solid var(--lm-border);
    padding: 6px 10px;
    width: 60px;
    font-size: 0.9rem;
    text-align: center;
    border-radius: 2px;
}

.woocommerce-cart .cart-collaterals {
    background: var(--lm-grey);
    padding: 28px;
    border-radius: 2px;
}

.woocommerce-cart .cart-collaterals h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--lm-dark);
}

.woocommerce-cart .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-cart .cart_totals table tr td,
.woocommerce-cart .cart_totals table tr th {
    padding: 10px 0;
    border-bottom: 1px solid var(--lm-border);
    font-size: 0.9rem;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
    background: var(--lm-dark) !important;
    color: var(--lm-white) !important;
    border: none !important;
    padding: 16px 24px !important;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 16px;
    transition: background 0.2s;
    border-radius: 0;
    cursor: pointer;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
    background: #000 !important;
}

/* ============================================
   CHECKOUT PAGE
   ============================================ */
.woocommerce-checkout .woocommerce {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: start;
}

.woocommerce-checkout h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--lm-dark);
}

.woocommerce-checkout .form-row label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--lm-text);
    margin-bottom: 6px;
    display: block;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
    border: 1px solid var(--lm-border) !important;
    border-radius: 2px !important;
    padding: 12px 14px !important;
    font-size: 0.9rem;
    width: 100%;
    background: var(--lm-white);
    color: var(--lm-text);
    transition: border-color 0.2s;
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: var(--lm-dark) !important;
}

/* Order review box */
#order_review_heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--lm-dark);
}

#order_review {
    background: var(--lm-grey);
    padding: 28px;
    border-radius: 2px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--lm-border);
    font-size: 0.9rem;
}

#place_order {
    background: var(--lm-dark) !important;
    color: var(--lm-white) !important;
    border: none !important;
    padding: 18px 24px !important;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 0;
    margin-top: 16px;
}

#place_order:hover {
    background: #000 !important;
}

/* ============================================
   KLANT SELECT2 OVERRIDES
   ============================================ */
.select2-container--default .select2-selection--single {
    height: 46px !important;
    border: 1px solid var(--lm-border) !important;
    border-radius: 2px !important;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 46px !important;
    color: var(--lm-text) !important;
    padding: 0 14px !important;
}

.select2-container--default .select2-results__option--highlighted {
    background: var(--lm-dark) !important;
}

/* ============================================
   BUTTONS (GLOBAL)
   ============================================ */
.button,
button,
input[type="submit"],
input[type="button"] {
    border-radius: 0 !important;
}

a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: var(--lm-dark);
    color: var(--lm-white);
    border: 2px solid var(--lm-dark);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 20px;
    transition: background 0.2s;
    border-radius: 0 !important;
}

a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: #000;
    border-color: #000;
    color: var(--lm-white);
}

/* Outlined button variant */
a.button.alt-outline {
    background: transparent;
    color: var(--lm-dark);
    border: 2px solid var(--lm-dark);
}
a.button.alt-outline:hover {
    background: var(--lm-dark);
    color: var(--lm-white);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--lm-dark) !important;
    color: rgba(255,255,255,0.7) !important;
    border-top: none !important;
    padding: 0 !important;
}

/* "Let's talk" CTA verwijderd - interne portal, geen marketing-uitingen */

.site-footer .col-full {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

.site-footer a {
    color: rgba(255,255,255,0.7) !important;
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--lm-white) !important;
}

.site-footer .widget-title {
    color: var(--lm-white) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 16px;
}

.site-footer p {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0 0 8px;
}

/* Footer bottom bar */
.site-info {
    background: rgba(0,0,0,0.2) !important;
    padding: 16px 40px !important;
    max-width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.site-info,
.site-info a {
    color: rgba(255,255,255,0.4) !important;
    font-size: 0.75rem;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
.woocommerce-breadcrumb {
    font-size: 0.8rem;
    color: var(--lm-muted);
    padding: 16px 0 8px;
    margin-bottom: 8px !important;
}

.woocommerce-breadcrumb a {
    color: var(--lm-muted);
    text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
    color: var(--lm-text);
}

/* ============================================
   NOTICES / MESSAGES
   ============================================ */
.woocommerce-message,
.woocommerce-info {
    background: var(--lm-dark) !important;
    color: var(--lm-white) !important;
    border-top: none !important;
    border-radius: 2px;
    padding: 16px 20px;
    font-size: 0.9rem;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--lm-white) !important;
}

.woocommerce-message a.button {
    background: var(--lm-white) !important;
    color: var(--lm-dark) !important;
    border-color: var(--lm-white) !important;
}

/* ============================================
   SEARCH BAR
   ============================================ */
.woocommerce-product-search input {
    border: 1px solid var(--lm-border);
    padding: 10px 16px;
    font-size: 0.9rem;
    border-radius: 2px;
    width: 100%;
}

/* ============================================
   PAGINATION
   ============================================ */
.woocommerce-pagination .page-numbers li .page-numbers {
    border: 1px solid var(--lm-border);
    color: var(--lm-text);
    padding: 8px 14px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.15s;
}

.woocommerce-pagination .page-numbers li .page-numbers:hover,
.woocommerce-pagination .page-numbers li .page-numbers.current {
    background: var(--lm-dark);
    color: var(--lm-white);
    border-color: var(--lm-dark);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .woocommerce-cart .woocommerce,
    .woocommerce-checkout .woocommerce,
    .single-product div.product {
        grid-template-columns: 1fr;
    }

    .site-header .col-full {
        padding: 12px 20px;
        flex-wrap: wrap;
        gap: 12px;
    }

    .content-area {
        padding: 24px 20px;
    }

    .site-footer::before {
        font-size: 2rem;
        padding: 40px 20px;
    }

    .site-footer .col-full {
        grid-template-columns: 1fr;
        padding: 32px 20px;
    }
}

@media (max-width: 600px) {
    ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   HIDE WEBSHOP CLUTTER
   ============================================ */
/* Verberg WooCommerce setup melding */
.woocommerce-store-notice { display: none !important; }
.wc-setup-guide { display: none !important; }

/* Verberg "Mijn account" menu-item styling aanpassen */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--lm-border);
    color: var(--lm-text);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.15s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    color: var(--lm-dark);
    font-weight: 600;
}

/* ============================================
   STOREFRONT LAYOUT FIXES
   ============================================ */

/* Volledige breedte content op shop/categorie pagina's */
.woocommerce .content-area,
.woocommerce-page .content-area {
    width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    max-width: 1200px;
    padding: 0 40px;
}

/* Verberg lege sidebar */
.widget-area:empty,
.woocommerce-sidebar:empty {
    display: none !important;
}

.widget-area {
    width: 240px !important;
    min-width: 240px;
    float: none !important;
}

/* Storefront col-full: gewoon blok (de sidebar-flexlayout is vervallen;
   flex perste de cart-inhoud in een smalle kolom naast een lege content-area) */
.woocommerce .col-full,
.woocommerce-page .col-full {
    display: block !important;
    max-width: 1200px;
    margin: 0 auto !important;
    padding: 0 40px;
}

/* Main content neemt resterende ruimte */
.woocommerce .site-main,
.woocommerce-page .site-main,
#main {
    flex: 1 !important;
    min-width: 0;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Products grid herstel */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    clear: both !important;
}

ul.products li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
    background: var(--lm-white);
    border: 1px solid var(--lm-border);
    border-radius: 2px;
    overflow: hidden;
    transition: box-shadow 0.2s;
    position: relative;
    min-width: 0;
}

ul.products li.product:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Productkaart-afbeeldingen: verwijderd hier (oudere laag, object-fit:cover,
   180px, !important). Zie identieke opmerking hierboven (regel ~236) — de
   actieve regel staat in design.css. */

ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--lm-text);
    padding: 8px 12px 4px !important;
    margin: 0 !important;
    line-height: 1.3;
    white-space: normal !important;
    overflow: visible !important;
    writing-mode: horizontal-tb !important;
}

ul.products li.product .price {
    font-size: 0.85rem;
    padding: 0 12px 40px !important;
    display: block;
}

/* Categorie header banner */
.woocommerce-products-header,
.page-header {
    background: var(--lm-dark) !important;
    color: var(--lm-white) !important;
    padding: 32px 40px !important;
    margin-bottom: 32px;
    width: 100%;
}

.woocommerce-products-header h1,
.page-header h1 {
    color: var(--lm-white) !important;
    font-size: 2rem !important;
    font-weight: 700;
    margin: 0 !important;
}

/* Sidebar categorieen */
.widget-area .widget_product_categories,
.widget-area .widget_layered_nav {
    background: var(--lm-grey);
    padding: 20px;
    border-radius: 2px;
}

.widget-area .widget-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    border-bottom: 2px solid var(--lm-dark);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.product-categories {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.product-categories li a {
    display: block;
    padding: 5px 0;
    font-size: 0.85rem;
    color: var(--lm-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.product-categories li.current-cat > a {
    font-weight: 700;
    color: var(--lm-dark);
}

.product-categories .children {
    padding-left: 12px !important;
    margin-top: 4px;
}


/* ============================================
   PRODUCT GRID - SPECIFICITEIT FIX
   WooCommerce .columns-4 override
   ============================================ */
.woocommerce ul.products.columns-1 li.product,
.woocommerce ul.products.columns-2 li.product,
.woocommerce ul.products.columns-3 li.product,
.woocommerce ul.products.columns-4 li.product,
.woocommerce ul.products.columns-5 li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
    padding: 0 !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    float: none !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    width: 100% !important;
    clear: both !important;
}

/* Als er maar 1 item is (subcategorie tegel) toon dan centered */
.woocommerce ul.products:has(li:only-child) {
    grid-template-columns: 1fr !important;
    max-width: 300px;
}


/* ============================================
   DEFINITIEVE GRID FIX
   width: 100% ipv auto voor grid items
   ============================================ */
.woocommerce ul.products li,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category,
.woocommerce-page ul.products li,
.woocommerce-page ul.products li.product,
.woocommerce-page ul.products li.product-category {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* ============================
   LICHTMACHT DESIGN SYSTEM
   ============================ */

:root {
  --lm-navy:  #1a2035;
  --lm-slate: #3d4f63;
  --lm-white: #ffffff;
  --lm-light: #f5f6f7;
  --lm-accent:#4a6eb5;
  --lm-text:  #1a1a2e;
  --lm-muted: #5a6377;
}

/* GLOBAL */
body {
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 14px !important;
  color: var(--lm-text) !important;
  line-height: 1.7 !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Barlow', 'Inter', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}

/* ── HEADER ── */
.site-header,
#masthead,
header[role="banner"],
.storefront-header,
.header-main,
.header-area,
#header {
  background-color: var(--lm-navy) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.35) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

/* LOGO */
.site-title a,
.site-logo a,
.custom-logo-link,
.site-branding a {
  color: var(--lm-white) !important;
  text-decoration: none !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}

.site-description {
  color: rgba(255,255,255,.5) !important;
  font-size: 11px !important;
}

/* ── NAVIGATION ── */
.main-navigation,
.site-navigation,
#site-navigation,
.storefront-primary-navigation,
nav.nav-primary {
  background: transparent !important;
  border: none !important;
}

.main-navigation a,
.main-navigation ul li a,
#site-navigation a,
.storefront-primary-navigation a,
nav.nav-primary a,
.nav-menu > li > a {
  color: var(--lm-white) !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  padding: 0 16px !important;
  line-height: 60px !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
  border: none !important;
  background: transparent !important;
}

.main-navigation a:hover,
#site-navigation a:hover {
  color: rgba(255,255,255,.65) !important;
  background: transparent !important;
}

.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
  color: var(--lm-white) !important;
  font-weight: 600 !important;
}

/* Dropdown */
.main-navigation ul ul,
.nav-menu ul {
  background: var(--lm-navy) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  border-top: 2px solid var(--lm-accent) !important;
}

.main-navigation ul ul li a {
  padding: 8px 18px !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

/* Mobile hamburger */
.menu-toggle,
button.menu-toggle {
  color: var(--lm-white) !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.4) !important;
}

/* ── HERO (lm-hero blocks added via page content) ── */
.lm-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--lm-navy);
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
}

.lm-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .55;
}

.lm-hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 8vw;
  max-width: 680px;
}

.lm-hero-content h1 {
  color: var(--lm-white) !important;
  font-size: clamp(28px,4vw,48px) !important;
  font-weight: 300 !important;
  margin-bottom: 28px !important;
}

.lm-btn {
  display: inline-block !important;
  padding: 7px 18px !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  color: var(--lm-white) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  text-decoration: none !important;
  margin-right: 10px !important;
  transition: background .2s !important;
  background: transparent !important;
}

.lm-btn:hover {
  background: rgba(255,255,255,.15) !important;
  color: var(--lm-white) !important;
  text-decoration: none !important;
}

/* ── CONTENT TYPOGRAPHY ── */
.entry-content h2,
.page-content h2,
.lm-heading {
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 300 !important;
  margin-bottom: 20px !important;
  color: var(--lm-text) !important;
}

.lm-subheading {
  font-size: 13px !important;
  color: var(--lm-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 6px !important;
  font-weight: 400 !important;
}

.lm-intro-text {
  max-width: 540px;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: #3a3a4e !important;
}

/* ── SECTION SPACING ── */
.lm-section {
  padding: 64px 0 !important;
}

/* ── CATEGORY CARDS (horizontal scroll) ── */
.lm-cat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 32px 0;
}

.lm-cat-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #2a3550;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  text-decoration: none;
}

.lm-cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  transition: transform .4s, opacity .4s;
}

.lm-cat-card:hover img { transform: scale(1.05); opacity: .45; }

.lm-cat-card-label {
  position: relative;
  z-index: 2;
}

.lm-cat-card h3 {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}

.lm-cat-card span {
  color: rgba(255,255,255,.75);
  font-size: 12px;
}

/* ── SPOOK-CEL FIX (batch 12a, 2026-07-29) ──
   Storefront's eigen clearfix zet ul.products::before/::after op
   display:table (storefront.css, kern-clearfix-patroon). In een gewone
   float-layout is dat onzichtbaar, maar in ons CSS-grid (".woocommerce
   ul.products { display:grid }", verderop in dit bestand) wordt zo'n
   ::before-pseudo-element gewoon een eigen, LEGE grid-cel — die verscheen als
   spook-tegel/lege eerste plek op /winkel/ en categoriepagina's. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}

/* ── WOOCOMMERCE LAYOUT ── */
/* col-full als gewoon blok: de flexlayout was voor de (vervallen) sidebar en
   perste de cart-inhoud in een smalle kolom naast een lege content-area */
.woocommerce-page .col-full,
.woocommerce .col-full {
  display: block !important;
}

/* Sidebar LEFT — het generieke "body.woocommerce-page aside" kaapte ook het
   nieuwe materiaallijst-paneel (dat óók een <aside> is): daar hoort deze
   200px/grijze-sidebar-styling niet bij, dus uitgesloten met :not(). */
.woocommerce-page .sidebar,
.woocommerce-page #sidebar,
.woocommerce-page .widget-area,
body.woocommerce-page aside:not(.lm-lijst-paneel) {
  width: 200px !important;
  min-width: 200px !important;
  flex-shrink: 0 !important;
  background: var(--lm-light) !important;
  padding: 20px !important;
  border-radius: 4px !important;
  order: -1 !important;
}

/* Product grid area */
.woocommerce-page #primary,
.woocommerce-page .content-area,
body.woocommerce #primary {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Sidebar category widget */
.widget_product_categories .widgettitle,
.widget_product_categories .widget-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--lm-text) !important;
  border-bottom: 2px solid var(--lm-text) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
  font-family: 'Barlow', sans-serif !important;
}

.widget_product_categories .product-categories,
.widget_product_categories ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.widget_product_categories .product-categories > li > a,
.widget_product_categories ul > li > a {
  font-size: 13px !important;
  color: var(--lm-text) !important;
  text-decoration: none !important;
  display: block !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  transition: color .15s !important;
}

.widget_product_categories .product-categories > li > a:hover { color: var(--lm-accent) !important; }
.widget_product_categories .current-cat > a { font-weight: 600 !important; color: var(--lm-accent) !important; }

.widget_product_categories .children {
  padding-left: 10px !important;
  margin-top: 2px !important;
}

.widget_product_categories .children li a::before {
  content: '> ';
  color: var(--lm-muted);
  font-size: 11px;
}

.widget_product_categories .children li a {
  font-size: 12px !important;
  padding: 4px 0 !important;
  color: var(--lm-muted) !important;
  border-bottom: none !important;
}

/* ── PRODUCT GRID ── */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  transition: box-shadow .2s !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}

/* Productkaarten + categorie-tegels delen deze markup (WooCommerce rendert
   subcategorie-tegels als <li class="product"><a class="woocommerce-loop-category__link">
   dus dezelfde regel treft beide. Was object-fit:cover (bijgesneden/ingezoomd);
   nu contain zodat het hele product zichtbaar is, op een witte achtergrond met
   ruimte eromheen. Dit is de enige actieve img-regel voor deze kaarten — de
   losse .lm-cat-card img (verderop in dit bestand) is een ongebruikte, oudere
   homepage-tegelvariant die door geen enkel template wordt gerenderd. */
.woocommerce ul.products li.product a img {
  width: 100% !important;
  height: 165px !important;
  object-fit: contain !important;
  background: #fff !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Zoom icon overlay */
.woocommerce ul.products li.product a.woocommerce-loop-product__link::after {
  content: '🔍';
  position: absolute !important;
  bottom: 54px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid #ddd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  opacity: 0 !important;
  transition: opacity .2s !important;
  border-radius: 2px !important;
}

.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link::after {
  opacity: 1 !important;
}

/* Product label (type above name) */
.woocommerce ul.products li.product .product-type-label {
  font-size: 11px !important;
  color: var(--lm-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 10px 10px 2px !important;
  display: block !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 2px 10px 8px !important;
  margin: 0 !important;
  color: var(--lm-text) !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.3 !important;
}

/* ── PRODUCTKAART: aantal-veld + Reserveer-knop als compacte rij onderaan
   (vervangt de oude ronde "+"-knop; zie ook de geconsolideerde regels verderop
   in dit bestand die nu zijn samengevoegd in dit ene blok, batch 6a 2026-07-28) ── */
.woocommerce ul.products li.product .lm-add-to-cart-row,
.woocommerce-page ul.products li.product .lm-add-to-cart-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 0 10px 12px !important;
}

.woocommerce ul.products li.product .lm-add-to-cart-row .lm-qty-input,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .lm-qty-input {
  width: 56px !important;
  flex: 0 0 56px !important;
  padding: 5px 4px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  text-align: center !important;
  color: var(--lm-text) !important;
  background: #fff !important;
}

.woocommerce ul.products li.product .lm-add-to-cart-row .button,
.woocommerce ul.products li.product .lm-add-to-cart-row .add_to_cart_button,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .button,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .add_to_cart_button {
  position: static !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: auto !important;
  background: var(--lm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all .15s !important;
}

.woocommerce ul.products li.product .lm-add-to-cart-row .button:hover,
.woocommerce ul.products li.product .lm-add-to-cart-row .add_to_cart_button:hover,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .button:hover,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .add_to_cart_button:hover {
  background: var(--lm-text) !important;
}

/* Na toevoegen: knop verbergen, "Bekijk materiaallijst" (a.added_to_cart) op
   dezelfde rij tonen — zelfde stijl als voorheen, nu inline i.p.v. absoluut
   gepositioneerd op de plek van de oude cirkel. */
.woocommerce ul.products li.product .lm-add-to-cart-row .button.added,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .button.added {
  display: none !important;
}

.woocommerce ul.products li.product .lm-add-to-cart-row .added_to_cart,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .added_to_cart {
  flex: 1 1 auto !important;
  background: var(--lm-navy) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  line-height: 1.2 !important;
  padding: 8px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.woocommerce ul.products li.product .lm-add-to-cart-row .added_to_cart:focus,
.woocommerce-page ul.products li.product .lm-add-to-cart-row .added_to_cart:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--lm-white), 0 0 0 4px var(--lm-accent) !important;
}

/* Product prices */
.woocommerce ul.products li.product .price {
  color: var(--lm-text) !important;
  font-size: 13px !important;
  padding: 0 10px 6px !important;
  display: block !important;
}

/* "Beschikbaar: N" (materiaallijst-rentman.php sectie 20a, hergebruikt de
   Rentman-voorraadmeta van sectie 7/8) — subtiel onder de titel in tegelstand. */
.woocommerce ul.products li.product .lm-beschikbaarheid {
  display: block !important;
  font-size: 11px !important;
  color: var(--lm-muted) !important;
  padding: 0 10px 4px !important;
}

/* Huurperiode-disclaimer bij "Beschikbaar: N" (batch 21, sectie 29,
   2026-08-07): alleen zichtbaar in de standaard TEGELweergave, waar er
   ruimte is om een extra regel gewoon te laten doorstromen. In de
   LIJSTweergave (verderop in dit bestand, ".lm-lijstweergave") is elke rij
   een strak 64px-grid met bewust "white-space:nowrap" op ".lm-beschikbaarheid"
   (eerdere bugfix tegen letter-voor-letter afbrekende tekst) - een extra
   zichtbare regel zou die rijen weer breken. Daar blijft de disclaimer
   daarom als hover-title op ".lm-beschikbaarheid" staan (zie sectie 29 in
   materiaallijst-rentman.php) i.p.v. als eigen element. */
.woocommerce ul.products li.product .lm-beschikbaarheid-disclaimer {
  display: block !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  color: var(--lm-muted) !important;
  opacity: .85;
  padding: 0 10px 6px !important;
}
ul.products.lm-lijstweergave li.product .lm-beschikbaarheid-disclaimer,
html.lm-lijstweergave-vroeg ul.products li.product .lm-beschikbaarheid-disclaimer {
  display: none !important;
}

/* Zelfde disclaimer op de productdetailpagina (sectie 29), naast de eigen
   ".lm-beschikbaarheid"-badge (hergebruikt hierboven, geen aparte regel
   nodig) - hier gewoon een paragraaf, geen grid-beperkingen. */
.lm-beschikbaarheid-pdp {
  margin: 4px 0 14px !important;
  font-size: 12.5px !important;
}
.lm-beschikbaarheid-pdp .lm-beschikbaarheid {
  display: inline !important;
  font-weight: 600;
  color: var(--lm-text) !important;
  padding: 0 !important;
}
.lm-beschikbaarheid-pdp .lm-beschikbaarheid-disclaimer {
  display: inline !important;
  color: var(--lm-muted) !important;
  padding: 0 !important;
}

/* ============================================
   LIJST/TEGEL-SCHAKELAAR (winkel/categorie)
   ============================================
   Toggle naast de sorteerbalk (materiaallijst-rentman.php sectie 20):
   Storefront wrapt sorteren + resultatentelling al in .storefront-sorting,
   dat zetten we op flex zodat onze knoppen rechts kunnen aansluiten. */
.storefront-sorting {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 16px !important;
}
.storefront-sorting .woocommerce-ordering {
  margin: 0 !important;
}
.storefront-sorting .woocommerce-result-count {
  margin: 0 !important;
}
.lm-weergave-toggle {
  display: inline-flex !important;
  margin-left: auto !important;
  border: 1px solid var(--lm-border);
  border-radius: 2px;
  overflow: hidden;
}
.lm-weergave-knop {
  background: #fff !important;
  color: var(--lm-muted) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer;
  min-height: 40px;
}
.lm-weergave-knop + .lm-weergave-knop {
  border-left: 1px solid var(--lm-border) !important;
}
.lm-weergave-knop.is-actief {
  background: var(--lm-navy) !important;
  color: #fff !important;
}

/* ── LIJSTWEERGAVE ── (.lm-lijstweergave: definitieve class, door de
   footer-JS gezet; html.lm-lijstweergave-vroeg: zelfde regels vóór paint,
   zie de wp_head-inline-script in sectie 20 — voorkomt een flits van de
   tegelweergave op mobiel, waar lijst de standaard is).
   HERBOUWD (batch 12c, 2026-07-29): de vorige versie zette `order` op
   .woocommerce-loop-product__title / .lm-beschikbaarheid / .price, maar die
   zitten in de WERKELIJKE markup (content-product.php, WooCommerce-kern)
   allemaal GENEST in dezelfde <a class="woocommerce-loop-product__link">
   (thumbnail → titel → sectie 20a's beschikbaarheid-span → prijs, daarna
   sluit de kern die <a> pas af vóórdat sectie 16's .lm-add-to-cart-row erna
   volgt) — `order` op geneste, niet-directe flex-kinderen heeft geen effect,
   vandaar de te hoge rijen met los zwevende qty/knop uit de bugmelding. Fix:
   de <a> zelf op `display:contents` zetten (haalt 'm weg als layout-laag,
   zijn href/klikgedrag blijft intact — kern-CSS-techniek) zodat img/titel/
   beschikbaarheid/prijs ECHTE grid-items van li.product worden, naast
   .lm-add-to-cart-row. Kolommen: [thumbnail ~48px] [naam (rij 1) +
   "Beschikbaar: N" (rij 2)] [prijs] [aantal + Reserveer], verticaal
   gecentreerd, compacte rijhoogte (~64px), scheidingslijn i.p.v. losse
   kaarten. Geldt voor zowel gewone producten als subcategorie-tegels (die
   dragen ook de klasse "product", WooCommerce-kern wc_get_product_cat_class()). */
ul.products.lm-lijstweergave,
html.lm-lijstweergave-vroeg ul.products {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: none !important;
}
ul.products.lm-lijstweergave li.product,
html.lm-lijstweergave-vroeg ul.products li.product {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 0;
  align-items: center !important;
  width: 100% !important;
  min-height: 64px;
  padding: 8px 14px !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid var(--lm-border) !important;
  border-radius: 0 !important;
}
ul.products.lm-lijstweergave li.product:last-child,
html.lm-lijstweergave-vroeg ul.products li.product:last-child {
  border-bottom: none !important;
}
/* De link zelf uit de layout halen: kinderen worden zo rechtstreekse
   grid-items van li.product (zie toelichting hierboven). */
ul.products.lm-lijstweergave li.product > a,
html.lm-lijstweergave-vroeg ul.products li.product > a {
  display: contents;
}
ul.products.lm-lijstweergave li.product a img,
html.lm-lijstweergave-vroeg ul.products li.product a img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  align-self: center;
}
ul.products.lm-lijstweergave li.product .product-type-label,
html.lm-lijstweergave-vroeg ul.products li.product .product-type-label {
  display: none !important;
}
ul.products.lm-lijstweergave li.product .woocommerce-loop-product__title,
html.lm-lijstweergave-vroeg ul.products li.product .woocommerce-loop-product__title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding: 0 !important;
  margin: 0 !important;
}
ul.products.lm-lijstweergave li.product .lm-beschikbaarheid,
html.lm-lijstweergave-vroeg ul.products li.product .lm-beschikbaarheid {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  padding: 0 !important;
  white-space: nowrap;
}
ul.products.lm-lijstweergave li.product .price,
html.lm-lijstweergave-vroeg ul.products li.product .price {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 0 !important;
  white-space: nowrap;
}
ul.products.lm-lijstweergave li.product .lm-add-to-cart-row,
html.lm-lijstweergave-vroeg ul.products li.product .lm-add-to-cart-row {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  width: auto !important;
  padding: 0 !important;
}
ul.products.lm-lijstweergave li.product .lm-add-to-cart-row .button,
ul.products.lm-lijstweergave li.product .lm-add-to-cart-row .add_to_cart_button,
html.lm-lijstweergave-vroeg ul.products li.product .lm-add-to-cart-row .button,
html.lm-lijstweergave-vroeg ul.products li.product .lm-add-to-cart-row .add_to_cart_button {
  width: auto !important;
  white-space: nowrap !important;
}

/* Subcategorie-tegels in lijststand: compacte rij met alléén naam (de
   "(N)"-telling zit al in de titeltekst, WooCommerce-kern
   woocommerce_template_loop_category_title()) — geen foto, dus de titel
   verticaal centreren over de volle rijhoogte (anders blijft hij op
   grid-row 1 hangen, zoals bij een gewoon product met een 2e rij eronder). */
ul.products.lm-lijstweergave li.product-category a img,
html.lm-lijstweergave-vroeg ul.products li.product-category a img {
  display: none !important;
}
ul.products.lm-lijstweergave li.product-category .woocommerce-loop-category__title,
html.lm-lijstweergave-vroeg ul.products li.product-category .woocommerce-loop-category__title {
  grid-column: 2 / -1;
  grid-row: 1 / span 2;
  align-self: center;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── LIJSTWEERGAVE OP MOBIEL (≤700px, zelfde breekpunt als de cart-
   kaartweergave) — bugfix 2026-07-31, gemeld door Yuri, gereproduceerd door
   de hoofdsessie in een lokale 375px-snapshot met de echte markup + live CSS.
   De 4-koloms desktop-grid hierboven (48px/1fr/auto/auto) laat op 375px geen
   ruimte over voor de naamkolom: prijs (nowrap) + .lm-add-to-cart-row
   (qty-input + Reserveer-knop, samen ~180px) plus thumbnail en gaps vullen
   vrijwel de hele breedte, dus de naam kreeg ~0px en brak LETTER voor letter
   af (één artikel werd 4 schermen hoog). Herindeling naar 3 kolommen × 3
   rijen: rij 1 = naam (volle breedte naast de foto, breekt op woordgrenzen),
   rij 2 = beschikbaarheid links + prijs rechts, rij 3 = aantal+knop over de
   volle breedte (knop flex-groeiend, blijft ≥44px hoog via de bestaande
   768px-tapstarget-regel verderop in dit bestand). Geen horizontale scroll:
   minmax(0,1fr) + overflow-wrap: break-word als laatste redmiddel (alleen
   als een los woord zelf al niet past) i.p.v. word-break op elk woord. */
@media (max-width: 700px) {
  ul.products.lm-lijstweergave li.product,
  html.lm-lijstweergave-vroeg ul.products li.product {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 4px !important;
    padding: 10px !important;
  }
  ul.products.lm-lijstweergave li.product a img,
  html.lm-lijstweergave-vroeg ul.products li.product a img {
    grid-row: 1 / span 2 !important;
  }
  ul.products.lm-lijstweergave li.product .woocommerce-loop-product__title,
  html.lm-lijstweergave-vroeg ul.products li.product .woocommerce-loop-product__title {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    align-self: start !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    /* Batch 16 (2026-08-04): geërfd van Storefront's basisregel
       "ul.products li.product { text-align:center }" (storefront/assets/css/
       woocommerce/woocommerce.css) — hier nooit expliciet overruled, dus
       stond de naam ook in lijstweergave gecentreerd. Links uitlijnen past
       beter bij de rest van de lijstrij (foto/prijs/knop staan ook links-
       naar-rechts, niet gecentreerd). */
    text-align: left !important;
  }
  ul.products.lm-lijstweergave li.product .lm-beschikbaarheid,
  html.lm-lijstweergave-vroeg ul.products li.product .lm-beschikbaarheid {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: center !important;
  }
  ul.products.lm-lijstweergave li.product .price,
  html.lm-lijstweergave-vroeg ul.products li.product .price {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: end !important;
  }
  ul.products.lm-lijstweergave li.product .lm-add-to-cart-row,
  html.lm-lijstweergave-vroeg ul.products li.product .lm-add-to-cart-row {
    grid-column: 2 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
  }
  /* .lm-qty-input houdt zijn vaste 56px (basisregel hierboven in dit
     bestand); de knop groeit vanzelf mee (basisregel: flex:1 1 auto), dus
     hier is alleen de rij zelf op volle breedte nodig. */

  /* Subcategorie-rijen: titel links uitlijnen i.p.v. gecentreerd. */
  ul.products.lm-lijstweergave li.product-category .woocommerce-loop-category__title,
  html.lm-lijstweergave-vroeg ul.products li.product-category .woocommerce-loop-category__title {
    text-align: left !important;
    justify-self: start !important;
  }
}

/* ── SORTEERBALK OP MOBIEL (≤700px): compacter i.p.v. 4 losse brokken met
   veel lucht. .storefront-sorting is al flex+wrap (regel hierboven in dit
   bestand); op mobiel dwingen we met flex `order` + een volle-breedte
   flex-basis op de resultatentekst een 2-regelige indeling af: [sorteer-
   select][toggle] op regel 1 (zelfde regel, ruimte ertussen via
   margin-left:auto op de toggle, al bestaand), de resultatentekst klein
   eronder op regel 2. Paginering (aparte <nav>, niet in .storefront-sorting)
   blijft ongewijzigd. */
@media (max-width: 700px) {
  .storefront-sorting {
    row-gap: 4px !important;
    column-gap: 10px !important;
    flex-wrap: wrap !important; /* nodig voor de resultatentekst hieronder, die zichzelf naar een eigen regel dwingt */
  }
  .storefront-sorting .woocommerce-ordering {
    order: 1;
    /* Fixronde batch 16 (2026-08-04, na visuele controle op 375px): stond nog
       stééds onder de toggle. Eerdere aanname (min-width:0 als enige fix) was
       onvolledig: de flex-wrap-beslissing gebeurt op de HYPOTHETICAL MAIN SIZE
       van elk item, en dat is de flex-BASIS geclampt door min/max — niet de
       geclampte breedte zelf. Met `flex: 1 1 auto` is de basis `auto` = de
       intrinsieke breedte van dit <form> (≈ de intrinsieke selectbreedte,
       ~200px); min-width:0 verlaagt alleen de ONDERGRENS van de clamp, maar
       verandert niets aan die basis waarop de wrap-beslissing valt. Bij 375px
       viewport is .storefront-sorting maar ~263px breed: 200 + 10 gap + 147
       (toggle) > 263, dus wrapte de toggle alsnog naar regel 2. Fix: basis
       zelf naar 0 (`flex: 1 1 0`) — hypothetical size wordt dan 0, past
       gegarandeerd naast de toggle op regel 1, en groeit (flex-grow:1) pas
       daarna naar de resterende ruimte. min-width:0 blijft staan als
       vangnet (voorkomt dat de intrinsieke breedte alsnog als ondergrens
       terugkomt zodra de basis ergens anders vandaan zou komen). */
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .storefront-sorting .woocommerce-ordering select {
    padding: 6px 8px !important;
    font-size: 11px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .storefront-sorting .lm-weergave-toggle {
    order: 2;
    flex: 0 0 auto !important; /* eigen formaat, mag niet meekrimpen */
  }
  /* Toggle zelf compacter (was ~147px breed, te veel naast een gekrompen
     select): basisregel .lm-weergave-knop verderop in dit bestand heeft
     padding:8px 14px/font-size:12px (min-height:40px blijft, WCAG-tapdoel) —
     op mobiel iets krapper, zelfde verhouding als de sorteer-select
     hierboven (padding 6px 8px, font-size 11px). */
  .storefront-sorting .lm-weergave-knop {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  .storefront-sorting .woocommerce-result-count {
    order: 3;
    flex: 1 0 100% !important;
    font-size: 11px !important;
  }
}

/* ── PRODUCT DETAIL ── */
/* Bugfix 2026-08-10: style.css zet ".single-product div.product" op
   display:grid met grid-template-columns:1fr 1fr — galerij en summary
   krijgen daardoor elk al een kolom van ~50% van de contentbreedte.
   De oude regels hieronder zetten ADDITIONEEL width:52%/44% op die
   kolommen; een percentage-breedte op een griditem is relatief aan de
   kolom zelf (niet aan de volledige grid), dus de galerij werd ~52% van
   ~50% ≈ een kwart van de contentbreedte — vandaar de piepkleine foto op
   de productpagina. Fix: galerij/summary vullen hun grid-kolom volledig
   (width:100%), zodat de bestaande 50/50-grid de kolombreedte bepaalt —
   overeenkomstig Storefront's eigen ~50%-galerij. Alleen op desktop
   (>768px); de mobiele stapelfix hieronder (≤768px) blijft ongewijzigd. */
@media (min-width: 769px) {
  .woocommerce div.product .woocommerce-product-gallery {
    width: 100% !important;
  }

  .woocommerce div.product .woocommerce-product-gallery img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .woocommerce div.product .summary {
    width: 100% !important;
  }

  /* Productfoto veel kleiner (verzoek Yuri 2026-08-19): de 50/50-grid gaf een
     halve-pagina-grote foto. Galerij krijgt nu een compacte vaste kolom (280px),
     de samenvatting vult de rest. Alleen desktop; de mobiele stapel-/hoogtefix
     verderop blijft ongemoeid. */
  .single-product div.product {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }

  /* Tabs (Beschrijving), gerelateerde producten en up-sells NIET in de
     2-koloms-grid proppen maar over de VOLLE breedte eronder (verzoek Yuri
     2026-08-19): anders plet "Beschrijving" in de 280px-kolom en staan de
     suggesties middenin i.p.v. helemaal onderaan. */
  .single-product div.product > .woocommerce-tabs,
  .single-product div.product > .related,
  .single-product div.product > .up-sells {
    grid-column: 1 / -1 !important;
  }
}

/* "Beschrijving"-kop stond op 52px en plette in de smalle kolom — normaliseren. */
.single-product .woocommerce-tabs h2 {
  font-size: 1.5rem !important;
}
/* RESERVEER-knop op de productpagina niet meer schermbreed. */
.single-product form.cart .single_add_to_cart_button {
  width: auto !important;
  min-width: 220px !important;
  max-width: 100% !important;
}

.woocommerce div.product .product_title {
  font-size: 22px !important;
  font-weight: 600 !important;
  font-family: 'Barlow', sans-serif !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

.woocommerce div.product p.price {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--lm-text) !important;
  margin-bottom: 16px !important;
}

/* Thumbnail row */
.flex-control-thumbs {
  display: flex !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.flex-control-thumbs li {
  list-style: none !important;
  width: auto !important;
  flex: 1 !important;
}

.flex-control-thumbs li img {
  border: 2px solid transparent !important;
  cursor: pointer !important;
}

.flex-control-thumbs li img.flex-active {
  border-color: var(--lm-navy) !important;
}

/* ── SHOP HEADER / TABS ── */
.woocommerce-products-header {
  display: none !important;
}

.lm-shop-tabs {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 20px !important;
  font-size: 18px !important;
  font-family: 'Barlow', sans-serif !important;
}

.lm-shop-tab {
  color: var(--lm-text) !important;
  text-decoration: none !important;
  padding-right: 20px !important;
  margin-right: 20px !important;
  border-right: 1px solid #ccc !important;
  font-weight: 400 !important;
}

.lm-shop-tab:first-child { font-weight: 600 !important; }
.lm-shop-tab:last-child { border-right: none !important; }
.lm-shop-tab:hover { color: var(--lm-accent) !important; text-decoration: none !important; }

/* Sort & count bar */
.woocommerce-result-count { font-size: 12px !important; color: var(--lm-muted) !important; }
.woocommerce-ordering select {
  border: 1px solid #e0e0e0 !important;
  border-radius: 2px !important;
  font-size: 12px !important;
  padding: 5px 8px !important;
}

/* ── PAGINATION ── */
.woocommerce nav.woocommerce-pagination ul {
  border: none !important;
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: 32px !important;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 1px solid #e0e0e0 !important;
  margin: 0 !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  color: var(--lm-text) !important;
  min-width: 34px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--lm-navy) !important;
  color: #fff !important;
}

/* ── GLOBAL BUTTONS ── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.button.alt, .btn-alt {
  background: var(--lm-navy) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  padding: 9px 20px !important;
  border: none !important;
  transition: background .2s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: #253063 !important;
}

/* ── LET'S TALK SECTION ── */
.lm-letstalk {
  background: var(--lm-slate) !important;
  padding: 100px 8vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  margin-top: 60px !important;
}

.lm-letstalk h2 {
  font-size: clamp(56px, 8vw, 96px) !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-family: 'Barlow', sans-serif !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  margin: 0 !important;
}

/* ── FOOTER ── */
.site-footer,
#colophon,
footer[role="contentinfo"] {
  background: var(--lm-slate) !important;
  color: rgba(255,255,255,.65) !important;
  border-top: none !important;
  padding-top: 40px !important;
}

.site-footer a,
#colophon a {
  color: rgba(255,255,255,.75) !important;
  text-decoration: none !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: #fff !important;
}

.footer-widget-region,
.site-footer .widget {
  color: rgba(255,255,255,.65) !important;
}

.site-footer .widgettitle,
.footer-widget-region .widget-title {
  color: #fff !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  border-bottom-color: rgba(255,255,255,.15) !important;
  font-weight: 700 !important;
}

.site-info,
.copyright {
  color: rgba(255,255,255,.4) !important;
  font-size: 11px !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
  padding-top: 14px !important;
  margin-top: 24px !important;
}

/* ── BREADCRUMBS ── */
.woocommerce-breadcrumb {
  font-size: 11px !important;
  color: var(--lm-muted) !important;
  margin-bottom: 20px !important;
}

/* ── FORMS & MESSAGES ── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--lm-navy) !important;
}

/* Bugfix (gemeld): het vinkje/icoon viel over de tekst. Oorzaak: WooCommerce
   core reserveert daar ruimte voor met padding: 1em 2em 1em 3.5em (het icoon
   is ::before, position:absolute, left:1.5em), maar style.css zet
   `padding: 16px 20px` op .woocommerce-message/.woocommerce-info (alle kanten
   gelijk) — daarmee verdwijnt de linker 3.5em-ruimte en valt het icoon
   (nog steeds op left:1.5em) recht over het begin van de tekst. Gekozen fix:
   icoon verbergen, alleen tekst (navy balk blijft, geen breekbare
   em-uitlijning na te bootsen). */
.woocommerce-message::before,
.woocommerce-info::before {
  display: none !important;
}

/* ── RESPONSIVE ── */
/* Tablet: winkel/categorie 2 kolommen, homepage-tegels 2x2. */
@media (max-width: 768px) {
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
  .lm-cat-cards { grid-template-columns: repeat(2,1fr) !important; }
  .woocommerce-page .col-full { flex-direction: column !important; }
  .woocommerce-page .widget-area { width: 100% !important; }
}

/* Mobiel (±375px en breder tot 600px): homepage-tegels en productgrid 1 kolom. */
@media (max-width: 600px) {
  /* Homepage: 4 tegels onder elkaar. Inline style op pagina 29
     (style="grid-template-columns:repeat(4,1fr);...") overrulen — inline
     styles winnen normaal van externe stylesheets, dus !important is hier
     verplicht, niet optioneel. */
  .lm-cat-cards {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  /* Winkel/categorie: 1 kolom i.p.v. 2 op de kleinste schermen. */
  .woocommerce ul.products {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  /* Minder verspilde ruimte: content-area had overal 40px padding, ook op
     de kleinste schermen. */
  .content-area {
    padding: 20px 16px !important;
  }
}

/* Tap targets: aantal-veld + Reserveer-knop (en de lijst/tegel-toggle)
   blijven op elk schermformaat minstens 44px hoog (duimvriendelijk, WCAG/
   Apple-richtlijn), ook al blijft de rij zelf compact. */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .lm-add-to-cart-row .lm-qty-input,
  .woocommerce ul.products li.product .lm-add-to-cart-row .button,
  .woocommerce ul.products li.product .lm-add-to-cart-row .add_to_cart_button,
  .woocommerce ul.products li.product .lm-add-to-cart-row .added_to_cart,
  .lm-weergave-knop {
    min-height: 44px !important;
  }
}

/* ── HEADER OP MOBIEL ──
   Logo, hamburger (Storefront's native .menu-toggle/.nav-menu-mechaniek,
   NIET aangeraakt) en het cart-icoontje blijven ongewijzigd werken — hier
   alleen minder padding en compactere maten zodat ze op ±375px passen i.p.v.
   de desktop-maten (16px/40px padding, cart met volledig bedrag+label). */
@media (max-width: 600px) {
  .site-header .col-full {
    padding: 10px 16px !important;
  }
  .site-header .custom-logo,
  .site-header .site-logo img {
    max-height: 26px !important;
  }
  .site-header-cart .cart-contents {
    padding: 6px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0 !important;
  }
  button.menu-toggle {
    padding: 6px 10px !important;
    font-size: 11px !important;
  }
}

/* ── LOGIN/TOEGANG-AANVRAGEN/WACHTWOORD-KAARTEN OP MOBIEL ──
   .lm-login-card (max-width:400px) past al binnen 375px (100% breed minus de
   wrap-padding), dit is alleen wat extra ademruimte op de kleinste schermen. */
@media (max-width: 480px) {
  .lm-login-wrap {
    padding: 32px 16px !important;
  }
  .lm-login-card {
    padding: 28px 22px !important;
  }
}

/* ── MATERIAALLIJST (CART) OP MOBIEL: KAARTWEERGAVE ──
   thead verbergen, elke rij (tr.woocommerce-cart-form__cart-item) wordt een
   kaart met de td's gestapeld; labels via data-title (al aanwezig in
   WooCommerce's core cart.php-template: product-name/product-price/
   product-quantity/product-subtotal hebben data-title, gebruikt met
   content: attr(data-title) i.p.v. de a/b-variant met eigen tekst na te
   bootsen). Foto + verwijderkruisje hebben geen data-title (logisch, geen
   label nodig) en krijgen een vaste plek bovenaan de kaart. */
@media (max-width: 700px) {
  .woocommerce-cart table.cart thead {
    display: none !important;
  }
  .woocommerce-cart table.cart,
  .woocommerce-cart table.cart tbody {
    display: block !important;
    width: 100% !important;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item {
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative !important;
    background: #fff !important;
    border: 1px solid var(--lm-border) !important;
    border-radius: 6px !important;
    padding: 16px 44px 16px 16px !important;
    margin: 0 0 14px !important;
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 4px 0 !important;
  }
  /* Label boven elke waarde, behalve foto/naam (die hebben geen/eigen label). */
  .woocommerce-cart table.cart td[data-title]::before {
    content: attr(data-title) !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--lm-muted) !important;
    margin-bottom: 2px !important;
  }
  .woocommerce-cart table.cart td.product-name::before {
    content: none !important;
  }
  /* Verwijderkruisje: los rechtsboven op de kaart. */
  .woocommerce-cart table.cart td.product-remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    order: -2;
  }
  /* Foto: klein, bovenaan. */
  .woocommerce-cart table.cart td.product-thumbnail {
    order: -1;
    width: 72px !important;
  }
  .woocommerce-cart table.cart td.product-thumbnail img {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
  }
  .woocommerce-cart table.cart td.product-name {
    order: 0;
    font-weight: 600;
  }
  .woocommerce-cart table.cart td.product-price { order: 1; }
  .woocommerce-cart table.cart td.product-quantity { order: 2; }
  .woocommerce-cart table.cart td.product-subtotal {
    order: 3;
    font-weight: 700;
  }
}

/* ── INTERNE PORTAL LAYOUT (full-width template, geen sidebar) ── */
.page-template-template-fullwidth .col-full {
  max-width: 1140px !important;
}
.page-template-template-fullwidth .content-area,
.no-sidebar .content-area {
  width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
}

/* ── MATERIAALLIJST (cart): formulier links, huurperiode/overzicht rechts ──
   BUGFIX (fixronde 2026-07-29, exact gemeten door de hoofdsessie): FiboSearch's
   eigen zoekwrapper (sectie 26 in materiaallijst-rentman.php) draagt ZELF de
   klasse "woocommerce" (dgwt-wcas-search-wrapp ... woocommerce ...., zie
   ajax-search-for-woocommerce/includes/Shortcode.php). De kale selector
   ".woocommerce-cart .woocommerce" hieronder matchte die wrapper dus OOK
   (staat immers ergens binnen <body class="woocommerce-cart">, via de
   header) — de wrapper werd zo zelf een grid met een 380px-kolom en het
   zoekformulier erin klapte naar 0px breed (ancestor-keten gemeten: wrapper
   260px -> form 0px -> sf-wrapp 20px -> input 26px). Dubbele scoping-fix:
   1) ".site-main" ertussen — dat wrapt alléén de hoofdinhoud (page.php/
   archive.php e.d., NOOIT de header, bevestigd door de Storefront-
   templates te lezen), dus de headerzoekbalk zit daar per definitie
   buiten; 2) ":not(.dgwt-wcas-search-wrapp)" als extra vangnet, mocht een
   vergelijkbare "woocommerce"-klasse ooit ergens anders in de hoofdinhoud
   opduiken. */
.woocommerce-cart .site-main .woocommerce:not(.dgwt-wcas-search-wrapp) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
  gap: 40px !important;
  align-items: start;
}
.woocommerce-cart .site-main .woocommerce:not(.dgwt-wcas-search-wrapp) > .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}
.woocommerce-cart .woocommerce-cart-form {
  grid-column: 1;
  min-width: 0;
}
.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  min-width: 0;
}
@media (max-width: 900px) {
  .woocommerce-cart .site-main .woocommerce:not(.dgwt-wcas-search-wrapp) { grid-template-columns: 1fr !important; }
  .woocommerce-cart .cart-collaterals { grid-column: 1; }
}

/* ── HOMEPAGE-TEGELS ── */
.lm-home-card {
  aspect-ratio: 3 / 2 !important;
}
.lm-home-card .lm-tile-icon {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 36px;
  height: 36px;
  color: rgba(255,255,255,.9);
}
.lm-home-card h3 { font-size: 19px !important; }
.lm-home-card:hover { filter: brightness(1.18); }

/* ── ICONEN OP HOMEPAGE-TEGELS: wit, geen linkkleur ── */
.lm-home-card, .lm-home-card:visited { color: #fff !important; }
.lm-home-card .lm-tile-icon { color: rgba(255,255,255,.9) !important; }

/* ── PRODUCTKAART: relative positionering (nodig voor het zoom-icoon-overlay
   hierboven bij "Zoom icon overlay"). De oude ronde "+"-knop-CSS die hier
   stond is verwijderd/geconsolideerd — zie het "aantal-veld + Reserveer-knop"
   blok bij de cart-button-regels hierboven (batch 6a, 2026-07-28). ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative !important;
}

/* ── CART-COLLATERALS: volle breedte in de rechterkolom, nette koppen ── */
.woocommerce-cart .cart-collaterals > *,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-cart .cart-collaterals .rentman-rental-period {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
}
.woocommerce-cart .cart-collaterals h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  word-break: normal !important;
}

/* ── CROSS-SELLS ("Misschien ben je ook geïnteresseerd in…"): verplaatst van
   .cart-collaterals (te smal, zag er rommelig uit) naar onder de volledige
   cart-grid (materiaallijst-rentman.php sectie 22: woocommerce_after_cart in
   plaats van woocommerce_cart_collaterals). Hier volle breedte, met dezelfde
   kaart-/kopstijl als de rest van de cartpagina en een compacte productrij
   (herbruikt de site-brede ul.products-kaartstijl incl. aantal+Reserveer-rij,
   sectie 16). ── */
.woocommerce-cart .cross-sells {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--lm-border);
}
.woocommerce-cart .cross-sells h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 20px !important;
}
.woocommerce-cart .cross-sells ul.products {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 20px !important;
}

/* ── LOGO in de donkere header ──
   Was: filter: brightness(0) invert(1) — nodig omdat het OUDE logo
   (LM_LOGO_RGB_SCREEN_EXTRA_SMALL, donkerblauw) anders onzichtbaar was op de
   donkere header. Verwijderd (2026-08-04, nieuw logo LM_LOGO_DIAP_RGB_BIG,
   attachment 2284): dat filter dwingt élke ondoorzichtige pixel naar zuiver
   wit (brightness(0) = alles zwart, invert(1) = zwart->wit, alpha blijft
   intact) — op het NIEUWE logo, dat zelf al een "diapositief" is (wit
   woordmerk + navy/oranje eclips-beeldmerk, gemaakt om al op deze donkere
   header te staan), zou dat het oranje/navy accent plat wit maken. Sizing:
   ongewijzigd nodig — Storefront's eigen kernregel
   ".site-header .custom-logo-link img{width:100%;max-width:210px}" (plus
   diens generieke "img{height:auto}") schaalt breedte-gebonden op
   verhouding; oude (400x40, ~10:1) en nieuwe (2560x243, ~10,5:1) logo hebben
   vrijwel dezelfde beeldverhouding, dus de gerenderde hoogte verandert
   nauwelijks (~21px oud vs ~20px nieuw bij 210px breed) — geen aparte
   max-height/width-regel hier nodig. De mobiele .custom-logo{max-height:26px}
   verderop in dit bestand blijft een onschuldig vangnet (ruim boven die
   ~20px, grijpt dus niet in). */
.site-header .custom-logo,
.site-header .site-logo img {
  opacity: .95;
}

/* ============================================
   LOGIN
   ============================================ */
.lm-login-wrap {
  min-height: 70vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--lm-light) !important;
  padding: 48px 20px;
}

.lm-login-card {
  background: var(--lm-white) !important;
  width: 100%;
  max-width: 400px;
  padding: 40px;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}

.lm-login-brand {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--lm-navy) !important;
  font-size: 11px !important;
  text-align: center !important;
  margin: 0 0 10px !important;
}

.lm-login-titel {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 300 !important;
  font-size: 26px !important;
  color: var(--lm-text) !important;
  text-align: center !important;
  margin: 0 0 28px !important;
}

#loginform input[type="text"],
#loginform input[type="password"],
#lm-set-password-form input[type="password"] {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  margin-bottom: 14px !important;
}

#loginform label {
  font-size: 12px !important;
  color: var(--lm-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  display: block !important;
  margin-bottom: 4px !important;
}

#loginform p.login-remember label {
  text-transform: none !important;
  font-size: 12.5px !important;
  color: var(--lm-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 400 !important;
}

#wp-submit {
  width: 100% !important;
  background: var(--lm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
  margin-top: 6px !important;
  transition: background .2s !important;
}

#wp-submit:hover {
  background: #10152a !important;
}

.lm-login-card p {
  font-size: 12.5px !important;
  color: var(--lm-muted) !important;
  text-align: center !important;
  margin: 14px 0 0 !important;
}

.lm-login-card p a {
  color: var(--lm-muted) !important;
  text-decoration: underline !important;
}

.lm-login-card p a:hover {
  color: var(--lm-navy) !important;
}

.page-id-44 .entry-title,
.page-id-62 .entry-title,
.page-id-165 .entry-title,
.page-id-256 .entry-title {
  display: none !important;
}

/* ============================================
   UITGELOGD: menu/winkelwagen verbergen
   ============================================ */
body.lm-uitgelogd .storefront-primary-navigation,
body.lm-uitgelogd .main-navigation,
body.lm-uitgelogd .site-header-cart,
body.lm-uitgelogd .woocommerce-breadcrumb {
  display: none !important;
}

/* Batch 27, punt 4: op uitgelogde pagina's (o.a. de inlogpagina) zijn nav en
   cart verborgen, maar Storefront laat .site-branding links floaten op ~38%
   breedte -> het logo stond links i.p.v. gecentreerd, en de klikbare
   .custom-logo-link vulde die hele brede kolom (klikvlak veel breder dan het
   logo). Branding centreren en het anker naar de logo-breedte krimpen. */
body.lm-uitgelogd .site-header .col-full {
  text-align: center !important;
}
body.lm-uitgelogd .site-branding {
  float: none !important;
  width: auto !important;
  margin: 0 auto !important;
}
body.lm-uitgelogd .custom-logo-link {
  display: inline-block !important;
}

/* ============================================
   PROJECT AANMAKEN (checkout) — herindeling 2026-07-29
   ============================================
   Bug in style.css: ".woocommerce-checkout .woocommerce" kreeg een 2-koloms
   grid, maar heeft maar 1 direct kind (form.checkout) — dat kind ging dus vol
   in kolom 1 staan met een lege kolom 2 ernaast. Fix (bestond al): wrapper
   terug naar normale blokweergave, 2-koloms-grid op form.checkout zelf.
   NIEUW (2026-07-29, goedgekeurd ontwerp): alle invoer (klant/transport/
   personeel hingen tot nu toe op woocommerce_checkout_before_order_review en
   kwamen dus in de RECHTERkolom terecht, samen met #order_review — vandaar de
   drie dunne kolommen en de rechts opgestapelde rommel) verhuist naar de
   linkerkolom. De hooks zijn in materiaallijst-rentman.php aangepast
   (secties 4/12/19 hangen nu op woocommerce_after_checkout_billing_form,
   ná de billing-velden). Klant/transport/personeel zijn zo automatisch
   .col2-set > .col-1 > .woocommerce-billing-fields se directe kinderen (ná de
   veldenwrapper), samen met de billing-velden zelf (Projectnaam/Locatie/
   Externe referentie) en de Projectnotities-sectie (.woocommerce-additional-
   fields, ook in col-1 want er is geen shipping-adres nodig — WC()->cart->
   needs_shipping() is hier altijd false). Om ze in een visueel andere
   volgorde te tonen dan hun DOM-volgorde (Projectnaam eerst, dan Klant, dan
   Locatie+Externe referentie naast elkaar, dan Transport/Personeel/
   Projectnotities) worden alle tussenliggende wrapper-divs met
   display:contents "plat" gemaakt zodat elk veld/blok een eigen grid-item
   wordt van .col2-set, en met CSS `order` + `grid-column` precies neergezet. */
/* Zelfde scoping-fix als de cart hierboven: FiboSearch's zoekwrapper draagt
   ook de klasse "woocommerce" en zou anders hier ook (onbedoeld)
   display:block !important krijgen op de checkoutpagina. */
.woocommerce-checkout .site-main .woocommerce:not(.dgwt-wcas-search-wrapp) {
  display: block !important;
}

.woocommerce-checkout form.checkout {
  display: grid !important;
  /* Batch 12b(3), 2026-07-29: was minmax(0,1fr) 420px (vaste 420px-kolom
     rechts, wat op bredere schermen een relatief SMALLE linkerkolom gaf
     t.o.v. het beschikbare totaal).
     BUGFIX (fixronde 2026-07-29): de fr-based ~58/38-verhouding bleek in de
     praktijk een te smalle rechterkolom te geven (order-review-tabel stapelde
     per woord, "Project versturen"-knop paste niet op één regel). Terug naar
     een expliciete pixelbreedte voor rechts — minmax(280px, 340px) i.p.v. een
     fractie, zodat de kolom altijd rond de gevraagde ~340px blijft ongeacht
     hoe breed het totaal is; links vult de rest (minmax(0, 1fr)). */
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px) !important;
  gap: 40px !important;
  align-items: start !important;
}

/* Links: één kaart met alle invoer. 2 kolommen zodat Locatie/Externe
   referentie naast elkaar kunnen (grid-column: span 1 hieronder); alle
   overige blokken nemen de volle breedte (grid-column: 1 / -1). */
.woocommerce-checkout form.checkout > .col2-set {
  grid-column: 1;
  min-width: 0;
  width: 100% !important; /* batch 12b(3): de invulkaart moet de volle linkerkolom vullen */
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  align-content: start;
  background: var(--lm-light);
  padding: 32px 36px;
  border-radius: 6px;
}

/* Alle tussenliggende WooCommerce-wrapperdivs plat: hun eigen kinderen
   (velden, koppen, onze custom blokken) worden zo rechtstreeks grid-items
   van .col2-set, zodat `order`/`grid-column` hieronder op elk veld apart werkt
   i.p.v. op hun (niet-herordenbare) wrapper. */
.woocommerce-checkout form.checkout .col2-set > .col-1,
.woocommerce-checkout form.checkout .col2-set > .col-2,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: contents;
}

/* De kopjes "Factuurgegevens"/"Billing details" en "Aanvullende informatie"/
   "Additional information" verdwijnen (goedgekeurd ontwerp: één ongelabelde
   kaart, geen WooCommerce-jargon). */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: none !important;
}

/* Voornaam/Achternaam: verborgen (worden automatisch gevuld uit het account,
   zie sectie 3b in materiaallijst-rentman.php) i.p.v. verplicht ingevuld op
   een checkout waar de gebruiker al is ingelogd. */
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_last_name_field {
  display: none !important;
}

/* Volgorde in de kaart: Projectnaam (groot, bovenaan) → Klant → Locatie +
   Externe referentie naast elkaar → Transport → Personeel → Projectnotities.
   Elk blok krijgt hier zijn plek; ongenoemde grid-items (verborgen velden)
   doen niet mee aan de volgorde. */
#billing_company_field   { order: 1; grid-column: 1 / -1; }
.lm-checkout-klant       { order: 2; grid-column: 1 / -1; }
#billing_locatie_field   { order: 3; grid-column: span 1; }
#billing_reference_field { order: 4; grid-column: span 1; }
.lm-checkout-transport   { order: 5; grid-column: 1 / -1; }
.lm-checkout-personeel   { order: 6; grid-column: 1 / -1; }
#order_comments_field    { order: 7; grid-column: 1 / -1; }

/* Projectnaam: groot en bovenaan, duidelijk het belangrijkste veld van het
   formulier — zwaardere stijl dan de overige (kleinere) labels/velden. */
#billing_company_field label {
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--lm-text) !important;
  margin-bottom: 10px !important;
}
#billing_company_field input {
  font-size: 19px !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
}

/* Klant/transport/personeel: geen eigen kaartachtergrond meer (ze zitten nu
   sámen met de billing-velden in de ene linkerkolomkaart hierboven) — alleen
   nog wat ruimte tussen de blokken en een consistente kopstijl. */
.woocommerce-checkout .lm-checkout-klant,
.woocommerce-checkout .lm-checkout-transport,
.woocommerce-checkout .lm-checkout-personeel {
  padding-top: 8px;
  border-top: 1px solid var(--lm-border);
}
.woocommerce-checkout .lm-checkout-klant h3,
.woocommerce-checkout .lm-checkout-transport h3,
.woocommerce-checkout .lm-checkout-personeel h3 {
  margin: 0 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

/* Rechts: sticky kaart met huurperiode, orderoverzicht en de verstuurknop.
   .lm-checkout-zijkolom wrapt dit alles (materiaallijst-rentman.php, sectie
   21: hooks vóór "Jouw bestelling" en ná #order_review) zodat we één keer
   position:sticky kunnen zetten i.p.v. op drie losse siblings (dat gaf
   onvoorspelbaar overlapgedrag). */
.woocommerce-checkout form.checkout > .lm-checkout-zijkolom {
  grid-column: 2;
  min-width: 0;
  position: sticky;
  top: 20px;
  /* Batch 12b(1), 2026-07-29: kop ("JE BESTELLING"), huurperiodekaart en
     #order_review zijn de drie (rechtstreekse) kinderen van deze wrapper
     (sectie 21 in materiaallijst-rentman.php). Een flex-kolom met een vaste
     gap garandeert consistente ruimte tussen ze, ongeacht de eigen
     margins van elk kind afzonderlijk (margin-collapsing tussen los
     opgestapelde blokelementen was de reden dat de kop het huurperiodeblok
     kon raken). */
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.woocommerce-checkout .lm-checkout-zijkolom #order_review_heading {
  margin-top: 0;
  margin-bottom: 0; /* ruimte komt nu uit de flex-gap hierboven, niet meer uit de eigen margin */
}

.woocommerce-checkout .lm-checkout-zijkolom .order-rental-period,
.woocommerce-checkout .lm-checkout-zijkolom #order_review {
  margin: 0; /* idem: geen eigen margin meer nodig, de flex-gap regelt de afstand */
}

/* Huurperiode-tekst (komt uit rentman-plugin-master/templates/checkout/rental-period.php)
   als nette kaart, in dezelfde stijl als #order_review. */
.woocommerce-checkout .order-rental-period {
  background: var(--lm-light);
  padding: 20px 24px;
  border-radius: 6px;
  margin-bottom: 20px;
}
.woocommerce-checkout .order-rental-period p {
  margin: 0;
  font-size: 13.5px;
}

/* BUGFIX (fixronde 2026-07-30, gemeld na visuele controle op ~1568px): de
   knop bleef op 2 regels staan én stak rechts buiten zijn vlak — gemeten:
   de knopcontainer rendert maar ~120px breed, terwijl de kolom zelf
   minmax(280px,340px) is. #place_order had zelf al width:100% !important,
   dus de beperking zat ergens in de ANCESTOR-keten. Bij nalezen van de
   kern-templates (checkout/payment.php, wc-template-functions.php:
   woocommerce_checkout_payment() ligt op prioriteit 20 van
   'woocommerce_checkout_order_review', NÁ woocommerce_order_review() op
   prioriteit 10) is bevestigd dat #payment een DIRECT kind is van
   #order_review, en .form-row.place-order een direct kind van #payment —
   geen extra, onverwachte wrapper ertussen. Geen enkele regel in onze eigen
   CSS, WooCommerce-kern-CSS of Storefront-CSS zet een expliciete
   px/%-breedte op #payment/.form-row.place-order die dit zou verklaren
   (nagelopen, geen losse browser beschikbaar in deze sessie om het
   daadwerkelijk gerenderde element te meten). Fix: de HELE keten expliciet
   op 100% breedte zetten (met box-sizing:border-box zodat padding niet
   optelt bovenop die 100%), zodat een eventuele nog onbekende krimpende
   voorouder hier hoe dan ook wordt gecorrigeerd. */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods,
.woocommerce-checkout .woocommerce-checkout-payment .form-row.place-order {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Verstuurknop: was white-space:nowrap (WPCode-snippet 194) waardoor "PROJECT
   VERSTUREN" buiten zijn vlak liep in de nieuwe (smallere) rechterkolom.
   Groot en opvallend, onderaan de sticky kaart. */
.woocommerce-checkout #place_order {
  box-sizing: border-box !important;
  display: block !important;
  white-space: normal !important;
  width: 100% !important;
  padding: 20px 24px !important;
  font-size: 15px !important;
  /* Batch 12b(2), 2026-07-29: brak eerder af als "PROJECT VERSTUR-EN" middenin
     het woord — dezelfde soort fix als de productnaam-kolom hierboven
     (word-break/overflow-wrap/hyphens expliciet uit), zodat de tekst op de
     nu-bredere knop (zie de 12b(3)-kolomverhouding hierboven) altijd op
     één regel blijft i.p.v. halverwege een woord te breken. */
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Productlijst compact en op volle kolombreedte: geen per-woord-afbreking van
   de productnaam (was: table-layout: fixed liet lange namen per letter
   afbreken doordat de kolom maar 380px/420px breed is). Naam links (flex 1),
   x-aantal en bedrag rechts blijven in hun eigen kolommen staan. */
#order_review {
  padding: 20px !important;
}
.woocommerce-checkout-review-order-table {
  width: 100% !important;
  table-layout: auto !important;
}
.woocommerce-checkout-review-order-table th.product-name,
.woocommerce-checkout-review-order-table td.product-name {
  width: 70%;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* "Kosten indicatief"-regel onder het totaal, cart én checkout (sectie 11 in
   materiaallijst-rentman.php: woocommerce_cart_totals_after_order_total /
   woocommerce_review_order_after_order_total). */
.lm-indicatief {
  color: var(--lm-muted) !important;
  font-style: italic;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding-top: 10px !important;
  border-bottom: none !important;
}

@media (max-width: 900px) {
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr !important;
  }
  .woocommerce-checkout form.checkout > .col2-set {
    grid-template-columns: 1fr 1fr;
  }
  .woocommerce-checkout form.checkout > .col2-set,
  .woocommerce-checkout form.checkout > .lm-checkout-zijkolom {
    grid-column: 1;
  }
  /* Sticky rechterkolom heeft geen zin meer zodra hij onder de invoerkaart
     staat (gestapelde kolommen) — laat hem gewoon meescrollen. */
  .woocommerce-checkout form.checkout > .lm-checkout-zijkolom {
    position: static;
  }
}

@media (max-width: 480px) {
  /* Op de smalste schermen ook Locatie/Externe referentie onder elkaar i.p.v.
     naast elkaar (span-1-kolommen worden anders te smal). */
  .woocommerce-checkout form.checkout > .col2-set {
    grid-template-columns: 1fr;
  }
  #billing_locatie_field,
  #billing_reference_field {
    grid-column: 1 / -1;
  }
}

/* ── MATERIAALLIJST (cart): planperiode-velden naast elkaar i.p.v. scheef
   onder elkaar (was: losse form-row-first/last p's met inline-block, die
   conflicteerden met WooCommerce/Storefront's eigen form-row-float-CSS) ── */
.lm-plan-period,
.lm-vrij-artikel {
  margin: 20px 0;
  padding: 20px 24px;
  background: var(--lm-light);
  border-radius: 6px;
}
.lm-plan-period h3,
.lm-vrij-artikel h3 {
  margin-top: 0;
}
.lm-plan-period-uitleg {
  color: var(--lm-muted);
  font-size: 13px;
  margin: 0 0 16px;
}
.lm-plan-period-row,
.lm-vrij-artikel-row {
  display: flex !important;
  gap: 20px;
  flex-wrap: wrap;
}
.lm-plan-period-row .form-row-first,
.lm-plan-period-row .form-row-last,
.lm-vrij-artikel-row .form-row-first,
.lm-vrij-artikel-row .form-row-last {
  flex: 1 1 220px;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* Aantal-veld van de vrije regel mag smaller zijn dan de naam */
.lm-vrij-artikel-row .form-row-last {
  flex: 0 1 120px;
}

/* Beschikbaarheid per cartregel (materiaallijst-rentman.php sectie 31,
   batch 26e, 2026-08-10): subtiele regel onder de productnaam, rood zodra
   het gekozen aantal hoger is dan de Rentman-voorraad. #b00020 hergebruikt
   (zelfde rood als .lm-personeel-verwijder:hover elders in dit bestand). */
.lm-cart-beschikbaarheid {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--lm-muted);
}
.lm-cart-beschikbaarheid.lm-voorraad-tekort {
  color: #b00020;
  font-weight: 600;
}

/* ============================================
   TOEGANG AANVRAGEN
   ============================================ */
.lm-login-card .lm-toegang-link {
  text-align: center;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lm-light);
  font-size: 12.5px;
  color: var(--lm-muted);
}
.lm-login-card .lm-toegang-link a {
  color: var(--lm-navy);
  font-weight: 600;
  text-decoration: underline;
}

.lm-toegang-form input[type="text"],
.lm-toegang-form input[type="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  margin-bottom: 14px !important;
}
.lm-toegang-form label {
  font-size: 12px !important;
  color: var(--lm-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.lm-toegang-form button[type="submit"] {
  width: 100% !important;
  background: var(--lm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  cursor: pointer !important;
}
.lm-toegang-form button[type="submit"]:hover {
  background: #10152a !important;
}
/* ── PAKKET/SET-INHOUD (productpagina, combinatieproducten) ── */
.lm-package-content {
  margin: 20px 0 !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 6px !important;
  padding: 4px 16px !important;
  background: #f7f8fa !important;
}
.lm-package-content summary {
  cursor: pointer !important;
  font-weight: 600 !important;
  padding: 12px 0 !important;
  color: var(--lm-navy) !important;
  list-style: none !important;
}
.lm-package-content summary::-webkit-details-marker { display: none; }
.lm-package-content summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform .15s;
}
.lm-package-content[open] summary::before { transform: rotate(90deg); }
.lm-package-content ul {
  list-style: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
}
.lm-package-content li {
  padding: 5px 0 !important;
  font-size: 13px !important;
  color: var(--lm-muted) !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
}
.lm-package-content li:first-child { border-top: none !important; }
.lm-package-content .lm-package-qty {
  display: inline-block;
  min-width: 28px;
  color: var(--lm-text) !important;
  font-weight: 600 !important;
}

/* ── "HOORT HIERBIJ": accessoires op de productpagina (batch 6b, 2026-07-28) ── */
.lm-accessories {
  margin-top: 32px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e0e0e0 !important;
  clear: both !important;
}
.lm-accessories h2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 14px !important;
  font-family: 'Barlow', sans-serif !important;
}
.lm-accessories-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.lm-accessory-card {
  width: 150px !important;
  border: 1px solid #e0e0e0 !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
}
.lm-accessory-card a {
  text-decoration: none !important;
  color: var(--lm-text) !important;
  display: flex !important;
  flex-direction: column !important;
}
.lm-accessory-card img {
  width: 100% !important;
  height: 90px !important;
  object-fit: contain !important;
  background: #fff !important;
  margin-bottom: 8px !important;
}
.lm-accessory-name {
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}
.lm-accessory-price {
  font-size: 12px !important;
  color: var(--lm-muted) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
/* Aantal + Reserveer-knop hergebruikt dezelfde .lm-add-to-cart-row/.lm-qty-input
   opbouw als de productkaarten (sectie 6a hierboven), maar die regels zijn
   gescoped op ".woocommerce ul.products li.product" — hier opnieuw gescoped
   op ".lm-accessories" zodat dezelfde look ook in dit blok werkt. */
.lm-accessories .lm-add-to-cart-row {
  display: flex !important;
  gap: 6px !important;
  margin-top: auto !important;
}
.lm-accessories .lm-qty-input {
  width: 48px !important;
  flex: 0 0 48px !important;
  padding: 5px 4px !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  text-align: center !important;
  color: var(--lm-text) !important;
  background: #fff !important;
}
.lm-accessories .button,
.lm-accessories .add_to_cart_button,
.lm-accessories .added_to_cart {
  flex: 1 1 auto !important;
  background: var(--lm-navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  /* Batch 27, punt 21: nowrap + min-width:auto liet de knop met de volledige
     tekst niet krimpen, waardoor hij buiten het accessoirekaartje stak.
     Tekst mag nu afbreken en de flex-item mag onder z'n content-breedte. */
  white-space: normal !important;
  min-width: 0 !important;
}
.lm-accessories .button:hover,
.lm-accessories .add_to_cart_button:hover {
  background: var(--lm-text) !important;
}
.lm-accessories .button.added {
  display: none !important;
}

/* ── PRODUCTDETAILPAGINA OP MOBIEL (≤768px) — bugfix 2026-07-31, gemeld door
   Yuri met een iPhone-screenshot, root cause bevestigd door de hoofdsessie:
   style.css zet ".single-product div.product" op display:grid met expliciet
   grid-column:1/2 op galerij/summary (ONVOORWAARDELIJK, alle viewports); de
   bestaande 900px-regel (elders in style.css) zet grid-template-columns
   terug naar 1fr, maar laat de EXPLICIETE grid-column:2 op .summary staan —
   de browser genereert daardoor een IMPLICIETE tweede kolom en galerij +
   summary blijven naast elkaar staan, nu samengeperst met design.css' eigen
   width:52%/44%-regels (hierboven in dit bestand) bovenop die impliciete,
   naar-inhoud-gemeten kolombreedte. Resultaat: een piepklein zichtbaar vlak
   voor titel/prijs/omschrijving (vandaar het per-teken afbreken) en
   mogelijk een brede impliciete kolom die voor lege ruimte/horizontale
   overflow zorgt. Fix: op mobiel .product zelf helemaal van display:grid AF
   (naar block) — daarmee is grid-column op de kinderen een no-op en vallen
   ze vanzelf terug op normale document-flow (galerij, dan summary, in
   DOM-volgorde, precies zoals WooCommerce's eigen template ze uitvoert:
   wp-content/plugins/woocommerce/templates/single-product.php). Robuuster
   dan de kinderen individueel proberen te herpositioneren. */
@media (max-width: 768px) {
  .woocommerce div.product,
  .single-product div.product {
    display: block !important;
    padding: 20px 0 !important;
    overflow-x: hidden !important;
  }
  .woocommerce div.product .woocommerce-product-gallery,
  .single-product .woocommerce-product-gallery {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 0 20px !important;
  }
  /* Hoofdfoto: redelijke hoogte i.p.v. schermvullend, hele foto zichtbaar
     (contain, geen crop) — er was nog geen enkele hoogtebeperking. */
  .woocommerce div.product .woocommerce-product-gallery img,
  .single-product .woocommerce-product-gallery img {
    width: 100% !important;
    max-height: 320px !important;
    object-fit: contain !important;
    background: #fff !important;
  }
  .woocommerce div.product .summary,
  .single-product .summary {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  /* Titel/prijs: iets kleiner dan desktop, en expliciet geen
     letter-voor-letter-afbreking meer (overflow-wrap/word-break/hyphens) —
     was met de piepkleine kolom hiervoor het zichtbare symptoom, maar blijft
     als vangnet staan ook al is de kolom nu weer vol-breed. */
  .woocommerce div.product .product_title,
  .single-product .product_title {
    font-size: 20px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
  .woocommerce div.product p.price,
  .single-product .price {
    font-size: 16px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  .single-product .woocommerce-product-details__short-description {
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Aantal + "In winkelwagen"/Reserveer: volle breedte, ≥44px tap targets.
     Er was hier nog helemaal geen mobiele regel voor form.cart/.quantity —
     de knop zelf is al width:100% (style.css), dit voegt alleen de
     ontbrekende hoogte/breedte op de aantal-input en wat lucht toe. */
  .woocommerce div.product form.cart .quantity,
  .single-product form.cart .quantity {
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  .woocommerce div.product form.cart .quantity .qty,
  .single-product form.cart .quantity .qty {
    width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    text-align: center !important;
  }
  .woocommerce div.product form.cart .single_add_to_cart_button,
  .single-product .single_add_to_cart_button {
    min-height: 44px !important;
  }

  /* Pakket-inhoud (sectie 14): het <details>-blok is al vol-breed block-level,
     hier alleen wat minder padding zodat het niet breder oogt dan de rest. */
  .lm-package-content {
    padding: 4px 12px !important;
  }

  /* "Hoort hierbij" (sectie 17): 2 kolommen die de rij netjes vullen i.p.v.
     de vaste 150px-kaart (die op 375px een lege strook rechts overliet). */
  .lm-accessories-grid {
    gap: 10px !important;
  }
  .lm-accessory-card {
    width: calc(50% - 5px) !important;
  }
}

/* Honeypot: onzichtbaar voor mensen, wel aanwezig voor bots die alle velden invullen */
.lm-toegang-form .lm-honeypot {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================
   MATERIAALGROEPEN (cart, sectie 16)
   ============================================ */
.lm-groepen {
  margin: 20px 0;
  padding: 20px 24px;
  background: var(--lm-light);
  border-radius: 6px;
}
.lm-groepen h3 {
  margin-top: 0;
}
.lm-groepen-uitleg {
  color: var(--lm-muted);
  font-size: 13px;
  margin: 0 0 16px;
}
/* Knoppen "Ongegroepeerd" + per groep (batch 11b/24b, 2026-07-29) — vervangt
   de vorige losse .lm-groepen-lijst (statisch <ul>, geen interactie). Elke
   knop is de submit van een eigen 1-knops <form> (POST-redirect-GET, zelfde
   patroon als de rest van deze pagina), dus geen los display:inline-block op
   het <form> zelf zou een ongewenste nieuwe regel geven — vandaar de
   .lm-groep-knop-form-wrapper hieronder. */
.lm-groepen-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.lm-groep-knop-form {
  display: inline-block;
  margin: 0;
}
.lm-groep-knop {
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lm-navy);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.lm-groep-knop:hover {
  background: var(--lm-light);
}
.lm-groep-knop.is-actief {
  background: var(--lm-navy);
  border-color: var(--lm-navy);
  color: #fff;
}
.lm-groepen-row {
  display: flex !important;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.lm-groepen-row .form-row-first {
  flex: 1 1 220px;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.lm-groepen-row .form-row-last {
  flex: 0 0 auto;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}

/* Groep-dropdown per cartregel (zelfde plek als "Opmerking intern",
   WPCode-snippet 170, dat inline styles gebruikt — hier wel een klasse
   zodat sectie 16 zijn eigen CSS-blok heeft). */
.lm-groep-select-wrap {
  margin-top: 8px;
  max-width: 260px;
}
.lm-groep-select-wrap label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 13px;
}
.lm-groep-select {
  width: 100%;
  padding: 8px;
}

/* ============================================
   PERSONEEL OP CHECKOUT (sectie 17)
   ============================================ */
.lm-personeel-uitleg {
  color: var(--lm-muted);
  font-size: 13px;
  margin: 0 0 16px;
}
.lm-personeel-rij {
  display: flex !important;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  position: relative;
  padding-right: 32px;
  margin-bottom: 4px;
}
.lm-personeel-rij .form-row {
  margin: 0 0 12px !important;
  width: auto !important;
  float: none !important;
}
.lm-personeel-rij .form-row-first {
  flex: 1 1 180px;
}
.lm-personeel-aantal-cel {
  flex: 0 1 100px;
}
.lm-personeel-naam-cel {
  flex: 1 1 100%;
}
.lm-personeel-verwijder {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  color: var(--lm-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.lm-personeel-verwijder:hover {
  color: #b00020;
}

/* Personeel-overzicht op bedankpagina/orderdetail (sectie 17e) */
.lm-personeel-overzicht ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lm-personeel-overzicht li {
  padding: 4px 0;
}

/* ============================================
   VERDELEN PER REGEL (batch 11e/24f, 2026-07-29)
   ============================================ */
.lm-groep-verdeel {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lm-groep-verdeel label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lm-muted);
}
.lm-verdeel-aantal {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--lm-border);
  border-radius: 2px;
  font-size: 12.5px;
}
.lm-verdeel-doelgroep {
  padding: 6px 8px;
  border: 1px solid var(--lm-border);
  border-radius: 2px;
  font-size: 12.5px;
  max-width: 160px;
}
.lm-verdeel-knop {
  font-size: 11px !important;
  padding: 6px 10px !important;
}

/* ============================================
   GROEPSKOP-RIJEN IN DE MATERIAALLIJST (batch 11c/24i, 2026-07-29)
   ============================================ */
tr.lm-groep-kop td {
  background: var(--lm-light) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--lm-border) !important;
}
tr.lm-groep-kop h4 {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--lm-navy) !important;
}

/* ============================================
   HEADER RIJ 2 OP ÉÉN REGEL: NAV + ZOEK/CART (batch 17a, 2026-08-07)
   ============================================ */
/* PROBLEEM (gemeten door de hoofdsessie op de live site): Storefronts eigen
   desktop-CSS (@media min-width:768px) geeft ".main-navigation" 73,9%
   breed/float:left en de header-search-cart-wrapper (sectie 26 hierboven,
   die zelf ".site-header-cart"s float:right-rol overneemt, zie de bugfix-
   toelichting daar) een vaste flex-basis van 260px + cart ernaast, float:
   right. Opgeteld (887px + 412px op een 1200px-col-full) past dat niet op
   één regel, dus de search-cart-groep klapte naar een tweede regel -> een
   onnodig dikke header. FIX: rij 2 zelf (".storefront-primary-navigation
   .col-full", de rij mét nav én search/cart) krijgt een ECHTE flex-layout;
   in een flexcontainer worden floats van de kinderen genegeerd (CSS-spec),
   dus de bestaande float:left/float:right-regels op ".main-navigation"/
   ".lm-header-search-cart" hoeven niet weg - ze worden gewoon overruled
   door hun nieuwe rol als flex-items. Nav krijgt ruimte om te krimpen
   (min-width:0, flex-shrink), zoek/cart blijft op vaste breedte staan
   (bestaande flex-basis in sectie 26) zodat ze niet meer botsen. */
@media (min-width: 768px) {
  .storefront-primary-navigation .col-full {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px;
  }
  .storefront-primary-navigation .main-navigation {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    margin-bottom: 0 !important;
  }
  /* Iets smaller zoekveld dan sectie 26's basis 260px, zodat er op de
     krapste 768-980px-breedtes altijd ruimte overblijft voor het menu. */
  .lm-header-search {
    flex-basis: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}
@media (min-width: 992px) {
  /* Vanaf ruim voldoende breedte weer het volle, comfortabelere zoekveld. */
  .lm-header-search {
    flex-basis: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
  }
}

/* MOBIEL (<768px, hetzelfde omslagpunt als Storefronts hamburgermenu):
   nav en zoek/cart-groep expliciet onder elkaar (flex-column) i.p.v. te
   vertrouwen op de standaard blokvolgorde. Dit is tevens de fix voor punt C
   (zoekbalk zweeft over het opengeklapte menu heen): met een echte
   flex-column-stack krijgt de zoek/cart-rij altijd zijn EIGEN plek in de
   normale documentflow ONDER de nav (die zijn eigen hoogte bepaalt,
   inclusief het opengeklapte menu), in plaats van dat er nog een
   float/positionering van Storefront of onszelf kan blijven "hangen"
   waardoor de wrapper op de oude plek (naast/over het dichtgeklapte menu)
   blijft staan zodra de ul opengaat. float:none + position:static als
   vangnet tegen precies die eerder waargenomen "losse positionering". */
@media (max-width: 767px) {
  .storefront-primary-navigation .col-full {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .storefront-primary-navigation .main-navigation {
    float: none !important;
    width: 100% !important;
    position: static !important;
  }
  .lm-header-search-cart {
    float: none !important;
    position: static !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    flex-wrap: wrap !important;
  }
  .lm-header-search-cart #site-header-cart {
    margin-bottom: 0 !important;
  }
}

/* ============================================
   ZOEKVELD IN DE HEADER (FiboSearch, batch 13a/sectie 26, 2026-07-29)
   ============================================ */
/* BUGFIX (fixronde 2026-07-29): .lm-header-search en het cart-widget
   (#site-header-cart) delen nu één flex-wrapper .lm-header-search-cart
   (geopend/gesloten in materiaallijst-rentman.php sectie 26, ná/vóór resp.
   de zoekbalk en storefront_header_cart). ROOT CAUSE was dat Storefront's
   eigen desktop-CSS (@media min-width:768px) .main-navigation (73,9% float:
   left) en .site-header-cart (21,7% float:right) al bijna 100% van de rij
   innam — een derde, niet-gefloat zusje ertussenin had zo geen ruimte en
   klapte in of overlapte. Deze wrapper neemt nu ZELF de float:right-rol over
   (in plaats van dat .site-header-cart dat los blijft doen), met daarbinnen
   een echte flexrow: [zoekveld, vaste breedte] [cart-widget]. */
.lm-header-search-cart {
  display: flex !important;
  align-items: center !important;
  gap: 14px;
}
@media (min-width: 768px) {
  .lm-header-search-cart {
    float: right !important;
    width: auto !important;
    margin-bottom: 0 !important; /* was 1.41575em (~20px) — dode ruimte sinds de wrapper flex-gecentreerd in de nav-rij zit (batch 23), zie fix v4.11 */
  }
  /* .site-header-cart is nu een flex-item van onze eigen wrapper i.p.v. zelf
     te floaten — anders vecht zijn eigen float:right tegen deze wrapper. */
  .lm-header-search-cart #site-header-cart {
    float: none !important;
    width: auto !important;
    margin-bottom: 0 !important;
    /* BUGFIX (batch 23, 2026-08-10): zonder flex-shrink:0 kromp dit
       flex-item mee als de rij krap werd (nav + zoekveld 260px vast +
       cart), tot zo'n 82px breed — te smal voor "€ 40,00 · 3 items", zie
       toelichting bij de .cart-contents-pil-fix hieronder. */
    flex-shrink: 0 !important;
  }
}

/* ============================================
   COMPACTE WINKELWAGEN-PIL + LOGO-ADEMRUIMTE (batch 23, 2026-08-10)
   ============================================ */
/* PROBLEEM (gemeten door de hoofdsessie op de live desktop-site): de header
   was 203px hoog - een logostrook van 42px + een navigatierij van 161px,
   veroorzaakt door #site-header-cart .cart-contents die 138px hoog was.
   ROOT CAUSE: in de markup zit .cart-contents (de <a class="cart-contents">
   met daarin .woocommerce-Price-amount en .count) binnen
   .storefront-primary-navigation, en erft daardoor de navigatiestijl uit de
   ── NAVIGATION ── sectie bovenaan dit bestand over: ".storefront-primary-
   navigation a" geeft line-height:60px !important en padding:0 16px
   !important. Storefront's eigen kern-CSS zet .cart-contents zelf op
   display:block zonder white-space:nowrap - in een smal vakje (zie de
   flex-shrink-fix hierboven) wrapten de twee spans (bedrag/aantal) daardoor
   elk naar een eigen 60px-hoge regel: ~138px totaal.
   FIX: forceer een compacte HORIZONTALE pil (inline-flex, één regel op
   normale line-height) i.p.v. het gestapelde blok. Rand/afronding/kleuren
   (style.css, sectie "CART ICON IN HEADER") blijven ongewijzigd - alleen
   richting en hoogte veranderen. Het mandje-icoon (Storefront's eigen
   .cart-contents::after, font-icoon, momenteel float:right) loopt vanzelf
   inline mee zodra de ouder inline-flex is: float wordt op flex-items
   genegeerd (CSS-spec), dus het icoon wordt gewoon het derde flex-item na
   de twee spans, zonder dat de eigen icoon-CSS hoeft te worden aangeraakt.
   Display/uitlijning zijn bewust universeel (geen media query) - een
   horizontale pil is ook op mobiel beter dan het gestapelde blok. Alleen de
   padding staat vanaf 601px, zodat de al bestaande, fijngestelde mobiele
   padding (sectie "HEADER OP MOBIEL", ≤600px, verderop naar boven in dit
   bestand) niet wordt overruled - zelfde specificiteit (twee klassen) zou
   anders puur op bestandsvolgorde beslissen. */
#site-header-cart .cart-contents {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  line-height: normal !important;
  white-space: nowrap !important;
}
@media (min-width: 601px) {
  #site-header-cart .cart-contents {
    padding: 10px 14px !important;
  }
}

/* Logostrook: door de lagere rij eronder (was 161px, wordt nu ~menu-hoogte)
   oogde het logo bovenin geklemd. ".site-header > .col-full" (met de
   child-combinator ">") raakt bewust alléén de logo-rij, niet de geneste
   ".col-full" van de navigatierij (die zit een niveau dieper, binnen
   .storefront-primary-navigation) - vandaar niet zomaar ".site-header
   .col-full" (dat zou allebei de rijen raken). Bescheiden, symmetrische
   verticale padding voor een rustig gebalanceerd logo i.p.v. tegen de
   bovenrand. Ook hier vanaf 601px, mobiel blijft ongemoeid. */
@media (min-width: 601px) {
  .site-header > .col-full {
    padding-top: 10px !important;
    padding-bottom: 4px !important;
  }
}

.lm-header-search {
  display: flex;
  align-items: center;
  flex: 0 0 260px !important;
  /* min-width i.p.v. alleen een vaste breedte: expliciet gevraagd in de
     fixronde zodat paginaspecifieke CSS (cart/checkout) dit niet alsnog kan
     platdrukken — een flex-basis alleen is namelijk nog steeds krimpbaar
     zonder een min-width-bodem. */
  min-width: 260px !important;
  max-width: 260px;
}
.lm-header-search .dgwt-wcas-search-wrapp {
  width: 100%;
  max-width: 100%;
}
/* BUGFIX (fixronde 2026-07-29): naast de .site-main-scoping hierboven (cart-/
   checkout-gridregels) heeft ook style.css (het bovenste, ongeversioneerde
   deel dat in elke design-v<versie>.css wordt meegeplakt, zie het
   cache-buster-recept) zijn EIGEN kale ".woocommerce-cart .woocommerce" /
   ".woocommerce-checkout .woocommerce"-regels (specificiteit 2 klassen,
   gelijk aan .dgwt-wcas-search-wrapp.woocommerce) die de FiboSearch-wrapper
   evengoed konden raken. Vangnet: forceer voor de wrapper altijd zijn eigen
   standaardgedrag (display:block, geen grid — bevestigd in FiboSearch's eigen
   style.min.css) terug, ongeacht welke pagina-specifieke regel er verder nog
   op ".woocommerce" mikt. */
.lm-header-search .dgwt-wcas-search-wrapp.woocommerce {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  gap: 0 !important;
}
/* BUGFIX (fixronde 2026-07-30, gemeld door Yuri, gemeten door de hoofdsessie):
   deze regel was geschreven voor een DONKER veld (witte tekst), maar
   FiboSearch's eigen zichtbare wrapper (.dgwt-wcas-search-wrapp) is wit —
   het echte veld heeft dus witte tekst op een bijna-wit vlak (rgba(255,255,255,.08)
   op een witte achtergrond), onleesbaar. Witte-balk-variant: donkere tekst
   (var(--lm-text), hetzelfde donkerblauw als de rest van het designsysteem),
   gedempt grijze placeholder, egaal wit vlak i.p.v. de doorschijnend-witte waas. */
/* BUGFIX (batch 17b, 2026-08-07): het vergrootglas-icoon overlapte de
   placeholdertekst. ROOT CAUSE (gevonden door de live FiboSearch-instellingen
   met wp-cli uit te lezen en de shortcode-output te renderen, zie sectie 26):
   FiboSearch's ingebouwde "pirx"-stijl (search_style=pirx) reserveert zelf al
   ruimte voor het icoon (eigen CSS: ".dgwt-wcas-style-pirx ... input {padding:
   13px 24px 13px 48px}", met de ronde iconknop ".dgwt-wcas-search-submit" op
   left:23px/33x33px) - onze eigen "padding: 8px 12px !important" hierboven
   overschreef die 48px links echter terug naar 12px, dus de tekst begon ONDER
   het icoon. Fix: expliciete padding-left die ruim voorbij de rand van het
   icoon (~23+33=56px) valt, in plaats van de FiboSearch-waarde blind terug te
   zetten. */
.lm-header-search input.dgwt-wcas-search-input,
.lm-header-search input[type="search"],
.lm-header-search input[type="text"] {
  background: #fff !important;
  border: 1px solid var(--lm-border) !important;
  border-radius: 4px !important;
  color: var(--lm-text) !important;
  padding: 8px 12px 8px 58px !important;
  font-size: 13px !important;
  height: auto !important;
  box-shadow: none !important;
}
.lm-header-search input.dgwt-wcas-search-input::placeholder,
.lm-header-search input[type="search"]::placeholder {
  color: var(--lm-muted) !important;
}
.lm-header-search input.dgwt-wcas-search-input:focus,
.lm-header-search input[type="search"]:focus {
  outline: none !important;
  border-color: var(--lm-accent) !important;
  background: #fff !important;
}
/* BUGFIX (batch 17b, 2026-08-07): ".dgwt-wcas-search-icon" bestaat als
   element alleen bij FiboSearch's "icon"-layouttype (een los open/dicht-
   klapicoon vóór het zoekveld) - onze live configuratie gebruikt layout
   "classic" met een submit-knop, dus dat element kwam nooit voor en deze
   regel deed niets (bevestigd door de shortcode-output te renderen met
   wp-cli: het echte icoon zit in ".dgwt-wcas-search-submit svg path",
   FiboSearch's eigen pirx-stijl kleurt dat al #111 - hier expliciet naar het
   designsysteem getrokken). ".dgwt-wcas-ico-magnifier" als extra vangnet
   voor de submit-uit variant (icoon dan direct in ".dgwt-wcas-sf-wrapp",
   geen knop eromheen). */
.lm-header-search .dgwt-wcas-search-submit svg path,
.lm-header-search .dgwt-wcas-ico-magnifier path,
.lm-header-search .dgwt-wcas-ico-magnifier {
  fill: var(--lm-muted) !important;
  color: var(--lm-muted) !important;
}
/* De suggestie-dropdown zelf blijft licht/leesbaar (los van de donkere
   header-balk) — geen !important-overrides nodig behalve waar FiboSearch's
   eigen thema het al donker zou verwachten. */
.lm-header-search .dgwt-wcas-suggestions-wrapp {
  color: var(--lm-text);
  text-align: left;
}
@media (max-width: 600px) {
  .lm-header-search {
    margin: 8px 16px;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* onder 768px geen vaste 260px-bodem meer nodig, geen floats meer in het spel */
    max-width: none;
    width: calc(100% - 32px);
  }
  .lm-header-search .dgwt-wcas-search-wrapp {
    width: 100%;
  }
}

/* ============================================
   CATEGORIEKOP: KRUIMELPAD + AANTAL (batch 13b/sectie 27, 2026-07-29)
   ============================================ */
.lm-categorie-kop {
  margin: 0 0 20px;
}
.lm-categorie-kop-pad {
  font-family: 'Barlow', 'Inter', sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
  color: var(--lm-text) !important;
}
.lm-categorie-kop-pad a {
  color: var(--lm-muted) !important;
  text-decoration: none !important;
  font-weight: 300 !important;
}
.lm-categorie-kop-pad a:hover {
  color: var(--lm-accent) !important;
  text-decoration: underline !important;
}
.lm-categorie-kop-pad strong {
  font-weight: 700 !important;
  color: var(--lm-text) !important;
}
.lm-categorie-kop-scheiding {
  color: var(--lm-muted);
  margin: 0 2px;
}
.lm-categorie-kop-aantal {
  font-size: 12.5px !important;
  color: var(--lm-muted) !important;
  margin: 0 !important;
}

/* ============================================
   "OPNIEUW GEBRUIKEN" (batch 15/sectie 28, 2026-08-04)
   ============================================ */
/* Zelfstandige knopstijl (zelfde uitstraling als de globale ".woocommerce
   a.button"-regel hierboven), bewust NIET afhankelijk van een ".woocommerce"-
   omhullende div: zowel de "Mijn projecten"-tabel (sectie 5, kale shortcode-
   HTML) als het keuzescherm (sectie 28e, eigen get_header()/get_footer()-
   pagina) hebben die wrapper niet, dus de bestaande ".woocommerce a.button"-
   regel zou hier stil blijven en de link onopgemaakt laten. */
.lm-hergebruiken-knop,
.lm-hergebruiken-keuze-knoppen a {
  display: inline-block;
  background: var(--lm-navy);
  color: #fff;
  border-radius: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  border: none;
  text-decoration: none;
  transition: background .2s;
}
.lm-hergebruiken-knop:hover,
.lm-hergebruiken-keuze-knoppen a:hover {
  background: #253063;
  color: #fff;
}
/* Compacter formaat, past in de tabelrij op "Mijn projecten". */
.lm-hergebruiken-knop {
  padding: 6px 12px;
  font-size: 11px;
}

/* Tussenscherm "Toevoegen"/"Vervangen" bij een niet-lege materiaallijst
   (sectie 28e) — zelfde kaartstijl als .lm-groepen (sectie 24). */
.lm-hergebruiken-keuze {
  max-width: 560px;
  margin: 40px auto;
  padding: 28px 32px;
  background: var(--lm-light);
  border-radius: 6px;
}
.lm-hergebruiken-keuze h1 {
  margin-top: 0;
  font-size: 22px;
}
.lm-hergebruiken-keuze-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 8px;
}
.lm-hergebruiken-keuze-knoppen a {
  padding: 9px 20px;
  font-size: 11px;
}
/* "Vervangen" is destructief voor de huidige lijst — visueel duidelijk
   onderscheiden van de neutrale "Toevoegen"-knop (geen felle waarschuwings-
   kleur, past niet bij de rest van het rustige kleurenpalet, wel een duidelijk
   andere, minder prominente stijl: outline i.p.v. gevuld). */
.lm-hergebruiken-keuze-vervangen {
  background: transparent;
  color: var(--lm-navy);
  border: 1px solid var(--lm-navy);
}
.lm-hergebruiken-keuze-vervangen:hover {
  background: var(--lm-navy);
  color: #fff;
}
.lm-hergebruiken-keuze-annuleren {
  font-size: 13px;
  margin: 8px 0 0;
}

/* ============================================
   "FOUT MELDEN" (batch 22/sectie 30, 2026-08-07)
   ============================================ */
/* Discrete knop, rechtsonder vast gepositioneerd (support-widget-stijl) -
   bewust géén felle kleur, past bij de rustige uitstraling van de rest van
   het designsysteem. Onder de header (z-index 999) maar boven gewone
   content. */
.lm-foutmelden-knop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  background: var(--lm-navy);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: background .2s;
}
.lm-foutmelden-knop:hover {
  background: #253063;
}

/* Modal: overlay + gecentreerd venster. [hidden] is het native HTML-attribuut
   (display:none via de browser), MAAR een auteur-regel met gelijke of hogere
   specificiteit wint altijd van die UA-regel, ook als de auteur-regel geen
   !important heeft (auteur > user-agent staat al vóór specificiteit in de
   cascade) - vandaar hieronder expliciet ":not([hidden])" i.p.v. domweg
   ".lm-foutmelden-modal", anders blijft de modal zichtbaar zodra dit blok
   'display' zet, ook met het hidden-attribuut aanwezig (bug gevonden bij
   visuele controle, 2026-08-10). De open/dicht-JS zet/verwijdert het
   hidden-attribuut via "modal.hidden = true/false", dus deze selector blijft
   consistent met die toggle. */
.lm-foutmelden-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lm-foutmelden-modal:not([hidden]) {
  display: flex;
}
.lm-foutmelden-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20,24,34,.6);
}
.lm-foutmelden-modal-venster {
  position: relative;
  background: var(--lm-white);
  border-radius: 6px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 26px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.lm-foutmelden-modal-sluiten {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--lm-muted);
  cursor: pointer;
  padding: 4px 8px;
}
.lm-foutmelden-modal-sluiten:hover {
  color: var(--lm-text);
}
.lm-foutmelden-modal-venster h2 {
  margin: 0 0 8px;
  font-size: 20px;
  padding-right: 20px;
}
.lm-foutmelden-uitleg {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--lm-muted);
}
#lm-foutmelden-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
#lm-foutmelden-bericht {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--lm-border);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--lm-text);
  resize: vertical;
  margin-bottom: 14px;
}
#lm-foutmelden-bericht:focus {
  outline: none;
  border-color: var(--lm-accent);
}
.lm-foutmelden-versturen {
  display: inline-block;
  background: var(--lm-navy);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .2s;
}
.lm-foutmelden-versturen:hover {
  background: #253063;
}
.lm-foutmelden-versturen:disabled {
  opacity: .6;
  cursor: default;
}
.lm-foutmelden-succes {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: #eaf6ec;
  border: 1px solid #b9e0bf;
  border-radius: 4px;
  color: #1e6b2e;
  font-size: 13px;
}
.lm-foutmelden-fout {
  margin: 4px 0 0;
  padding: 12px 14px;
  background: #fbeaea;
  border: 1px solid #eebcbc;
  border-radius: 4px;
  color: #a12626;
  font-size: 13px;
}
@media (max-width: 480px) {
  .lm-foutmelden-knop {
    right: 12px;
    bottom: 12px;
    padding: 9px 14px;
    font-size: 11px;
  }
  .lm-foutmelden-modal-venster {
    padding: 22px 18px;
  }
}

/* ============================================
   PHOTOSWIPE PRODUCTFOTO-ZOOM: WITTE ACHTERGROND
   (WooCommerce-lightbox, PhotoSwipe v4.1.3 - default-skin;
   default-skin.css zet zelf al .pswp__bg op zwart)
   ============================================ */

/* Overlay-achtergrond wit i.p.v. zwart, past bij de webshop en bij
   transparante PNG-productuitsnedes */
.pswp__bg {
  background: #fff !important;
}

/* Contrastfix: de witte PhotoSwipe-iconen (sluiten/zoom/fullscreen,
   pijlen) en de teller/het bijschrift zijn anders onzichtbaar op wit.
   Top-bar, bijschrift en het donkere blokje achter de pijl-iconen
   krijgen daarom een opaque navy-tint (zelfde kleur als de rest van het
   designsysteem) i.p.v. de halfdoorzichtige zwarte default. */
.pswp__top-bar,
.pswp__ui--fit .pswp__top-bar,
.pswp__caption,
.pswp__ui--fit .pswp__caption,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background-color: var(--lm-navy) !important;
}

/* ============================================================
   Batch 28B — materiaallijst-paneel
   ============================================================
   Blijvend materiaallijst-paneel (split-screen) op winkel/categorie/
   product: hoofdcontent 2/3 links, paneel 1/3 vast rechts. Mobiel: paneel
   off-canvas achter een zwevende knop. Cart/checkout (eigen 2-koloms
   opzet, zie "MATERIAALLIJST (cart)" verderop in dit bestand) worden hier
   NIET aangeraakt.

   PHP-markup (elders gebouwd, hier alleen aangesproken):
   <aside class="lm-lijst-paneel">
     <div class="lm-lijst-paneel-kop">...</div>
     <div class="lm-lijst-groep">
       <div class="lm-lijst-groep-kop">...</div>
       <div class="lm-lijst-item">...</div>
     </div>
   </aside>
   <button class="lm-lijst-paneel-toggle">... (teller)</button>
   Open op mobiel: <aside class="lm-lijst-paneel is-open">
   ============================================================ */

/* ── BASISSTIJL (beide schermformaten): huisstijl-opmaak van het paneel
   zelf, ongeacht positionering. ── */
.lm-lijst-paneel {
  display: flex;
  flex-direction: column;
  background: var(--lm-white);
  color: var(--lm-text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.lm-lijst-paneel-kop {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 20px;
  background: var(--lm-navy);
  color: var(--lm-white);
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lm-lijst-groep {
  border-bottom: 1px solid rgba(26,32,53,.08);
}
.lm-lijst-groep:last-child {
  border-bottom: none;
}

.lm-lijst-groep-kop {
  padding: 10px 20px 6px;
  background: var(--lm-light);
  color: var(--lm-muted);
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lm-lijst-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 20px;
  border-top: 1px solid rgba(26,32,53,.06);
  font-size: 13px;
  color: var(--lm-text);
}
.lm-lijst-groep-kop + .lm-lijst-item,
.lm-lijst-item:first-child {
  border-top: none;
}

/* Item-indeling: aantal (vast, smal) | naam (vult de rest) | verwijderen (vast).
   Zonder fl:1 op de naam bleef die als smalle kolom in het midden staan met een
   groot gat na het aantal, waardoor lange namen onnodig over veel regels braken. */
.lm-lijst-item-aantal {
  flex: 0 0 auto;
  min-width: 26px;
  font-weight: 700;
  font-size: 12px;
  color: var(--lm-muted);
}
.lm-lijst-item-naam {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.lm-lijst-item-verwijder {
  flex: 0 0 auto;
  color: var(--lm-muted);
  text-decoration: none;
  font-size: 17px;
  line-height: 1;
  padding: 0 2px;
}
.lm-lijst-item-verwijder:hover {
  color: #b00020;
}

/* Zwevende toggle-knop: huisstijl-pill in navy, zelfde donkere/witte
   contrast en schaduw als de bestaande ".lm-foutmelden-knop". */
.lm-lijst-paneel-toggle {
  border: none;
  border-radius: 4px;
  background: var(--lm-navy);
  color: var(--lm-white);
  font-family: 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  padding: 12px 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  cursor: pointer;
  transition: background .2s;
}
.lm-lijst-paneel-toggle:hover {
  background: #253063;
}

/* Heropen-tab is puur desktop (verschijnt alleen als de lijst is ingeklapt);
   standaard verborgen, de desktop-regel hieronder toont 'm bij body.lm-lijst-dicht. */
.lm-lijst-heropen {
  display: none;
}

/* ── DESKTOP (≥1024px) — ALLEEN winkel/categorie/product ──
   Scope met de WordPress-bodyclasses zodat cart/checkout (die geen van
   drie dragen) en overige pagina's ongemoeid blijven. */
@media (min-width: 1024px) {
  body.post-type-archive-product,
  body.tax-product_cat,
  body.single-product {
    /* Eén plek om breedte/top-offset bij te stellen. Top-offset is een
       inschatting van de headerhoogte (logo-rij + nav/zoek/cart-rij,
       zie sectie "HEADER" en "HEADER RIJ 2" hierboven); de header staat
       zelf sticky met z-index 999, dus bij een afwijking op de live site
       is dit de enige waarde die hoeft te veranderen. */
    --lm-lijst-paneel-breedte: min(42vw, 620px);
    --lm-lijst-paneel-top: 100px;
  }

  /* Hoofdcontent ruimte reserveren op de ECHTE paneelbreedte (min(42vw,620px)),
     niet 42% van de 1200px-contentkolom (dat reserveerde te weinig -> content
     viel achter het paneel). Content links-uitgelijnd, fluid. Vervalt zodra de
     lijst is ingeklapt (body.lm-lijst-dicht). */
  body.post-type-archive-product:not(.lm-lijst-dicht) .content-area,
  body.tax-product_cat:not(.lm-lijst-dicht) .content-area,
  body.single-product:not(.lm-lijst-dicht) .content-area {
    max-width: none !important;
    margin-left: 40px !important;
    margin-right: calc(var(--lm-lijst-paneel-breedte) + 24px) !important;
    box-sizing: border-box !important;
  }

  body.post-type-archive-product:not(.lm-lijst-dicht) .lm-lijst-paneel,
  body.tax-product_cat:not(.lm-lijst-dicht) .lm-lijst-paneel,
  body.single-product:not(.lm-lijst-dicht) .lm-lijst-paneel {
    position: fixed;
    top: var(--lm-lijst-paneel-top);
    right: 0;
    bottom: 0;
    width: var(--lm-lijst-paneel-breedte);
    border-left: 1px solid rgba(26,32,53,.12);
    box-shadow: -2px 0 10px rgba(26,32,53,.08);
    z-index: 400;
  }

  /* Ingeklapt: paneel verbergen (content-reservering vervalt hierboven al via
     :not), en een smalle "heropen"-tab tegen de rechterrand tonen. */
  body.lm-lijst-dicht .lm-lijst-paneel {
    display: none !important;
  }
  .lm-lijst-heropen { display: none; }
  body.post-type-archive-product.lm-lijst-dicht .lm-lijst-heropen,
  body.tax-product_cat.lm-lijst-dicht .lm-lijst-heropen,
  body.single-product.lm-lijst-dicht .lm-lijst-heropen {
    display: block;
    position: fixed;
    top: var(--lm-lijst-paneel-top);
    right: 0;
    z-index: 400;
    border: none;
    border-radius: 4px 0 0 4px;
    background: var(--lm-navy);
    color: var(--lm-white);
    font-family: 'Barlow', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 12px 14px;
    cursor: pointer;
    box-shadow: -2px 0 10px rgba(26,32,53,.15);
  }

  /* Inklap-knop in de paneelkop (alleen desktop zichtbaar; op mobiel sluit de
     off-canvas via het zwevende knopje). */
  .lm-lijst-inklap {
    border: none;
    background: transparent;
    color: var(--lm-white);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: .85;
  }
  .lm-lijst-inklap:hover { opacity: 1; }
}

/* Toggle-knop is puur mobiele bediening: op elk breed scherm verborgen,
   los van welke pagina hem toevallig rendert. */
@media (min-width: 1024px) {
  .lm-lijst-paneel-toggle {
    display: none !important;
  }
}

/* ── MOBIEL (<1024px) — off-canvas paneel + zwevende knop ── */
@media (max-width: 1023px) {
  /* Hoofdcontent altijd vol breed op mobiel; geen rechtermarge (die geldt
     alleen desktop, hierboven, en is daar ook al scoped). */
  #primary,
  .content-area {
    margin-right: 0 !important;
  }

  .lm-lijst-paneel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(85%, 340px);
    transform: translateX(100%);
    transition: transform .25s ease;
    /* Boven de sticky header (999), zodat het paneel bij openen het
       volledige scherm overneemt zoals een gebruikelijke off-canvas-lade.
       Gelijk aan de "fout melden"-modal (1000, zie verderop in dit
       bestand) — komt in de praktijk niet tegelijk in beeld. */
    z-index: 1000;
    box-shadow: -2px 0 14px rgba(0,0,0,.25);
    pointer-events: none;
  }
  .lm-lijst-paneel.is-open {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* Rechtsonder, boven de bestaande ".lm-foutmelden-knop" (die staat op
     right:20px/bottom:20px) zodat de twee zwevende knoppen niet
     overlappen. */
  .lm-lijst-paneel-toggle {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 490;
  }
}