. */
.bbd-uitklap__intro,
.bbd-uitklap__meer > p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--bbd-tekst);
}
.bbd-uitklap__meer > p { margin-top: 12px; }
/* De "lees meer"-regel: een gestippelde streeplijn erboven, label wisselt mee. */
.bbd-uitklap__meer > summary {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding-top: 14px;
border-top: 2px dotted rgba(31, 37, 43, .25);
font-family: var(--bbd-font-data);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
color: var(--bbd-orange-t);
}
.bbd-uitklap__meer > summary::-webkit-details-marker { display: none; }
.bbd-uitklap__meer > summary::before { content: "Lees meer"; }
.bbd-uitklap__meer[open] > summary::before { content: "Lees minder"; }
.bbd-uitklap__meer > summary::after {
content: "";
width: 16px;
height: 16px;
flex: none;
transition: transform .18s ease;
background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC6017' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.bbd-uitklap__meer[open] > summary::after { transform: rotate(180deg); }
@media (max-width: 782px) {
.bbd-uitklappen { grid-template-columns: 1fr; gap: 14px; }
}
/* Kluspagina's op tablet/mobiel: de sectiekoppen (en hun oranje streepje) links
uitlijnen bij de links uitgelijnde inhoud, en de stappen ook links. Zo staat
kop + inhoud netjes op één lijn i.p.v. gecentreerd boven links. Scoped op de
kluspagina-body (parent = de klussen-pagina), dus desktop en de hubs blijven
ongewijzigd. */
@media (max-width: 1024px) {
.parent-pageid-20 .kt-inside-inner-col .bbd-sectiekop {
text-align: left;
margin-left: 0;
max-width: none;
}
.parent-pageid-20 .kt-inside-inner-col .bbd-sectiekop::after {
left: 0;
transform: none;
}
.parent-pageid-20 .bbd-stapblok .bbd-stap { text-align: left; }
.parent-pageid-20 .bbd-stapblok .bbd-stap::before { left: 0; transform: none; }
.parent-pageid-20 .bbd-stapblok .bbd-stap__tekst { margin-left: 0; margin-right: 0; }
}
/* --------------------------------------------------------------------------
Header — twee rijen volgens de mockup
Rij 1 (wit): logo · drie usp's · ophaalknop · account
Rij 2 (donker): de navigatie · knop "Alle containers"
De indeling komt uit de Kadence header-builder; hier alleen de opmaak van de
onderdelen die het thema zelf levert.
-------------------------------------------------------------------------- */
/* De drie usp's naast elkaar, met een haarlijn ertussen zoals in de mockup.
Zonder deze regels vielen ze onder elkaar als opsomming en werd de bovenste
rij 119px hoog in plaats van 76px. */
.bbd-kopusp {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0;
/* Lucht tussen het logo en het eerste icoon; ze stonden er strak tegenaan.
Zit in --bbd-logokolom verrekend, zodat het menu eronder meeschuift. */
margin: 0 0 0 30px;
padding: 0;
list-style: none;
}
.bbd-kopusp li {
display: flex;
align-items: center;
gap: 8px;
padding: 0 13px;
font-size: 12px;
line-height: 1.3;
color: var(--bbd-tekst);
border-left: 1px solid var(--bbd-line);
}
.bbd-kopusp li:first-child { border-left: 0; padding-left: 0; }
.bbd-kopusp li:last-child { padding-right: 0; }
.bbd-kopusp .bbd-icoon { color: var(--bbd-orange); flex: none; }
.bbd-kopusp a {
color: var(--bbd-ink);
font-weight: 700;
text-decoration: none;
}
.bbd-kopusp a:hover { color: var(--bbd-orange); }
/* Het menu begint onder de usp's, niet onder het logo.
De usp-balk staat in dezelfde zone als het logo en start daardoor op een
vaste afstand van de containerrand — gemeten op 1200, 1440 én 1680px. Het
menu begint op 24px (de eigen randruimte van de container).
Rekening: logobreedte 210px + 30px marge vóór de usp's (zie .bbd-kopusp
hieronder) = 240px. Wijzig je die marge of het logo, pas dan hier hetzelfde
getal aan; anders lopen de twee rijen uit elkaar. Eén plek, geen los getal
diep in een regel. */
:root { --bbd-logokolom: 240px; }
@media (min-width: 1025px) {
.site-header-bottom-section-left { padding-left: var(--bbd-logokolom); }
/* De tussenruimte tussen de menu-items staat in de Customizer en wordt door
Kadence als padding aan wéérszijden van elke link gezet. Bij het eerste
item duwt die linkerhelft de tekst van de uitlijnlijn af. Alleen daar dus
weghalen; de ruimte tússen de items blijft gewoon staan. */
.site-header-bottom-section-left .header-navigation ul.menu > li:first-child > a {
padding-left: 0;
}
}
/* Krappe laptopschermen: de balk krimpt in plaats van om te vallen.
Gemeten op 1025px had de donkere balk 960px nodig (menu 695 + pil 265) van de
1008px die er is — 48px speling. Daardoor sloeg één stap browserzoom, of
Windows-schaling op 125%, de site al naar het mobiele menu.
Onder 1150px kort de pil daarom in tot "Ophalen" en wordt de tussenruimte
tussen de menu-items krapper. Dat scheelt samen zo'n 130px, zodat de
desktopbalk tot rond de 900px meegaat. Op een breed scherm verandert er
niets: daar staat de volledige tekst.
Geen ondergrens in de query: het mobiele menu begint nu pas op 900px, dus
deze regel moet ook tussen 900 en 1025 gelden. */
@media (max-width: 1150px) {
.bbd-ophaal-lang { display: none; }
.site-header-bottom-section-left .header-navigation ul.menu > li > a {
padding-left: 9px;
padding-right: 9px;
}
}
/* De pil breekt nooit over twee regels. Door "Container laten" in een eigen
span te zetten kon hij dat ineens wél, en dan verdubbelt de hoogte van de
balk. */
.bbd-ophaal-knop > a { white-space: nowrap; }
/* De donkere menubalk. De letters plakten tegen de boven- en onderrand: de
links hadden geen eigen hoogte, alleen die van de rij. Nu krijgen ze lucht
en is het klikvlak ook groter. */
.site-header-bottom-section-left .header-navigation ul.menu > li > a,
.site-header-bottom-section-right .header-navigation ul.menu > li > a {
padding-top: 18px;
padding-bottom: 18px;
line-height: 1.2;
}
/* Menu-items in dezelfde kleur als de titel in de hero: wit. Bij de actieve
pagina een oranje streep eronder — dezelfde markering als in de mockup.
Kadence zet de kleur van de navigatie zowel in header.min.css als in een
inline blok dat ná onze stylesheet komt. Vandaar hier de volledige keten
(.primary-menu-container en li.menu-item erbij): dat is specifieker dan
beide, zonder !important. */
.site-header-bottom-section-left .header-navigation .primary-menu-container > ul.menu > li.menu-item > a,
.site-header-bottom-section-left .header-navigation .primary-menu-container > ul.menu > li.menu-item.current-menu-item > a,
.site-header-bottom-section-left .header-navigation .primary-menu-container > ul.menu > li.menu-item > a:hover {
color: #fff;
}
.site-header-bottom-section-left .header-navigation ul.menu > li > a {
position: relative;
}
.site-header-bottom-section-left .header-navigation ul.menu > li > a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--bbd-orange);
opacity: 0;
transition: opacity .15s ease;
}
.site-header-bottom-section-left .header-navigation ul.menu > li.current-menu-item > a::after,
.site-header-bottom-section-left .header-navigation ul.menu > li.current-menu-ancestor > a::after,
.site-header-bottom-section-left .header-navigation ul.menu > li.current_page_parent > a::after,
.site-header-bottom-section-left .header-navigation ul.menu > li > a:hover::after,
.site-header-bottom-section-left .header-navigation ul.menu > li > a:focus-visible::after {
opacity: 1;
}
/* Een lichte gloed onder de donkere menubalk, zodat hij van de pagina eronder
loskomt in plaats van er hard tegenaan te sluiten. Bewust heel licht: een
schaduw in de merkkleur (#1F252B) op lage dekking, geen grijze rand.
`position: relative` is nodig omdat de balk anders onder de sectie eronder
valt en de gloed niet te zien is. */
.site-bottom-header-wrap > .site-header-row-container-inner {
position: relative;
z-index: 2;
box-shadow: 0 6px 14px -6px rgba(31, 37, 43, .28);
}
/* --------------------------------------------------------------------------
Cookiebalk (Complianz)
De balk moet een strook onderaan zijn, geen blokkade. Met de standaardopmaak
stond hij op een telefoon op 340px — 40% van het scherm — doordat de drie
knoppen onder elkaar vallen (3 × 45px). Hier gaan ze naast elkaar: accepteren
en weigeren even breed naast elkaar, voorkeuren als smallere derde.
Even breed is geen stijlkeuze: weigeren moet net zo makkelijk zijn als
accepteren, anders is de toestemming niet geldig.
-------------------------------------------------------------------------- */
/* Complianz genereert een eigen stylesheet (banner-1-optin.css) die ná de onze
laadt, met `@media (max-width:768px){ flex-direction: column }`. Vandaar de
container-id erbij: dat wint zonder !important. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
margin: 0;
min-width: 0;
}
/* Accepteren en weigeren delen de rij; voorkeuren neemt alleen zijn eigen
breedte in en valt op een smal scherm naar de tweede regel. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
flex: 1 1 0;
}
/* "Voorkeuren" als tekstlink en niet als derde knop: als volwaardige knop paste
hij er op 390px niet meer naast en viel hij naar een tweede regel — 45px
extra hoogte voor een keuze die de meeste mensen niet gebruiken. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
flex: 0 0 auto;
background: transparent;
border: 0;
padding: 0 4px;
text-decoration: underline;
font-size: 13px;
min-height: 0;
align-self: center;
}
/* Krapper dan de standaard 15/20px, en minder ruimte tussen de blokken. */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
padding: 12px 16px;
gap: 6px;
}
/* Op een telefoon zet Complianz de balk van rand tot rand tegen de onderkant
aan: links 0, rechts 0, onder 0. Met de afgeronde hoeken die er wél zijn
ziet dat eruit als een half afgemaakte strook, en het leest als een
blokkade over de hele pagina. Op 12 augustus 2026 gemeten op 375px: 375
breed, 28% van de schermhoogte, geen marge.
Hier blijft het ook op klein scherm een kaart met lucht eromheen. De
selector heeft de container-id erbij zodat hij wint van de stylesheet die
Complianz zelf genereert — die laadt ná de onze. */
@media (max-width: 768px) {
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-right,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom-left,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-bottom {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
}
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { margin-bottom: 8px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents { font-size: 12.5px; }
/* --------------------------------------------------------------------------
Mobiel en tablet — de uitklaplade
Opzet: logo links, account · winkelwagen · trigger rechts in de witte balk.
In de lade een oranje pil bovenaan, dan het menu met inklapbare secties, en
onderaan de contactgegevens.
Het menu in de lade is een éígen menu ("Mobiel menu", locatie Mobiel) en niet
het primaire. Reden: onder "Containers" hangt daar het megamenu-paneel als
onzichtbaar item, en dat rolt op een telefoon als vijf kolommen uit. In het
mobiele menu staan de echte pagina's onder elk kopje.
-------------------------------------------------------------------------- */
#mobile-drawer .drawer-inner {
background: var(--bbd-ink);
padding: 0;
}
/* De containermarkering als afsluiting onder de ladekop — hetzelfde merkteken
als onder de hero's en boven de footer. */
#mobile-drawer .drawer-header {
position: relative;
padding: 18px 20px;
}
#mobile-drawer .drawer-header::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 4px;
background: repeating-linear-gradient(114deg,
var(--bbd-hazard) 0 11px, #fff 11px 22px);
}
#mobile-drawer .drawer-toggle { color: #fff; }
#mobile-drawer .drawer-content { padding: 20px; }
/* De pil sluit de lade af, onder het menu en de contactgegevens. Over de volle
breedte, zodat het als actie leest en niet als nog een menuregel. */
#mobile-drawer .bbd-ophaal-knop { margin-top: 20px; }
#mobile-drawer .bbd-ophaal-knop > a {
display: flex;
justify-content: center;
background: var(--bbd-orange) !important;
color: #fff !important;
font-size: 12.5px;
padding: 13px 16px;
}
#mobile-drawer .bbd-ophaal-knop > a::before { background: #fff; }
/* ---- het menu zelf ---- */
#mobile-menu { border-top: 1px solid rgba(255, 255, 255, .10); }
#mobile-menu > li { border-bottom: 1px solid rgba(255, 255, 255, .10); }
#mobile-menu .drawer-nav-drop-wrap { position: relative; }
/* Oranje streepje links zodra een sectie openstaat: je ziet in één oogopslag
waar je bent, ook als de lijst eronder lang is. */
#mobile-menu .drawer-nav-drop-wrap::before {
content: "";
position: absolute;
left: -20px; top: 0; bottom: 0;
width: 3px;
background: var(--bbd-orange);
opacity: 0;
transition: opacity .18s ease;
}
/* Kadence markeert een opengeklapte sectie niet met een klasse maar met
aria-expanded op de knop; vandaar :has() in plaats van een klassenaam. Het
streepje staat er ook bij de pagina waar je nu bent, ook als die dicht is. */
#mobile-menu .drawer-nav-drop-wrap:has(> .drawer-sub-toggle[aria-expanded="true"])::before,
#mobile-menu > li.current-menu-item > .drawer-nav-drop-wrap::before,
#mobile-menu > li.current-menu-ancestor > .drawer-nav-drop-wrap::before { opacity: 1; }
#mobile-menu > li > .drawer-nav-drop-wrap > a,
#mobile-menu > li > a {
display: block;
padding: 15px 0;
font-family: var(--bbd-font-kop);
font-size: 17px;
letter-spacing: .01em;
color: #fff;
}
#mobile-menu > li > .drawer-nav-drop-wrap > a:hover,
#mobile-menu > li > a:hover { color: var(--bbd-orange); }
/* De uitklapknop: oranje pijl in een rustig vlak, groot genoeg voor een duim.
Geen `top`/`transform` om hem te centreren: de knop staat static in een
flex-rij, dus een translate duwt hem gewoon omhoog — hij hing daardoor bóven
het kopje in plaats van ernaast. In een flexrij regelt align-self dat. */
#mobile-menu .drawer-sub-toggle {
flex: none;
align-self: center;
width: 44px; height: 44px;
color: var(--bbd-orange);
background: rgba(255, 255, 255, .06);
border-radius: 8px;
}
#mobile-menu .drawer-sub-toggle:hover { background: rgba(236, 96, 23, .18); }
/* ---- de uitgeklapte lijst ---- */
#mobile-menu ul.sub-menu {
margin: 0 0 14px;
padding-left: 14px;
border-left: 2px solid rgba(255, 255, 255, .12);
}
#mobile-menu ul.sub-menu li a {
display: block;
padding: 9px 0;
font-size: 15px;
color: rgba(255, 255, 255, .74);
}
#mobile-menu ul.sub-menu li a:hover { color: #fff; }
/* ---- contactblok onderin ---- */
#mobile-drawer .header-contact-wrap {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .10);
}
#mobile-drawer .header-contact-wrap a,
#mobile-drawer .header-contact-wrap .header-contact-item {
color: #fff;
font-weight: 600;
}
#mobile-drawer .header-contact-wrap .kadence-svg-iconset { color: var(--bbd-orange); }
/* ---- account en winkelwagen in de witte balk ---- */
.site-header-main-section-right .header-account-button,
.site-header-main-section-right .header-cart-wrap a { color: var(--bbd-ink); }
.site-header-main-section-right .header-cart-wrap a { color: var(--bbd-orange); }
/* De ophaal-pil staat sinds 30 juli 2026 in de dónkere balk, niet meer in de
witte rij: die werd te vol met logo, usp's, account en winkelwagen.
Daar kan hij niet donker gevuld blijven — dan valt hij weg tegen de balk.
Oranje gevuld dus: dat is de enige kleur die op #1F252B genoeg contrast
geeft én past bij de knop uit de mockup, die rechtsboven ook oranje was.
Bij zweven wordt hij wit met donkere letters, zodat er iets gebeurt zonder
dat het oranje elders in de balk hoeft te concurreren. */
.site-header-bottom-section-right .bbd-ophaal-knop > a {
background: var(--bbd-orange) !important;
color: #fff !important;
}
.site-header-bottom-section-right .bbd-ophaal-knop > a::before { background: #fff; }
.site-header-bottom-section-right .bbd-ophaal-knop > a:hover,
.site-header-bottom-section-right .bbd-ophaal-knop > a:focus-visible {
background: #fff !important;
color: var(--bbd-ink) !important;
}
.site-header-bottom-section-right .bbd-ophaal-knop > a:hover::before { background: var(--bbd-orange); }
/* "Container laten ophalen": het menu-item als CTA-pil in de header. Variant van
de hero-pil (.bbd-hero__pil), maar voor de lichte header: donker gevuld met
witte tekst en de oranje stip. Opent straks de ophaal-pop-up; de link naar
/ophalen/ blijft als no-JS-fallback bestaan. */
.bbd-ophaal-knop > a {
display: inline-flex;
align-items: center;
gap: 9px;
background: var(--bbd-ink, #1F252B) !important;
color: #fff !important;
font-family: var(--bbd-font-data);
font-size: 12px;
letter-spacing: .09em;
text-transform: uppercase;
font-weight: 700;
padding: 9px 15px;
border-radius: 3px;
line-height: 1;
transition: background .15s ease;
}
.bbd-ophaal-knop > a::before {
content: "";
width: 6px; height: 6px;
background: var(--bbd-orange);
border-radius: 50%;
flex: none;
}
.bbd-ophaal-knop > a:hover,
.bbd-ophaal-knop > a:focus-visible { background: var(--bbd-orange) !important; }
.bbd-ophaal-knop > a:hover::before,
.bbd-ophaal-knop > a:focus-visible::before { background: #fff; }
/* Tijdens het afrekenen (winkelwagen + checkout) verbergen. */
body.woocommerce-cart .bbd-ophaal-knop,
body.woocommerce-checkout .bbd-ophaal-knop { display: none; }
/* Ophaal-modal: compacte pop-up met het Kadence-formulier erin. De inhoud
(formulier + koppen) komt uit een Kadence Element dat site-breed in de footer
staat; hieronder alleen de schil (overlay, paneel, sluitknop, animatie). */
.bbd-modal[hidden] { display: none; }
.bbd-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 6vh 16px 24px;
overflow-y: auto;
}
.bbd-modal__overlay {
position: fixed;
inset: 0;
background: rgba(15, 18, 22, .55);
animation: bbd-modal-fade .2s ease both;
}
.bbd-modal__paneel {
position: relative;
width: 100%;
max-width: 460px;
background: var(--bbd-paper, #fff);
border-radius: var(--bbd-radius-lg, 10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
padding: 30px 28px 26px;
animation: bbd-modal-pop .22s ease both;
}
/* Oranje accentwoord in de modaltitel (core-heading, dus geen Kadence-markColor). */
.bbd-modal__paneel mark.kt-highlight { background: transparent; color: var(--bbd-orange); }
@keyframes bbd-modal-fade { from { opacity: 0; } }
@keyframes bbd-modal-pop { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
.bbd-modal__overlay,
.bbd-modal__paneel { animation: none; }
}
.bbd-modal__sluit {
position: absolute;
top: 12px;
right: 12px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--bbd-tekst, #333);
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background .15s ease;
}
.bbd-modal__sluit:hover { background: rgba(0, 0, 0, .06); }
body.bbd-modal-open { overflow: hidden; }
@media (max-width: 520px) {
.bbd-modal { padding: 0; }
.bbd-modal__paneel {
max-width: none;
min-height: 100%;
border-radius: 0;
}
}
/* ---- Mijn account ---- */
/* Compactere paginakop: die stond schermvullend vóór de accountinhoud. */
body.woocommerce-account .entry-header.page-title {
padding-top: 30px;
padding-bottom: 26px;
min-height: 0;
}
body.woocommerce-account .entry-header .entry-title {
font-size: clamp(28px, 4vw, 40px);
}
/* Navigatie (het dashboard-blok) links, inhoud rechts. De WooCommerce-wrapper
is van zichzelf block met floats (inhoud links, nav rechts); als flex-rij komt
de nav — die als eerste in de DOM staat — links te staan. */
body.woocommerce-account .woocommerce {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 30px;
}
body.woocommerce-account .account-navigation-wrap {
float: none;
flex: 0 0 200px;
max-width: 200px;
}
body.woocommerce-account .woocommerce-MyAccount-content {
float: none;
flex: 1 1 340px;
min-width: 0;
margin: 0;
}
@media (max-width: 767px) {
body.woocommerce-account .account-navigation-wrap {
flex-basis: 100%;
max-width: none;
}
}
/* Adressen-tab: de "Factuuradres"/"Verzendadres"-koppen stonden schermvullend
groot (34px H2). Kleiner, en alles netjes links uitgelijnd; het adres in het
zwart en rechtop (was grijs cursief). */
body.woocommerce-account .woocommerce-Address-title { text-align: left; align-items: flex-start; }
body.woocommerce-account .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-Address-title h3 {
font-size: 20px;
line-height: 1.2;
margin: 0 0 4px;
}
body.woocommerce-account .woocommerce-Address-title .edit {
align-self: flex-start;
margin: 2px 0 10px;
font-size: 14px;
text-align: left;
}
body.woocommerce-account .woocommerce-Address address {
color: var(--bbd-ink, #1F252B);
font-style: normal;
font-size: 15.5px;
line-height: 1.7;
}
/* ---- Over-pagina ---- */
.bbd-overhero .kt-inside-inner-col { height: 100%; justify-content: center; }
.bbd-overkop {
font-family: var(--bbd-font-kop);
font-size: clamp(34px, 5vw, 50px);
line-height: 1.06;
letter-spacing: -.01em;
margin: 6px 0 0;
}
/* Oranje streepje onder een kop. */
.bbd-kop-streep::after {
content: "";
display: block;
width: 60px;
height: 4px;
border-radius: 2px;
background: var(--bbd-orange);
margin: 20px 0 0;
}
.bbd-overhero p { margin-top: 22px; }
.bbd-overhero__knoppen { margin-top: 26px; gap: 14px; }
.bbd-overhero__beeld { margin: 0; height: 100%; }
.bbd-overhero__beeld img {
width: 100%;
height: 100%;
object-fit: cover;
min-height: 320px;
}
/* Containermarkering onderaan de hero, zoals op de andere pagina's. */
.bbd-overhero { position: relative; }
.bbd-overhero::after {
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
height: 5px;
background: repeating-linear-gradient(114deg,
var(--bbd-hazard) 0 11px, #fff 11px 22px);
}
/* Op tablet en mobiel valt de tekst over de hero-achtergrondfoto. Donkere
overlay + witte tekst zodat het leesbaar blijft. Op desktop niets veranderen. */
@media (max-width: 1024px) {
.bbd-overhero::before {
content: "";
display: block;
position: absolute;
inset: 0;
width: auto;
height: auto;
background: rgba(15, 18, 22, .72);
z-index: 0;
pointer-events: none;
}
.bbd-overhero > .kt-row-column-wrap { position: relative; z-index: 1; }
.bbd-overhero .bbd-overkop,
.bbd-overhero p,
.bbd-overhero .bbd-kruimelpad,
.bbd-overhero .bbd-kruimelpad a,
.bbd-overhero .bbd-kruimelpad span { color: #fff !important; }
}
/* De vier info-blokken als witte kaarten (2 per rij): drijvende oranje
icoon-chip links, kop ernaast, tekst en lijst eronder over de volle breedte. */
.bbd-overkaart { font-size: 15px; line-height: 1.6; }
.bbd-overkaart > .kt-inside-inner-col {
background: #fff;
border: 1px solid var(--bbd-line, #e5e7eb);
border-radius: var(--bbd-radius-lg, 12px);
padding: 30px 32px;
height: 100%;
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bbd-overkaart > .kt-inside-inner-col:hover {
border-color: rgba(236, 96, 23, .35);
box-shadow: 0 10px 30px rgba(31, 37, 43, .08);
transform: translateY(-2px);
}
.bbd-overicon {
float: left;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--bbd-orange);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(236, 96, 23, .25);
}
.bbd-overkaart .bbd-overblok__kop {
font-family: var(--bbd-font-kop);
font-size: 19px;
line-height: 1.25;
font-weight: 700;
color: var(--bbd-ink, #1F252B);
margin: 0 0 14px 62px;
min-height: 46px;
display: flex;
align-items: center;
}
.bbd-overkaart > .kt-inside-inner-col > p,
.bbd-overkaart > .kt-inside-inner-col > .wp-block-list,
.bbd-overkaart .bbd-overkeur { clear: both; }
.bbd-vinklijst { list-style: none; margin: 14px 0 0; padding: 0; }
.bbd-vinklijst li {
position: relative;
padding-left: 26px;
margin: 0 0 9px;
line-height: 1.5;
}
.bbd-vinklijst li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: var(--bbd-orange);
font-weight: 700;
}
/* WebwinkelKeur-badge in blok 4. */
.bbd-overkeur {
display: flex;
align-items: center;
gap: 14px;
margin-top: 20px;
padding: 14px 16px;
border: 1px solid var(--bbd-line, #e5e7eb);
border-radius: var(--bbd-radius-lg, 10px);
background: #fafafa;
}
.bbd-overkeur__vink {
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--bbd-ink, #1F252B);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.bbd-overkeur strong { display: block; }
.bbd-overkeur span { font-size: 13px; color: var(--bbd-grey, #6b7280); }
/* Klantbelofte (donker) | missie (licht) | beeld — tegen elkaar. */
.bbd-overbm .kt-inside-inner-col { height: 100%; }
.bbd-overblok__kop2 {
font-family: var(--bbd-font-kop);
font-size: 25px;
font-weight: 700;
margin: 0;
color: var(--bbd-ink, #1F252B);
}
.bbd-sectie-donker .bbd-overblok__kop2 { color: #fff; }
.bbd-overbelofte > .kt-inside-inner-col {
background: var(--bbd-ink, #1F252B);
color: #fff;
padding: 38px 40px;
border-radius: var(--bbd-radius-lg, 12px) 0 0 var(--bbd-radius-lg, 12px);
}
.bbd-overmissie > .kt-inside-inner-col {
background: #fff;
border: 1px solid var(--bbd-line, #e5e7eb);
border-left: none;
border-right: none;
padding: 38px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.bbd-overbeeld > .kt-inside-inner-col { padding: 0; height: 100%; }
.bbd-overbeeld .bbd-overbeeld__foto,
.bbd-overbeeld .bbd-plaatshouder {
height: 100%;
min-height: 240px;
margin: 0;
border-radius: 0 var(--bbd-radius-lg, 12px) var(--bbd-radius-lg, 12px) 0;
overflow: hidden;
}
.bbd-overbeeld .bbd-overbeeld__foto img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bbd-overbelofte .bbd-overquote {
font-family: Georgia, "Times New Roman", serif;
font-size: 60px;
line-height: .4;
color: var(--bbd-orange);
margin: 40px 0 4px;
}
@media (max-width: 767px) {
.bbd-overbelofte > .kt-inside-inner-col { border-radius: var(--bbd-radius-lg, 12px) var(--bbd-radius-lg, 12px) 0 0; }
.bbd-overmissie > .kt-inside-inner-col {
border-left: 1px solid var(--bbd-line, #e5e7eb);
border-top: none;
}
.bbd-overbeeld .bbd-overbeeld__foto,
.bbd-overbeeld .bbd-plaatshouder { border-radius: 0 0 var(--bbd-radius-lg, 12px) var(--bbd-radius-lg, 12px); }
}
/* Containermarkering als afsluiting, over de volle breedte. Zelfde patroon
(rood-wit, 114°, 11px) als .bbd-hazard elders op de site. */
.bbd-bouwstreep {
height: 6px;
width: 100vw;
margin-left: calc(50% - 50vw);
background: repeating-linear-gradient(114deg,
var(--bbd-hazard) 0 11px, #fff 11px 22px);
}
/* ---- Contactpagina ---- */
.bbd-conthero { position: relative; }
/* Donkere hero: tekst licht. */
.bbd-conthero .bbd-overkop { color: #fff; }
.bbd-conthero p { color: #EDEFF2; }
.bbd-conthero .bbd-kruimelpad,
.bbd-conthero .bbd-kruimelpad a,
.bbd-conthero .bbd-kruimelpad span { color: rgba(255, 255, 255, .72); }
.bbd-conthero .bbd-kruimelpad a:hover { color: #fff; }
.bbd-conthero::after {
content: "";
position: absolute;
bottom: 0;
left: calc(50% - 50vw);
width: 100vw;
height: 5px;
background: repeating-linear-gradient(114deg,
var(--bbd-hazard) 0 11px, #fff 11px 22px);
}
/* Rechterkolom: witte info-kaart naast het formulier. */
.bbd-contactinfo > .kt-inside-inner-col {
background: #fff;
border: 1px solid var(--bbd-line, #e5e7eb);
border-radius: var(--bbd-radius-lg, 12px);
padding: 30px 32px;
height: 100%;
}
.bbd-contactinfo p { line-height: 1.6; }
.bbd-contactinfo__label { font-weight: 700; margin-top: 6px; }
.bbd-contactmain .bbd-ophaal-knop { display: inline-flex; margin: 4px 0 18px; }
/* Contactkaarten (Over ons): intro links, drie kaarten rechts, op donkere sectie. */
.bbd-contactkaarten { display: block; }
.bbd-contactkaarten__intro { max-width: 640px; margin-bottom: 30px; }
.bbd-contactkaarten .bbd-contactkaarten__kop { font-size: 30px; margin-bottom: 12px; }
.bbd-contactkaarten__sub { color: rgba(255, 255, 255, .8); margin: 0 0 20px; }
.bbd-contactkaarten__kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Kaart: icoon links, ernaast label (boven) + waarde (eronder), uitgelijnd. */
.bbd-contactkaart {
background: rgba(255, 255, 255, .05);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: var(--bbd-radius-lg, 10px);
padding: 20px 20px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 15px;
align-items: center;
}
.bbd-contactkaart__ico {
grid-row: 1 / 3;
align-self: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: var(--bbd-orange);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bbd-contactkaart__label { grid-column: 2; font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 1px; }
.bbd-contactkaart__waarde { grid-column: 2; color: rgba(255, 255, 255, .85); font-weight: 400; text-decoration: none; font-size: 14px; overflow-wrap: anywhere; }
a.bbd-contactkaart__waarde:hover { color: var(--bbd-orange); }
@media (max-width: 900px) {
.bbd-contactkaarten { grid-template-columns: 1fr; gap: 26px; }
.bbd-contactkaarten__kaarten { grid-template-columns: 1fr; }
}
/* Bestellingen-tabel wat lucht geven en de actieknoppen los van elkaar. */
body.woocommerce-account .woocommerce-orders-table th,
body.woocommerce-account .woocommerce-orders-table td { padding: 12px 10px; }
body.woocommerce-account .woocommerce-orders-table__cell-order-date { white-space: nowrap; }
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button {
display: block;
margin: 0 0 8px;
padding: 8px 14px;
font-size: 13px;
text-align: center;
white-space: nowrap;
}
body.woocommerce-account .woocommerce-orders-table__cell-order-actions a:last-child,
body.woocommerce-account .woocommerce-orders-table__cell-order-actions .button:last-child { margin-bottom: 0; }
/* Bedrag + wat er besteld is, netjes onder elkaar. */
body.woocommerce-account .bbd-order-total { display: block; }
body.woocommerce-account .bbd-order-items {
display: block;
margin-top: 3px;
font-size: 12.5px;
color: var(--bbd-grey, #6b7280);
line-height: 1.4;
}
/* --------------------------------------------------------------------------
Footer
De indeling komt uit de Kadence footer-builder; hier alleen de huisstijl.
Kleur: de meeste pagina's eindigen met een donkere afsluitsectie (#1F252B).
Zou de footer diezelfde kleur krijgen, dan lopen ze in elkaar over en is niet
meer te zien waar de pagina ophoudt. Daarom is de footer één stap dieper
(#161B20) met een haarlijn erboven; de onderbalk is nog een tint donkerder.
Zo staat hij los, ook op pagina's die licht eindigen.
-------------------------------------------------------------------------- */
.site-footer .site-footer-wrap {
border-top: 1px solid rgba(255, 255, 255, .08);
}
#colophon .site-middle-footer-wrap,
#colophon .site-bottom-footer-wrap { color: #C7CDD3; }
/* Kolomkoppen: wit, compact, met een kort oranje streepje eronder. */
#colophon .footer-widget-area .widget-title,
#colophon .footer-widget-area .wp-block-heading {
font-family: var(--bbd-font-kop);
font-size: 17px;
font-weight: 700;
color: #fff;
margin: 0 0 16px;
padding-bottom: 10px;
position: relative;
}
#colophon .footer-widget-area .widget-title::after,
#colophon .footer-widget-area .wp-block-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--bbd-orange);
}
/* Linklijsten in de kolommen. */
#colophon .footer-widget-area ul.menu,
#colophon .footer-widget-area ul {
list-style: none;
margin: 0;
padding: 0;
}
#colophon .footer-widget-area ul.menu li { margin: 0 0 9px; }
#colophon .footer-widget-area ul.menu li a {
color: rgba(255, 255, 255, .74);
text-decoration: none;
font-size: 15px;
line-height: 1.45;
display: inline-block;
transition: color .15s ease, transform .15s ease;
}
#colophon .footer-widget-area ul.menu li a:hover,
#colophon .footer-widget-area ul.menu li a:focus-visible {
color: #fff;
transform: translateX(3px);
}
/* De containermarkering als afsluiting bóven de footer. Exact dezelfde streep
als onder de hero op de homepage: 5px, 114°, 11px rood om 11px wit.
Als blok-pseudo-element en niet absoluut gepositioneerd: de footer is al
volle breedte, dus zo loopt de streep vanzelf van rand tot rand en duwt hij
de footerinhoud netjes omlaag zonder erover te vallen.
Hierdoor hoeft geen enkele pagina meer zijn eigen streep onderaan te hebben;
zie de twee regels hieronder. */
#colophon::before {
content: "";
display: block;
height: 5px;
background: repeating-linear-gradient(114deg,
var(--bbd-hazard) 0 11px, #fff 11px 22px);
}
/* Het laatste blok van een pagina sluit niet meer zelf af — de footer doet dat
nu. Alleen het láátste: dezelfde afsluitsectie kan halverwege een pagina
staan en houdt daar zijn streep.
Op 30 juli 2026 stond zo'n streep op home, /containers/puin/ en
/formaten/9-kuub/ (als ::after op het hulpblok) en op /contact/ en
/over-ons/ (als los .bbd-bouwstreep-element), telkens 6px boven de footer. */
.entry-content > .bbd-sectie-afsluit:last-child::after { content: none; }
.entry-content > .bbd-bouwstreep:last-child { display: none; }
/* Merkkolom: logo, pitch en contactgegevens.
WordPress zet automatisch alinea's om de shortcode heen; die lege duwde
de hele kolom 16px omlaag, waardoor het logo lager stond dan de koppen
ernaast. Hier weggehaald, zodat alle vier de kolommen op één lijn beginnen. */
#colophon .footer-widget-area .widget > p:empty { display: none; }
#colophon .footer-widget-area .widget > p:first-child { margin-top: 0; }
/* Vergunningen in de footer: zes gemeenten zichtbaar, de rest achter een
uitklapper. Het omzetten gebeurt in inc/footer.php; hier alleen de opmaak. */
.bbd-footer-meer { margin-top: 4px; }
.bbd-footer-meer summary {
cursor: pointer;
list-style: none; /* eigen pijltje, zie ::after */
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 14.5px;
color: rgba(255, 255, 255, .62);
}
.bbd-footer-meer summary::-webkit-details-marker { display: none; }
.bbd-footer-meer summary::after {
content: "";
width: 7px; height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .18s ease;
}
.bbd-footer-meer details[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.bbd-footer-meer summary:hover { color: var(--bbd-orange); }
.bbd-footer-meer summary:focus-visible {
outline: 2px solid var(--bbd-orange);
outline-offset: 3px;
border-radius: 3px;
}
.bbd-footer-meer-lijst {
list-style: none;
margin: 8px 0 0;
padding: 0;
}
/* Informatie en Voorwaarden delen sinds 30 juli 2026 de vierde kolom. De tweede
kop heeft lucht nodig, anders plakt "Voorwaarden" aan de link erboven. */
.site-footer-middle-section-4 .widget + .widget { margin-top: 26px; }
.bbd-footer-logo { max-width: 210px; height: auto; margin-bottom: 16px; }
.bbd-footer-logo--tekst {
display: block;
font-family: var(--bbd-font-kop);
font-size: 24px;
color: #fff;
}
.bbd-footer-pitch {
color: rgba(255, 255, 255, .68);
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 18px;
max-width: 34ch;
}
.bbd-footer-contact { list-style: none; margin: 0; padding: 0; }
.bbd-footer-contact li {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 11px;
font-size: 15px;
color: rgba(255, 255, 255, .82);
}
.bbd-footer-contact a { color: #fff; text-decoration: none; font-weight: 600; }
.bbd-footer-contact a:hover { color: var(--bbd-orange); }
.bbd-footer-ico {
flex: none;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(236, 96, 23, .16);
color: var(--bbd-orange);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Onderbalk: copyright en bedrijfsgegevens links, betaalmethoden rechts.
Kadence draait de inhoud door wpautop heen; de lege alinea's die daarbij
ontstaan halen we hier weg, anders staat er witruimte omheen. */
#colophon .site-bottom-footer-wrap .footer-html { width: 100%; text-align: left; }
#colophon .site-bottom-footer-wrap .footer-html-inner > p { margin: 0; }
#colophon .site-bottom-footer-wrap .footer-html-inner > p:empty { display: none; }
.bbd-footer-onder {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px 30px;
}
/* De tekst mag krimpen en afbreken, zodat de betaalmethoden ernaast passen
in plaats van eronder te vallen. */
.bbd-footer-onder__tekst {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 420px;
min-width: 0;
}
.bbd-footer-onder .bbd-betaalmethoden { flex: 0 0 auto; }
/* Copyright met daarnaast de disclaimer-, cookie- en privacylinks. */
.bbd-footer-copyregel {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
}
.bbd-footer-copy { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
#colophon .bbd-footer-onderlinks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
list-style: none;
margin: 0;
padding: 0;
}
#colophon .bbd-footer-onderlinks li { position: relative; margin: 0; }
/* Puntje tussen de links, behalve voor de eerste. */
#colophon .bbd-footer-onderlinks li + li::before {
content: "·";
position: absolute;
left: -10px;
color: rgba(255, 255, 255, .35);
}
#colophon .bbd-footer-onderlinks a {
font-size: 13.5px;
color: rgba(255, 255, 255, .72);
text-decoration: none;
}
#colophon .bbd-footer-onderlinks a:hover,
#colophon .bbd-footer-onderlinks a:focus-visible {
color: #fff;
text-decoration: underline;
}
.bbd-footer-gegevens {
margin: 0;
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, .5);
}
.bbd-footer-onder .bbd-betaalmethoden {
display: flex;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.bbd-footer-onder .bbd-betaalmethoden img {
height: 24px;
width: auto;
background: #fff;
border-radius: 4px;
padding: 3px 5px;
}
#colophon .site-bottom-footer-wrap .footer-html {
font-size: 13px;
color: rgba(255, 255, 255, .55);
}
#colophon .site-bottom-footer-wrap a { color: rgba(255, 255, 255, .8); }
@media (max-width: 767px) {
.bbd-footer-onder { flex-direction: column; align-items: flex-start; }
.bbd-footer-pitch { max-width: none; }
}
/* -------------------------------------------------------------------------
Belblok — tijdelijk, zolang er niet online besteld kan worden
Zie inc/bestellen-uit.php. Weg zodra die schakelaar uit gaat.
------------------------------------------------------------------------- */
.bbd-belblok {
margin: 20px 0 8px;
padding: 22px 24px;
border: 1px solid var(--bbd-line);
border-left: 4px solid var(--global-palette1);
border-radius: 10px;
background: var(--global-palette7);
}
.bbd-belblok__kop {
margin: 0 0 6px;
font-weight: 700;
font-size: 1.05rem;
color: var(--bbd-ink);
}
.bbd-belblok__tekst {
margin: 0 0 16px;
color: var(--global-palette5);
line-height: 1.6;
}
.bbd-belblok__knop {
display: inline-block;
white-space: nowrap;
}
.bbd-belblok__tijden {
margin: 12px 0 0;
font-size: .875rem;
color: var(--global-palette5);
}