/*
Theme Name: B2BTCG.nl
Theme URI: https://lefcreative.nl/
Author: Lef Creative
Author URI: https://lefcreative.nl/
Description: Child thema van het thema Leflite
Version: 1.0.0
License: /
License URI: /
Template: leflite
*/

/* FOOTER */
footer img {
    width: auto;
}

/* =====================================================================
   HEADER — 1:1 met het Claude Design (B2B). Site-breed (header staat op
   elke pagina). Tokens uit custom-leftheme.json waar mogelijk.
   Icon-aanpak overgenomen van jmwoods leflite-child.
   ===================================================================== */

/* Gedempte lichte tekstkleur op donkere vlakken (topbar-link, hero-intro,
   CTA-band) — in het ontwerp overal #B9CBDA. Als CSS-var voor consistentie. */
:root {
    --muted-light: #B9CBDA;
    --card-line: #E3EAF0; /* subtiele kaartrand uit het ontwerp */
    --field-line: #D5DEE6; /* lichte rand op formuliervelden (ontwerp) */
    --field-line-muted: #93A5B4; /* gedempte cijfers/labels in het filter (ontwerp) */
}

/* --- Topbar (bg-secondary) ------------------------------------------ */
/* USP-icons in geel + iets groter dan de tekst, zoals het ontwerp. */
.topbar .topbar-usps .icon {
    color: var(--yellow);
    font-size: 15px;
}

/* Topbar-tekst compacter (ontwerp: 13px). */
.topbar .topbar-usps,
.topbar #topbar-menu a {
    font-size: 13px;
    line-height: 1.2;
}

/* Rechter topbar-link "Vragen? Neem contact op": gedempt licht, 600,
   geen underline, met pijl erachter (ontwerp: #B9CBDA). */
.topbar #topbar-menu a {
    color: var(--muted-light);
    font-weight: 600;
    text-decoration: none;
}
.topbar #topbar-menu a:hover {
    color: var(--white);
}
.topbar #topbar-menu .menu-item > a::after {
    content: "\2192"; /* → */
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
}

/* --- Main bar: logo | search (midden) | account + cart (rechts) ----- */
.navigation-inner-main {
    justify-content: flex-start;
    gap: 36px;
}
.navigation-inner-main .nav-shortcode {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.navigation-inner-main .nav-shortcode .asl_w_container {
    width: 100%;
    max-width: 620px;
}
.navigation-inner-main .nav-holder-primary-1 {
    flex: 0 0 auto;
}

/* --- Search (Ajax Search Lite) → platte grijze pill, grijze magnifier
   links (ASL levert eigen CSS, vandaar !important). --------------------*/
header .asl_w_container .asl_w div.probox {
    height: 48px !important;
    background: var(--gray) !important;
    border: 1px solid #D5DEE6 !important;
    border-radius: var(--form-elements-border-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}
header .asl_w_container .asl_w div.probox .promagnifier {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 2px 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
header .asl_w_container .asl_w div.probox .promagnifier .innericon,
header .asl_w_container .asl_w div.probox .promagnifier svg,
header .asl_w_container .asl_w div.probox .promagnifier svg path,
header .asl_w_container .asl_w div.probox .promagnifier svg use,
header .asl_w_container .asl_w div.probox .promagnifier i {
    color: var(--darkgray) !important;
    fill: var(--darkgray) !important;
}
header .asl_w_container .asl_w .proinput input.orig,
header .asl_w_container .asl_w .proinput input.autocomplete {
    padding-left: 10px !important;
    font-size: 15px !important;
    color: var(--black) !important;
    background: transparent !important;
}

/* --- Account + cart → icon met klein label eronder ------------------ */
.navigation-inner-main .main-nav-menu > li > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1;
    color: var(--black);
    text-decoration: none;
}
.navigation-inner-main .main-nav-menu > li > a .icon-user,
.navigation-inner-main .main-nav-menu > li > a .icon-cart-shopping {
    font-size: 19px;
    color: var(--black);
}
.navigation-inner-main .main-nav-menu > li > a::after {
    font: 600 11px/1 var(--heading-font), sans-serif;
    color: var(--black);
    white-space: nowrap;
}
body:not(.logged-in) .navigation-inner-main .main-nav-menu > li:has(.icon-user) > a::after {
    content: "Inloggen";
}
body.logged-in .navigation-inner-main .main-nav-menu > li:has(.icon-user) > a::after {
    content: "Mijn account";
}
.navigation-inner-main .main-nav-menu > li:has(.icon-cart-shopping) > a::after {
    content: "Winkelwagen";
}

/* Cart-count badge → rode bubble i.p.v. de groene theme-default (ontwerp).
   Parent-regel .cart-trigger i span.cart-items-count.count is specifiek en
   zet de geometrie; wij overschrijven alleen kleur + font, en verbergen 'm
   als de wagen leeg is. */
.navigation-inner-main .cart-trigger i span.cart-items-count.count {
    background-color: var(--tertiary);
    color: var(--tertiary-content);
    font-family: var(--heading-font), sans-serif;
    font-weight: 700;
}
.navigation-inner-main .cart-trigger i span.cart-items-count.count.empty {
    display: none;
}

/* Mobiel: search verborgen, logo flext — kleinere gap zodat de icons
   netjes bij de hamburger blijven staan. */
@media only screen and (max-width: 991px) {
    .navigation-inner-main {
        gap: 4px;
    }
}

/* --- Blauwe navigatiebalk (under-menu, bg-primary) ------------------ */
/* Nav-items links, CTA-knop "Word B2B klant" naar rechts (zoals ontwerp
   + jmwoods). De hele nav-keten vol-breed maken en de menu-ul niet laten
   wrappen, zodat margin-left:auto op de button-li 'm netjes rechts pint. */
.under-menu .nav-holder-under-menu,
.under-menu .main-navigation-under,
.under-menu .nav-holder-inner,
.under-menu #primary-menu-under {
    flex: 1 1 auto;
    width: 100%;
}
.under-menu .main-nav-menu {
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
}
.under-menu .main-nav-menu > li.menu-item-has-button {
    margin-left: auto;
}

/* =====================================================================
   HERO (home, .hero-home) + PAGE-HEADER — 1:1 met het Claude Design.
   NB: de sectie-class is .hero-home (niet .home-hero).
   ===================================================================== */

/* Titel iets dikker: het ontwerp gebruikt h1 = 800 (h2/h3 blijven 700, dus
   niet globaal via --h-font-weight maar gericht op de grote koppen). */
.hero-home h1,
.page-header h1 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* Intro-paragraaf groter (ontwerp 18px) — voor hero én page-header.
   De prijzen-melding (met slot-icoon) sluiten we uit. */
/* Sectie-paragrafen: groter + gedempt (ontwerp). Geldt overal, behalve binnen
   .no-demped-content (opt-out). Bewust lage specificiteit via :where() zodat de
   opt-out én de kaart-tekstregel (.card ... p) dit makkelijk overrulen. Op
   donkere secties wordt de gedempte tint de lichte variant. */
:where(.content-wrapper) p {
    font-size: 18px;
    line-height: 1.65;
    color: var(--darkgray);
}
:where(.bg-secondary .content-wrapper) p {
    color: var(--muted-light);
}
/* Opt-out: normale (niet-gedempte, niet-vergrote) tekst binnen .no-demped-content. */
.no-demped-content p {
    font-size: var(--p-size);
    line-height: var(--p-line-height);
    color: var(--black);
}

/* Icon-lijst layout (globaal): items onder elkaar met ruimte, icon naast
   tekst — meer tussenruimte tussen de items. */
.icons-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.icons-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
}
.icons-list .icon {
    margin: 0;
    font-size: 16px;
    color: var(--succes); /* groene check-icons globaal (ontwerp) */
}
/* Hero-specifiek: witte tekst op de donkere achtergrond. */
.hero-home .icons-list .li-content {
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

/* Buttons op groot formaat (ontwerp = btn-big 16px 32px / 17px). De blokken
   staan op btn-medium; hier scoped naar de big-tokens getild. */
.hero-home .buttons-holder .btn {
    padding: var(--btn-big-padding);
    font-size: var(--btn-big-font-size);
}
/* Transparante knop: subtiele witte rand (globaal, ontwerp). */
.btn.bg-transparent {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    color: var(--white);
}
.btn.bg-transparent:hover {
    border-color: var(--white);
}

/* Prijzen-melding: klein, gedempt, met slot-icoon (ontwerp #6E8395 13px). */
.hero-home .content-wrapper p:has(.icon-lock) {
    font-size: 13px;
    line-height: 1.5;
    color: #6E8395;
}
.hero-home .content-wrapper p .icon-lock {
    margin-right: 7px;
}

/* CTA-knop compacter, zoals het ontwerp (Archivo 600 14px, padding 9px 18px).
   De wrapper-<a> heeft eigen menu-padding (16px) die het rode vlak opblies —
   die neutraliseren we zodat de knop exact op de ontwerpmaat komt. */
.under-menu .main-nav-menu > li.menu-item-has-button > a {
    padding: 0;
}
.under-menu .menu-item-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    line-height: 1;
}

/* Nav-items in de blauwe balk: donkerblauwe hover (ontwerp #116BA1), knop uitgezonderd. */
#primary-menu-under .main-nav-menu > li:not(.menu-item-has-button):hover > a {
    background: var(--primary-darkened);
    color: var(--white);
}

/* =====================================================================
   SECTIES & KAARTEN — 1:1 met het Claude Design. Zoveel mogelijk globaal
   (op h6 / .card) zodat het site-breed consistent is.
   ===================================================================== */

/* Eyebrow: h6 globaal als het kleine uppercase label boven sectietitels. */
h6 {
    font-family: var(--heading-font), sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 8px;
}

/* "See all"-link rechts in een sectiekop (bijv. "Alle productgroepen"):
   platte primaire tekstlink met pijl i.p.v. een gevulde knop. */
.buttons-holder.alignment-right .btn.btn-small {
    padding: 0;
    background: transparent;
    color: var(--primary);
    font-family: var(--heading-font), sans-serif;
    font-weight: 600;
    font-size: 15px;
    gap: 7px;
}
.buttons-holder.alignment-right .btn.btn-small:hover {
    background: transparent;
    color: var(--primary-darkened);
}
.buttons-holder.alignment-right .btn.btn-small .icon {
    color: inherit;
    font-size: 12px;
}

/* Icoon in een kaart (globaal): afgeronde tegel met primaire tint (ontwerp). */
.card .icon-outer {
    width: 46px;
    height: 46px;
    border-radius: var(--general-border-radius);
    background: rgba(23, 135, 201, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 19px;
}
.card .icon-outer .icon {
    color: var(--primary);
    margin: 0;
    font-size: 19px; /* kleiner glyph in de 46px-tegel → ruimte eromheen (ontwerp) */
}

/* Kaart-teksten (globaal). */
.card h4 {
    font: 700 18px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
    margin: 0;
}
.card .content-wrapper p,
.card > p {
    font: 400 14px/1.6 var(--body-font), sans-serif;
    color: var(--darkgray);
    margin: 0;
}

/* Kaart-container met rand + radius (voor de kaarttypes die dat nodig hebben —
   niet blind op elke .card, i.v.m. product-loopkaarten). */
.card.col-card,
.card-taxonomy-term {
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}

/* "Voor wie"-kaart (.col-card): kolom-layout met ruimte + padding (ontwerp). */
.card.col-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 22px;
}

/* Stappen ("Zo word je B2B klant"): nummer-badge naast de titel, tekst eronder.
   Alleen op content-wrappers mét een .step, zodat andere kaarten ongemoeid blijven. */
.content-wrapper:has(.step) {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 14px;
    align-items: center;
}
.content-wrapper:has(.step) .step {
    grid-row: 1;
    grid-column: 1;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--secondary-content);
    font: 700 17px/1 var(--heading-font), sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-wrapper:has(.step) h4 {
    grid-row: 1;
    grid-column: 2;
}
.content-wrapper:has(.step) p {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 14px;
}

/* Categorie-kaart (.card-taxonomy-term): beeld 16:9, naam + subtitel + pijl. */
.card-taxonomy-term .image-outer {
    margin: 0;
    aspect-ratio: 16 / 9;
    background: var(--gray);
}
.card-taxonomy-term .image-holder {
    position: relative;
    width: 100%;
    height: 100%;
}
.card-taxonomy-term .image-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-taxonomy-term .content-outer {
    padding: var(--card-content-padding);
}
.card-taxonomy-term .term-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-decoration: none !important;
}
.card-taxonomy-term .term-name {
    display: block;
    font: 700 18px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
}
.card-taxonomy-term .term-sub {
    display: block;
    margin-top: 4px;
    font: 400 13px/1.4 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.card-taxonomy-term .term-title .icon {
    flex: none;
    color: var(--primary);
    font-size: 14px;
}
.card-taxonomy-term:hover {
    border-color: var(--primary);
}

/* Lijst-variant met gele icons (overschrijft de globale groene check-kleur). */
.yellow-icons i.icon {
    color: var(--yellow);
}

/* =====================================================================
   STAFFEL VOORBEELD block (acf/staffel-example) — 1:1 met het ontwerp.
   ===================================================================== */
.staffel-example {
    background: var(--gray);
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 28px;
}
.staffel-example__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.staffel-example__title {
    font: 700 16px/1.3 var(--heading-font), sans-serif;
    color: var(--black);
}
.staffel-example__badge {
    flex: none;
    font: 600 11px/1 var(--heading-font), sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(23, 135, 201, 0.1);
    padding: 7px 11px;
    border-radius: 100px;
}
.staffel-example__tiers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.staffel-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--btn-border-radius);
    padding: 13px 16px;
}
.staffel-tier.is-best {
    background: rgba(31, 138, 91, 0.07);
    border-color: rgba(31, 138, 91, 0.35);
}
.staffel-tier__range {
    font: 600 14px/1 var(--body-font), sans-serif;
    color: var(--black);
}
.staffel-tier__value {
    display: flex;
    align-items: center;
    gap: 10px;
}
.staffel-tier__price {
    font: 700 16px/1 var(--heading-font), sans-serif;
    color: var(--black);
}
.staffel-tier__note {
    font: 600 12px/1 var(--body-font), sans-serif;
    color: var(--succes);
}
.staffel-example__note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    font: 400 13px/1.5 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.staffel-example__note .icon {
    color: var(--primary);
    margin-top: 2px;
}

/* =====================================================================
   PAGE-HEADER hero verticale ruimte (inner pages) — ontwerp.
   ===================================================================== */
.page-header {
    padding: 50px 0;
}

/* =====================================================================
   BREADCRUMBS in de donkere page-header hero (inner pages) — ontwerp.
   ===================================================================== */
.page-header #breadcrumbs {
    display: inline-block;
    margin-bottom: 18px;
    font: 500 13px/1 var(--body-font), sans-serif;
    color: #6E8395;
}
.page-header #breadcrumbs a {
    color: #8FA3B5;
    text-decoration: none !important;
}
.page-header #breadcrumbs a:hover {
    color: #C4D2DE;
}
.page-header #breadcrumbs .icon-chevron-right {
    font-size: 9px;
    margin: 0 7px;
    color: #6E8395;
}
.page-header #breadcrumbs .breadcrumb_last {
    color: #C4D2DE;
}

/* =====================================================================
   ASSORTIMENT KAARTEN block (acf/assortiment-cards) — 1:1 met het ontwerp.
   ===================================================================== */
/* De Bootstrap-grid (.row/.col-lg-*) levert de kolommen; hier alleen verticale
   ruimte tussen rijen + gelijke kaarthoogte per rij. */
.assortiment-cards [class*="col-lg-"] {
    margin-bottom: 22px;
}
.card-category {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease;
}
.card-category:hover {
    border-color: var(--primary);
}
.card-category__image {
    flex: none;
    width: 100%;
    height: 200px; /* vaste hoogte → alle beelden gegarandeerd even hoog */
    background: var(--gray);
}
.card-category__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-category__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    flex: 1;
}
.card-category__name {
    display: block;
    font: 700 21px/1.15 var(--heading-font), sans-serif;
    color: var(--black);
    text-decoration: none !important;
}
.card-category__name:hover {
    color: var(--black);
}
.card-category__intro {
    margin: 0;
    flex: 1;
    font: 400 14px/1.6 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.card-category__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}
.card-category__pills .pill {
    font: 600 12px/1 var(--body-font), sans-serif;
    color: var(--primary);
    background: rgba(23, 135, 201, 0.09);
    padding: 7px 11px;
    border-radius: 100px;
}
/* Uitgelogd: gedempte melding met slot-icoon + bovenrand. */
.card-category__locked {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--card-line);
    font: 600 13px/1 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.card-category__locked .icon-lock {
    color: var(--yellow);
}
/* Ingelogd: rode knop "Bekijk assortiment" (geen underline). */
.card-category__cta {
    align-self: flex-start;
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--btn-border-radius);
    background: var(--tertiary);
    color: var(--tertiary-content) !important;
    font: 600 14px/1 var(--heading-font), sans-serif;
    text-decoration: none !important;
    transition: background-color .15s ease;
}
.card-category__cta,
.card-category__cta .icon {
    color: var(--tertiary-content) !important;
}
.card-category__cta .icon {
    font-size: 13px;
}
.card-category__cta:hover {
    background: var(--tertiary-darkened);
}

/* =====================================================================
   SHOP / PRODUCTOVERZICHT (archive-product) — 1:1 met het Claude Design
   (Shop.dc.html). We stylen het bestaande leflite filter-widgetsysteem
   (.archive-filter > .filter-item) + de nieuwe shop-toolbar. De checkboxen
   zijn al globaal primair gestyled door het parent thema, dus die laten we
   met rust; hier vooral kaarten, koppen, veldranden en de reset-knop.
   ===================================================================== */

section.products {
    background-color: var(--gray);
}

/* NB SPECIFICITEIT: de filter-styling van het parent thema laadt uit een
   latere webpack-chunk. Bij een gelijke specificiteit wint dáárdoor het thema
   (bron-volgorde), niet deze child-CSS — vandaar de `.lef-webshop`-prefix (die
   class staat op de body van elke webshop-pagina). Zo out-specificeren we de
   thema-regels betrouwbaar. Aanpak overgenomen van jmwoods leflite-child. */

/* --- Filterkaarten: wit met subtiele rand i.p.v. grijs-op-grijs -------- */
.lef-webshop .archive-filter .filter-item {
    background: var(--white);
    border: 1px solid var(--card-line);
    /* padding (--general-padding) + radius (--general-border-radius) komen al
       van het parent thema en matchen het ontwerp (20px / 8px). */
}

/* Filterkop: klein uppercase Archivo-label (ontwerp). */
.lef-webshop .archive-filter .filter-item .filter-title h4 {
    font: 700 13px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--black);
}

/* Op desktop staan de filters altijd open — het ontwerp toont geen
   inklap-chevron. De collapse blijft wel bestaan op mobiel. */
@media only screen and (min-width: 992px) {
    .lef-webshop .archive-filter .filter-item .filter-title {
        cursor: default;
    }
    .lef-webshop .archive-filter .filter-item .open-switcher {
        display: none;
    }
}

/* Checkbox-/radioregels: 14px/500, ruimte tussen vinkje en label (ontwerp).
   `.filter-item` staat er bewust in zodat we de thema-regel
   `.filter-item .filter-elements li label` (latere chunk) out-specificeren. */
.lef-webshop .archive-filter .filter-item .filter-elements li label {
    font: 500 14px/1.3 var(--body-font), sans-serif;
    color: var(--black);
    gap: 10px;
    margin-bottom: 6px;
}

/* Telling naar rechts (ontwerp). Het leflite-widget rendert de telling als
   platte tekst "(4)" IN de span; filter-count.js splitst dat in een los
   <span class="filter-count">, dat we hier rechts uitlijnen. */
.lef-webshop .archive-filter .filter-item .filter-elements li label > span {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.lef-webshop .archive-filter .filter-count {
    color: var(--field-line-muted);
    font: 600 12px/1 var(--body-font), sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Tekstvelden (zoek, prijs, sorteer): lichte rand + primaire focus-rand
   (parent zet standaard een donkere rand — hier de ontwerp-tint eroverheen).
   NB: checkbox/radio bewust uitgesloten — die houden hun primaire vinkje-stijl
   van het parent thema. */
.lef-webshop .archive-filter .filter-item input:not([type="checkbox"]):not([type="radio"]),
.lef-webshop .archive-filter .filter-item select {
    border-color: var(--field-line);
    transition: border-color .15s ease;
}
.lef-webshop .archive-filter .filter-item input:not([type="checkbox"]):not([type="radio"]):focus,
.lef-webshop .archive-filter .filter-item select:focus {
    border-color: var(--primary);
}

/* Zoekveld: grijze vulling + magnifier-icoon links (ontwerp). Het leflite
   zoek-widget rendert alleen een kaal <input>, dus het icoon komt als
   inline-SVG achtergrond (geen extra markup / font-afhankelijkheid nodig). */
.lef-webshop .archive-filter .filter-item.search-filter .form input {
    background-color: var(--gray);
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2358697A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 13px center;
    background-size: 15px 15px;
}

/* Prijsvelden dichter bij elkaar (ontwerp: smalle gap met "–" ertussen). */
.lef-webshop .archive-filter .filter-item .price-slider-values {
    gap: 10px;
}

/* Reset: outline-knop (ontwerp) i.p.v. platte tekstlink. */
.lef-webshop .archive-filter .reset-filter-holder {
    margin-top: 4px;
}
.lef-webshop .archive-filter .reset-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 12px 18px;
    border: 1.5px solid var(--primary);
    border-radius: var(--btn-border-radius);
    background: transparent;
    color: var(--primary);
    font: 600 14px/1 var(--heading-font), sans-serif;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.lef-webshop .archive-filter .reset-filter::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.lef-webshop .archive-filter .reset-filter:hover {
    background: var(--primary);
    color: var(--primary-content);
}

/* --- Shop-toolbar: aantal producten + sorteer-dropdown (ontwerp) ------- */
/* Rechts uitgelijnd bovenaan de productkolom. Zit binnen de AJAX-loop, dus
   de count loopt live mee bij filteren. */
.products .shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.products .shop-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
}
.products .shop-toolbar__count {
    font: 500 14px/1 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.products .shop-toolbar__sort {
    width: auto;
    padding: 10px 14px;
    border: 1px solid var(--field-line);
    border-radius: var(--form-elements-border-radius);
    background: var(--white);
    font: 600 14px/1 var(--body-font), sans-serif;
    color: var(--black);
    cursor: pointer;
    transition: border-color .15s ease;
}
.products .shop-toolbar__sort:focus {
    outline: 0;
    border-color: var(--primary);
}

/* =====================================================================
   SHOP-CTA — notice/call-to-action tussen de producten in de B2B-shoplijst
   (Shop.dc.html). Instelbaar via TCG Options. Volle-breedte rij (col-12)
   binnen de productlijst.
   ===================================================================== */
.shop-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(23, 135, 201, .07); /* primary tint, zoals ontwerp */
    border: 1px solid rgba(23, 135, 201, .25);
    border-radius: var(--general-radius, 8px);
    padding: 16px 18px;
}
.shop-cta__icon {
    flex: none;
    font-size: 16px;
    color: var(--primary);
}
.shop-cta__text {
    font: 400 14px/1.55 var(--body-font), sans-serif;
    color: var(--black);
}
.shop-cta__btn {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: var(--btn-radius, 6px);
    background: var(--primary);
    color: var(--white);
    font: 600 14px/1 var(--heading-font), sans-serif;
    text-decoration: none;
    transition: background-color .15s ease;
}
.shop-cta__btn:hover {
    background: var(--primary-hover, #116BA1);
    color: var(--white);
}
@media only screen and (max-width: 575px) {
    .shop-cta {
        flex-wrap: wrap;
    }
    .shop-cta__btn {
        margin-left: 0;
    }
}

/* =====================================================================
   B2B PRODUCTKAARTEN (lef-b2b-shop plugin) — SITE-STYLING.
   De plugin levert de layout/positionering; hier de kleuren, typografie,
   randen en states, uitsluitend met lef JSON-variabelen (custom-leftheme.json).
   1:1 met het Claude Design (Shop.dc.html — compacte lijstweergave).
   ===================================================================== */

/* Meldingsbalk boven de hero (shop/product). Tints/tekst afgeleid van de lef
   tokens via color-mix, zodat er geen losse hexwaarden nodig zijn. */
.b2b-notice {
    font: 500 13px/1.4 var(--body-font), sans-serif;
}
.b2b-notice strong {
    font-weight: 700;
}
.b2b-notice--in {
    background: color-mix(in srgb, var(--succes) 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--succes) 25%, transparent);
    color: color-mix(in srgb, var(--succes) 78%, black);
}
.b2b-notice--out {
    background: color-mix(in srgb, var(--yellow) 14%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
    color: color-mix(in srgb, var(--yellow) 55%, black);
}
.b2b-notice__login {
    border: 1.5px solid var(--primary);
    border-radius: var(--btn-border-radius);
    color: var(--primary);
    font: 600 13px/1 var(--heading-font), sans-serif;
    text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease;
}
.b2b-notice__login:hover {
    background: var(--primary);
    color: var(--primary-content);
}

/* Kaart */
.b2b-card {
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    transition: border-color .15s ease;
}
.b2b-card:hover {
    border-color: var(--primary);
}

/* Naam + meta */
.b2b-card__name {
    font: 700 15px/1.3 var(--heading-font), sans-serif;
    color: var(--black);
    text-decoration: none !important;
}
.b2b-card__name:hover {
    color: var(--primary);
}
.b2b-card__sku {
    font: 500 12px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.b2b-card__delivery {
    font: 500 12px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.b2b-card__delivery .icon {
    font-size: 11px;
    margin-right: 2px;
}
.b2b-card__preorder {
    font: 600 11px/1 var(--body-font), sans-serif;
    color: var(--primary);
    background: rgba(23, 135, 201, 0.1);
    padding: 5px 8px;
    border-radius: 100px;
}

/* Prijs + staffelhint */
.b2b-card__unit-price {
    font: 700 16px/1 var(--heading-font), sans-serif;
    color: var(--black);
}
.b2b-card__unit-suffix {
    font: 500 12px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.b2b-card__tier-hint-text {
    font: 500 12px/1.4 var(--body-font), sans-serif;
    color: var(--succes);
}
.b2b-card__tier-toggle {
    color: var(--field-line-muted);
    font-size: 12px;
    transition: color .15s ease;
}
.b2b-card__tier-toggle:hover {
    color: var(--primary);
}

/* Staffel-popover */
.b2b-card__tier-popover {
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    box-shadow: 0 14px 34px rgba(18, 41, 61, 0.16);
}
.b2b-card__tier-popover-head {
    font: 700 13px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
}
.b2b-card__tier-popover-head small {
    font: 500 11px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.b2b-card__tier-close {
    color: var(--field-line-muted);
    font-size: 13px;
}
.b2b-card__tier-close:hover {
    color: var(--black);
}
.b2b-card__tier-row {
    border-radius: var(--btn-border-radius);
    background: var(--gray);
    border: 1px solid transparent;
}
.b2b-card__tier-row.is-active {
    background: rgba(31, 138, 91, 0.08);
    border-color: rgba(31, 138, 91, 0.4);
}
.b2b-card__tier-range {
    font: 600 12px/1 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.b2b-card__tier-price {
    font: 700 13px/1 var(--heading-font), sans-serif;
    color: var(--black);
}
.b2b-card__tier-row.is-active .b2b-card__tier-price {
    color: var(--succes);
}
.b2b-card__tier-note {
    font: 400 11px/1.5 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}

/* Voorraadstatus — kleur per state via de kaart-modifier */
.b2b-card__stock {
    font: 600 13px/1.3 var(--body-font), sans-serif;
}
.b2b-card__stock .icon {
    font-size: 11px;
}
.b2b-card--in .b2b-card__stock       { color: var(--succes); }
.b2b-card--low .b2b-card__stock      { color: var(--warning); }
.b2b-card--preorder .b2b-card__stock { color: var(--primary); }
.b2b-card--soldout .b2b-card__stock  { color: var(--error); }
.b2b-card--soldout .b2b-card__media { opacity: .45; }

/* Aantal-stepper */
.b2b-qty {
    border: 1px solid var(--field-line);
    border-radius: var(--btn-border-radius);
}
.b2b-qty__btn {
    background: var(--gray);
    color: var(--black);
    font: 600 16px/1 var(--heading-font), sans-serif;
}
.b2b-qty__btn:hover {
    background: var(--card-line);
}
.b2b-qty__input {
    background: var(--white);
    color: var(--black);
    font: 600 15px/1 var(--body-font), sans-serif;
}

/* Regeltotaal */
.b2b-card__line-total {
    font: 700 16px/1 var(--heading-font), sans-serif;
    color: var(--black);
}
.b2b-card__vat {
    font: 600 11px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
/* Margeregeling: amber-tint i.p.v. gedempt grijs (ontwerp). */
.b2b-card__vat--marge {
    color: var(--warning);
}

/* Mobiel: btw in de prijsregel (naast p/st) + totaal ín de winkelwagen-knop (wit). */
.b2b-card__unit-vat {
    font: 600 12px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.b2b-card__unit-vat.b2b-card__vat--marge { color: var(--warning); }
.b2b-card__cart-btn .b2b-card__cart-total {
    font: 700 15px/1 var(--heading-font), sans-serif;
    color: var(--primary-content);
}

/* Winkelwagen-knop (icoon) */
.b2b-card__cart-btn {
    background: var(--primary);
    color: var(--primary-content) !important;
    border-radius: var(--btn-border-radius);
    font-size: 15px;
    text-decoration: none !important;
    transition: background-color .15s ease;
}
.b2b-card__cart-btn:hover {
    background: var(--primary-darkened);
    color: var(--primary-content) !important;
}
.b2b-card__cart-btn .icon {
    margin: 0;
    color: var(--primary-content);
}

/* Notificatie-knop (uitverkocht) */
.b2b-card__notify {
    padding: 11px 16px;
    border: none;
    border-radius: var(--btn-border-radius);
    background: var(--secondary);
    color: var(--secondary-content);
    font: 600 13px/1 var(--heading-font), sans-serif;
}
.b2b-card__notify:hover {
    background: var(--secondary-darkened, #0C1D2C);
}
.b2b-card__notify .icon {
    font-size: 12px;
}
.b2b-card__notify.is-subscribed,
.b2b-card__notify.is-subscribed:hover {
    background: var(--succes);
    color: #fff;
}
.b2b-card__notify.is-removable,
.b2b-card__notify.is-removable:hover {
    background: var(--error);
    color: #fff;
}
.b2b-card__notify.is-removable:hover {
    filter: brightness(.9);
}
.b2b-card__notify.is-error {
    background: var(--error);
    color: #fff;
}

/* Samenstellen-link (variabele producten) */
.b2b-card__configure {
    padding: 11px 16px;
    border-radius: var(--btn-border-radius);
    background: var(--succes);
    color: var(--white);
    font: 600 13px/1 var(--heading-font), sans-serif;
    text-decoration: none !important;
}
.b2b-card__configure .icon {
    font-size: 12px;
    color: var(--white);
}

/* Uitgelogd: "prijs na inloggen"-pill (amber slot, zelfde tint als de
   meldingsbalk) + inlogknop (primair blauw, zoals de winkelwagen-knop). */
.b2b-card__locked-price {
    font: 600 13px/1 var(--body-font), sans-serif;
    color: color-mix(in srgb, var(--yellow) 55%, black);
    background: color-mix(in srgb, var(--yellow) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
    padding: 9px 13px;
    border-radius: 100px;
}
.b2b-card__login {
    background: var(--primary);
    color: var(--primary-content) !important;
    border-radius: var(--btn-border-radius);
    font: 600 14px/1 var(--heading-font), sans-serif;
    text-decoration: none !important;
    transition: background-color .15s ease;
}
.b2b-card__login:hover {
    background: var(--primary-darkened);
    color: var(--primary-content) !important;
}

/* Slot-label dat de prijs vervangt voor gasten (productpagina, gerelateerde
   producten, widgets — overal waar WooCommerce get_price_html rendert). */
.b2b-price-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 14px/1 var(--body-font), sans-serif;
    color: color-mix(in srgb, var(--yellow) 55%, black);
}
.b2b-price-locked .icon {
    font-size: 12px;
}

/* =====================================================================
   FOOTER (bg-secondary, 4 widget-kolommen) — 1:1 met FooterB2B ontwerp.
   Inhoud komt uit de footer-widgets; adres/contact via [theme_option]
   shortcodes uit de Algemene opties.
   ===================================================================== */
#footer .widget {
    margin-bottom: 0;
}

/* Kolomkoppen (widget-title van nav-menu-widget én block-heading) —
   uppercase eyebrow, wit, zoals het ontwerp. */
#footer .widget-title {
    margin: 0 0 16px;
    font: 700 13px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--white);
}

/* Menu-links (Assortiment / Zakelijk) */
#footer .widget_nav_menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
#footer .widget_nav_menu .menu a {
    font: 400 14px/1.3 var(--body-font), sans-serif;
    color: #8FA3B5; /* gedempte link op navy (ontwerp) */
    text-decoration: none;
    transition: color .15s ease;
}
#footer .widget_nav_menu .menu a:hover {
    color: var(--white);
}

/* Kolom 1: merknaam + omschrijving + bedrijfsgegevens */
#footer .footer-brand {
    margin: 0 0 14px;
    font: 800 20px/1.1 var(--heading-font), sans-serif;
    color: var(--white);
}
#footer .widget_block p {
    font: 400 14px/1.7 var(--body-font), sans-serif;
    color: #8FA3B5;
}
#footer .footer-company,
#footer .footer-service {
    line-height: 1.9;
}
#footer .widget_block a {
    color: #C4D2DE;
    text-decoration: none;
    transition: color .15s ease;
}
#footer .widget_block a:hover {
    color: var(--white);
}

/* Socket (onderbalk): copyright + juridische links + credit — zelfde stijl
   als de footer-menu-links, maar horizontaal. Subtiele scheidingslijn t.o.v.
   de widget-kolommen erboven. */
#footer .socket {
    margin-top: 28px;
    padding: 20px 0;
    border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
}
#footer .socket .socket-half {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    font: 400 13px/1.4 var(--body-font), sans-serif;
    color: #8FA3B5;
}
#footer .socket #socket-menu-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}
#footer .socket #socket-menu-ul li {
    margin: 0;
}
#footer .socket a {
    font: 400 13px/1.4 var(--body-font), sans-serif;
    color: #8FA3B5;
    text-decoration: none !important;
    transition: color .15s ease;
}
#footer .socket a:hover {
    color: var(--white);
}

/* Mobiel/tablet: thema stapelt .socket-inner (kolom) op ≤991px — centreer de
   inhoud en geef de gestapelde helften wat lucht. */
@media only screen and (max-width: 991px) {
    #footer .socket .socket-inner {
        gap: 12px;
    }
    #footer .socket .socket-half,
    #footer .socket #socket-menu-ul {
        justify-content: center;
        text-align: center;
    }
}

/* =====================================================================
   PRE-FOOTER USP-balk (bg-primary + .yellow-icons, builder "Boven Footer")
   — 1:1 met FooterB2B ontwerp: witte Archivo-tekst + gele iconen 20px,
   icoon en tekst inline uitgelijnd. De iconen (icomoon) zijn al geel via
   .yellow-icons; hier zetten we grootte, tekstkleur en uitlijning goed.
   ===================================================================== */
.bg-primary.yellow-icons p {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font: 600 14px/1.3 var(--heading-font), sans-serif;
    color: var(--white);
}
.bg-primary.yellow-icons .icon {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--yellow);
}

/* =====================================================================
   SHOP "Meer laden"-knop (load_more paginatie) — 1:1 met het Claude Design
   (Shop.dc.html): gecentreerde rode knop met chevron-down icoon. Kleur
   (bg-tertiary) en label lopen via de filters in functions.php.
   ===================================================================== */
.products .page-load-more {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}
.products .page-load-more .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
}
.products .page-load-more .btn .icon {
    font-size: 13px;
    line-height: 1;
    /* Klik op het (decoratieve) icoon door laten vallen naar de <a>: de load-more
       AJAX-handler matcht op event.target ([data-load-more]) i.p.v. closest(), dus
       een klik op het icoon zou anders de link laten navigeren (volledige reload). */
    pointer-events: none;
}

/* =====================================================================
   GRAVITY FORMS (globaal) — veldstyling voor álle Gravity Forms, 1:1 met
   het Claude Design (Aanmelden.dc.html). Gescoped op .gform_wrapper zodat
   elk formulier (aanmelden, contact, popups, …) dezelfde look krijgt.
   ===================================================================== */

/* Sectiekoppen — uppercase blauwe eyebrow zoals het ontwerp; GF-divider weg. */
.gform_wrapper .gsection {
    border: 0;
    margin: 0;
    padding: 14px 0 0;
}
.gform_wrapper .gform_fields > .gsection:first-child {
    padding-top: 0;
}
.gform_wrapper .gsection_title {
    margin: 0;
    font: 700 13px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--primary);
}

/* Labels */
.gform_wrapper .gfield_label {
    margin-bottom: 6px;
    font: 600 13px/1.2 var(--body-font), sans-serif;
    color: var(--black);
}
.gform_wrapper .gfield_required { color: var(--tertiary); }

/* Inputs / selects / textarea */
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container input[type="tel"],
.gform_wrapper .ginput_container input[type="url"],
.gform_wrapper .ginput_container input[type="number"],
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--field-line);
    border-radius: 6px;
    font: 400 15px/1.5 var(--body-font), sans-serif;
    color: var(--black);
    background: #fff;
    outline: none;
}
.gform_wrapper .ginput_container textarea { resize: vertical; }
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container select:focus,
.gform_wrapper .ginput_container textarea:focus {
    border-color: var(--primary);
}

/* Checkboxes als pills — zet de CSS-class "b2b-interest-pills" op een
   checkboxveld (GF > Uiterlijk) om dit op elk formulier te gebruiken. */
.gform_wrapper .b2b-interest-pills .gfield_checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.gform_wrapper .b2b-interest-pills .gchoice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--field-line);
    border-radius: 100px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.gform_wrapper .b2b-interest-pills .gchoice:hover { border-color: var(--primary); }
.gform_wrapper .b2b-interest-pills .gchoice input {
    order: -1;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}
.gform_wrapper .b2b-interest-pills .gchoice label {
    margin: 0;
    font: 600 14px/1 var(--body-font), sans-serif;
    color: var(--black);
    cursor: pointer;
}

/* Consent (akkoord voorwaarden) — CSS-class "b2b-consent" op het consentveld. */
.gform_wrapper .b2b-consent > legend.gfield_label { display: none; }
.gform_wrapper .b2b-consent .ginput_container_consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.gform_wrapper .b2b-consent .ginput_container_consent input { margin-top: 3px; flex: none; accent-color: var(--primary); }
.gform_wrapper .b2b-consent .gfield_consent_label,
.gform_wrapper .b2b-consent label {
    font: 400 14px/1.55 var(--body-font), sans-serif;
    color: var(--darkgray);
}

/* Verstuur-knop — rood; op het aanmeldformulier met paper-plane-icoon
   (button via gform_submit_button filter in functions.php). */
.gform_wrapper .gform_footer { margin-top: 28px; padding: 0; }
.gform_wrapper .gform_button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 34px;
    border: 0;
    border-radius: 6px;
    background: var(--tertiary);
    color: #fff;
    font: 600 17px/1 var(--heading-font), sans-serif;
    cursor: pointer;
    transition: background-color .15s ease;
}
.gform_wrapper .gform_button:hover { background: #D14F4F; }
.gform_wrapper .gform_button .icon { font-size: 14px; }

/* Bevestigingsboodschap na verzenden (staat búiten .gform_wrapper). */
.gform_confirmation_message h3 {
    color: var(--black);
    margin-bottom: 8px;
}

/* =====================================================================
   AANMELDEN — pagina-layout: formulier-card + zijkolom, 1:1 met het
   Claude Design (Aanmelden.dc.html). De veldstyling zelf is globaal
   (zie GRAVITY FORMS hierboven).
   ===================================================================== */

/* Kolommen bovenaan uitlijnen (row is standaard align-items:center). */
.aanmelden-form,
.aanmelden-sidebar {
    align-self: flex-start;
}

/* Formulier-card */
.aanmelden-form > .card {
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 40px;
}

/* --- Zijkolom (na aanvraag + contact) --- */
.aanmelden-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.aanmelden-side__card {
    background: #fff;
    border: 1px solid var(--card-line);
    border-radius: 12px;
    padding: 26px;
}
.aanmelden-side__card--dark {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}
.aanmelden-side__title {
    font: 700 17px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
    margin-bottom: 16px;
}
.aanmelden-side__card--dark .aanmelden-side__title {
    color: #fff;
    margin-bottom: 10px;
}
.aanmelden-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.aanmelden-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.aanmelden-step__nr {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--secondary);
    color: #fff;
    font: 700 12px/1 var(--heading-font), sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aanmelden-step__text {
    font: 400 14px/1.55 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.aanmelden-side__lead {
    font: 400 14px/1.6 var(--body-font), sans-serif;
    color: var(--muted-light);
    margin: 0 0 16px;
}
.aanmelden-side__link {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1.4 var(--body-font), sans-serif;
    color: #fff;
    text-decoration: none;
    margin-bottom: 8px;
}
.aanmelden-side__hours {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 14px/1.4 var(--body-font), sans-serif;
    color: var(--muted-light);
}
.aanmelden-side__link .icon,
.aanmelden-side__hours .icon { color: var(--yellow); }

/* =====================================================================
   BREADCRUMBS (globaal, Yoast) — ontwerp: klein grijs met chevrons.
   ===================================================================== */
#breadcrumbs {
    display: block;
    font: 500 13px/1.4 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
#breadcrumbs a {
    color: var(--field-line-muted);
    text-decoration: none !important;
    transition: color .15s ease;
}
#breadcrumbs a:hover { color: var(--primary); }
#breadcrumbs .breadcrumb_last { color: var(--black); font-weight: 600; }
#breadcrumbs .breadcrumb-sep {
    font-size: 9px;
    margin: 0 7px;
    color: var(--card-line);
    vertical-align: middle;
}

/* Breadcrumbs op een donkere (bg-secondary) hero: lichte kleuren i.p.v. de
   donkere default, anders is het huidige item onzichtbaar op navy. */
.bg-secondary #breadcrumbs,
.bg-secondary #breadcrumbs a { color: color-mix(in srgb, var(--secondary-content) 58%, var(--secondary)); }
.bg-secondary #breadcrumbs a:hover { color: var(--secondary-content); }
.bg-secondary #breadcrumbs .breadcrumb_last { color: color-mix(in srgb, var(--secondary-content) 82%, var(--secondary)); }
.bg-secondary #breadcrumbs .breadcrumb-sep { color: color-mix(in srgb, var(--secondary-content) 38%, var(--secondary)); }

/* Shop-archief: wat lucht boven de productlijst (ontwerp). */
.woocommerce-archive section.products,
.post-type-archive-product section.products { padding-top: 25px; }

/* =====================================================================
   PRODUCTDETAIL (B2B) — 1:1 met Product.dc.html (ingelogd).
   Hergebruikt de thema-single-product-hooks, WC add-to-cart en het
   staffelsysteem (tiered-pricing-table + JS); hier alleen herschikking
   + styling, globaal en met lef-tokens. B2B-chrome (pill/meta/hint/
   zekerheden) komt uit functions.php.
   ===================================================================== */

/* Sticky bestelbalk uit (ongewenst). Parent zet 'm op display:flex!important
   (0,1,0) en laadt ná style.css → hogere specificiteit nodig. */
.single-main-product .product-info .fixed-product-bar { display: none !important; }

/* Witte productsectie i.p.v. grijs, minder ruimte boven de hero (ontwerp).
   `section.` erbij zodat we de parent-chunk (die ná style.css laadt) overrulen. */
.single-main-product section.block-product-header {
    background: var(--white);
    padding-top: 36px;
    padding-bottom: 64px;
}
.single-main-product section.block-product-header .breadcrumbs,
.single-main-product section.block-product-header #breadcrumbs { margin-bottom: 20px; }

/* Geen witte kaart om de info — flush op wit, lijnt uit met de galerij (ontwerp). */
.single-main-product section.block-product-header .product-summary,
.single-main-product section.block-product-header .product-summary-inner {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
/* Mobiel: het thema geeft de summary een negatieve horizontale marge (-15px,
   in zijn ≤991-blok) die 'm tegen beide schermranden duwt; samen met de
   padding:0 hierboven staat de inhoud dan flush. Marge opheffen zodat de
   kolom-padding (15px) de summary weer uitlijnt met de galerij erboven. */
@media (max-width: 991px) {
    .single-main-product section.block-product-header .product-summary {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Kolomverhouding col-lg-5 / col-lg-7 (Bootstrap-fracties, ontwerp). */
@media (min-width: 992px) {
    .single-main-product .block-product-header .row > .col-lg-6:first-child {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .single-main-product .block-product-header .row > .col-lg-6:last-child {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
        padding-left: 24px;
    }
}

/* Verbergen wat het ontwerp niet toont (eigen meta/pill vervangt deze). */
.single-main-product .product-summary-inner > .woocommerce-product-rating,
.single-main-product .product-summary-inner > .product_meta,
.single-main-product .product-summary-inner > .payment-methods { display: none; }

/* Galerij: grijs vlak met rand + ronding (ontwerp). Op de wrapper i.p.v.
   .flex-viewport, want die laatste bestaat alleen als flexslider init (bij
   1 afbeelding niet). */
.single-main-product .woocommerce-product-gallery .flex-viewport,
.single-main-product .woocommerce-product-gallery__wrapper {
    background: var(--gray);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}
.single-main-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image { margin: 0; }
/* Sticky-galerij lijnt uit met de titel/pre-order-pill op scroll-0. De parent
   zet top:50px, waardoor sticky al bij scroll 0 "pakt" en 24px omlaag duwt;
   een kleine top (header is niet sticky) lijnt uit én houdt sticky bij scroll. */
.single-main-product section.block-product-header .single-product-gallery-holder { top: 20px; }

/* Pre-order-pill (eyebrow). */
.single-main-product .b2b-single-eyebrow { margin-bottom: 14px; }
.single-main-product .b2b-single-preorder {
    display: inline-flex;
    align-items: center;
    font: 600 12px/1 var(--body-font), sans-serif;
    color: var(--primary);
    background: rgba(23, 135, 201, 0.1);
    padding: 7px 11px;
    border-radius: 100px;
}

/* Titel. */
.single-main-product .product-summary-inner .product_title {
    font: 800 36px/1.12 var(--heading-font), sans-serif;
    color: var(--black);
    letter-spacing: -0.015em;
    margin: 0;
}

/* Compacte meta-regel. */
.single-main-product .b2b-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font: 500 13px/1.3 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.single-main-product .b2b-single-meta__sep { color: var(--card-line); }

/* Korte omschrijving. */
.single-main-product .woocommerce-product-details__short-description {
    margin-top: 18px;
    font: 400 15px/1.7 var(--body-font), sans-serif;
    color: var(--darkgray);
}

/* Voorraad + prijs (voorraad boven prijs, uit de child-override). */
.single-main-product .pricing-and-stock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 26px;
}
.single-main-product .pricing-and-stock .stock {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font: 600 14px/1.3 var(--body-font), sans-serif;
    color: var(--succes);
}
.single-main-product .pricing-and-stock .stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.single-main-product .pricing-and-stock .stock.out-of-stock { color: var(--error); }
.single-main-product .product-pricing {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
}
.single-main-product .product-pricing .price {
    font: 800 34px/1 var(--heading-font), sans-serif;
    color: var(--black);
}
.single-main-product .product-pricing .price.regular-price {
    text-decoration: line-through;
    font-size: 20px;
    color: var(--field-line-muted);
}
.single-main-product .product-pricing .price.sale-price { color: var(--black); }
.single-main-product .b2b-price-suffix {
    font: 500 15px/1 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.single-main-product .b2b-price-suffix--marge { color: var(--warning); }

/* Bestellen: qty-stepper + rode CTA (ontwerp). */
.single-main-product form.cart {
    align-items: stretch;
    margin: 22px 0 0;
    width: 100%;
}
/* De parent forceert `.cart{flex-direction:column;gap:30px}` met hoge
   specificiteit (0,6,0) en laadt ná style.css. Met dezelfde selector + `body`
   (0,6,1) zetten we het naar het ontwerp: qty + knop op één rij, staffeltabel
   en hint eronder zónder row-gap (ruimte boven de tabel via margin-top). */
body .single-main-product .block-product-header .product-summary .product-summary-inner .cart:not(.variations_form),
body .single-main-product .block-product-header .product-summary .product-summary-inner .woocommerce-variation-add-to-cart {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    column-gap: 14px;
}
/* Variabel product: het add-to-cart-blok is de flex-container (niet form.cart). */
.single-main-product .woocommerce-variation-add-to-cart { margin-top: 0; }
.single-main-product form.cart .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--field-line);
    border-radius: var(--btn-border-radius);
    overflow: hidden;
}
.single-main-product form.cart .quantity button.minus,
.single-main-product form.cart .quantity button.plus {
    width: 46px;
    height: 56px;
    border: none;
    background: var(--gray);
    color: var(--black);
    font: 600 20px/1 var(--heading-font), sans-serif;
    cursor: pointer;
    transition: background-color .15s ease;
}
.single-main-product form.cart .quantity button.minus:hover,
.single-main-product form.cart .quantity button.plus:hover { background: var(--card-line); }
.single-main-product form.cart .quantity .qty {
    width: 64px;
    height: 56px;
    text-align: center;
    border: none;
    background: var(--white);
    color: var(--black);
    font: 700 18px/1 var(--body-font), sans-serif;
    -moz-appearance: textfield;
    appearance: textfield;
}
.single-main-product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-main-product form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.single-main-product form.cart .single_add_to_cart_button {
    flex: 1;
    min-width: 240px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 32px;
    border: none;
    border-radius: var(--btn-border-radius);
    background: var(--tertiary);
    color: var(--tertiary-content);
    font: 600 17px/1 var(--heading-font), sans-serif;
    cursor: pointer;
    transition: background-color .15s ease;
}
.single-main-product form.cart .single_add_to_cart_button:hover {
    background: var(--tertiary-darkened);
    color: var(--tertiary-content);
}
.single-main-product form.cart .single_add_to_cart_button .icon { order: -1; margin: 0; font-size: 16px; }

/* Staffeltabel (thema-component, herstyled naar ontwerp: 2 koloms,
   actieve rij groen + "Jouw prijs"-badge). Volle breedte onder de knop. */
.single-main-product form.cart > .tiered-pricing-table,
.single-main-product .woocommerce-variation-add-to-cart > .tiered-pricing-table { flex: 0 0 100%; margin-top: 22px; }
.single-main-product .tiered-pricing-table {
    display: block;
    width: 100%;
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}
.single-main-product .tiered-pricing-table__content { display: block; }
.single-main-product .tiered-pricing-table__header {
    display: block;
    padding: 13px 16px;
    background: var(--gray);
    border-bottom: 1px solid var(--card-line);
}
.single-main-product .tiered-pricing-table__header span { display: none; }
.single-main-product .tiered-pricing-table__header::before {
    content: "Staffelprijzen";
    font: 700 15px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
}
.single-main-product .tiered-pricing-table__header::after {
    content: " (per stuk, excl. btw)";
    font: 500 12px/1.2 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}
.single-main-product .tiered-pricing-table__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray);
}
.single-main-product .tiered-pricing-table__row:last-child { border-bottom: none; }
.single-main-product .tiered-pricing-table__discount { display: none; }
.single-main-product .tiered-pricing-table__qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 14px/1 var(--body-font), sans-serif;
    color: var(--black);
}
.single-main-product .tiered-pricing-table__price {
    font: 800 16px/1 var(--heading-font), sans-serif;
    color: var(--black);
}
.single-main-product .tiered-pricing-table__row--active { background: rgba(31, 138, 91, 0.07); }
.single-main-product .tiered-pricing-table__row--active .tiered-pricing-table__qty::after {
    content: "Jouw prijs";
    background: var(--succes);
    color: #fff;
    font: 700 10px/1 var(--heading-font), sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 100px;
}
.single-main-product .tiered-pricing-table__row--active .tiered-pricing-table__price { color: var(--succes); }

/* Staffelhint — als aangesloten voettekst onder de tabel. */
.single-main-product form.cart > .b2b-tier-hint,
.single-main-product .woocommerce-variation-add-to-cart > .b2b-tier-hint { flex: 0 0 100%; margin: 0; }
.single-main-product .tiered-pricing-table:has(+ .b2b-tier-hint) {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.single-main-product .b2b-tier-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border: 1px solid var(--card-line);
    border-top: none;
    border-radius: 0 0 var(--general-border-radius) var(--general-border-radius);
    font: 500 13px/1.5 var(--body-font), sans-serif;
    color: var(--succes);
    background: color-mix(in srgb, var(--succes) 5%, var(--white));
}
.single-main-product .b2b-tier-hint .icon { font-size: 12px; flex: none; }

/* Zekerhedenlijst. */
.single-main-product .b2b-single-assurances {
    list-style: none;
    margin: 24px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--card-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.single-main-product .b2b-single-assurances li {
    display: flex;
    align-items: center;
    gap: 11px;
    font: 500 14px/1.4 var(--body-font), sans-serif;
    color: var(--black);
}
.single-main-product .b2b-single-assurances .icon {
    color: var(--primary);
    width: 18px;
    font-size: 15px;
    flex: none;
    text-align: center;
}

/* Uitgelogd: login-slot die prijs + bestellen vervangt (Product Uitgelogd). */
.single-main-product .b2b-login-slot {
    margin-top: 26px;
    width: 100%;
    border: 1px solid var(--card-line);
    border-radius: 12px;
    overflow: hidden;
}
.single-main-product .b2b-login-slot__head {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px;
    background: var(--secondary);
    color: var(--secondary-content);
}
.single-main-product .b2b-login-slot__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: var(--yellow);
    font-size: 22px;
}
/* Icomoon-glyph netjes centreren (reset trailing-margin + baseline). */
.single-main-product .b2b-login-slot__icon .icon {
    margin: 0;
    line-height: 1;
    display: block;
}

/* Voorraadmelding (back-in-stock, notifier-plugin) — gestyled als het login-slot-
   blok: navy kop met bel/check-icoon + actieknop. Alleen zichtbaar voor
   INGELOGDE gebruikers (styling hoort in het thema). */
body:not(.logged-in) .single-main-product .lef-bis { display: none; }
.single-main-product .lef-bis {
    margin-top: 26px;
    border: 1px solid var(--card-line);
    border-radius: 12px;
    overflow: hidden;
}
.single-main-product .lef-bis .lef-bis--hidden { display: none; }
.single-main-product .lef-bis-response:empty { display: none; }
/* Plugin zet padding + margin op de wrappers → navy-band zou inspringen / een
   witte strook bovenaan geven. Weg, zodat de band edge-to-edge loopt (zoals de
   login-slot); knop/acties houden hun eigen band-padding. */
.single-main-product .lef-bis-form,
.single-main-product .lef-bis-subscribed { padding: 0; margin: 0; }
.single-main-product .lef-bis-intro,
.single-main-product .lef-bis-subscribed__msg {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 26px;
    background: var(--secondary);
    color: var(--secondary-content);
}
/* Icoon-vlak, identiek aan het login-slot (52×52, gele tint). */
.single-main-product .lef-bis-intro::before,
.single-main-product .lef-bis-subscribed__msg::before {
    content: "\ee76"; /* icon-bell */
    font-family: icomoon;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: var(--yellow);
    font-size: 22px;
}
.single-main-product .lef-bis-subscribed__msg::before { content: "\ee0c"; } /* icon-circle-check */
/* Tekstblok: vette titel (zoals de login-slot) + subtekst uit de plugin-<p>. */
.single-main-product .lef-bis-intro p,
.single-main-product .lef-bis-subscribed__msg p {
    margin: 0;
    font: 400 14px/1.6 var(--body-font), sans-serif;
    color: color-mix(in srgb, var(--secondary-content) 78%, var(--secondary));
}
.single-main-product .lef-bis-intro p::before,
.single-main-product .lef-bis-subscribed__msg p::before {
    display: block;
    margin-bottom: 5px;
    font: 700 20px/1.2 var(--heading-font), sans-serif;
    color: var(--secondary-content);
}
.single-main-product .lef-bis-intro p::before { content: "Zet me op de wachtlijst"; }
.single-main-product .lef-bis-subscribed__msg p::before { content: "Je staat op de wachtlijst"; }
.single-main-product .lef-bis-form__form,
.single-main-product .lef-bis .buttons-holder {
    padding: 18px 26px;
    background: var(--white);
}
.single-main-product .lef-bis-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: none;
    border-radius: var(--btn-border-radius);
    background: var(--primary);
    color: var(--primary-content);
    font: 600 15px/1 var(--heading-font), sans-serif;
    cursor: pointer;
    transition: background-color .15s ease;
}
.single-main-product .lef-bis-submit:hover { background: var(--primary-darkened); color: var(--primary-content); }
/* Afmelden = subtieler (secundair). */
.single-main-product .lef-bis-unsubscribe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border: 1px solid var(--field-line);
    border-radius: var(--btn-border-radius);
    background: transparent;
    color: var(--darkgray);
    font: 600 14px/1 var(--heading-font), sans-serif;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.single-main-product .lef-bis-unsubscribe:hover { background: var(--gray); color: var(--black); }
.single-main-product .lef-bis-response:not(:empty) {
    padding: 12px 26px;
    background: var(--white);
    font: 500 13px/1.5 var(--body-font), sans-serif;
    color: var(--succes);
}
.single-main-product .b2b-login-slot__text { flex: 1; min-width: 220px; }
.single-main-product .b2b-login-slot__title {
    font: 700 21px/1.2 var(--heading-font), sans-serif;
    color: var(--secondary-content);
}
.single-main-product .b2b-login-slot__text p {
    margin: 6px 0 0;
    font: 400 14px/1.6 var(--body-font), sans-serif;
    color: color-mix(in srgb, var(--secondary-content) 72%, var(--secondary));
}
.single-main-product .b2b-login-slot__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 20px 26px;
}
.single-main-product .b2b-login-slot__login,
.single-main-product .b2b-login-slot__signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--btn-border-radius);
    font: 600 16px/1 var(--heading-font), sans-serif;
    text-decoration: none !important;
    transition: background-color .15s ease;
}
.single-main-product .b2b-login-slot__login {
    background: var(--primary);
    color: var(--primary-content) !important;
}
.single-main-product .b2b-login-slot__login:hover { background: var(--primary-darkened); }
.single-main-product .b2b-login-slot__signup {
    background: var(--tertiary);
    color: var(--tertiary-content) !important;
}
.single-main-product .b2b-login-slot__signup:hover { background: var(--tertiary-darkened); }

/* Mobiel (ontwerp Product Uitgelogd Mobiel): login-slot-knoppen full-width
   gestapeld, en de inlogknop in de uitgelogd-notice full-width. Alleen op
   telefoons — op tablet passen ze prima naast elkaar. */
@media (max-width: 600px) {
    .single-main-product .b2b-login-slot__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .single-main-product .b2b-login-slot__login,
    .single-main-product .b2b-login-slot__signup { width: 100%; }
    .b2b-notice__login { width: 100%; justify-content: center; }
}

/* Variabel product: attribuut-select (bv. "Taal") in de algemene B2B-veldstijl
   (lichte --field-line-rand, custom pijl, focus = primair), i.p.v. de zwaardere
   thema-default (--black, 61px). */
.single-main-product .variations_form .variations { margin: 0 0 20px; width: 100%; }
.single-main-product .variations_form .variations label,
.single-main-product .variations_form .variations th {
    display: block;
    padding: 0;
    font: 700 12px/1 var(--heading-font), sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--black);
    margin-bottom: 8px;
}
.single-main-product .variations_form .variations td { display: block; padding: 0; }
.single-main-product .variations_form select {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 42px 0 14px;
    border: 1px solid var(--field-line);
    border-radius: var(--btn-border-radius);
    background-color: var(--white);
    color: var(--black);
    font: 500 15px/1 var(--body-font), sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2358697A' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
    transition: border-color .15s ease;
}
.single-main-product .variations_form select:focus {
    border-color: var(--primary);
    outline: none;
}
.single-main-product .variations_form .reset_variations {
    display: inline-block;
    margin-top: 8px;
    font: 500 13px/1 var(--body-font), sans-serif;
    color: var(--field-line-muted);
}

/* "Vaak samen ingekocht" (gerelateerde producten als B2B-lijstkaarten) —
   direct onder de hero via order:-1 binnen de flex-gemaakte .product-info. */
.single-main-product .product-info { display: flex; flex-direction: column; }
.single-main-product .product-info .product-related-b2b { order: -1; }
.product-related-b2b { padding: 8px 0 56px; }
.product-related-b2b__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.product-related-b2b__head h2 {
    margin: 0;
    font: 700 26px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
}
.product-related-b2b__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font: 600 14px/1 var(--heading-font), sans-serif;
    color: var(--primary);
    text-decoration: none !important;
    transition: color .15s ease;
}
.product-related-b2b__link:hover { color: var(--primary-darkened); }
.product-related-b2b__link .icon { font-size: 11px; }

/* "Specificaties" — grijze 2-koloms sectie: Productinformatie (attributen) +
   Veelgestelde vragen (FAQ-accordion), 1:1 met Product.dc.html. Vervangt de
   losse thema-attributen-sectie (die verbergen we). */
.single-main-product .block-product-attributes { display: none; }

.product-specs { background: var(--gray); padding: 56px 0; }
.product-specs__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.product-specs__grid--single { grid-template-columns: 1fr; max-width: 760px; }
.product-specs__col > h2 {
    margin: 0 0 18px;
    font: 700 26px/1.2 var(--heading-font), sans-serif;
    color: var(--black);
}

/* Productinformatie-tabel (label / waarde). */
.product-specs__info .product-attributes-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}
.product-specs__info .product-attributes-table th,
.product-specs__info .product-attributes-table td {
    padding: 13px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--card-line);
    font: 400 14px/1.5 var(--body-font), sans-serif;
}
.product-specs__info .product-attributes-table th {
    width: 42%;
    font-weight: 400;
    color: var(--darkgray);
    background: color-mix(in srgb, var(--gray) 45%, var(--white));
}
.product-specs__info .product-attributes-table td { color: var(--black); font-weight: 600; }
.product-specs__info .product-attributes-table tr:last-child th,
.product-specs__info .product-attributes-table tr:last-child td { border-bottom: none; }
.product-specs__info .product-attributes-empty {
    margin: 0;
    padding: 16px 18px;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    font: 400 14px/1.6 var(--body-font), sans-serif;
    color: var(--darkgray);
}

/* FAQ-accordion (thema-accordion-item) als ontwerp-accordionkaarten. */
.product-faq__items { display: flex; flex-direction: column; gap: 10px; }
.product-faq__items .accordion {
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}
.product-faq__items .accordion-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
}
.product-faq__items .accordion-title .title {
    font: 700 15px/1.35 var(--heading-font), sans-serif;
    color: var(--black);
}
.product-faq__items .accordion-toggle { flex: none; color: var(--primary); line-height: 1; }
.product-faq__items .accordion-toggle .icon { font-size: 13px; }
.product-faq__items .accordion-content .content-wrapper {
    padding: 0 18px 16px;
    font: 400 14px/1.65 var(--body-font), sans-serif;
    color: var(--darkgray);
}

@media (max-width: 767px) {
    .product-specs__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Mobiel: kolommen stapelen, titel kleiner. */
@media (max-width: 991px) {
    .single-main-product .product-summary-inner .product_title { font-size: 28px; }
    .single-main-product form.cart .single_add_to_cart_button { min-width: 180px; }
}

/* =====================================================================
   NAVY "BESLOTEN"-KAART (.card.bg-secondary) — o.a. B2B Mogelijkheden.
   Een .card met bg-secondary rendert standaard wit (de .card-achtergrond
   overrulet .bg-secondary → witte tekst op wit = onzichtbaar). Navy forceren,
   plus het slot-icoon links van de tekst en geel (ontwerp).
   ===================================================================== */
.card.bg-secondary { background: var(--secondary); }
.card.bg-secondary .content-wrapper h1,
.card.bg-secondary .content-wrapper h2,
.card.bg-secondary .content-wrapper h3 { color: var(--secondary-content); }
.card.bg-secondary .content-wrapper p {
    color: color-mix(in srgb, var(--secondary-content) 78%, var(--secondary));
}
/* Slot-icoon links van de tekst (col-8), knop rechts (col-4). */
.card.bg-secondary .col-lg-8 {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.card.bg-secondary .col-lg-4 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/* Icoon-vlak geel i.p.v. blauw (hoge specificiteit i.v.m. chunk-laadvolgorde). */
.card.bg-secondary .icon-outer.color-primary {
    flex: none;
    background: color-mix(in srgb, var(--yellow) 15%, transparent);
}
.card.bg-secondary .icon-outer.color-primary .icon { color: var(--yellow); }

/* Voordeel-cards compact: klein icoon links naast naam + tekst (ontwerp). */
.benefit-card .card {
    flex-direction: row;
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
}
.benefit-card .card .icon-outer {
    flex: none;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    margin-top: 2px;
}
.benefit-card .card .icon-outer .icon { font-size: 17px; color: var(--primary); }
.benefit-card .content-wrapper { margin: 0; }
.benefit-card .content-wrapper h4 { margin: 0; font-size: 15px; }
.benefit-card .content-wrapper p { margin-top: 4px; font-size: 13px; line-height: 1.55; }

/* =====================================================================
   SHOP-ARCHIEF MOBIEL (≤991px) — 1:1 met "Shop Mobiel".
   ===================================================================== */
@media (max-width: 991px) {
    /* Sortering weg op mobiel. */
    .shop-toolbar__sort { display: none; }

    /* Filterknop: witte outline, full-width (i.p.v. blauw). */
    .toggle-filter { width: 100%; }
    .toggle-filter .toggle-filter-button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        background: var(--white);
        color: var(--black) !important;
        border: 1px solid var(--field-line);
        font: 600 14px/1 var(--body-font), sans-serif;
    }
    .toggle-filter .toggle-filter-button .icon { color: var(--primary); }
    .toggle-filter .toggle-filter-button:hover { background: var(--gray); }
}

/* =====================================================================
   HEADER MOBIEL (≤991px) — compacte balk (1:1 met "Header Mobiel"):
   icoon-only account/winkelwagen, kleinere burger dichter op de iconen,
   zoekbalk als volle-breedte rij ONDER de balk.
   De thema-JS ('early-mobile-menu', bij een volle header) blijft de
   schakelaar naar het mobiele menu — hier alleen de styling van die staat.
   ===================================================================== */
@media (max-width: 991px) {
    /* Logo op mobiel 52px hoog (width auto → aspect ratio behouden). */
    .navigation .logo {
        height: 52px;
        max-height: 52px;
        width: auto;
    }

    /* Account + winkelwagen: alleen het icoon, labels (::after) weg. */
    .nav-holder-primary-1 a::after,
    .cart-trigger a::after { content: none !important; }
    /* Strakker op elkaar (van 16px link-padding terug). */
    .nav-holder-primary-1 a,
    .cart-trigger a { padding: 8px; }

    /* Burger kleiner + dichter op de iconen (was 32px links-padding). */
    .navigation .mobile-menu-toggle-position { padding-left: 6px; }
    .navigation .mobile-menu-toggle-position .hamburger {
        transform: scale(0.82);
        transform-origin: center;
    }

    /* Zoekbalk uit de balk halen en als volle-breedte rij eronder tonen. */
    .navigation-inner-main { flex-wrap: wrap; }
    .navigation-inner-main .shortcode-holder.nav-shortcode {
        display: block;
        order: 99;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 12px 0 0;
    }
    /* De ASL-widget zet vaste px-breedtes + content-box op zijn interne
       elementen (probox/asl_w ~475px), waardoor de input rechts buiten beeld
       liep. Forceer de hele subtree naar border-box + volle breedte en laat de
       min-width los, zodat alles binnen de schermbreedte past. */
    .navigation-inner-main .shortcode-holder.nav-shortcode .asl_w_container,
    .navigation-inner-main .shortcode-holder.nav-shortcode .asl_w,
    .navigation-inner-main .shortcode-holder.nav-shortcode .probox,
    .navigation-inner-main .shortcode-holder.nav-shortcode .proinput,
    .navigation-inner-main .shortcode-holder.nav-shortcode .proinput input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================================
   B2B MOGELIJKHEDEN MOBIEL (≤991px) — via eigen block-classes
   (b2b-who-card / b2b-cta-full, toegevoegd op de custom-section-cols).
   ===================================================================== */
@media (max-width: 991px) {
    /* "Voor wie"-kaarten: icoon NAAST de tekst i.p.v. gestapeld (ontwerp). */
    .b2b-who-card .card.col-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
    }
    .b2b-who-card .card.col-card .icon-outer { flex: none; margin-bottom: 0; }
    .b2b-who-card .card.col-card .content-wrapper { margin: 0; }

    /* CTA-knop full-width: Voordelen ("Vraag direct een account aan") +
       besloten-card ("Word B2B klant"). De besloten-holder is alignment-right
       (rechts uitgelijnd) en krimpt als flex-item; de knop-breedte wordt door
       bronvolgorde overruled. Op onze eigen class daarom holder + knop hard
       naar volle breedte forceren. */
    .b2b-cta-full .buttons-holder {
        width: 100% !important;
        text-align: center;
    }
    .b2b-cta-full .buttons-holder .btn {
        display: flex !important;
        width: 100% !important;
        justify-content: center;
    }
}

/* =====================================================================
   HOMEPAGE MOBIEL (≤991px). Voor-wie-kaarten + CTA-knoppen hergebruiken
   b2b-who-card / b2b-cta-full (hierboven). Hier alleen de categorie-
   kaarten (featured-taxonomy) horizontaal: beeld 84×64 links + tekst
   rechts + chevron, i.p.v. een groot beeld boven (via eigen block-class
   b2b-cat-cards op de col).
   ===================================================================== */
@media (max-width: 991px) {
    /* Hero-knoppen full-width gestapeld (ontwerp); scoped op de bestaande
       .hero-home sectieclass. */
    .hero-home .buttons-holder .btn {
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .b2b-cat-cards .card-taxonomy-term {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px;
    }
    .b2b-cat-cards .card-taxonomy-term .image-outer {
        width: 84px;
        height: 64px;
        aspect-ratio: auto;
        flex: none;
        margin: 0;
        border-radius: 6px;
        overflow: hidden;
    }
    .b2b-cat-cards .card-taxonomy-term .image-holder,
    .b2b-cat-cards .card-taxonomy-term .image-outer img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .b2b-cat-cards .card-taxonomy-term .content-outer {
        flex: 1;
        min-width: 0;
        padding: 0;
    }
}

/* =====================================================================
   PAGE-HEADER HERO MOBIEL — de Gutenberg-section-hero's (.page-header,
   bv. Assortiment / B2B Mogelijkheden) missen op mobiel de kolom-gutter,
   waardoor de titel/tekst tegen de schermrand valt. Padding herstellen.
   (De WooCommerce shop-archief-header is geen custom-section-col en blijft
   dus ongemoeid.)
   ===================================================================== */
@media (max-width: 991px) {
    .page-header .wp-block-custom-section-block-col {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =====================================================================
   B2B WINKELWAGEN — cart-regels als B2B-productkaart.
   Markup: child components/_woocommerce/cart-item (hergebruikt de
   .b2b-card-klassen van de lef-b2b-shop plugin; layout in de plugin-CSS).
   Hier alleen kleuren/typografie met lef JSON-variabelen, plus het
   neutraliseren van de thema-cart-item-styling naar kaartmaat.
   ===================================================================== */

/* Thema-cart-item (padding/margin) terug naar de b2b-kaartmaat. */
.woocommerce-cart-form__cart-item.b2b-card {
    padding: 14px 18px;
}
.woocommerce-cart-form__cart-item.b2b-card:not(:last-child) {
    margin-bottom: 10px;
}

/* Native Woo-stepper in de kaart — zelfde look als .b2b-qty op de shopkaart. */
.b2b-card--cart .quantity {
    border: 1px solid var(--field-line);
    border-radius: var(--btn-border-radius);
}
.b2b-card--cart .quantity .minus,
.b2b-card--cart .quantity .plus {
    background: var(--gray);
    color: var(--black);
    font: 600 16px/1 var(--heading-font), sans-serif;
    border-radius: 0;
    transition: background-color .15s ease;
}
.b2b-card--cart .quantity .minus:hover,
.b2b-card--cart .quantity .plus:hover {
    background: var(--card-line);
}
.b2b-card--cart .quantity .qty {
    background: var(--white);
    color: var(--black);
    font: 600 15px/1 var(--body-font), sans-serif;
}

/* Verwijderen (×) */
.b2b-card__remove .remove {
    font-size: 18px;
    font-weight: 400;
    color: var(--field-line-muted);
    border-radius: 50%;
    text-decoration: none !important;
    transition: color .15s ease, background-color .15s ease;
}
.b2b-card__remove .remove:hover {
    color: var(--error);
    background: color-mix(in srgb, var(--error) 10%, transparent);
}

/* Extra itemdata onder de naam (wc_get_formatted_cart_item_data) */
.b2b-card--cart .b2b-card__info dl.variation {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
    font: 500 12px/1.4 var(--body-font), sans-serif;
    color: var(--darkgray);
}
.b2b-card--cart .b2b-card__info dl.variation dt,
.b2b-card--cart .b2b-card__info dl.variation dd {
    margin: 0;
    display: inline;
}
.b2b-card--cart .b2b-card__info dl.variation dd p {
    display: inline;
    margin: 0;
    font-size: 12px;
}

/* ==========================================================================
   MIJN ACCOUNT — Bedrijfsgegevens (extra B2B-velden op accountgegevens)
   ========================================================================== */
.b2btcg-account-company {
    margin-top: 30px;
}
.b2btcg-account-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}
.b2btcg-account-interests .b2btcg-account-interest {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 18px 8px 0;
    font-weight: 400;
}
.b2btcg-account-interest input[type="checkbox"] {
    margin: 0;
}
.b2btcg-account-company input[disabled] {
    background: var(--gray);
    color: var(--darkgray);
    cursor: not-allowed;
}
.b2btcg-account-note {
    color: var(--darkgray);
    font-size: 13px;
}

/* ==========================================================================
   MIJN ACCOUNT — B2B-portaal
   Ontworpen in de sitetaal (er is geen apart account-ontwerp in Claude Design):
   sidebar + content, donkernavy identiteits-/welkomstpaneel met blauwe glow
   (1:1 met de site-hero), kaarten met --card-line, formulier-/knop-tokens.
   Alles gescoped onder .woocommerce-account.
   ========================================================================== */

/* --- Layout: sidebar + content (grid) ----------------------------------- */
/* my-account.php levert .row met twee .col-lg-12 (nav + content); we
   hergebruiken die als grid i.p.v. de template te kopiëren. */
.woocommerce-account .woocommerce-my-account .row {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    align-items: start;
}
.woocommerce-account .woocommerce-my-account .col-lg-12 {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
}

/* --- Sidebar ------------------------------------------------------------- */
/* Prefix .woocommerce-account .woocommerce-my-account om leflite's eigen
   .woocommerce-MyAccount-navigation te out-specificeren (die zet een blauwe
   flex-balk met padding:30px; wij willen een witte verticale kaart). */
.woocommerce-account .woocommerce-my-account .b2b-account-nav {
    position: sticky;
    top: 24px;
    display: block;
    margin: 0;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}
.b2b-account-nav__id {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--secondary);
    background-image: radial-gradient(120% 140% at 100% 0%, rgba(23, 135, 201, .45), transparent 60%);
}
.b2b-account-nav__avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--white);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 18px;
}
.b2b-account-nav__id-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.b2b-account-nav__company {
    color: var(--white);
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.b2b-account-nav__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted-light);
    font-size: 12px;
    font-weight: 500;
}
.b2b-account-nav__badge .icon {
    color: var(--succes);
    font-size: 13px;
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list {
    list-style: none;
    margin: 0;
    padding: 8px;
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li {
    margin: 0;
    border: none;
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 6px;
    color: var(--black);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.2;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a .icon {
    width: 20px;
    text-align: center;
    color: var(--darkgray);
    font-size: 15px;
    transition: color .15s;
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a:hover {
    background: var(--gray);
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.is-active a {
    background: var(--primary);
    color: var(--primary-content);
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.is-active a .icon {
    color: var(--primary-content);
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--card-line);
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout a,
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout a .icon {
    color: var(--tertiary);
}
.woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: rgba(232, 92, 92, .10);
}

/* --- Content-frame ------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    padding: 32px;
}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > .b2b-account-hero:first-child {
    margin-top: 0;
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
    font-size: var(--h3-size);
    margin: 0 0 18px;
}

/* --- Dashboard-hero (signatuur: navy + blauwe glow) --------------------- */
.b2b-account-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    padding: 32px;
    border-radius: var(--general-border-radius);
    background: var(--secondary);
    background-image: radial-gradient(90% 130% at 100% 0%, rgba(23, 135, 201, .55), transparent 55%);
    color: var(--white);
}
.b2b-account-hero__eyebrow,
.b2b-account-eyebrow {
    display: block;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
}
.b2b-account-hero__eyebrow {
    margin-bottom: 10px;
}
.b2b-account-hero__title {
    margin: 0 0 8px;
    font-size: var(--h2-size);
    color: var(--white);
}
.b2b-account-hero__sub {
    margin: 0 0 20px;
    max-width: 46ch;
    font-size: 15px;
    color: var(--muted-light);
}
.b2b-account-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.b2b-account-hero__cta .icon {
    font-size: 13px;
}
.b2b-account-eyebrow {
    margin: 0 0 14px;
}

/* --- Quick-action-kaarten ----------------------------------------------- */
.b2b-account-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.b2b-account-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
/* Leflite onderstreept content-links met !important; text-decoration erft door
   naar de spans, dus het moet op de <a> zelf én met dezelfde zwaarte terug. */
.woocommerce-account .b2b-account-action,
.woocommerce-account .b2b-account-action:hover {
    text-decoration: none !important;
}
.b2b-account-action:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(18, 41, 61, .08);
    transform: translateY(-2px);
}
.b2b-account-action__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(23, 135, 201, .10);
    color: var(--primary);
    font-size: 19px;
}
.b2b-account-action__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.b2b-account-action__title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
}
.b2b-account-action__desc {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--darkgray);
}
.b2b-account-action__arrow {
    margin-left: auto;
    color: var(--muted-light);
    font-size: 14px;
    transition: color .15s, transform .15s;
}
.b2b-account-action:hover .b2b-account-action__arrow {
    color: var(--primary);
    transform: translateX(3px);
}

/* --- Bestellingen-tabel + status-pills ---------------------------------- */
.woocommerce-account .woocommerce-orders-table .mobile-only {
    display: none;
}
.woocommerce-account .woocommerce-orders-table {
    display: block;
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
    overflow: hidden;
}
.woocommerce-account .woocommerce-orders-table .flex-table.is-heading {
    display: flex;
    padding: 0 18px;
    background: var(--gray);
}
.woocommerce-account .woocommerce-orders-table__header {
    flex: 1;
    padding: 12px 8px;
    font-family: var(--heading-font);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--darkgray);
}
.woocommerce-account .woocommerce-orders-table__row {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px solid var(--card-line);
}
.woocommerce-account .woocommerce-orders-table__cell {
    flex: 1;
    padding: 0 8px;
    font-size: 14.5px;
    color: var(--black);
}
.woocommerce-account .woocommerce-orders-table__cell-order-number a {
    font-weight: 700;
    color: var(--primary);
}
.b2b-order-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 12px;
}
.b2b-order-status::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 7px;
    border-radius: 50%;
    background: currentColor;
}
.b2b-order-status--completed { background: rgba(31, 138, 91, .12); color: var(--succes); }
.b2b-order-status--processing { background: rgba(23, 135, 201, .12); color: var(--primary); }
.b2b-order-status--on-hold { background: rgba(240, 180, 41, .18); color: #9a6f10; }
.b2b-order-status--pending { background: var(--gray); color: var(--darkgray); }
.b2b-order-status--cancelled,
.b2b-order-status--failed,
.b2b-order-status--refunded { background: rgba(206, 65, 65, .10); color: var(--error); }
/* Leflite's .buttons-holder gebruikt een negatieve gutter (margin: 0 -6px);
   binnen onze kaart met overflow:hidden snijdt dat de knoppen af. */
.woocommerce-account .woocommerce-orders-table .buttons-holder {
    margin-left: 0;
    margin-right: 0;
}
.woocommerce-account .woocommerce-orders-table .buttons-holder > .button {
    margin-left: 0;
    margin-right: 8px;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
    padding: 8px 14px;
    border: 1px solid var(--card-line);
    border-radius: var(--btn-border-radius);
    background: var(--gray);
    color: var(--black);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 13px;
}
.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Formulieren (accountgegevens, adressen, login) --------------------- */
.woocommerce-account .woocommerce-MyAccount-content .form-row,
.woocommerce-login .form-row {
    margin: 0 0 var(--form-elements-gap-y);
}
.woocommerce-account .woocommerce-MyAccount-content label,
.woocommerce-login label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 14px;
    color: var(--black);
}
.woocommerce-account .woocommerce-MyAccount-content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea,
.woocommerce-login input:not([type=checkbox]):not([type=radio]):not([type=submit]) {
    width: 100%;
    padding: var(--form-elements-padding-y) var(--form-elements-padding-x);
    border: 1px solid var(--field-line);
    border-radius: var(--form-elements-border-radius);
    background: var(--white);
    font-family: var(--body-font);
    font-size: 15px;
    color: var(--black);
    transition: border-color .15s, box-shadow .15s;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus,
.woocommerce-login input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 135, 201, .15);
}
/* Op-slot-velden (KvK/BTW): grijs tonen zodat "niet bewerkbaar" zichtbaar is.
   De :not()-keten op de algemene veldregel telt zwaar mee, dus we spiegelen die
   hier + :disabled/[readonly] om zeker hoger uit te komen. */
.woocommerce-account .woocommerce-MyAccount-content input:not([type=checkbox]):not([type=radio]):not([type=submit]):disabled,
.woocommerce-account .woocommerce-MyAccount-content input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly] {
    background: var(--gray);
    color: var(--darkgray);
    cursor: not-allowed;
}
.woocommerce-account .woocommerce-EditAccountForm fieldset {
    margin: 8px 0 20px;
    padding: 20px;
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
}
.woocommerce-account .woocommerce-EditAccountForm fieldset h4 {
    margin: 0 0 14px;
    font-family: var(--heading-font);
    font-size: 16px;
}
@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-content .form-row-first { float: left; width: 48%; }
    .woocommerce-account .woocommerce-MyAccount-content .form-row-last { float: right; width: 48%; }
}

/* Primaire knop in account-/loginformulieren */
.woocommerce-account .woocommerce-MyAccount-content form .button,
.woocommerce-account .woocommerce-MyAccount-content form button[type=submit],
.woocommerce-login form .button,
.woocommerce-login form button[type=submit] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: var(--btn-medium-padding);
    border: none;
    border-radius: var(--btn-border-radius);
    background: var(--primary);
    color: var(--primary-content);
    font-family: var(--btn-font);
    font-weight: var(--btn-font-weight);
    font-size: var(--btn-medium-font-size);
    cursor: pointer;
    transition: background .15s;
}
.woocommerce-account .woocommerce-MyAccount-content form .button:hover,
.woocommerce-account .woocommerce-MyAccount-content form button[type=submit]:hover,
.woocommerce-login form .button:hover,
.woocommerce-login form button[type=submit]:hover {
    background: var(--primary-darkened);
}

/* --- Login (uitgelogd) --------------------------------------------------- */
.woocommerce-login .login-form-holder,
.woocommerce-login .register-form-holder {
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--card-line);
    border-radius: var(--general-border-radius);
}
.woocommerce-login h2 {
    margin: 0 0 20px;
    font-size: var(--h3-size);
}
.woocommerce-login .login-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.woocommerce-login .login-buttons .wc-forward {
    padding: 0;
    background: none;
    color: var(--primary);
    font-family: var(--heading-font);
    font-weight: 600;
}
.b2b-login-intro {
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
}
.b2b-login-intro__title {
    margin: 0 0 10px;
    font-size: var(--h2-size);
    color: var(--black);
}
.b2b-login-intro__sub {
    margin: 0;
    font-size: 16px;
    color: var(--darkgray);
}

/* --- Responsive (site-breakpoint ≤991px) -------------------------------- */
/* LET OP: alle overrides hieronder dragen de volledige prefix
   .woocommerce-account .woocommerce-my-account. De desktopregels hierboven
   hebben die prefix namelijk óók (nodig tegen leflite), dus een override op
   alleen .b2b-account-nav verliest op specificiteit en doet niets. */
@media (max-width: 991px) {
    /* De kolom moet kunnen krimpen. Een grid-item heeft min-width:auto, dus
       zonder minmax(0,1fr) + min-width:0 rekt de min-content van de navlijst
       de kolom tot ~1160px op en loopt de hele pagina buiten beeld. */
    .woocommerce-account .woocommerce-my-account .row {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .woocommerce-account .woocommerce-my-account .col-lg-12 {
        min-width: 0;
    }
    .woocommerce-account .woocommerce-my-account .b2b-account-nav {
        position: static;
        top: auto;
    }
    /* Twee kolommen i.p.v. een horizontale scrollstrip: alle endpoints blijven
       zichtbaar zonder dat de nav het halve scherm opeet. */
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a {
        height: 100%;
        gap: 9px;
        padding: 11px 12px;
        font-size: 14px;
        line-height: 1.25;
    }
    /* margin-right:0 — leflite's .icon heeft een eigen margin van 10px die
       bovenop onze gap komt; die 10px is hier precies wat de labels tekort komen. */
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a .icon {
        width: 18px;
        margin-right: 0;
        font-size: 14px;
    }
    /* Vangnet: labels als "Voorraadmeldingen" zijn één lang woord en kunnen in
       een smalle kolom niet afbreken — liever afbreken dan buiten de kaart. */
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a span {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list li.woocommerce-MyAccount-navigation-link--customer-logout {
        grid-column: 1 / -1;
        margin-top: 2px;
    }
    .b2b-account-actions {
        grid-template-columns: 1fr;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 20px;
    }
    .b2b-account-hero {
        padding: 24px;
    }
}
@media (max-width: 767px) {
    .woocommerce-account .woocommerce-orders-table .flex-table.is-heading {
        display: none;
    }
    .woocommerce-account .woocommerce-orders-table__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }
    .woocommerce-account .woocommerce-orders-table__cell {
        width: 100%;
        padding: 0;
    }
    .woocommerce-account .woocommerce-orders-table .mobile-only {
        display: inline;
        margin-right: 6px;
        font-weight: 700;
    }
    /* Echte <table>'s van plugins (o.a. Voorraadmeldingen) passen niet in de
       kolom; ze dragen wél data-title, dus stapelen zoals de bestellingenlijst.
       Zonder dit snijdt de overflow:hidden van de kaart de kolommen eraf. */
    .woocommerce-account table.shop_table_responsive thead {
        display: none;
    }
    .woocommerce-account table.shop_table_responsive,
    .woocommerce-account table.shop_table_responsive tbody,
    .woocommerce-account table.shop_table_responsive tr,
    .woocommerce-account table.shop_table_responsive td {
        display: block;
        width: 100%;
    }
    .woocommerce-account table.shop_table_responsive tr {
        padding: 14px 18px;
        border-top: 1px solid var(--card-line);
    }
    .woocommerce-account table.shop_table_responsive tbody tr:first-child {
        border-top: none;
    }
    .woocommerce-account table.shop_table_responsive td {
        padding: 3px 0;
        border: none;
        font-size: 14.5px;
        text-align: left;
    }
    .woocommerce-account table.shop_table_responsive td[data-title]::before {
        content: attr(data-title) ": ";
        font-weight: 700;
    }
    /* Knoppencel: geen "Acties:"-label ervoor, maar de knoppen op een eigen rij. */
    .woocommerce-account table.shop_table_responsive td:has(.button)::before {
        content: none;
    }
    .woocommerce-account table.shop_table_responsive td:has(.button) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        margin-top: 10px;
    }
    /* Eigen marges van de knoppen uit; de gap regelt de tussenruimte. */
    .woocommerce-account table.shop_table_responsive td:has(.button) > * {
        margin: 0;
    }
}

/* --- Telefoon (≤575px): maten terugbrengen ------------------------------ */
@media (max-width: 575px) {
    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 16px;
    }
    .b2b-account-hero {
        margin-bottom: 22px;
        padding: 20px;
    }
    .b2b-account-hero__title {
        font-size: 22px;
    }
    .b2b-account-hero__sub {
        font-size: 14.5px;
    }
    .b2b-account-nav__id {
        gap: 10px;
        padding: 16px;
    }
    .b2b-account-nav__avatar {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .b2b-account-action {
        gap: 12px;
        padding: 14px;
    }
    .b2b-account-action__icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    .b2b-account-action__title {
        font-size: 15px;
    }
    .woocommerce-account .woocommerce-EditAccountForm fieldset {
        padding: 16px;
    }
}

/* --- Smalle telefoon (≤479px): nav terug naar één kolom ------------------ */
/* Onder ~480px past "Voorraadmeldingen" niet meer naast een icoon in een halve
   kolom; twee kolommen leveren dan een afbreking midden in het woord op. */
@media (max-width: 479px) {
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list {
        grid-template-columns: minmax(0, 1fr);
    }
    .woocommerce-account .woocommerce-my-account .b2b-account-nav__list li a {
        padding: 10px 12px;
    }
}