/*
 * Huisstijl HVP Lighting (november 2026), naar het voorbeeld van hvplighting.com.
 * Geladen als laatste stylesheet, na assets/all/all.min.css, menu.css en webshop.css.
 *
 * De merkkleuren zelf (vroeger oranje #eaaa43 en rood #cb2727) zijn in all.min.css vervangen
 * door het HVP-blauw; dit bestand regelt de opbouw: blauwe header met logo, zoekveld en
 * winkelmand, het menu op een eigen rij, effen witte beeldvakken op een lichtgrijze pagina,
 * de filters links en de footer.
 */
:root {
    --hvp-blauw: #09549f;
    --hvp-donkerblauw: #053a72;
    --hvp-groen: #49b293;
    --hvp-grijs: #e0e2e3;
    --hvp-achtergrond: #f4f3f3;
    --hvp-tekst: #3a3a3a;
    --hvp-font: "Gill Sans", "Gill Sans MT", Lato, Calibri, sans-serif;
}

* {
    font-family: var(--hvp-font);
}

body {
    background: var(--hvp-achtergrond);
    color: var(--hvp-tekst);
}

/* ---------- Header ---------- */

#header {
    background: var(--hvp-blauw);
    z-index: 1000;
}

/* Bovenste balk: infopagina's, account en taal */
#header #headbar {
    background: var(--hvp-donkerblauw);
    margin-bottom: 0;
}

#header #headbar ul li a {
    color: #cfe0f2;
    letter-spacing: .5px;
}

#header #headbar ul li a:hover,
#header #headbar ul li a:focus,
#header #headbar ul#language li a.active {
    color: #fff;
    text-decoration: none;
}

#header #headbar ul#language li a {
    text-transform: uppercase;
}

/* Logo, zoekveld en winkelmand */
#header #topbar {
    background: var(--hvp-blauw);
    padding: 8px 0;
}

#header #topbar > .container {
    display: flex;
    align-items: center;
    gap: 30px;
}

#header #topbar > .container::before,
#header #topbar > .container::after {
    display: none;
}

/* Logo in de blauwe balk, binnen de hoogte van de balk (zelfde blauw als het logobestand) */
#header #topbar #header-image {
    flex: none;
    display: block;
    width: 104px;
    height: 104px;
}

#header #topbar #header-image img {
    width: 100% !important;
    height: 100%;
    display: block;
}

@media (max-width: 991px) {
    #header #topbar #header-image {
        width: 88px;
        height: 88px;
    }
}

/* Zoekveld: wit met afgeronde hoeken, donkerblauwe knop met vergrootglas */
#header #topbar #header-zoek {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

#header #topbar #globale-zoek {
    width: 100%;
    max-width: 640px;
}

#header #topbar #globale-zoek .input-group {
    width: 100%;
}

#header #topbar #globale-zoek input {
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d5dce6;
    border-right: 0;
    border-radius: 6px 0 0 6px !important;
    box-shadow: none;
    font-size: 15px;
    color: var(--hvp-tekst);
}

#header #topbar #globale-zoek input::placeholder {
    color: #5b6670;
}

#header #topbar #globale-zoek button {
    height: 40px;
    width: 52px;
    padding: 0;
    background: var(--hvp-donkerblauw);
    border: 1px solid var(--hvp-donkerblauw);
    border-radius: 0 6px 6px 0 !important;
    color: #fff;
    display: grid;
    place-items: center;
}

#header #topbar #globale-zoek button:hover,
#header #topbar #globale-zoek button:focus {
    background: #042c57;
}

#header #topbar #globale-zoek button svg,
#header #topbar #globale-zoek button svg * {
    color: #fff;
    stroke: #fff;
}

/* Suggesties onder het zoekveld (assets/js/zoek.js) */
.zoek-suggesties-veld {
    position: relative;
}

.zoek-suggesties {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1100;
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(5, 58, 114, .22);
    text-align: left;
    padding: 6px 0;
}

.zoek-suggesties[hidden] {
    display: none;
}

.zoek-suggesties-sectie {
    padding: 4px 0 6px;
}

.zoek-suggesties-sectie + .zoek-suggesties-sectie {
    border-top: 1px solid #eef1f5;
}

.zoek-suggesties-titel {
    padding: 6px 16px 4px;
    color: #5b6670;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
}

#header .zoek-suggesties a.zoek-suggestie {
    display: block;
    padding: 8px 16px;
    color: var(--hvp-tekst);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    text-transform: none;
}

#header .zoek-suggesties a.zoek-suggestie:hover,
#header .zoek-suggesties a.zoek-suggestie.actief {
    background: #e8ecf2;
    color: var(--hvp-blauw);
}

#header .zoek-suggesties a.zoek-suggestie-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zoek-suggestie-foto {
    flex: 0 0 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
}

.zoek-suggestie-foto img {
    max-width: 46px;
    max-height: 46px;
}

.zoek-suggestie-tekst {
    flex: 1 1 auto;
    min-width: 0;
}

.zoek-suggestie-naam {
    display: block;
    color: var(--hvp-blauw);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zoek-suggestie-sub {
    display: block;
    color: #6b7a88;
    font-size: 13px;
}

.zoek-suggestie-prijs {
    flex: 0 0 auto;
    color: var(--hvp-blauw);
    font-weight: 600;
}

#header .zoek-suggesties a.zoek-suggestie-categorie::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 10px 2px 2px;
    border-right: 2px solid var(--hvp-blauw);
    border-bottom: 2px solid var(--hvp-blauw);
    transform: rotate(-45deg);
}

#header .zoek-suggesties a.zoek-suggesties-alles {
    border-top: 1px solid #eef1f5;
    margin-top: 4px;
    padding: 12px 16px 8px;
    color: var(--hvp-blauw);
    font-weight: 600;
}

.zoek-suggesties-leeg {
    padding: 10px 16px;
    color: #6b7a88;
    font-size: 14px;
}

/* Zoekveld op gsm, onder het logo */
#header #topbar_mobile .gsm-zoek {
    padding-top: 8px;
    padding-bottom: 4px;
}

#header #topbar_mobile #globale-zoek .input-group {
    width: 100%;
}

#header #topbar_mobile #globale-zoek input {
    height: 40px;
    border: 1px solid #fff;
    border-right: 0;
    border-radius: 6px 0 0 6px !important;
    box-shadow: none;
    font-size: 16px;
}

#header #topbar_mobile #globale-zoek button {
    height: 40px;
    width: 48px;
    padding: 0;
    background: var(--hvp-donkerblauw);
    border: 1px solid var(--hvp-donkerblauw);
    border-radius: 0 6px 6px 0 !important;
    display: grid;
    place-items: center;
}

#header #topbar_mobile #globale-zoek button svg,
#header #topbar_mobile #globale-zoek button svg * {
    stroke: #fff;
}

#header #topbar_mobile .zoek-suggesties {
    max-height: 65vh;
}

/* Desktop-header in een smal venster: de lijst over de volle breedte van het scherm */
@media (max-width: 767px) {
    #header #topbar .zoek-suggesties {
        position: fixed;
        top: auto;
        left: 8px;
        right: 8px;
        margin-top: 6px;
    }
}

/* Mijn account | Winkelmandje (0) */
#header #topbar #header-links {
    flex: none;
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

#header #topbar #header-links li + li {
    border-left: 1px solid rgba(255, 255, 255, .45);
    margin-left: 22px;
    padding-left: 22px;
}

#header #topbar #header-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
    text-decoration: none;
    /* oude winkelmand-achtergrond uit all.min.css uitschakelen */
    background: none;
    width: auto;
    height: auto;
}

#header #topbar #header-links a span {
    position: static;
    color: #fff;
    font-size: 16px;
    text-transform: none;
}

#header #topbar #header-links a svg,
#header #topbar #header-links a svg * {
    flex: none;
    color: #fff;
    stroke: #fff;
}

#header #topbar #header-links a:hover span {
    text-decoration: underline;
}

@media (max-width: 1199px) {
    #header #topbar #header-zoek {
        padding: 0 12px;
    }

    #header #topbar #header-links li + li {
        margin-left: 14px;
        padding-left: 14px;
    }

    #header #topbar #header-links a,
    #header #topbar #header-links a span {
        font-size: 14px;
    }
}

/* Tablet: enkel de iconen, de tekst blijft voor schermlezers */
@media (max-width: 991px) {
    #header #topbar #header-links a span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

/*
 * Hoofdmenu: lichtgrijze balk onder de blauwe header, blauwe tekst in gewone schrijfwijze
 * ("Inbouw" i.p.v. "INBOUW"; de namen staan in hoofdletters in de database), dunne pijltjes
 * bij categorieën met submenu, links uitgelijnd op één rij. Loopt door op een tweede lijn
 * als er ooit meer categorieën zijn dan er passen.
 */
#header .navbar {
    background: #e8ecf2;
    border: 0;
    border-bottom: 1px solid #d5dce6;
    margin-bottom: 0;
    min-height: 0;
}

@media (min-width: 768px) {
    #header #janelca-nav .navbar-nav {
        justify-content: flex-start;
        margin-left: -10px;
        margin-right: -10px;
    }
}

#header .navbar .navbar-nav > li > a {
    color: var(--hvp-blauw);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: lowercase;
    padding: 15px 10px;
    position: relative;
}

/* Op brede schermen (één rij) de categorieën over de volle breedte verdelen */
@media (min-width: 1200px) {
    #header #janelca-nav .navbar-nav {
        justify-content: space-between;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #header .navbar .navbar-nav > li > a {
        font-size: 14px;
        padding: 14px 7px;
    }
}

#header .navbar .navbar-nav > li > a::first-letter {
    text-transform: uppercase;
}

#header .navbar .navbar-nav > li > a:hover,
#header .navbar .navbar-nav > li > a:focus,
#header .navbar .navbar-nav > li.active > a,
#header .navbar .navbar-nav > .open > a,
#header .navbar .navbar-nav > .open > a:hover,
#header .navbar .navbar-nav > .open > a:focus {
    color: var(--hvp-donkerblauw);
    background: transparent;
}

#header .navbar .navbar-nav > li.active > a::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 2px;
    background: var(--hvp-blauw);
}

/* Bootstrap-driehoekje vervangen door een dun pijltje (chevron) */
#header .navbar .navbar-nav > li > a .caret {
    color: inherit;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border: 0;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg);
    vertical-align: 3px;
}

/* ---------- Titels ---------- */

.home-titel .line-top,
.home-titel .line-bottom,
.categorie-content .titel h1 span.bottom-line {
    display: none;
}

.home-titel h1,
.categorie-content .titel h1,
#mijn-account h1 {
    color: var(--hvp-blauw);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.home-titel h1 {
    padding: 45px 0 30px;
}

.breadcrumb *,
.breadcrumb > li + li::before {
    color: #6b7a88;
}

.breadcrumb a:hover span {
    color: var(--hvp-blauw);
}

/* ---------- Tegels (categorieën en producten): effen wit, geen kader ---------- */

.grid-item {
    background: #fff;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
}

.grid-item a {
    border-top: 0 !important;
    border-radius: 12px;
    transition: box-shadow .2s;
}

.grid-item a:hover,
.grid-item a:focus {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}

.grid-item a .titel {
    color: var(--hvp-blauw);
    font-size: 16px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.grid-item a .price strong {
    color: var(--hvp-tekst);
}

.ribbon {
    background-color: var(--hvp-groen);
}

/* ---------- Categoriepagina: filters links, sorteren ---------- */

.filtergroep {
    background: #fff;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    padding: 0 0 6px;
    margin-bottom: 12px;
}

.filtergroep > a {
    color: var(--hvp-blauw);
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 11px 14px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--hvp-blauw);
}

.filtergroep > a.collapsed {
    border-bottom-color: var(--hvp-grijs);
    margin-bottom: 0;
}

.filtergroep > a:hover,
.filtergroep > a:focus {
    text-decoration: none;
    color: var(--hvp-donkerblauw);
}

.filtergroep > div {
    padding: 0 14px;
}

.filtergroep .checkbox label {
    color: var(--hvp-tekst);
}

.sort-options a,
.sort-options span {
    color: #6b7a88;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.selected-filter-values ul li a {
    background: #fff;
    color: var(--hvp-blauw);
    border-color: var(--hvp-blauw);
}

.selected-filter-values ul li a i {
    color: var(--hvp-blauw);
}

.selected-filter-values ul li a:hover,
.selected-filter-values ul li a:focus {
    background: var(--hvp-blauw);
    color: #fff;
}

.selected-filter-values ul li a:hover i,
.selected-filter-values ul li a:focus i {
    color: #fff;
}

/* ---------- Knoppen ----------
 * Zoals vroeger: .btn-custom is de omlijnde knop, .btn-inverted de gevulde (bv. "Leg in winkelwagen").
 */

.btn-custom,
.btn-custom i {
    color: var(--hvp-blauw);
}

.btn-custom {
    background-color: #fff;
    border: 1px solid var(--hvp-blauw);
    text-transform: uppercase;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-custom:hover i,
.btn-custom:focus i,
.btn-inverted,
.btn-inverted i {
    color: #fff;
}

.btn-custom:hover,
.btn-custom:focus,
.btn-inverted {
    background-color: var(--hvp-blauw);
    border-color: var(--hvp-blauw);
}

.btn-inverted:hover,
.btn-inverted:focus {
    background-color: var(--hvp-donkerblauw);
    border-color: var(--hvp-donkerblauw);
    color: #fff;
}

.btn-inverted:hover i,
.btn-inverted:focus i {
    color: #fff;
}

/* ---------- Productpagina: blokken als witte kaarten ----------
 * Elk blok (keuzes naast de foto, Specificaties, Ook in deze productreeks) in een eigen witte
 * kaart met een blauwe titel; labels grijsblauw, waarden donker en vet; zebra-rijen.
 */
/* Fotokaart: even breed als de kaarten eronder (15px marge per kant i.p.v. de kolom-gutter) */
#product-detail .detail-afbeelding {
    background: #fff;
    border: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    padding: 15px;
    margin: 0 15px 25px;
    width: calc(100% - 30px);
}

#product-detail .detail-afbeelding > .row {
    margin-left: 0;
    margin-right: 0;
}

#product-detail .detail-afbeelding #detail-afbeelding {
    margin-top: 0;
    height: 360px;
}

/* Miniaturen: duidelijke, klikbare vakjes onder de grote foto; de getoonde foto blauw omrand */
#product-detail .detail-afbeelding #thumb-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid #eef1f5;
}

#product-detail .detail-afbeelding #thumb-container::before,
#product-detail .detail-afbeelding #thumb-container::after {
    display: none;
}

#product-detail .detail-afbeelding #thumb-container a:not(.hidden) {
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #d5dce6;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

#product-detail .detail-afbeelding #thumb-container a:not(.hidden):hover,
#product-detail .detail-afbeelding #thumb-container a:not(.hidden):focus {
    border-color: var(--hvp-blauw);
    box-shadow: 0 2px 8px rgba(9, 84, 159, .18);
    outline: none;
}

#product-detail .detail-afbeelding #thumb-container a.actief {
    border: 2px solid var(--hvp-blauw);
    padding: 5px;
}

#product-detail .detail-afbeelding #thumb-container a .image-small {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767px) {
    #product-detail .detail-afbeelding #detail-afbeelding {
        height: 260px;
    }

    #product-detail .detail-afbeelding #thumb-container a:not(.hidden) {
        width: 84px;
        height: 84px;
    }
}

@media (min-width: 768px) {
    #product-detail .detail-afbeelding {
        width: calc(41.66666667% - 30px);
    }
}

@media (min-width: 992px) {
    #product-detail .detail-afbeelding {
        width: calc(50% - 30px);
    }
}

/* Prijs en koopkaart (aantal + Leg in winkelwagen) voor ingelogde klanten */
#product-detail .prijs {
    border: 0 !important;
    float: none;
    margin: 0;
    padding: 4px 0 8px;
    color: var(--hvp-blauw);
    font-size: 28px;
    font-weight: 600;
}

#product-detail #bestelform {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

#product-detail #bestelform .bestel-part {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

#product-detail #bestelform .bestel-part > div {
    float: none;
    width: auto;
    padding: 0 !important;
}

#product-detail #bestelform .bestel-part > div:last-child {
    flex: 1 1 220px;
}

#product-detail .bestel-part .bestel-inputs {
    display: flex !important;
    align-items: center;
    gap: 10px;
    border: 0 !important;
    padding: 0 !important;
    transform: none !important;
    left: auto !important;
}

#product-detail .bestel-part .bestel-inputs input {
    float: none;
    width: 72px !important;
}

#product-detail .bestel-part .bestel-inputs span {
    margin: 0;
    line-height: 1 !important;
    font-size: 13px;
    color: #5b6670;
}

#product-detail #bestelform .btn {
    padding: 12px 18px;
}

/* Keuzes naast de foto (Afmetingen / Technische details) */
#customfeatures-form .detail-specificaties {
    background: #fff;
    border-radius: 12px;
    padding: 6px 22px 12px;
    margin: 0 0 24px;
}

#customfeatures-form .detail-specificaties > div {
    float: none;
    width: auto;
    padding: 0 !important;
    margin-top: 0 !important;
}

.detail-specificaties .attribuut-rij {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    margin: 0;
    padding: 8px 0;
    min-height: 44px;
    border-bottom: 1px solid #eef1f5;
}

.detail-specificaties .attribuut-rij::before,
.detail-specificaties .attribuut-rij::after {
    display: none;
}

.detail-specificaties .attribuut-rij:last-child {
    border-bottom: 0;
}

.detail-specificaties .attribuut-rij > div {
    float: none;
    padding: 0;
    min-width: 0;
}

.detail-specificaties .attribuut-rij:not(.grp) > .text-left {
    flex: 0 0 42%;
    width: auto;
}

.detail-specificaties .attribuut-rij:not(.grp) > .text-right {
    flex: 1 1 auto;
    width: auto;
}

.detail-specificaties .attribuut-rij > .text-left,
.detail-specificaties .attribuut-rij > .text-right {
    line-height: 1.35 !important;
}

.detail-specificaties .attribuut-rij > .text-left {
    color: #5b6670;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding-right: 12px;
}

.detail-specificaties .attribuut-rij > .text-right {
    color: #1f2a36;
    font-size: 15px;
    font-weight: 600;
}

.detail-specificaties .attribuut-rij.grp {
    border-bottom: 2px solid var(--hvp-blauw);
    min-height: 0;
    padding: 16px 0 8px;
}

.detail-specificaties .attribuut-rij.grp > div {
    width: 100%;
}

.detail-specificaties .attribuut-rij.grp h3 {
    margin: 0;
    color: var(--hvp-blauw);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* Specificaties */
.specificaties {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px 14px;
    float: none;
    width: auto;
    margin: 10px 15px 24px;
}

#product-detail ~ .container .specificaties h2,
.specificaties h2 {
    color: var(--hvp-blauw);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .4px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hvp-blauw);
}

.specificaties table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.specificaties table th,
.specificaties table td {
    border: 0 !important;
    padding: 10px 14px !important;
    vertical-align: middle;
}

.specificaties table tr:nth-child(odd) th,
.specificaties table tr:nth-child(odd) td {
    background: #f4f6f9;
}

.specificaties table tr th:first-child,
.specificaties table tr td:first-child {
    border-radius: 6px 0 0 6px;
}

.specificaties table tr td:last-child {
    border-radius: 0 6px 6px 0;
}

.specificaties table th {
    color: #5b6670;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
}

.specificaties table td {
    color: #1f2a36;
    font-size: 15px;
    font-weight: 600;
}

@media (max-width: 767px) {
    #customfeatures-form .detail-specificaties {
        padding: 4px 16px 10px;
    }

    .detail-specificaties .attribuut-rij > .text-left {
        font-size: 12px;
        letter-spacing: 0;
    }

    .detail-specificaties .attribuut-rij:not(.grp) > .text-left {
        flex-basis: 46%;
    }

    .specificaties {
        padding: 16px 14px 10px;
    }

    .specificaties table th {
        font-size: 12px;
        width: 46%;
    }

    .specificaties table td {
        font-size: 14px;
    }

    .alternatieven-tabel {
        padding: 6px 12px 14px;
    }
}

/* Ook in deze productreeks (vergelijkingstabel) */
.alternatieven-tabel {
    background: #fff;
    border-radius: 12px;
    padding: 8px 20px 18px;
    margin-bottom: 24px;
    border: 0;
}

.alternatieven-tabel table {
    margin: 0;
}

.alternatieven-tabel thead th {
    color: var(--hvp-blauw);
    font-size: 18px !important;
    font-weight: 600;
    letter-spacing: .4px;
    text-align: left;
    border: 0 !important;
    border-bottom: 2px solid var(--hvp-blauw) !important;
    padding: 12px 4px 10px !important;
}

.alternatieven-tabel tbody td {
    border: 0 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    color: #1f2a36;
    font-weight: 600;
}

.alternatieven-tabel tbody tr:nth-child(even) td {
    background: #f4f6f9;
}

.alternatieven-tabel tbody td:first-child {
    text-align: left;
    color: #5b6670;
    font-size: 13px;
    letter-spacing: .3px;
    white-space: nowrap;
}

.alternatieven-tabel tbody tr:first-child td {
    background: #fff;
    padding-top: 16px !important;
}

.alternatieven-tabel .detailbeeld {
    display: inline-block;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.alternatieven-tabel td.prijs,
.alternatieven-tabel td.meerinfo {
    background: #fff !important;
}

.alternatieven-tabel .prijs-na-login {
    text-transform: none;
}

/* Afrekenen op factuur: uitleg boven de knop "Bestelling plaatsen" */
.op-factuur-uitleg {
    color: #5b6670;
    font-size: 14px;
    margin: 6px 0 12px;
}

.op-factuur-uitleg i {
    color: var(--hvp-blauw);
}

#content .btn.cta {
    padding: 13px 26px;
    font-size: 15px;
}

/* ---------- Venster na "Leg in winkelwagen" (iframe met template.modal.template) ---------- */
#product-modal .modal-dialog {
    width: 820px !important;
    max-width: calc(100% - 20px);
    height: auto !important;
    margin: 60px auto;
}

#product-modal .modal-dialog .modal-content {
    height: auto !important;
    border: 0;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(5, 58, 114, .3);
}

#product-modal .modal-dialog .modal-content .modal-body iframe {
    display: block;
    height: 460px !important;
}

#modal-template-body {
    background: #fff;
}

#modal-template-body #modal-head {
    display: flex;
    align-items: center;
    background: var(--hvp-blauw);
    padding: 0 10px 0 22px;
}

#modal-template-body #modal-head .modal-title {
    order: 1;
    flex: 1;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .3px;
    line-height: 56px;
}

#modal-template-body #modal-head button.close {
    order: 2;
    float: none;
    margin: 0;
    font-size: 30px;
    text-shadow: none;
    opacity: .85;
}

#modal-template-body #modal-head button.close:hover {
    opacity: 1;
}

#modal-template-body #content {
    min-height: 0;
    padding: 20px 22px 8px;
}

.toegevoegd-melding {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #1f6f56;
    font-size: 16px;
    font-weight: 600;
}

.toegevoegd-melding .vinkje {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hvp-groen);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
}

#modal-template-body #content .foto {
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background-color: #fff;
}

#modal-template-body #content .bold {
    color: #5b6670;
    font-weight: 600;
}

#modal-template-body #modal-foot {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 0;
    padding: 16px 22px 20px;
    border-top: 1px solid #eef1f5;
}

#modal-template-body .btn-custom,
#modal-template-body #modal-foot a.btn-custom {
    font-size: 13px;
    padding: 11px 18px;
}

#modal-template-body #modal-foot a.btn-custom:not(.btn-inverted):hover,
#modal-template-body #modal-foot a.btn-custom:not(.btn-inverted):focus {
    background: var(--hvp-blauw);
    color: #fff;
}

#modal-template-body #modal-foot a.btn-inverted:hover,
#modal-template-body #modal-foot a.btn-inverted:focus {
    background: var(--hvp-donkerblauw);
    border-color: var(--hvp-donkerblauw);
    color: #fff;
}

#modal-template-body #modal-foot a.btn-inverted i,
#modal-template-body #modal-foot a.btn-inverted:hover i,
#modal-template-body #modal-foot a.btn-inverted:focus i {
    color: #fff;
    margin-right: 6px;
}

@media (max-width: 767px) {
    #product-modal .modal-dialog {
        margin: 20px auto;
    }

    #modal-template-body #modal-foot a.btn-custom {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ---------- Blokken (panels) van afrekenen, inloggen, account: witte kaarten met blauwe titel ---------- */
#content .panel {
    background: #fff;
    border: 0;
    border-radius: 12px !important;
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 20px;
}

#content .panel-default > .panel-heading {
    background: #fff;
    border: 0;
    border-bottom: 2px solid var(--hvp-blauw);
    margin: 0 22px;
    padding: 18px 0 10px;
    border-radius: 0 !important;
}

#content .panel-default > .panel-heading .panel-title,
#content .panel-default > .panel-heading .panel-title a {
    color: var(--hvp-blauw);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .3px;
}

#content .panel-body {
    padding: 18px 22px 20px;
}

/* gelijke hoogte van de blokken naast elkaar (afrekenen) */
#content .checkout-col-6 .panel,
#content .checkout-col-6-2 .panel {
    height: calc(100% - 20px);
}

/* Paginatitels (Winkelwagen, Bestelling afronden, Inloggen, Mijn account) in HVP-blauw */
#content h1.pagina-titel {
    color: var(--hvp-blauw);
    font-weight: 600;
    letter-spacing: .3px;
}

/* Orderoverzicht bij het afrekenen (checkout/order): zelfde opmaak als de winkelmand */
#content table.winkelwagen td {
    padding: 9px 6px;
    color: #1f2a36;
    vertical-align: middle;
}

#content table.winkelwagen tr:first-child td {
    color: var(--hvp-blauw);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding-top: 2px;
}

#content table.winkelwagen td[bgcolor] {
    background: #eef1f5 !important;
    height: 1px;
    padding: 0;
}

#content table.winkelwagen tr:nth-child(2) td[bgcolor] {
    background: var(--hvp-blauw) !important;
    height: 2px;
}

#content table.winkelwagen a,
#content table.winkelwagen a span {
    color: var(--hvp-blauw);
    font-weight: 600;
}

#content table.winkelwagen td[colspan="3"] strong {
    color: #5b6670;
    font-weight: 400;
}

#content table.winkelwagen tr.subtotaal td {
    padding-top: 16px;
}

#content table.winkelwagen tr.eindtotaal td {
    border-top: 2px solid var(--hvp-blauw);
    padding-top: 12px;
    color: var(--hvp-blauw);
    font-size: 19px;
    font-weight: 600;
}

#content table.winkelwagen tr.eindtotaal td strong {
    color: var(--hvp-blauw);
    font-weight: 600;
}

@media (max-width: 767px) {
    #content table.winkelwagen td {
        padding: 8px 3px;
        font-size: 14px;
    }

    #content table.winkelwagen tr:first-child td {
        font-size: 11px;
        letter-spacing: 0;
    }
}

/* ---------- Winkelmand ---------- */
.cart-kaart {
    background: #fff;
    border-radius: 12px;
    padding: 6px 22px 22px;
    margin-bottom: 20px;
}

.cart-kop,
.cart-lijn {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 96px 120px 120px 40px;
    column-gap: 16px;
    align-items: center;
}

.cart-kop {
    padding: 14px 0 10px;
    border-bottom: 2px solid var(--hvp-blauw);
    color: var(--hvp-blauw);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.cart-kop-product {
    grid-column: 1 / 3;
}

.cart-kop-prijs,
.cart-kop-totaal,
.cart-prijs,
.cart-totaal {
    text-align: right;
}

.cart-lijn {
    padding: 14px 0;
    border-bottom: 1px solid #eef1f5;
}

.cart-foto {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #fff;
}

.cart-foto img {
    max-width: 100%;
    max-height: 100%;
}

.cart-info {
    min-width: 0;
}

.cart-naam {
    display: block;
    color: var(--hvp-blauw);
    font-size: 16px;
    font-weight: 600;
}

.cart-naam:hover {
    color: var(--hvp-donkerblauw);
}

.cart-code,
.cart-commentaar {
    display: block;
    color: #6b7a88;
    font-size: 13px;
    margin-top: 2px;
}

.cart-samenstelling {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

#content .cart-aantal input {
    width: 80px;
    text-align: center;
}

.cart-prijs {
    color: var(--hvp-tekst);
}

.cart-totaal {
    color: #1f2a36;
    font-weight: 600;
}

.cart-wis {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
    justify-self: end;
}

.cart-wis svg,
.cart-wis svg * {
    stroke: #8a96a3;
}

.cart-wis:hover {
    background: #fdecec;
}

.cart-wis:hover svg,
.cart-wis:hover svg * {
    stroke: #c62828;
}

.cart-mobiel-label {
    display: none;
}

.cart-onder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 40px;
    padding-top: 20px;
    align-items: start;
}

.cart-commentaar-veld label {
    display: block;
    color: #5b6670;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.cart-totalen {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 8px;
    column-gap: 0;
    margin: 0;
    font-size: 15px;
}

.cart-totalen dt {
    font-weight: 400;
    color: #5b6670;
    text-align: right;
    padding-right: 20px;
}

.cart-totalen dt small {
    display: block;
    font-size: 12px;
}

.cart-totalen dd {
    margin: 0;
    text-align: right;
    color: #1f2a36;
    font-weight: 600;
}

.cart-totalen .cart-eindtotaal {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 2px solid var(--hvp-blauw);
    color: var(--hvp-blauw);
    font-size: 19px;
    font-weight: 600;
}

.cart-knoppen {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.cart-leeg {
    padding: 30px 22px;
    text-align: center;
}

@media (max-width: 767px) {
    .cart-kaart {
        padding: 4px 14px 16px;
    }

    .cart-kop {
        display: none;
    }

    /* per product: foto | naam + code, daaronder aantal, stukprijs, totaal */
    .cart-lijn {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-areas:
            "foto info wis"
            "foto aantal aantal"
            "prijs prijs totaal";
        row-gap: 8px;
        column-gap: 12px;
        align-items: start;
    }

    .cart-foto { grid-area: foto; width: 64px; height: 64px; }
    .cart-info { grid-area: info; }
    .cart-wis { grid-area: wis; }
    .cart-aantal { grid-area: aantal; display: flex; align-items: center; gap: 10px; }
    .cart-prijs { grid-area: prijs; text-align: left; color: #6b7a88; font-size: 14px; }
    .cart-totaal { grid-area: totaal; }

    .cart-mobiel-label {
        display: inline;
        margin-right: 6px;
        color: #6b7a88;
        font-size: 13px;
    }

    .cart-naam {
        font-size: 15px;
    }

    .cart-onder {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cart-knoppen .btn {
        flex: 1 1 100%;
        text-align: center;
    }

    .cart-knoppen .cta {
        order: -1;
    }

    #content .panel-default > .panel-heading {
        margin: 0 16px;
    }

    #content .panel-body {
        padding: 14px 16px 16px;
    }
}

/* ---------- Prijzen enkel na inloggen ---------- */

/* Tegels en vergelijkingstabel: "Prijs na inloggen" i.p.v. de prijs */
.prijs-na-login,
.prijs-na-login i {
    color: var(--hvp-blauw);
    font-size: 13px;
    font-weight: 600;
}

/* Productpagina: melding met Inloggen / Account aanmaken */
.prijs-login-melding {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #e8ecf2;
    border-radius: 12px;
    padding: 20px 22px;
    margin-bottom: 25px;
}

.prijs-login-icoon svg,
.prijs-login-icoon svg * {
    stroke: var(--hvp-blauw);
}

.prijs-login-icoon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
}

.prijs-login-tekst strong {
    display: block;
    color: var(--hvp-blauw);
    font-size: 18px;
    margin-bottom: 4px;
}

.prijs-login-tekst p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

.prijs-login-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.prijs-login-knoppen .btn {
    padding: 10px 18px;
}

/* Inlogpagina: uitleg bovenaan */
#login .login-info {
    background: #e8ecf2;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    color: var(--hvp-tekst);
    font-size: 15px;
}

#login .login-info i {
    color: var(--hvp-blauw);
}

/* ---------- Paginering ----------
 * Grote, volledig klikbare vakken (44px, ook op gsm), HVP-blauw voor de huidige pagina.
 * Bovenaan de lijst (naast sorteren) rechts en iets kleiner, onderaan gecentreerd.
 */
.hvp-paginering {
    display: block;
    margin: 0;
    border-radius: 0;
}

.hvp-paginering ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hvp-paginering li {
    display: block;
    margin: 0;
}

.hvp-paginering li a,
.hvp-paginering li span {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d5dce6 !important;
    border-radius: 8px !important;
    background: #fff;
    color: var(--hvp-blauw);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    float: none;
    margin: 0;
    transition: background .15s, border-color .15s, color .15s;
}

.hvp-paginering li a svg,
.hvp-paginering li a svg * {
    stroke: var(--hvp-blauw);
}

.hvp-paginering li.disabled svg,
.hvp-paginering li.disabled svg * {
    stroke: #b5bfca;
}

.hvp-paginering li a:hover,
.hvp-paginering li a:focus {
    background: #e8ecf2;
    border-color: var(--hvp-blauw) !important;
    color: var(--hvp-blauw);
    outline: none;
}

.hvp-paginering li.active span {
    background: var(--hvp-blauw);
    border-color: var(--hvp-blauw) !important;
    color: #fff;
    cursor: default;
}

.hvp-paginering li.disabled span {
    color: #b5bfca;
    background: #f7f8fa;
    cursor: default;
}

.hvp-paginering li.puntjes span {
    border-color: transparent !important;
    background: transparent;
    color: #6b7a88;
    min-width: 24px;
    padding: 0 2px;
}

/* bovenaan, naast "sorteer op": rechts uitgelijnd en compacter */
.pull-right > .hvp-paginering ul {
    justify-content: flex-end;
}

.pull-right > .hvp-paginering li a,
.pull-right > .hvp-paginering li span {
    min-width: 38px;
    height: 38px;
    font-size: 15px;
}

/* onderaan de lijst: gecentreerd */
.paginering-onder {
    margin: 10px 0 30px;
}

.paginering-onder .hvp-paginering ul {
    justify-content: center;
}

@media (max-width: 767px) {
    .pull-right > .hvp-paginering {
        display: none;  /* op gsm enkel onderaan, met de grote vakken */
    }
}

/* ---------- Invoervelden ----------
 * Zelfde opmaak als het zoekveld in de header: wit, lichte rand, afgeronde hoeken, blauwe rand
 * bij focus. Geldt voor alle tekstvelden, keuzelijsten en tekstvakken in de pagina en de modals
 * (niet voor checkboxen en keuzerondjes). Overschrijft de vierkante, !important-regels uit
 * all.min.css (.panel input, .attribuut-rij select...).
 */
#content .form-control,
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="number"],
#content input[type="tel"],
#content input[type="search"],
#content input[type="date"],
#content select,
#content textarea,
.modal .form-control,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal select,
.modal textarea {
    background-color: #fff;
    border: 1px solid #d5dce6 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--hvp-tekst);
    font-size: 15px;
    padding: 8px 12px;
    transition: border-color .15s, box-shadow .15s;
}

#content .form-control,
#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="number"],
#content input[type="tel"],
#content input[type="search"],
#content input[type="date"],
#content select,
.modal .form-control,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="number"],
.modal select {
    height: 40px;
}

#content textarea,
.modal textarea,
#content textarea.form-control {
    height: auto;
    min-height: 110px;
}

#content .form-control:focus,
#content input:focus,
#content select:focus,
#content textarea:focus,
.modal .form-control:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
    border-color: var(--hvp-blauw) !important;
    box-shadow: 0 0 0 3px rgba(9, 84, 159, .15) !important;
    outline: none;
}

#content input::placeholder,
#content textarea::placeholder {
    color: #8a96a3;
}

/* Keuzelijsten: eigen pijltje (chevron) met ruimte tot de rand i.p.v. het browserpijltje.
 * Ook select.form-control: anders wint de padding van de algemene veldregel en valt de tekst weg. */
#content select,
#content select.form-control,
.modal select,
.modal select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 40px 2px 12px;
    line-height: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2309549f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    cursor: pointer;
}

#content select::-ms-expand {
    display: none;
}

#content select[multiple],
#content select[size] {
    background-image: none;
    padding-right: 12px;
}

/* Fouten (validatie) blijven rood */
#content .error,
#content input.error,
#content select.error,
#content textarea.error,
#content .has-error .form-control {
    border-color: #c62828 !important;
}

#content label.error {
    border: 0 !important;
}

/* Veld + knop aan elkaar (input-group): enkel de buitenste hoeken rond */
#content .input-group .form-control:first-child,
.modal .input-group .form-control:first-child {
    border-radius: 6px 0 0 6px !important;
}

#content .input-group .form-control:last-child,
.modal .input-group .form-control:last-child {
    border-radius: 0 6px 6px 0 !important;
}

#content .input-group-btn:last-child > .btn,
.modal .input-group-btn:last-child > .btn {
    border-radius: 0 6px 6px 0 !important;
    height: 40px;
}

#content .input-group-btn:first-child > .btn,
.modal .input-group-btn:first-child > .btn {
    border-radius: 6px 0 0 6px !important;
    height: 40px;
}

/* Labels naast de velden op dezelfde hoogte */
.inputstyle .form-group label,
.panel .form-group label,
.panel-body .form-group label {
    line-height: 40px;
}

/* Aantal op de productpagina */
#product-detail .bestel-part .bestel-inputs input {
    width: 64px;
    text-align: center;
}

#product-detail .bestel-part .bestel-inputs span {
    line-height: 40px;
}

/* Knoppen: dezelfde afgeronde hoeken */
.btn,
.btn-custom,
.btn-inverted {
    border-radius: 6px !important;
}

/* ---------- Footer ---------- */

/* USP-balk boven de footer (inhoud uit het CMS, menu "USP") */
#usp-balk {
    padding: 40px 0 34px;
}

#usp-balk .usp-balk {
    display: flex;
    align-items: center;
    background: #e8ecf2;
    border-radius: 14px;
    padding: 22px 32px;
}

#usp-balk .usp-intro {
    flex: 1.3;
    padding-right: 28px;
}

#usp-balk .usp-titel {
    color: var(--hvp-blauw);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
}

#usp-balk .usp-subtitel {
    color: var(--hvp-tekst);
    font-size: 16px;
    margin-top: 4px;
}

#usp-balk .usp-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px 24px;
    border-left: 2px solid rgba(9, 84, 159, .35);
}

#usp-balk .usp-icoon {
    flex: none;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

#usp-balk .usp-icoon svg {
    width: 46px;
    height: 46px;
    fill: none;
    stroke: var(--hvp-blauw);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#usp-balk .usp-icoon svg * {
    stroke: var(--hvp-blauw);
}

#usp-balk .usp-icoon img {
    max-width: 48px;
    max-height: 48px;
    width: auto;
    height: auto;
}

#usp-balk .usp-tekst {
    color: var(--hvp-tekst);
    font-size: 17px;
    line-height: 1.3;
}

@media (max-width: 1199px) {
    #usp-balk .usp-balk {
        padding: 20px 22px;
    }

    #usp-balk .usp-item {
        padding: 6px 16px;
        gap: 12px;
    }

    #usp-balk .usp-tekst {
        font-size: 15px;
    }
}

/* Tablet en gsm: titel bovenaan, de USP's eronder */
@media (max-width: 991px) {
    #usp-balk .usp-balk {
        flex-wrap: wrap;
        row-gap: 14px;
    }

    #usp-balk .usp-intro {
        flex: 0 0 100%;
        padding-right: 0;
    }

    #usp-balk .usp-item:nth-child(2) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 767px) {
    #usp-balk {
        padding: 24px 0;
    }

    #usp-balk .usp-balk {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }

    #usp-balk .usp-intro {
        flex: none;
    }

    #usp-balk .usp-titel {
        font-size: 22px;
    }

    #usp-balk .usp-item {
        flex: none;
        border-left: 0;
        padding: 0;
    }
}

#footer-image {
    display: none;
}

#footer-2 {
    background-color: var(--hvp-blauw);
    padding: 20px 0 30px;
}

#footer-2 * {
    color: var(--hvp-grijs);
    font-weight: 400;
}

#footer-2 h2 {
    color: #fff;
    font-size: 26px;
    letter-spacing: .5px;
}

#footer-2 ul li {
    line-height: 1.8;
}

#footer-2 a:hover {
    color: #fff;
}

#copyright {
    background: var(--hvp-donkerblauw);
}

#copyright *,
#copyright a {
    color: #9fb6cf;
}

#copyright a:hover {
    color: #fff;
}

/* ---------- Mobiel ---------- */

#header #topbar_mobile.mobiel {
    background: var(--hvp-blauw);
}

#header #topbar_mobile #header-image img {
    width: 66px;
    height: 66px;
}

/* Gsm-header: logo links, winkelmand en menuknop als witte iconen rechts */
#header #topbar_mobile.mobiel > .row:first-child {
    display: flex;
    align-items: center;
}

#header #topbar_mobile.mobiel > .row:first-child::before,
#header #topbar_mobile.mobiel > .row:first-child::after {
    display: none;
}

#header #topbar_mobile.mobiel #mobile-buttons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    float: none;
}

#header #topbar_mobile.mobiel #mobile-buttons li a,
#header #topbar_mobile.mobiel #mobile-buttons li button {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    display: grid;
    place-items: center;
}

#header #topbar_mobile.mobiel #mobile-buttons li a#winkelwagentje-gsm {
    position: relative;
    background: url(/assets/img/header/winkelmand.svg) center / 28px 28px no-repeat;
}

#header #topbar_mobile.mobiel #mobile-buttons li a#winkelwagentje-gsm span {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--hvp-groen);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

#header #topbar_mobile.mobiel #mobile-buttons li button.navbar-toggle {
    float: none;
}

#header #topbar_mobile.mobiel #mobile-buttons li button.navbar-toggle span.icon-bar {
    background-color: #fff;
    width: 24px;
    height: 2px;
    margin: 5px auto;
}

/* Uitgeklapt gsm-menu */
#header #topbar_mobile #ls-nav {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 6px;
}

#header #topbar_mobile ul.navbar-nav li a {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 11px 15px;
}

#header #topbar_mobile ul.navbar-nav li a:hover,
#header #topbar_mobile ul.navbar-nav li a:focus,
#header #topbar_mobile ul.navbar-nav .open > a {
    background: var(--hvp-donkerblauw);
    color: #fff;
}

#header #topbar_mobile ul.navbar-nav .dropdown-menu > li > a {
    color: var(--hvp-grijs);
    text-transform: none;
    padding-left: 30px;
}

#header #topbar_mobile ul.navbar-nav.gsm-extra {
    border-top: 1px solid rgba(255, 255, 255, .18);
    margin-top: 0;
}

#header #topbar_mobile ul.navbar-nav.gsm-extra li a,
#header #topbar_mobile ul.navbar-nav.gsm-extra li a i {
    color: var(--hvp-grijs);
    font-size: 13px;
}

/* all.min.css kleurt elk element (*), dus ook de pijltjes: wit maken */
#header .caret,
#header #topbar_mobile ul.navbar-nav li a .caret {
    color: #fff;
}

/* Het filterformulier moet zijn groepen (col-xs-12 = float) omvatten; anders was het 0px hoog en
   lag het productrooster op gsm bovenop de opengeklapte filters (een tik opende dan niets). */
.col-filter #filter,
.col-filter #filter-gsm {
    display: flow-root;
}

.col-filter #filter-gsm.collapse:not(.in) {
    display: none;
}

/* Filters: op desktop altijd open en geen knop; op kleine schermen achter de knop "Filters" */
@media (min-width: 768px) {
    .col-filter .filter-toggle {
        display: none;
    }

    .col-filter .filter-gsm.collapse {
        display: block !important;
        height: auto !important;
        visibility: visible;
    }
}

@media (max-width: 767px) {
    .col-filter .filtergroep {
        margin-bottom: 8px;
    }

    .col-filter .filtergroep > a {
        padding: 12px 14px;
    }

    /* dichtgeklapte groep: enkel de titel, zonder rand of witruimte eronder */
    .col-filter .filtergroep:has(> a.collapsed) {
        padding-bottom: 0;
    }

    .col-filter .filtergroep > a.collapsed {
        border-bottom: 0;
    }

    /* keuzes in twee kolommen */
    .col-filter .filtergroep ul.selection {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        margin-bottom: 6px;
    }

    .col-filter .filtergroep ul.selection li {
        min-width: 0;
    }

    .col-filter .filtergroep ul.selection label {
        word-break: break-word;
    }

    #filter-gsm {
        margin-bottom: 14px;
    }
}

/* Filters op gsm: knop die ze openklapt */
.filter-toggle {
    margin-bottom: 12px;
    padding: 12px;
}

.filter-toggle:not(.collapsed) {
    background: var(--hvp-blauw);
    color: #fff;
}

.filter-toggle:not(.collapsed) i {
    color: #fff;
}

@media (max-width: 767px) {
    #header #topbar > .container {
        gap: 16px;
    }


    /* Tegels: twee per rij, compacter (rij uitgelijnd met de filterknop) */
    #items {
        margin-left: -6px;
        margin-right: -6px;
    }

    .product-grid.col-xs-6,
    .col-xs-6 > .grid-item {
        padding-left: 6px;
        padding-right: 6px;
    }

    .product-grid.col-xs-6 .grid-item,
    .col-xs-6 > .grid-item {
        height: 250px;
        margin-bottom: 12px;
    }

    .col-xs-6 > .grid-item a,
    .product-grid.col-xs-6 .grid-item a {
        padding: 10px;
    }

    .col-xs-6 > .grid-item a .foto,
    .product-grid.col-xs-6 .grid-item a .foto {
        height: 130px;
    }

    .col-xs-6 > .grid-item a .titel,
    .product-grid.col-xs-6 .grid-item a .titel {
        font-size: 13px;
        letter-spacing: .3px;
        margin: 10px 0;
    }

    .product-grid.col-xs-6 .grid-item a .price {
        padding-right: 10px;
        font-size: 12px;
    }

    .product-grid.col-xs-6 .grid-item a .price strong {
        font-size: 13px;
    }

    .product-grid.col-xs-6 .ribbon {
        bottom: auto;
        top: 8px;
        right: 0;
        padding: 3px 8px;
        font-size: 11px;
    }

    .home-titel h1 {
        font-size: 22px;
        padding: 25px 0 18px;
    }

    .categorie-content .titel h1 {
        font-size: 24px;
    }
}

/* ---------- Levermethodes bij het afrekenen (App\Support\Levermethodes) ---------- */
#content .levermethode-uitleg {
    margin: 8px 0 12px;
    padding: 10px 12px;
    background: #f4f7fb;
    border-left: 3px solid #09549f;
    border-radius: 6px;
    color: #3a3a3a;
    font-size: 13px;
    line-height: 1.45;
}
.cart-totalen dt small,
.transport-factuur small {
    font-weight: normal;
    color: #6b6b6b;
}

/* ---------- Bedankpagina na het bestellen (ecommerce.bedankt) ---------- */
#bedankt { max-width: 1040px; padding-top: 28px; padding-bottom: 40px; }
.bedankt-held {
    background: #fff;
    border-radius: 12px;
    padding: 36px 28px 30px;
    text-align: center;
    margin-bottom: 20px;
    border-top: 4px solid #49b293;
}
.bedankt-vink {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e6f5ef;
    color: #49b293;
    display: flex;
    align-items: center;
    justify-content: center;
}
#bedankt .bedankt-held h1 {
    color: #09549f;
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: none;
}
.bedankt-lead { font-size: 16px; color: #3a3a3a; margin: 0 auto; max-width: 620px; line-height: 1.55; }
.bedankt-raster {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    align-items: start;
}
.bedankt-kaart { background: #fff; border-radius: 12px; padding: 22px 24px; }
#bedankt .bedankt-kaart h2 {
    font-size: 18px;
    font-weight: 700;
    color: #09549f;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #09549f;
    text-transform: none;
}
.bedankt-stappen ol { list-style: none; margin: 0; padding: 0; }
.bedankt-stappen li { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.bedankt-stappen li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 34px;
    bottom: 4px;
    width: 2px;
    background: #e8ecf2;
}
.bedankt-stap-nr {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 50%;
    background: #e8ecf2;
    color: #09549f;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bedankt-stappen li.klaar .bedankt-stap-nr { background: #49b293; color: #fff; }
.bedankt-stappen strong { display: block; color: #053a72; font-size: 15px; margin: 5px 0 3px; }
.bedankt-stappen p { margin: 0 0 4px; color: #3a3a3a; line-height: 1.5; }
.bedankt-noot {
    background: #f4f7fb;
    border-left: 3px solid #09549f;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    margin-top: 6px !important;
}
.bedankt-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0 0 14px; }
.bedankt-meta dt { font-weight: normal; color: #6b6b6b; }
.bedankt-meta dd { margin: 0; color: #3a3a3a; font-weight: 600; text-align: right; }
.bedankt-lijnen { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e8ecf2; }
.bedankt-lijnen li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #e8ecf2;
    align-items: baseline;
}
.bedankt-aantal { color: #6b6b6b; white-space: nowrap; }
.bedankt-naam { color: #3a3a3a; font-weight: 600; }
.bedankt-naam small { display: block; font-weight: normal; color: #6b6b6b; font-size: 12px; }
.bedankt-prijs { white-space: nowrap; }
.bedankt-totalen { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 12px 0 0; }
.bedankt-totalen dt { font-weight: normal; color: #6b6b6b; text-align: right; }
.bedankt-totalen dd { margin: 0; text-align: right; }
.bedankt-totalen .bedankt-totaal {
    color: #09549f;
    font-weight: 700;
    font-size: 17px;
    border-top: 2px solid #09549f;
    padding-top: 8px;
    margin-top: 4px;
}
.bedankt-acties { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0 12px; }
.bedankt-hulp { text-align: center; color: #6b6b6b; margin: 0; }
.bedankt-hulp a { color: #09549f; font-weight: 600; }
@media (max-width: 767px) {
    #bedankt { padding-top: 16px; }
    .bedankt-held { padding: 26px 18px 22px; }
    #bedankt .bedankt-held h1 { font-size: 24px; }
    .bedankt-lead { font-size: 15px; }
    .bedankt-raster { grid-template-columns: 1fr; }
    .bedankt-kaart { padding: 18px 16px; }
    .bedankt-acties .btn { flex: 1 1 100%; }
}
#bedankt .bedankt-vink svg { stroke: #49b293; color: #49b293; }

/* ---------- Mijn account (ecommerce.account.kader + pagina's) ---------- */
#mijn-account { padding-top: 24px; padding-bottom: 40px; }
#mijn-account h1.pagina-titel { text-transform: none; letter-spacing: 0; margin: 0; }
.account-raster { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.account-inhoud { min-width: 0; }
.account-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.account-terug { color: #09549f; font-weight: 600; }

.account-nav { background: #fff; border-radius: 12px; padding: 16px 12px; position: sticky; top: 16px; }
.account-nav-klant { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; margin-bottom: 8px; border-bottom: 1px solid #e8ecf2; }
.account-nav-avatar {
    flex: 0 0 40px; height: 40px; border-radius: 50%;
    background: #09549f; color: #fff; font-weight: 700; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.account-nav-klant strong { display: block; color: #053a72; line-height: 1.3; }
.account-nav-klant div span { display: block; color: #6b6b6b; font-size: 13px; line-height: 1.3; }
#mijn-account-navigatie { list-style: none; margin: 0; padding: 0; }
#mijn-account-navigatie li a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px; border-radius: 8px;
    color: #3a3a3a; font-size: 15px; text-transform: none; letter-spacing: 0;
}
#mijn-account-navigatie li a svg { color: #09549f; flex: 0 0 18px; }
#mijn-account-navigatie li a:hover,
#mijn-account-navigatie li a:focus { background: #f4f7fb; color: #09549f; text-decoration: none; }
#mijn-account-navigatie li a.actief { background: #e8ecf2; color: #09549f; font-weight: 700; }
#mijn-account-navigatie li.account-nav-uit { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e8ecf2; }
#mijn-account-navigatie li.account-nav-uit a, #mijn-account-navigatie li.account-nav-uit a svg { color: #6b6b6b; }

.account-kaart { background: #fff; border-radius: 12px; padding: 20px 22px; margin-bottom: 20px; }
#mijn-account .account-kaart h2 {
    font-size: 17px; font-weight: 700; color: #09549f; text-transform: none;
    margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #09549f;
}
.account-intro { color: #6b6b6b; margin: 0 0 14px; }
.account-label { display: block; color: #6b6b6b; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.account-sub { display: block; color: #6b6b6b; font-size: 13px; margin-top: 4px; line-height: 1.45; }
.rechts { text-align: right; }
.account-bedrag { font-weight: 700; color: #3a3a3a; white-space: nowrap; }
.account-melding { border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.account-melding-ok { background: #e6f5ef; border-left: 3px solid #49b293; color: #24614f; }
.account-melding-fout { background: #fdecec; border-left: 3px solid #d64545; color: #8a2424; }
.account-leeg { text-align: center; padding: 34px 22px; }
.account-leeg p { margin: 0 0 8px; }
.account-leeg .btn { margin-top: 10px; }

/* Bestellingen */
.account-tabel { padding: 6px 0; }
.account-tabel-kop, .account-tabel-rij {
    display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr 1fr 24px;
    gap: 12px; align-items: center; padding: 12px 22px;
}
.account-tabel-kop { color: #09549f; font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #09549f; margin: 0 22px; padding: 12px 0; }
.account-tabel-rij { color: #3a3a3a; border-bottom: 1px solid #e8ecf2; }
.account-tabel-rij:last-child { border-bottom: 0; }
.account-tabel-rij:hover, .account-tabel-rij:focus { background: #f4f7fb; color: #3a3a3a; text-decoration: none; }
.account-order-nr { color: #09549f; font-weight: 700; }
.account-pijl { color: #09549f; display: flex; }
.account-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e8ecf2; color: #053a72; font-size: 12px; font-weight: 600; }
.account-badge-ok { background: #e6f5ef; color: #2c7a63; }

/* Orderdetail */
.account-order-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.account-order-info strong { color: #3a3a3a; }
.account-lijn { display: grid; grid-template-columns: 64px 1fr 70px 100px 100px; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid #e8ecf2; }
.account-lijn-kop { color: #09549f; font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: 2px solid #09549f; padding-top: 0; }
.account-lijn-foto { width: 64px; height: 64px; border: 1px solid #e8ecf2; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.account-lijn-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.account-lijn-naam a { color: #09549f; font-weight: 700; }
.account-lijn-naam small { display: block; color: #6b6b6b; }
.account-samenstelling { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: #6b6b6b; }
.account-totalen { display: grid; grid-template-columns: 1fr 120px; gap: 6px 14px; margin: 14px 0 0; }
.account-totalen dt { font-weight: normal; color: #6b6b6b; text-align: right; }
.account-totalen dd { margin: 0; text-align: right; }
.account-totalen .account-totaal { color: #09549f; font-weight: 700; font-size: 17px; border-top: 2px solid #09549f; padding-top: 8px; margin-top: 4px; }

/* Verlanglijst */
.account-producten { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin-bottom: 20px; }
.account-product { background: #fff; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; }
.account-product-link { display: flex; flex-direction: column; flex: 1; color: #3a3a3a; }
.account-product-link:hover, .account-product-link:focus { text-decoration: none; color: #3a3a3a; }
.account-product-foto { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; overflow: hidden; }
.account-product-foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.account-product-naam { color: #09549f; font-weight: 700; line-height: 1.35; }
.account-product-link:hover .account-product-naam { text-decoration: underline; }
.account-product-code { color: #6b6b6b; font-size: 12px; margin-top: 2px; }
.account-product-prijs { margin-top: 8px; font-weight: 700; }
.account-product-prijs small { font-weight: normal; color: #6b6b6b; }
.account-product-acties { display: flex; gap: 8px; margin-top: 12px; }
.account-product-acties .btn { flex: 1; }
.account-wis {
    flex: 0 0 40px; border: 1px solid #d5dce6; background: #fff; border-radius: 6px;
    color: #6b6b6b; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.account-wis:hover, .account-wis:focus { color: #d64545; border-color: #d64545; }

/* Leveradressen */
.account-adressen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.account-adres { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0; }
.account-adres strong { color: #053a72; margin-bottom: 4px; }
.account-adressen + .account-intro { margin-top: 18px; }

/* Profiel */
.account-profiel { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.account-profiel .account-kaart { margin-bottom: 0; }
.account-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.account-veld { display: flex; flex-direction: column; }
.account-veld-breed { grid-column: 1 / -1; }
#mijn-account .account-veld label { font-weight: 600; color: #3a3a3a; font-size: 13px; margin-bottom: 4px; text-transform: none; }
#mijn-account .account-veld .form-control.error { border-color: #d64545; }
.account-vinkjes { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e8ecf2; }
.account-vinkjes .checkbox label { text-transform: none; }
.account-login { margin: 0 0 12px; }
.account-opslaan { display: flex; justify-content: flex-end; margin-top: 20px; }

@media (max-width: 991px) {
    .account-raster { grid-template-columns: 1fr; gap: 16px; }
    .account-nav { position: static; padding: 10px; }
    .account-nav-klant { display: none; }
    #mijn-account-navigatie { display: flex; flex-wrap: wrap; gap: 6px; }
    #mijn-account-navigatie li a { padding: 8px 12px; font-size: 14px; background: #f4f7fb; }
    #mijn-account-navigatie li.account-nav-uit { margin: 0; padding: 0; border: 0; }
    .account-profiel { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    #mijn-account { padding-top: 14px; }
    .account-kaart { padding: 16px; }
    .account-tabel-kop { display: none; }
    .account-tabel-rij { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; }
    .account-tabel-rij > span:nth-child(2) { grid-column: 1; grid-row: 2; color: #6b6b6b; font-size: 13px; }
    .account-tabel-rij > span:nth-child(3) { grid-column: 1; grid-row: 3; color: #6b6b6b; font-size: 13px; }
    .account-tabel-rij > span:nth-child(4) { grid-column: 2; grid-row: 1; }
    .account-tabel-rij > span:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; text-align: right; }
    .account-tabel-rij .account-pijl { display: none; }
    .account-order-info { grid-template-columns: 1fr; gap: 10px; }
    .account-lijn { grid-template-columns: 56px 1fr auto; gap: 4px 12px; }
    .account-lijn-kop { display: none; }
    .account-lijn-foto { width: 56px; height: 56px; grid-row: 1 / span 3; }
    .account-lijn > span[data-label] { grid-column: 3; text-align: right; font-size: 13px; }
    .account-lijn > span[data-label]::before { content: attr(data-label) " "; color: #6b6b6b; font-weight: normal; }
    .account-lijn-naam { grid-column: 2; grid-row: 1 / span 3; }
    .account-totalen { grid-template-columns: 1fr auto; }
    .account-producten { grid-template-columns: 1fr 1fr; gap: 12px; }
    .account-product { padding: 10px; }
    .account-velden { grid-template-columns: 1fr; }
    .account-opslaan .btn { width: 100%; }
}
/* Oude regels uit all.min.css (#mijn-account: 13px, hoofdletters, gecentreerde h1, * {color}) neutraliseren */
#mijn-account { font-size: 14px; }
#mijn-account h1.pagina-titel { text-align: left; letter-spacing: 0; font-size: 28px; text-transform: none; margin: 0; }
#mijn-account #mijn-account-navigatie { margin-top: 0; padding-left: 0; }
#mijn-account #mijn-account-navigatie li a { text-transform: none; font-size: 15px; color: #3a3a3a; }
#mijn-account #mijn-account-navigatie li a.actief { color: #09549f; }
#mijn-account #mijn-account-navigatie li.account-nav-uit a { color: #6b6b6b; }
#mijn-account .account-nav-avatar { color: #fff; font-size: 17px; line-height: 1; font-weight: 700; }
#mijn-account .account-tabel-kop > span,
#mijn-account .account-lijn-kop > span { color: #09549f; }
#mijn-account .account-tabel-rij > span { color: #3a3a3a; }
#mijn-account .account-tabel-rij > span.account-order-nr,
#mijn-account .account-pijl { color: #09549f; }
#mijn-account .account-badge { color: #053a72; }
#mijn-account .account-badge-ok { color: #2c7a63; }
#mijn-account .account-label,
#mijn-account .account-sub,
#mijn-account .account-intro,
#mijn-account .account-totalen dt,
#mijn-account .account-product-code,
#mijn-account .account-lijn-naam small { color: #6b6b6b; }
#mijn-account .account-product-naam,
#mijn-account .account-lijn-naam a { color: #09549f; }
#mijn-account .account-totalen .account-totaal { color: #09549f; }
@media (max-width: 767px) {
    #mijn-account .account-tabel-rij > span:nth-child(2),
    #mijn-account .account-tabel-rij > span:nth-child(3) { color: #6b6b6b; }
}

/* "Toon meer / Toon minder" onder een filtergroep (filter-new): knop in de huisstijl, zonder
   de oude "V"-chevron uit all.min.css (.filtergroep a:after) */
.filtergroep .toon-meer-blok { padding: 2px 0 6px; }
.filtergroep .toon-meer-blok button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--hvp-blauw);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    cursor: pointer;
}
.filtergroep .toon-meer-blok button.hidden { display: none; }
.filtergroep .toon-meer-blok button:hover,
.filtergroep .toon-meer-blok button:focus { color: var(--hvp-donkerblauw); text-decoration: underline; }
.filtergroep .toon-meer-blok button svg { flex: 0 0 14px; }