/* =========================================
   PUBLIC_HTML/STYLE.CSS (FRONTEND)
   ========================================= */

/* 00. AFBEELDINGEN (ImageVariants, 2026-09-18) — width/height staan op <img> voor de beeldverhouding
   (geen verspringen tijdens het laden). Zonder eigen hoogte-regel zou het height-attribuut letterlijk gelden
   en het beeld uitrekken; :where() heeft specificiteit 0, dus elke thema-regel met een hoogte wint. */
:where(img[width][height]) { height: auto; }

/* 0. THEME TOKENS — defaults, overschreven door theme <style> */
:root {
    --color-primary: #007bff;
    --color-primary-hover: #0056b3;
    --color-accent: #007bff;
    --color-danger: #dc3545;
    --color-success: #28a745;
    --color-text: #333;
    --color-text-muted: #666;
    --color-bg: #f8f9fa;
    --color-card-bg: #fff;
    --color-header-bg: #ffffff;
    --color-footer-bg: #1a1a1a;
    --color-footer-text: #b0b0b0;
    --color-usp-bg: #007bff;
    --font-body: 'Segoe UI', system-ui, sans-serif;
    --font-heading: 'Segoe UI', system-ui, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --shadow-card: 0 2px 10px rgba(0,0,0,0.06);
    --shadow-hover: 0 8px 20px rgba(0,0,0,0.1);
}

/* 0b. SECTION SYSTEM */
/* Geen automatische tekstvergroting op telefoons (iOS Safari / Chrome Android "font boosting") in de horizontaal scrollende
   USP-balk: die maakte de lange eerste regel groter dan de rest (2026-10-03). Alléén daar: op `html` schakelde dezelfde regel
   de vergroting voor de hele winkel uit en werd alle tekst op telefoons kleiner (gemeten door de eigenaar, 2026-10-04). */
.usp-bar-wrapper, .usp-bar-wrapper * { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.uv-section { position: relative; }
.uv-section:empty { display: none; }
.main-container.no-sidebar { display: block; }
.main-container.no-sidebar .sidebar { display: none; }
.main-container.no-sidebar .content-area { margin-left: 0; max-width: 100%; }

/* 1. GLOBAL & RESET */
body {
    margin: 0; padding: 0;
    font-family: var(--font-body);
    background-color: var(--color-bg); color: var(--color-text);
    display: flex; flex-direction: column; min-height: 100vh;
}
* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }

/* Algemene Container - volle breedte met padding */
.container {
    width: 100%; max-width: var(--container-max, none) !important;
    margin: 40px auto; padding: 0 var(--container-pad, 5%);
    flex: 1; box-sizing: border-box;
}

/* 2. HEADER */
.site-header {
    background: var(--color-header-bg); border-bottom: 1px solid #ddd;
    padding: var(--header-pad, 15px) 0; display: flex; justify-content: center;
    position: var(--header-position, sticky); top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.header-inner {
    width: 100%; max-width: var(--container-max, none) !important; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 var(--container-pad, 5%); gap: 20px; box-sizing: border-box;
}
.logo { font-size: 1.5em; font-weight: 800; color: #222; letter-spacing: -1px; }
.logo span { color: var(--color-primary); }

.header-search { flex: 1; max-width: 600px; position: relative; }
.search-input { width: 100%; padding: 10px 15px; border: 2px solid #eee; border-radius: 50px; font-size: 1em; background: #f9f9f9; transition: all 0.2s; }
.search-input:focus { border-color: var(--color-primary); background: white; outline: none; }

.search-dropdown {
    position: absolute; top: 110%; left: 0; right: 0;
    background: white; border: 1px solid #ddd; border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); z-index: 1001;
    max-height: 450px; overflow-y: auto; display: none;
}
@media (min-width: 901px) {
    .header-search-desktop .search-dropdown {
        min-width: 700px;
        width: min(700px, 90vw);
    }
}
.search-results-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    min-height: 180px;
}
.search-col-categories {
    border-right: 1px solid #eee;
    overflow-y: auto;
    padding: 8px 0;
}
.search-col-products {
    overflow-y: auto;
}
.search-results-grid .search-footer {
    grid-column: 1 / -1;
}
@media (max-width: 900px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
    .search-col-categories {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}
.search-section { padding: 8px 0; }
.search-section-title { font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.5px; color: #888; margin: 0 12px 8px; font-weight: 600; }
.search-categories { display: flex; flex-direction: column; }
.search-category-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #333; transition: background 0.1s; border-bottom: 1px solid #f5f5f5; }
.search-category-item:hover { background: #f0f8ff; color: var(--color-primary); }
.search-cat-icon { font-size: 1.1em; }
/* Mobiel (2026-10-03): categorieën als knopjes naast elkaar i.p.v. een lange lijst onder elkaar. */
@media (max-width: 900px) {
    .search-categories { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0 12px 4px; }
    .search-category-item { padding: 7px 12px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-sm, 6px); font-size: 0.9em; line-height: 1.2; }
    .search-cat-icon { display: none; }
}
.search-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f5f5f5; transition: background 0.1s; color: #333; }
.search-item:hover { background: #f0f8ff; }
.search-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; margin-right: 15px; border: 1px solid #eee; }
.search-info { display: flex; flex-direction: column; }
.search-name { font-weight: 600; font-size: 0.95em; color: #333; }
.search-price { color: var(--color-primary); font-size: 0.9em; }
.search-footer { padding: 12px; border-top: 1px solid #eee; text-align: center; }
.search-view-all { display: block; font-weight: 600; color: var(--color-primary); font-size: 0.95em; }
.search-view-all:hover { text-decoration: underline; }
.search-empty { padding: 20px 15px; text-align: center; color: #666; }
.search-empty-hint { font-size: 0.9em; margin-top: 8px; color: #999; }
.search-loading { padding: 15px; text-align: center; color: #888; font-size: 0.95em; }

.header-search-mobile-trigger { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #555; }
.header-search-mobile-trigger:hover { color: var(--color-primary); }

.search-overlay { position: fixed; inset: 0; z-index: 9999; background: white; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.search-overlay.search-overlay-open { opacity: 1; visibility: visible; }
.search-overlay-inner { display: flex; flex-direction: column; height: 100%; }
.search-overlay-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.search-overlay-input { flex: 1; padding: 14px 18px; border: 2px solid #eee; border-radius: 50px; font-size: 1.1em; }
.search-overlay-close { width: 44px; height: 44px; font-size: 28px; line-height: 1; background: #f5f5f5; border: none; border-radius: 50%; cursor: pointer; color: #666; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.search-overlay-close:hover { background: #eee; color: #333; }
.search-overlay-results { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
/* Het mobiele zoekscherm staat op een lichte achtergrond, maar deelt de klasse .search-input met het zoekveld in
   de header — en dat veld staat bij donkere thema's in witte letters op een gekleurde balk. Daarom hier expliciet
   leesbare kleuren, met een selector die zwaarder weegt dan `body.theme-x .search-input` (2026-09-14). */
.search-overlay .search-overlay-header .search-overlay-input { color: #111; background-color: #fff; background-image: none; padding-left: 18px; }
.search-overlay .search-overlay-header .search-overlay-input::placeholder { color: #777; opacity: 1; }
.search-overlay .search-overlay-results, .search-overlay .search-overlay-results a { color: var(--color-text, #222); }

/* Logo verticaal gecentreerd (2026-10-03): een <img> als inline-element laat onder zich ruimte voor de letterstok,
   waardoor de link ~10 px hoger werd dan het beeld en het logo boven het midden van de knoppen stond. */
.site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { display: block; }
.header-actions { display: flex; align-items: center; gap: 20px; font-weight: 600; font-size: 0.95em; }
/* Account-link (inloggen én ingelogd): icoon met label ernaast; op mobiel blijft alleen het icoon over. */
.action-link--account { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.action-link { display: flex; align-items: center; gap: 6px; color: #555; transition: color 0.2s; }
.action-link:hover { color: var(--color-primary); }
.badge-count { background: #dc3545; color: white; font-size: 0.75em; padding: 2px 6px; border-radius: 10px; margin-left: -5px; }
.account-greeting { font-size: 0.85em; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
    .header-search-desktop { display: none; }
    .header-search-mobile-trigger { display: flex; align-items: center; justify-content: center; }
    .account-greeting { display: none; }
    /* Zonder wrap stond de standaardheader (logo + categorieknop + zoekicoon + acties ≈ 790 px) op één regel en werd
       elke pagina op een telefoon dubbel zo breed; alleen shops met eigen template-CSS hadden dat zelf opgelost. */
    .header-inner { flex-wrap: wrap; row-gap: 10px; }
    .header-actions { margin-left: auto; }
}
/* Heel smal (≤ 400 px): de vier actie-links pasten met 20 px tussenruimte niet meer op 320 px (4 px overloop). */
@media (max-width: 400px) {
    .header-inner { gap: 12px; }
    .header-actions { gap: 12px; }
}

/* 2b. HEADER-INDELINGEN (bouwstenen fase 2, 2026-09-11)
   Alles hieronder is gescoped op body.uv-header--* / body.uv-mobiel-* of op nieuwe klassen (.uv-topnav, .uv-lade,
   .uv-onderbalk, .uv-zijmenu, .uv-nav-toggle). De oude standaard (megamenu_knop + trigger) raakt geen enkele regel.
   Markup: views/header.php + views/partials/header/*.php; gedrag: public/js/uv-nav.js. */
.uv-nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 8px; color: var(--color-text, #333); border-radius: var(--radius-sm, 6px); }
.uv-nav-toggle:hover { color: var(--color-primary); background: rgba(0,0,0,0.05); }
body.uv-header--minimal .uv-nav-toggle { display: inline-flex; }
body.uv-header--twee_rijen .site-header, body.uv-header--gecentreerd .site-header, body.uv-header--menubalk .site-header, body.uv-mobiel-zoek-veld .site-header { flex-direction: column; align-items: stretch; }
/* Menubalk (2026-09-12): de navigatierij als gekleurde balk over de volle breedte onder de logo-rij, op de plek waar
   normaal de USP-balk staat; kleur via body.uv-menubalk-{usp|primair|donker|licht}. Uitklappanelen blijven wit. */
body.uv-header--menubalk .site-header { padding-bottom: 0; }
body.uv-header--menubalk .uv-header__row--nav { border-top: 0; margin-top: var(--header-pad, 15px); padding-top: 0; background: var(--uv-menubalk-bg, var(--color-usp-bg)); color: var(--uv-menubalk-tekst, #fff); }
body.uv-menubalk-primair { --uv-menubalk-bg: var(--color-primary); --uv-menubalk-tekst: #fff; }
body.uv-menubalk-donker { --uv-menubalk-bg: #111827; --uv-menubalk-tekst: #fff; }
body.uv-menubalk-licht { --uv-menubalk-bg: var(--color-card-bg, #f3f4f6); --uv-menubalk-tekst: var(--color-primary); }
body.uv-header--menubalk .uv-menubalk .uv-header__nav-inner { gap: 0; }
body.uv-header--menubalk .uv-menubalk .uv-topnav__lijst { gap: 0; }
body.uv-header--menubalk .uv-menubalk .uv-topnav__link { color: inherit; padding: 12px 16px; border-radius: 0; font-size: 0.95em; }
body.uv-header--menubalk .uv-menubalk .uv-topnav__link:hover, body.uv-header--menubalk .uv-menubalk .uv-topnav__item.is-open > .uv-topnav__link, body.uv-header--menubalk .uv-menubalk .uv-topnav__item:hover > .uv-topnav__link { color: inherit; background: rgba(0,0,0,0.14); }
body.uv-menubalk-licht .uv-menubalk .uv-topnav__link:hover, body.uv-menubalk-licht .uv-menubalk .uv-topnav__item:hover > .uv-topnav__link { background: rgba(0,0,0,0.06); }
body.uv-header--menubalk .uv-menubalk .uv-topnav__panel { margin-top: 0; border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px); }
body.uv-header--menubalk .uv-menubalk .header-category-megamenu .header-category-trigger { border-radius: 0; height: 100%; }
.uv-header__row { width: 100%; }
.uv-header__row--nav { border-top: 1px solid var(--color-border, #eee); margin-top: 12px; padding-top: 6px; }
.uv-header__nav-inner { justify-content: flex-start; gap: 16px; }
.uv-header__nav-inner .uv-topnav { flex: 1 1 0; min-width: 0; }
body.uv-header--gecentreerd .uv-topnav__lijst { justify-content: center; }
body.uv-header--gecentreerd .uv-header__nav-inner { justify-content: center; }
body.uv-header--topnav .uv-header__row--hoofd, .uv-header__nav-inner { position: relative; }
body.uv-header--topnav .uv-topnav { flex: 1 1 0; min-width: 0; }
body.uv-header--topnav .header-search { flex: 0 1 240px; min-width: 0; }
body.uv-header--minimal .header-search { flex: 0 1 380px; }
.uv-header__row--zoek { display: none; padding-top: 10px; }
.uv-mobiel-zoekveld .search-input { width: 100%; }

/* Logo in het midden (indeling gecentreerd, of twee rijen met logo_positie midden) */
body.uv-header--gecentreerd .uv-header__row--hoofd, body.uv-logo-midden.uv-header--twee_rijen .uv-header__row--hoofd { position: relative; justify-content: space-between; min-height: 48px; }
body.uv-header--gecentreerd .uv-header__row--hoofd .logo, body.uv-logo-midden.uv-header--twee_rijen .uv-header__row--hoofd .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
body.uv-header--gecentreerd .header-search, body.uv-logo-midden.uv-header--twee_rijen .header-search { flex: 0 1 300px; margin-right: auto; }
body.uv-header--gecentreerd .header-actions, body.uv-logo-midden.uv-header--twee_rijen .header-actions { margin-left: auto; }

/* Horizontale hoofdnavigatie */
.uv-topnav { min-width: 0; }
.uv-topnav__lijst { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.uv-topnav__item[hidden] { display: none; }
.uv-topnav__item { position: relative; }
.uv-topnav__item--breed { position: static; }
.uv-topnav__link { display: inline-flex; align-items: center; gap: 5px; padding: 9px 12px; font-weight: 600; font-size: 0.95em; color: var(--color-text, #333); white-space: nowrap; border-radius: var(--radius-sm, 6px); }
.uv-topnav__link:hover, .uv-topnav__item.is-open > .uv-topnav__link { color: var(--color-primary); background: rgba(0,0,0,0.045); }
.uv-topnav__chevron { font-size: 0.7em; opacity: 0.65; }
.uv-topnav__panel { display: none; position: absolute; top: 100%; left: 0; z-index: 1100; min-width: 240px; margin-top: 4px; padding: 18px 22px; background: var(--color-card-bg, #fff); color: var(--color-text, #333); border: 1px solid var(--color-border, #e5e7eb); border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
.uv-topnav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.uv-topnav__panel--breed { left: 0; right: 0; min-width: 0; }
.uv-topnav__item--meer .uv-topnav__panel { left: auto; right: 0; }
.uv-topnav__item:hover > .uv-topnav__panel, .uv-topnav__item.is-open > .uv-topnav__panel, .uv-topnav__item:focus-within > .uv-topnav__panel { display: block; }
.uv-topnav__kolommen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px 28px; }
.uv-topnav__panel:not(.uv-topnav__panel--breed) .uv-topnav__kolommen { grid-template-columns: 1fr; gap: 12px; }
.uv-topnav__subtitel { display: block; font-weight: 700; color: var(--color-primary); font-size: 0.95em; margin-bottom: 6px; white-space: nowrap; }
.uv-topnav__subtitel:hover { text-decoration: underline; }
.uv-topnav__sublijst { list-style: none; margin: 0; padding: 0; }
.uv-topnav__sublijst li { margin: 0 0 4px; }
.uv-topnav__sublijst a { display: block; padding: 2px 0; color: var(--color-text-muted, #555); font-size: 0.92em; white-space: nowrap; }
.uv-topnav__sublijst a:hover { color: var(--color-primary); }
.uv-topnav__alles { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.92em; color: var(--color-primary); }

/* Merkenrij (twee rijen) */
.uv-merkenrij { border-top: 1px solid var(--color-border, #eee); margin-top: 8px; padding-top: 8px; }
.uv-merkenrij__inner { justify-content: center; gap: 22px; flex-wrap: wrap; }
.uv-merkenrij__item { display: inline-flex; align-items: center; height: 30px; opacity: 0.75; font-size: 0.85em; font-weight: 600; color: var(--color-text-muted, #666); }
.uv-merkenrij__item:hover { opacity: 1; color: var(--color-primary); }
.uv-merkenrij__item img { max-height: 28px; max-width: 110px; object-fit: contain; }

/* Off-canvas menulade */
.uv-lade-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.2s; }
.uv-lade-backdrop.is-open { opacity: 1; }
.uv-lade { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); z-index: 10001; display: flex; flex-direction: column; background: var(--color-card-bg, #fff); color: var(--color-text, #222); box-shadow: 0 0 40px rgba(0,0,0,0.2); transform: translateX(-102%); visibility: hidden; transition: transform 0.25s cubic-bezier(.2,.8,.2,1), visibility 0.25s; }
.uv-lade.is-open { transform: none; visibility: visible; }
body.uv-nav-open { overflow: hidden; }
.uv-lade__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--color-border, #eee); font-weight: 700; font-size: 1.05em; flex: 0 0 auto; }
.uv-lade__sluit { width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,0.06); color: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.uv-lade__nav { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.uv-lade__lijst, .uv-lade__sub { list-style: none; margin: 0; padding: 0; }
.uv-lade__rij { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border, #f0f0f0); }
.uv-lade__link { flex: 1 1 auto; padding: 13px 18px; color: inherit; font-weight: 500; }
.uv-lade__toggle { flex: 0 0 48px; border: none; border-left: 1px solid var(--color-border, #f0f0f0); background: none; color: var(--color-primary); font-size: 1.5em; cursor: pointer; }
.uv-lade__toggle span { display: inline-block; transition: transform 0.2s; }
.uv-lade__toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.uv-lade__sub { background: rgba(0,0,0,0.03); }
.uv-lade__sub .uv-lade__link { padding-left: 30px; font-weight: 400; }
.uv-lade__sub .uv-lade__sub .uv-lade__link { padding-left: 42px; font-size: 0.93em; }
.uv-lade__voet { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; border-top: 1px solid var(--color-border, #eee); font-size: 0.95em; }
.uv-lade__voetlink { font-weight: 600; color: var(--color-primary); }
.uv-lade__talen { display: flex; gap: 6px; margin-left: auto; }
.uv-lade__taal { padding: 4px 8px; border: 1px solid var(--color-border, #ddd); border-radius: 4px; font-size: 0.85em; color: inherit; }
.uv-lade__taal.is-actief { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Mobiel op één rij (mobiel_menu = compact, 2026-10-03): Menu-knop alleen op mobiel, servicelade van rechts. */
.uv-menu-knop { display: none; }
.uv-lade--rechts { left: auto; right: 0; transform: translateX(102%); }
.uv-lade--rechts.is-open { transform: none; }
.uv-lade__groep + .uv-lade__groep { margin-top: 6px; }
.uv-lade__kopje { padding: 16px 18px 6px; font-size: 0.74em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted, #777); }
.uv-lade__link--icoon { display: flex; align-items: center; gap: 10px; }
.uv-lade__link.is-actief { font-weight: 700; color: var(--color-primary); }
.uv-lade__taalknop { width: 100%; padding: 0; border: none; border-bottom: 1px solid var(--color-border, #f0f0f0); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.uv-lade__taalknop .uv-lade__toggle { display: flex; align-items: center; justify-content: center; }
.uv-lade__taalknop[aria-expanded="true"] .uv-lade__toggle span { transform: rotate(90deg); }

/* Mobiele onderbalk */
.uv-onderbalk { display: none; }

/* Vast zijmenu (alle pagina's) */
.uv-zijmenu { display: none; }
.uv-zijmenu__kop { padding: 14px 18px; font-weight: 700; border-bottom: 1px solid var(--color-border, #eee); }
.uv-zijmenu__lijst, .uv-zijmenu__sub { list-style: none; margin: 0; padding: 0; }
.uv-zijmenu__lijst { padding: 8px; }
.uv-zijmenu__rij { display: flex; align-items: center; }
.uv-zijmenu__link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--color-text, #333); font-size: 0.95em; border-radius: var(--radius-sm, 6px); }
.uv-zijmenu__link:hover { background: rgba(0,0,0,0.045); color: var(--color-primary); }
.uv-zijmenu__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uv-zijmenu__img { width: 28px; height: 28px; flex: 0 0 28px; object-fit: contain; }
.uv-zijmenu__initiaal { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm, 6px); background: rgba(0,0,0,0.06); font-size: 0.7em; font-weight: 700; letter-spacing: 0.02em; }
.uv-zijmenu__toggle { flex: 0 0 32px; height: 32px; border: none; border-radius: 50%; background: none; color: #888; font-size: 1.3em; cursor: pointer; }
.uv-zijmenu__toggle span { display: inline-block; transition: transform 0.2s; }
.uv-zijmenu__toggle[aria-expanded="true"] span { transform: rotate(90deg); }
.uv-zijmenu__sub { padding: 0 0 6px 48px; }
.uv-zijmenu__sub a { display: block; padding: 5px 0; font-size: 0.9em; color: var(--color-text-muted, #666); }
.uv-zijmenu__sub a:hover { color: var(--color-primary); }
@media (min-width: 1180px) {
    body.uv-header--zijmenu { padding-left: var(--uv-zijmenu-w, 260px); }
    body.uv-header--zijmenu .site-header, body.uv-header--zijmenu .uv-announcement-bar, body.uv-header--zijmenu .usp-bar-wrapper, body.uv-header--zijmenu .site-footer { margin-left: calc(-1 * var(--uv-zijmenu-w, 260px)); }
    .uv-zijmenu { display: flex; flex-direction: column; position: fixed; left: 0; top: var(--uv-zijmenu-top, 0px); bottom: 0; width: var(--uv-zijmenu-w, 260px); overflow-y: auto; overscroll-behavior: contain; z-index: 900; background: var(--color-card-bg, #fff); border-right: 1px solid var(--color-border, #e5e7eb); box-sizing: border-box; }
}
@media (max-width: 1179px) {
    body.uv-header--zijmenu .uv-nav-toggle { display: inline-flex; }
}

@media (max-width: 900px) {
    /* Met een lade neemt de hamburger het over van de categorieknop en de navigatiebalk; zonder lade (trigger) blijft de knop. */
    body.uv-heeft-lade:not(.uv-mobiel-onderbalk) .uv-nav-toggle { display: inline-flex; }
    body.uv-heeft-lade:not(.uv-mobiel-compact) .header-category-megamenu, body.uv-heeft-lade .uv-header__row--nav { display: none !important; } /* compact: de categorieknop blijft, de lade is het servicemenu */
    .uv-topnav, .uv-merkenrij { display: none !important; }
    .uv-header__nav-inner .header-category-megamenu { flex: 1 1 100%; }
    .uv-header__nav-inner .header-category-trigger { width: 100%; justify-content: center; }
    body.uv-header--gecentreerd .uv-header__row--hoofd .logo, body.uv-logo-midden.uv-header--twee_rijen .uv-header__row--hoofd .logo { position: static; transform: none; flex: 1 1 auto; text-align: center; }
    body.uv-mobiel-zoek-veld .header-search-mobile-trigger { display: none !important; }
    body.uv-mobiel-zoek-veld .uv-header__row--zoek { display: block; }
    body.uv-mobiel-onderbalk { padding-bottom: 66px; }
    /* Mobiele header (2026-09-14, platformbreed — vervangt het oude blok dat de standaardindeling oversloeg):
         rij 1  logo · taalkeuze · account-icoon · zoek-icoon
         rij 2  categorieknop links, winkelwagen rechts
       .header-actions wordt display:contents, zodat taal, account en winkelwagen losse items van de headerrij
       worden en met `order` te plaatsen zijn — zonder de markup te verbouwen. De ::after met flex-basis 100%
       forceert de tweede regel. Labels verdwijnen, alleen iconen blijven. */
    .uv-header__row--hoofd { flex-wrap: wrap; row-gap: 8px; gap: 10px; padding-left: 12px; padding-right: 12px; }
    .uv-header__row--hoofd .header-actions { display: contents; }
    .uv-header__row--hoofd .uv-nav-toggle { order: 0; }
    .uv-header__row--hoofd .logo { order: 1; margin-right: auto; }
    .uv-header__row--hoofd .logo img { max-width: 120px !important; }
    .uv-header__row--hoofd .lang-dropdown-wrapper { order: 2; }
    .uv-header__row--hoofd .action-link--account, .uv-header__row--hoofd #header-favorites-link { order: 3; }
    .uv-header__row--hoofd .header-search-mobile-trigger { order: 4; }
    .uv-header__row--hoofd::after { content: ""; flex-basis: 100%; height: 0; order: 5; }
    .uv-header__row--hoofd .header-category-megamenu { order: 6; flex: 0 1 auto; min-width: 0; }
    .uv-header__row--hoofd .header-category-trigger { width: auto; }
    .uv-header__row--hoofd #header-cart-link { order: 7; margin-left: auto; flex-shrink: 0; }
    /* Alleen iconen: de labels zitten in een <span>, het badge-getal blijft staan. */
    .uv-header__row--hoofd .action-link > span:not(.badge-count), .uv-header__row--hoofd .current-lang > span { display: none; }
    .uv-header__row--hoofd .action-link { gap: 0; }
    .uv-header__row--hoofd .action-link svg { width: 22px; height: 22px; }
    .uv-header__row--hoofd .badge-count { font-size: 0.72rem; margin-left: -8px; }
    body.uv-heeft-lade .uv-header__row--hoofd .action-link--account { display: none; } /* staat in de lade */
    /* Zonder categorieknop (lade/onderbalk/navbalk) is er geen tweede regel nodig. */
    body.uv-heeft-lade .uv-header__row--hoofd::after, body.uv-mobiel-onderbalk .uv-header__row--hoofd::after { content: none; }
    /* Eén rij (mobiel_menu = compact): logo · categorieknop · Menu · zoeken · winkelwagen; taal en account zitten in de lade. */
    /* Eén rij is laag genoeg om vast bovenin te blijven staan (2026-10-03). Laag 900: onder zoekscherm (9999),
       lade (10001), cookiebalk en assistent; zolang het categoriemenu open is erboven (dat paneel zit ín de header). */
    body.uv-mobiel-compact header.site-header { position: sticky; top: 0; z-index: 900; }
    body.uv-mobiel-compact.megamenu-open header.site-header { z-index: 10000; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd { flex-wrap: nowrap; gap: 5px; padding-left: 8px; padding-right: 8px; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd::after { content: none; }
    /* Het logo krimpt mee op smalle telefoons (min. 56 px); de knoppen houden hun maat. */
    /* Het logo neemt alle vrije ruimte in de rij (tot de hoogte van de knoppen) en krimpt op smalle telefoons (min. 56 px). */
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .logo { order: 1; margin-right: auto; flex: 1 1 0; min-width: 56px; display: flex; align-items: center; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .logo img { width: 100% !important; max-width: none !important; height: auto !important; max-height: 38px; object-position: left center; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .header-category-megamenu { order: 2; flex: 0 0 auto; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .uv-menu-knop { order: 3; display: inline-flex; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .header-search-mobile-trigger { order: 4; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd #header-cart-link { order: 5; margin-left: 0; }
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .lang-dropdown-wrapper,
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .action-link--account,
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd .account-dropdown-wrapper,
    body.uv-mobiel-compact .site-header .uv-header__row--hoofd #header-favorites-link { display: none !important; }
    body.uv-mobiel-compact .uv-menu-knop svg { width: 22px; height: 22px; }
    body.uv-mobiel-compact .uv-menu-knop__tekst { display: none; } /* vierkant icoonknopje; de naam staat in aria-label */
    body.uv-mobiel-compact .uv-menu-knop { align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-sm, 6px); background: transparent; color: inherit; font: inherit; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; white-space: nowrap; flex: 0 0 38px; }
    body.uv-mobiel-compact .site-header .header-search-mobile-trigger,
    body.uv-mobiel-compact .site-header #header-cart-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0 !important; flex: 0 0 38px; position: relative; }
    body.uv-mobiel-compact .site-header #header-cart-link .badge-count { position: absolute; top: -6px; right: -6px; margin-left: 0; }
    body.uv-mobiel-compact .site-header .header-category-trigger { white-space: nowrap; }
    body.uv-mobiel-compact .site-header .header-category-trigger .chevron { display: none; }
    .uv-onderbalk { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; background: var(--color-card-bg, #fff); border-top: 1px solid var(--color-border, #e5e7eb); box-shadow: 0 -4px 16px rgba(0,0,0,0.06); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
    .uv-onderbalk__knop { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: none; background: none; cursor: pointer; font: inherit; font-size: 0.7em; font-weight: 600; color: var(--color-text-muted, #666); text-decoration: none; }
    .uv-onderbalk__knop:hover, .uv-onderbalk__knop[aria-expanded="true"] { color: var(--color-primary); }
    .uv-onderbalk__icoon { position: relative; display: inline-flex; }
    .uv-onderbalk__badge { position: absolute; top: -6px; right: -10px; background: #dc3545; color: #fff; font-size: 0.8em; padding: 1px 5px; border-radius: 10px; }
}

/* 3. FOOTER */
.site-footer {
    background-color: var(--color-footer-bg); color: var(--color-footer-text);
    font-family: var(--font-body); font-size: 0.95em;
    margin-top: 50px; border-top: 4px solid var(--color-primary);
}
.footer-container {
    width: 100%; max-width: var(--container-max, none) !important; margin: 0 auto; padding: 40px var(--container-pad, 5%);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px;
}
.footer-col h4 { color: #fff; margin-top: 0; margin-bottom: 20px; font-size: 1.1em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: #b0b0b0; transition: color 0.2s; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { background-color: #111; text-align: center; padding: 20px; font-size: 0.85em; color: #666; border-top: 1px solid #333; }
.uv-powered-by { margin-top: 8px; font-size: 0.85em; text-transform: none; letter-spacing: normal; }
.uv-powered-by a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; opacity: 0.8; }
.uv-powered-by a:hover, .uv-powered-by a:focus-visible { opacity: 1; text-decoration: underline; }
.uv-powered-by img { width: 16px; height: 16px; flex: none; }
.social-links { display: flex; gap: 15px; }

/* 3b. FOOTER-INDELINGEN (bouwstenen fase 5, 2026-09-11)
   Gescoped op .uv-footer--* of nieuwe uv-klassen; de standaard (indeling standaard) raakt geen regel. */
.uv-footer--kolommen_4 .footer-container { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uv-footer--centraal .footer-container { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 30px 50px; padding-top: 30px; padding-bottom: 20px; }
.uv-footer--centraal .footer-col { min-width: 180px; }
.uv-footer--centraal .footer-col h4 { margin-bottom: 10px; }
.uv-footer--centraal .footer-col ul li { margin-bottom: 6px; }
.uv-footer--centraal .social-links { justify-content: center; }
.uv-footer--centraal .footer-col > div[style] > div { justify-content: center; }
.uv-footer-usps { background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.12); }
.uv-footer-usps__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; padding-top: 14px; padding-bottom: 14px; }
.uv-footer-usps__item { font-weight: 600; font-size: 0.95em; color: #fff; }
.uv-footer-usps__vink { color: var(--color-primary); margin-right: 8px; }
.uv-footer-nieuwsbrief { border-top: 1px solid rgba(255,255,255,0.12); }
.uv-footer-nieuwsbrief__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px; padding-top: 24px; padding-bottom: 24px; }
.uv-footer-nieuwsbrief__tekst { display: flex; flex-direction: column; gap: 4px; color: #fff; }
.uv-footer-nieuwsbrief__tekst span { color: var(--color-footer-text, #b0b0b0); font-size: 0.95em; }
.uv-footer-nieuwsbrief__form { display: flex; gap: 8px; flex: 1 1 320px; max-width: 480px; }
.uv-footer-nieuwsbrief__form input { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius-sm, 6px); background: rgba(255,255,255,0.08); color: #fff; font: inherit; }
.uv-footer-nieuwsbrief__form input::placeholder { color: rgba(255,255,255,0.55); }
.uv-footer-nieuwsbrief__form .btn-view { width: auto; padding: 11px 18px; white-space: nowrap; }
.uv-footer-nieuwsbrief__melding { flex: 1 1 100%; font-size: 0.9em; color: #fff; min-height: 1em; }
.uv-footer-keurmerken { border-top: 1px solid rgba(255,255,255,0.12); }
.uv-footer-keurmerken__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; padding-top: 18px; padding-bottom: 18px; }
.uv-footer-keurmerken__item { display: inline-flex; align-items: center; color: #fff; font-weight: 600; font-size: 0.9em; opacity: 0.9; }
.uv-footer-keurmerken__item img { max-height: 44px; max-width: 140px; object-fit: contain; background: #fff; border-radius: 4px; padding: 3px 6px; }
.uv-footer-keurmerken__item:hover { opacity: 1; }
.uv-footer--meerlaags .footer-container { padding-top: 36px; padding-bottom: 28px; }
@media (max-width: 900px) {
    .uv-footer--kolommen_4 .footer-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uv-footer-nieuwsbrief__inner { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) { .uv-footer--kolommen_4 .footer-container { grid-template-columns: 1fr; } }

/* =========================================
   4. HOME / PRODUCT LIST & SIDEBAR
   ========================================= */
.main-container {
    /* width: 100% is nodig: body is een flex-kolom en margin:auto zet het uitrekken uit, waardoor de container
       krimpt tot zijn inhoud (categorie met weinig producten = één smalle kolom, gemeten 2026-09-16) */
    width: 100%;
    max-width: var(--container-max, 100%);
    margin: 0 auto;
    padding: 20px var(--container-pad, 40px);
    display: flex;
    gap: 40px;             
    align-items: flex-start;
    flex: 1;
}

/* --- SIDEBAR STYLING (GENESTE CATEGORIEËN) --- */
.sidebar {
    width: 260px; 
    flex-shrink: 0; 
    background: white; 
    padding: 20px;
    border-radius: 8px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    position: sticky; 
    top: 100px;
}
.sidebar h3 { font-size: 1.1em; margin-top: 0; margin-bottom: 15px; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; }

/* Reset de lijsten */
.cat-list, .cat-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Standaard: subcategorieën ingeklapt */
.cat-list .cat-children {
    display: none;
}
.cat-list li.expanded > .cat-children {
    display: block;
}

/* Rij met toggle + link */
.cat-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.cat-toggle {
    flex-shrink: 0;
    width: 20px;
    font-size: 0.7em;
    color: #666;
    cursor: pointer;
    padding: 4px 2px;
    text-align: center;
    user-select: none;
}
.cat-toggle:hover {
    color: var(--color-primary);
}
.cat-toggle-empty {
    cursor: default;
    visibility: hidden;
}
.cat-row .cat-link {
    flex: 1;
    min-width: 0;
}

/* Basis link stijl */
.cat-link {
    display: block;
    padding: 8px 12px;
    margin-bottom: 2px;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

/* Hover effect */
.cat-link:hover {
    background: #f1f3f5;
    color: var(--color-primary);
    padding-left: 18px; /* Klein sprongetje naar rechts */
}

/* ACTIVE STATE: Witte tekst op blauw (Leesbaar!) */
.cat-link.active {
    background: var(--color-primary);
    color: #ffffff !important; 
    font-weight: 600;
    font-style: normal !important;
}

.cat-link.active:hover {
    padding-left: 12px;
    background: var(--color-primary-hover);
}

/* --- RECURSIEVE INSPRINGING (3 LAGEN) --- */

/* Niveau 1: Directe kinderen van de root */
.cat-list > li > ul {
    margin-top: 2px;
    margin-bottom: 5px;
}

/* Niveau 1 Links (Hoofdcategorie) */
.cat-list > li > a.cat-link {
    font-weight: 600;
    color: #333;
    font-size: 1em;
}

/* Niveau 2: Eerste inspringing */
.cat-list ul {
    padding-left: 0; 
    margin-left: 15px; /* Schuif naar rechts */
    border-left: 2px solid #e9ecef; /* Lichtgrijs lijntje */
}

/* Niveau 2 Links (Sub) */
.cat-list ul li a.cat-link {
    font-size: 0.95em; 
    padding: 6px 10px;
    color: #555;
}

/* Niveau 3: Extra inspringing (Sub-Sub) */
.cat-list ul ul {
    margin-left: 15px; /* Nog eens 15px naar rechts */
    border-left: 2px solid #dee2e6; /* Iets donkerder lijntje voor contrast */
}

/* Niveau 3 Links (Sub-Sub) */
.cat-list ul ul li a.cat-link {
    font-size: 0.9em;
    padding: 5px 10px;
    color: #777;
    font-style: italic; /* Visueel onderscheid */
}

/* --- EINDE SIDEBAR --- */

.content-area { flex: 1; }

/* Product Grid */
.products-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 
    gap: 25px; 
}

.product-card {
    background: var(--color-card-bg); border: 1px solid #eee; border-radius: var(--radius-md);
    overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.card-img-wrap { height: 220px; overflow: hidden; position: relative; background: #f9f9f9; border-bottom: 1px solid #f0f0f0; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .card-img-wrap img { transform: scale(1.05); }
.card-info { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.card-title { font-weight: 600; margin: 0 0 5px; color: #333; font-size: 1.05em; }
.card-price { font-size: 1.1em; color: var(--color-primary); font-weight: bold; margin-bottom: 15px; }
.btn-view { margin-top: auto; display: block; text-align: center; background: #f0f0f0; color: #333; padding: 10px; border-radius: 6px; font-weight: 600; transition: all 0.2s; }
.btn-view:hover { background: #333; color: white; }
/* Themebare knopkleuren (via design-tokens; standaard = ongewijzigd grijs).
   "In winkelwagen" = .card-add-to-cart-btn, "Bekijken" = a.btn-view. */
.card-add-to-cart-btn { background: var(--color-btn-cart, #f0f0f0); color: var(--color-btn-cart-text, #333); }
a.btn-view:not(.card-add-to-cart-btn) { background: var(--color-btn-view, #f0f0f0); color: var(--color-btn-view-text, #333); }

/* Pagination */
.pagination-nav { margin-top: 30px; margin-bottom: 20px; text-align: center; }
.pagination-info { margin-bottom: 10px; color: #666; font-size: 0.95em; }
.pagination-links { list-style: none; display: flex; justify-content: center; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap; }
.pagination-links li { display: inline; }
.pagination-links a, .pagination-links .pagination-current { display: inline-block; padding: 8px 14px; border-radius: 6px; text-decoration: none; color: #333; background: #f5f5f5; transition: background 0.2s, color 0.2s; }
.pagination-links a:hover { background: var(--color-primary); color: white; }
.pagination-links .pagination-current { background: var(--color-primary); color: white; font-weight: 600; }
.pagination-links span[aria-hidden="true"] { padding: 8px 4px; color: #999; }
.infinite-scroll-sentinel { height: 1px; width: 100%; visibility: hidden; pointer-events: none; }

@media (max-width: 900px) {
    .main-container { flex-direction: column; padding: 20px; } 
    .sidebar { width: 100%; position: static; margin-bottom: 20px; }
}

/* 4c. HOMEPAGE-BOUWSTENEN (bouwstenen fase 5, 2026-09-11): video-hero, USP-blok, banners-raster, tekst + media. */
.uv-video-hero { position: relative; min-height: var(--uv-video-hero-h, 60vh); overflow: hidden; border-radius: var(--radius-md, 12px); background: #111; margin-bottom: 30px; display: flex; align-items: center; justify-content: center; }
.uv-video-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; pointer-events: none; }
iframe.uv-video-hero__video { width: 177.78vh; min-width: 100%; min-height: 56.25vw; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.uv-video-hero__inhoud { position: relative; z-index: 1; text-align: center; color: #fff; padding: 40px 24px; max-width: 760px; text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.uv-video-hero__titel { font-size: 2.6em; margin: 0 0 12px; color: #fff; line-height: 1.1; }
.uv-video-hero__sub { font-size: 1.15em; margin: 0 0 22px; opacity: 0.95; }
.uv-video-hero__knop { display: inline-block; width: auto; padding: 12px 28px; }
.uv-usp-blok { display: grid; grid-template-columns: repeat(var(--uv-usp-kolommen, 3), minmax(0, 1fr)); gap: 16px; margin-bottom: 30px; }
.uv-usp-blok__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; }
.uv-usp-blok--kaarten .uv-usp-blok__item { background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-card, none); }
.uv-usp-blok__icoon { font-size: 1.8em; line-height: 1; color: var(--color-primary); }
.uv-usp-blok__titel { font-weight: 700; color: var(--color-text, #222); }
.uv-usp-blok__sub { font-size: 0.9em; color: var(--color-text-muted, #666); }
.uv-banners-grid { display: grid; grid-template-columns: repeat(var(--uv-banners-kolommen, 3), minmax(0, 1fr)); gap: 20px; margin-bottom: 30px; }
.uv-banners-grid__item { position: relative; display: block; aspect-ratio: var(--uv-banners-ratio, 3 / 2); overflow: hidden; border-radius: var(--radius-md, 12px); background: #f4f4f4; }
.uv-banners-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
a.uv-banners-grid__item:hover img { transform: scale(1.04); }
.uv-banners-grid__titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); color: #fff; font-weight: 700; font-size: 1.15em; }
.uv-tekst-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; margin-bottom: 40px; }
.uv-tekst-media--links .uv-tekst-media__media { order: -1; }
.uv-tekst-media--zonder-media { grid-template-columns: 1fr; }
.uv-tekst-media__titel { font-size: 1.8em; margin: 0 0 14px; color: var(--color-text, #222); }
.uv-tekst-media__body { color: var(--color-text-muted, #555); line-height: 1.7; }
.uv-tekst-media__knop { display: inline-block; width: auto; margin-top: 18px; padding: 11px 22px; }
.uv-tekst-media__media img { width: 100%; border-radius: var(--radius-md, 12px); display: block; }
.uv-tekst-media__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md, 12px); overflow: hidden; background: #000; }
.uv-tekst-media__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
    .uv-usp-blok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uv-banners-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uv-tekst-media { grid-template-columns: 1fr; gap: 20px; }
    .uv-tekst-media--links .uv-tekst-media__media { order: 0; }
    .uv-video-hero__titel { font-size: 1.8em; }
}
@media (max-width: 600px) { .uv-usp-blok, .uv-banners-grid { grid-template-columns: 1fr; } }

/* 4b. CATEGORIEPAGINA-BOUWSTENEN (bouwstenen fase 3, 2026-09-11)
   Categoriekop, subcategorieën, toolbar, filterchips, filterlade, knopstijl op de kaart, "Meer laden".
   Alles nieuwe klassen (uv-…) of gescoped op .uv-knop-*; de standaard (secties verborgen, knop zichtbaar) raakt niets. */
.uv-kruimelpad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.88em; color: var(--color-text-muted, #666); margin-bottom: 10px; }
.uv-kruimelpad a { color: var(--color-text-muted, #666); }
.uv-kruimelpad a:hover { color: var(--color-primary); text-decoration: underline; }
.uv-kruimelpad__sep { opacity: 0.5; }
.uv-kruimelpad [aria-current] { color: var(--color-text, #333); font-weight: 600; }
.uv-categoriekop { margin-bottom: 22px; }
.uv-categoriekop__titelrij { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.uv-categoriekop__titel { margin: 0; font-size: 1.9em; line-height: 1.2; color: var(--color-text, #222); }
.uv-categoriekop__aantal { color: var(--color-text-muted, #777); font-size: 0.95em; font-weight: 500; }
.uv-categoriekop__omschrijving { margin-top: 10px; color: var(--color-text-muted, #555); line-height: 1.6; max-width: 70ch; }
.uv-categoriekop__omschrijving p { margin: 0 0 8px; }
.uv-categoriekop__omschrijving--kort { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uv-categoriekop--compact .uv-categoriekop__regel { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.uv-categoriekop--compact .uv-kruimelpad { margin: 0; }
.uv-categoriekop--compact .uv-categoriekop__titel { font-size: 1.35em; }
.uv-categoriekop--compact .uv-categoriekop__aantal { font-size: 0.75em; }
.uv-categoriekop--afbeelding { position: relative; min-height: 200px; border-radius: var(--radius-md, 12px); overflow: hidden; background: var(--color-primary) center / cover no-repeat; display: flex; align-items: flex-end; margin-bottom: 14px; }
.uv-categoriekop--afbeelding .uv-categoriekop__overlay { width: 100%; padding: 26px 28px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); color: #fff; }
.uv-categoriekop--afbeelding .uv-kruimelpad, .uv-categoriekop--afbeelding .uv-kruimelpad a, .uv-categoriekop--afbeelding .uv-kruimelpad [aria-current], .uv-categoriekop--afbeelding .uv-categoriekop__titel, .uv-categoriekop--afbeelding .uv-categoriekop__aantal { color: #fff; }
.uv-categoriekop--afbeelding .uv-categoriekop__titel { font-size: 2.1em; text-shadow: 0 1px 3px rgba(0,0,0,0.35); }
.uv-categoriekop--afbeelding + .uv-categoriekop__omschrijving { margin: 0 0 22px; }

.uv-subcats { margin-bottom: 24px; }
.uv-subcats--tegels { display: grid; grid-template-columns: repeat(var(--uv-subcats-kolommen, 5), minmax(0, 1fr)); gap: 14px; }
.uv-subcats__tegel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px 10px; background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md, 10px); color: var(--color-text, #333); font-weight: 600; font-size: 0.92em; transition: box-shadow 0.2s, transform 0.2s; }
.uv-subcats__tegel:hover { box-shadow: var(--shadow-hover, 0 6px 20px rgba(0,0,0,0.08)); transform: translateY(-2px); color: var(--color-primary); }
.uv-subcats__beeld { width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #f6f6f6; border-radius: var(--radius-sm, 6px); overflow: hidden; }
.uv-subcats__beeld img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.uv-subcats__initiaal { font-size: 1.4em; font-weight: 700; color: var(--color-text-muted, #999); }
.uv-subcats__naam { display: inline-flex; align-items: center; gap: 6px; }
.uv-subcats__aantal { font-size: 0.82em; font-weight: 500; color: var(--color-text-muted, #888); }
.uv-subcats__lijst { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 24px; }
.uv-subcats__lijst li { break-inside: avoid; }
.uv-subcats__lijst a { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border, #eee); color: var(--color-text, #333); font-weight: 500; }
.uv-subcats__lijst a:hover { color: var(--color-primary); }
.uv-subcats--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uv-subcats__chip, .uv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--color-border, #ddd); border-radius: 999px; background: var(--color-card-bg, #fff); color: var(--color-text, #333); font-size: 0.9em; font-weight: 500; white-space: nowrap; }
.uv-subcats__chip:hover, .uv-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.uv-chip.is-actief { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.uv-chip__aantal { font-size: 0.82em; opacity: 0.7; }
.uv-chip--wis { border-style: dashed; }

.uv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 14px; background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-sm, 8px); }
.uv-toolbar--minimaal { padding: 0; background: none; border: none; }
.uv-toolbar__aantal { font-weight: 600; color: var(--color-text-muted, #666); font-size: 0.95em; }
.uv-toolbar__rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-left: auto; }
.uv-toolbar__veld { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9em; color: var(--color-text-muted, #666); }
.uv-toolbar__select { padding: 7px 10px; border-radius: 6px; border: 1px solid var(--color-border, #ddd); font-size: 0.95em; background: #fff; color: var(--color-text, #333); }
.uv-toolbar__weergave { display: inline-flex; border: 1px solid var(--color-border, #ddd); border-radius: 6px; overflow: hidden; }
.uv-toolbar__knop { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; color: var(--color-text-muted, #777); background: #fff; }
.uv-toolbar__knop + .uv-toolbar__knop { border-left: 1px solid var(--color-border, #ddd); }
.uv-toolbar__knop.is-actief { background: var(--color-primary); color: #fff; }

.uv-filterchips { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.uv-filterchips__rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uv-filterchips__groep { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uv-filterchips__label { font-size: 0.85em; font-weight: 600; color: var(--color-text-muted, #666); margin: 0 2px 0 6px; }
.uv-filterlade-knoprij { margin-bottom: 14px; }
.uv-filterlade-knop { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-sm, 8px); background: var(--color-card-bg, #fff); color: var(--color-text, #333); font: inherit; font-weight: 600; cursor: pointer; }
.uv-filterlade-knop:hover { border-color: var(--color-primary); color: var(--color-primary); }
.uv-filterlade__inhoud { padding: 0; }
.uv-filterlade .sidebar { display: block !important; width: auto; position: static; box-shadow: none; border-radius: 0; padding: 14px 18px; } /* ook binnen .main-container.no-sidebar */
.uv-filterlade .sidebar-mobile-toggle { display: none !important; }
.uv-filterlade .sidebar .sidebar-inner { display: block !important; }

.uv-knop-hover .product-card .btn-view { opacity: 0; transition: opacity 0.15s; }
.uv-knop-hover .product-card:hover .btn-view, .uv-knop-hover .product-card:focus-within .btn-view { opacity: 1; }
@media (hover: none) { .uv-knop-hover .product-card .btn-view { opacity: 1; } }
.uv-knop-geen .product-card a.btn-view { display: none; }
.uv-laad-meer-wrap { text-align: center; margin: 24px 0 8px; }
.uv-laad-meer { display: inline-block; width: auto; min-width: 200px; }
.uv-laad-meer[disabled] { opacity: 0.6; cursor: wait; }

@media (max-width: 900px) {
    .uv-subcats--tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .uv-subcats__lijst { columns: 2; }
    .uv-categoriekop__titel { font-size: 1.5em; }
    .uv-categoriekop--afbeelding { min-height: 150px; }
    .uv-toolbar__rechts { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 600px) {
    .uv-subcats--tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uv-subcats__lijst { columns: 1; }
}

/* 5. PRODUCT DETAIL */
.back-link { display: inline-block; margin-bottom: 20px; color: #666; font-size: 0.95em; }
.back-link:hover { color: var(--color-primary); text-decoration: underline; }
/* Terug-link links en kruimelpad helemaal rechts op één rij (layout-instelling kruimelpad, 2026-10-03). */
.uv-pd-bovenrij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 20px; }
.uv-pd-bovenrij .back-link { margin-bottom: 0; }
.uv-pd-bovenrij .uv-kruimelpad { justify-content: flex-end; margin: 0 0 0 auto; text-align: right; }
@media (max-width: 700px) {
    .uv-pd-bovenrij .uv-kruimelpad [aria-current], .uv-pd-bovenrij .uv-kruimelpad > .uv-kruimelpad__sep:nth-last-child(2) { display: none; } /* de titel staat er vlak onder */
    /* Mobiel: kruimelpad links onder "Terug naar overzicht" (eigenaar 2026-10-03). */
    .uv-pd-bovenrij { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 14px; }
    .uv-pd-bovenrij .uv-kruimelpad { justify-content: flex-start; margin: 0; text-align: left; }
}
/* Minder ruimte tussen de USP-balk en "Terug naar overzicht" op mobiel (2026-10-03). */
@media (max-width: 900px) { .container.uv-pd { margin-top: 14px; } }
.product-wrapper {
    display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
    background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.product-gallery { display: flex; flex-direction: column; gap: 15px; min-width: 0; } /* min-width: 0 — anders rekt de grid-kolom mee met de natuurlijke beeldbreedte en wordt de pagina op mobiel 950 px breed */
.product-wrapper > * { min-width: 0; }
.main-image { width: 100%; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid #eee; }
.thumbnail-list { display: flex; gap: 10px; overflow-x: auto; }
.thumbnail { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; cursor: pointer; opacity: 0.7; transition: all 0.2s; }
.thumbnail:hover, .thumbnail.active { opacity: 1; border-color: var(--color-primary); border-width: 2px; }
.product-info { padding-top: 10px; }
.product-title { margin: 0 0 15px 0; font-size: 2.2em; color: #222; }
.product-price { font-size: 1.8em; color: var(--color-primary); font-weight: bold; margin-bottom: 25px; }
.add-to-cart-form { display: flex; gap: 15px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; }
.qty-input { width: 70px; padding: 12px; font-size: 1.1em; border: 1px solid #ccc; border-radius: 6px; text-align: center; }
/* Aantalkiezer (views/product/partials/qty_picker.php): lijst 1–10 + "Meer…" → getalveld. */
.qty-picker { display: inline-flex; align-items: center; flex-shrink: 0; }
.qty-picker [hidden] { display: none !important; } /* eigen display-regels hieronder mogen `hidden` niet overrulen */
.qty-picker .qty-select { width: 90px; text-align: left; text-align-last: center; font-family: inherit; background: #fff; cursor: pointer; }
.qty-picker .qty-number-wrap { display: inline-flex; align-items: center; gap: 6px; }
.qty-picker .qty-number { width: 80px; }
.qty-picker .qty-back { width: 32px; height: 32px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #555; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.qty-picker .qty-back:hover { color: var(--color-primary); border-color: var(--color-primary); }
.btn-add { background: #28a745; color: white; border: none; padding: 12px 30px; border-radius: 6px; font-size: 1.1em; font-weight: bold; cursor: pointer; flex: 1; transition: background 0.2s; }
.btn-add:hover { background: #218838; }
.product-description { color: #555; line-height: 1.6; font-size: 1.05em; }
.product-description h2 { color: #333; margin-top: 20px; margin-bottom: 10px; }
.product-description img { max-width: 100%; height: auto; border-radius: 4px; }
@media (max-width: 900px) { .product-wrapper { grid-template-columns: 1fr; } }

/* 5e. TEKSTGROOTTE PRODUCTTEKST OP MOBIEL (2026-10-03, instelling info.tekstgrootte_mobiel): wint van de themaregel. */
@media (max-width: 900px) {
    body .uv-pd.uv-pd--tekst-mobiel .product-description { font-size: var(--uv-pd-tekst-mobiel, 1em); }
}

/* 5f. TITEL BOVEN DE AFBEELDING OP MOBIEL (2026-10-03, layout.titel_boven_mobiel): één h1 in het productblok; op smalle
   schermen worden de info-wrappers display:contents zodat de titel met `order` boven de galerij komt. */
@media (max-width: 900px) {
    .uv-pd--titel-mobiel-boven .product-wrapper { display: flex; flex-direction: column; gap: 0; }
    .uv-pd--titel-mobiel-boven .product-wrapper > .uv-section--info,
    .uv-pd--titel-mobiel-boven .product-wrapper > .uv-section--info > .product-info { display: contents; }
    .uv-pd--titel-mobiel-boven .uv-section--info .uv-labels--pdp { order: -2; }
    .uv-pd--titel-mobiel-boven .uv-section--info .product-title { order: -1; margin: 0 0 14px; }
}

/* 5d. PRODUCTVIDEO (2026-10-02, app/Core/ProductVideos.php, views/sections/product_detail/_video.php)
   Standaard links onder de afbeelding: de info rechts loopt over twee rijen, de tweede rij (1fr) vangt de lengte
   van de producttekst op zodat er geen gat onder de galerij valt. Op mobiel (één kolom) komt de video na de info,
   zodat de bestelknop niet omlaag schuift. Instelling video_positie op de galerij (onder_afbeelding | onder_info | uit). */
.product-wrapper.uv-pd-heeft-video { grid-template-rows: auto 1fr; }
.product-wrapper.uv-pd-heeft-video > .uv-section--info { grid-row: span 2; }
.product-wrapper > .uv-pd-video { grid-column: 1; align-self: start; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.product-wrapper > .uv-pd-video--onder_info { grid-column: 1 / -1; }
.uv-pd--breed .product-wrapper > .uv-pd-video { grid-column: 1 / -1; }
.uv-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b0b0f; border-radius: 8px; overflow: hidden; }
.uv-video__knop { position: absolute; inset: 0; display: block; cursor: pointer; }
.uv-video__beeld, .uv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.uv-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); line-height: 0; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.uv-video__play-vlak { fill: #212121; fill-opacity: .82; transition: fill .15s, fill-opacity .15s; }
.uv-video__knop:hover .uv-video__play-vlak, .uv-video__knop:focus-visible .uv-video__play-vlak { fill: #f00; fill-opacity: 1; }
.uv-video__knop:focus-visible { outline: 3px solid var(--color-primary); outline-offset: -3px; }
.uv-video__privacy { margin: 0; font-size: .8em; color: var(--color-text-muted, #777); }
@media (max-width: 900px) {
    .product-wrapper.uv-pd-heeft-video { grid-template-rows: none; }
    .product-wrapper.uv-pd-heeft-video > .uv-section--info { grid-row: auto; }
    .product-wrapper > .uv-pd-video { grid-column: auto; }
}

/* 5g. AANSLUITVOORBEELD (2026-10-06, Codey Online — maatwerk, docs/CODEY-PLAN.md, views/sections/product_detail/_codey.php)
   Tabjes per bord met radio + label (werkt zonder JS). Beelden nooit bijsnijden: Codey's footer en watermerk moeten
   zichtbaar blijven. */
.uv-wiring { margin: 32px 0; min-width: 0; }
.uv-wiring__kop { margin: 0 0 6px; }
.uv-wiring__intro { margin: 0 0 16px; color: var(--color-text-muted, #666); }
.uv-wiring__tabs { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; min-width: 0; }
.uv-wiring__radio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.uv-wiring__tabs { overflow-anchor: none; } /* uv-codey.js houdt de tabbalk zelf op zijn plek */
.uv-wiring__tab { padding: 10px 18px; cursor: pointer; font-weight: 600; border: 1px solid var(--color-border, #ddd); border-bottom: 0;
    background: var(--color-bg-alt, #f5f6f8); color: var(--color-text, #222); border-radius: var(--radius-button, 0) var(--radius-button, 0) 0 0; margin-right: 4px; }
.uv-wiring__radio:checked + .uv-wiring__tab { background: var(--color-card-bg, #fff); color: var(--color-primary); position: relative; top: 1px; }
.uv-wiring__radio:focus-visible + .uv-wiring__tab { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.uv-wiring__paneel { display: none; flex-basis: 100%; min-width: 0; padding: 20px; border: 1px solid var(--color-border, #ddd); background: var(--color-card-bg, #fff); }
.uv-wiring__radio:nth-of-type(1):checked ~ .uv-wiring__paneel:nth-of-type(1),
.uv-wiring__radio:nth-of-type(2):checked ~ .uv-wiring__paneel:nth-of-type(2),
.uv-wiring__radio:nth-of-type(3):checked ~ .uv-wiring__paneel:nth-of-type(3) { display: block; }
.uv-wiring__titel { margin: 0 0 6px; font-size: 1.15em; }
.uv-wiring__uitleg { margin: 0 0 16px; }
/* Compact (eigenaar 2026-10-06): kleine voorbeelden naast de ingeklapte code, zodat gerelateerde producten dichtbij blijven.
   Het beeld wordt verkleind, nooit bijgesneden (object-fit: contain) — Codey's footer blijft zichtbaar. */
.uv-wiring__compact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.uv-wiring__beelden { display: grid; grid-template-columns: repeat(2, 200px); gap: 12px; align-items: start; }
.uv-wiring__figuur { margin: 0; min-width: 0; }
.uv-wiring__figuur a { position: relative; display: block; height: 200px; padding: 6px; border: 1px solid var(--color-border, #e5e7eb); background: #fff; cursor: zoom-in; }
.uv-wiring__figuur a:hover, .uv-wiring__figuur a:focus-visible { border-color: var(--color-primary); }
.uv-wiring__figuur a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.uv-wiring__beeld { display: block; width: 100%; height: 100%; object-fit: contain; }
.uv-wiring__vergroot { position: absolute; right: 6px; bottom: 6px; display: flex; padding: 5px; color: #fff; background: rgba(15, 23, 42, .75); }
.uv-wiring__figuur figcaption { margin-top: 6px; font-size: .85em; color: var(--color-text-muted, #777); }
.uv-wiring__code { border: 1px solid #1f2430; min-width: 0; background: #050a05; } /* groen op zwart: monochroom scherm (eigenaar 2026-10-06) */
.uv-wiring__pre::selection, .uv-wiring__pre *::selection { background: #33ff66; color: #050a05; text-shadow: none; }
.uv-wiring__codebalk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: #1f2430; color: #c9d1d9; font-size: .85em; }
.uv-wiring__bestand { min-width: 0; overflow-wrap: anywhere; }
.uv-wiring__knoppen { display: flex; gap: 6px; }
.uv-wiring__knop, .uv-wiring__codeknop { padding: 6px 12px; cursor: pointer; font: inherit; color: #fff; background: transparent; border: 1px solid #4b5466; border-radius: var(--radius-button, 0); }
.uv-wiring__knop:hover, .uv-wiring__knop:focus-visible, .uv-wiring__codeknop:hover { border-color: #fff; }
.uv-wiring__codevink { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.uv-wiring__codevink:focus-visible ~ .uv-wiring__codeknop { outline: 3px solid var(--color-primary); outline-offset: 2px; }
/* Ingeklapt ±10 regels met een vervaging onderaan; de volledige code staat in de HTML. */
.uv-wiring__pre { margin: 0; max-height: 16em; overflow: hidden; padding: 14px 16px 6px; background: #050a05; color: #33ff66; text-shadow: 0 0 4px rgba(51, 255, 102, .45); font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.uv-wiring__codevink:checked ~ .uv-wiring__pre { max-height: 560px; overflow: auto; -webkit-mask-image: none; mask-image: none; }
.uv-wiring__codeknop { display: block; margin: 0 12px 12px; text-align: center; font-size: .85em; }
.uv-wiring__minder, .uv-wiring__codevink:checked ~ .uv-wiring__codeknop .uv-wiring__meer { display: none; }
.uv-wiring__codevink:checked ~ .uv-wiring__codeknop .uv-wiring__minder { display: inline; }
/* Vergrootvenster (uv-codey.js) */
.uv-wiring-zoom { width: min(1400px, 96vw); max-width: none; max-height: 94vh; padding: 0; border: 0; background: #fff; overflow: auto; }
.uv-wiring-zoom::backdrop { background: rgba(15, 23, 42, .78); }
.uv-wiring-zoom__balk { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; background: #1f2430; color: #fff; font-size: .9em; }
.uv-wiring-zoom__sluit { padding: 6px 12px; cursor: pointer; font: inherit; color: #fff; background: transparent; border: 1px solid #4b5466; border-radius: var(--radius-button, 0); }
.uv-wiring-zoom__sluit:hover, .uv-wiring-zoom__sluit:focus-visible { border-color: #fff; }
.uv-wiring-zoom img { display: block; width: 100%; height: auto; }
.uv-wiring__libs { margin: 12px 0 0; font-size: .9em; }
.uv-wiring__bron { margin: 10px 0 0; font-size: .8em; color: var(--color-text-muted, #777); }
.uv-pd-onder__hoofd .uv-wiring__compact { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
    .uv-wiring__compact { grid-template-columns: minmax(0, 1fr); }
    .uv-wiring__beelden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uv-wiring__figuur a { height: 160px; }
    .uv-wiring__paneel { padding: 14px; }
    .uv-wiring__tab { padding: 9px 12px; }
}

/* 5c. INKLAPBARE PRODUCTTEKST (2026-09-14, app/Core/InklapbareTekst.php)
   De volledige tekst staat altijd in de HTML — alleen de hoogte wordt geklemd, niets op display:none.
   Het uitklappen werkt met een checkbox + label, dus ook zonder JavaScript. */
.uv-inklap { position: relative; }
.uv-inklap__vink { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; }
.uv-inklap__inhoud { position: relative; max-height: var(--uv-inklap-hoogte, 320px); overflow: hidden; }
.uv-inklap__inhoud::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-card-bg, #fff)); }
.uv-inklap__knop { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; cursor: pointer;
    border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-sm, 6px); background: var(--color-card-bg, #fff);
    color: var(--color-primary, #007bff); font-weight: 600; font-size: 0.95em; }
.uv-inklap__knop:hover { border-color: var(--color-primary, #007bff); }
.uv-inklap__vink:focus-visible ~ .uv-inklap__knop { outline: 2px solid var(--color-primary, #007bff); outline-offset: 2px; }
.uv-inklap__minder { display: none; }
.uv-inklap__vink:checked ~ .uv-inklap__inhoud { max-height: none; }
.uv-inklap__vink:checked ~ .uv-inklap__inhoud::after { display: none; }
.uv-inklap__vink:checked ~ .uv-inklap__knop .uv-inklap__meer { display: none !important; }
.uv-inklap__vink:checked ~ .uv-inklap__knop .uv-inklap__minder { display: inline !important; } /* verslaat de inline vangnet-stijl */
/* Tekst korter dan de limiet: geen klem en geen knop (gezet door public/js/uv-inklap.js). */
.uv-inklap.is-kort .uv-inklap__inhoud { max-height: none; }
.uv-inklap.is-kort .uv-inklap__inhoud::after, .uv-inklap.is-kort .uv-inklap__knop { display: none; }
/* Modus 'tot_media' (2026-10-02): op desktop zet uv-inklap.js --uv-inklap-media zodat de tekst net onder de foto en
   video in de linkerkolom ophoudt; zonder meting (één kolom, geen JavaScript) geldt de gewone hoogte. */
.uv-inklap--tot_media .uv-inklap__inhoud { max-height: var(--uv-inklap-media, var(--uv-inklap-hoogte, 320px)); }
/* Modus 'mobiel': op grotere schermen staat de tekst gewoon open. */
@media (min-width: 769px) {
    .uv-inklap--mobiel .uv-inklap__inhoud { max-height: none; }
    .uv-inklap--mobiel .uv-inklap__inhoud::after, .uv-inklap--mobiel .uv-inklap__knop { display: none; }
}
@media print {
    .uv-inklap__inhoud { max-height: none !important; }
    .uv-inklap__inhoud::after, .uv-inklap__knop { display: none !important; }
}

/* 5b. PRODUCTPAGINA-BOUWSTENEN (bouwstenen fase 4, 2026-09-11)
   Indeling zijkolom/breed, titel boven de galerij, koopbox-extra's, accordeon, reviews, zijlijst, vaste koopbalk.
   Alleen nieuwe uv-klassen of gescoped op .uv-pd--*; de standaard (twee_kolommen) raakt geen bestaande regel. */
.uv-pd--breed .product-wrapper { grid-template-columns: 1fr; }
.uv-pd--breed .product-gallery .main-image { aspect-ratio: 16 / 9; max-height: 560px; }
.uv-pd-titelblok { margin-bottom: 18px; }
.uv-pd-titelblok .uv-kruimelpad { margin-bottom: 6px; }
/* De h1 staat er direct onder: de productnaam niet nog eens als laatste kruimel tonen (2026-10-03; JSON-LD houdt het volledige pad). */
.uv-pd-titelblok .uv-kruimelpad [aria-current], .uv-pd-titelblok .uv-kruimelpad > .uv-kruimelpad__sep:nth-last-child(2) { display: none; }
.uv-pd-titelblok__titel { margin: 0; font-size: 1.9em; }
.uv-pd-onder { display: grid; grid-template-columns: minmax(0, 1fr) var(--uv-pd-zij, 320px); gap: 40px; margin-top: 40px; align-items: start; }
.uv-pd-onder__hoofd { min-width: 0; }
.uv-pd-onder__hoofd .related-products-section, .uv-pd-onder__hoofd .pd-related-carousel, .uv-pd-onder__hoofd .pd-cross-sell, .uv-pd-onder__hoofd .recently-viewed-section { padding-left: 0; padding-right: 0; max-width: none; }
.uv-pd-onder__zij { position: sticky; top: calc(var(--uv-zijmenu-top, 90px) + 10px); display: flex; flex-direction: column; gap: 24px; }
.uv-pd-beschrijving { background: var(--color-card-bg, #fff); padding: 30px; border-radius: var(--radius-md, 12px); box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.uv-pd-beschrijving .product-documents { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border, #e5e5e5); }
.uv-pd-beschrijving .product-documents h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; }
.uv-pd-docs { list-style: none; padding: 0; margin: 0; }
.uv-pd-docs li { margin-bottom: 0.5rem; }
.uv-pd-docs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--color-surface, #f5f5f5); border: 1px solid var(--color-border, #e0e0e0); border-radius: 6px; color: var(--color-text, #333); font-size: 0.95rem; }
.uv-pd-specs { width: 100%; border-collapse: collapse; }
.uv-pd-specs th, .uv-pd-specs td { padding: 8px 12px; border-bottom: 1px solid var(--color-border, #eee); text-align: left; }
.uv-pd-specs th { font-weight: 600; width: 40%; }
.uv-pd-accordeon { margin-top: 10px; }
.uv-pd-accordeon__item { border-top: 1px solid var(--color-border, #e5e5e5); }
.uv-pd-accordeon__item:last-child { border-bottom: 1px solid var(--color-border, #e5e5e5); }
.uv-pd-accordeon__item summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 1.05em; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.uv-pd-accordeon__item summary::-webkit-details-marker { display: none; }
.uv-pd-accordeon__item summary::after { content: "+"; font-size: 1.3em; color: var(--color-text-muted, #888); }
.uv-pd-accordeon__item[open] summary::after { content: "–"; }
.uv-pd-accordeon__item > *:not(summary) { padding-bottom: 16px; }
.uv-koopbox-extra { margin: -12px 0 24px; display: flex; flex-direction: column; gap: 10px; font-size: 0.95em; }
.uv-koopbox-extra__levertijd { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--color-success, #28a745); }
.uv-koopbox-extra__usps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; color: var(--color-text-muted, #555); }
.uv-koopbox-extra__vink { color: var(--color-success, #28a745); font-weight: 700; margin-right: 8px; }
.uv-koopbox-extra__offerte { display: inline-block; align-self: flex-start; padding: 9px 16px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm, 6px); color: var(--color-primary); font-weight: 600; }
.uv-koopbox-extra__offerte:hover { background: var(--color-primary); color: #fff; }
.uv-reviews { margin-top: 3rem; }
.uv-reviews__titel { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; border-bottom: 2px solid var(--color-border, #e5e5e5); padding-bottom: .6rem; }
.uv-reviews__samenvatting { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.uv-reviews__aantal { color: var(--color-text-muted, #777); font-weight: 500; }
.uv-reviews__leeg { color: var(--color-text-muted, #777); }
.uv-sterren { display: inline-flex; gap: 1px; color: #d9d9d9; font-size: 1.15em; letter-spacing: 1px; }
.uv-ster.is-vol { color: #f5a623; }
.uv-ster.is-half { background: linear-gradient(90deg, #f5a623 50%, #d9d9d9 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.uv-reviews__lijst { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.uv-review { padding: 16px 18px; background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md, 10px); }
.uv-review__kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.92em; }
.uv-review__auteur { font-weight: 600; }
.uv-review__datum { color: var(--color-text-muted, #888); margin-left: auto; }
.uv-review__titel { font-weight: 700; margin-top: 8px; }
.uv-review__tekst { margin: 6px 0 0; color: var(--color-text, #444); line-height: 1.55; }
/* Reviews fase 1 (bouwstenen 2, 2026-09-13): geverifieerde koop, reactie van de winkel, verdeling, formulier,
   eigen reviewpagina's en de home-sectie met shopbeoordelingen. */
.uv-review__koop { font-size: .82em; font-weight: 600; color: #047857; background: rgba(4,120,87,.08); border-radius: 999px; padding: 2px 8px; }
.uv-review__antwoord { margin: 8px 0 0; padding: 8px 12px; background: var(--color-bg-alt, #f6f7f9); border-radius: var(--radius-sm, 6px); font-size: .93em; }
.uv-reviews__verdeling { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.uv-reviews__verdeling-rij { display: flex; align-items: center; gap: 8px; font-size: .88em; }
.uv-reviews__verdeling-ster { flex: 0 0 40px; color: var(--color-text-muted, #777); }
.uv-reviews__verdeling-balk { flex: 1; height: 8px; background: #eceff3; border-radius: 999px; overflow: hidden; }
.uv-reviews__verdeling-balk > span { display: block; height: 100%; background: #f5a623; }
.uv-reviews__verdeling-aantal { flex: 0 0 28px; text-align: right; color: var(--color-text-muted, #777); }
.uv-review-schrijf { margin-top: 18px; }
.uv-review-schrijf__knop { display: inline-block; cursor: pointer; list-style: none; }
.uv-review-schrijf__knop::-webkit-details-marker { display: none; }
.uv-review-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-top: 16px; }
.uv-review-form label { display: flex; flex-direction: column; gap: 4px; font-size: .92em; font-weight: 600; }
.uv-review-form input[type=text], .uv-review-form input[type=email], .uv-review-form textarea, .uv-review-form select {
    padding: 9px 11px; border: 1px solid var(--color-border, #d5d9e0); border-radius: var(--radius-sm, 6px); font: inherit; font-weight: 400; }
.uv-review-sterren-kies { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.uv-review-sterren-kies legend { font-size: .92em; font-weight: 600; margin-bottom: 6px; }
.uv-review-sterren-kies label { flex-direction: row; align-items: center; gap: 5px; font-weight: 400; }
.uv-review-status { margin: 0; min-height: 1.2em; color: var(--color-text-muted, #666); font-size: .92em; }
.uv-reviews-pagina .uv-review-form { margin-bottom: 28px; }
.uv-review-melding { padding: 14px 16px; border-radius: var(--radius-md, 10px); background: var(--color-bg-alt, #f6f7f9); }
.uv-review-melding.is-fout { background: rgba(220,53,69,.08); }
.uv-review-intro { color: var(--color-text-muted, #666); }
.uv-review-stand { color: var(--color-text-muted, #777); font-size: .9em; margin: 0 0 6px; }
.uv-review-link { color: var(--color-primary); text-decoration: underline; }
.uv-shop-reviews { margin: 40px 0; }
.uv-shop-reviews__samenvatting { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 16px; }
.uv-shop-reviews__lijst { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.uv-shop-review { background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md, 10px); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.uv-kaart-sterren { display: inline-flex; align-items: center; gap: 4px; font-size: .85em; }
.uv-kaart-sterren__aantal { color: var(--color-text-muted, #888); }
/* Productlabels (bouwstenen 2 fase 3, 2026-09-13): stickers op de kaart en de productpagina. */
.uv-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.uv-labels--kaart { position: absolute; bottom: 8px; left: 8px; z-index: 2; max-width: calc(100% - 16px); }
.uv-labels--pdp { margin-bottom: 8px; }
.uv-label { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
    line-height: 1.25; letter-spacing: .01em; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── Homepage-bouwstenen (bouwstenen 2 fase 4, 2026-09-13) ───────────────────────────────────── */
/* Tekst over een banner (hero groot+klein en het bannerraster): titel, subtitel en een knopje. */
.uv-hero-gk__groot, .uv-hero-gk__tegel, .uv-banners-grid__item { position: relative; }
.uv-hero-gk__tekst, .uv-banners-grid__tekst { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
    align-items: flex-start; gap: 6px; padding: 16px 18px; color: #fff; text-align: left;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.18) 55%, rgba(0,0,0,0)); }
.uv-hero-gk__titel, .uv-banners-grid__titel { font-size: clamp(1.05rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.uv-hero-gk__sub, .uv-banners-grid__sub { font-size: .95rem; opacity: .95; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.uv-hero-gk__knop, .uv-banners-grid__knop { margin-top: 4px; padding: 7px 14px; border-radius: var(--radius-sm, 6px);
    background: var(--color-primary); color: #fff; font-size: .85rem; font-weight: 700; }
.uv-banners-grid__item:hover .uv-banners-grid__knop, .uv-hero-gk__groot:hover .uv-hero-gk__knop, .uv-hero-gk__tegel:hover .uv-hero-gk__knop { filter: brightness(1.08); }

/* Toplijst: genummerde top 3/5, optioneel met een banner ernaast. */
.uv-top-blok { margin: 40px 0; }
.uv-top-blok__inhoud { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.uv-top-blok--top3_lijst .uv-top-blok__inhoud, .uv-top-blok__inhoud:has(> .uv-top-blok__lijst:only-child) { grid-template-columns: 1fr; }
.uv-top-blok__banner { position: relative; display: block; border-radius: var(--radius-md, 10px); overflow: hidden; order: -1; }
.uv-top-blok__banner img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.uv-top-blok__banner-tekst { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.uv-top-blok__banner-titel { font-weight: 700; font-size: 1.05rem; }
.uv-top-blok__banner-sub { font-size: .9rem; opacity: .95; }
.uv-top-blok__banner-knop { align-self: flex-start; margin-top: 4px; padding: 6px 12px; border-radius: var(--radius-sm, 6px); background: var(--color-primary); font-size: .8rem; font-weight: 700; }
.uv-top-blok__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: uvtop; }
.uv-top-blok__item { display: flex; align-items: center; gap: 14px; background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md, 10px); padding: 12px 14px; }
.uv-top-blok__nummer { flex: 0 0 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; }
.uv-top-blok__link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.uv-top-blok__beeld { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.uv-top-blok__naam { flex: 1; min-width: 0; font-weight: 600; }
.uv-top-blok__prijs { font-weight: 700; white-space: nowrap; }
.uv-top-blok__oud { text-decoration: line-through; color: var(--color-text-muted, #999); font-weight: 400; margin-right: 6px; font-size: .9em; }

/* Producten met tabbladen. */
.uv-producten-tabs { margin: 40px 0; }
.uv-producten-tabs__koppen { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--color-border, #e5e7eb); margin-bottom: 18px; }
.uv-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 14px; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--color-text-muted, #6b7280); }
.uv-tab.is-actief { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.uv-producten-tabs__paneel[hidden] { display: none; }
.uv-producten-tabs--tabs_carrousel .carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.uv-producten-tabs--tabs_carrousel .carousel-track > * { flex: 0 0 clamp(180px, 22%, 260px); scroll-snap-align: start; }

/* Aftelklok. */
.uv-countdown { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
    padding: 14px 20px; border-radius: var(--radius-md, 10px); margin: 28px 0; color: #fff; }
.uv-countdown--accent { background: var(--color-accent, #2f3b47); }
.uv-countdown--primair { background: var(--color-primary); }
.uv-countdown--donker { background: #111827; }
.uv-countdown--countdown_blok { flex-direction: column; text-align: center; padding: 28px 20px; }
.uv-countdown__tekst { font-weight: 700; font-size: 1.05rem; }
.uv-countdown__klok { display: flex; gap: 10px; }
.uv-countdown__deel { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 6px 8px;
    background: rgba(255,255,255,.14); border-radius: var(--radius-sm, 6px); }
.uv-countdown__cijfer { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uv-countdown__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.uv-countdown__knop { background: #fff; color: var(--color-text, #222); }

/* Contactstrook. */
.uv-contact-strook { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin: 40px 0;
    padding: 22px 24px; background: var(--color-bg-alt, #f6f7f9); border-radius: var(--radius-md, 10px); }
.uv-contact-strook--contact_compact { grid-template-columns: 1fr auto; }
.uv-contact-strook__beeld img { width: 110px; height: 110px; object-fit: cover; border-radius: 50%; display: block; }
.uv-contact-strook__titel { margin: 0 0 6px; font-size: 1.25rem; }
.uv-contact-strook__uitleg { margin: 0 0 8px; color: var(--color-text-muted, #667); }
.uv-contact-strook__gegevens { margin: 0; display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; }
.uv-contact-strook__gegevens a { color: var(--color-primary); }

/* Categorieband. */
.uv-categorie-band { margin: 40px 0; padding: 22px 20px; border-radius: var(--radius-md, 10px); }
.uv-categorie-band--primair { background: var(--color-primary); color: #fff; }
.uv-categorie-band--donker { background: #111827; color: #fff; }
.uv-categorie-band--licht { background: var(--color-bg-alt, #f2f4f7); }
.uv-categorie-band__titel { margin: 0 0 14px; font-size: 1.2rem; }
.uv-categorie-band__rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.uv-categorie-band__tegel { flex: 0 0 150px; scroll-snap-align: start; background: var(--color-card-bg, #fff); color: var(--color-text, #333);
    border-radius: var(--radius-sm, 8px); padding: 10px; text-align: center; text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.uv-categorie-band__tegel img { width: 100%; height: 74px; object-fit: contain; }
.uv-categorie-band__naam { font-size: .85rem; font-weight: 600; }

@media (max-width: 768px) {
    .uv-top-blok__inhoud { grid-template-columns: 1fr; }
    .uv-contact-strook { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .uv-countdown { flex-direction: column; gap: 12px; text-align: center; }
}
/* Beoordelingsbadge (bouwstenen 2 fase 2, 2026-09-13): eigen weergave van de winkelscore, in de footer of zwevend. */
.uv-beoordeling-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 10px); background: var(--color-card-bg, #fff); color: var(--color-text, #333); text-decoration: none; line-height: 1.25; }
.uv-beoordeling-badge:hover { box-shadow: var(--shadow-hover, 0 4px 14px rgba(0,0,0,.10)); }
.uv-beoordeling-badge__score { font-size: 1.5em; font-weight: 700; color: var(--color-primary); }
.uv-beoordeling-badge__max { font-size: .6em; font-weight: 600; color: var(--color-text-muted, #777); }
.uv-beoordeling-badge__rechts { display: flex; flex-direction: column; gap: 2px; }
.uv-beoordeling-badge__tekst { font-size: .82em; color: var(--color-text-muted, #666); }
.uv-beoordeling-badge--footer { margin: 18px auto; display: inline-flex; }
.uv-footer-beoordeling { text-align: center; }
.uv-beoordeling-badge--zwevend { position: fixed; right: 16px; bottom: 16px; z-index: 35; box-shadow: 0 6px 22px rgba(0,0,0,.16); }
@media (max-width: 640px) { .uv-beoordeling-badge--zwevend { right: 10px; bottom: 10px; padding: 8px 10px; } .uv-beoordeling-badge--zwevend .uv-beoordeling-badge__tekst { display: none; } }
@media (max-width: 640px) { .uv-shop-reviews__lijst { grid-template-columns: 1fr; } }
.uv-zijlijst { background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-md, 10px); padding: 16px; }
.uv-zijlijst__titel { font-size: 1.05em; font-weight: 700; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--color-border, #e5e5e5); }
.uv-zijlijst__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.uv-zijlijst__item { display: flex; align-items: center; gap: 12px; color: var(--color-text, #333); }
.uv-zijlijst__item:hover .uv-zijlijst__naam { color: var(--color-primary); }
.uv-zijlijst__beeld { flex: 0 0 60px; width: 60px; height: 60px; border-radius: var(--radius-sm, 6px); background: #f6f6f6; overflow: hidden; }
.uv-zijlijst__beeld img { width: 100%; height: 100%; object-fit: contain; }
.uv-zijlijst__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.uv-zijlijst__naam { font-size: 0.92em; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uv-zijlijst__prijs { font-size: 0.9em; font-weight: 700; color: var(--color-primary); }
.uv-koopbalk { display: none; }
@media (max-width: 900px) {
    .uv-pd-onder { grid-template-columns: 1fr; gap: 24px; }
    .uv-pd-onder__zij { position: static; }
    .uv-koopbalk { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8990; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--color-card-bg, #fff); border-top: 1px solid var(--color-border, #e5e7eb); box-shadow: 0 -4px 16px rgba(0,0,0,0.08); }
    .uv-koopbalk[hidden] { display: none; }
    body.uv-mobiel-onderbalk .uv-koopbalk { bottom: 66px; }
    .uv-koopbalk__naam { flex: 1 1 auto; min-width: 0; font-size: 0.85em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .uv-koopbalk__prijs { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
    .uv-koopbalk__knop { flex: 0 0 auto; padding: 10px 16px; font-size: 0.95em; }
}

/* 6. WINKELWAGEN */
.container-cart { max-width: 900px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cart-product-link { color: inherit; text-decoration: none; }
.cart-product-link:hover { color: var(--color-primary); text-decoration: underline; }
.cart-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 30px; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; padding: 10px; border-bottom: 2px solid #eee; color: #555; }
td { padding: 15px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.total-row { text-align: right; font-size: 1.3em; font-weight: bold; margin-top: 20px; padding-top: 10px; border-top: 2px solid #333; }
.checkout-container { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
.row { display: flex; gap: 20px; }
.col { flex: 1; }
.btn-pay { background: #F27200; color: white; padding: 15px; width: 100%; border: none; font-size: 1.2em; font-weight: bold; cursor: pointer; border-radius: 5px; transition: background 0.2s; }
.btn-pay:hover { background: #d96600; }
/* Na de eerste druk bezig (public/js/uv-checkout-submit.js): zichtbaar dat er iets gebeurt, geen tweede order. */
.btn-pay.is-bezig, .btn-pay:disabled { opacity: .65; cursor: progress; }
.delete-btn { color: #dc3545; font-size: 0.85em; text-decoration: underline; cursor: pointer; border: none; background: none; padding: 0; }

/* 7. KLANT ACCOUNT (DASHBOARD) */
.container-dashboard { max-width: 1100px; }
.dashboard-intro { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.btn-logout { background-color: white; border: 1px solid #dc3545; color: #dc3545; padding: 8px 16px; border-radius: 6px; font-weight: 600; transition: all 0.2s; display: flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-logout:hover { background-color: #dc3545; color: white; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }
.card { background: var(--color-card-bg); border-radius: var(--radius-lg); box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; margin-bottom: 30px; }
.card-header { padding: 20px; border-bottom: 1px solid #f0f0f0; background: #fff; display: flex; align-items: center; gap: 10px; }
.card-header h3 { margin: 0; font-size: 1.2em; color: #333; }
.card-body { padding: 25px; }
.btn-save { background: var(--color-primary); color: white; border: none; padding: 12px 20px; border-radius: var(--radius-sm); cursor: pointer; width: 100%; font-weight: bold; transition: background 0.2s; }
.btn-save:hover { background: var(--color-primary-hover); }
.order-table { width: 100%; border-collapse: collapse; }
.order-table th { text-align: left; padding: 15px; background: #f9f9f9; color: #666; font-weight: 600; font-size: 0.9em; }
.order-table td { padding: 15px; border-bottom: 1px solid #f0f0f0; }
.badge { padding: 5px 10px; border-radius: 20px; font-size: 0.8em; font-weight: bold; }
.status-betaald { background: #d4edda; color: #155724; }
.status-open { background: #fff3cd; color: #856404; }
.status-geannuleerd { background: #f8d7da; color: #721c24; }
.alert-success { background: #d4edda; color: #155724; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #c3e6cb; }

/* 8. BEDANKT PAGINA */
.thank-you-container {
    max-width: 600px; margin: 60px auto; padding: 40px;
    background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center; animation: slideUp 0.5s ease-out;
}
.icon-circle { width: 80px; height: 80px; background: #d4edda; color: #155724; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; }
.icon-circle svg { width: 40px; height: 40px; }
.order-info { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 30px; font-weight: 500; color: #444; border: 1px solid #eee; }
.btn-home { display: inline-block; background: var(--color-primary); color: white; padding: 12px 30px; border-radius: 50px; font-weight: bold; transition: background 0.2s; }
.btn-home:hover { background: var(--color-primary-hover); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 9. ADRESBOEK (ACCOUNT) */
.header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card-header-flex { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; background: #fff; }
.card-header-flex h3 { margin: 0; font-size: 1.1em; color: #333; }
.action-icons a { text-decoration: none; font-size: 1.1em; margin-left: 10px; transition: opacity 0.2s; }
.action-icons a:hover { opacity: 0.7; }
.icon-edit { color: var(--color-primary); }
.icon-delete { color: #dc3545; }
.empty-state { text-align: center; padding: 40px; color: #666; }
.container-small { max-width: 600px; }
.dashboard-divider { margin: 20px 0; border: 0; border-top: 1px solid #eee; }
.dashboard-link { display: block; text-align: center; color: var(--color-primary); font-weight: bold; text-decoration: none; padding: 10px; }
.dashboard-link:hover { text-decoration: underline; }

/* FORMULIEREN (Mijn Gegevens) */
.form-group { margin-bottom: 20px; }
.form-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9em; color: #444; }
.form-control { width: 100%; padding: 12px 15px; font-size: 1em; color: #333; background-color: #fff; border: 1px solid #dce0e4; border-radius: 8px; transition: all 0.2s ease-in-out; box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
.form-control:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1); }
.form-section-title { margin-top: 30px; margin-bottom: 15px; font-size: 1rem; font-weight: 700; color: #1a1a1a; padding-bottom: 8px; border-bottom: 2px solid #f0f2f5; text-transform: uppercase; letter-spacing: 0.5px; }
.form-row { display: flex; gap: 15px; }
.form-col { flex: 1; }
.btn-save { margin-top: 10px; background: var(--color-primary); color: white; border: none; padding: 14px 20px; border-radius: var(--radius-sm); width: 100%; font-weight: 600; font-size: 1em; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn-save:hover { background: var(--color-primary-hover); }
.btn-save:active { transform: scale(0.98); }

/* =========================================
   USP BAR
   ========================================= */
.usp-bar-wrapper { background: var(--color-usp-bg); color: white; }
.usp-bar { width: 100%; max-width: var(--container-max, none) !important; margin: 0 auto; padding: 10px var(--container-pad, 5%); box-sizing: border-box; }
.usp-bar-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; font-size: 0.9em; font-weight: 500; }
.usp-item { white-space: nowrap; }
.usp-sep { opacity: 0.7; }
/* De markup staat twee keer in de balk (usp_bar.php) voor de mobiele loop; op desktop telt alleen de eerste set en
   gedraagt .usp-bar-set zich als niets (display: contents), zodat template-CSS op .usp-bar-inner/.usp-item blijft werken. */
/* USP-balk boven het logo (usp_positie boven_header, 2026-09-12): iets compacter */
.usp-bar-wrapper--boven .usp-bar { padding-top: 7px; padding-bottom: 7px; }
.usp-bar-set { display: contents; }
.usp-bar-kopie, .usp-sep--eind { display: none; }
/* Smal scherm (2026-09-12, eigenaar): één regel die door het beeld schuift in plaats van drie regels stapelen. De inner
   animeert precies één set-breedte (-50%); de duur komt uit usp_bar.php (--uv-usp-duur). Specificiteit bewust hoger dan
   template-CSS zoals body.theme-x .usp-bar-inner. Het effect marquee_usp (data-uv-marquee) neemt het over als het aanstaat. */
/* Kleiner lettertype op mobiel (2026-09-14, eigenaar): de balk werd anders onnodig hoog. Specificiteit bewust
   hoger dan template-CSS zoals body.theme-x .usp-bar-inner. */
@media (max-width: 900px) {
    .usp-bar-wrapper .usp-bar { padding-top: 6px; padding-bottom: 6px; }
    .usp-bar-wrapper .usp-bar .usp-bar-inner { font-size: 0.74em; line-height: 1.35; }
}
@media (max-width: 600px) {
    .usp-bar-wrapper .usp-bar { padding-top: 5px; padding-bottom: 5px; }
    .usp-bar-wrapper .usp-bar .usp-bar-inner { font-size: 0.68em; }
}
@media (max-width: 600px) {
    .usp-bar-wrapper .usp-bar { overflow: hidden; padding-left: 0; padding-right: 0; }
    .usp-bar-wrapper .usp-bar .usp-bar-inner:not([data-uv-marquee]) { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: max-content; max-width: none; gap: 0; margin: 0; animation: uvUspSchuif var(--uv-usp-duur, 24s) linear infinite; will-change: transform; }
    .usp-bar-wrapper .usp-bar .usp-bar-set { display: flex; align-items: center; gap: 16px; padding-right: 16px; white-space: nowrap; }
    .usp-bar-wrapper .usp-bar .usp-bar-kopie, .usp-bar-wrapper .usp-bar .usp-sep--eind { display: inline; }
    .usp-bar-wrapper .usp-bar .usp-bar-kopie { display: flex; }
    .usp-bar-wrapper .usp-bar .usp-item { white-space: nowrap; max-width: none; }
    .usp-bar-wrapper .usp-bar .usp-bar-inner:hover, .usp-bar-wrapper .usp-bar .usp-bar-inner:focus-within { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) {
        .usp-bar-wrapper .usp-bar { overflow-x: auto; scrollbar-width: none; }
        .usp-bar-wrapper .usp-bar .usp-bar-inner:not([data-uv-marquee]) { animation: none; }
        .usp-bar-wrapper .usp-bar .usp-bar-kopie { display: none; }
    }
}
@keyframes uvUspSchuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================
   HOMEPAGE
   ========================================= */
.home-main { width: 100%; max-width: var(--container-max, none) !important; margin: 0 auto; padding: 30px var(--container-pad, 5%); flex: 1; box-sizing: border-box; }
.home-section { margin-bottom: 50px; }
.home-section-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 20px; color: #222; border-bottom: 2px solid var(--color-primary); padding-bottom: 10px; font-family: var(--font-heading); }
.home-banners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 40px; }
.home-banner-item { border-radius: 12px; overflow: hidden; background: #f0f0f0; }
.home-banner-item img { width: 100%; height: 200px; object-fit: cover; display: block; }
.home-banner-link { display: block; }
@media (max-width: 768px) { .home-banners-grid { grid-template-columns: 1fr; } .home-banner-item img { height: 150px; } }
/* Hero groot + 2 klein (2026-09-13): grote banner links bepaalt de hoogte (verhouding als de bron, ≈2:1); de twee kleine
   rechts vullen elk de helft van die hoogte (object-fit: cover, minimale bijsnijding). */
.uv-hero-gk { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-bottom: 40px; align-items: stretch; }
.uv-hero-gk--alleen-groot { grid-template-columns: 1fr; }
.uv-hero-gk__groot, .uv-hero-gk__tegel { display: block; border-radius: 12px; overflow: hidden; background: #f0f0f0; min-height: 0; }
.uv-hero-gk__groot img { width: 100%; height: auto; aspect-ratio: 2.03 / 1; object-fit: cover; object-position: left center; display: block; } /* tekst staat in zulke banners links */
.uv-hero-gk__klein { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-height: 0; }
.uv-hero-gk__tegel { position: relative; }
.uv-hero-gk__tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; }
@media (max-width: 768px) { .uv-hero-gk { grid-template-columns: 1fr; gap: 12px; } .uv-hero-gk__klein { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; } .uv-hero-gk__tegel img { position: static; height: auto; aspect-ratio: 2.07 / 1; } }
.home-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.home-category-card { display: flex; flex-direction: column; background: var(--color-card-bg); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.2s, box-shadow 0.2s; color: var(--color-text); }
.home-category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.home-category-card img { width: 100%; height: 120px; object-fit: cover; }
.home-category-placeholder { width: 100%; height: 120px; background: #e9ecef; }
.home-category-info { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.home-category-name { font-weight: 600; font-size: 1em; }
.home-category-desc { font-size: 0.85em; color: #666; }
.home-brands-slider { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.home-brand-item { display: flex; align-items: center; justify-content: center; padding: 12px 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all 0.2s; min-height: 60px; }
.home-brand-item:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.home-brand-item img { max-height: 40px; max-width: 100px; object-fit: contain; }
.home-brand-item span { font-size: 0.95em; font-weight: 600; color: #333; }

/* Product card sale badge */
.product-card { position: relative; }
#priceDisplay.is-sale { color: #dc3545; }
.card-sale-badge { position: absolute; top: 10px; right: 10px; background: #dc3545; color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.8em; font-weight: bold; z-index: 1; }
.card-favorite-btn { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border: none; background: rgba(255,255,255,0.9); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1; transition: all 0.2s; }
.card-favorite-btn:hover { background: white; }
.card-favorite-btn svg { width: 18px; height: 18px; }
.card-favorite-btn.is-favorite svg { fill: #dc3545; stroke: #dc3545; }

/* =========================================
   CATEGORY MEGAMENU (Coolblue-style)
   ========================================= */
.header-category-megamenu { position: relative; }
.header-category-trigger {
    background: var(--color-primary); color: white; border: none; padding: 10px 16px; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.95em; cursor: pointer; display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.header-category-trigger:hover { background: var(--color-primary-hover); }
.header-category-trigger .chevron { font-size: 0.75em; transition: transform 0.2s; }
.header-category-megamenu.open .header-category-trigger .chevron { transform: rotate(180deg); }
.category-megamenu-dropdown {
    position: absolute; top: 100%; left: 0; margin-top: 6px;
    background: white; border: 1px solid #ddd; border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 1100;
    min-width: 700px; max-width: 900px; max-height: 70vh; overflow: hidden;
    display: none;
}
.category-megamenu-dropdown.open { display: block; }
.megamenu-topbar { display: none; } /* alleen op kleine schermen (thema/mobiel) zichtbaar: titel + sluitknop */
.megamenu-inner { display: flex; min-height: 300px; }
.megamenu-left {
    width: 220px; flex-shrink: 0; border-right: 1px solid #eee; background: #fafafa;
    padding: 8px 0; overflow-y: auto;
}
.megamenu-main-link {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    color: #333; font-weight: 500; transition: background 0.15s;
}
.megamenu-main-link:hover { background: #e8f4ff; color: var(--color-primary); }
.megamenu-main-link.active { background: #e8f4ff; color: var(--color-primary); }
.megamenu-cat-img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.megamenu-home-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.megamenu-arrow { margin-left: auto; font-size: 1.2em; color: #999; }
.megamenu-right {
    flex: 1; padding: 20px; overflow-y: auto; min-width: 0;
}
.megamenu-panel { display: none; }
.megamenu-panel.active { display: block; }
.megamenu-subgrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px 30px;
}
.megamenu-subgroup-title {
    font-weight: 700; color: var(--color-primary); font-size: 0.95em; margin-bottom: 8px; display: block;
}
.megamenu-subgroup-title:hover { text-decoration: underline; }
.megamenu-sublist { list-style: none; padding: 0; margin: 0; }
.megamenu-sublist li { margin-bottom: 6px; }
.megamenu-sublist a { color: #555; font-size: 0.9em; }
.megamenu-sublist a:hover { color: var(--color-primary); }
/* =========================================
   FACETTEN: PRIJS, MERK EN SCORE (bouwstenen 2 fase 5)
   Alleen zichtbaar als de winkelier het filter aanzet; de opmaak leunt op de bestaande tokens.
   ========================================= */
.uv-facet { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border, #eee); }
.uv-facet__titel { margin: 0 0 8px; font-size: 0.95em; }
.uv-facet__lijst { display: flex; flex-direction: column; gap: 4px; }
.uv-facet__rij { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.uv-facet__aantal { opacity: 0.6; font-size: 0.85em; }
.uv-facet__prijsvelden { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.uv-facet__veld { display: flex; flex-direction: column; gap: 2px; flex: 1 1 70px; min-width: 0; }
.uv-facet__veldlabel { font-size: 0.78em; opacity: 0.7; }
.uv-facet__veld input { width: 100%; padding: 7px 8px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-input, 6px); background: var(--color-card-bg, #fff); color: inherit; font: inherit; font-size: 0.9em; }
.uv-facet__knop { padding: 8px 14px; border: 1px solid var(--color-primary); border-radius: var(--radius-button, 6px); background: var(--color-primary); color: #fff; font: inherit; font-size: 0.85em; font-weight: 600; cursor: pointer; }
.uv-facet__knop:hover { filter: brightness(0.94); }
.uv-facet__wis { display: inline-block; margin-top: 8px; font-size: 0.85em; font-weight: 600; }
.uv-facet-sterren { color: #f5a623; letter-spacing: 1px; }
.uv-facet__scoretekst { font-size: 0.85em; opacity: 0.75; }
.uv-facet--chips { margin-top: 10px; padding-top: 0; border-top: 0; }
.uv-facet--chips .uv-facet__titel { display: inline-block; margin: 0 8px 0 0; font-size: 0.85em; opacity: 0.75; }
.uv-facet--chips .uv-facet__prijsvelden { display: inline-flex; }
.uv-facet--chips .uv-facet__veld { flex: 0 0 90px; }
/* Schuifbalk: twee range-inputs over één baan. Puur visueel — de getalvelden blijven de bron. */
.uv-prijsschuif { position: relative; height: 26px; margin: 6px 0 10px; }
.uv-prijsschuif__baan { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--color-border, #ddd); }
.uv-prijsschuif__bereik { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 2px; background: var(--color-primary); }
.uv-prijsschuif input[type="range"] { position: absolute; top: 0; left: 0; width: 100%; height: 26px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.uv-prijsschuif input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-primary); background: #fff; cursor: pointer; }
.uv-prijsschuif input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-primary); background: #fff; cursor: pointer; }
/* Bezig met filteren: de lijst vervaagt even, de pagina springt niet. */
.products-list-wrapper[aria-busy="true"] { opacity: 0.55; transition: opacity 0.12s; }

/* =========================================
   POPUP (bouwstenen 2 fase 6)
   Alleen aanwezig als de winkelier een popup heeft aangezet; nooit op winkelwagen/kassa/account.
   ========================================= */
.uv-popup { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.2s; }
.uv-popup.is-open { opacity: 1; }
.uv-popup__achter { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); }
.uv-popup__venster { position: relative; display: flex; width: 100%; max-width: 680px; max-height: 90vh; overflow: auto; background: var(--color-card-bg, #fff); color: var(--color-text, #222); border-radius: var(--radius-card, 10px); box-shadow: 0 20px 50px rgba(0,0,0,0.25); transform: translateY(12px); transition: transform 0.2s; }
.uv-popup.is-open .uv-popup__venster { transform: none; }
.uv-popup__beeld { flex: 0 0 42%; }
.uv-popup__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-popup__inhoud { flex: 1 1 auto; padding: 28px 26px; }
.uv-popup__titel { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.2; }
.uv-popup__tekst { margin-bottom: 16px; line-height: 1.55; }
.uv-popup__form { display: flex; flex-direction: column; gap: 10px; }
.uv-popup__veld { display: flex; flex-direction: column; gap: 4px; }
.uv-popup__veldlabel { font-size: 0.82em; opacity: 0.75; }
.uv-popup__veld input { padding: 11px 12px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-input, 6px); background: #fff; color: inherit; font: inherit; }
.uv-popup__knop { display: inline-block; padding: 12px 18px; border: 0; border-radius: var(--radius-button, 6px); background: var(--color-primary); color: #fff; font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.uv-popup__knop:hover { filter: brightness(0.94); color: #fff; }
.uv-popup__knop--link { text-decoration: none; }
.uv-popup__melding { margin: 12px 0 0; font-weight: 600; }
.uv-popup__melding.is-fout { color: #b91c1c; font-weight: 500; }
/* Specifiek genoeg om de knopopmaak van een thema te overstemmen: dit is een kruisje, geen knop. */
.uv-popup .uv-popup__sluit { position: absolute; top: 6px; right: 10px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; opacity: 0.6; }
.uv-popup .uv-popup__sluit:hover { opacity: 1; background: none; color: inherit; }
.uv-popup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
body.uv-popup-open { overflow: hidden; }
@media (max-width: 640px) {
    .uv-popup__venster { flex-direction: column; max-height: 86vh; }
    .uv-popup__beeld { flex: 0 0 auto; max-height: 150px; }
    .uv-popup__inhoud { padding: 22px 18px; }
    .uv-popup__titel { font-size: 1.25rem; }
}

/* =========================================
   BLOG & NIEUWS (bouwstenen 2 fase 7)
   Home-sectie blog_teasers (kaarten of lijst) en de blogpagina's; standaard verborgen op de homepage.
   ========================================= */
.uv-blog-teasers { margin: 32px 0; }
/* auto-fill (niet auto-fit): met één artikel blijft de kaart een derde breed in plaats van de hele rij. */
.uv-blog-teasers__lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.uv-blog-teasers--blog_lijst .uv-blog-teasers__lijst { grid-template-columns: 1fr; gap: 0; }
.uv-blog-kaart { display: flex; flex-direction: column; background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-card, 10px); overflow: hidden; }
.uv-blog-teasers--blog_lijst .uv-blog-kaart { flex-direction: row; align-items: baseline; gap: 14px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--color-border, #eee); border-radius: 0; background: none; }
.uv-blog-kaart__beeld { display: block; aspect-ratio: 16 / 9; max-height: 220px; background: var(--color-border, #eee); }
.uv-blog-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uv-blog-kaart__leeg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-border, #eee), var(--color-card-bg, #fff)); }
.uv-blog-kaart__inhoud { padding: 14px 16px 16px; }
.uv-blog-teasers--blog_lijst .uv-blog-kaart__inhoud { padding: 0; display: flex; gap: 14px; align-items: baseline; }
.uv-blog-kaart__datum { font-size: 0.8em; color: var(--color-text-muted, #777); white-space: nowrap; }
.uv-blog-kaart__titel { margin: 4px 0 8px; font-size: 1.05em; line-height: 1.3; }
.uv-blog-teasers--blog_lijst .uv-blog-kaart__titel { margin: 0; font-size: 1em; }
.uv-blog-kaart__titel a { color: inherit; text-decoration: none; }
.uv-blog-kaart__titel a:hover { color: var(--color-primary); }
.uv-blog-kaart__tekst { margin: 0; font-size: 0.92em; line-height: 1.55; color: var(--color-text-muted, #555); }
.uv-blog-teasers__meer { margin: 14px 0 0; }
.uv-blog-teasers__meer a { font-weight: 600; }
.uv-blog-artikel img { max-width: 100%; height: auto; }

/* =========================================
   PRODUCTPAGINA-EXTRA'S EN VERGELIJKEN (bouwstenen 2 fase 8)
   Plus-/minpunten, specificatietabel, tags, deelknoppen en de vergelijkpagina. Alles standaard uit.
   ========================================= */
.uv-plusmin { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 24px; margin: 16px 0; padding: 14px 16px; background: var(--color-surface, #f8f9fa); border: 1px solid var(--color-border, #eee); border-radius: var(--radius-card, 8px); }
.uv-plusmin__kop { margin: 0 0 6px; font-size: 0.95em; }
.uv-plusmin ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.uv-plusmin li { display: flex; gap: 8px; align-items: baseline; font-size: 0.94em; line-height: 1.45; }
.uv-plusmin__teken { flex: 0 0 auto; width: 1em; font-weight: 700; }
.uv-plusmin__kolom--plus .uv-plusmin__teken { color: #15803d; }
.uv-plusmin__kolom--min .uv-plusmin__teken { color: #b45309; }
.uv-pd-specblok { margin: 22px 0; }
.uv-pd-specblok__kop { margin: 0 0 10px; font-size: 1.05em; }
.uv-pd-specs { width: 100%; border-collapse: collapse; }
.uv-pd-specs th, .uv-pd-specs td { padding: 8px 12px; border-bottom: 1px solid var(--color-border, #eee); text-align: left; vertical-align: top; }
.uv-pd-specs th { width: 40%; font-weight: 600; }
.uv-pd-extras { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; padding-top: 14px; border-top: 1px solid var(--color-border, #eee); }
.uv-pd-extras__label { margin-right: 8px; font-size: 0.85em; font-weight: 600; opacity: 0.75; }
.uv-pd-tags, .uv-pd-delen { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.uv-pd-tag { font-size: 0.85em; }
.uv-pd-deel { padding: 5px 10px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-button, 6px); font-size: 0.85em; text-decoration: none; color: inherit; }
.uv-pd-deel:hover { border-color: var(--color-primary); color: var(--color-primary); }
.uv-pd-merklink { margin: 0; font-weight: 600; }
.uv-bestsellers-cat { margin: 0 0 26px; }
.uv-bestsellers-cat__titel { margin: 0 0 12px; font-size: 1.15em; }
.uv-kaart-vergelijk { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--color-text-muted, #666); font: inherit; font-size: 0.82em; cursor: pointer; }
.uv-kaart-vergelijk input { pointer-events: none; margin: 0; }
.uv-kaart-vergelijk.is-actief { color: var(--color-primary); font-weight: 600; }
.uv-vergelijk-balk { position: fixed; left: 50%; bottom: 16px; z-index: 1100; display: flex; align-items: center; gap: 14px; padding: 10px 16px; transform: translate(-50%, 140%); background: var(--color-card-bg, #fff); border: 1px solid var(--color-border, #ddd); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: transform 0.2s; }
.uv-vergelijk-balk.is-open { transform: translate(-50%, 0); }
.uv-vergelijk-balk__tekst { font-size: 0.9em; }
.uv-vergelijk-balk__knop { padding: 8px 16px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.9em; font-weight: 600; text-decoration: none; }
.uv-vergelijk__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.uv-vergelijk__scroll { overflow-x: auto; }
.uv-vergelijk__tabel { width: 100%; border-collapse: collapse; min-width: 520px; }
.uv-vergelijk__tabel th, .uv-vergelijk__tabel td { padding: 10px 12px; border-bottom: 1px solid var(--color-border, #eee); text-align: left; vertical-align: top; font-size: 0.94em; }
.uv-vergelijk__tabel thead th { vertical-align: bottom; position: relative; }
.uv-vergelijk__tabel tbody th { width: 22%; font-weight: 600; background: var(--color-surface, #fafafa); }
.uv-vergelijk__product { display: block; color: inherit; text-decoration: none; }
.uv-vergelijk__product img { width: 100%; max-width: 150px; aspect-ratio: 4 / 3; object-fit: contain; display: block; margin-bottom: 6px; }
.uv-vergelijk__naam { font-weight: 600; }
.uv-vergelijk__verwijder { position: absolute; top: 0; right: 6px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--color-text-muted, #888); cursor: pointer; }
.uv-vergelijk__oud { display: block; text-decoration: line-through; color: var(--color-text-muted, #999); font-size: 0.9em; }
.uv-vergelijk__stip { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; }
.uv-vergelijk__leeg { max-width: 44em; line-height: 1.6; }
.uv-vergelijk__aantal { color: var(--color-text-muted, #777); font-size: 0.85em; }

/* =========================================
   BUNDELS / COMBIDEALS (bouwstenen 2 fase 9)
   Sectie bundel op de productpagina; standaard verborgen en zonder bundel rendert hij niets.
   ========================================= */
.uv-bundels { margin: 26px 0; }
.uv-bundel { padding: 16px 18px; border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius-card, 10px); background: var(--color-card-bg, #fff); }
.uv-bundel + .uv-bundel { margin-top: 16px; }
.uv-bundel__titel { margin: 0 0 14px; font-size: 1.1em; }
.uv-bundel__rij { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.uv-bundel__plus { font-size: 1.3em; font-weight: 700; color: var(--color-text-muted, #999); }
.uv-bundel__item { display: flex; flex-direction: column; gap: 4px; width: 130px; color: inherit; text-decoration: none; }
.uv-bundel__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-surface, #fafafa); border-radius: var(--radius-card, 8px); }
.uv-bundel__naam { font-size: 0.85em; line-height: 1.35; }
.uv-bundel__prijs { font-size: 0.85em; font-weight: 600; }
.uv-bundel__afsluiter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border, #eee); }
.uv-bundel__bedragen { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.uv-bundel__oud { text-decoration: line-through; color: var(--color-text-muted, #999); }
.uv-bundel__nieuw { font-size: 1.25em; }
.uv-bundel__voordeel { color: #15803d; font-weight: 600; font-size: 0.9em; }
.uv-bundel__knop { width: auto; display: inline-block; }
.uv-bundel__melding { margin: 12px 0 0; font-weight: 600; color: #b45309; }
@media (max-width: 640px) { .uv-bundel__item { width: calc(50% - 24px); } }

/* =========================================
   TOEVOEGEN AAN WINKELWAGEN — MELDING / VENSTER (K1, app/Core/AddToCartBehavior.php)
   Alleen actief bij pdp_toevoegen_gedrag = melding|modal; standaard (winkelwagen) wordt er niets geladen.
   ========================================= */
@keyframes uv-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.badge-count.uv-pulse { display: inline-block; animation: uv-pulse 0.6s ease-out; }
.uv-atc-toast { position: fixed; z-index: 10000; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: var(--radius-card, 8px); background: #1f2937; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.25); font-size: 0.95em; transition: opacity 0.4s; }
.uv-atc-toast a { color: #fff; font-weight: 700; text-decoration: underline; white-space: nowrap; }
.uv-atc-toast--fout { background: #b02a37; }
.uv-atc-toast--weg { opacity: 0; }
.uv-atc-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,0.45); }
.uv-atc-modal__box { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px; border-radius: var(--radius-card, 10px); background: var(--color-card-bg, #fff); color: var(--color-text, #222); box-shadow: 0 16px 48px rgba(0,0,0,0.3); }
.uv-atc-modal__x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 1.6em; line-height: 1; cursor: pointer; color: inherit; }
.uv-atc-modal__titel { margin: 0 28px 16px 0; font-size: 1.15em; }
.uv-atc-modal__product { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--color-border, #eee); }
.uv-atc-modal__product img { width: 72px; height: 72px; object-fit: contain; background: var(--color-surface, #fafafa); border-radius: 6px; }
.uv-atc-modal__naam { font-weight: 600; }
.uv-atc-modal__meta { margin-top: 4px; color: var(--color-text-muted, #666); }
.uv-atc-modal__kop { margin: 16px 0 10px; font-weight: 700; }
.uv-atc-modal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.uv-atc-modal__kaart { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; font-size: 0.85em; }
.uv-atc-modal__kaart img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--color-surface, #fafafa); border-radius: 6px; }
.uv-atc-modal__kprijs { font-weight: 600; }
.uv-atc-modal__knoppen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.uv-atc-modal__knoppen > * { flex: 1 1 200px; text-align: center; text-transform: uppercase; }
.uv-atc-modal__bekijk { display: inline-block; text-decoration: none; }
.uv-atc-modal__verder { padding: 12px 16px; border: 1px solid var(--color-border, #ccc); border-radius: var(--radius-button, 4px); background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 640px) { .uv-atc-modal__grid { grid-template-columns: repeat(2, 1fr); } }

/* 5f. OFFERTE MAKEN (2026-10-02, WebshopQuoteRequest): knop op de productpagina en in de winkelwagen, uitleg bovenaan
   de winkelwagen. Omlijnd in de primaire kleur, zodat "In winkelwagen" / "Afrekenen" de hoofdknop blijft. */
.uv-offerte-knop { display: inline-block; margin-top: 10px; padding: 11px 22px; border: 2px solid var(--color-primary, #1f2937); border-radius: var(--radius-button, 6px);
    background: transparent; color: var(--color-primary, #1f2937); font: inherit; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center; }
.uv-offerte-knop:hover, .uv-offerte-knop:focus-visible { background: var(--color-primary, #1f2937); color: #fff; }
/* Productpagina: bescheiden — het is primair een webwinkel (eigenaar 2026-10-02) */
.add-to-cart-form .uv-offerte-knop { margin-top: 8px; padding: 6px 14px; border-width: 1px; font-size: .85em; font-weight: 600; letter-spacing: 0; text-transform: none; }
/* Thema's vullen elke submitknop met !important (Lichtkrant: body.theme-x button[type=submit]:not(…)×4 = specificiteit
   0,6,2); deze blijft omlijnd en zonder schaduw — vandaar de herhaalde klasse (0,7,2). */
body .add-to-cart-form button.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop[type="submit"] { background: transparent !important; color: var(--color-primary, #1f2937) !important; border: 1px solid currentColor !important; box-shadow: none !important; background-image: none !important; filter: none !important; }
body .add-to-cart-form button.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop[type="submit"]:hover,
body .add-to-cart-form button.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop.uv-offerte-knop[type="submit"]:focus-visible { background: var(--color-primary, #1f2937) !important; color: #fff !important; }
/* Winkelwagen: links "Offerte maken", rechts "Afrekenen" */
/* Kortingscode en cadeaubon als uitklapknoppen naast elkaar (2026-10-03, views/sections/cart/table.php). */
.uv-cart-codes { max-width: 520px; margin: 16px 0 0 auto; }
.uv-cart-codes__knoppen { display: flex; gap: 8px; }
.uv-cart-code__knop { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border: 1px solid var(--color-border, #dee2e6); border-radius: var(--radius-sm, 6px); background: var(--color-card-bg, #fff); color: inherit; font: inherit; font-size: 0.9em; font-weight: 600; text-align: left; cursor: pointer; }
.uv-cart-code__knop[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-primary); }
.uv-cart-code__pijl { transition: transform 0.2s; }
.uv-cart-code__knop[aria-expanded="true"] .uv-cart-code__pijl { transform: rotate(180deg); }
.uv-cart-code__paneel { margin-top: 8px; padding: 12px 14px; background: var(--color-surface, #f8f9fa); border: 1px solid var(--color-border, #dee2e6); border-radius: 8px; }
.uv-cart-code__paneel[hidden] { display: none; }
/* Producten in de winkelwagen op mobiel als kaartje: naam over de volle breedte, daaronder aantal · prijs · totaal · weg.
   De btw per regel vervalt hier; het btw-totaal staat onder de lijst. */
@media (max-width: 700px) {
    .uv-cart-tabel, .uv-cart-tabel tbody, .uv-cart-tabel tr, .uv-cart-tabel td { display: block; width: auto !important; }
    .uv-cart-tabel thead { display: none; }
    .uv-cart-tabel tbody tr { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border, #eee); }
    .uv-cart-tabel td.uv-cart-td { padding: 0 !important; border: none !important; }
    .uv-cart-tabel .uv-cart-td--product { grid-column: 1 / -1; }
    .uv-cart-tabel .uv-cart-td--btw { display: none !important; }
    .uv-cart-tabel .uv-cart-td--prijs { font-size: 0.85em; color: var(--color-text-muted, #666); }
    .uv-cart-tabel .uv-cart-td--totaal { text-align: right; }
    .uv-cart-codes { max-width: none; }
}

.uv-cart-acties { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.uv-cart-acties__afrekenen { margin-left: auto; text-align: right; }
.uv-offerte-knop--wagen { margin: 0; padding: 12px 22px; }
.uv-offerte-wagen { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.uv-offerte-wagen__staffel, .uv-quote-staffel-regel { font-size: .85em; font-weight: 600; color: #15803d; }
.uv-quote-staffel-regel { margin-top: 4px; }
@media (max-width: 640px) { .uv-cart-acties { flex-direction: column-reverse; align-items: stretch; } .uv-cart-acties__afrekenen { margin-left: 0; } .uv-offerte-knop--wagen { text-align: center; } }
.uv-quote-uitleg { margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--color-primary, #1f2937); border-left-width: 4px; border-radius: var(--radius-sm, 6px); background: var(--color-surface, #f8f9fa); }
.uv-quote-uitleg p { margin: 0 0 6px; }
.uv-quote-uitleg p:last-child { margin-bottom: 0; }
.uv-quote-uitleg__kop { font-weight: 700; font-size: 1.05em; }
.uv-quote-uitleg__staffel { font-size: .95em; }
.uv-quote-keuze { display: grid; gap: 8px; margin: 10px 0 4px; }
.uv-quote-keuze label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-border, #ddd); border-radius: var(--radius-sm, 6px); cursor: pointer; }
.uv-quote-keuze input { margin-top: 3px; }