/*
Theme Name:   Bosch Bedding
Theme URI:    https://www.boschbedding.nl
Description:  Child theme van Astra. Al het maatwerk van Bosch Bedding leeft hier, zodat updates van Astra niets overschrijven.
Author:       Bosch Bedding
Template:     astra
Version:      1.0.0
Text Domain:  boschbedding
*/

/* ==========================================================================
   DESIGN TOKENS
   Overgenomen uit de Elementor-templates die vervangen worden, zodat het
   ontwerp identiek blijft.
   ========================================================================== */

:root {
	--bb-zwart: #000000;
	--bb-geel: #fad93a;
	--bb-wit: #ffffff;
	--bb-grijs: #b8b8b8;
	--bb-grijs-licht: #f5f5f5;
	--bb-breedte: 1140px;
}

/* ==========================================================================
   VANGNET TEGEN HORIZONTAAL SCROLLEN
   Redactionele content bevat soms lange reeksen non-breaking spaces of andere
   onbreekbare tekst. Die vormen een blok dat de pagina openduwt en op mobiel
   horizontaal scrollen veroorzaakt.
   'anywhere' breekt alleen als er geen normale afbreekkans is, dus gewone tekst
   blijft ongemoeid. Let op: word-break: break-all lost dit NIET op, getest.
   ========================================================================== */

.elementor-shortcode,
.elementor-widget-text-editor,
.entry-content {
	overflow-wrap: anywhere;
}

/* Astra zet body { overflow-x: hidden } om datzelfde horizontaal scrollen tegen
   te gaan. Alleen: 'hidden' maakt de body een scrollgebied, en een plakkende
   header meet zich dan aan dát gebied in plaats van aan het venster. Safari op
   de iPhone laat de header daardoor weglopen bij het scrollen.

   Op de html mag het wél. De browser geeft overflow van het wortelelement door
   aan het venster zelf en laat het element daarna met rust, dus er komt geen
   extra scrollgebied bij en de header blijft gewoon plakken. Het knipt precies
   hetzelfde weg als voorheen, en werkt in elke browserversie — anders dan
   overflow-x: clip, dat Safari pas vanaf iOS 16 kent. */

html {
	overflow-x: hidden;
}

body {
	overflow-x: visible;
}

/* ==========================================================================
   SITE HEADER
   Vervangt Elementor-template #258278.
   ========================================================================== */

/* De header scrolt mee met de pagina en blijft niet in beeld.

   Hij plakte hier tot 24 augustus 2026 wel. Daar hing meer aan dan alleen deze
   drie regels: de blokken die verderop plakken — de jaarrail op Over ons, het
   besteloverzicht bij het afrekenen, de galerij op de productpagina — moesten
   allemaal onder de kopbalk beginnen, en assets/js/tijdlijn.js mat daarvoor de
   hoogte en zette die als --bb-kophoogte. Nu er niets meer te ontwijken valt
   beginnen die blokken gewoon bovenaan en is die variabele verdwenen.

   position:relative blijft staan, met de z-index: het mega menu hangt eronder
   met top:100% en moet over de pagina heen vallen. */

.bb-header {
	position: relative;
	z-index: 100;
}

.bb-header__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

/* --- Bovenste rij: logo, zoeken, knoppen, winkelwagen --- */

.bb-header__top {
	background-color: var(--bb-grijs-licht);
	box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

/*
 * De kolomverdeling 27/35/35% komt uit de Elementor-template. Bewust vaste
 * breedtes en geen flex-grow: anders rekt de zoekbalk op tot de volle ruimte.
 */
.bb-header__top .bb-header__inner {
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 76px;
}

.bb-header__brand {
	flex: 0 0 27%;
}

.bb-header__logo-link {
	display: inline-block;
	line-height: 0;
}

/* De klasse staat met opzet achter .bb-header, en dus zwaarder dan nodig lijkt.
   Astra laadt op elke WooCommerce-pagina woocommerce-layout-grid.css, met daarin
   `.woocommerce-page img { max-width: 100% }`. Die selector weegt zwaarder dan
   een losse klasse, waardoor de bovengrens hier verviel en het logo op de
   winkelmand, het afrekenen en de productpagina's uitrekte tot de volle
   kolombreedte. */

.bb-header .bb-header__logo {
	display: block;
	width: 100%;
	max-width: 192px;
	height: auto;
}

/* De link is een blok met alleen het logo erin; geen onderstreping bij hover. */

.bb-logo,
.bb-logo:hover,
.bb-logo:focus-visible {
	text-decoration: none;
}

.bb-header__search {
	flex: 0 0 35%;
	min-width: 0;
}

/* FiboSearch levert eigen markup met een eigen max-width; die overschrijven we. */
.bb-header__search .dgwt-wcas-search-wrapp {
	max-width: none;
}

.bb-header__search .dgwt-wcas-search-wrapp,
.bb-header__search .dgwt-wcas-search-input {
	border-radius: 30px;
}

/*
 * De knoppen staan links in hun kolom, niet tegen de rechterrand: in de
 * Elementor-template had de kolom padding-left 25px met flex-start items.
 */
.bb-header__acties {
	flex: 0 0 35%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/*
	 * In de Elementor-template zaten de drie acties in gelijke subkolommen van
	 * ~125px met het item links erin. Dat komt neer op deze tussenruimte; een
	 * vaste gap is hier eenvoudiger dan de subkolommen nabouwen.
	 */
	gap: 28px;
	padding-left: 25px;
}

/* Winkels en Klantenservice: tekst met een icoon ervoor, geen knop. Dezelfde
   twee staan onderin het uitschuifmenu op mobiel; het icoon komt uit
   bb_service_icoon() zodat ze niet uit elkaar kunnen lopen. */

.bb-header__actie {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bb-zwart);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
}

.bb-header__actie:hover,
.bb-header__actie:focus-visible {
	color: var(--bb-zwart);
	text-decoration: none;
	opacity: 0.75;
}

.bb-header__actie svg {
	flex: 0 0 auto;
}

/* --- Het vergrootglas naast de winkelwagen ---
 *
 * Alleen op een smal scherm, en alleen daar waar assets/js/kopzoek.js meekomt —
 * die zet .bb-header--zoekknop. Zonder dat script staat de zoekbalk gewoon in
 * beeld en zou een knop die niets doet erger zijn dan geen knop. */

.bb-header__zoekknop {
	display: none;
}

.bb-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.bb-knop:hover,
.bb-knop:focus-visible {
	filter: brightness(0.94);
	text-decoration: none;
}

.bb-knop--geel {
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
}

.bb-header__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--bb-zwart);
	padding: 6px 10px 6px 6px;
}

.bb-header__cart:hover,
.bb-header__cart:focus-visible {
	color: var(--bb-zwart);
}

/* --- "Hey, welkom terug!" bij de winkelwagen ---
   Verschijnt wanneer iemand terugkomt met een gevuld mandje. De opmaak staat er
   altijd; assets/js/winkelmand-popup.js haalt het hidden-kenmerk eraf. */

.bb-header__mand {
	position: relative;
	display: flex;
	align-items: center;
}

.bb-mandpopup[hidden] {
	display: none;
}

/* De waas ligt over de pagina maar onder de kaart. Vast ten opzichte van het
   venster, zodat hij het hele scherm dekt en niet meeschuift. */

.bb-mandpopup__waas {
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(0, 0, 0, 0.35);
}

.bb-mandpopup__kaart {
	position: absolute;
	top: calc(100% + 14px);
	right: -10px;
	z-index: 999;
	width: 430px;
	max-width: calc(100vw - 32px);
	padding: 22px 24px 20px;
	border-radius: 12px;
	background: var(--bb-wit);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
	text-align: left;
}

/* Het pijltje naar de winkelwagen. Twee driehoeken over elkaar zou netter zijn
   met een rand, maar de kaart heeft er geen — één volstaat. */

.bb-mandpopup__kaart::before {
	content: "";
	position: absolute;

	/* Recht onder het midden van het winkelwagentje. Dat pictogram is 24 breed
	   met 10 binnenmarge rechts, dus het midden ligt 22px van de rechterrand van
	   het omhulsel; de kaart steekt daar zelf 10px voorbij. */
	right: 32px;
	bottom: 100%;
	border: 11px solid transparent;
	border-bottom-color: var(--bb-geel);
}

.bb-mandpopup__kop {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.bb-mandpopup__tekst {
	margin: 0 0 20px;
	color: #4a4a45;
	font-size: 15px;
	line-height: 1.45;
}

.bb-mandpopup__acties {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.bb-mandpopup__verder {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: #4a4a45;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.bb-mandpopup__verder:hover {
	color: var(--bb-zwart);
}

.bb-mandpopup__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border-radius: 6px;
	background: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.bb-mandpopup__knop:hover,
.bb-mandpopup__knop:focus-visible {
	background: #e9c81f;
	color: var(--bb-zwart);
}

/* Op een smal scherm staat de winkelwagen tegen de rechterrand; dan wordt het
   pijltje daarheen getrokken en spant de kaart over de volle breedte. */

@media (max-width: 600px) {
	/* Vast onder de kopbalk in plaats van onder het pictogram: de kaart is hier
	   breder dan de ruimte die er rechts van de winkelwagen over is, en de
	   kopbalk staat toch al boven de kaart. De 74 pixels zijn de hoogte van de
	   kopbalk op een smal scherm plus tien; hij hing daar eerder aan een gemeten
	   waarde, maar die meting is met de plakkende kopbalk verdwenen. */

	.bb-mandpopup__kaart {
		position: fixed;
		top: 74px;
		right: 16px;
		left: 16px;
		width: auto;
		max-width: none;
		padding: 18px 18px 16px;
	}

	.bb-mandpopup__kaart::before {
		right: 18px;
	}

	.bb-mandpopup__acties {
		gap: 10px;
	}

	.bb-mandpopup__knop {
		padding: 13px 16px;
	}
}

.bb-header__cart-aantal {
	position: absolute;
	top: -2px;
	right: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--bb-zwart);
}

/* --- Onderste rij: het hoofdmenu --- */

.bb-header__nav {
	background-color: var(--bb-grijs-licht);
	padding-bottom: 12px;
}

/* De menubalk loopt over de volle containerbreedte, dus zonder zijpadding. */
.bb-header__nav .bb-header__inner {
	padding-inline: 0;
}

.bb-header__menu-balk {
	background-color: var(--bb-wit);
	border-radius: 34px;
	padding: 6px 11px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 6%);
}

/* --- Het hoofdmenu zelf --- */

.bb-hoofdmenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * De items verdelen de balk in plaats van links aan te schuiven.
 *
 * Met flex-basis auto houdt elk item zijn eigen tekstbreedte en wordt alleen
 * de ruimte die overblijft gelijk verdeeld. Elk item krijgt er dus evenveel
 * bij, waardoor de tussenruimtes overal gelijk blijven. Dat is wat een menu
 * met langere en kortere labels rustig houdt; flex-basis 0 zou van elk item
 * een even brede kolom maken en de tussenruimtes juist ongelijk.
 *
 * Verdelen en niet uitlijnen op beide randen: de balk is een pil met ronde
 * uiteinden, en het eerste en laatste item zouden daar tegenaan komen te
 * liggen. Nu houden ze allebei dezelfde marge als de items onderling.
 */
.bb-hoofdmenu__item {
	flex: 1 1 auto;
	margin: 0;
	/* Statische positie: het paneel meet zich aan .bb-header__nav, niet hieraan. */
	position: static;
}

/*
 * De padding is de kleinste tussenruimte die een item krijgt; wat de balk
 * daarnaast overhoudt komt er via het item bovenop. De link vult het hele
 * item, zodat het klikgebied meegroeit en niet alleen de tekst aanklikbaar is.
 */
.bb-hoofdmenu__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px 20px;
	color: var(--bb-zwart);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1px;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.bb-hoofdmenu__link:hover,
.bb-hoofdmenu__link:focus-visible {
	color: var(--bb-zwart);
	text-decoration: none;
}

.bb-hoofdmenu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: currentColor;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.bb-hoofdmenu__item--open .bb-hoofdmenu__toggle {
	transform: rotate(180deg);
}

/* --- Het uitklappaneel --- */

.bb-mega {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 90;
	background-color: var(--bb-wit);
	box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
	/* Gesloten toestand: niet zichtbaar en niet bereikbaar voor toetsenbord. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.bb-hoofdmenu__item--open .bb-mega {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.bb-mega__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

.bb-mega__kolommen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-block: 26px 20px;
}

.bb-mega__kolom {
	padding-inline: 30px;
	border-right: 1px solid #e6e6e6;
}

.bb-mega__kolom:first-child {
	padding-left: 10px;
}

.bb-mega__kolom:last-child {
	border-right: 0;
}

.bb-mega__kop {
	margin: 0 0 18px;
	color: #8a8a8a;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.bb-mega__kop a {
	color: inherit;
	text-decoration: none;
}

.bb-mega__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-mega__links li {
	margin: 0 0 12px;
}

.bb-mega__links a {
	color: #2b2b2b;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
}

.bb-mega__links a:hover,
.bb-mega__links a:focus-visible {
	color: var(--bb-zwart);
	text-decoration: underline;
}

.bb-mega__kolom--promo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 240px;
}

/* --- USP-balk onderaan het paneel --- */

/* De balk loopt over de volle schermbreedte, de inhoud volgt de container. */
.bb-mega__uspbalk {
	background-color: #ededed;
}

.bb-mega__usps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: var(--bb-breedte);

	/* margin-block op 0: een <ul> heeft van zichzelf ruimte boven en onder, en
	   die valt buiten het grijze vlak omdat de omhullende div geen rand of
	   vulling heeft. Dat gaf een witte strook onder de balk. */
	margin-block: 0;
	margin-inline: auto;
	padding: 16px 30px;
	list-style: none;
}

.bb-mega__usp {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.bb-mega__usp-icoon {
	flex: 0 0 auto;
	color: var(--bb-zwart);
}

.bb-mega__usp-tekst {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.bb-mega__usp-tekst strong {
	color: var(--bb-zwart);
	font-size: 14px;
	font-weight: 700;
}

.bb-mega__usp-tekst span {
	color: #6f6f6f;
	font-size: 12px;
}

/* --- Tablet en mobiel ---
 *
 * Onder deze breedte week het origineel sterk af: hamburger links, logo
 * gecentreerd, winkelwagen rechts, zoekbalk daaronder over de volle breedte.
 * De knoppen Winkels/Contact en de menubalk werden verborgen.
 */

/* De hamburger hoort alleen op smalle schermen; op desktop staat de menubalk
   er gewoon. Hij staat in de opmaak vóór het logo en zou daar zonder dit
   regeltje naast komen te staan. */
.bb-header__burger {
	display: none;
}

/* Astra geeft elke <button> een lichte slagschaduw. Bij een knop met alleen een
   icoon en geen achtergrond tekent die een zwevend vlak achter het icoon; op de
   grijze headerbalk was dat goed te zien. */
.bb-header__burger,
.bb-header__zoekknop,
.bb-mobielmenu__sluit,
.bb-mobielmenu__verder,
.bb-mobielmenu__terug {
	box-shadow: none;
}

@media (max-width: 921px) {
	/* Op een telefoon is de kopbalk wit, niet lichtgrijs. Het logo staat daar
	   in het midden en de balk sluit op de productpagina direct aan op de foto;
	   wit maakt er één schoon vlak van. De kale kopbalk van de afrekenpagina
	   gaat mee, zodat het logo overal op hetzelfde wit staat. */

	.bb-header__top,
	.bb-header--kaal {
		background-color: var(--bb-wit);
	}

	.bb-header__top .bb-header__inner {
		display: grid;
		grid-template-columns: 44px 1fr 44px;
		grid-template-areas:
			"toggle logo   cart"
			"search search search";
		align-items: center;

		/* Krap gehouden: de kopbalk staat op een telefoon in twee rijen en dat is
		   een flinke hap van het eerste scherm. Zeven boven en onder plus zeven
		   tussen de rijen scheelt bij elkaar twaalf pixels ten opzichte van tien
		   en tien. */
		gap: 7px 8px;
		min-height: 0;
		padding-block: 7px;
	}

	.bb-header__burger {
		grid-area: toggle;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--bb-zwart);
		cursor: pointer;
	}

	.bb-header__brand {
		grid-area: logo;
		width: auto;
		justify-self: stretch;
		/* De link is inline-block; text-align centreert die binnen de kolom. */
		text-align: center;
	}

	.bb-header .bb-header__logo {
		max-width: 150px;
	}

	.bb-header__acties {
		grid-area: cart;
		gap: 0;
		padding-left: 0;
		justify-content: flex-end;
	}

	/* Geen Winkels/Klantenservice op smalle schermen, net als in het origineel;
	   die staan daar onderin het uitschuifmenu. */
	.bb-header__acties .bb-header__actie {
		display: none;
	}

	.bb-header__search {
		grid-area: search;
		flex: none;
	}

	/* Het hoofdmenu zit op mobiel in het uitschuifmenu achter de hamburger. */
	.bb-header__nav {
		display: none;
	}

	/* --- De zoekbalk achter een vergrootglas ---
	   De balk stond als vaste tweede rij onder het logo en nam daarmee een derde
	   van de kopbalk in beslag, terwijl je op een productpagina meestal niet
	   meer aan het zoeken bent. Hij zit nu achter de knop naast de winkelwagen
	   en schuift eronder open zodra je erop drukt.

	   Alles hangt aan .bb-header--zoekknop, die assets/js/kopzoek.js zet. Blijft
	   dat script weg, dan verandert er niets en staat de balk er gewoon. De knop
	   komt alleen op de productpagina's, zie site-header.php. */

	.bb-header--zoekknop .bb-header__zoekknop {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--bb-zwart);
		cursor: pointer;
	}

	/* Dicht: alleen de bovenste rij. De rasterindeling gaat mee terug naar één
	   rij, anders houdt de tussenruimte van het raster een lege strook over.

	   De rechterkolom is nu breed genoeg voor twee knoppen naast elkaar; met de
	   vaste 44px van de basisregel liep de winkelwagen de header uit. */

	.bb-header--zoekknop .bb-header__top .bb-header__inner {
		grid-template-columns: 44px minmax(0, 1fr) auto;
		grid-template-areas: "toggle logo cart";
	}

	.bb-header--zoekknop .bb-header__acties {
		gap: 2px;
	}

	.bb-header--zoekknop .bb-header__search {
		display: none;
	}

	.bb-header--zoekknop.bb-header--zoek-open .bb-header__top .bb-header__inner {
		grid-template-areas:
			"toggle logo   cart"
			"search search search";
	}

	.bb-header--zoekknop.bb-header--zoek-open .bb-header__search {
		display: block;
	}

}

/* ==========================================================================
   UITSCHUIFMENU OP MOBIEL
   Vervangt de plugin ShiftNav. Zie template-parts/header/mobiel-menu.php en
   assets/js/mobielmenu.js.
   ========================================================================== */

.bb-mobielmenu {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	background-color: var(--bb-wit);

	/* Dicht: onzichtbaar én onbereikbaar voor toetsenbord en schermlezer.
	   display:none zou geen overgang toelaten, visibility wel. */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.bb-mobielmenu.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
}

/* De pagina eronder mag niet meescrollen zolang het paneel open staat. */
body.bb-menu-open {
	overflow: hidden;
}

/* --- Kop met logo en sluitknop --- */

.bb-mobielmenu__kop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 32px 56px;
	border-bottom: 1px solid #e6e6e6;
}

.bb-mobielmenu__logo-link {
	display: block;
	line-height: 0;
}

/* De klasse staat met opzet achter .bb-mobielmenu, om dezelfde reden als bij
   .bb-header .bb-header__logo hierboven: Astra laadt op elke WooCommerce-pagina
   woocommerce-layout-grid.css, en de regels daarin voor `.woocommerce-page img`
   wegen zwaarder dan een losse klasse. Het logo rekte daardoor op de
   categorie-, product- en winkelmandpagina's uit tot ver over de kop. */

.bb-mobielmenu .bb-mobielmenu__logo {
	display: block;
	width: auto;
	height: 34px;
}

.bb-mobielmenu__sluit {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bb-zwart);
	cursor: pointer;
}

/* --- De lijst --- */

.bb-mobielmenu__body {
	flex: 1 1 auto;
	overflow-y: auto;

	/* Doorscrollen aan het einde van de lijst mag de pagina eronder niet in
	   beweging zetten. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.bb-mobielmenu__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-mobielmenu__item {
	display: flex;
	align-items: stretch;
	margin: 0;
	border-bottom: 1px solid #ececec;
}

.bb-mobielmenu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-height: 52px;
	padding: 8px 12px;
	color: var(--bb-zwart);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.bb-mobielmenu__link:hover,
.bb-mobielmenu__link:focus-visible {
	color: var(--bb-zwart);
	text-decoration: none;
}

/* Een kop zonder bestemming is een <span>; de regel opent dan het subpaneel. */
span.bb-mobielmenu__link {
	cursor: pointer;
}

/* De pijl staat in een eigen grijs vlak, als een tweede aanraakdoel naast de
   link naar de categoriepagina zelf. */
.bb-mobielmenu__verder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 54px;
	padding: 0;
	border: 0;
	border-left: 1px solid #ececec;
	background-color: var(--bb-grijs-licht);
	color: var(--bb-zwart);
	cursor: pointer;
}

.bb-mobielmenu__item--verder {
	box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
}

.bb-mobielmenu__link--vast {
	font-size: 15px;
}

.bb-mobielmenu__icoon {
	flex: 0 0 auto;
}

/* --- Het subpaneel ---
 *
 * Geen tweede laag die eroverheen schuift, maar de hoofdlijst die wijkt: alle
 * regels behalve de geopende gaan uit beeld, en het subpaneel neemt hun plaats
 * in. Dat scheelt absolute positionering binnen een scrollgebied, waar een
 * subpaneel meeschuift met hoe ver de lijst eronder gescrold staat.
 */

.bb-mobielmenu__sub {
	display: none;
}

.bb-mobielmenu__body.is-diep .bb-mobielmenu__item:not(.is-open) {
	display: none;
}

.bb-mobielmenu__item.is-open {
	display: block;
	border-bottom: 0;
	box-shadow: none;
}

.bb-mobielmenu__item.is-open > .bb-mobielmenu__link,
.bb-mobielmenu__item.is-open > .bb-mobielmenu__verder {
	display: none;
}

.bb-mobielmenu__item.is-open > .bb-mobielmenu__sub {
	display: block;
	animation: bb-mobielmenu-in 0.2s ease;
}

@keyframes bb-mobielmenu-in {
	from {
		opacity: 0;
		transform: translateX(14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-mobielmenu,
	.bb-mobielmenu__item.is-open > .bb-mobielmenu__sub {
		transition: none;
		animation: none;
	}
}

.bb-mobielmenu__terug {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid #ececec;
	background-color: var(--bb-grijs-licht);
	color: #4a4a4a;
	font-size: 14px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.bb-mobielmenu__overzicht {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 8px 12px;
	border-bottom: 1px solid #ececec;
	color: var(--bb-zwart);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
}

.bb-mobielmenu__groep {
	padding: 18px 12px 8px;
	border-bottom: 1px solid #ececec;
}

/* Zelfde grijs als de kolomkoppen in het mega menu: het is dezelfde kop. */
.bb-mobielmenu__groepkop {
	margin: 0 0 6px;
	color: #8a8a8a;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.bb-mobielmenu__groepkop a {
	color: inherit;
	text-decoration: none;
}

.bb-mobielmenu__groeplinks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-mobielmenu__groeplinks li {
	margin: 0;
}

.bb-mobielmenu__groeplinks a {
	display: block;
	padding: 10px 0;
	color: #2b2b2b;
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
}

/* Een derde niveau is er nu niet, maar het menu staat een beheerder vrij; dan
   springt het in plaats van weg te vallen. */
.bb-mobielmenu__groeplinks .bb-mobielmenu__groeplinks {
	padding-left: 14px;
}

/* Boven de breedte waarop de menubalk terugkomt heeft het paneel geen functie.
   Het staat dan nooit open, maar dit sluit ook uit dat het per ongeluk toch
   ergens over de pagina valt. */
@media (min-width: 922px) {
	.bb-mobielmenu {
		display: none;
	}
}

/* ==========================================================================
   SITE FOOTER
   Vervangt Elementor-template #254274.
   ========================================================================== */

.bb-footer {
	background-color: var(--bb-zwart);
}

.bb-footer__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

.bb-footer__main {
	background-color: var(--bb-zwart);
	padding-block: 6% 4%;
}

.bb-footer__main .bb-footer__inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr) 1.6fr;
	gap: 40px;
	align-items: start;
}

/* --- Kolom met logo, introtekst en socials --- */

.bb-footer__logo {
	display: block;
	width: 50px;
	height: auto;
	margin-bottom: 24px;
}

.bb-footer__about {
	color: var(--bb-wit);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.65;
	margin: 0 0 32px;
}

.bb-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-footer__socials li {
	margin: 0;
}

.bb-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 3px;
	color: var(--bb-wit);
	transition: opacity 0.15s ease;
}

.bb-social:hover,
.bb-social:focus-visible {
	opacity: 0.8;
	color: var(--bb-wit);
}

.bb-social--facebook  { background-color: #3b5998; }
.bb-social--youtube   { background-color: #cd201f; }
.bb-social--tiktok    { background-color: #6a6a6a; }
.bb-social--pinterest { background-color: #bd081c; }
.bb-social--instagram { background-color: #3f3f3f; }

/* --- Linkkolommen --- */

.bb-footer__heading {
	color: var(--bb-wit);
	font-size: 16px;
	font-weight: 900;
	line-height: 1.3;
	margin: 0 0 8px;
}

/* De kop is een knop (voor het inklappen op een telefoon, zie hieronder), maar
   moet er op een breed scherm uitzien als de kop die hij altijd was. Astra geeft
   elke knop een achtergrond, binnenmarge en ronding; die gaan er hier af. Met
   .bb-footer ervoor, zodat deze regel zwaarder weegt dan die van Astra. */

.bb-footer .bb-footer__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: none;
	cursor: default;
}

.bb-footer .bb-footer__toggle:hover,
.bb-footer .bb-footer__toggle:focus {
	background: none;
	color: inherit;
}

.bb-footer__pijl {
	display: none;
	flex: none;
	transition: transform 0.2s ease;
}

.bb-footer__rule {
	display: block;
	width: 64px;
	height: 2px;
	background-color: var(--bb-geel);
	margin-bottom: 22px;
}

.bb-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-footer__menu li {
	margin: 0 0 12px;
}

.bb-footer__menu a {
	color: var(--bb-wit);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.bb-footer__menu a:hover,
.bb-footer__menu a:focus-visible {
	color: var(--bb-geel);
	text-decoration: underline;
}

/* --- Gele balk onderaan --- */

.bb-footer__bar {
	background-color: var(--bb-geel);
	padding-block: 1% 0;
}

.bb-footer__copyright {
	color: var(--bb-zwart);
	font-size: 13px;
	font-style: italic;
	font-weight: 600;
	margin: 0;
	padding-bottom: 12px;
}

/* --- Tablet --- */

@media (max-width: 921px) {
	.bb-footer__main .bb-footer__inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}

	.bb-footer__col--newsletter {
		grid-column: 1 / -1;
	}

	/* De nieuwsbrief direct onder het logo en de introtekst, en niet pas na de
	   drie menu's: daar stond hij onderaan de pagina, buiten beeld. */
	.bb-footer__col--about {
		order: -2;
	}

	.bb-footer__col--newsletter {
		order: -1;
	}
}

/* --- Mobiel --- */

@media (max-width: 544px) {
	.bb-footer__main .bb-footer__inner {
		grid-template-columns: 1fr;
	}

	.bb-footer__logo {
		width: 48px;
	}

	.bb-footer__heading,
	.bb-footer__menu a {
		font-size: 12px;
	}

	/* --- Inklapbare menu's ---
	   Zoals bij Happybeds: elke kolom een rij met de kop links en een pijltje
	   rechts, gescheiden door een dunne lijn. De klasse bb-footer--inklapbaar
	   zet assets/js/footer-menu.js; zonder script blijft alles open.

	   Op 16px en niet op de 12px van hierboven: een kop die je moet aantikken,
	   heeft een ruimer doel nodig dan een regel tekst. */

	.bb-footer--inklapbaar .bb-footer__main .bb-footer__inner {
		row-gap: 0;
	}

	.bb-footer--inklapbaar .bb-footer__col--about,
	.bb-footer--inklapbaar .bb-footer__col--newsletter {
		margin-bottom: 32px;
	}

	.bb-footer--inklapbaar .bb-footer__col--links {
		border-top: 1px solid rgba(255, 255, 255, 0.2);
	}

	/* De laatste menukolom: in de bron staat de nieuwsbrief erachter (op het
	   scherm staat hij erboven, door order), dus :last-of-type raakt die niet. */
	.bb-footer--inklapbaar .bb-footer__col--links:has(+ .bb-footer__col--newsletter) {
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}

	.bb-footer--inklapbaar .bb-footer__heading {
		margin: 0;
		font-size: 16px;
	}

	.bb-footer--inklapbaar .bb-footer__toggle {
		padding-block: 16px;
		cursor: pointer;
	}

	.bb-footer--inklapbaar .bb-footer__pijl {
		display: block;
	}

	.bb-footer--inklapbaar .is-open .bb-footer__pijl {
		transform: rotate(180deg);
	}

	/* Het gele streepje onder de kop hoort bij een kolom die open staat. In een
	   rij met dichte koppen stonden er anders drie losse streepjes tussen de
	   lijnen. */
	.bb-footer--inklapbaar .bb-footer__rule,
	.bb-footer--inklapbaar .bb-footer__col--links:not(.is-open) .bb-footer__menu-vak {
		display: none;
	}

	.bb-footer--inklapbaar .bb-footer__menu {
		padding-bottom: 12px;
	}

	.bb-footer--inklapbaar .bb-footer__menu a {
		font-size: 14px;
	}

	.bb-footer__copyright {
		font-size: 8px;
		text-align: center;
	}
}

/* ==========================================================================
   CAMPAGNEPAGINA
   Vervangt de losse Elementor-opmaak van Black Friday (#229883), Cyber Week
   (#282362), de dealhub (#52974), Vakantiegeld (#269420) en Moederdag (#269091).

   Alle maten hieronder zijn uitgemeten uit de _elementor_data van die pagina's,
   niet geschat. De accentkleur is per campagne instelbaar en komt als inline
   CSS-variabele mee vanuit page-campagne.php.
   ========================================================================== */

.bb-campagne {
	--bb-camp-accent: var(--bb-zwart);
	--bb-camp-op-accent: var(--bb-wit);
	--bb-camp-radius: 20px;
	--bb-camp-sectie: 50px;

	font-family: Roboto, sans-serif;
}

/* Campagnes liepen in Elementor van rand tot rand. Astra's contentcontainer
   zou ze terugduwen naar 1140px, dus die zetten we hier open; de blokken
   regelen hun eigen breedte via .bb-campagne__inner. */

.page-template-page-campagne .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.page-template-page-campagne .site-content .ast-container {
	display: block;
}

.bb-campagne__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

/* --- Knop ---
   23px, gewicht 500, zwarte tekst op geel, hoekradius 10px. */

.bb-camp-knop {
	display: inline-block;
	margin-top: 20px;
	padding: 12px 28px;
	border-radius: 10px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 23px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease-in-out;
}

.bb-camp-knop:hover,
.bb-camp-knop:focus-visible {
	color: var(--bb-zwart);
	filter: brightness(0.92);
}

.bb-camp-knop--groot {
	padding: 16px 40px;
}

/* --- Banner --- */

.bb-camp-banner {
	padding-block: 24px;
	background-color: var(--bb-camp-accent);
	text-align: center;
}

.bb-camp-banner__kop {
	margin: 0;
	color: var(--bb-camp-op-accent);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.bb-camp-banner--groot .bb-camp-banner__kop {
	font-size: 80px;
}

/* --- Hero --- */

.bb-camp-hero {
	padding-block: var(--bb-camp-sectie);
	background-color: var(--bb-camp-accent);
	color: var(--bb-camp-op-accent);
}

.bb-camp-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

.bb-camp-hero--beeld-links .bb-camp-hero__tekst {
	order: 2;
}

.bb-camp-hero__kop {
	margin: 0 0 16px;
	color: inherit;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.1;
}

.bb-camp-hero__body {
	font-size: 19px;
	line-height: 1.5;
}

.bb-camp-hero__afbeelding {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bb-camp-radius);
}

/* --- Aftelklok --- */

.bb-camp-aftelklok {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

.bb-camp-aftelklok[hidden] {
	display: none;
}

.bb-camp-aftelklok__deel {
	min-width: 72px;
	padding: 10px 8px;
	border-radius: 10px;
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
	text-align: center;
}

.bb-camp-aftelklok__getal {
	display: block;
	font-size: 33px;
	font-weight: 700;
	line-height: 1.1;
	/* Vaste cijferbreedte, anders springt de klok bij elke tik. */
	font-variant-numeric: tabular-nums;
}

.bb-camp-aftelklok__label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
}

/* --- Deals --- */

.bb-camp-deals {
	padding-block: var(--bb-camp-sectie);
	background-color: var(--bb-camp-accent);
}

.bb-camp-deals__kop {
	margin: 0 0 30px;
	color: var(--bb-camp-op-accent);
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}

.bb-camp-deals__raster {
	display: grid;
	grid-template-columns: repeat(var(--bb-camp-kolommen, 4), 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-camp-deal {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-radius: var(--bb-camp-radius);
	background-color: var(--bb-wit);
	text-align: center;
}

.bb-camp-deal__beeld {
	position: relative;
}

/* Een badge zonder afbeelding heeft niets om overheen te liggen en gaat dan
   gewoon in de tekststroom staan. */

.bb-camp-deal__beeld--leeg .bb-camp-deal__badge {
	position: static;
	display: inline-block;
}

.bb-camp-deal__afbeelding {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.bb-camp-deal__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 6px 12px;
	border-radius: 10px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 33px;
	font-weight: 700;
	line-height: 1;
}

.bb-camp-deal__titel {
	margin: 16px 0 8px;
	font-size: 20px;
	font-weight: 600;
}

.bb-camp-deal__tekst {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
}

.bb-camp-deal__usp {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}

/* De knop zakt naar de onderkant, zodat knoppen van tegels met ongelijke
   tekstlengte toch op één lijn staan. */

.bb-camp-deal__knop {
	margin-top: auto;
	align-self: center;
}

/* --- Oproepbalk --- */

.bb-camp-cta {
	padding-block: var(--bb-camp-sectie);
	text-align: center;
}

.bb-camp-cta__tekst {
	font-size: 19px;
	font-weight: 700;
}

/* --- Tekst met beeld --- */

.bb-camp-tekstbeeld {
	padding-block: var(--bb-camp-sectie);
}

.bb-camp-tekstbeeld__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

.bb-camp-tekstbeeld--beeld-rechts .bb-camp-tekstbeeld__beeld {
	order: 2;
}

.bb-camp-tekstbeeld__afbeelding {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bb-camp-radius);
}

.bb-camp-tekstbeeld__kop {
	margin: 0 0 16px;
	font-size: 30px;
	font-weight: 600;
}

.bb-camp-tekstbeeld__body {
	font-size: 19px;
	line-height: 1.6;
}

/* --- USP-drieluik --- */

.bb-camp-usp {
	padding-block: var(--bb-camp-sectie);
	background-color: var(--bb-grijs-licht);
}

.bb-camp-usp__kop {
	margin: 0 0 12px;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}

.bb-camp-usp__intro {
	margin-bottom: 30px;
	font-size: 19px;
	text-align: center;
}

.bb-camp-usp__raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-camp-usp__afbeelding {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.bb-camp-usp__titel {
	margin: 16px 0 8px;
	font-size: 20px;
	font-weight: 600;
}

.bb-camp-usp__tekst {
	font-size: 19px;
	line-height: 1.5;
}

/* --- Shop per categorie --- */

.bb-camp-categorieen {
	padding-block: var(--bb-camp-sectie);
}

.bb-camp-categorieen__kop {
	margin: 0 0 8px;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}

.bb-camp-categorieen__intro {
	margin: 0 0 24px;
	font-size: 19px;
	text-align: center;
}

.bb-camp-categorieen__zoeken {
	max-width: 640px;
	margin: 0 auto 30px;
}

.bb-camp-categorieen__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-camp-categorie__link {
	display: block;
	padding: 16px;
	border-radius: var(--bb-camp-radius);
	background-color: var(--bb-grijs-licht);
	color: var(--bb-zwart);
	text-align: center;
	text-decoration: none;
}

.bb-camp-categorie__titel {
	display: block;
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 600;
}

.bb-camp-categorie__afbeelding {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* --- Producten --- */

.bb-camp-producten {
	padding-block: var(--bb-camp-sectie);
}

.bb-camp-producten__kop {
	margin: 0 0 24px;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}

/* --- Veelgestelde vragen ---
   Gedeeld door het campagne- en het tekstpagina-template. De donkere variant
   (#393939) is hoe het er in de Elementor-campagnes uitzag. */

.bb-faq {
	padding-block: var(--bb-camp-sectie, 50px);
}

.bb-faq--donker {
	background-color: #393939;
	color: var(--bb-wit);
}

.bb-faq__kop {
	margin: 0 0 24px;
	font-size: 30px;
	font-weight: 600;
	text-align: center;
}

.bb-faq--donker .bb-faq__kop {
	color: var(--bb-wit);
}

.bb-faq__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.bb-faq--donker .bb-faq__item {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.bb-faq__vraag {
	padding: 16px 0;
	font-size: 19px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* Het standaard driehoekje van <summary> weghalen; we tekenen zelf een + */

.bb-faq__vraag::-webkit-details-marker {
	display: none;
}

.bb-faq__vraag::after {
	content: "+";
	float: right;
	font-size: 24px;
	line-height: 1;
}

.bb-faq__item[open] .bb-faq__vraag::after {
	content: "\2013";
}

.bb-faq__antwoord {
	padding-bottom: 16px;
	font-size: 19px;
	line-height: 1.6;
}

/* --- SEO-tekst --- */

.bb-camp-seo {
	padding-block: var(--bb-camp-sectie);
	font-size: 15px;
	line-height: 1.7;
}

.bb-camp-seo--donker {
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

.bb-camp-seo--donker a {
	color: var(--bb-geel);
}

/* --- Tablet ---
   De Elementor-campagnes zakten hier naar twee kolommen. */

@media (max-width: 1024px) {
	.bb-camp-deals__raster,
	.bb-camp-categorieen__raster {
		grid-template-columns: repeat(2, 1fr);
	}

	.bb-camp-usp__raster {
		grid-template-columns: 1fr;
	}

	.bb-camp-banner--groot .bb-camp-banner__kop {
		font-size: 48px;
	}
}

/* --- Mobiel --- */

@media (max-width: 544px) {
	.bb-campagne {
		--bb-camp-sectie: 30px;
	}

	.bb-camp-hero__inner,
	.bb-camp-tekstbeeld__inner {
		grid-template-columns: 1fr;
	}

	/* Op één kolom hoort het beeld altijd boven de tekst, ongeacht de
	   ingestelde volgorde voor desktop. */

	.bb-camp-hero--beeld-links .bb-camp-hero__tekst,
	.bb-camp-tekstbeeld--beeld-rechts .bb-camp-tekstbeeld__beeld {
		order: 0;
	}

	.bb-camp-banner__kop,
	.bb-camp-banner--groot .bb-camp-banner__kop {
		font-size: 30px;
	}

	.bb-camp-hero__kop {
		font-size: 30px;
	}

	.bb-camp-knop {
		font-size: 19px;
	}

	.bb-camp-deal__badge {
		font-size: 24px;
	}

	.bb-camp-aftelklok__deel {
		min-width: 60px;
	}

	.bb-camp-aftelklok__getal {
		font-size: 24px;
	}
}

/* ==========================================================================
   TEKSTPAGINA
   Titel, intro, productrij, vervolgtekst, FAQ.

   Vervangt de Elementor-opbouw van de SEO-pagina's (#16748 vlakke-boxspring,
   #17007 grijze-boxspring en soortgelijke): een tekstwidget, een
   products-widget en nog een tekstwidget, waarbij de intro-alinea onderaan
   nog eens herhaald werd.
   ========================================================================== */

.bb-tekstpagina {
	--bb-tp-sectie: 40px;

	/* Astra zet .ast-container op display:flex voor de indeling content +
	   sidebar. Zonder breedte krimpt dit artikel als flex-item naar zijn
	   inhoud en blijft het links staan in plaats van gecentreerd. */
	width: 100%;
	min-width: 0;
}

.bb-tekstpagina__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

.bb-tekstpagina__kop {
	padding-block: var(--bb-tp-sectie) 0;
}

.bb-tekstpagina__titel {
	margin: 0 0 16px;
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
}

/* De intro krijgt iets meer lucht dan de lopende tekst: het is de enige alinea
   die boven de producten staat en moet als samenvatting te lezen zijn. */

.bb-tekstpagina__intro {
	font-size: 19px;
	line-height: 1.6;
}

.bb-tekstpagina__intro p:last-child {
	margin-bottom: 0;
}

.bb-tekstpagina__producten {
	padding-block: var(--bb-tp-sectie);
}

.bb-tekstpagina__producten-kop {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 600;
}

.bb-tekstpagina__tekst {
	padding-bottom: var(--bb-tp-sectie);
	font-size: 16px;
	line-height: 1.7;
}

.bb-tekstpagina__tekst h2 {
	margin-top: 32px;
	font-size: 24px;
	font-weight: 600;
}

.bb-tekstpagina__tekst h3 {
	margin-top: 24px;
	font-size: 20px;
	font-weight: 600;
}

.bb-tekstpagina__faq {
	padding-top: 0;
}

.bb-tekstpagina__faq .bb-faq__kop {
	text-align: left;
}

@media (max-width: 544px) {
	.bb-tekstpagina {
		--bb-tp-sectie: 24px;
	}

	.bb-tekstpagina__titel {
		font-size: 28px;
	}

	.bb-tekstpagina__intro {
		font-size: 17px;
	}
}

/* ==========================================================================
   HOMEPAGE
   Vervangt Elementor-pagina #256983.

   Alle maten komen uit de _elementor_data van die pagina: hero 320/380px hoog
   met radius 20, categorietegels 155px met radius 15, modellen 430px, de
   keuzehulp-sectie 700px. Kleuren idem — #3D3D3D voor sectiekoppen, #5C5C5C en
   #313131 voor de uitgelichte blokken, #969696 achter de matraskaarten,
   #C2C2C2 voor het woord KEUZEHULP.
   ========================================================================== */

.bb-home {
	--bb-home-sectie: 40px;

	/* Astra zet .ast-container op display:flex; zonder breedte krimpt dit blok
	   als flex-item en blijft het links staan. Zie ook .bb-tekstpagina. */
	width: 100%;
	min-width: 0;
	font-family: Roboto, sans-serif;
}

.page-template-page-home .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.bb-home__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

.bb-home__kop {
	margin: var(--bb-home-sectie) 0 16px;
	color: #3d3d3d;
	font-size: 25px;
	font-weight: 600;
}

/* --- Pil-knop met pijltje ---
   In Elementor een icon-box met fa-arrow-alt-circle-right ernaast. */

.bb-home-pil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 30px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
}

.bb-home-pil--zwart,
.bb-home-tegel .bb-home-pil {
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

/* In de matraskaarten juist geel met zwarte tekst. */

.bb-home-matras .bb-home-pil {
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
}

.bb-home-pijl {
	flex: none;
}

/* --- 1. USP-balk --- */

.bb-home-usps {
	background-color: var(--bb-grijs-licht);
	font-size: 13px;
}

.bb-home-usps__item {
	flex: none;
	padding: 10px 24px;
	white-space: nowrap;
}

.bb-home-usps__item a {
	color: inherit;
	text-decoration: none;
}

/* --- Carrousel ---
   Het schuiven doet de browser met scroll-snap; carrousel.js voegt alleen de
   knoppen en het automatisch doorschuiven toe. Zonder JavaScript blijft het
   een rij die je met de vinger kunt schuiven. */

.bb-carrousel {
	position: relative;
}

.bb-carrousel__spoor {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	list-style: none;
}

.bb-carrousel__spoor::-webkit-scrollbar {
	display: none;
}

.bb-carrousel__spoor > * {
	scroll-snap-align: start;
}

.bb-carrousel--past .bb-carrousel__spoor {
	justify-content: center;
	overflow-x: visible;
}

.bb-carrousel__knop {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	color: var(--bb-zwart);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

.bb-carrousel__knop--vorige {
	left: 4px;
}

.bb-carrousel__knop--volgende {
	right: 4px;
}

/* --- 2. Categorierij ---
   De rij snelkoppelingen boven de hero. Elk item is een omlijst vierkant met de
   titel eronder.

   Op een breed scherm een raster dat de volle sitebreedte vult, zodat de rij
   links en rechts uitlijnt met de banners eronder. Met kolommen van 1fr in
   plaats van een vaste 126px: acht vaste tegels met tussenruimte zijn samen net
   breder dan de 1100px binnen de marge, en dan zou er een tegel afvallen.

   Geen bb-carrousel hier: die zet knoppen bij zodra het niet past, en bovenaan
   de homepage hoort deze rij stil te staan. Onder de 900px worden de tegels te
   klein om te lezen; daar wordt het een schuifrij die je met de vinger bedient. */

.bb-home-categorierij {
	padding-top: 20px;
}

.bb-home-categorierij__rij {
	display: grid;

	/* Eén rij, hoeveel categorieën er ook staan, allemaal even breed. */
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-home-categorierij__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: #3d3d3d;
	text-decoration: none;
}

.bb-home-categorierij__beeld {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	padding: 12px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

/* De productfoto's verschillen sterk in verhouding; contain houdt ze heel. */

.bb-home-categorierij__afbeelding {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.bb-home-categorierij__titel {
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
}

/* Op een breed scherm past de rij en valt er niets te schuiven. */

.bb-home-categorierij__pijl {
	display: none;
}

/* Onder de 900px een schuifrij: vaste tegels naast elkaar, met scroll-snap
   zodat hij netjes per tegel stopt. De scrollbalk blijft verborgen. */

@media (max-width: 900px) {
	.bb-home-categorierij__rij {
		display: flex;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;

		/* Ruimte onder de tegels zodat de titels niet tegen de rand plakken. */
		padding-bottom: 4px;
	}

	.bb-home-categorierij__rij::-webkit-scrollbar {
		display: none;
	}

	.bb-home-categorierij__item {
		flex: 0 0 104px;
		scroll-snap-align: start;
	}

	/* Het pijltje maakt zichtbaar dat de rij verder loopt. Het staat over de
	   tegels heen, halverwege het vierkant van 104px, met een vervaging ernaast
	   zodat de rij eronder lijkt door te lopen. carrousel.js verbergt het zodra
	   je aan het eind bent. */

	.bb-home-categorierij__houder {
		position: relative;
	}

	.bb-home-categorierij__pijl {
		position: absolute;
		top: 52px;
		right: 12px;
		z-index: 2;
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 1px solid #e3e3e3;
		border-radius: 50%;
		background-color: var(--bb-wit);
		box-shadow: 0 1px 6px rgb(0 0 0 / 15%);
		color: var(--bb-zwart);
		cursor: pointer;
		transform: translateY(-50%);
	}

	.bb-home-categorierij__pijl[hidden] {
		display: none;
	}

	.bb-home-categorierij__pijl::before {
		content: "";
		position: absolute;
		top: -20px;
		right: 34px;
		width: 44px;
		height: 74px;
		background: linear-gradient(to right, rgb(255 255 255 / 0), var(--bb-wit));
		pointer-events: none;
	}
}

/* --- 3. Hero --- */

.bb-home-hero {
	padding-top: 20px;
}

.bb-home-hero__inner {
	display: grid;

	/* Rechterkolom op een vaste 400px; de linker vult de rest. */
	grid-template-columns: 1fr 400px;
	gap: 20px;
}

.bb-home-hero__groot,
.bb-home-hero__klein {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 20px;
	background-position: center;
	background-size: cover;
}

.bb-home-hero__groot {
	min-height: 320px;
}

.bb-home-hero__klein {
	min-height: 380px;
}

/* --- De klikbare laag over een banner ---
   Voor blokken waar de afbeelding de achtergrond is; zie bb_beeldlink() in
   inc/blok-helpers.php. Hij vult het blok en ligt onder de inhoud, zodat de
   knop en het label er gewoon overheen blijven werken. De hoekradius erft hij
   over, anders steekt hij bij een afgerond blok in de hoeken uit. */

.bb-beeldlink {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Alles wat in de banner staat komt boven die laag. */

.bb-home-hero__label,
.bb-home-hero__body {
	position: relative;
	z-index: 2;
}

.bb-home-hero__label {
	position: absolute;
	top: 20px;
	left: 0;
	padding: 10px 20px 10px 25px;
	border-radius: 0 20px 20px 0;
	background-color: var(--bb-wit);
	font-size: 15px;
	line-height: 1.2;
}

.bb-home-hero__label p {
	margin: 0;
}

.bb-home-hero__body {
	padding: 25px;
}

.bb-home-hero__kop {
	margin: 0 0 12px;
	color: var(--bb-wit);
	font-size: 25px;
	font-weight: 600;
}

/* --- 4. Trustpilot --- */

.bb-home-trust {
	padding-block: 16px;
}

/* --- 5. Categorietegels --- */

.bb-home-categorieen__raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-home-tegel {
	display: flex;
	min-height: 155px;
	overflow: hidden;
	border-radius: 15px;
	background-color: var(--bb-geel);

	/* Elementor zette de illustratie op ware grootte linksboven, waardoor hij
	   buiten de tegel viel. Rechts uitlijnen houdt hem heel; 130% van de
	   tegelhoogte maakt hem groter zonder dat het product wegvalt. */
	background-position: right center;
	background-repeat: no-repeat;
	background-size: auto 130%;
}

.bb-home-tegel__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

.bb-home-tegel__kop {
	margin: 0;
	color: var(--bb-zwart);
	font-size: 22px;
	font-weight: 600;
}

/* Op een telefoon staat de illustratie rechts in de tegel en is er links maar
   een smalle strook over. Een lange kop als "Boxsprings met opbergruimte" liep
   daar dwars doorheen. Met een bovengrens breekt hij netjes af vóór het beeld
   begint; de tegel groeit mee, want de hoogte is een minimum. */

@media (max-width: 600px) {
	.bb-home-tegel__kop {
		max-width: 62%;
		font-size: 19px;
		line-height: 1.25;
	}
}

.bb-home-categorieen__alles {
	margin: 20px 0 var(--bb-home-sectie);
	text-align: center;
}

/* --- 6. Servicebalk --- */

.bb-home-service {
	padding-block: 20px;
	background-color: #f0f0f0;
}

.bb-home-service__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: center;
}

.bb-home-service__afbeelding {
	display: block;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
}

.bb-home-service__kop {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
}

.bb-home-service__knoppen {
	display: flex;
	gap: 12px;
}

.bb-home-service__knoppen .bb-camp-knop {
	margin-top: 0;
	padding: 8px 18px;
	font-size: 14px;
}

/* --- 7 en 9. Uitgelichte blokken --- */

.bb-home-uitgelicht {
	padding-block: var(--bb-home-sectie);
	background-position: center;
	background-size: cover;
}

/* Het tweede uitgelichte blok (Hoog Laag bedden) staat op een achtergrondfoto
   en heeft daar meer hoogte voor nodig dan het Cozy-blok erboven. */

.bb-home-modellen + .bb-home-uitgelicht {
	min-height: 560px;
	padding-block: 60px;
}

.bb-home-modellen + .bb-home-uitgelicht .bb-home-uitgelicht__inner {
	min-height: 440px;
}

/* Het uitsteken zit op de buitenste van de twee: staat de foto in een link, dan
   is die link het rasteritem en moet hij het doen, anders de foto zelf. Deed de
   foto het binnen een link, dan rekende de 115% vanaf die link in plaats van
   vanaf de kolom en stak hij zes pixels het scherm uit. */

.bb-home-modellen + .bb-home-uitgelicht .bb-home-uitgelicht__beeldlink,
.bb-home-modellen + .bb-home-uitgelicht .bb-home-uitgelicht__beeld > .bb-home-uitgelicht__afbeelding {
	max-width: none;
	width: 115%;
	margin-left: -7.5%;
}

.bb-home-modellen + .bb-home-uitgelicht .bb-home-uitgelicht__beeldlink .bb-home-uitgelicht__afbeelding {
	max-width: none;
	width: 100%;
	margin-left: 0;
}

.bb-home-uitgelicht__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.bb-home-uitgelicht__beeld {
	position: relative;
	display: grid;
	place-items: center;
}

/* Het woordmerk staat áchter de productfoto, zoals COZY op de oude pagina. */

.bb-home-uitgelicht__woordmerk {
	position: absolute;
	top: 26%;
	left: 0;
	z-index: 0;
	color: var(--bb-geel);
	font-size: 130px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;

	/* Zo ver naar beneden dat de boxspring vóór de letters valt en alleen de
	   bovenkant van het woord er nog bovenuit steekt. */
}

/* De link om de productfoto neemt de plek van de foto in het raster over, zodat
   de foto er precies zo in staat als zonder link — inclusief het uitsteken van
   115% bij het tweede blok. */

.bb-home-uitgelicht__beeldlink {
	display: block;
	width: 100%;
}

.bb-home-uitgelicht__afbeelding {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

.bb-home-uitgelicht__kop {
	margin: 0 0 16px;
	color: #5c5c5c;
	font-size: 33px;
	font-weight: 600;
}

.bb-home-uitgelicht__body {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
}

/* Het tweede uitgelichte blok (Hoog Laag) heeft een grotere kop. */

.bb-home-uitgelicht + .bb-home-uitgelicht .bb-home-uitgelicht__kop,
.bb-home-modellen + .bb-home-uitgelicht .bb-home-uitgelicht__kop {
	color: #313131;
	font-size: 40px;
}

/* --- 8. Modellen --- */

.bb-home-modellen__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De prijs en de naam staan bovenin, bij alle vier de tegels.
 *
 * Die opmaak stond eerder op de link eromheen, en niet elke tegel heeft een
 * link — alleen de modellen waar in ACF een bestemming bij is ingevuld. Daardoor
 * hing "Cozy" onderin zijn tegel terwijl XXL, THE BIG en Supreme bovenin
 * stonden: precies het verschil tussen wel en geen link, niet iets wat iemand zo
 * bedoeld had. Nu bepaalt de tegel de plek en de link alleen nog waar je heen
 * gaat, dus blijft de rij hetzelfde ongeacht welke tegels een bestemming
 * krijgen.
 *
 * Bovenin en niet onderin, omdat drie van de vier daar al stonden. Onderin voor
 * alle vier kan ook: dan wordt dit flex-end, net als het ooit op de link stond.
 */

.bb-home-model {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 430px;
	padding: 20px;
	background-position: center;
	background-size: cover;
}

/* De link vult de tegel, zodat je overal op het beeld kunt klikken, maar hij
   bepaalt de plek van de tekst niet meer en heeft geen eigen binnenmarge: die
   zit op de tegel. */

.bb-home-model__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
	color: var(--bb-wit);
	text-decoration: none;
}

.bb-home-model__naam {
	color: rgba(255, 255, 255, 0.55);
	font-size: 75px;
	font-weight: 700;
	line-height: 1;
}

.bb-home-model__rotatie,
.bb-home-model__prijs {
	display: block;
	color: var(--bb-wit);
	font-size: 20px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.bb-home-model__voor {
	font-weight: 400;
	opacity: 0.85;
}

.bb-home-model__woord {
	display: inline-block;
	transition: opacity 0.25s ease-in-out;
}

.bb-home-model__woord.is-wisselend {
	opacity: 0;
}

/* --- 10. Showroom --- */

.bb-home-showroom {
	background-color: var(--bb-geel);
}

.bb-home-showroom__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 325px;
	max-width: var(--bb-breedte);
	margin-inline: auto;
}

/* Beeld links, tekst rechts. */

.bb-home-showroom__beeld {
	order: 1;
	background-position: center;
	background-size: cover;
}

.bb-home-showroom__tekst {
	order: 2;
	padding: 40px 40px 40px 20px;
}

.bb-home-showroom__kop {
	margin: 0;
	color: #4e4e4e;
	font-size: 47px;
	font-weight: 700;
	line-height: 1.1;
}

.bb-home-showroom__subkop {
	margin: 0 0 20px;
	color: #5e5e5e;
	font-size: 29px;
	font-weight: 400;
}

.bb-home-showroom .bb-faq__item {
	border-bottom-color: rgba(0, 0, 0, 0.2);
}

.bb-home-showroom .bb-faq__vraag {
	font-size: 15px;
}

/* --- 11. Matraskaarten --- */

.bb-home-matrassen {
	padding-block: 20px;
	background-color: var(--bb-wit);
}

.bb-home-matrassen__raster {
	align-items: stretch;
}

.bb-home-matras {
	flex: 0 0 calc(25% - 15px);
	background-color: var(--bb-wit);
}

.bb-home-matras__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 20px;
	color: inherit;
	text-decoration: none;
}

.bb-home-matras__kop {
	margin: 0 0 12px;
	color: #4e4e4e;
	font-size: 20px;
	font-weight: 600;
}

.bb-home-matras__afbeelding {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: auto;
}

.bb-home-matras .bb-home-pil {
	margin-top: 16px;
}

/* --- 13. Accessoires --- */

.bb-home-accessoires {
	padding-block: var(--bb-home-sectie);
	text-align: center;
}

.bb-home-accessoires__kop {
	margin: 0 0 8px;
	font-size: 40px;
	font-weight: 700;
}

.bb-home-accessoires__intro {
	margin: 0 0 30px;
	font-size: 16px;
}

.bb-home-accessoires__raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-home-acc__link {
	color: inherit;
	text-decoration: none;
}

.bb-home-acc__kop {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 600;
}

.bb-home-acc__afbeelding {
	display: block;
	width: 100%;
	height: auto;
}

/* --- 14. Keuzehulp --- */

.bb-home-keuzehulp {
	position: relative;
	min-height: 700px;
}

.bb-home-keuzehulp__woord {
	position: absolute;
	top: 40px;
	left: 50%;
	z-index: 1;
	color: #c2c2c2;
	font-size: 88px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
	transform: translateX(-50%);
}

.bb-home-keuzehulp__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 700px;
}

.bb-home-kh {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 75px 50px 50px;
	text-align: left;
	background-position: center;
	background-size: cover;
}

/* De eerste tegel houdt de tekst links; de tegels daarna rechts, zodat de tekst
   aan weerszijden van de foto in het midden wegblijft. */

.bb-home-kh:not(:first-child) {
	align-items: flex-end;
	text-align: right;
}

.bb-home-kh__kop {
	margin: 0 0 12px;
	color: #494949;
	font-size: 50px;
	font-weight: 600;
}

.bb-home-kh__tekst {
	margin-bottom: 20px;
	max-width: 320px;
	font-size: 15px;
	line-height: 1.6;
}

/* --- Tablet --- */

@media (max-width: 1024px) {
	.bb-home-hero__inner,
	.bb-home-keuzehulp__raster,
	.bb-home-showroom__inner {
		grid-template-columns: 1fr;
	}

	/* Op één kolom is de tegel smaller dan de banner breed is. Met een gecentreerde
	   uitsnede valt "ZOMER DEAL" links weg; links uitlijnen houdt de tekst heel. */

	.bb-home-hero__groot {
		background-position: left center;
	}

	.bb-home-modellen__raster {
		grid-template-columns: repeat(2, 1fr);
	}

	.bb-home-matras {
		flex: 0 0 calc(50% - 10px);
	}

	.bb-home-showroom__beeld {
		order: 1;
		min-height: 200px;
	}

	.bb-home-showroom__tekst {
		order: 2;
	}

	.bb-home-keuzehulp,
	.bb-home-keuzehulp__raster {
		min-height: 0;
	}
}

/* --- Mobiel --- */

@media (max-width: 544px) {
	.bb-home {
		--bb-home-sectie: 24px;
	}

	.bb-home-categorieen__raster,
	.bb-home-accessoires__raster,
	.bb-home-modellen__raster {
		grid-template-columns: 1fr;
	}


	.bb-home-uitgelicht__inner {
		grid-template-columns: 1fr;
	}

	/* Op mobiel geen schuivende rij maar gewoon onder elkaar. Het spoor wordt
	   een kolom, waardoor carrousel.js hem ook niet meer inschakelt: er valt
	   dan niets te schuiven. */

	.bb-home-matrassen__raster {
		flex-direction: column;
		overflow-x: visible;
		scroll-snap-type: none;
	}

	.bb-home-matras {
		flex: 1 1 auto;
		width: 100%;
	}

	.bb-home-uitgelicht__woordmerk {
		font-size: 70px;
	}

	.bb-home-showroom__kop {
		font-size: 32px;
	}

	.bb-home-showroom__subkop {
		font-size: 20px;
	}

	.bb-home-accessoires__kop,
	.bb-home-kh__kop {
		font-size: 28px;
	}

	.bb-home-keuzehulp__woord {
		font-size: 44px;
	}

	/* De achtergrondfoto vult de hele tegel; op halve breedte blijft de tekst
	   ernaast staan in plaats van eroverheen te lopen. */

	.bb-home-kh__kop,
	.bb-home-kh__tekst {
		max-width: 50%;
	}

	.bb-home-model__naam {
		font-size: 48px;
	}

	.bb-home-service__inner {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   WINKELPAGINA
   Vervangt Elementor-pagina #44915.

   De indeling en de maten komen uit het ontwerp uit Claude Design: hero op
   1.15fr/1fr met een kop van 64px, kaarten met radius 16 en 20, een balk met
   de drie beloftes ertussen, per vestiging een blok van 1.35fr/1fr en een
   slotblok in het zwart met radius 24.

   De kleuren en het lettertype zijn die van de site. Het ontwerp zette witte
   kaarten op een beige vlak; hier staan ze op het lichtgrijs dat ook de
   USP-balk van de homepage gebruikt, zodat de gelaagdheid blijft kloppen
   zonder dat er een kleur bij komt die nergens anders voorkomt.
   ========================================================================== */

.bb-pagina {
	/* Astra zet .ast-container op display:flex; zonder breedte krimpt dit blok
	   als flex-item. Zie ook .bb-home en .bb-tekstpagina. */
	width: 100%;
	min-width: 0;
	padding-bottom: 80px;
	background-color: var(--bb-grijs-licht);
	color: #1a1a1a;
	font-family: Roboto, sans-serif;
}

/* Astra's container zou deze pagina's op de helft van hun breedte zetten en er
   nog eens padding omheen leggen; de secties regelen hun eigen breedte al. De
   klasse wordt door het theme gezet — zie bb_eigen_paginasjabloon() — want het
   sjabloon is aan de pagina gekoppeld via template_include en niet via de
   database, en dan zet WordPress zelf geen page-template-klasse. */

.bb-eigen-sjabloon .ast-container,
.page-template-page-winkels .ast-container,
.page-template-page-contact .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.bb-pagina__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

.bb-paginakop__label {
	margin: 0;
	color: #8a8a82;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- Knopvarianten ---
   Deze staan hier omdat de campagnepagina's ze introduceerden. De variant met
   alleen een rand wordt inmiddels ook op de afrekenpagina gebruikt, dus houd er
   rekening mee dat een wijziging verder reikt dan dit blok. */

.bb-knop--zwart {
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

.bb-knop--rand {
	border: 1px solid #dededa;
	color: var(--bb-zwart);
}

.bb-knop--licht {
	border: 1px solid #3a3a37;
	color: var(--bb-wit);
}

/* --- 1. Hero --- */

.bb-paginakop {
	padding-top: 60px;
}

.bb-paginakop__inner {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 56px;
	align-items: end;
}

.bb-paginakop__kop {
	margin: 18px 0 0;
	font-size: 56px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.04;
}

/* De zin die vroeger de h1 was. Hij staat tussen de kop en de intro in, dus ook
   in grijswaarde en maat: donkerder en groter dan de intro, lichter en kleiner
   dan de kop. */

.bb-paginakop__onderkop {
	max-width: 46ch;
	margin: 14px 0 0;
	color: #2f2f2b;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.bb-paginakop__intro {
	max-width: 46ch;
	margin: 22px 0 0;
	color: #4a4a45;
	font-size: 18px;
	line-height: 1.6;
}

.bb-paginakop__kaarten {
	display: grid;
	gap: 14px;
}

.bb-snelkaart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 26px;
	border-radius: 16px;
	background-color: var(--bb-wit);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bb-snelkaart:hover,
.bb-snelkaart:focus-visible {
	background-color: var(--bb-geel);
	color: inherit;
	text-decoration: none;
}

.bb-snelkaart__titel {
	display: block;
	font-size: 20px;
	font-weight: 600;
}

.bb-snelkaart__sub {
	display: block;
	margin-top: 3px;
	color: #6a6a63;
	font-size: 15px;
}

.bb-snelkaart__extra {
	text-align: right;
	font-size: 14px;
	line-height: 1.35;
}

.bb-snelkaart__regel {
	display: block;
	color: #8a8a82;
}

.bb-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

.bb-status__stip {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: currentColor;
}

.bb-status--open {
	color: #1c7a4a;
}

.bb-status--dicht {
	color: #8a8a82;
}

/* --- 2. De drie beloftes --- */

.bb-uspbalk {
	padding-top: 48px;
}

.bb-uspbalk__raster {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 26px 0;
	border-top: 1px solid #dedeD8;
	border-bottom: 1px solid #dedeD8;
	list-style: none;
}

.bb-usp {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.bb-usp__nummer {
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
}

.bb-usp__titel {
	display: block;
	font-size: 17px;
	font-weight: 600;
}

.bb-usp__uitleg {
	display: block;
	margin-top: 2px;
	color: #6a6a63;
	font-size: 15px;
}

/* --- 3. De vestigingen --- */

.bb-winkel {
	padding-top: 72px;
	scroll-margin-top: 24px;
}

.bb-winkel__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.bb-winkel__titel {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.bb-winkel__toelichting {
	margin: 0;
	color: #6a6a63;
	font-size: 15px;
	text-align: right;
}

.bb-winkel__boven,
.bb-winkel__onder {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 20px;
}

.bb-winkel__onder {
	margin-top: 20px;
}

/* Bij de tweede vestiging staat het beeld rechts. */

.bb-winkel--gespiegeld .bb-winkel__boven,
.bb-winkel--gespiegeld .bb-winkel__onder {
	grid-template-columns: 1fr 1.35fr;
}

/* Zonder parkeerblok mag het rooster de hele breedte hebben; anders blijft het
   in een halve kolom hangen met een leeg vak ernaast.

   Ná de spiegelregel hierboven en niet ervoor: die twee wegen even zwaar, en zo
   lang deze erboven stond won de spiegeling het op volgorde. Rotterdam is de
   gespiegelde vestiging en had daardoor als enige nog een half rooster. */

.bb-winkel__onder--alleen,
.bb-winkel--gespiegeld .bb-winkel__onder--alleen {
	grid-template-columns: 1fr;
}

.bb-winkel--gespiegeld .bb-winkel__beeld,
.bb-winkel--gespiegeld .bb-winkel__tijden {
	order: 2;
}

.bb-winkel__kolom {
	display: grid;
	gap: 20px;
	align-content: start;
}

.bb-winkel__beeld {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	background-color: #e8e8e4;
}

.bb-winkel__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zolang er nog geen foto is: een leeg vlak dat laat zien dat er iets hoort. */

.bb-winkel__beeld-leeg {
	padding: 8px 14px;
	border-radius: 6px;
	background-color: var(--bb-grijs-licht);
	color: #84847c;
	font-size: 13px;
}

.bb-blok {
	padding: 28px 30px;
	border-radius: 20px;
	background-color: var(--bb-wit);
}

.bb-blok__kop {
	margin: 0;
	color: #8a8a82;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bb-blok__kop--donker {
	color: #7a6800;
}

.bb-winkel__adres {
	margin: 10px 0 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
}

.bb-winkel__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.bb-winkel__kaart {
	overflow: hidden;
	min-height: 210px;
	border-radius: 20px;
	background-color: #e8e8e4;
}

.bb-winkel__kaart iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 210px;
	border: 0;
}

.bb-winkel__rooster {
	margin-top: 14px;
}

.bb-winkel__regel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid #eeeee9;
	font-size: 19px;
	font-weight: 500;
}

.bb-winkel__regel:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bb-winkel__uren {
	color: #4a4a45;
	text-align: right;
}

.bb-winkel__bijzin {
	color: #8a8a82;
	font-size: 14px;
	font-weight: 400;
}

/* Afwijkende dagen staan apart, boven het vaste rooster. */

.bb-winkel__afwijking {
	margin-top: 14px;
	padding: 16px 18px;
	border: 1px solid #eeeee9;
	border-radius: 14px;
}

.bb-winkel__afwijking-kop {
	margin: 0 0 10px;
	color: #b3a250;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bb-winkel__afwijking-regel {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 7px 0;
	font-size: 15px;
}

.bb-winkel__afwijking-regel span:last-child {
	color: #4a4a45;
	text-align: right;
}

.bb-winkel__merk {
	padding: 1px 6px;
	border-radius: 4px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 12px;
	font-weight: 600;
}

.bb-winkel__parkeren {
	background-color: var(--bb-geel);
}

.bb-winkel__parkeerkop {
	margin: 10px 0 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
}

.bb-winkel__parkeertekst {
	margin: 12px 0 0;
	color: #4a4200;
	font-size: 15px;
	line-height: 1.6;
}

/* --- 4. Het team --- */

.bb-winkels-team {
	padding-top: 88px;
}

.bb-winkels-team__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 56px;
	align-items: start;
}

.bb-winkels-team__kop {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bb-winkels-team__intro {
	margin: 18px 0 0;
	color: #4a4a45;
	font-size: 17px;
	line-height: 1.6;
}

.bb-winkels-team__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-winkels-lid__portret {
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	border-radius: 14px;
	background-color: #e8e8e4;
}

.bb-winkels-lid__foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-winkels-lid--leeg .bb-winkels-lid__portret {
	padding: 10px;
}

.bb-winkels-lid--leeg span {
	padding: 5px 8px;
	border-radius: 5px;
	background-color: var(--bb-grijs-licht);
	color: #84847c;
	font-size: 11px;
}

.bb-winkels-lid__naam {
	margin: 12px 0 0;
	font-size: 16px;
	font-weight: 600;
}

.bb-winkels-lid__functie {
	margin: 0;
	color: #6a6a63;
	font-size: 14px;
}

/* --- 5. Slotblok --- */

.bb-slotblok {
	padding-top: 88px;
}

.bb-slotblok__blok {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: center;
	padding: 52px 56px;
	border-radius: 24px;
	background-color: #111111;
	color: var(--bb-wit);
}

.bb-slotblok__kop {
	margin: 0;

	/* Astra geeft elke kop een donkerblauwe kleur, en die viel in dit zwarte
	   blok bijna weg. De rest van het blok staat al op wit; de kop hoort dat te
	   volgen. Geldt ook voor de winkel-, contact-, over-ons- en servicepagina,
	   die ditzelfde slotblok gebruiken. */
	color: inherit;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.bb-slotblok__intro {
	max-width: 48ch;
	margin: 16px 0 0;
	color: #bdbdb6;
	font-size: 17px;
	line-height: 1.6;
}

.bb-slotblok__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
}

.bb-slotblok__knoppen .bb-knop {
	padding: 15px 26px;
	font-size: 16px;
}

/* ==========================================================================
   BEDANKPAGINA
   De pagina na een geslaagde bestelling. Opbouw in page-bedankt.php; de hero,
   de blokken en het slotblok komen uit de gedeelde bouwstenen hierboven, dus
   hier staat alleen wat deze pagina eigen is.
   ========================================================================== */

/* Het gele label boven de kop: bevestiging in één oogopslag. De kop zegt het
   ook, dus wie deze pill niet ziet mist niets. */

.bb-bedankt__pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background-color: var(--bb-geel);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bb-bedankt__pill-stip {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--bb-zwart);
}

/* De orderkaart naast de kop. */

.bb-bedankt__orderkaart {
	padding: 30px 32px;
}

.bb-bedankt__ordernummer {
	margin: 8px 0 0;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.bb-bedankt__hint {
	margin: 10px 0 20px;
	color: #6a6a63;
	font-size: 15px;
	line-height: 1.6;
}

.bb-bedankt__rijen {
	margin: 0;
}

.bb-bedankt__rij {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-top: 1px solid #eeeee9;
	font-size: 15px;
}

.bb-bedankt__rij dt {
	color: #8a8a82;
}

.bb-bedankt__rij dd {
	margin: 0;
	text-align: right;
}

.bb-bedankt__rij--totaal {
	font-size: 17px;
	font-weight: 600;
}

.bb-bedankt__rij--totaal dt {
	color: inherit;
}

/* Koppen van de secties. */

.bb-bedankt__kop {
	margin: 0;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bb-bedankt__kop--klein {
	font-size: 32px;
}

.bb-bedankt__intro {
	margin: 18px 0 0;
	color: #4a4a45;
	font-size: 17px;
	line-height: 1.6;
}

/* --- Wat er nu gebeurt --- */

.bb-bedankt-stappen {
	padding-top: 84px;
}

.bb-bedankt-stappen__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.bb-bedankt-stap {
	padding: 26px 28px;
	border-top: 3px solid #dedeD8;
	border-radius: 20px;
	background-color: var(--bb-wit);
}

/* De stap waar de klant nu is, krijgt een zwarte bovenrand. */

.bb-bedankt-stap--nu {
	border-top-color: var(--bb-zwart);
}

.bb-bedankt-stap__boven {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.bb-bedankt-stap__nummer {
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
}

.bb-bedankt-stap__wanneer {
	color: #8a8a82;
	font-size: 14px;
}

.bb-bedankt-stap--nu .bb-bedankt-stap__wanneer {
	padding: 4px 10px;
	border-radius: 999px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.bb-bedankt-stap__titel {
	margin: 16px 0 0;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.bb-bedankt-stap__tekst {
	margin: 6px 0 0;
	color: #4a4a45;
	font-size: 15px;
	line-height: 1.6;
}

/* --- De bestelling met de zijkolom --- */

.bb-bedankt-bestelling {
	padding-top: 84px;
}

.bb-bedankt-bestelling__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.bb-bedankt__bestelling {
	padding: 36px 40px;
}

.bb-bedankt__regels {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.bb-bedankt__regel {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px solid #eeeee9;
}

.bb-bedankt__regel:first-child {
	padding-top: 0;
}

.bb-bedankt__regel:last-child {
	border-bottom: 0;
}

.bb-bedankt__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;

	/* Astra legt met .ast-article-single img een schaduw over elk beeld binnen
	   een artikel; die hoort hier niet. */
	box-shadow: none;
}

.bb-bedankt__titel {
	display: block;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

.bb-bedankt__aantal,
.bb-bedankt__opties {
	display: block;
	margin-top: 6px;
	color: #6a6a63;
	font-size: 15px;
	line-height: 1.7;
}

/* WooCommerce zet de gekozen opties in een eigen lijstje; dat mag hier gewoon
   doorlopende tekst zijn. */

.bb-bedankt__opties p,
.bb-bedankt__opties .wc-item-meta,
.bb-bedankt__opties .wc-item-meta li {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: inherit;
}

.bb-bedankt__opties .wc-item-meta li + li::before {
	content: " · ";
}

.bb-bedankt__prijs {
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.bb-bedankt__totalen {
	margin: 26px 0 0;
	padding-top: 22px;
	border-top: 1px solid #dedeD8;
}

.bb-bedankt__totaalregel {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	font-size: 16px;
}

.bb-bedankt__totaalregel dt {
	color: #6a6a63;
	font-weight: 400;
}

.bb-bedankt__totaalregel dd {
	margin: 0;
	text-align: right;
}

.bb-bedankt__totaalregel--eind {
	padding: 14px 0 0;
	font-size: 22px;
	font-weight: 600;
}

.bb-bedankt__totaalregel--eind dt {
	color: inherit;
	font-weight: 600;
}

/* --- De zijkolom --- */

.bb-bedankt__zijkolom {
	display: grid;
	gap: 20px;
}

.bb-bedankt__adres {
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.8;
}

/* Het adres komt als <address> uit WooCommerce, in schuinschrift. */

.bb-bedankt__adres address {
	font-style: normal;
}

.bb-bedankt__adrestel {
	margin: 10px 0 0;
	color: #6a6a63;
	font-size: 15px;
}

.bb-blok--geel {
	background-color: var(--bb-geel);
}

.bb-paginakop__label--donker {
	color: #7a6800;
}

.bb-bedankt__geelkop {
	margin: 10px 0 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
}

.bb-bedankt__geeltekst {
	margin: 12px 0 18px;
	color: #4a4200;
	font-size: 15px;
	line-height: 1.6;
}

.bb-bedankt__weetjes {
	margin: 12px 0 0;
}

.bb-bedankt__weetje {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid #eeeee9;
	font-size: 15px;
}

.bb-bedankt__weetje:last-child {
	border-bottom: 0;
}

.bb-bedankt__weetje dt {
	color: #4a4a45;
}

.bb-bedankt__weetje dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* --- Voorbereiden op de bezorgdag --- */

.bb-bedankt-voorbereiden {
	padding-top: 96px;
}

.bb-bedankt-voorbereiden__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 64px;
	align-items: start;
}

.bb-bedankt-punten {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-bedankt-punt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 20px;
	align-items: baseline;
	padding: 24px 0;
	border-top: 1px solid #dedeD8;
}

.bb-bedankt-punt:last-child {
	border-bottom: 1px solid #dedeD8;
}

.bb-bedankt-punt__nummer {
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
}

.bb-bedankt-punt__titel {
	display: block;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

.bb-bedankt-punt__tekst {
	display: block;
	margin-top: 6px;
	color: #4a4a45;
	font-size: 16px;
	line-height: 1.6;
}

/* --- De rest --- */

.bb-bedankt__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

/* De haken van WooCommerce leveren meestal niets zichtbaars; staat er wel iets,
   dan krijgt het de ruimte van een gewoon blok. */

.bb-bedankt__haken:not(:empty) {
	padding-top: 40px;
}

.bb-bedankt__terugval {
	padding-top: 60px;
}

/* --- Bedankpagina op een smaller scherm --- */

@media (max-width: 1024px) {
	.bb-bedankt-stappen__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bb-bedankt-bestelling__raster,
	.bb-bedankt-voorbereiden__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.bb-bedankt__kop {
		font-size: 32px;
	}
}

@media (max-width: 700px) {
	.bb-bedankt-stappen__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.bb-bedankt__bestelling {
		padding: 26px 22px;
	}

	.bb-bedankt__regel {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 16px;
	}

	/* De prijs onder de omschrijving in plaats van ernaast: naast een titel van
	   twee regels is er op deze breedte geen plek meer voor. */

	.bb-bedankt__prijs {
		grid-column: 2;
		font-size: 17px;
	}

	.bb-bedankt__ordernummer {
		font-size: 30px;
	}

	.bb-bedankt__kop {
		font-size: 28px;
	}

	.bb-bedankt__kop--klein {
		font-size: 24px;
	}
}

/* --- Tablet --- */

@media (max-width: 1024px) {
	.bb-paginakop__inner,
	.bb-winkels-team__inner,
	.bb-slotblok__blok {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.bb-paginakop__kop {
		font-size: 44px;
	}

	.bb-winkel__boven,
	.bb-winkel__onder,
	.bb-winkel--gespiegeld .bb-winkel__boven,
	.bb-winkel--gespiegeld .bb-winkel__onder {
		grid-template-columns: 1fr;
	}

	/* Op één kolom hoort het beeld gewoon weer bovenaan. */

	.bb-winkel--gespiegeld .bb-winkel__beeld,
	.bb-winkel--gespiegeld .bb-winkel__tijden {
		order: 0;
	}

	.bb-slotblok__knoppen {
		justify-content: flex-start;
	}
}

/* --- Mobiel --- */

@media (max-width: 544px) {
	.bb-paginakop {
		padding-top: 36px;
	}

	.bb-paginakop__kop {
		font-size: 34px;
	}

	.bb-paginakop__onderkop {
		font-size: 19px;
	}

	.bb-uspbalk__raster {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.bb-winkel {
		padding-top: 48px;
	}

	.bb-winkel__kop {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.bb-winkel__toelichting {
		text-align: left;
	}

	.bb-winkel__titel,
	.bb-winkels-team__kop,
	.bb-slotblok__kop {
		font-size: 28px;
	}

	.bb-blok {
		padding: 22px 20px;
	}

	.bb-winkel__regel {
		flex-direction: column;
		gap: 2px;
		font-size: 17px;
	}

	.bb-winkel__uren {
		text-align: left;
	}

	.bb-winkels-team__raster {
		grid-template-columns: repeat(2, 1fr);
	}

	.bb-slotblok__blok {
		padding: 32px 24px;
	}
}

/* ==========================================================================
   CONTACTPAGINA
   Vervangt Elementor-pagina #2322.

   Deelt de hero, de balk met beloftes, de witte blokken en het slotblok met de
   winkelpagina; hieronder staat alleen wat eigen is aan deze pagina.

   Het formulier is het Gravity Form dat er al stond (#1). De opmaak eronder
   geeft de velden het uiterlijk uit het ontwerp — rand #e3e3df, radius 10,
   vulling 13/15 op een iets warmer wit — zonder dat er aan het formulier zelf
   iets verandert.
   ========================================================================== */

.bb-snelkaart__pijl {
	flex: none;
	font-size: 20px;
	line-height: 1;
}

/* --- 3. Formulier met de directe wegen ernaast --- */

.bb-contact-bericht {
	padding-top: 72px;
}

.bb-contact-bericht__inner {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 20px;
	align-items: start;
}

.bb-contact-formulier {
	padding: 36px 40px;
}

.bb-contact-formulier__kop {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.bb-contact-formulier__intro {
	margin: 10px 0 26px;
	color: #6a6a63;
	font-size: 16px;
	line-height: 1.6;
}

.bb-contact-kolom {
	display: grid;
	gap: 20px;
	align-content: start;
}

.bb-contact-app {
	background-color: var(--bb-geel);
}

.bb-contact-app__nummer {
	margin: 10px 0 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.35;
}

.bb-contact-app__nummer a {
	color: inherit;
	text-decoration: none;
}

.bb-contact-app__tekst {
	margin: 12px 0 0;
	color: #4a4200;
	font-size: 15px;
	line-height: 1.6;
}

.bb-contact-regel {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid #eeeee9;
	font-size: 18px;
	font-weight: 500;
}

.bb-contact-noot {
	margin: 0;
	padding-top: 12px;
	color: #6a6a63;
	font-size: 15px;
	line-height: 1.6;
}

.bb-contact-bedrijf {
	margin: 12px 0 0;
	font-size: 18px;
	font-weight: 600;
}

.bb-contact-adres {
	margin: 6px 0 0;
	color: #4a4a45;
	font-size: 16px;
	line-height: 1.7;
}

.bb-contact-gegevens {
	margin-top: 16px;
}

.bb-contact-gegevens .bb-contact-regel {
	padding: 9px 0;
	font-size: 15px;
	font-weight: 400;
}

.bb-contact-gegevens .bb-contact-regel:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bb-contact-regel__naam {
	color: #8a8a82;
}

/* --- Het Gravity Form in het jasje van het ontwerp ---
   De selectors zijn zwaarder gemaakt met .bb-contact-formulier ervoor, zodat ze
   het winnen van de eigen stylesheet van de plugin, ongeacht de laadvolgorde. */

.bb-contact-formulier .gform_wrapper ul.gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-contact-formulier .gform_wrapper ul.gform_fields > li.gfield {
	margin: 0;
	padding: 0;
}

/* Een tekstvak en het bericht lopen over de volle breedte. */

.bb-contact-formulier .gform_wrapper .gfield--type-textarea,
.bb-contact-formulier .gform_wrapper .gfield--type-captcha,
.bb-contact-formulier .gform_wrapper .gfield--type-honeypot {
	grid-column: 1 / -1;
}

.bb-contact-formulier .gform_wrapper .gfield_label {
	display: block;
	margin-bottom: 7px;
	color: var(--bb-zwart);
	font-size: 13px;
	font-weight: 600;
}

.bb-contact-formulier .gform_wrapper input[type="text"],
.bb-contact-formulier .gform_wrapper input[type="email"],
.bb-contact-formulier .gform_wrapper input[type="tel"],
.bb-contact-formulier .gform_wrapper input[type="number"],
.bb-contact-formulier .gform_wrapper select,
.bb-contact-formulier .gform_wrapper textarea {
	width: 100%;
	max-width: 100%;
	padding: 13px 15px;
	border: 1px solid #e3e3df;
	border-radius: 10px;
	background-color: #fbfbfa;
	color: var(--bb-zwart);
	font-family: inherit;
	font-size: 15px;
}

.bb-contact-formulier .gform_wrapper textarea {
	min-height: 130px;
	resize: vertical;
}

.bb-contact-formulier .gform_wrapper input:focus,
.bb-contact-formulier .gform_wrapper select:focus,
.bb-contact-formulier .gform_wrapper textarea:focus {
	border-color: var(--bb-zwart);
	outline: none;
}

.bb-contact-formulier .gform_wrapper .gfield_required {
	color: #8a8a82;
	text-decoration: none;
}

.bb-contact-formulier .gform_wrapper .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

.bb-contact-formulier .gform_wrapper .gform_button {
	padding: 15px 28px;
	border: 0;
	border-radius: 10px;
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bb-contact-formulier .gform_wrapper .gform_button:hover,
.bb-contact-formulier .gform_wrapper .gform_button:focus-visible {
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
}

/* De foutmeldingen van de plugin in dezelfde vormtaal. */

.bb-contact-formulier .gform_wrapper .validation_message,
.bb-contact-formulier .gform_wrapper .gform_validation_errors {
	margin-top: 8px;
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	background-color: #fdeaea;
	box-shadow: none;
	color: #9b1c1c;
	font-size: 14px;
}

/* --- 4. Langskomen --- */

.bb-contact-winkels {
	padding-top: 72px;
}

.bb-contact-winkels__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.bb-contact-winkels__titel {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.bb-contact-winkels__link {
	padding-bottom: 2px;
	border-bottom: 2px solid var(--bb-geel);
	color: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bb-contact-winkels__raster {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.bb-contact-winkel {
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--bb-wit);
}

.bb-contact-winkel__kaart {
	height: 220px;
	background-color: #e8e8e4;
}

.bb-contact-winkel__kaart iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.bb-contact-winkel__tekst {
	padding: 26px 30px;
}

.bb-contact-winkel__plaats {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}

.bb-contact-winkel__adres {
	margin: 8px 0 0;
	color: #4a4a45;
	font-size: 16px;
	line-height: 1.7;
}

.bb-contact-winkel__tijden {
	margin: 10px 0 0;
	color: #6a6a63;
	font-size: 15px;
}

/* --- 5. Veelgestelde vragen --- */

.bb-contact-faq {
	padding-top: 88px;
}

.bb-contact-faq__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 56px;
	align-items: start;
}

.bb-contact-faq__kop {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bb-contact-faq__intro {
	margin: 18px 0 0;
	color: #4a4a45;
	font-size: 17px;
	line-height: 1.6;
}

.bb-contact-vraag {
	padding: 22px 0;
	border-top: 1px solid #dedeD8;
}

.bb-contact-vraag:last-child {
	border-bottom: 1px solid #dedeD8;
}

.bb-contact-vraag__vraag {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 600;
}

.bb-contact-vraag__antwoord {
	color: #4a4a45;
	font-size: 16px;
	line-height: 1.6;
}

.bb-contact-vraag__antwoord p {
	margin: 0;
}

/* --- Tablet --- */

@media (max-width: 1024px) {
	.bb-contact-bericht__inner,
	.bb-contact-faq__inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.bb-contact-faq__inner {
		gap: 32px;
	}
}

/* --- Mobiel --- */

@media (max-width: 544px) {
	.bb-contact-bericht,
	.bb-contact-winkels {
		padding-top: 48px;
	}

	.bb-contact-faq {
		padding-top: 56px;
	}

	.bb-contact-formulier {
		padding: 24px 20px;
	}

	.bb-contact-formulier__kop,
	.bb-contact-winkels__titel,
	.bb-contact-faq__kop {
		font-size: 28px;
	}

	.bb-contact-formulier .gform_wrapper ul.gform_fields {
		grid-template-columns: 1fr;
	}

	.bb-contact-winkels__raster {
		grid-template-columns: 1fr;
	}

	.bb-contact-winkels__kop {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.bb-contact-regel {
		flex-direction: column;
		gap: 2px;
	}

	.bb-contact-gegevens .bb-contact-regel {
		flex-direction: row;
	}
}

/* ==========================================================================
   OVER ONS
   Vervangt Elementor-pagina #16577.

   Deelt de hero, de blokken en het slotblok met de winkel- en contactpagina.
   Eigen aan deze pagina zijn de cijferkaarten, het sfeerbeeld, de jaarrail en
   de mijlpalen.

   De maten komen uit het ontwerp: statkaart radius 16, sfeerbeeld 420px hoog,
   jaartal 56px, mijlpalen met 44px lucht en een scheidingslijn ertussen.
   ========================================================================== */

/* --- 1. De cijfers in de hero --- */

.bb-over-cijfers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-over-cijfer {
	padding: 22px 24px;
	border-radius: 16px;
	background-color: var(--bb-wit);
}

.bb-over-cijfer--geel {
	background-color: var(--bb-geel);
}

.bb-over-cijfer__getal {
	display: block;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bb-over-cijfer__tekst {
	display: block;
	margin-top: 4px;
	color: #6a6a63;
	font-size: 15px;
}

.bb-over-cijfer--geel .bb-over-cijfer__tekst {
	color: #4a4200;
}

/* --- 2. Sfeerbeeld --- */

.bb-over-sfeer {
	padding-top: 56px;
}

.bb-over-sfeer__beeld {
	overflow: hidden;
	height: 420px;
	border-radius: 20px;
	background-color: #e8e8e4;
}

.bb-over-sfeer__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 3. Kop boven de tijdlijn --- */

.bb-over-geschiedenis {
	padding-top: 88px;
}

.bb-over-geschiedenis__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.bb-over-geschiedenis__titel {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.bb-over-geschiedenis__meta {
	margin: 0;
	color: #6a6a63;
	font-size: 15px;
	text-align: right;
}

/* --- 4. De jaarrail ---
   Plakt aan de bovenkant. De kopbalk plakt niet, dus top:0 kan hier gewoon. De
   halftransparante achtergrond met blur houdt de tekst eronder leesbaar terwijl
   hij eronderdoor schuift. */

.bb-over-rail {
	position: sticky;
	top: 0;
	z-index: 20;
	margin-top: 26px;
	background-color: rgba(245, 245, 245, 0.92);
	backdrop-filter: blur(8px);
}

.bb-over-rail__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-block: 14px;
}

.bb-over-rail__jaren {
	display: flex;
	flex: none;
	gap: 8px;
}

.bb-over-jaar {
	padding: 9px 18px;
	border: 1px solid #dededa;
	border-radius: 999px;
	color: #6a6a63;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.bb-over-jaar:hover,
.bb-over-jaar:focus-visible {
	border-color: var(--bb-zwart);
	color: var(--bb-zwart);
	text-decoration: none;
}

.bb-over-jaar.is-actief {
	border-color: var(--bb-zwart);
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

.bb-over-rail__balk {
	position: relative;
	flex: 1;
	height: 2px;
	overflow: hidden;
	background-color: #dededa;
}

.bb-over-rail__voortgang {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;

	/* tijdlijn.js zet --bb-voortgang op de rail; hier is dat een breedte. */
	width: var(--bb-voortgang, 20%);
	background-color: var(--bb-zwart);
	transition: width 0.35s ease;
}

/* --- 5. De mijlpalen --- */

.bb-over-tijdlijn {
	padding-top: 36px;
}

.bb-mijlpaal {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 56px;
	align-items: center;
	padding: 44px 0;
	border-top: 1px solid #dededa;

	/* Ruimte voor de rail die erboven blijft plakken. */
	scroll-margin-top: 88px;
}

.bb-mijlpaal:last-child {
	border-bottom: 1px solid #dededa;
}

/* Om en om leest de mijlpaal van links naar rechts en andersom. */

.bb-mijlpaal--omgekeerd {
	grid-template-columns: 1.15fr 1fr;
}

.bb-mijlpaal--omgekeerd .bb-mijlpaal__beeld {
	order: 2;
}

.bb-mijlpaal__foto {
	overflow: hidden;
	border-radius: 20px;
	background-color: #e8e8e4;
}

.bb-mijlpaal__afbeelding {
	display: block;
	width: 100%;
	height: auto;
}

.bb-mijlpaal__label {
	margin: 0;
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bb-mijlpaal__jaar {
	margin: 10px 0 0;
	font-size: 56px;
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
}

.bb-mijlpaal__kop {
	margin: 16px 0 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.bb-mijlpaal__body {
	max-width: 52ch;
	margin: 12px 0 0;
	color: #4a4a45;
	font-size: 17px;
	line-height: 1.65;
}

.bb-mijlpaal__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

/* Het citaat neemt de plaats van de foto in. */

.bb-over-citaat {
	margin: 0;
	padding: 40px 42px;
	border-radius: 20px;
	background-color: var(--bb-geel);
}

.bb-over-citaat__tekst {
	margin: 0;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;
}

.bb-over-citaat__bron {
	margin-top: 18px;
	color: #4a4200;
	font-size: 15px;
}

/* --- 6. Waar we aan vasthouden --- */

.bb-over-waarden {
	padding-top: 88px;
}

.bb-over-waarden__inner {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 56px;
	align-items: start;
}

.bb-over-waarden__kop {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.bb-over-waarden__intro {
	margin: 18px 0 0;
	color: #4a4a45;
	font-size: 17px;
	line-height: 1.6;
}

.bb-over-waarden__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-over-waarde {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	align-items: baseline;
	padding: 24px 0;
	border-top: 1px solid #dededa;
}

.bb-over-waarde:last-child {
	border-bottom: 1px solid #dededa;
}

.bb-over-waarde__nummer {
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
}

.bb-over-waarde__kop {
	display: block;
	font-size: 20px;
	font-weight: 600;
}

.bb-over-waarde__body {
	display: block;
	margin-top: 6px;
	color: #4a4a45;
	font-size: 16px;
	line-height: 1.6;
}

/* --- Tablet --- */

@media (max-width: 1024px) {
	.bb-over-cijfers {
		grid-template-columns: repeat(4, 1fr);
	}

	.bb-over-waarden__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.bb-over-sfeer__beeld {
		height: 320px;
	}
}

/* --- Mobiel --- */

@media (max-width: 720px) {
	.bb-over-cijfers {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Eén kolom: beeld boven tekst, ook bij de omgekeerde mijlpalen. */

	.bb-mijlpaal,
	.bb-mijlpaal--omgekeerd {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 0;
	}

	.bb-mijlpaal--omgekeerd .bb-mijlpaal__beeld {
		order: 0;
	}

	.bb-mijlpaal__jaar {
		font-size: 40px;
	}

	.bb-mijlpaal__kop {
		font-size: 22px;
	}

	.bb-over-geschiedenis__titel,
	.bb-over-waarden__kop {
		font-size: 28px;
	}

	.bb-over-geschiedenis__kop {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.bb-over-geschiedenis__meta {
		text-align: left;
	}

	/* De rail wordt een schuifrij; de voortgangsbalk gaat eronder liggen. */

	.bb-over-rail__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.bb-over-rail__jaren {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bb-over-rail__jaren::-webkit-scrollbar {
		display: none;
	}

	.bb-over-jaar {
		padding: 11px 18px;
	}

	.bb-over-sfeer__beeld {
		height: 220px;
	}

	.bb-over-citaat {
		padding: 28px 24px;
	}

	.bb-over-citaat__tekst {
		font-size: 19px;
	}
}

/* ==========================================================================
   KLANTENSERVICE
   Vervangt Elementor-pagina #252865 — de laatste pagina die nog door Elementor
   werd gerenderd.

   Deelt de hero, de kaarten en het slotblok met de winkel-, contact- en
   over-onspagina. Eigen aan deze pagina zijn de snelkoppelingen en de
   vragenlijst met filters.

   Boven in de hero stond een zoekveld over de vragen. Dat is eruit: de lijst is
   kort genoeg om langs te lopen en de knoppenrij erboven doet hetzelfde werk.
   ========================================================================== */

.bb-snelkaart--geel {
	background-color: var(--bb-geel);
}

.bb-snelkaart--geel .bb-snelkaart__sub {
	color: #4a4200;
}

/* --- 2. Snelkoppelingen --- */

.bb-service-snel {
	padding-top: 48px;
}

.bb-service-snel__raster {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-service-snelkaart {
	display: block;
	height: 100%;
	padding: 24px 26px;
	border-radius: 16px;
	background-color: var(--bb-wit);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.bb-service-snelkaart:hover,
.bb-service-snelkaart:focus-visible {
	background-color: var(--bb-geel);
	color: inherit;
	text-decoration: none;
}

.bb-service-snelkaart__label {
	display: block;
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bb-service-snelkaart__titel {
	display: block;
	margin-top: 10px;
	font-size: 19px;
	font-weight: 600;
}

.bb-service-snelkaart__tekst {
	display: block;
	margin-top: 4px;
	color: #6a6a63;
	font-size: 15px;
}

/* --- 3. De vragen --- */

.bb-service-vragen {
	padding-top: 88px;
}

.bb-service-vragen__kop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.bb-service-vragen__titel {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.bb-service-vragen__teller {
	margin: 0;
	color: #6a6a63;
	font-size: 15px;
	white-space: nowrap;
}

.bb-service-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.bb-service-filter {
	padding: 10px 20px;
	border: 1px solid #dededa;
	border-radius: 999px;
	background: transparent;
	color: #6a6a63;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.bb-service-filter:hover {
	border-color: var(--bb-zwart);
	color: var(--bb-zwart);
}

.bb-service-filter.is-actief {
	border-color: var(--bb-zwart);
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

.bb-service-lijst {
	margin-top: 32px;
}

.bb-service-groep {
	margin: 0;
	padding: 34px 0 8px;
	color: #8a8a82;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bb-service-groep:first-child {
	padding-top: 16px;
}

/* De vraag zelf. <details> geeft het open- en dichtklappen zonder JavaScript;
   de eigen markering vervangt het driehoekje van de browser. */

.bb-service-vraag {
	border-top: 1px solid #dededa;
	scroll-margin-top: 24px;
}

.bb-service-vraag:last-of-type {
	border-bottom: 1px solid #dededa;
}

.bb-service-vraag[open] {
	background-color: rgb(255 255 255 / 55%);
}

.bb-service-vraag__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 0;
	font-size: 19px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.bb-service-vraag__kop::-webkit-details-marker {
	display: none;
}

/* Een plus die bij het openen een min wordt: de staande streep verdwijnt. */

.bb-service-vraag__teken {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.bb-service-vraag__teken::before,
.bb-service-vraag__teken::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #8a8a82;
	transform: translateY(-50%);
}

.bb-service-vraag__teken::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.bb-service-vraag[open] .bb-service-vraag__teken::after {
	opacity: 0;
	transform: translateY(-50%) rotate(0deg);
}

.bb-service-vraag__antwoord {
	max-width: 76ch;
	padding: 0 0 24px;
	color: #4a4a45;
	font-size: 16px;
	line-height: 1.65;
}

.bb-service-vraag__antwoord p {
	margin: 12px 0 0;
}

.bb-service-vraag__antwoord > p:first-child {
	margin-top: 0;
}

.bb-service-vraag__antwoord ul {
	margin: 12px 0 0;
	padding-left: 20px;
	line-height: 1.7;
}

.bb-service-vraag__antwoord a {
	border-bottom: 2px solid var(--bb-geel);
	color: inherit;
	text-decoration: none;
}

/* Een gele melding binnen een antwoord: het retouradres, "let op". */

.bb-service-melding {
	margin: 18px 0 0;
	padding: 16px 20px;
	border-radius: 12px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
	font-size: 15px;
}

/* Bedragen uit de lopende tekst gehaald: kosten en montagetarieven. */

.bb-service-tabel {
	margin-top: 18px;
	padding: 6px 22px;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

.bb-service-tabel__kop {
	margin: 14px 0 4px;
	font-size: 16px;
	font-weight: 600;
}

.bb-service-tabel__rij {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid #eeeee9;
	font-size: 15px;
}

.bb-service-tabel__rij:last-child {
	border-bottom: 0;
}

.bb-service-tabel__rij span:last-child {
	flex: none;
	color: var(--bb-zwart);
	font-weight: 600;
}

/* De betaalmethoden als kaartjes naast elkaar. */

.bb-service-methoden {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 18px;
}

.bb-service-methode {
	padding: 16px 18px;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

.bb-service-methode--geel {
	background-color: var(--bb-geel);
}

.bb-service-methode__naam {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.bb-service-methode__land {
	color: #8a8a82;
	font-size: 14px;
	font-weight: 400;
}

.bb-service-methode__tekst {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.55;
}

.bb-service-methode--geel .bb-service-methode__tekst {
	color: #4a4200;
}

.bb-service-stappen {
	margin-top: 12px;
	padding: 20px 22px;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

.bb-service-stappen__kop {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
}

.bb-service-stap {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: baseline;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.55;
}

.bb-service-stap__nummer {
	color: #b3a250;
	font-size: 13px;
	font-weight: 600;
}

/* --- Tablet --- */

@media (max-width: 1024px) {
	.bb-service-snel__raster {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Mobiel --- */

@media (max-width: 720px) {
	.bb-service-snel {
		padding-top: 32px;
	}

	.bb-service-snel__raster,
	.bb-service-methoden {
		grid-template-columns: 1fr;
	}

	.bb-service-vragen {
		padding-top: 56px;
	}

	.bb-service-vragen__kop {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.bb-service-vragen__titel {
		font-size: 28px;
	}

	/* De filters schuiven horizontaal in plaats van over drie regels te vallen. */

	.bb-service-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.bb-service-filters::-webkit-scrollbar {
		display: none;
	}

	.bb-service-filter {
		flex: none;
		padding: 12px 20px;
	}

	.bb-service-vraag__kop {
		font-size: 17px;
		gap: 16px;
	}
}

/* ==========================================================================
   PRODUCTCATEGORIE-ARCHIEF
   Vervangt Elementor-archieftemplate #262335.

   Het productraster zelf blijft van WooCommerce; hier staat alleen de
   omlijsting: kruimelpad, titel, omschrijving en het SEO-blok eronder.
   ========================================================================== */

.bb-archief {
	/* Astra zet .ast-container op display:flex; zonder breedte krimpt dit blok
	   als flex-item. Zie ook .bb-tekstpagina en .bb-home. */
	width: 100%;
	min-width: 0;
	padding-bottom: 40px;
}

.bb-archief__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Boven het kruimelpad zit al 12px onderrand van de menubalk; met nog eens
   16px eigen marge kwam het los van de header te hangen. Onderaan blijft de
   ruimte naar de titel wél staan. */

.bb-archief .woocommerce-breadcrumb {
	margin: 6px 0 16px;
	font-size: 12px;
}

.bb-archief__titel {
	margin: 0 0 8px;
	font-size: 25px;
	font-weight: 600;
}

.bb-archief__omschrijving {
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 1.6;
}

/* --- De introtekst: eerste zin, de rest achter "Lees meer" --- */

.bb-archief__intro-kort {
	margin: 0;
}

.bb-archief__intro-vol > :first-child {
	margin-top: 0;
}

.bb-archief__intro-vol > :last-child {
	margin-bottom: 0;
}

/* Een knop die als tekst leest: hij hoort in de zin thuis, niet ernaast. */

.bb-archief__meer {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--bb-zwart);
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.bb-archief__producten {
	margin-bottom: 40px;
}

/* --- De rij subcategorieën boven de producten ---
   Een schuifrij met een afbeelding en de naam eronder, zie
   inc/categorie-subrij.php. Zes tegels naast elkaar, even breed als de kolom
   toelaat: zo houden alle rijen dezelfde maat, hoeveel subcategorieën er ook
   staan, en schuift hij door zodra het er meer dan zes zijn.

   Het schuiven en de knoppen komen van de gedeelde bb-carrousel. Eén ding
   wordt daar overschreven: die zet een rij die past in het midden, en hier
   hoort hij links uit te lijnen met de producten eronder. */

.bb-subrij {
	/* De ruimte tussen de tegels; de tegelbreedte hieronder rekent ermee. */
	--bb-subrij-gat: 24px;

	margin-bottom: 28px;
}

/* Aanschuiven op de dichtstbijzijnde tegel in plaats van er altijd één willen
   halen. Met mandatory sprong de rij bij het kleinste duwtje een hele tegel
   door — je schuift een centimeter en hij scrolt twee. Proximity laat hem staan
   waar je hem loslaat, tenzij je er vlakbij zit. Dezelfde afweging als bij de
   miniaturen onder de productfoto.

   En de rij houdt zijn scrollbeweging voor zich: zonder dat loopt een veeg die
   aan het eind komt door in de pagina eronder. */

.bb-subrij__spoor {
	gap: var(--bb-subrij-gat);
	scroll-snap-type: x proximity;
	overscroll-behavior-inline: contain;
}

.bb-subrij .bb-carrousel--past .bb-carrousel__spoor {
	justify-content: flex-start;
}

/* Zes tegels naast elkaar, wat de kolom ook meet.

   Ze stonden vast op 118px. Op de boxspringpagina staan er zes, en die vulden
   828px terwijl de kolom naast het filter er 800 breed is: net te veel, en de
   carrousel schoof aan met knoppen erbij voor een rij die er bijna helemaal
   stond. Nu leidt de tegel zijn breedte af van de kolom — de ruimte min de
   vijf tussenruimtes, gedeeld door zes — zodat het altijd uitkomt.

   De breedte hangt aan de kolom en niet aan het aantal tegels, dus alle rijen
   houden dezelfde maat, hoeveel subcategorieën er ook staan. Staan er meer dan
   zes, dan valt de zevende buiten beeld en schuift de rij door zoals eerst.

   De grenzen houden het redelijk: nooit smaller dan 92px (dezelfde maat als op
   mobiel, daaronder wordt het beeld een postzegel — dan liever schuiven) en
   nooit breder dan de 118px van hiervoor. De 3px eraf is speling: zonder die
   marge kan een afronding van een halve pixel de rij een haar te breed maken
   en gaat de carrousel alsnog aan. */

.bb-subrij__item {
	flex: 0 0 auto;
	width: clamp(92px, calc((100% - 5 * var(--bb-subrij-gat) - 3px) / 6), 118px);
}

.bb-subrij__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #3d3d3d;
	text-decoration: none;
}

/* Dezelfde ronde hoeken als de productkaarten eronder. Iets kleiner dan de
   20px daar: een tegel is een kwart van de breedte van zo'n kaart, en met
   dezelfde 20px wordt het vierkant een bolletje. overflow houdt een
   afbeelding die het vlak helemaal vult binnen de ronding. */

.bb-subrij__beeld {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--bb-wit);
}

/* De productfoto's verschillen sterk in verhouding; contain houdt ze heel. */

.bb-subrij__afbeelding {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.bb-subrij__titel {
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
}

.bb-subrij__link:hover .bb-subrij__titel,
.bb-subrij__link:focus-visible .bb-subrij__titel {
	text-decoration: underline;
}

/* Op een smal scherm kleinere tegels, zodat er er meer dan twee in beeld
   staan en zichtbaar blijft dat de rij verder loopt. */

@media (max-width: 600px) {
	.bb-subrij {
		--bb-subrij-gat: 14px;
	}

	.bb-subrij__item {
		width: 92px;
	}
}

/* ==========================================================================
   FILTER OP DE CATEGORIEPAGINA
   Eén formulier, twee vormen: een kolom links op een breed scherm, een paneel
   over het hele scherm op een smal. Zie inc/categorie-filter.php.
   ========================================================================== */

/* --- De kolom naast de producten --- */

@media (min-width: 922px) {
	.bb-archief__hoofd {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	/* De knop is er alleen voor het paneel op mobiel. */
	.bb-filter__opener,
	.bb-filter__kop {
		display: none;
	}

	.bb-filter {
		position: sticky;
		top: 100px;
	}

	/* Op mobiel staat sorteren in het paneel; hier staat het keuzemenu al boven
	   de lijst. De aangevinkte optie blijft wel meegestuurd, zodat de sortering
	   niet omvalt zodra je filtert. */
	.bb-filter__blok--sorteren {
		display: none;
	}
}

/* Tussen 922 en 1100px is er naast de filterkolom geen ruimte meer voor drie
   kaarten; dan blijft er een beeld van nog geen 190px over. */

@media (min-width: 922px) and (max-width: 1099px) {
	#page .bb-archief ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Het formulier zelf, in beide vormen --- */

.bb-filter__blok {
	border-bottom: 1px solid #e3e3e3;
}

.bb-filter__kopje {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 0;
	color: var(--bb-zwart);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.bb-filter__kopje::-webkit-details-marker {
	display: none;
}

.bb-filter__chevron {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}

.bb-filter__blok[open] .bb-filter__chevron {
	transform: rotate(180deg);
}

.bb-filter__opties {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 20px;
}

/* Een categorie als boxspring heeft ruim dertig maten. Ze staan er allemaal —
   wie een 90x230 zoekt moet die kunnen vinden — maar binnen een eigen
   schuifgebied, zodat het blok de andere niet uit beeld duwt. */

.bb-filter__opties--lang {
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bb-filter__optie {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.bb-filter__optie input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--bb-zwart);
}

/* --- De prijs: een balk met twee grepen ---

   Het waren twee invulvelden, "van" en "tot". Die vragen om een bedrag terwijl
   een bezoeker niet weet wat er te halen valt: je moet zelf bedenken dat een
   boxspring rond de duizend euro kost voordat je iets kunt intikken. Een balk
   toont het bereik en waar je erin staat, en je kunt hem niet verkeerd invullen.

   Twee <input type="range"> over elkaar heen, elk met zijn eigen grens mee als
   `min_price` en `max_price` — dezelfde zoekargumenten als eerst, dus voor
   WooCommerce verandert er niets. Zonder JavaScript werkt een schuif gewoon;
   dan blijft alleen het gekleurde stuk tussen de grepen leeg en kunnen de twee
   elkaar passeren.

   Dun gehouden: een dikke zwarte balk over de volle breedte van de kolom trekt
   meer aandacht dan het prijsfilter verdient — hij stond zwaarder in de kolom
   dan de bestelknop. Een spoor van drie pixels met twee kleine grepen leest als
   een besturing en niet als een streep, en de bedragen eronder staan in een
   vakje zodat je ziet dat ze bij elkaar horen. Dat vakje is bewust de vorm van
   de invulvelden die hier eerst stonden.

   De maten hangen samen: een greep is 16px, dus het midden van een greep loopt
   van 8px tot 8px voor het eind. Het spoor en de vulling staan op diezelfde
   acht pixels, zodat de balk precies van hart tot hart loopt en er onder een
   greep aan het uiteinde geen streepje uitsteekt. */

.bb-filter__prijs {
	padding-bottom: 20px;
}

.bb-filter__prijsbaan {
	position: relative;
	height: 20px;
}

.bb-filter__prijsspoor,
.bb-filter__prijsvulling {
	position: absolute;
	top: 50%;
	height: 3px;
	border-radius: 2px;
	transform: translateY(-50%);
}

.bb-filter__prijsspoor {
	right: 8px;
	left: 8px;
	background-color: #dcdcdc;
}

/* De twee verhoudingen komen van het script, als getal tussen 0 en 1. Staan ze
   er niet — geen JavaScript — dan blijft de vulling op nul breed en zie je
   alleen het grijze spoor. */

.bb-filter__prijsvulling {
	right: calc(8px + (1 - var(--bb-prijs-tot, 0)) * (100% - 16px));
	left: calc(8px + var(--bb-prijs-van, 0) * (100% - 16px));
	background-color: var(--bb-zwart);
}

/* De schuiven zelf zijn onzichtbaar op hun greep na: het spoor eronder tekenen
   we zelf, want twee sporen over elkaar heen is één streep te veel.

   Alles staat hier op `.bb-filter__prijs input.bb-filter__prijsgreep` en niet op
   de klasse alleen. Astra heeft namelijk een eigen schuifbalk in main.min.css —
   een blauwe greep van twintig pixels op een afgerond spoor met een grijze
   slagschaduw — en die staat op `input[type=range]`. Een element met een
   attribuut weegt zwaarder dan één klasse, dus won Astra: op staging stond er
   een wit pilletje met een schaduw onder de balk en waren de grepen blauw. Twee
   klassen en het element erbij winnen wel.

   Om diezelfde reden staat hieronder ook wat je niet zou verwachten te hoeven
   zeggen: geen schaduw, geen ronding, geen marge. Dat zijn stuk voor stuk
   dingen die Astra zet en die hier weg moeten.

   pointer-events op none, en op de greep weer op auto: de twee schuiven liggen
   over elkaar heen en zonder dit vangt de bovenste elke klik op — ook die op de
   greep van de onderste, die daarmee niet meer te pakken is. Het toetsenbord
   heeft er geen last van: tabben en focus blijven gewoon werken. */

.bb-filter__prijs input.bb-filter__prijsgreep {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
}

.bb-filter__prijsgreep--van {
	z-index: 3;
}

.bb-filter__prijsgreep--tot {
	z-index: 4;
}

/* Liggen de twee grepen op elkaar aan de rechterkant, dan ligt "tot" bovenop en
   is "van" niet meer te pakken. Het script legt in dat geval deze klasse erop
   en draait de volgorde om. */

.bb-filter__prijsgreep--boven {
	z-index: 5;
}

/* Het spoor van de browser zelf, waar Astra zijn pilletje van maakt. Het onze
   ligt eronder als een eigen element, dus dit vlak hoort leeg te zijn. Wel op
   de volle hoogte van de schuif: de browser zet de greep in het midden van dit
   vlak, en op de 8,6px van Astra hangt hij scheef. */

.bb-filter__prijs input.bb-filter__prijsgreep::-webkit-slider-runnable-track {
	height: 20px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bb-filter__prijs input.bb-filter__prijsgreep::-moz-range-track {
	height: 20px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.bb-filter__prijs input.bb-filter__prijsgreep::-webkit-slider-thumb {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 2px solid var(--bb-zwart);
	border-radius: 50%;
	background: var(--bb-wit);
	box-shadow: none;
	cursor: grab;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
}

.bb-filter__prijs input.bb-filter__prijsgreep::-moz-range-thumb {
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 2px solid var(--bb-zwart);
	border-radius: 50%;
	background: var(--bb-wit);
	box-shadow: none;
	cursor: grab;
	pointer-events: auto;
}

.bb-filter__prijs input.bb-filter__prijsgreep:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--bb-zwart);
	outline-offset: 2px;
}

.bb-filter__prijs input.bb-filter__prijsgreep:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--bb-zwart);
	outline-offset: 2px;
}

/* De twee bedragen onder de balk, elk in een vakje. Even breed (flex: 1 1 0) en
   niet zo breed als het bedrag toevallig is: anders verspringen ze onder je
   handen terwijl je schuift, van "€ 900" naar "€ 1.150" en weer terug. */

.bb-filter__prijsbedragen {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 0;
	font-size: 13px;
	font-weight: 600;
}

.bb-filter__prijsbedrag {
	flex: 1 1 0;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid #dcdcdc;
	border-radius: 8px;
	background-color: var(--bb-wit);
	color: var(--bb-zwart);
	text-align: center;
}

.bb-filter__prijsstreep {
	color: #9a9a9a;
}

.bb-filter__toepassen {
	display: flex;
	width: 100%;
	margin-top: 20px;
	padding-block: 14px;
}

/* Staat er alleen als er iets te wissen valt. Met een rand in plaats van geel:
   het is de weg terug, niet de handeling waar de knop erboven voor is. */

.bb-filter__wissen {
	display: flex;
	width: 100%;
	margin-top: 10px;
	padding-block: 13px;
	border-color: #d5d5d5;
	background-color: var(--bb-wit);
	font-size: 14px;
}

/* --- Het paneel op een smal scherm --- */

@media (max-width: 921px) {
	/* Dicht: onzichtbaar én onbereikbaar voor toetsenbord en schermlezer, maar
	   met een overgang — vandaar visibility en niet display. */
	.bb-filter {
		position: fixed;
		inset: 0;
		z-index: 210;
		background-color: var(--bb-wit);
		visibility: hidden;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.bb-filter.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	/* De knop en het toepassen blijven staan; alleen de opties schuiven. */
	.bb-filter__form {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bb-filter__kop {
		display: flex;
		justify-content: flex-end;
		flex: 0 0 auto;
		padding: 12px 12px 0;
	}

	.bb-filter__sluit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		color: var(--bb-zwart);
		cursor: pointer;
	}

	.bb-filter__body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px;
		-webkit-overflow-scrolling: touch;
	}

	/* Binnen het paneel geen tweede schuifvlak. Op een breed scherm houdt die
	   grens de kolom kort, maar in het paneel over het hele scherm leverde hij
	   twee vlakken op die allebei schuiven: de lijst met maten liep halverwege
	   een regel dood, terwijl er onder "Prijs" een half scherm leeg bleef. Het
	   paneel schuift nu als geheel en de blokken vullen het van boven naar
	   onder. */

	.bb-filter__opties--lang {
		max-height: none;
		overflow-y: visible;
	}

	/* De kop krijgt een titel naast het kruisje; zie bb_filter_paneel() in
	   inc/categorie-filter.php. Zonder die titel was de bovenrand een lege balk
	   met een kruisje in de hoek. */

	.bb-filter__kop {
		align-items: center;
		justify-content: space-between;
		padding: 10px 8px 6px 20px;
		border-bottom: 1px solid #e3e3e3;
	}

	.bb-filter__titel {
		margin: 0;
		font-size: 17px;
		font-weight: 600;
	}

	.bb-filter__voet {
		flex: 0 0 auto;
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid #e3e3e3;
		background-color: var(--bb-wit);
	}

	.bb-filter__toepassen {
		margin-top: 0;
	}

	/* De openknop blijft onderin het scherm staan, boven de productlijst. */
	/* Geel en zo breed als het woord: hij lag eerder als een witte balk over de
	   volle breedte, en dat las als een strook onder de lijst in plaats van als
	   een knop. Nu een pil in de merkkleur, midden onderin. */

	.bb-filter__opener {
		position: fixed;
		bottom: calc(8px + env(safe-area-inset-bottom));
		left: 50%;
		z-index: 120;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 14px 32px;
		transform: translateX(-50%);
		border: 0;
		border-radius: 999px;
		background-color: var(--bb-geel);
		box-shadow: 0 4px 16px rgb(0 0 0 / 18%);
		color: var(--bb-zwart);
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	/* De productlijst eindigt anders achter de knop. */
	.bb-archief__producten {
		padding-bottom: 60px;
	}

	/* Op mobiel staat sorteren in het paneel; het keuzemenu boven de lijst zou
	   dan twee keer hetzelfde doen. Het aantal producten blijft wel staan. */
	.bb-archief__balk .woocommerce-ordering {
		display: none;
	}
}

/* --- De balk met het aantal producten en het sorteermenu ---
 *
 * WooCommerce zet die twee met floats naast elkaar. Op een breed scherm gaat
 * dat goed, maar op een smal scherm passen ze niet meer naast elkaar en vielen
 * ze onder elkaar — twee regels voor twee korte dingen. Als flexregel blijven
 * ze naast elkaar en krimpt het sorteermenu mee.
 */

.bb-archief__balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 15px;
}

/* WooCommerce zet twee lege meldingsblokken in deze haak; zonder dit zouden
   die als flexitem alsnog ruimte innemen. */
.bb-archief__balk .woocommerce-notices-wrapper:empty {
	display: none;
}

.bb-archief__balk .woocommerce-result-count,
.bb-archief__balk .woocommerce-ordering {
	float: none;
	margin: 0;
	min-width: 0;
}

/* Het aantal houdt zijn eigen breedte en breekt niet af; het sorteermenu is
   het enige dat mag krimpen. Zonder dit stond er op een smal scherm "91" met
   "producten" eronder. */

.bb-archief__balk .woocommerce-result-count {
	flex: 0 0 auto;
	white-space: nowrap;
}

.bb-archief__balk .woocommerce-ordering {
	flex: 0 1 auto;
}

.bb-archief__balk .woocommerce-ordering select {
	max-width: 100%;
}

.bb-archief__onder {
	font-size: 14px;
	line-height: 1.7;
}

.bb-archief__seo h2 {
	margin-top: 28px;
	font-size: 20px;
	font-weight: 600;
}

.bb-archief__seo h3 {
	margin-top: 20px;
	font-size: 17px;
	font-weight: 600;
}

/* --- De veelgestelde vragen onder de SEO-tekst ---
   Dezelfde uitklaplijst als op de campagnepagina's, maar in de maat van deze
   pagina: daar is het een eigen sectie met koppen van 19px, hier loopt hij
   door op de SEO-tekst en hoort de vraag niet groter te zijn dan een kopje in
   die tekst. Zie inc/categorie-faq.php. */

.bb-archief__faq {
	margin-top: 32px;
}

.bb-archief__faq .bb-faq__vraag {
	padding: 12px 0;
	font-size: 16px;
}

.bb-archief__faq .bb-faq__vraag::after {
	font-size: 20px;
}

.bb-archief__faq .bb-faq__antwoord {
	padding-bottom: 14px;
	font-size: 14px;
}

.bb-archief__faq .bb-faq__antwoord > :first-child {
	margin-top: 0;
}

.bb-archief__faq .bb-faq__antwoord > :last-child {
	margin-bottom: 0;
}

/* De lijst eindigt tegen de onderrand van de pagina; een streep onder de
   laatste vraag zou daar los komen te hangen. */

.bb-archief__faq .bb-faq__item:last-child {
	border-bottom: 0;
}

/* Het Elementor-archief toonde een uitgeklede productkaart: beeld, titel,
   sterren, prijs. WooCommerce's eigen lus laat er meer op zien. Drie dingen
   halen we er weer af.

   De knop "Opties selecteren" komt van Astra zelf (modern_add_to_cart), niet
   van WooCommerce's woocommerce_template_loop_add_to_cart — een remove_action
   raakt hem dus niet. En Astra drukt zijn eigen stijlen als inline CSS ná onze
   stylesheet af, waardoor !important hier nodig is om te winnen.

   De levertijdregel komt uit een snippet dat in de database staat en in geen
   enkel PHP-bestand te vinden is. Op de productpagina zelf blijft alles staan;
   dit geldt alleen voor het categorie-archief. */

.bb-archief .levertijd_cat_wrap,
.bb-archief .ast-onsale-card,
.bb-archief .astra-shop-summary-wrap .add_to_cart_button {
	display: none !important;
}

/* Ruimte tussen de doorgestreepte en de werkelijke prijs op de productkaart.
   De van/voor-prijs komt uit bb_archief_van_voor_prijs() in inc/prijzen.php;
   deze regel stond in datzelfde codefragment (#285692) als een <style> in de
   paginakop en is hier ongewijzigd overgenomen. */

.astra-shop-summary-wrap .price del {
	margin-right: 5px;
}

/* --- Het label "Meest verkocht" op een productkaart ---
   Hangt aan de producttag meest-verkocht en wordt met ::after op de kaartlink
   gezet. Stond tot 18 augustus 2026 als los codefragment in de database
   (WPCode #272539) en is hier ongewijzigd overgenomen — inclusief de gele tint
   #fcde28, die net iets afwijkt van --bb-geel, en het lettertype PT Sans. Beide
   zijn bewust niet meegenomen in deze verhuizing: eerst hetzelfde beeld, daarna
   pas opruimen. */

.product_tag-meest-verkocht .woocommerce-LoopProduct-link {
	position: relative;
}

.product_tag-meest-verkocht .woocommerce-LoopProduct-link::after {
	content: 'Meest verkocht';
	position: absolute;
	top: 30px;
	left: 0;
	width: max-content;
	padding: 6px 10px;
	border-radius: 0 14px 14px 0;
	background: #fcde28;
	color: #000;
	font-family: "PT Sans", Sans-serif;
	font-size: 15px;
	font-weight: 900;
}

/* --- Afbeeldingenslider op de productkaart ---
   Alles is inline-level (<span>), omdat deze opmaak binnen de productlink
   staat en blok-elementen daar niet in mogen. */

.bb-kaartslider {
	position: relative;
	display: block;

	/* Zonder dit houdt de regelhoogte van de <span> een paar pixels onder de
	   afbeelding over, waardoor de bolletjes er net buiten vielen. */
	line-height: 0;
}

.bb-kaartslider__spoor {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	/* Met de muis slepen: de cursor laat zien dat het kan, en tekstselectie
	   zou het slepen anders onderbreken. */
	cursor: grab;
	user-select: none;
}

.bb-kaartslider__spoor.is-slepend {
	cursor: grabbing;
	scroll-snap-type: none;
}

.bb-kaartslider__spoor::-webkit-scrollbar {
	display: none;
}

.bb-kaartslider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.bb-kaartslider__afbeelding {
	display: block;
	width: 100%;
	height: auto;

	/* De browser wil een afbeelding standaard zelf verslepen; dat zit het
	   slepen van de slider in de weg. De klik valt door naar de productlink
	   eromheen, dus die blijft gewoon werken. */
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}

.bb-kaartslider__stippen {
	position: absolute;
	bottom: 24px;
	left: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
	width: 100%;
}

.bb-kaartslider__stip {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
	cursor: pointer;
}

.bb-kaartslider__stip.is-actief {
	background-color: var(--bb-geel);
}

/* De pijlen maken zichtbaar dat er meer foto's zijn. Ze worden door
   assets/js/kaartslider.js neergezet, dus wat hier staat geldt alleen als dat
   script draait. Dezelfde ronde vorm als de pijlen van de carrousel op de
   homepage, een maatje kleiner omdat een kaart nu eenmaal kleiner is. */

.bb-kaartslider__pijl {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
	color: var(--bb-zwart);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

/* display: grid hierboven wint het van het verbergen door de browser, dus dat
   moet er expliciet bij. */

.bb-kaartslider__pijl[hidden] {
	display: none;
}

.bb-kaartslider__pijl--vorige {
	left: 8px;
}

.bb-kaartslider__pijl--volgende {
	right: 8px;
}

.bb-kaartslider__pijl:hover {
	background-color: var(--bb-wit);
}

.bb-kaartslider__pijl:focus-visible {
	outline: 2px solid var(--bb-zwart);
	outline-offset: 2px;
}

/* Astra zet rechtsboven op de kaartafbeelding een winkeltasje ("Opties
   selecteren") dat pas bij hover zichtbaar wordt. Safari op iPhone en iPad
   gebruikt de eerste tik dan om die hover te tonen, en pas de tweede tik opent
   het product. Op een touchscherm valt er niets te hoveren, dus daar mag het
   tasje helemaal weg — het leidt toch naar dezelfde productpagina. */

@media (hover: none) {
	.astra-shop-thumbnail-wrap .ast-on-card-button:not(.ast-onsale-card) {
		display: none;
	}
}

/* --- Vormgeving van het categorie-archief ---
   Lichtgrijze pagina met witte kaarten, zoals in het nieuwe ontwerp. */

.bb-archief {
	background-color: var(--bb-grijs-licht);
}

.bb-archief ul.products > li.product {
	/* Ruimte links en rechts van de tekst op de kaart. Als variabele, omdat de
	   titel buiten het samenvattingsblok staat en er toch op moet uitlijnen. */
	--bb-kaart-marge: 18px;

	overflow: hidden;
	border-radius: 20px;
	background-color: var(--bb-wit);
}

/* De afbeelding loopt tot de rand; de tekst eronder krijgt zijn eigen ruimte.
   Bovenaan weinig: de titel staat er vlak boven en hoort bij de sterren en de
   prijs eronder. */

.bb-archief .astra-shop-summary-wrap {
	padding: 4px var(--bb-kaart-marge) 22px;
}

/* Astra zet de producttitel binnen het beeldblok, en dat loopt met opzet tot
   de rand door. Zonder eigen ruimte plakt de titel daardoor tegen de linkerkant
   terwijl de sterren en de prijs eronder wél inspringen. Dezelfde marge trekt
   de kolom recht. */

.bb-archief ul.products > li.product .woocommerce-loop-product__title {
	margin-bottom: 6px;
	padding-inline: var(--bb-kaart-marge);
}

/* Is er op maat gefilterd, dan staat de gekozen maat achter de productnaam;
   zie inc/categorie-variaties.php. Als eigen regel eronder en niet achter de
   naam aan: productnamen lopen hier vaak al over twee regels, en dan is de maat
   het eerste wat je kwijtraakt terwijl je er net op gefilterd hebt. */

.bb-kaart__variatie {
	display: block;
	color: #5f5f5f;
	font-size: 14px;
	font-weight: 400;
}

/* WooCommerce geeft de sterrenbalk een eigen uitlijning, waardoor hij niet op
   één lijn stond met de producttitel erboven. */

.bb-archief ul.products > li.product .star-rating {
	float: none;
	margin: 0;

	/* Een losse regel elders zet de sterrenbalk op 100px, terwijl de vijf
	   sterretjes zelf 5,4 keer de letterhoogte beslaan — zo'n 74px. Die 26px
	   verschil is leeg en duwde het cijfer van de sterren af. !important omdat
	   die regel het ook gebruikt; deze selector is specifieker en wint. */
	width: 5.4em !important;
}

/* Op een telefoon staan de kaarten onder elkaar. Astra zet er standaard twee
   naast elkaar onder de 545px — zijn eigen grens voor mobiel, dus die houden we
   aan. Twee kaarten naast elkaar laat een beeld van nog geen 165px over, en dan
   is van een bed weinig te zien.

   Via #page, want de regel van Astra telt vier klassen en wint het anders van
   een eigen selector. Zie ook de afrekenpagina, waar hetzelfde speelt. */

@media (max-width: 544px) {
	#page .bb-archief ul.products:not(.elementor-grid) {
		grid-template-columns: 1fr;
	}
}

/* Sterren, cijfer en aantal vormen samen één regel. Wrap staat aan omdat de
   kaarten op een smal scherm naast elkaar staan: dan zakt de telling netjes
   naar de volgende regel in plaats van de kaart open te duwen. */

.bb-archief .review-rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3px 6px;
	margin-bottom: 8px;
}

.bb-beoordeling__cijfer {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--bb-zwart);
}

.bb-beoordeling__aantal {
	font-size: 12px;
	line-height: 1;
	color: #6b6b6b;
}

/* Tussen de telefoon en de laptop staan de kaarten met z'n drieën naast elkaar
   en is er geen ruimte voor "24 klantbeoordelingen"; daar blijft "(24)" over.
   De grenzen zijn nagemeten en niet gekozen: bij een venster van 960px past de
   hele regel nog net en bij 922px valt hij uiteen, en onder de 545px staan de
   kaarten onder elkaar en is er ruimte zat. Niet met display:none maar
   weggeschoven, zodat een schermlezer de hele zin nog gewoon voorleest. */

@media (min-width: 545px) and (max-width: 959px) {
	.bb-beoordeling__woord {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Sterren in oranje in plaats van het standaardgrijs. */

.bb-archief .star-rating,
.bb-archief .star-rating::before,
.bb-archief .star-rating span::before {
	color: #f5a623;
}

/* ==========================================================================
   ZOEKRESULTATEN
   Het sjabloon search-product.php, met de logica in inc/zoekresultaten.php.

   De pagina leunt op de categoriepagina: .bb-archief levert het grijze vlak en
   het productraster. Hieronder staat alleen wat daar niet bestaat — de kop met
   de zoekterm, de lege staat en het blok onderaan.

   Er stonden hier eerder ook regels voor drie tabbladen, een filterkolom, een
   hulpkaart en een lijst met adviesantwoorden. Die onderdelen zijn op verzoek
   van de pagina af; hun opmaak is meegegaan.
   ========================================================================== */

/* --- De kop --- */

.bb-zoek__kop {
	margin-bottom: 24px;
}

.bb-zoek__aanhef {
	margin: 0;
	color: #6a6a63;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.bb-zoek__titel {
	margin: 10px 0 0;
	font-size: 34px;
	font-weight: 600;
	line-height: 1.15;
}

.bb-zoek__samenvatting {
	margin: 8px 0 0;
	color: #4a4a45;
	font-size: 15px;
	line-height: 1.6;
}

/* --- Niets gevonden --- */

.bb-zoek__leeg {
	padding: 36px 38px;
	border-radius: 16px;
	background-color: var(--bb-wit);
}

.bb-zoek__leeg-kop {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
}

.bb-zoek__leeg-tekst {
	margin: 8px 0 20px;
	max-width: 56ch;
	color: #4a4a45;
	font-size: 15px;
	line-height: 1.6;
}

.bb-zoek__leeg-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* --- Het blok onderaan --- */

.bb-zoek__cta {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	margin-top: 8px;
	padding: 40px 44px;
	border-radius: 16px;
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

/* De kleur staat op de kop zelf en niet alleen op het blok eromheen: Astra
   geeft koppen een eigen kleur mee, en die erft niet weg. Zonder dit stond er
   donkergrijs op zwart. */

.bb-zoek__cta-kop {
	margin: 0;
	color: var(--bb-wit);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.15;
}

.bb-zoek__cta-tekst {
	margin: 10px 0 0;
	max-width: 48ch;
	color: #bdbdb6;
	font-size: 15px;
	line-height: 1.6;
}

.bb-zoek__cta-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}

/* --- Smallere schermen --- */

@media (max-width: 921px) {
	.bb-zoek__titel {
		font-size: 26px;
	}

	.bb-zoek__cta {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 32px 26px;
	}

	.bb-zoek__cta-kop {
		font-size: 24px;
	}

	.bb-zoek__cta-knoppen {
		justify-content: flex-start;
	}

	.bb-zoek__leeg {
		padding: 26px 24px;
	}
}

/* ==========================================================================
   PRODUCTPAGINA
   Vervangt de Elementor-producttemplates #270441, #271642 en #262353.

   Links de galerij, rechts de bestelkaart. Alles binnen die kaart wordt door
   WooCommerce en zijn plugins opgebouwd, dus hier staat vooral de omlijsting.
   ========================================================================== */

.bb-product {
	/* Astra zet .ast-container op display:flex; zonder breedte krimpt dit blok
	   als flex-item. Zie ook .bb-tekstpagina, .bb-home en .bb-archief. */
	width: 100%;
	min-width: 0;
	background-color: var(--bb-grijs-licht);
}

.bb-product__inner {
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Boven het kruimelpad zat te veel lucht: de menubalk eindigde op y=130 en de
   tekst begon pas op y=162. Die 32 pixels kwamen maar voor de helft van deze
   marge; de rest is de ruimte die Astra's container boven het blok legt. Die
   container laten we met rust — daar hangt meer aan dan deze pagina — en de
   marge vangt het verschil op. */

.bb-product .woocommerce-breadcrumb {
	margin: 0 0 16px;
	font-size: 12px;
}

/* --- De terugknop ---
   Op de plek waar het kruimelpad stond staat nu één knop terug naar de
   categorie waar de bezoeker vandaan kwam. Zie inc/product-terug.php.

   Hij leent .bb-knop--rand van de campagnepagina's en de afrekenpagina in
   plaats van een eigen vorm te krijgen: dit is een terugweg en geen aanbod, en
   dan hoort hij zich niet te meten met de gele en groene knoppen verderop.
   Alleen kleiner dan de standaardknop — 15px vet op deze plek zou zwaarder
   wegen dan de productnaam eronder. */

.bb-product__terug {
	gap: 6px;
	padding: 7px 14px 7px 11px;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	background-color: var(--bb-wit);
}

/* De pijl krimpt niet mee als de categorienaam lang wordt. Zonder dit wordt
   "Terug naar Boxsprings met opbergruimte" op een smal scherm afgerekend op de
   pijl, die dan tot een streepje wordt geperst. */

.bb-product__terug-pijl {
	flex: none;
}

/* De naam mag afbreken; de knop is geen etiket dat per se op één regel moet.
   .bb-knop zet white-space: nowrap voor knoppen met korte teksten, en dat is
   hier het verkeerde gedrag. */

.bb-product__terug-naam {
	white-space: normal;
	text-align: left;
}

/* De spatie tussen "Terug naar" en de categorienaam staat in de markup, binnen
   het eerste stuk. Niet als marge hier: dan leest een schermlezer "Terug
   naar2 Persoons boxsprings" en plakt hij ook zo aan elkaar bij het kopiëren.
   Binnen de span verdwijnt hij op een telefoon vanzelf mee. */

/* Op een telefoon staat de kopbalk er vlak boven, met een schaduw aan de
   onderkant, en het kruimelpad plakte daar met zijn kleine lettertje tegenaan.
   Een regel wit ertussen maakt van die twee weer twee dingen. */

@media (max-width: 921px) {
	/* Als binnenmarge op het grijze blok en niet als bovenmarge op het kruimelpad.
	   Die marge liep namelijk het blok uit: .bb-product__inner en .bb-product
	   hebben geen rand of binnenmarge aan de bovenkant, dus klapte hij door tot
	   aan de container erbuiten. Het resultaat was een witte strook van 28 pixels
	   tussen de kopbalk en het grijs — precies de ruimte die bedoeld was om
	   binnen dat grijs te vallen. */

	.bb-product {
		padding-top: 28px;
	}

	.bb-product .woocommerce-breadcrumb,
	.bb-product__terug {
		margin-top: 0;
	}
}

/* minmax(0, …) en niet alleen 1.35fr: een rasterkolom mag zich standaard niet
   kleiner maken dan zijn inhoud minimaal nodig heeft. De galerij bouwt zichzelf
   opnieuw op zodra er een variant gekozen wordt, met beelden die van zichzelf
   1000px breed zijn. Zonder deze grens rekte de linkerkolom daarin mee en viel
   de hele indeling uit elkaar — zichtbaar zodra de laatste variantkeuze gemaakt
   was. */

.bb-product__kolommen {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding-bottom: 32px;
}

.bb-product__galerij,
.bb-product__kaart {
	min-width: 0;
	padding: 20px;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

/* De galerij blijft in beeld terwijl je rechts je bed samenstelt.

   Bij een boxspring met acht opties wordt de bestelkaart een stuk langer dan de
   foto ernaast, en dan kijk je halverwege het samenstellen tegen een lege witte
   kolom aan. Zo blijft het product waar je aan zit te sleutelen zichtbaar.

   align-items:start op het raster hierboven is de voorwaarde: zonder dat rekt
   een rasterkolom zich over de volle hoogte uit en valt er niets meer te
   plakken.

   Alleen op een breed scherm — daaronder staat alles onder elkaar en is er geen
   tweede kolom om naast te blijven staan — en alleen als er ook echt ruimte
   voor is. De galerij is zo'n 780 pixels hoog; op een laag venster zou hij
   vastplakken met zijn onderkant, en de miniaturen buiten beeld, onbereikbaar.
   Vandaar de ondergrens op de vensterhoogte.

   Zestien pixels van de bovenkant: de kopbalk plakt niet, dus er valt niets te
   ontwijken. */

@media (min-width: 1025px) and (min-height: 860px) {
	.bb-product__galerij {
		position: sticky;
		top: 16px;
	}
}

/* En het beeld zelf blijft binnen zijn kolom, wat de plugin er ook aan maten
   op zet. */

.bb-product__galerij img {
	max-width: 100%;
	height: auto;
}

.bb-product__kaart .product_title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 600;
}

/* De bestelknop is groen in het huidige ontwerp, niet geel. */

/* De binnenmarge met !important. Hier stond 14 pixels, maar de knopinstelling
   van Astra zette er 10 overheen en dan is de knop maar 36 pixels hoog — mager
   voor de knop waar de hele pagina naartoe werkt. Zelfde afweging als bij de
   grijze wachtstand verderop: die instelling komt als losse regels in de <head>
   en dus ná dit bestand. */

.bb-product__kaart .single_add_to_cart_button {
	width: 100%;
	padding: 16px 20px !important;
	border-radius: 6px;
	font-size: 16px;
	text-transform: uppercase;
}

/* Op een telefoon groter dan op een groot scherm. Het is de knop waar de hele
   pagina naartoe werkt, hij wordt met een duim aangeraakt en niet met een
   muispunt, en op dat smalle scherm heeft hij geen omgeving die hem groot laat
   lijken. Hij wordt daarmee bijna zestig pixels hoog, ruim boven de vierenveertig
   die een duim nodig heeft. */

@media (max-width: 544px) {
	.bb-product__kaart .single_add_to_cart_button {
		padding: 19px 20px !important;
		font-size: 18px;
	}
}

/* Zolang de balk onderin staat, dekt hij de onderkant van de pagina af — en
   dat is precies de gele voetregel met het copyright. Die schuift daarom een
   balkhoogte op. Met :has(), zodat het alleen gebeurt als de balk er ook echt
   staat: bovenaan de pagina is hij verborgen en dan hoort die ruimte er niet te
   zijn. */

body:has(.bb-productbalk:not([hidden])) .bb-footer__bar {
	padding-bottom: 84px;
}

/* --- De balk onderaan de productpagina ---
   Verschijnt zodra de bestelknop naar boven uit beeld is. Zie
   inc/product-balk.php voor de opmaak en assets/js/product-balk.js voor
   wanneer hij komt en wat de knop doet. */

.bb-productbalk {
	position: fixed;
	inset-inline: 0;
	bottom: 0;

	/* Onder de chatknop rechtsonder, boven de rest van de pagina. */
	z-index: 90;
	background-color: var(--bb-wit);
	box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);

	/* Hoeveel ruimte die chatknop rechtsonder inneemt, gerekend vanaf de
	   schermrand: de knop zelf plus de marge die hij eromheen houdt. Hij komt van
	   een extern script (youshouldask.ai) en staat dus niet in deze code — dit is
	   een geschatte maat. Dekt hij de bestelknop nog steeds af, of blijft er juist
	   een gat over, dan is dit ene getal het enige dat bijgesteld hoeft te
	   worden. */
	--bb-chatruimte: 80px;
}

.bb-productbalk[hidden] {
	display: none;
}

.bb-productbalk__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: var(--bb-breedte);
	margin-inline: auto;
	padding: 14px 20px;
}

/* Op een breed scherm staat de chatknop náást de inhoudsband en is er niets aan
   de hand. Zodra het scherm smaller wordt dan die band plus de twee stroken
   ernaast, schuift hij eroverheen — en precies daar staat de bestelknop. Vanaf
   dat punt houden we rechts ruimte vrij. De grens is 1140 + 2 × 80 = 1300. */

@media (max-width: 1300px) {
	.bb-productbalk__inner {
		padding-inline-end: calc(20px + var(--bb-chatruimte));
	}
}

/* Alleen de foto nog; de naam stond hier eerder naast en is eruit, zie
   inc/product-balk.php. */

.bb-productbalk__product {
	display: flex;
	align-items: center;
	flex: none;
}

.bb-productbalk .bb-productbalk__foto {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;

	/* Astra legt met .ast-article-single img een schaduw over elk beeld binnen
	   een artikel; die hoort hier niet. */
	box-shadow: none;
}

.bb-productbalk__prijs {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex: none;

	/* Op een breed scherm staat de foto links en horen de prijs en de knop
	   rechts; vandaar deze duw. Op een telefoon is die foto verborgen en zou het
	   paar tegen de rechterrand plakken — daar staat het gecentreerd, zie de
	   media query verderop. */
	margin-left: auto;
}

.bb-productbalk__van {
	color: #8a8a8a;
	font-size: 15px;
	text-decoration: line-through;
}

/* Groter dan eerst: nu de naam eruit is, is het bedrag het enige dat de balk
   nog te melden heeft, en dan mag het ook als zodanig staan. */

.bb-productbalk__nu {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

/* Hetzelfde groen als de bestelknop en de kortingsregel erboven. */

.bb-productbalk__besparing {
	color: rgb(0, 149, 0);
	font-size: 14px;
}

/* De knop is waar deze balk voor bestaat, dus die staat er groot in: ruim boven
   de vierenveertig pixels die een duim nodig heeft, en in dezelfde maat als de
   bestelknop in de kaart erboven. De ruimte daarvoor komt van de naam die hier
   niet meer staat. */

/* Groen met witte letters, hetzelfde groen als de bestelknop in de kaart. Hij
   stond hier eerder in het geel van de huisstijl, maar deze knop doet precies
   wat die bestelknop doet — hij scrolt ernaartoe of legt het in de wagen — en
   twee kleuren voor één handeling leest als twee verschillende knoppen.

   Helemaal rond: een pil van 999px wordt door de browser afgekapt op de helft
   van de hoogte, dus die maat klopt hoe hoog de knop ook wordt. */

.bb-productbalk__knop {
	flex: none;
	padding: 19px 40px;
	border: 0;
	border-radius: 999px;
	background-color: rgb(0, 149, 0);
	color: var(--bb-wit);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: filter 0.15s ease;
}

/* Donkerder maken met een filter en niet met een tweede groen: dan staat er maar
   één kleur in de code, en dat is dezelfde manier als bij .bb-knop elders. */

.bb-productbalk__knop:hover,
.bb-productbalk__knop:focus-visible {
	filter: brightness(0.94);
	color: var(--bb-wit);
}

/* Op een telefoon moet hetzelfde verhaal in ongeveer de helft van de ruimte: de
   oude prijs, de nieuwe prijs én wat je bespaart, met de knop ernaast. Naast
   elkaar past dat niet, dus het wordt twee regels — de twee bedragen boven
   elkaar en de besparing eronder — en alles een maatje kleiner. */

@media (max-width: 700px) {
	/* De knop is op een telefoon kleiner en zit dichter op de rand, dus de
	   chatknop hoeft hier iets minder ruimte te krijgen dan op een groot scherm. */
	.bb-productbalk {
		--bb-chatruimte: 66px;
	}

	.bb-productbalk__inner {
		gap: 12px;
		padding: 10px 16px;

		/* Na de verkorte regel hierboven, anders zet die deze weer op 16px. */
		padding-inline-end: calc(16px + var(--bb-chatruimte));
	}

	/* De duw naar rechts hoort bij de indeling met de foto en moet hier weg,
	   anders heeft centreren geen effect.

	   Een raster en geen flexrij die afbreekt. Dat scheelt niet in wat je ziet —
	   de twee bedragen naast elkaar, de besparing eronder — maar wel in hoe breed
	   het blok denkt te zijn. Een flexcontainer die mag afbreken rekent zichzelf
	   de breedte toe alsof alles op één regel staat: hier zo'n tweehonderd pixels
	   in plaats van honderd. Samen met de knop ernaast paste dat niet meer, en
	   omdat het paar gecentreerd staat viel het er aan de linkerkant uit — de "1"
	   van 1250 en de "J" van "Je bespaart" stonden buiten het scherm.

	   Een raster rekent per rij en houdt de breedte van de breedste. */

	.bb-productbalk__prijs {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		gap: 2px 7px;
		margin-left: 0;
	}

	/* Over allebei de kolommen, dus op een eigen regel onder de twee bedragen. */

	.bb-productbalk__besparing {
		grid-column: 1 / -1;
	}

	.bb-productbalk .bb-productbalk__foto {
		width: 40px;
		height: 40px;
	}

	.bb-productbalk__van {
		font-size: 13px;
	}

	.bb-productbalk__nu {
		font-size: 19px;
	}

	.bb-productbalk__besparing {
		font-size: 12px;
		line-height: 1.2;
	}

	/* De knop vult op wat er rechts overblijft.

	   De prijs en de knop stonden hier als paar in het midden, maar rechts blijft
	   een strook van zo'n zeventig pixels vrij voor de chatknop. Daardoor stond
	   het paar zichtbaar links van het midden van het scherm — gemeten 42 pixels
	   ruimte links tegen 96 rechts — en dat leest als scheef, niet als bewust.

	   Nu staat de prijs links en groeit de knop tot aan die strook. Twee dingen
	   die vaststaan in plaats van één die ertussenin zweeft, en de knop wordt er
	   meteen een stuk groter van: prettiger om te raken met een duim.

	   Groeien wel, krimpen niet: onder de knop zit geen ruimte meer om weg te
	   geven zonder dat "Samenstellen" tegen de randen aan komt te staan. Daar
	   zorgt de grens op 360 pixels hieronder voor. */

	.bb-productbalk__knop {
		flex: 1 0 auto;
		padding: 15px 20px;
		font-size: 15px;
	}
}

/* Onder de 360 pixels — de oude iPhone SE en wat daarop lijkt — is er zelfs voor
   dit niet genoeg. De ruimte komt van drie kanten tegelijk: de strook voor de
   chatknop mag krapper, de balk houdt minder marge naar de randen, en de knop
   krijgt een smallere binnenmarge. De letters blijven zoals ze zijn; die
   verkleinen zou het op een klein scherm juist slechter leesbaar maken. */

@media (max-width: 360px) {
	.bb-productbalk {
		--bb-chatruimte: 56px;
	}

	.bb-productbalk__inner {
		gap: 8px;
		padding: 10px 12px;
		padding-inline-end: calc(12px + var(--bb-chatruimte));
	}

	.bb-productbalk__knop {
		padding: 15px 14px;
	}
}

/* Op een telefoon gaat de foto eruit. De strook die voor de chatknop vrijblijft
   moet ergens vandaan komen, en van wat er in de balk staat is die foto het
   minst nodig: je kijkt op dat moment naar de productpagina zelf. Op een scherm
   van 375px is die ruimte precies wat de prijs en de knop nodig hebben. */

@media (max-width: 544px) {
	.bb-productbalk .bb-productbalk__foto {
		display: none;
	}
}

/* --- Tabbladen --- */

/* --- Tabbladen ---
   De knoppen staan onder elkaar links, het paneel ernaast. Markup en het
   wisselen blijven van WooCommerce: de panelen liggen allemaal in dezelfde
   rastercel en de plugin toont er één. Zo hoeft er geen eigen JavaScript bij
   en overleeft dit een update van WooCommerce. */

/* Het witte vlak zit op het blok binnenin en niet op de sectie: die loopt tot
   de rand van .bb-product__inner en was daarmee aan weerszijden 20px breder dan
   de galerij en de bestelkaart erboven. Nu is het net zo'n kaart als die twee,
   even breed en met dezelfde hoeken. */

.bb-product__tabbladen {
	padding-block: 32px;
}

.bb-product__tabbladen .woocommerce-tabs {
	padding: 20px;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

.bb-product__tabbladen .woocommerce-tabs {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs {
	display: flex;
	grid-row: 1;
	grid-column: 1;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li {
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--bb-grijs-licht);
	font-size: 15px;
	transition: background-color 0.15s ease;
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	color: var(--bb-zwart);
	font-weight: 600;
	text-decoration: none;
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.active {
	background-color: #3d3d3d;
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.active a {
	color: var(--bb-wit);
}

/* Het icoontje is een masker in plaats van een plaatje, zodat het de kleur van
   de tekst aanneemt — ook als de knop actief en dus donker is. */

.bb-product__tabbladen .woocommerce-tabs ul.tabs li a::before {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--bb-tab-icoon) center / contain no-repeat;
	mask: var(--bb-tab-icoon) center / contain no-repeat;
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.description_tab {
	--bb-tab-icoon: 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' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h11'/%3E%3C/svg%3E");
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.additional_information_tab {
	--bb-tab-icoon: 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' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.bb_services_tab {
	--bb-tab-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.9 6.1 6.6.9-4.8 4.6 1.2 6.6L12 17.1 6.1 20.2l1.2-6.6L2.5 9l6.6-.9z'/%3E%3C/svg%3E");
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.bb_showrooms_tab {
	--bb-tab-icoon: 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' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.6-5h14.8L21 9M4.5 9v11h15V9M4.5 20h15'/%3E%3C/svg%3E");
}

.bb-product__tabbladen .woocommerce-tabs ul.tabs li.reviews_tab {
	--bb-tab-icoon: 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' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H4l2-3a8 8 0 1 1 15-5z'/%3E%3C/svg%3E");
}

/* Alle panelen in dezelfde cel; WooCommerce laat er één zien. */

.bb-product__tabbladen .woocommerce-tabs .wc-tab {
	grid-row: 1;
	grid-column: 2;
	margin: 0;
	padding: 28px 30px;
	border-radius: 12px;
	background-color: var(--bb-grijs-licht);
	font-size: 15px;
	line-height: 1.6;
}

.bb-product__tabbladen .wc-tab > :first-child {
	margin-top: 0;
}

.bb-product__tabbladen .wc-tab > :last-child {
	margin-bottom: 0;
}

/* --- Inhoud van het tabblad "Onze showrooms" --- */

.bb-tab-showroom + .bb-tab-showroom {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #e3e3e3;
}

.bb-tab-showroom__naam {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
}

.bb-tab-showroom__adres,
.bb-tab-showroom__tel,
.bb-tab-showroom__tijden {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.bb-tab-showroom__tijden {
	color: #5c5c5c;
}

.bb-tab-showrooms__link {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 600;
}

/* --- Contactblok --- */

.bb-product-vraag {
	padding-block: 40px;
	text-align: center;
}

/* Op één regel, ook op een telefoon. Op 24px brak "Heeft u een vraag over dit
   product?" daar in tweeën en stond het vraagteken alleen op de tweede regel.
   Met vw schaalt de kop mee met het scherm; de ondergrens houdt hem leesbaar
   op de smalste toestellen, de bovengrens is de oude maat op desktop. */

.bb-product-vraag__kop {
	margin: 0 0 24px;
	font-size: clamp(15px, 4.5vw, 24px);
	font-weight: 600;
	white-space: nowrap;
}

.bb-product-vraag__raster {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: space-between;
	gap: 20px 32px;
}

/* Icoon links, de twee regels tekst ernaast. */

.bb-product-vraag__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	text-align: left;
}

.bb-product-vraag__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bb-product-vraag__item a {
	color: inherit;
	text-decoration: none;
}

/* Het icoon in een rond vlak, zodat de drie manieren om contact op te nemen als
   drie gelijkwaardige keuzes lezen en niet als een opsomming. De iconen zelf
   komen uit bb_service_icoon(); zie single-product.php. */

.bb-product-vraag__icoon {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--bb-wit);
	color: var(--bb-zwart);
}

/* Op het item en niet op de link: het icoon staat náást de link in de opmaak,
   niet erin, dus vanuit de link is er niet naartoe te wijzen. */

.bb-product-vraag__item:hover .bb-product-vraag__icoon {
	background-color: var(--bb-geel);
}

/* Drie naast elkaar past pas vanaf een laptop: het e-mailadres in de middelste
   is lang. Daaronder staan ze onder elkaar, als blok in het midden, zodat ze
   onder de gecentreerde kop niet scheef tegen de linkerrand hangen. */

@media (max-width: 921px) {
	.bb-product-vraag__raster {
		grid-template-columns: auto;
		justify-content: center;
		gap: 16px;
	}
}

/* --- Veelgestelde vragen ---
   De vragen van de categorie, in dezelfde uitklaplijst als op de categoriepagina
   (bb_render_faq). Hier in een wit vlak, in de maat van de tabbladen erboven. Zie
   inc/product-faq.php. */

.bb-product-faq__vlak {
	padding: 24px;
	border-radius: 12px;
	background-color: var(--bb-wit);
}

.bb-product-faq__kop {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 600;
}

.bb-product-faq .bb-faq__vraag {
	padding: 14px 0;
	font-size: 16px;
}

.bb-product-faq .bb-faq__vraag::after {
	font-size: 20px;
}

.bb-product-faq .bb-faq__antwoord {
	padding-bottom: 14px;
	font-size: 14px;
	line-height: 1.6;
}

.bb-product-faq .bb-faq__antwoord > :first-child {
	margin-top: 0;
}

.bb-product-faq .bb-faq__antwoord > :last-child {
	margin-bottom: 0;
}

.bb-product-faq .bb-faq__item:last-child {
	border-bottom: 0;
}

.bb-product-faq__meer {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.bb-product-faq__meer a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 544px) {
	.bb-product-faq__vlak {
		padding: 16px 20px;
	}

	.bb-product-faq .bb-faq__vraag {
		font-size: 15px;
	}
}

/* --- USP-balk boven de footer ---
   Geel, zodat hij als merkstrook tegen de zwarte footer eronder staat, en de
   beloftes op één regel naast elkaar. Op een telefoon een schuifrij. Zie
   inc/product-usp-balk.php. */

.bb-uspbalk {
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
}

.bb-uspbalk__lijst {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0;
	padding: 18px 0;
	list-style: none;
}

.bb-uspbalk__item {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.bb-uspbalk__vinkje {
	flex: none;
}

/* Op een telefoon een schuifrij: elke belofte een gele kaart met ronde hoeken
   op het grijs van het productblok, net zo rond als de kaarten erboven. De
   volgende kaart steekt half in beeld, zodat je ziet dat er meer is. Het
   schuiven doet de browser met scroll-snap; assets/js/uspbalk.js schuift hem
   alleen automatisch door.

   De rij loopt tot de schermrand door (de negatieve marge heft de 20px van
   .bb-product__inner op) en stopt met scroll-padding toch netjes op die 20px.
   En hij houdt zijn scrollbeweging voor zich, zoals .bb-subrij__spoor. */

@media (max-width: 544px) {
	.bb-uspbalk {
		background-color: transparent;
	}

	.bb-uspbalk__lijst {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 10px;
		margin-inline: -20px;
		padding: 8px 20px 28px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
	}

	.bb-uspbalk__lijst::-webkit-scrollbar {
		display: none;
	}

	.bb-uspbalk__item {
		flex: 0 0 78%;
		padding: 16px 18px;
		border-radius: 12px;
		background-color: var(--bb-geel);
		font-size: 14px;
		scroll-snap-align: start;
	}
}

/* --- Servicevoorwaarden --- */

/* De servicerijen staan sinds de nieuwe tabbladen in het paneel "Onze
   services" en niet meer als losse sectie onder aan de pagina. */

.bb-product-service__rij + .bb-product-service__rij {
	margin-top: 20px;
}

.bb-product-service__titel {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 600;
}

.bb-product-service__tekst {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.bb-product__kolommen {
		grid-template-columns: minmax(0, 1fr);
	}

	/* De titel onder de foto is hier geen kunstje meer. Hij stond boven de
	   galerij en werd met order naar onderen geschoven; sinds hij in de
	   bestelkaart staat (zie single-product.php) komt hij vanzelf onder de foto
	   zodra de kolommen onder elkaar vallen. De flexkolom, de order-regels en de
	   omgedraaide marge die daarvoor nodig waren, zijn daarmee vervallen. */
}

/* Onder de 900px past de rij knoppen niet meer naast het paneel. Ze onder elkaar
   zetten met het paneel eronder werkte niet: met vijf knoppen erboven stond de
   inhoud waar je op klikte een half scherm lager, buiten beeld. Het wordt hier
   dus een harmonica — het paneel opent tussen de knoppen, onder de knop die je
   net indrukte.

   Dat kan zonder JavaScript en zonder de markup van WooCommerce aan te raken.
   De lijst met knoppen lost op in de kolom (display: contents), waardoor de
   knoppen en de panelen broers en zussen worden, en daarna zet order ze om en
   om: knop 1, paneel 1, knop 2, paneel 2. WooCommerce laat er één paneel van
   zien; de rest neemt geen ruimte in. Wat je ziet is dus de ingedrukte knop met
   zijn eigen paneel eronder.

   Kanttekening bij display: contents — de <ul> zelf verdwijnt daarmee uit de
   opbouw van de pagina. Browsers houden de rol van zo'n element tegenwoordig
   overeind, maar in een oudere Safari kan de tablist-rol wegvallen. De knoppen
   blijven dan gewone links en werken gewoon. */

@media (max-width: 900px) {
	.bb-product__tabbladen .woocommerce-tabs {
		display: flex;
		flex-direction: column;

		/* Geen gap: het paneel hoort tegen zijn eigen knop aan te sluiten. De
		   ruimte zit op de knoppen zelf, zie hieronder. */
		gap: 0;

		/* En de knoppen over de volle breedte. Hierboven staat align-items op
		   start voor de indeling naast elkaar; in een kolom betekent datzelfde
		   woord "zo smal als de tekst", waardoor elke knop een pil om zijn eigen
		   opschrift werd. */
		align-items: stretch;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs {
		display: contents;
	}

	/* De volgorde, om en om. De <ul> is het eerste kind van het blok, dus
	   paneel n is kind n + 1. Zes stel is ruim meer dan er ooit tabbladen zijn;
	   wat er niet is, doet niets. */

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(1) {
		order: 1;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab:nth-child(2) {
		order: 2;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(2) {
		order: 3;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab:nth-child(3) {
		order: 4;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(3) {
		order: 5;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab:nth-child(4) {
		order: 6;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(4) {
		order: 7;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab:nth-child(5) {
		order: 8;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(5) {
		order: 9;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab:nth-child(6) {
		order: 10;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(6) {
		order: 11;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab:nth-child(7) {
		order: 12;
	}

	/* De ruimte tussen de knoppen staat op de knop en niet op het blok, zodat
	   het openstaande paneel wél tegen zijn eigen knop aan sluit. De bovenste
	   heeft hem niet nodig. */

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li {
		margin-top: 8px;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li:nth-child(1) {
		margin-top: 0;
	}

	/* Knop en paneel worden onderling één blok: de hoeken waar ze elkaar raken
	   gaan eraf. */

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li.active {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	.bb-product__tabbladen .woocommerce-tabs .wc-tab {
		padding: 22px 20px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li a {
		padding: 13px 16px;
	}

	/* Rechts in de knop een plus: hier klap je iets open. Staat het paneel
	   open, dan wordt het een min. Net als het icoontje links een masker, zodat
	   het wit meekleurt op de donkere, actieve knop. */

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li a::after {
		content: "";
		flex: none;
		width: 16px;
		height: 16px;
		margin-left: auto;
		background-color: currentColor;
		-webkit-mask: var(--bb-tab-plus) center / contain no-repeat;
		mask: var(--bb-tab-plus) center / contain no-repeat;
		--bb-tab-plus: 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.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	}

	.bb-product__tabbladen .woocommerce-tabs ul.tabs li.active a::after {
		--bb-tab-plus: 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.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	}
}

@media (max-width: 544px) {
	/* --- Op een telefoon is de foto het product ---
	   Hij loopt van rand tot rand en sluit bovenaan aan op de kopbalk, met de
	   terugknop eroverheen. Dat is één ingreep in vier stappen; ze horen bij
	   elkaar en moeten samen gelezen worden.

	   Eerder stond hier een smalle strook van 8px naar de schermrand. Die is weg:
	   een foto die bovenaan tegen de kopbalk aan ligt maar links en rechts nog
	   8px wit toont, ziet eruit als een fout. Nu de knop eroverheen ligt, is de
	   hele foto het bovenste vlak van de pagina.

	   Met binnenmarges en niet met een negatieve buitenmarge: dat laatste maakt
	   het blok breder dan het scherm en levert horizontaal schuiven op. */

	/* 1. De ruimte boven het blok weg, zodat er niets meer tussen de kopbalk en
	      de foto staat. Overschrijft de 28px uit het blok op 921px hierboven,
	      die daar de kopbalk en het kruimelpad uit elkaar hield. */

	.bb-product {
		padding-top: 0;
	}

	/* 2. Het omhulsel van de terugknop klapt dicht tot niets en de knop zelf gaat
	      eroverheen liggen. Zo schuift de foto helemaal naar boven en houdt de
	      knop toch zijn plek in de bron: boven de galerij, waar hij hoort.

	      z-index 5 en niet 2: de galerij en het label "Meest verkocht" liggen
	      daar al, en flexslider zet er tijdens het schuiven zelf ook nog wat
	      overheen. */

	.bb-product__terugbalk {
		position: relative;
		z-index: 5;
		height: 0;
		padding-inline: 0;
	}

	.bb-product__terug {
		position: absolute;
		top: 12px;
		left: 12px;
		gap: 4px;
		margin: 0;
		padding: 6px 12px 6px 9px;
		font-size: 12px;

		/* Een randje alleen is te weinig op een lichte foto; de schaduw maakt van
		   de knop een los ding dat erboven zweeft. */
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	}

	/* Alleen de pijl en de categorienaam. "Terug naar" zegt hier niets extra's:
	   een pijl naar links boven een productfoto is al een terugweg. */

	.bb-product__terug-voor {
		display: none;
	}

	.bb-product__terug-pijl {
		width: 16px;
		height: 16px;
	}

	/* Het label staat rechtsboven en de terugknop linksboven, dus ze kunnen op
	   dezelfde hoogte staan. Twaalf pixels, net als de knop, zodat ze samen één
	   regel over de foto vormen.

	   Met .bb-product ervoor, want .bb-product__label wordt verderop in dit
	   bestand gezet — ná dit blok. Even zwaar betekent dan: de laatste wint, en
	   dat is niet deze. Twee klassen tegen één en de zwaarte staat weer aan de
	   goede kant. */

	.bb-product .bb-product__label {
		top: 12px;
	}

	/* 3. De binnenmarges van de kolommen en de galerij weg, zodat de foto het
	      scherm van rand tot rand vult. De bestelkaart eronder houdt zijn plek
	      met een eigen buitenmarge van 8px — de galerij en de kaart zijn nu niet
	      meer even breed, en dat is precies de bedoeling. */

	.bb-product__kolommen {
		padding-inline: 0;
	}

	.bb-product__galerij {
		padding: 0;
		border-radius: 0;
	}

	.bb-product__kaart {
		margin-inline: 8px;
	}

	/* De afgeronde hoeken van de foto gaan hier mee weg, maar die regel staat
	   verderop in het bestand: de galerij wordt daar met vijf klassen
	   aangesproken en die moeten we evenaren én erna komen. Zoek op "rechte
	   hoeken op de foto". */

	/* 4. De titel had hier een binnenmarge van 28px — de 8px buitenmarge van de
	      bestelkaart plus haar 20px binnenmarge — om op één lijn te komen met de
	      tekst eronder. Nu de titel ín die kaart staat, doet de kaart dat zelf en
	      hoefde die regel niet mee te verhuizen. */
}

/* --- De kop van de bestelkaart ---
   Titel en beoordeling staan bovenin de rechterkolom, boven de prijs; het
   aantalveld en de volle bestelknop komen uit het oude ontwerp.

   De onderruimte hoort bij de kop en niet bij de prijsregel eronder: die regel
   staat op twee plekken in de kaart en mag er maar op één een marge bij krijgen. */

.bb-product__kop {
	margin-bottom: 16px;
}

.bb-product__titel {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}

/* De USP's die hier stonden — vier regels met een groen vinkje in de
   bestelkaart, tussen de prijs en de keuzes — zijn in september 2026 vervallen,
   eerst onder de titel en daarna ook hier. Wat je koopt staat in het tabblad
   "Specificaties en levertijd"; de beloftes staan onder de bestelknop en in de
   balk boven de footer. inc/product-usps.php is met deze opmaak meegegaan. */

/* De sterren met het aantal beoordelingen ernaast, op één regel en dicht op
   elkaar. Het aantal hoort bij de sterren te staan, niet als losse mededeling
   een stuk verderop.

   De lange aanhef is nodig. Astra levert zijn WooCommerce-opmaak als een eigen
   stylesheet die ná deze wordt ingeladen — ook al hangt deze aan astra-theme-css
   — en spreekt deze onderdelen aan met twee klassen. Even zwaar dus, en dan wint
   de laatste. Met de bestelkaart en de kop ervoor telt deze zwaarder.

   En dan is er nog dit, waardoor het aantal beoordelingen tot 24 augustus 2026
   onder de sterren bleef hangen in plaats van ernaast: in Extra CSS van de
   Customizer staat

       .woocommerce-product-rating { display: block ! IMPORTANT; }

   een overblijfsel uit de Elementor-tijd. Dat blok wordt als <style
   id="wp-custom-css"> ná deze stylesheet in de head gezet, en één klasse mét
   !important wint van vier klassen zonder. Vandaar dat display hier ook
   !important krijgt: dan telt de zwaarte weer, en die is aan onze kant.

   Die regel in de Customizer mag wat ons betreft weg — hij dient niets meer —
   maar hij staat in de database en reist dus niet mee naar live. Zolang hij er
   staat is deze !important wat het werkend houdt, op allebei de omgevingen. */

.bb-product .bb-product__kaart .bb-product__kop .woocommerce-product-rating {
	display: flex !important;
	align-items: center;
	gap: 6px;
	margin: 0;
	line-height: 1;
}

/* Astra zet met ::before en ::after twee lege tabelcellen in dit blok, de oude
   manier om zwevende elementen op te ruimen. Nu het een flexrij is, worden dat
   twee lege vakjes tussen de sterren en de telling. */

.bb-product .bb-product__kaart .bb-product__kop .woocommerce-product-rating::before,
.bb-product .bb-product__kaart .bb-product__kop .woocommerce-product-rating::after {
	display: none;
}

/* De sterren vóór de telling. Astra zet order:2 op dit blok, waardoor
   "(2 klantbeoordelingen)" links kwam te staan en de sterren erachter — je leest
   dan het aantal voordat je ziet wat het cijfer is. */

.bb-product .bb-product__kaart .bb-product__kop .review-rating {
	display: flex;
	order: 0;
	line-height: 1;
}

.bb-product .bb-product__kaart .bb-product__kop .star-rating {
	float: none;
	margin: 0;
	color: #f5a623;

	/* Dezelfde 100px-regel als op het categorie-archief: de sterretjes beslaan
	   5,4 keer de letterhoogte — zo'n 74px — en die 26px verschil stond leeg
	   tussen de sterren en de telling. Zie .bb-archief … .star-rating hierboven
	   voor waarom dit met !important moet. */
	width: 5.4em !important;

	/* De sterren waren zo'n 72px breed en trokken daarmee meer aandacht dan het
	   cijfer ernaast, terwijl dat cijfer het antwoord is. Op 11px worden ze 59px
	   en staan ze in verhouding tot de 13px tekst erachter. De breedte hierboven
	   rekent in em en krimpt dus vanzelf mee. */
	font-size: 11px;
}

/* Waar hier "(12 klantbeoordelingen)" stond, staat nu het cijfer: "4,6/5". Zie
   woocommerce/single-product/rating.php. Het is daarmee geen bijzin meer maar de
   uitkomst van de sterren ernaast, en dus donkerder en steviger gezet — al
   blijft het een link naar de beoordelingen zelf. */

.bb-product .bb-product__kaart .bb-product__kop .woocommerce-review-link {
	color: #3a3a3a;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

/* Het aantal beoordelingen erachter, lichter dan het cijfer: het cijfer is het
   antwoord, het aantal zegt hoe hard dat antwoord is. */

.bb-product .bb-product__kaart .bb-product__kop .bb-beoordeling__aantal {
	color: #767676;
	font-weight: 400;
}

/* Van een boxspring bestel je er één; het veld stond er in het oude ontwerp niet
   en is hier verborgen in plaats van verwijderd, want het formulier heeft de
   waarde nodig om te kunnen bestellen.

   Bij hoofdkussens is dat anders — twee of vier is daar heel gewoon — en
   inc/product-kolom.php zet op die pagina's bb-toon-aantal op de <body>. Deze
   regel geldt dan niet, in plaats van dat er nog een regel overheen komt. */

body:not(.bb-toon-aantal) .bb-product__kaart .quantity {
	display: none !important;
}

/* Zichtbaar hoort het veld eruit te zien als de keuzevelden erboven: hetzelfde
   grijze vlak eromheen, hetzelfde witte veld erin. */

.bb-toon-aantal .bb-product__kaart form.cart .bb-aantal-label {
	display: block;

	/* De ruimte zit op het label en niet op het veld eronder: die twee horen bij
	   elkaar, net als bij de keuzevelden erboven. */
	margin: 16px 0 6px;
	font-weight: 600;
}

.bb-toon-aantal .bb-product__kaart form.cart .quantity {
	margin: 0;
}

.bb-toon-aantal .bb-product__kaart form.cart .quantity .qty {
	width: 100px;
	height: auto;
	padding: 12px 14px;
	border-radius: 8px;
	text-align: center;
}

/* --- Het aantal naast de bestelknop ---
   Het veld stond boven het prijsoverzicht, want WooCommerce zet de aantalkeuze
   vóór de knop en inc/product-kolom.php hangt het prijsoverzicht daar tussenin.
   Naast de knop hoort het beter: het gaat over dezelfde handeling.

   Met volgorde en niet met een eigen opbouw van het formulier. Dat formulier
   draagt de varianten, de meerprijzen en de knop zelf; overnemen zou betekenen
   dat we al die onderdelen gaan onderhouden. Twee containers, omdat WooCommerce
   bij een product met varianten het aantal en de knop een laag dieper zet. */

.bb-toon-aantal .bb-product__kaart form.cart,
.bb-toon-aantal .bb-product__kaart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 12px;
}

/* Alles blijft op zijn plek en over de volle breedte; alleen het aantal en de
   knop worden eruit gelicht. */

.bb-toon-aantal .bb-product__kaart form.cart > *,
.bb-toon-aantal .bb-product__kaart .woocommerce-variation-add-to-cart > * {
	flex: 1 1 100%;
}

.bb-toon-aantal .bb-product__kaart form.cart .quantity,
.bb-toon-aantal .bb-product__kaart .woocommerce-variation-add-to-cart .quantity {
	order: 10;
	flex: 0 0 auto;
	margin-top: 16px;
}

/* De knop staat elders in de kaart op volle breedte, met !important omdat Astra
   daar overheen wil. Daarom hier ook !important: dezelfde eigenschap, en deze
   aanhef weegt zwaarder. */

.bb-toon-aantal .bb-product__kaart form.cart .single_add_to_cart_button,
.bb-toon-aantal .bb-product__kaart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	order: 11;
	flex: 1 1 auto;
	width: auto !important;
	margin-top: 16px;
}

/* Het woord "Aantal" stond boven het veld toen dat nog alleen stond. Naast de
   knop zou het over allebei lijken te gaan, dus het gaat eraf. Het veld houdt
   het label dat WooCommerce voor schermlezers meegeeft. */

.bb-toon-aantal .bb-product__kaart form.cart .bb-aantal-label {
	display: none;
}

.bb-product__kaart .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin-left: 0;
}

/* Het kruimelpad boven aan de pagina blijft; het tweede exemplaar bovenin de
   bestelkaart hoorde niet bij het ontwerp. De bron ervan is niet in de code te
   vinden, dus we halen het weg op basis van zijn positie. */

.bb-product__kaart > .woocommerce-breadcrumb {
	display: none;
}

/* --- De productgalerij ---
   Sinds WooThumbs eruit is, is dit de eigen galerij van WooCommerce: één grote
   foto met de miniaturen eronder, geschoven door flexslider en met photoswipe
   voor het vergroten.

   Die galerij gaat ervan uit dat hij naast de bestelkolom staat en neemt
   daarom 48% van de ruimte die hij krijgt. Hier heeft hij al een eigen kolom,
   dus dat wordt de volle breedte — anders staat de foto op de helft van zijn
   vak met de rest wit ernaast.

   Let op de lange aanhef van de regels hieronder. De opmaak die WooCommerce
   meelevert spreekt deze onderdelen met vier klassen aan
   (".woocommerce div.product div.images …"); met minder wint zijn eigen maat
   het. Vandaar .bb-product ervoor en .images erachteraan — dan is deze
   stylesheet zwaarder, zonder dat er !important aan te pas komt. */

/* Op die 48% na. Daarvoor gebruikt WooCommerce een selector met een id erin
   (".woocommerce-page #content div.product div.images"), en daar valt met
   klassen niet bovenop te komen. De keuze is dan: dat id hier overschrijven —
   en daarmee vastzitten aan hoe Astra zijn pagina noemt — of deze twee regels
   met !important. Het laatste is het eerlijkst: het zegt wat het doet en
   overleeft een verbouwing van het thema. */

.bb-product .bb-product__galerij .woocommerce-product-gallery.images {
	float: none !important;
	width: 100% !important;
	margin: 0;
}

/* --- Het label "Meest verkocht" op de productafbeelding ---
   Zelfde gele tint, vorm en gewicht als het label op de productkaart in het
   archief; alleen wat ruimer, want de afbeelding is hier veel groter. Het
   bb-product__beeld draagt de positionering. Dat omhulsel staat om de hele
   galerij heen, dus het label blijft staan waar het staat terwijl je door de
   foto's bladert. */

.bb-product__beeld {
	position: relative;
}

/* --- De video in de fotoslider ---
   De slide draagt de voorvertoning met een afspeelknop erop; assets/js/
   product-video.js zet er pas een speelvenster in zodra je klikt. */

/* Het vak is even vierkant als de productfoto's — die zijn 600 bij 600. Een
   video is dat niet en staat er gecentreerd in, met een zwarte rand boven en
   onder. Daardoor houdt de slider dezelfde hoogte terwijl je doorbladert, en
   verspringt er niets op het moment dat de voorvertoning voor het speelvenster
   plaatsmaakt: dat venster krijgt hieronder dezelfde maat als de knop. */

.bb-productvideo__vak {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
}

.bb-productvideo__start {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

/* De voorvertoning vult het vierkant, net als de productfoto's ernaast.

   Hij stond hier eerder op 16 bij 9 in een vierkant vak met een zwarte
   achtergrond. Bedoeld als nette letterbox, maar in de praktijk werd het beeld
   in de slider een zwart vlak met een strookje video in het midden — bij een
   boxspring met een donkere foto liep dat helemaal in elkaar over. Uitsnijden
   naar vierkant laat er minder van zien maar geeft de slider één beeldtaal, en
   het is een miniatuur: het echte kijken gebeurt in de speler.

   Die speler blijft wél 16 bij 9, want een video die je uitrekt naar vierkant
   is geen video meer. Zwarte randen boven en onder zijn daar precies goed. */

.bb-productvideo__start img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border: 0;
}

.bb-productvideo__speler {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	border: 0;
}

.bb-productvideo__knop {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: var(--bb-wit);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.bb-productvideo__start:hover .bb-productvideo__knop,
.bb-productvideo__start:focus-visible .bb-productvideo__knop {
	background: var(--bb-geel);
	color: var(--bb-zwart);
	transform: translate(-50%, -50%) scale(1.06);
}

/* Het afspeelpictogram op het miniatuur van de video, zodat in de rij te zien is
   welk beeld geen foto is. Flexslider bouwt die miniaturen zelf op uit
   data-thumb en we kunnen er geen eigen klasse aan meegeven; vandaar dat het via
   de galerij loopt, die bb-heeft-video krijgt zodra er een video bij het product
   staat. De video is het tweede beeld, dus het tweede miniatuur — verplaats je
   hem in inc/product-video.php, dan moet deze nth-child mee.

   Het waas eronder is er niet voor de sier: een voorvertoning van YouTube kan
   van alles zijn, en zonder die verdonkering valt een wit pictogram op een licht
   beeld weg. */

.bb-heeft-video .flex-control-thumbs li:nth-child(2) {
	position: relative;
}

.bb-heeft-video .flex-control-thumbs li:nth-child(2)::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}

.bb-heeft-video .flex-control-thumbs li:nth-child(2)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11.5' fill='%23fff'/%3E%3Cpath d='M9.6 7.4v9.2L17 12z' fill='%23111'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bb-productvideo__knop {
		transition: none;
	}

	.bb-productvideo__start:hover .bb-productvideo__knop,
	.bb-productvideo__start:focus-visible .bb-productvideo__knop {
		transform: translate(-50%, -50%);
	}
}

/* Rechtsboven op de foto, met de ronding aan de kant waar hij het beeld in
   steekt. Hij stond links, maar daar ligt op een telefoon sinds september 2026
   de terugknop; twee gele en witte dingen boven elkaar in dezelfde hoek maakt
   van allebei rommel. Rechts is bovendien de kant waar niets anders staat — de
   pijl van de slider zit halverwege de hoogte. */

.bb-product__label {
	position: absolute;
	top: 30px;
	right: 0;
	z-index: 2;
	padding: 9px 16px;
	border-radius: 14px 0 0 14px;
	background: #fcde28;
	color: var(--bb-zwart);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

/* Licht afgerond, net als de kaarten op het categorie-archief. Op de
   afbeeldingen zelf en niet op het omhulsel eromheen: daarin zit ook de
   vergrootknop, en die zou bij een afgeknipte hoek deels wegvallen. */

.bb-product .bb-product__galerij .woocommerce-product-gallery__image img {
	border-radius: 10px;
}

/* De miniaturen als schuifstrook: één rij, hoeveel foto's er ook zijn, en wat
   niet past schuif je in beeld. Ze stonden eerder in een raster dat zich naar de
   breedte voegde; met zeven foto's leverde dat een tweede rij op met vier gaten
   erin, en op een telefoon een derde. Als strook blijft het één rij die meebeweegt
   met de foto erboven, zoals je van een galerij verwacht.

   De maat van een miniatuur staat als variabele, zodat de breedte van het vakje
   en die van het beeld erin niet uit elkaar kunnen lopen. */

.bb-product .bb-product__galerij .woocommerce-product-gallery.images {
	--bb-thumb: 76px;
}

/* --- De pijltjes bij de miniaturen ---
   assets/js/product-thumbs.js hangt de strook in een .bb-thumbs met links en
   rechts een klein pijltje. Ze staan half over de strook heen en niet ernaast:
   zo houdt de rij miniaturen de volle breedte van de galerij, en die is precies
   even breed als de foto erboven.

   Zonder dat script blijft het een gewone schuifstrook — de pijltjes zijn een
   extra manier om te bedienen, niet de enige. */

.bb-thumbs {
	position: relative;
}

.bb-thumbs__pijl {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid #e2e2e2;
	border-radius: 50%;
	background-color: var(--bb-wit);
	box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
	color: var(--bb-zwart);
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* Ruimte aan weerskanten zodra de pijltjes er zijn, zodat de eerste en laatste
   miniatuur niet onder een pijltje verdwijnen. Als binnenmarge op de strook zelf
   en niet als marge eromheen: dan telt hij mee aan het begin en het eind van het
   schuiven, en blijft de eerste foto vrij staan als je helemaal links staat. */

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .bb-thumbs--schuifbaar .flex-control-thumbs {
	padding-inline: 34px;
}

.bb-thumbs__pijl--links {
	left: -2px;
}

.bb-thumbs__pijl--rechts {
	right: -2px;
}

.bb-thumbs__pijl:hover {
	background-color: var(--bb-geel);
}

.bb-thumbs__pijl[hidden] {
	display: none;
}

/* Aan het eind van de rij blijft het pijltje staan waar het stond, maar het
   doet niets meer. Weghalen zou de andere kant laten verspringen. */

.bb-thumbs__pijl:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.bb-thumbs__pijl {
		transition: none;
	}
}

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;

	/* Aanschuiven op een miniatuur in plaats van halverwege stil blijven staan.
	   Proximity en niet mandatory: bij een veeg over de hele strook hoort de
	   browser niet elke foto langs te willen. */
	scroll-snap-type: x proximity;

	/* Een dunne balk, zodat zichtbaar is dat er meer is. Firefox kent deze
	   eigenschap, de rest van de browsers de regel eronder. */
	scrollbar-width: thin;
	scrollbar-color: #c9c9c9 transparent;
}

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs::-webkit-scrollbar {
	height: 4px;
}

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: #c9c9c9;
}

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs li {
	float: none;
	flex: 0 0 var(--bb-thumb);
	width: var(--bb-thumb);
	margin: 0;
	list-style: none;
	scroll-snap-align: start;
}

/* De foto waar je naar kijkt staat vol, de rest wat terug. */

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs img {
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 8px;
	opacity: 0.5;
	transition: opacity 0.15s ease;
	cursor: pointer;
}

.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs img.flex-active,
.bb-product .bb-product__galerij .woocommerce-product-gallery.images .flex-control-thumbs img:hover {
	opacity: 1;
}

/* --- Op een telefoon: rechte hoeken op de foto ---
   Dit blok staat hier en niet bij de rest van de telefoonregels verderop in het
   bestand, omdat het de regels hierboven ongedaan maakt. Ze spreken de galerij
   met vijf klassen aan; even zwaar betekent dan dat de laatste wint, en dat moet
   deze zijn. Verplaats je dit blok naar boven, dan doet het niets meer.

   Hier stonden tussen 8 en 21 september 2026 ook de rondjes die de miniaturen op
   een telefoon vervingen: dezelfde miniaturen, maar uitgeknepen tot nul bij nul
   en als witte bolletjes over de onderkant van de foto gelegd. Dat scheelde
   ruimte, maar een bolletje laat niet zien wát de volgende foto is. De strook
   staat weer onder de foto en is daarmee op elk scherm hetzelfde; de regels
   ervoor staan hierboven en gelden nu dus ook op een telefoon. */

@media (max-width: 544px) {
	/* De foto loopt van rand tot rand en sluit bovenaan aan op de kopbalk. Een
	   afgeronde hoek laat daar een witte wig staan, en aan de zijkanten een
	   streepje achtergrond. Recht dus. */

	.bb-product .bb-product__galerij .woocommerce-product-gallery.images .woocommerce-product-gallery__image img {
		border-radius: 0;
	}

	/* --- De producttitel op één regel ---
	   Op 26px past hij bij 40 van de 60 producten; de rest brak af over twee
	   regels, en bij een naam als "42 lats elektrische verstelbare lattenbodem"
	   over drie. Op 18px past hij bij 57 van de 60 op een scherm van 390px en bij
	   54 op een scherm van 375px. De drie langste namen breken nog steeds af —
	   kleiner maken om die ook mee te krijgen zou de titel kleiner maken dan de
	   prijs eronder, en dan klopt de rangorde op de pagina niet meer. */

	.bb-product__titel {
		font-size: 18px;

		/* Vetter dan de 600 van een breed scherm. Op 18px heeft de titel dat
		   gewicht nodig om nog als kop te lezen naast de prijs eronder; op 26px
		   deed de maat dat werk al. */
		font-weight: 700;
	}
}

/* --- De pijlen op de hoofdafbeelding ---
   Flexslider tekent ze zodra directionNav aanstaat, zie inc/product-galerij.php.
   Ze staan over het beeld heen en niet ernaast: naast de foto zou de kolom
   smaller worden, en dat is precies de ruimte waar het product moet staan.

   De hoogte van het beeld is nergens vastgelegd — het is de foto zelf die de
   maat bepaalt — maar de foto's zijn vierkant en vullen de kolom, dus is het
   beeld even hoog als de galerij breed. Vandaar top:0 met een marge van de helft
   van die breedte: een percentage in een marge rekent met de breedte van het
   omhullende blok, ook als het over de hoogte gaat. De 22px eraf is de helft van
   de knop zelf. */

.bb-product .bb-product__galerij .woocommerce-product-gallery.images {
	position: relative;
}

.bb-product .bb-product__galerij .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-product .bb-product__galerij .flex-direction-nav li {
	margin: 0;
	list-style: none;
}

.bb-product .bb-product__galerij .flex-direction-nav a {
	position: absolute;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 34 en niet 44 pixels. Op een telefoon loopt de foto van rand tot rand en
	   lagen er twee witte schijven van 44px overheen die meer opvielen dan het
	   bed eronder. De helft van de maat blijft in de bovenmarge staan, want die
	   houdt de knop op de halve hoogte van het vierkante beeld. */
	width: 34px;
	height: 34px;
	margin-top: calc(50% - 17px);
	border-radius: 50%;
	background-color: rgb(255 255 255 / 88%);
	box-shadow: 0 1px 6px rgb(0 0 0 / 18%);
	color: var(--bb-zwart);
	text-decoration: none;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.bb-product .bb-product__galerij .flex-direction-nav a:hover {
	background-color: var(--bb-wit);
	color: var(--bb-zwart);
}

.bb-product .bb-product__galerij .flex-direction-nav .flex-prev {
	left: 12px;
}

.bb-product .bb-product__galerij .flex-direction-nav .flex-next {
	right: 12px;
}

/* Het pijltje zelf: twee lijnen die we hier tekenen, zodat er geen iconenfont of
   plaatje bij hoeft. De tekst van flexslider staat in inc/product-galerij.php al
   leeg. */

.bb-product .bb-product__galerij .flex-direction-nav a::before {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

/* De marge duwt het haakje terug naar het midden: het draait om zijn eigen hart
   en dan staat de punt uit het midden. Drie pixels bij een haakje van acht,
   dezelfde verhouding als de vier bij elf hiervoor. */

.bb-product .bb-product__galerij .flex-direction-nav .flex-prev::before {
	margin-left: 3px;
	transform: rotate(-135deg);
}

.bb-product .bb-product__galerij .flex-direction-nav .flex-next::before {
	margin-right: 3px;
	transform: rotate(45deg);
}

/* Bij de eerste en de laatste foto zet flexslider de pijl die nergens heen
   gaat op flex-disabled. Hij blijft staan — anders springen de twee knoppen
   heen en weer — maar hij doet niet meer mee. */

.bb-product .bb-product__galerij .flex-direction-nav a.flex-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* --- De actiebanner boven de opties ---
   Het gele vlak met het dekbedpakket, zie inc/product-banner.php. Op live is dit
   een tekstwidget met een achtergrondafbeelding en drie regels in één alinea;
   hier heeft elke regel zijn eigen rol. De kop noemt de actie, het aanbod staat
   groot, de voorwaarde klein eronder — zodat je in één oogopslag ziet wat je
   krijgt en pas daarna waarvoor.

   Geel op wit is de accentkleur van de hele site; met de ronding van de kaarten
   eromheen (12px) blijft het een blok in dezelfde familie in plaats van een
   ingeplakte banner. */

.bb-actiebanner {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	padding: 14px 18px;
	border-radius: 12px;
	background-color: var(--bb-geel);
	color: var(--bb-zwart);
}

/* Het beeld staat los op het geel — de foto heeft een doorzichtige achtergrond.
   Vandaar geen ronding en geen kader: het dekbedpakket ligt op de banner, het zit
   er niet in geplakt. */

.bb-actiebanner__beeld {
	flex: none;
	width: 88px;
	height: auto;
}

/* De schaduw eraf. Astra legt met .ast-article-single img een schaduw over elk
   beeld binnen een artikel, en op de doorzichtige achtergrond van deze foto
   werd dat een grijze waas rondom, midden op het geel.

   De klasse staat hier achter .bb-actiebanner en dus zwaarder dan nodig lijkt:
   Astra's selector telt een klasse plus een element en won het van de losse
   klasse hierboven, waar deze regel eerst stond. */

.bb-actiebanner .bb-actiebanner__beeld {
	box-shadow: none;
}

.bb-actiebanner__tekst {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

/* Klein, vet en in kapitalen: het leest als een label bij het aanbod eronder en
   niet als een tweede kop die om de aandacht vecht. */

.bb-actiebanner__kop {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.bb-actiebanner__aanbod {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

/* De voorwaarde in grijszwart in plaats van een lichtere kleur: op geel verliest
   grijs te snel zijn leesbaarheid. */

.bb-actiebanner__voorwaarde {
	color: rgb(0 0 0 / 65%);
	font-size: 12px;
	line-height: 1.4;
}

/* Op een telefoon staat de bestelkaart over de volle breedte en is er ruimte
   zat; het beeld mag alleen wat kleiner, zodat het aanbod niet over drie regels
   uitwaaiert. */

@media (max-width: 544px) {
	.bb-actiebanner {
		gap: 12px;
		padding: 12px 14px;
	}

	.bb-actiebanner__beeld {
		width: 72px;
	}

	.bb-actiebanner__aanbod {
		font-size: 16px;
	}
}

/* --- De variantkeuzes ---
   Astra geeft de variantentabel een onderrand. Die hoort er niet: de keuzes
   zien er in dit ontwerp uit als losse velden, en daar past geen tabelrand
   tussen. De "Wissen"-link ernaast wordt in inc/product-kolom.php al bij de
   bron weggelaten.

   De selectors beginnen met body omdat Astra hier
   ".woocommerce-js div.product form.cart …" gebruikt — vier klassen zwaar. Met
   body ervoor telt er één element extra mee en winnen deze regels, zonder dat
   er !important aan te pas komt. */

body.woocommerce-js div.product form.cart .variations,
body.woocommerce div.product form.cart .variations,
body.woocommerce-js div.product form.cart table,
body.woocommerce div.product form.cart table {
	border: 0;
}

/* De keuzes staan in een eigen vlak, zodat ze zich als geheel aftekenen tussen
   de prijs erboven en de prijs eronder. Twee blokken, omdat de keuzes uit twee
   bronnen komen die op verschillende plekken in het formulier staan: de
   varianten van WooCommerce en de add-ons. Bij elkaar in één vlak zou betekenen
   dat we het add-ons-blok verplaatsen, en dat bouwt de plugin telkens opnieuw
   op — zie assets/js/product-opties.js. In de praktijk is er meestal één blok
   in beeld, want de opties verschijnen één voor één.

   Wit en niet lichtgrijs. Het grijs zette de keuzes apart in de kaart, maar de
   kaart is zelf al het vlak dat het bestellen bij elkaar houdt; twee vlakken in
   elkaar maken het onrustig. De binnenmarge en de ronding blijven staan, zodat
   de keuzevelden nog steeds als groep bij elkaar horen — nu alleen door hun
   plek en niet door een kleur.

   Geen binnenmarge links en rechts. Die 20px zette de keuzevelden naar binnen
   ten opzichte van de prijs, de bestelknop en de rest van de kaart, en maakte
   ze 40px smaller dan alles eromheen. Nu lopen ze over de volle breedte en
   beginnen ze op dezelfde lijn als de prijs. */

body.woocommerce-js div.product form.cart .variations,
body.woocommerce div.product form.cart .variations,
.bb-product__kaart .wc-pao-addons-container {
	padding: 18px 0;
	border-radius: 20px;
	background-color: var(--bb-wit);
}

/* Geen binnenmarge boven de eerste optie. Op een grijs vlak hield die het label
   van de rand vandaan; nu het vlak wit is op een witte kaart, was het alleen nog
   een lege strook van 18px bovenop de 20px van de kaart zelf. Op een telefoon,
   waar de keuzes bovenaan de kaart staan, begon "Afmeting" daardoor pas een flink
   stuk onder de rand.

   Het add-ons-blok alleen wanneer het zelf de eerste keuze is: bij een product
   zonder varianten. Staat er een variantentabel boven, dan houdt het zijn ruimte
   als afstand tot die tabel. */

body.woocommerce-js div.product form.cart .variations,
body.woocommerce div.product form.cart .variations,
.bb-product__kaart form.cart:not(.variations_form) .wc-pao-addons-container {
	padding-top: 0;
}

/* De keuzevelden zelf: licht afgerond en wat ruimer, zodat de tekst er niet
   tegen de rand aan staat. Rechts blijft er plek voor het pijltje dat de
   browser in het veld tekent. Alle keuzevelden in het formulier ineens, want de
   varianten en de add-ons komen uit verschillende bronnen en werden allebei
   anders opgemaakt: 8px rondom tegenover 8px met 12,8px links.

   body ervoor omdat Astra deze velden met vier klassen aanspreekt. */

body .bb-product__kaart form.cart select {
	/* height: auto, want er staat elders een vaste 40px op elk keuzeveld; met
	   die hoogte zou de ruimere binnenmarge de tekst juist klem zetten. */
	height: auto;
	padding: 12px 40px 12px 14px;
	border-radius: 8px;
}

/* Het label hoort bij het veld eronder, dus die twee mogen dichter op elkaar.
   Bij de varianten zit de ruimte in de kop van de tabelrij, bij de add-ons in
   de naam van de optie. */

body.woocommerce-js .bb-product__kaart form.cart table.variations th {
	margin-bottom: 2px;

	/* Kleiner dan de tekst eromheen: het is een aanduiding bij een keuzeveld en
	   geen kop. Op de oude maat woog "Afmeting" even zwaar als de productnaam
	   verderop, terwijl het veld eronder het werk doet. */
	font-size: 14px;
}

/* Dezelfde maat voor de naam van een add-on, zodat de labels boven de twee
   soorten keuzevelden niet uit elkaar lopen. */

.bb-product__kaart .wc-pao-addon-name {
	font-size: 14px;
}

/* 6px en niet 2, zoals bij de varianten: de naam van een add-on heeft van
   zichzelf minder onderruimte, en zo staan alle labels even ver van hun veld. */

.bb-product__kaart .wc-pao-addon-name {
	margin-bottom: 6px;
}

/* Het add-ons-blok bestaat altijd, ook als er nog niets te kiezen valt. Zonder
   dit stond er een leeg grijs randje onder de varianten. De klasse komt uit
   assets/js/product-opties.js. */

.bb-product__kaart .wc-pao-addons-container.bb-optieblok--leeg {
	padding: 0;
	background-color: transparent;
}

/* Zodra er in allebei iets staat, worden ze één vlak: de tabel loopt onderaan
   door en het add-ons-blok sluit erop aan. Samenvoegen tot één element kan
   niet — ze staan in verschillende delen van het formulier en de plugin bouwt
   het add-ons-blok telkens opnieuw op — maar zo is het verschil niet te zien.

   De klasse staat op het formulier en niet op het blok zelf, want de tabel
   staat ervóór en een stylesheet kan niet terugkijken. */

body.woocommerce-js div.product form.cart.bb-opties--doorlopend .variations,
body.woocommerce div.product form.cart.bb-opties--doorlopend .variations {
	margin-bottom: 0;
	padding-bottom: 8px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.bb-product__kaart form.cart.bb-opties--doorlopend .wc-pao-addons-container {
	padding-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Tussen de twee staat het lege blok waar WooCommerce de variantprijs en de
   omschrijving in zou zetten. Die staan hier bewust uit (zie inc/product-kolom.php),
   dus het is niet meer dan een marge van 1,2em die het vlak in tweeën zou snijden.

   Met body ervoor, want Astra's eigen regel weegt precies even zwaar en won het
   op volgorde. Datzelfde speelt hierboven bij de variantentabel. */

body .bb-product__kaart form.cart.bb-opties--doorlopend .single_variation_wrap > .woocommerce-variation {
	margin-bottom: 0;
}

/* De plugin zet 2px ruimte naast elke add-on. Los viel dat niet op, maar binnen
   één vlak staan die velden daardoor net iets naar binnen ten opzichte van de
   varianten erboven. */

.bb-product__kaart .wc-pao-addon-container,
.bb-product__kaart .wc-pao-addon-container .form-row {
	padding-inline: 0;
}

/* --- Onder de bestelknop: betaalmethoden en zekerheden ---
   De logo's komen uit dezelfde bron als de winkelmand. Ze staan hier los op de
   bestelkaart: de merken hebben zelf al een vorm en een kleur, en een kadertje
   eromheen legde daar een tweede rand overheen. */

/* Dicht op de bestelknop. De logo's zeggen hoe je kunt betalen en dat is een
   antwoord op de knop erboven; met de ruimte die er eerst tussen zat leken het
   twee losse blokken. */

.bb-product__afsluiting {
	margin-top: 6px;
}

/* Eén regel, hoe breed de bestelkaart ook is: de vakjes verdelen de ruimte
   gelijk (flex: 1 1 0) en het logo schaalt daarbinnen mee. Met vaste breedtes
   viel de rij op een smallere kaart om naar twee regels.

   box-shadow uit: Astra legt met .ast-article-single img een schaduw over elk
   beeld binnen een artikel, en die hoort niet op deze logo's. */

.bb-product__betaalwijzen .bb-betaalwijzen {
	flex-wrap: nowrap;
	gap: 6px;
}

/* Het logo vult zijn vakje.

   Het stond te verdrinken in de ruimte eromheen, en dat kwam uit twee hoeken
   tegelijk. De binnenmarge haalde acht van de vierentwintig pixels hoogte weg,
   en wat er overbleef werd door object-fit: contain ook in de breedte
   meegeknepen — een logo is anderhalf keer zo breed als hoog, dus van een vak
   van negenveertig pixels breed vulde het er nog geen zesentwintig. Een derde
   van de rij was lucht.

   Dus: de binnenmarge eruit en de hoogte naar dertig pixels. De vakken houden
   dezelfde maat — ze verdelen de kaart nog steeds gelijk — maar het logo vult
   ze nu bijna helemaal, en de ruimte tussen twee logo's is de tussenruimte van
   de rij en niet meer de lege rand van een vak.

   Hoger dan de vierentwintig van de winkelmand, en dat is hier met opzet: op de
   bestelkaart staat de rij op zijn eigen breedte in een kolom, in de winkelmand
   in een smallere balk naast de totalen. */

.bb-product__betaalwijzen .bb-betaalwijze {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: 30px;
	padding: 0;
	box-shadow: none;
	object-fit: contain;
}

/* Onder elkaar, één per regel. Naast elkaar moest elke belofte het met een
   kolom van een kwart bestelkaart doen: "90 dagen slaapgarantie" viel dan over
   drie regels uiteen en de vier stonden ongelijk hoog. Onder elkaar heeft elke
   regel de volle breedte en lees je ze als een lijstje af. */

.bb-product__zekerheden {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin-top: 20px;
	padding: 18px 20px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
}

/* Het icoon naast de tekst en niet erboven: in een rij van vier stond het
   erboven omdat er naast geen ruimte was, maar over de volle breedte is naast
   elkaar rustiger en scheelt het de helft aan hoogte. */

.bb-product__zekerheid {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	line-height: 1.35;
}

/* Voor elke regel hetzelfde vinkje, in het groen van de bestelknop. Er stonden
   eerder vier verschillende tekeningen — een vrachtwagen, twee poppetjes, een
   geldzak, een maantje — en die lazen als vier losse mededelingen. Met één
   teken ervoor is het één lijstje van wat je krijgt, en dat is precies wat het
   is. */

.bb-product__zekerheid-icoon {
	flex: none;
	color: rgb(0, 149, 0);
}

/* --- Het prijsoverzicht bij de bestelknop ---
   De regels Totaalprijs / korting / totaal en de in3-regel eronder. De opmaak
   komt uit de Elementor-widget van producttemplate #270441 en is hier
   overgenomen: die widget verdween met de migratie, de opmaak niet.

   De opsomming zelf wordt aangeleverd door de WPCode-snippet "Berekening
   productpagina" (#268948); assets/js/product-prijs.js rekent de bedragen bij.

   Het euroteken vóór het termijnbedrag wordt verborgen met .in3-euro hieronder.
   Die regel stond tot 18 augustus 2026 als los codefragment in de database
   (WPCode #284521) en is hier ongewijzigd overgenomen. */

/* Alleen op een enkelvoudige pagina — zo stond het in het fragment. De
   opsomming zelf zet het euroteken er wel in; assets/js/product-prijs.js haalt
   het bij het laden uit de andere bedragen. */

.wp-singular .in3-euro {
	display: none;
}

/* De onderruimte was dertig pixels, en met de ondermarge van de in3-regel erbij
   stond er drieënveertig pixels tussen dat regeltje en de bestelknop. */

.bb-product__kaart #custom-prijs-overzicht-wrapper {
	margin-top: 40px;
	padding-bottom: 12px;
	color: #1e1e1e;
	font-size: 15px;
}

/* --- De prijsregel ---
   De oude prijs doorgestreept, het bedrag groot ernaast, en daarachter wat je
   bespaart. Dezelfde opbouw als op de productkaart in het archief, en dezelfde
   regel staat twee keer: boven de keuzelijst en eronder bij de knop. Zie
   inc/product-kolom.php.

   Hier stond tot september 2026 een opsomming van drie regels met de
   omschrijving links en het bedrag rechts. Dat is de weg naar het bedrag toe,
   terwijl de bezoeker het bedrag zelf wil zien. */

.bb-product__kaart .bb-prijsregel {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
}

/* Boven de keuzelijst hoort er lucht onder, want het vlak met de keuzes begint
   er direct achter. */

.bb-product__kaart .bb-prijsregel--boven {
	margin-bottom: 18px;
}

/* De oude prijs: doorgestreept en grijs, zodat hij als afgedane prijs leest en
   niet als een tweede bedrag om te vergelijken. */

.bb-product__kaart .bb-prijsregel__oud {
	color: #767676;
	font-size: 15px;
	text-decoration: line-through;
}

/* Het eindbedrag groot en vet: dit is het bedrag waar het om gaat. */

.bb-product__kaart .bb-prijsregel__nu {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

/* En wat je bespaart erachter, in het groen van de bestelknop — dezelfde kleur,
   zodat het niet als een derde tint in de kaart terechtkomt. Kleiner dan het
   eindbedrag: het is de bevestiging bij de prijs, niet de prijs zelf. */

.bb-product__kaart .bb-prijsregel__besparing {
	color: rgb(0, 149, 0);
	font-size: 14px;
	font-weight: 600;
}

/* Is er niets te besparen, dan vallen de doorgestreepte prijs en het zinnetje
   erachter weg — anders staat er "999,- 999,- U bespaart 0,-".
   assets/js/product-prijs.js zet de klasse zodra het gerekend heeft. */

.bb-product__kaart .bb-prijsregel--zonder-korting .bb-prijsregel__oud,
.bb-product__kaart .bb-prijsregel--zonder-korting .bb-prijsregel__besparing {
	display: none;
}

/* Zodra de kolommen onder elkaar staan, vervalt de regel bóven de keuzelijst.
   Daar staat hij vlak onder de producttitel, en dan staat dezelfde prijs drie
   keer op hetzelfde scherm: onder de titel, onder de keuzes en in de balk
   onderin die sinds september 2026 meteen in beeld komt. Die balk is de plek
   waar hij het meeste doet — hij blijft staan terwijl je scrolt.

   Op een breed scherm blijft hij wél: daar staat de balk nog niet in beeld bij
   het laden, en is dit het eerste bedrag dat je in de bestelkaart ziet.

   In een eigen blok en niet bij de andere regels voor smalle schermen hierboven
   in het bestand: dit moet ná de regels hierboven komen om ze te kunnen
   overrulen. */

@media (max-width: 1024px) {
	.bb-product__kaart .bb-prijsregel--boven {
		display: none;
	}
}

/* De in3-regel is lopende tekst met het logo erachter, geen twee kolommen.
   Hij staat standaard uit; product-prijs.js zet hem aan zodra het bedrag
   binnen het bereik van in3 valt — zo stond het ook in de widget.

   Sinds september 2026 onder de bestelknop in plaats van erboven, zie
   bb_product_in3_regel(). */

.bb-product__kaart p.in3-betaling {
	display: none;
	margin: 10px 0 0;
	font-size: 13px;
}

.bb-product__kaart p.in3-betaling img {
	height: 17px;
	margin-left: 6px;
}

.bb-product__kaart .in3-betaling strong {
	margin: 0;
}

/* Bij hoofdkussens staan het aantal en de knop met order 10 en 11 op één rij,
   zie "Het aantal naast de bestelknop". Zonder eigen volgorde schoof de regel
   daar juist vóór; zo blijft hij eronder. */

.bb-toon-aantal .bb-product__kaart form.cart .in3-betaling,
.bb-toon-aantal .bb-product__kaart .woocommerce-variation-add-to-cart .in3-betaling {
	order: 12;
}

/* --- De specificatietabel ---
   Twee kolommen: links de eigenschap, rechts de waarde. De linkerkolom heeft van
   WooCommerce vijftien pixels binnenmarge, de rechter nul — daardoor plakte de
   waarde tegen de scheiding aan. Nu allebei even ver van de rand.

   De aanhef noemt de tabel en het celtype allebei, want die nul komt van
   WooCommerce zelf met `table.shop_attributes td`; met alleen de klasse van de
   cel weegt deze regel te licht. */

.bb-product__tabbladen table.shop_attributes td.woocommerce-product-attributes-item__value {
	padding-left: 15px;
}

/* --- Stapsgewijze keuzevelden ---
   Alleen de eerstvolgende onbeantwoorde optie is zichtbaar; zodra er iets
   gekozen is verschijnt de voortgangsbalk. Zie assets/js/product-opties.js. */

.bb-product__kaart .bb-optie--verborgen {
	display: none !important;
}

/* De bestelknop zit op slot tot alle opties gekozen zijn: een half samengesteld
   bed kan niet gemaakt worden. Grijs in plaats van groen, zodat het geen kapotte
   knop lijkt maar een knop die nog niet aan de beurt is; wat er nog te kiezen is
   staat in de voortgangsbalk erboven.

   Het disabled-attribuut doet het echte werk (zie assets/js/product-opties.js),
   maar daar kleurt Astra niets op om — vandaar deze klasse ernaast. De :hover
   hoort erbij: die blijft op een uitgeschakelde knop gewoon meedoen en zou hem
   onder de muis alsnog groen maken.

   Met !important, wat hier elders juist vermeden wordt: het groen komt niet uit
   deze stylesheet maar uit de knopinstelling van Astra, en die wordt als losse
   regels in de <head> gezet — dus ná dit bestand en met een selector waarvan
   het gewicht per instelling verschilt. Winnen op zwaarte is dan een gevecht
   dat je bij elke update opnieuw kunt verliezen. */

.bb-product__kaart .single_add_to_cart_button.bb-bestelknop--wacht,
.bb-product__kaart .single_add_to_cart_button.bb-bestelknop--wacht:hover,
.bb-product__kaart .single_add_to_cart_button.bb-bestelknop--wacht:focus {
	background-color: var(--bb-grijs) !important;
	color: var(--bb-wit) !important;

	/* WooCommerce zet zijn eigen uitgeschakelde knoppen op halve dekking. Daar
	   bovenop zou dit grijs vervagen tot het bijna niet meer te lezen is. */
	opacity: 1;
	cursor: not-allowed;
}

.bb-opties-voortgang {
	margin: 18px 0 4px;
}

.bb-opties-voortgang[hidden] {
	display: none;
}

.bb-opties-voortgang__spoor {
	overflow: hidden;
	height: 6px;
	border-radius: 3px;
	background-color: #e0e0e0;
}

.bb-opties-voortgang__vulling {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 3px;
	background-color: #3f9c35;
	transition: width 0.3s ease-in-out;
}

.bb-opties-voortgang__tekst {
	margin: 8px 0 0;
	color: #5c5c5c;
	font-size: 13px;
}

/* ==========================================================================
   WINKELMAND
   Vervangt de Elementor-opzet van pagina #12.

   Links de winkelmand op wit, rechts de totalen op lichtgrijs. De indeling in
   kolommen gebeurt op de uitvoer van de [woocommerce_cart]-shortcode, zodat
   alle logica van WooCommerce ongemoeid blijft.
   ========================================================================== */

.bb-winkelmand {
	width: 100%;
	min-width: 0;

	/* Links wit, rechts grijs, allebei tot de rand van het scherm — terwijl de
	   inhoud op menubreedte blijft. De grens ligt op de 60/40-scheiding van de
	   gecentreerde 1140px: (100% - 1140)/2 + 684 = 50% + 114px. */
	background: linear-gradient(
		to right,
		var(--bb-wit) 0,
		var(--bb-wit) calc(50% + 114px),
		var(--bb-grijs-licht) calc(50% + 114px),
		var(--bb-grijs-licht) 100%
	);
}

.bb-winkelmand__raster > .woocommerce {
	display: grid;

	/* Zelfde breedte als de menubalk (1140px), en 60/40 verdeeld. */
	max-width: var(--bb-breedte);
	margin-inline: auto;
	grid-template-columns: 60% 40%;
	align-items: start;
	min-height: 60vh;
}

/* De linkerkolom is wit, de rechter grijs — over de volle hoogte. */

.bb-winkelmand__raster .woocommerce-cart-form,
.bb-winkelmand__raster .bb-winkelmand__kopbalk {
	grid-column: 1;
	padding-inline: 0 32px;
}

/* WooCommerce zet boven de winkelmand een vak voor meldingen. Dat is hier een
   eigen rij in het raster, en dus een strook lucht boven de titel ook als er
   niets te melden valt. Zodra er wél een melding staat, is het vak niet leeg
   meer en verschijnt het vanzelf. */

.bb-winkelmand__raster .woocommerce-notices-wrapper:empty {
	display: none;
}

/* De titel met de afrekenknop ernaast. De knop staat er alleen op een smal
   scherm — zie "De afrekenknop bovenaan" verderop — dus meestal staat hier één
   ding in en doet de rij niets. Uit elkaar met space-between: de titel links, de
   knop tegen de rechterrand van de kolom, zoals de bedragen in de mand eronder.

   align-items op center en niet op baseline: de knop is een vlak met een
   binnenmarge, en die op de onderkant van de letters uitlijnen laat hem te laag
   hangen. */

.bb-winkelmand__raster .bb-winkelmand__kopbalk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
}

/* Even groot als de titel op een categoriepagina. Tweeëndertig pixels was een
   koptekst die zwaarder woog dan de mand eronder. */

.bb-winkelmand__raster .bb-winkelmand__kop {
	margin: 0;
	font-size: 25px;
	font-weight: 600;
}

/* Onderaan minder lucht dan de veertig pixels die hier stonden: onder de
   waardebon volgt op een telefoon meteen het totalenblok, en samen met de ruimte
   die de waardebonregel zelf al meebrengt werd dat een gat. Nu evenveel onder de
   knop als erboven. */

.bb-winkelmand__raster .woocommerce-cart-form {
	padding-block: 8px 24px;
}

/* De bovenmarge hier is gelijk aan die van de titel, zodat de totalenkaart
   rechts op dezelfde hoogte begint. Verander je de een, verander dan de ander. */

.bb-winkelmand__zij {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: stretch;
	padding: 8px 0 40px 32px;
}

/* Op de winkelmand geen zoekbalk. Wie hier is, is klaar met zoeken; de kopbalk
   houdt op die pagina dus alleen het logo, het menu en de winkelwagen over. Het
   vergrootglas op een smal scherm hoort er dan ook niet te staan. */

.woocommerce-cart .bb-header__search,
.woocommerce-cart .bb-header__zoekknop {
	display: none;
}

/* --- Meldingen van WooCommerce ---
   De cadeauplugin meldt "Je cadeau is toegevoegd" via wc_add_notice(), en dat
   komt eruit als een gewone WooCommerce-melding. Die zag er tot 18 augustus 2026
   uit zoals WooCommerce hem levert: een grijs vak met een dikke paarse streep
   erboven, scherpe hoeken en het pictogram los in de linkermarge.

   Hieronder wordt dat een strook in de taal van de site: geen streep, ronde
   hoeken, minder lucht, en het pictogram met de tekst samen in het midden.

   Dit raakt álle meldingen van WooCommerce, niet alleen die van het cadeau —
   waardebon toegepast, veld vergeten. Dat is met opzet: het zijn dezelfde
   klassen, en één stel meldingen ziet er beter uit dan twee.

   De standaardregels staan in de stylesheet van Astra en die wordt vóór de onze
   ingeladen, dus overschrijven kan zonder !important. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.fgf-notice {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 13px 20px;
	border: 0;
	border-radius: 10px;
	background-color: var(--bb-grijs-licht);
	color: var(--bb-zwart);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}

/* WooCommerce zet het pictogram absoluut in de linkermarge en houdt daar met
   padding ruimte voor vrij. Statisch gemaakt telt het gewoon mee in de rij, en
   dan staat het samen met de tekst in het midden. */

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static;
	top: auto;
	left: auto;
	flex: 0 0 auto;
	margin: 0;
	line-height: 1;
}

/* Het is een lijst met één regel erin; de opsommingstekens en de marges die daar
   standaard bij horen zijn hier niet aan de orde. */

.woocommerce-message li,
.woocommerce-info li,
.woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Een geslaagde melding in het groen van de vinkjes op het afrekenen, een fout
   in rood. De rest houdt de zwarte tekstkleur van hierboven. */

.woocommerce-message::before {
	color: rgb(0, 149, 0);
}

.woocommerce-error::before {
	color: #9c2b21;
}

/* Staat de melding in de winkelmand, dan hoort hij binnen de linkerkolom en niet
   over de volle breedte van het raster. */

.bb-winkelmand__raster .woocommerce-notices-wrapper {
	grid-column: 1;
	padding-inline: 0 32px;
}

/* --- Een regel in de winkelmand --- */

.bb-winkelmand-regel {
	display: grid;
	grid-template-columns: 210px 1fr;
	gap: 24px;
	padding-block: 24px;
	border-top: 1px solid #e6e6e6;
}

.bb-winkelmand-regel__beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.bb-winkelmand-regel__naam {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.bb-winkelmand-regel__naam a {
	color: inherit;
	text-decoration: none;
}

/* De gekozen opties als label/waarde-rijen. */

.bb-winkelmand-regel__opties dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 16px;
	margin: 0;
	font-size: 14px;
}

.bb-winkelmand-regel__opties dt {
	margin: 0;
	font-weight: 400;
	color: #5c5c5c;
}

.bb-winkelmand-regel__opties dd {
	margin: 0;
}

.bb-winkelmand-regel__opties p {
	margin: 0;
}

/* Ingeklapt tonen we alleen de eerste twee regels. */

.bb-winkelmand-regel__opties.is-ingeklapt dl > *:nth-child(n+5) {
	display: none;
}

.bb-winkelmand-regel__meer {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bb-zwart);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

/* Aantal, prullenbak en prijs op één regel — maar ze mogen afbreken. Samen zijn
   ze zo'n 245 pixels breed en dat past op een smalle telefoon niet naast de
   productfoto; zonder wrap duwden ze de hele pagina breder dan het scherm. Nu
   zakt de prijs naar een tweede regel in plaats van eruit te steken. */

.bb-winkelmand-regel__onder {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-top: 20px;
}

.bb-winkelmand-regel__aantal {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Astra geeft elke <button> zijn eigen achtergrond, kleur en padding. Zonder een
   eigen color bleven het min- en plusteken wit op een lichtgrijze knop: wel
   aanklikbaar, niet te zien. Alles wat het uiterlijk bepaalt staat hier daarom
   voluit. */

.bb-winkelmand-regel__aantal .bb-aantal-knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	background-color: #f4f4f4;
	color: #1a1a1a;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bb-winkelmand-regel__aantal .bb-aantal-knop:hover,
.bb-winkelmand-regel__aantal .bb-aantal-knop:focus-visible {
	background-color: #e8e8e8;
	border-color: #c4c4c4;
	color: #1a1a1a;
}

.bb-aantal-knop svg {
	display: block;
}

/* Cadeaus: het aantal ligt vast, dus geen knoppen maar het getal zelf. */

.bb-winkelmand-regel__aantal-vast {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #ececec;
	border-radius: 6px;
	background-color: #fafafa;
	color: #6a6a6a;
}

.bb-winkelmand-regel__aantal .qty {
	width: 46px;
	height: 34px;
	padding: 0;
	border: 1px solid #dcdcdc;
	border-radius: 6px;
	text-align: center;
}

/* Astra tekent om de verwijderknop van WooCommerce een rondje: een leeg
   ::before van twintig bij twintig met een rand eromheen. Dat hoort bij het
   kruisje dat daar van huis uit staat; met ons prullenbakje erin werd het een
   bakje in een cirkel. Het rondje gaat eraf.

   De maten en de kleur met !important, om dezelfde reden als bij de bestelknop
   op de productpagina: Astra zet ze als losse regels in de <head>, dus ná dit
   bestand. Zonder dat blijft de knop één regelhoogte hoog en knipt hij het
   icoon af. */

.bb-winkelmand-regel__verwijder::before {
	display: none !important;
}

.bb-winkelmand-regel__verwijder {
	display: inline-flex;
	width: auto !important;
	height: auto !important;
	color: #8a8a8a !important;
	font-size: inherit !important;
	line-height: 0 !important;
}

.bb-winkelmand-regel__verwijder:hover,
.bb-winkelmand-regel__verwijder:focus-visible {
	color: var(--bb-zwart) !important;
}

.bb-winkelmand-regel__prijs {
	margin-left: auto;
	font-size: 22px;
	font-weight: 700;
}

/* --- Waardebon en bijwerken --- */

.bb-winkelmand__acties {
	padding-top: 24px;
	border-top: 1px solid #e6e6e6;
	text-align: center;
}

.bb-winkelmand__bon-knop {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bb-zwart);
	font-size: 15px;
	text-decoration: underline;
	cursor: pointer;
}

.bb-winkelmand__bon-veld {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}

.bb-winkelmand__bon-veld[hidden] {
	display: none;
}

/* De knop naast het invoerveld kwam op de knopmaat van Astra binnen: 15 bij 30
   pixels binnenmarge, waarmee hij zes pixels hoger werd dan het veld ernaast en
   op een telefoon samen met dat veld de volle schermbreedte opat. Hier krijgt
   hij de hoogte van het veld en een smallere binnenmarge; het is een knop naast
   een invoerveld, geen knop die om aandacht vraagt. */

.bb-winkelmand__bon-veld .button {
	flex: 0 0 auto;
	height: 40px;
	font-size: 15px;
	line-height: 40px;

	/* Met !important, om dezelfde reden als bij de bestelknop op de
	   productpagina: de knopmaten komen niet uit deze stylesheet maar uit de
	   knopinstelling van Astra, en die wordt als losse regels in de <head>
	   gezet — dus ná dit bestand en met een selector waarvan het gewicht per
	   instelling verschilt. Winnen op zwaarte is dan een gevecht dat je bij
	   elke update opnieuw kunt verliezen. De hoogte hierboven heeft het niet
	   nodig; die zet Astra niet. */
	padding: 0 18px !important;
}

/* WooCommerce heeft deze knop nodig om aantallen bij te werken; de bezoeker
   ziet hem niet, de JavaScript klikt hem aan.

   Hij was alleen niet écht weg. Astra geeft zijn knoppen position:relative en
   een eigen hoogte, en die regels wegen zwaarder dan deze — dus bleef er onder
   de waardebon een leeg vak van bijna veertig pixels staan waar niets in stond.
   Vandaar !important op de drie eigenschappen die hem uit de opmaakstroom
   halen; dezelfde afweging als bij de knop hierboven en bij de bestelknop op de
   productpagina. */

.bb-winkelmand__bijwerken {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- De afrekenknop bovenaan ---
   Alleen op een smal scherm; zie woocommerce/cart/cart.php voor het waarom.
   Standaard weg, en pas in de media query hieronder aan. Andersom — tonen en
   dan verbergen — zou hem op een breed scherm even laten zien voordat de
   stylesheet binnen is. */

.bb-winkelmand__afrekenen-boven {
	display: none;
}

/* --- Totalen --- */

.bb-totalen__kaart {
	padding: 24px;
	border-radius: 10px;
	background-color: var(--bb-wit);
}

.bb-totalen__rij {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-block: 8px;
	font-size: 15px;
}

.bb-totalen__rij--korting {
	color: #3f9c35;
}

.bb-totalen__rij--eind {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid #e6e6e6;
	font-weight: 700;
}

.bb-totalen__rij--eind span:last-child {
	font-size: 24px;
}

.bb-totalen__afrekenen {
	margin-top: 16px;
}

.bb-totalen__afrekenen .checkout-button {
	display: block;
	width: 100%;
	padding: 16px;
	border-radius: 8px;
	background-color: #3f8f26;
	color: var(--bb-wit);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/* De servicepunten staan onder elkaar, elk met het icoon links van de tekst.
   Naast elkaar werd de rij breder dan de rechterkolom aankan. */

.bb-totalen__usps {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
	padding: 18px 20px;
	border-radius: 10px;
	background-color: var(--bb-wit);
	font-size: 13px;
}

.bb-totalen__usp {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bb-totalen__usp-icoon {
	flex: 0 0 auto;
	color: #3f8f26;
}

.bb-totalen__reviews {
	margin-top: 20px;
}

/* --- De totalen blijven in beeld ---
   Bij een mand met meer dan een paar regels scrol je de afrekenknop uit beeld
   en moet je terug omhoog om verder te kunnen. Nu schuift het totaalblok mee.

   Het plakken gebeurt op dit omhulsel en niet op de kolom eromheen: die loopt
   over de volle hoogte door — hij draagt het grijs — en een blok dat zijn hele
   ruimte al vult heeft niets om in te plakken.

   Alleen op een breed scherm: daaronder staan de kolommen onder elkaar en staat
   het totaalblok toch al onderaan.

   En met een maximum met eigen schuifruimte, net als de rechterkolom op het
   afrekenen. Het blok is met de beoordelingen erbij zo'n zevenhonderd pixels
   hoog; op een laag venster zou het met zijn onderkant vastplakken en waren de
   beoordelingen onbereikbaar. Nu schuift het blok binnen zichzelf verder.

   Vierentwintig pixels van de bovenkant: de kopbalk plakt niet, dus er valt
   niets te ontwijken — dezelfde marge als op het afrekenen. */

@media (min-width: 1025px) {
	.bb-totalen {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}
}

@media (max-width: 1024px) {
	/* minmax(0, 1fr) en niet alleen 1fr. Een rasterkolom mag zich standaard niet
	   kleiner maken dan zijn inhoud minimaal nodig heeft, en de onderste regel van
	   een winkelmandregel — aantal, prullenbak en prijs naast elkaar — komt op zo'n
	   369 pixels uit. Daardoor werd de kolom 409 pixels breed, ongeacht het scherm,
	   en kon je de hele pagina opzij schuiven: negentien pixels te breed op een
	   iPhone 12, negenentachtig op een iPhone SE.

	   Met deze grens krimpt de kolom gewoon mee. De inhoud past dan wel degelijk;
	   die minimale breedte was een rekensom van de browser, geen harde eis.

	   Dezelfde reden als bij .bb-product__kolommen op de productpagina. */

	.bb-winkelmand__raster > .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.bb-winkelmand__raster .woocommerce-cart-form,
	.bb-winkelmand__raster .bb-winkelmand__kopbalk,
	.bb-winkelmand__zij {
		grid-column: 1;
		grid-row: auto;
		padding-inline: 20px;
	}

	.bb-winkelmand__raster > .woocommerce {
		padding-inline: 0;
	}

	/* Onder elkaar heeft een verticale scheiding geen zin: de bovenste helft
	   wit, de onderste grijs via de blokken zelf. */
	.bb-winkelmand {
		background: var(--bb-wit);
	}

	.bb-winkelmand__zij {
		background-color: var(--bb-grijs-licht);
	}

	/* Dezelfde knop als onderaan de totalen, zodat het er één is die twee keer
	   staat en niet twee die op elkaar lijken. Alleen kleiner: hij deelt zijn
	   regel nu met de titel in plaats van dat hij er een eigen regel voor krijgt.

	   flex: none en nowrap houden hem op zijn eigen breedte. Zonder die twee
	   geeft de titel niet genoeg ruimte af en breekt "Afrekenen" af zodra de naam
	   van de pagina wat langer wordt. */

	.bb-winkelmand__afrekenen-boven {
		display: block;
		flex: none;
		padding: 11px 18px;
		border-radius: 8px;
		background-color: #3f8f26;
		color: var(--bb-wit);
		font-size: 15px;
		font-weight: 600;

		/* Zonder deze regel wordt hij tien pixels hoger dan de knop onderaan en
		   lijkt het net een andere knop. */
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		white-space: nowrap;
	}
}

@media (max-width: 544px) {
	.bb-winkelmand-regel {
		grid-template-columns: 110px 1fr;
		gap: 14px;
	}

	.bb-winkelmand-regel__naam {
		font-size: 17px;
	}

	.bb-winkelmand-regel__prijs {
		font-size: 18px;
	}
}

/* Op de smalste telefoons een kleinere productfoto. Met 110 pixels blijft er
   naast de foto te weinig over voor het aantalveld en de prullenbak samen, en
   dan valt de prullenbak onder het aantal — wat leest alsof hij bij iets anders
   hoort. Met een kleinere foto staan ze weer naast elkaar en zakt alleen de
   prijs naar de regel eronder. */

@media (max-width: 400px) {
	.bb-winkelmand-regel {
		grid-template-columns: 88px 1fr;
	}
}

/* --- Winkelmand: correcties --- */

/* De min- en plusknop horen naast het aantalveld, niet eronder. Het
   .quantity-blok van WooCommerce is standaard geen flexcontainer. */

.bb-winkelmand-regel__aantal .quantity {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
}

/* Alleen het bedrag dat betaald wordt, niet de doorgestreepte oude prijs. */

.bb-winkelmand-regel__prijs del {
	display: none;
}

.bb-winkelmand-regel__prijs ins {
	text-decoration: none;
}

/* Logo's van de betaalmethoden: de SVG's uit images/, alle 38x24. */

.bb-betaalwijzen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
}

.bb-betaalwijze {
	display: block;
	width: 38px;
	height: 24px;
}

/* --- Meldingen krijgen geen focusrand ---
   WooCommerce zet focus op een melding zodat een schermlezer hem voorleest, en
   de browser tekent daar zijn blauwe ring omheen. Die ring is bedoeld om te
   laten zien waar je met het toetsenbord bent; deze blokken zijn met de tab-toets
   niet te bereiken, dus hij zegt hier niets en leest als een blauwe rand om de
   melding. */

.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-notices-wrapper [tabindex="-1"]:focus {
	outline: none;
}

/* In de rechterkolom van de winkelmand staat de rij onder de afrekenknop. */

.bb-totalen__betaalwijzen {
	margin-top: 16px;
}

/* Acht logo's van 38 pixels met 8 pixels ertussen zijn samen 360 breed, en de
   kolom is er 350 — dus viel het laatste logo naar een tweede regel. Ze krimpen
   nu mee in plaats van af te breken, net als in de rij onder de bestelknop op de
   productpagina. */

@media (max-width: 921px) {
	.bb-totalen__betaalwijzen .bb-betaalwijzen {
		flex-wrap: nowrap;
		gap: 4px;
	}

	.bb-totalen__betaalwijzen .bb-betaalwijze {
		box-sizing: border-box;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}
}

/* ==========================================================================
   AFREKENEN
   Vervangt de Elementor-opzet van de afrekenpagina.

   Links de gegevens en de betaalkeuze op wit, rechts het besteloverzicht op
   lichtgrijs. De indeling zit in woocommerce/checkout/form-checkout.php; wat
   hier staat is opmaak op wat WooCommerce zelf uitstuurt, zodat de
   betaalplugins ongemoeid blijven.
   ========================================================================== */

/* Astra's contentcontainer zou de pagina op 1140px houden; de afrekenpagina
   loopt van rand tot rand. Alleen op het formulier zelf, niet op de
   bedankpagina — die houdt de gewone opmaak. */

.woocommerce-checkout:not(.woocommerce-order-received) .ast-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.woocommerce-checkout:not(.woocommerce-order-received) .site-content .ast-container {
	display: block;
}

/* --- De kale header: alleen het logo, gecentreerd --- */

.bb-header--kaal {
	background-color: var(--bb-grijs-licht);
	border-bottom: 1px solid #e6e6e6;
}

.bb-header--kaal .bb-header__inner {
	display: flex;
	justify-content: center;
	padding-block: 18px;
}

/* --- De twee kolommen --- */

.bb-afrekenen {
	width: 100%;
	min-width: 0;

	/* Links wit, rechts grijs, allebei tot de rand van het scherm. De scheiding
	   ligt op de kolomgrens: het raster is 1440 breed en gecentreerd, en de
	   rechterkolom begint daarin op 835px — dus 50% - 720 + 835. Onder de 1440
	   dekken de kolommen hun eigen achtergrond, dus daar valt niets te zien. */
	background: linear-gradient(
		to right,
		var(--bb-wit) 0,
		var(--bb-wit) calc(50% + 115px),
		var(--bb-grijs-licht) calc(50% + 115px),
		var(--bb-grijs-licht) 100%
	);
}

.bb-afrekenen__raster {
	display: grid;

	/* De stappen, het formulier en het overzicht. Het formulier is smaller dan
	   de helft: op 1440 wordt dit 200 + 635 + 605. */
	grid-template-columns: 200px minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: start;

	/* Ruimer dan de rest van de site: het ontwerp gebruikt de volle breedte. */
	max-width: 1440px;
	margin-inline: auto;
	min-height: 70vh;
}

.bb-afrekenen__links {
	/* Eigen achtergrond in plaats van alleen die van de pagina: dan klopt de
	   scheiding ook onder de 1440px, waar het raster smaller wordt. */
	background-color: var(--bb-wit);
	padding: 48px 40px 80px 0;
}

/* --- De stappen links ---
   Blijft in beeld terwijl je scrolt, zodat je onderweg ziet waar je bent en
   dat er onder het formulier nog twee stappen wachten. */

.bb-afrekenen__stappen {
	position: sticky;
	top: 24px;
	padding: 52px 24px 40px 20px;
	background-color: var(--bb-wit);
}

.bb-stappen {
	position: relative;
	display: grid;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* De lijn achter de bollen, en daaroverheen het deel dat je gehad hebt.
   tijdlijn.js zet --bb-voortgang op de rail; hier is dat een hoogte. */

.bb-stappen::before,
.bb-stappen::after {
	content: "";
	position: absolute;
	top: 14px;
	left: 13px;
	width: 2px;
	background-color: #e3e3e3;
}

.bb-stappen::before {
	bottom: 14px;
}

.bb-stappen::after {
	height: var(--bb-voortgang, 33%);
	background-color: var(--bb-zwart);
	transition: height 0.35s ease;
}

.bb-stap {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: #6a6a63;
	text-decoration: none;
}

.bb-stap:hover,
.bb-stap:focus-visible {
	color: var(--bb-zwart);
	text-decoration: none;
}

.bb-stap__bol {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid #e3e3e3;
	border-radius: 50%;
	background-color: var(--bb-wit);
	color: inherit;
	font-size: 13px;
	font-weight: 700;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.bb-stap.is-actief {
	color: var(--bb-zwart);
}

.bb-stap.is-actief .bb-stap__bol {
	border-color: var(--bb-zwart);
	background-color: var(--bb-zwart);
	color: var(--bb-wit);
}

.bb-stap__titel {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.bb-stap__uitleg {
	display: block;
	margin-top: 2px;
	color: #8a8a82;
	font-size: 13px;
	line-height: 1.35;
}

.bb-afrekenen__rechts {
	align-self: stretch;
	padding: 48px 20px 80px 40px;
	background-color: var(--bb-grijs-licht);
}

/* --- De rechterkolom ---
   Op een breed scherm blijft alles in deze kolom in beeld terwijl je het
   formulier invult: het overzicht en de servicepunten samen. De
   kolom zelf blijft over de volle hoogte doorlopen — die draagt het grijs — dus
   het plakken gebeurt op het omhulsel erbinnen.

   Het moet één blok zijn: plakte alleen het overzicht, dan zouden de blokken
   eronder tijdens het scrollen gewoon doorlopen en er overheen schuiven.

   Er zit een maximum aan met eigen schuifruimte: bij een mand vol producten is
   de kolom hoger dan het scherm, en dan zou de onderkant onbereikbaar blijven. */

.bb-afrekenen__zijblok {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

/* In de database staat CSS die de productnaam op het afrekenen 40% binnenmarge
   geeft, als plek voor een miniatuur links ernaast. Die miniatuur komt in dit
   ontwerp niet meer mee — de span ervoor is leeg — maar de marge bleef, en
   samen met width: 100% werd het blok 140% van de kolom breed. Daar kwam de
   horizontale schuifbalk hierboven vandaan: overflow-y: auto laat de browser
   ook op de andere as schuiven zodra er iets buiten valt.

   De naam vult de kolom nu gewoon. box-sizing erbij, zodat een binnenmarge die
   later alsnog uit de database komt binnen de kolom blijft. */

.bb-afrekenen .product-name__text {
	box-sizing: border-box;
	width: auto;
	padding-left: 0;
}

/* Op een breed scherm is er niets uit te klappen: het staat er gewoon. */

.bb-overzicht-blok__knop {
	display: none;
}

.bb-afrekenen__kop {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}


/* Twee koppen van WooCommerce weg.

   "Factuurgegevens": daarboven staat al "Je gegevens & bezorgadres", en twee
   koppen boven hetzelfde rijtje velden zegt niets extra's.

   "Aanvullende informatie": het veld eronder heet zelf al Bestelnotities en
   zegt daarmee genoeg.

   Met CSS en niet met een eigen sjabloon: die koppen staan midden in
   checkout/form-billing.php en checkout/form-shipping.php van WooCommerce, en
   om die ene regel te schrappen zouden we het hele bestand moeten overnemen —
   inclusief de aanmeldvinkjes en de adreslogica die daar ook in zitten, en die
   dan bij elke WooCommerce-update nagelopen moeten worden. Deze regels reizen
   net zo goed mee naar live. */

.bb-afrekenen .woocommerce-billing-fields > h3,
.bb-afrekenen .woocommerce-additional-fields > h3 {
	display: none;
}

/* De kop "Aanvullende informatie" droeg ook de ruimte tussen het e-mailveld en
   het notitieveld; zonder die kop sloten de twee velden op elkaar aan. Die
   ruimte staat nu op het blok zelf, en is dezelfde 14px als tussen alle andere
   velden. */

.bb-afrekenen .woocommerce-additional-fields {
	margin-top: 14px;
}

.bb-afrekenen__links .bb-afrekenen__kop:not(:first-child) {
	margin-top: 44px;
}

/* Het betaalblok heeft geen eigen kop meer — WooCommerce zet er zelf
   "Betaalmethodes" boven — maar de ruimte tussen de stappen kwam wél van die
   kop. Die staat nu op het blok zelf. */

.bb-afrekenen__links #stap-betalen {
	margin-top: 44px;
}

/* --- De invulvelden ---
   Het label staat ín het veld zolang er niets is ingevuld en schuift naar boven
   zodra dat wel zo is. Dat vraagt om een placeholder (die zet functions.php) en
   om :has() voor de toestand van het veld. */

/* WooCommerce zet zelf twee kolommen neer: #customer_details en #order_review
   zweven naast elkaar op 48%, en de voor- en achternaam staan naast elkaar via
   .form-row-first en .form-row-last. Onze kolommen komen uit het raster, dus
   dat moet er allemaal af.

   Astra doet daar nog een schep bovenop met een <style>-blok in de pagina zelf,
   met selectors als "form #customer_details.col2-set .col-1" en
   "form #order_review:not(.elementor-... #order_review)" — die laatste telt
   twee ID's. Daar komt geen enkele klassenselector overheen. Vandaar #page
   ervoor: dat is de wrapper van Astra en telt als extra ID, zodat wij winnen
   zonder !important.

   Alles in de linkerkolom staat daarmee op de volle kolombreedte. */

#page .bb-afrekenen form.checkout .bb-afrekenen__links > *,
#page .bb-afrekenen form.checkout #customer_details,
#page .bb-afrekenen form.checkout #customer_details.col2-set,
#page .bb-afrekenen form.checkout #customer_details .col-1,
#page .bb-afrekenen form.checkout #customer_details .col-2,
#page .bb-afrekenen form.checkout .woocommerce-billing-fields,
#page .bb-afrekenen form.checkout .woocommerce-billing-fields__field-wrapper,
#page .bb-afrekenen form.checkout .woocommerce-shipping-fields,
#page .bb-afrekenen form.checkout .woocommerce-additional-fields,
#page .bb-afrekenen form.checkout .woocommerce-additional-fields__field-wrapper,
#page .bb-afrekenen form.checkout .form-row {
	width: 100%;
	max-width: none;
	float: none;
	margin-left: 0;
	margin-right: 0;
}

.bb-afrekenen form.checkout #customer_details,
.bb-afrekenen form.checkout #order_review,
.bb-afrekenen form.checkout .col2-set,
.bb-afrekenen form.checkout .col2-set .col-1,
.bb-afrekenen form.checkout .col2-set .col-2 {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

.bb-afrekenen form.checkout .form-row,
.bb-afrekenen form.checkout .form-row-first,
.bb-afrekenen form.checkout .form-row-last,
.bb-afrekenen form.checkout .form-row-wide {
	position: relative;
	float: none;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
}

/* Even veel ruimte boven en onder: de tekst staat daarmee midden in het veld.
   Het label hoeft er geen plaats meer voor vrij te houden — dat gaat op de rand
   staan zodra er iets is ingevuld, zie hieronder. */

.bb-afrekenen form.checkout .form-row .input-text,
.bb-afrekenen form.checkout .form-row select {
	width: 100%;
	height: 60px;
	padding: 0 16px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	background-color: var(--bb-wit);
	font-size: 15px;
	line-height: 1.2;
	color: var(--bb-zwart);
}

.bb-afrekenen form.checkout .form-row textarea.input-text {
	height: auto;
	min-height: 96px;
	padding: 16px;
	resize: vertical;
}

.bb-afrekenen form.checkout .form-row .input-text:focus,
.bb-afrekenen form.checkout .form-row select:focus {
	border-color: var(--bb-zwart);
	outline: none;
}

/* Het label over het veld heen. Alleen bij invulvelden en keuzelijsten; een
   selectievakje als "Verzenden naar een ander adres?" houdt zijn eigen label. */

.bb-afrekenen .form-row:has(> .woocommerce-input-wrapper .input-text) > label,
.bb-afrekenen .form-row:has(> .woocommerce-input-wrapper select) > label {
	position: absolute;
	top: 50%;
	left: 17px;

	/* Boven het veld. Bij een gewoon invulveld gaat dat vanzelf goed — een
	   element met een positie ligt boven gewone inhoud — maar de keuzelijst
	   wordt door select2 vervangen, en dat blok heeft zélf een positie en komt
	   later in de opmaak. Zonder deze regel verdween "Land/regio" erachter. */
	z-index: 2;
	margin: 0;
	color: #767676;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	pointer-events: none;
	transform: translateY(-50%);
	transition: top 0.12s ease, font-size 0.12s ease;
}

/* Ingevuld of in gebruik: het label gaat op de bovenrand staan, met een wit
   vlakje eronder zodat de rand er netjes voor onderbroken wordt. Zo houdt het
   veld zijn label zonder ruimte weg te nemen bij de tekst. */

.bb-afrekenen .form-row:has(.input-text:focus) > label,
.bb-afrekenen .form-row:has(.input-text:not(:placeholder-shown)) > label,
.bb-afrekenen .form-row:has(> .woocommerce-input-wrapper select) > label {
	top: 0;
	margin-left: -4px;
	padding-inline: 4px;
	background-color: var(--bb-wit);
	font-size: 11px;
}

/* Sommige velden hebben van zichzelf een voorbeeld als placeholder: Postcode.eu
   zet "1234 AB" in het postcodeveld en "123 A" bij het huisnummer. Zolang er
   niets is ingevuld staat het label midden in het veld, en dan stonden die twee
   teksten door elkaar heen.

   Het voorbeeld weghalen zou zonde zijn — het helpt juist. Daarom is het alleen
   onzichtbaar zolang het veld niet in gebruik is. Zodra je erin klikt schuift
   het label naar de bovenrand en komt het voorbeeld tevoorschijn, precies waar
   het nut heeft. De placeholder blijft staan, want het zweven van het label
   hangt ervan af. */

.bb-afrekenen form.checkout .form-row .input-text:not(:focus)::placeholder {
	color: transparent;
}

/* Bij een tekstvak staat het label bovenin en niet in het midden: dat vak is
   een stuk hoger, en halverwege zou het nergens op slaan. */

.bb-afrekenen .form-row:has(textarea.input-text) > label {
	top: 22px;
	transform: none;
}

.bb-afrekenen .form-row:has(textarea.input-text:focus) > label,
.bb-afrekenen .form-row:has(textarea.input-text:not(:placeholder-shown)) > label {
	top: 0;
	transform: translateY(-50%);
}

.bb-afrekenen .form-row abbr.required {
	border: 0;
	color: inherit;
	text-decoration: none;
}

/* De keuzelijst van WooCommerce wordt door select2 vervangen; die krijgt
   dezelfde maten als een gewoon veld. */

.bb-afrekenen .select2-container .select2-selection--single {
	height: 60px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	background-color: var(--bb-wit);
}

.bb-afrekenen .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 16px;

	/* Select2 centreert zijn tekst met de regelhoogte; 58px is de binnenkant
	   van het veld van 60px. */
	line-height: 58px;
	font-size: 15px;
	color: var(--bb-zwart);
}

.bb-afrekenen .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 58px;
	right: 8px;
}

/* --- De betaalmethoden ---
   De markup komt uit woocommerce/checkout/payment-method.php: naam en logo in
   eigen elementen. Astra en de oude CSS in de database sturen dit blok aan met
   selectors op #payment, li en label — vandaar #page ervoor, en vandaar dat
   float, positie en breedte hier expliciet teruggezet worden. */

#page .bb-afrekenen form.checkout #payment {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode {
	display: block;
	float: none;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;

	/* Zelf-clearend, mocht een plugin binnenin nog iets laten zweven. */
	overflow: hidden;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background-color: var(--bb-wit);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Astra hangt een clearfix aan elke regel; die trok hier een streep door de
   tekst omdat de regel zelf al met flex werkt. */

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode::before,
#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode::after {
	display: none;
}

/* Het keuzerondje is onzichtbaar maar blijft bedienbaar met het toetsenbord;
   de gekozen methode is te zien aan de rand van de kaart. */

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode > input[type="radio"] {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode .bb-betaalmethode__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	float: none;
	position: static;
	width: 100%;
	margin: 0;
	padding: 20px;

	/* 24px logo tussen 20px marge boven en onder: elke kaart even hoog, ook als
	   er geen logo bij een methode hoort. */
	min-height: 64px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode .bb-betaalmethode__naam {
	flex: 1 1 auto;
	min-width: 0;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode .bb-betaalmethode__logos {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode .bb-betaalmethode__logo {
	display: block;
	flex: 0 0 auto;
	width: 38px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode:has(input[type="radio"]:checked) {
	border-color: var(--bb-zwart);
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode:has(input[type="radio"]:focus-visible) {
	outline: 2px solid var(--bb-zwart);
	outline-offset: 2px;
}

/* De toelichting die openklapt bij de gekozen methode, bijvoorbeeld het
   bankenlijstje van iDEAL. */

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode div.payment_box {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 20px 20px;
	border-radius: 0;
	background: transparent;
	font-size: 14px;
	line-height: 1.5;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode div.payment_box::before {
	display: none;
}

#page .bb-afrekenen form.checkout #payment ul.payment_methods li.bb-betaalmethode div.payment_box p:last-child {
	margin-bottom: 0;
}

/* De afrekenknop staat waar WooCommerce hem zet: onder de betaalmethoden. */

#page .bb-afrekenen form.checkout #payment .place-order {
	margin: 24px 0 0;
	padding: 0;
}

/* In het besteloverzicht het label vet en het bedrag gewoon. Het stond
   andersom: de omschrijving dun en het bedrag zwaar, waardoor je een kolom
   getallen las in plaats van regels die iets zeggen. De eindregel houdt zijn
   eigen gewicht — daar mag het bedrag wél opvallen. */

#page .bb-afrekenen form.checkout #order_review table.bb-overzicht th {
	font-weight: 700;
}

#page .bb-afrekenen form.checkout #order_review table.bb-overzicht td {
	font-weight: 400;
}

/* --- De knop "Plaats bestelling" ---
   Groter dan de rest: het is de laatste handeling van de hele bestelling. */

#page .bb-afrekenen form.checkout #payment #place_order,
#page .bb-afrekenen form.checkout #payment .place-order .button {
	display: block;
	width: 100%;
	padding: 20px;
	border: 0;
	border-radius: 8px;
	background-color: #3f8f26;
	color: var(--bb-wit);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}

/* --- Het besteloverzicht ---
   Het blijft een <table> omdat WooCommerce en de betaalplugins er rijen in
   hangen; de indeling komt hier vandaan.

   Alle regels beginnen met .bb-afrekenen form.checkout #order_review. Dat is
   lelijk lang, maar nodig: Astra stuurt dit blok aan met selectors als
   ".woocommerce.woocommerce-checkout form #order_review td.product-name", en
   daar komt een losse klasse niet overheen. Zonder die prefix zet Astra de
   productcel op display:flex en de bedragen rechts, en houdt WooCommerce zijn
   eigen rand en celopvulling. */

#page .bb-afrekenen form.checkout #order_review,
#page .bb-afrekenen form.checkout #order_review table.bb-overzicht {
	display: block;
	float: none;
	clear: both;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht thead {
	display: none;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tbody {
	display: block;
	margin-bottom: 24px;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tbody tr.cart_item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	grid-template-areas:
		"beeld naam"
		"beeld prijs";
	gap: 4px 16px;
	margin: 0;
	padding: 0 0 20px;
	border: 0;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht td,
.bb-afrekenen form.checkout #order_review table.bb-overzicht th {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	vertical-align: top;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht td.product-beeld {
	grid-area: beeld;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht td.product-beeld img {
	display: block;
	width: 84px;
	max-width: none;
	height: auto;
	border-radius: 8px;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht td.product-name {
	grid-area: naam;
	font-weight: 400;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht td.product-total {
	grid-area: prijs;
	align-self: start;
	font-size: 20px;
	font-weight: 700;
}

.bb-overzicht td.product-total del {
	display: none;
}

.bb-overzicht td.product-total ins {
	text-decoration: none;
}

.bb-overzicht__naam {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
}

.bb-overzicht__specs-knop {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bb-zwart);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.bb-overzicht__specs-knop svg {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.bb-overzicht__specs-knop.is-open svg {
	transform: rotate(180deg);
}

.bb-overzicht__specs {
	margin-top: 8px;
	font-size: 13px;
}

.bb-overzicht__specs dl,
.bb-overzicht__specs dd {
	margin: 0;
}

.bb-overzicht__specs dt {
	font-weight: 600;
}

.bb-overzicht__specs dd p {
	margin: 0 0 4px;
}

/* Terug naar de winkelmand, tussen de regels en de bedragen. Als tekst en niet
   als knop: het is een uitweg, geen stap in het afrekenen, en een echte knop
   zou naast de bestelknop om aandacht vragen. Zelfde vorm als "Bekijk
   specificaties" hierboven — het is hetzelfde soort tekstlink.

   De rij expliciet op block: de tabel en de tbody staan al op block, en een
   losse tr zou daarbinnen een anonieme tabel om zich heen krijgen. */

.bb-afrekenen form.checkout #order_review table.bb-overzicht tr.bb-overzicht__wijzigen-rij {
	display: block;
}

.bb-overzicht__wijzigen {
	display: inline-block;
	color: var(--bb-zwart);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
}

.bb-overzicht__wijzigen:hover,
.bb-overzicht__wijzigen:focus-visible {
	color: var(--bb-zwart);
	text-decoration: underline;
}

/* De totalen als kaart, net als op de winkelmand. */

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot {
	display: block;
	padding: 8px 20px;
	border-radius: 10px;
	background-color: var(--bb-wit);
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 10px 0;
	border: 0;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot th {
	flex: 1 1 auto;
	font-weight: 400;
	text-align: left;
}

/* Het bedrag blijft op één regel; het label mag afbreken als het te lang is. */

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot td {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot tr.cart-discount,
.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot tr.bb-overzicht__besparing {
	color: #3f8f26;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot tr.order-total {
	border-top: 1px solid #e6e6e6;
	font-weight: 700;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot tr.order-total td {
	font-size: 24px;
}

.bb-afrekenen form.checkout #order_review table.bb-overzicht tfoot tr.shipping ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

/* --- Servicepunten ---
   Onder elkaar, onder de bestelknop in de linkerkolom. Grijs vlak in plaats van
   wit: de linkerkolom is zelf wit, dus een witte kaart zou daar wegvallen. */

.bb-afrekenen__usps {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 28px;
	padding: 20px;
	border-radius: 10px;
	background-color: var(--bb-grijs-licht);
}

.bb-afrekenen__usp {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.35;
}

/* Hetzelfde groene vinkje als onder de bestelknop op de productpagina; zie
   bb_vinkje_icoon() voor waarom elke regel hetzelfde teken krijgt. */

.bb-afrekenen__usp-icoon {
	flex: 0 0 auto;
	color: rgb(0, 149, 0);
}

/* --- Wat er na de bestelling gebeurt ---
   Drie kaarten onderaan de linkerkolom. Ze zijn met opzet hetzelfde opgemaakt
   als de betaalmethoden erboven — wit, 1px #e2e2e2, 10px rond — zodat de kolom
   één stel kaarten toont en niet twee verschillende. */

.bb-nabestelling {
	margin-top: 44px;
}

.bb-nabestelling__kop {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.bb-nabestelling__lijst {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bb-nabestelling__kaart {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	background-color: var(--bb-wit);
}

.bb-nabestelling__titel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.bb-nabestelling__icoon {
	flex: 0 0 auto;
}

.bb-nabestelling__tekst {
	margin: 0;
	color: #4a4a45;
	font-size: 14px;
	line-height: 1.6;
}

/* --- Tablet en mobiel --- */

@media (max-width: 1024px) {
	.bb-afrekenen {
		background: var(--bb-wit);
	}

	.bb-afrekenen__raster {
		grid-template-columns: 1fr;
	}

	/* De stappenbalk is er voor het brede scherm; op één kolom staat alles al
	   onder elkaar en zou hij alleen maar ruimte kosten. */

	.bb-afrekenen__stappen {
		display: none;
	}

	/* Op één kolom hoort de balk met de bestelling bovenaan, boven de velden.
	   Met display: contents telt hij zelf mee in het raster en kan hij met
	   order naar voren; als blok in de kolom zou dat niet kunnen.

	   De kolom draagt daarmee zelf geen achtergrond of marge meer; die gaan
	   naar het blok zelf. */

	.bb-afrekenen__rechts,
	.bb-afrekenen__zijblok {
		display: contents;
	}

	/* Het overzicht dichtgeklapt bovenaan: één balk met het bedrag, zodat de
	   invulvelden meteen in beeld staan en je alsnog kunt kijken wat je besteld
	   hebt. Het dichtklappen zelf doet assets/js/afrekenen.js. */

	.bb-overzicht-blok {
		order: -1;
		padding: 20px 20px 0;
	}


	.bb-overzicht-blok__knop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 16px;
		border: 1px solid #dcdcdc;
		border-radius: 10px;
		background-color: var(--bb-wit);
		cursor: pointer;
		list-style: none;
	}

	.bb-overzicht-blok__knop::-webkit-details-marker {
		display: none;
	}

	.bb-overzicht-blok__label {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 15px;
		font-weight: 600;
	}

	/* Het pijltje wijst naar beneden zolang het dicht is en draait bij openen. */

	.bb-overzicht-blok__label::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.15s ease;
	}

	.bb-overzicht-blok[open] .bb-overzicht-blok__label::after {
		transform: translateY(2px) rotate(-135deg);
	}

	.bb-overzicht-blok__bedrag {
		font-size: 16px;
		font-weight: 700;
	}

	/* De eigen kop is dubbelop naast de balk erboven. */

	.bb-overzicht-blok[open] > .bb-afrekenen__kop {
		margin-top: 20px;
	}

	.bb-afrekenen__links {
		padding: 32px 20px 60px;
	}
}

/* WooCommerce zet meldingen, het inlogblok en het kortingsbonveld boven het
   formulier neer. Die staan daarmee buiten de twee kolommen; hier krijgen ze
   dezelfde marge als de linkerkolom. */

.bb-afrekenen > .woocommerce-notices-wrapper,
.bb-afrekenen > .woocommerce-form-login-toggle,
.bb-afrekenen > .woocommerce-form-coupon-toggle,
.bb-afrekenen > .woocommerce-form-login,
.bb-afrekenen > .checkout_coupon {
	max-width: 1440px;
	margin-inline: auto;
	padding: 20px 20px 0;
}

/* Niet elke WooCommerce-versie zet het invulveld in een .woocommerce-input-
   wrapper. Zonder die wrapper zou het label boven het veld blijven staan in
   plaats van erover; deze regels vangen dat geval af. */

.bb-afrekenen .form-row:has(> .input-text) > label,
.bb-afrekenen .form-row:has(> select) > label {
	position: absolute;
	top: 19px;
	left: 17px;
	margin: 0;
	color: #767676;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	pointer-events: none;
	transition: top 0.12s ease, font-size 0.12s ease;
}

.bb-afrekenen .form-row:has(> .input-text:focus) > label,
.bb-afrekenen .form-row:has(> .input-text:not(:placeholder-shown)) > label,
.bb-afrekenen .form-row:has(> select) > label {
	top: 9px;
	font-size: 11px;
}