/* ============================================================
   WIJDEVEN — PRODUCTPAGINA (Layout C wrapper)
   Eigen wrapper-classes (.wv-product-page__gallery / __summary) i.p.v.
   Storefront's float-based .images/.summary. De hero-indeling staat bij de
   Layout C-regels verderop.
   ============================================================ */

/* Storefront's `.single-product div.product { overflow: hidden }` clipt onze
   box-shadow op de configurator-card. Match die specificiteit (0,3,1) door
   onze eigen class erbij te zetten zodat we duidelijk winnen. */
.single-product div.product.wv-product-page,
.single-product div.product.wv-product-page .wv-product-page__summary {
	overflow: visible;
}
.wv-product-page__gallery > .woocommerce-product-gallery,
.wv-product-page__gallery > .images {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}
.wv-product-page__summary .product_title {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	color: #171717;
	margin: 0 0 0px;
}

/* Short description: spacing op de wrapper i.p.v. op de losse <p>'s, zodat
   multi-paragraph teksten een nette inline-rhythm houden maar het blok zelf
   één voorspelbare onder-marge van 32px heeft. */
.woocommerce-product-details__short-description {
	margin: 24px 0 32px;
	color: #171717;
}
.woocommerce-product-details__short-description > *:last-child {
	margin-bottom: 0;
}

/* Per-m² prijs (configurator) en simple-product prijs delen exact dezelfde
   look + spacing. .price.wv-single-price (twee klassen) beat Storefront's
   `.summary .price` regel (specificiteit 0,0,2,0 vs 0,0,2,0 maar cascade
   later → wint). */
.wv-unit-price,
.single-product div.product p.wv-single-price {
	display: flex;
	align-items: baseline;
	gap: 0px;
	margin: 4px;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	color: #777;
	line-height: 1.4;
	padding-bottom: 16px;
}
.wv-unit-price__unit {
	color: inherit;
	margin-left: 4px;
	font-weight: 400;
}
/* WC's <del>/sale styling op de simple-prijs op normaal gewicht houden. */
.wv-single-price del .wv-single-price-amount {
	opacity: .5;
	font-weight: 400;
}

/* ============================================================
   WIJDEVEN — PRODUCT BADGE (rechtsboven, recht/normaal label)
   ============================================================ */
/* ============================================================
   WIJDEVEN — PRODUCT GALLERY
   ============================================================ */

/* Vaste verhoudingen + image fills container, zodat de gallery niet meer
   springt op hover en niet kleiner is dan de kolom. WC zet inline
   `opacity: 0` op de wrapper en verwacht dat flexslider die op 1 zet bij init —
   forceren naar 1 zodat het beeld zichtbaar blijft, ook als slider JS faalt
   of vertraagd is bij flex-children. */
.woocommerce-product-gallery {
	position: relative;
	opacity: 1 !important;
}
.woocommerce-product-gallery__image {
	display: block;
	position: relative;
}
/* Zoom-icoon rechtsonder. pointer-events: none — een klik valt door naar de
   afbeeldingslink en opent de lightbox. */
/* Zoom-trigger exact als babynaambord: 40px vak met witte achtergrond en een
   zwart Lucide zoom-in-icoon. pointer-events: none houdt de klik-doorval naar de
   afbeeldingslink (lightbox) intact. */
/* Vorige/volgende op de galerij, in de stijl van de printpro-galerij: witte ronde knop van
   48px met dunne rand en zachte schaduw, Lucide-chevron van 24px op lijndikte 2, 8px uit de
   kant en verticaal in het midden. Markup en SVG's komen uit configurator.js / wvGalerij. */
.wv-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	background: #fff;
	color: #171717;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.wv-gallery-nav--prev { left: 8px; }
.wv-gallery-nav--next { right: 8px; }
/* Storefront kleurt button:hover #333 en zet een achtergrond; hier expliciet de sitekleur. */
.wv-gallery-nav:hover,
.wv-gallery-nav:focus-visible {
	background: #fff;
	border-color: #0F52BA;
	color: #0F52BA;
}
.wv-gallery-nav__icoon {
	display: block;
	width: 24px;
	height: 24px;
	/* wv_lucide_icon_svg() zet 1.5 als attribuut; de pijlen staan op 2, zoals bij printpro. */
	stroke-width: 2;
}
.wv-gallery-zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border-radius: 3px;
	/* Icoon zelfde grootte (16px) en kleur (#404040) als de header-zoekbalk. */
	color: #404040;
	pointer-events: none;
}
/* Zoom-knop: Google Material Symbol "search" op 20px in het witte vak. */
.wv-gallery-zoom .wv-gallery-zoom__icon {
	font-size: 20px;
	line-height: 1;
	font-weight: 500;
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
/* Beeldvlak 4:3, gelijk aan de productkaarten. object-fit: cover vult het vlak en
   snijdt een afwijkende upload (bijv. vierkant) in het midden bij, net als op de
   kaart — zo staat de foto op beide plekken hetzelfde in beeld. */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery__image .wp-post-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	display: block;
	max-width: 100%;
	border-radius: 4px;
	background: #ffffff;
	box-sizing: border-box;
}
/* Geen productafbeelding → onze placeholder vult de galerijkolom (de wrapper is
   een flex-item dat anders naar de inhoud krimpt) en krijgt dezelfde radius
   als een echte afbeelding. */
.single-product .woocommerce-product-gallery__wrapper:has(.wv-placeholder) {
	width: 100%;
}
.woocommerce-product-gallery__image--placeholder .wv-placeholder {
	border-radius: 4px;
}
/* In de slider (meerdere afbeeldingen) draagt de vaste .flex-viewport de radius —
   met FlexSlider's overflow:hidden clipt die het schuivende beeld met ronde hoeken.
   De afbeelding zelf wordt plat, anders schuiven de hoeken mee. */
.single-product div.product .woocommerce-product-gallery .flex-viewport {
	border-radius: 4px;
	box-sizing: border-box;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img {
	border-radius: 0;
}
/* Thumbnails — WC/Storefront geeft de li's float + procentuele breedte met
   grote marges (afgestemd op 5 kolommen). Wij vervangen dat door een flex-rij
   met een vaste gap. De ruimte boven de thumbnails (.flex-viewport
   margin-bottom) is gelijkgetrokken aan de gap. */
.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 12px;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}
/* Storefront's clearfix ::before/::after worden in een flex-container zelf
   flex-items — dat duwt de eerste thumbnail met de gap naar rechts. Uitzetten. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
	display: none;
}
/* width/float/margin met !important — Storefront's `--columns-5` regel staat op
   specificiteit (0,5,2); we vervangen die kolom-grid layout volledig. */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	width: 96px !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
	list-style: none;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	/* border-box zodat de 1px rand binnen de 100% valt en de actieve
	   thumbnail niet groter wordt dan de inactieve. */
	box-sizing: border-box;
	border: 1px solid #e4e4e4;
	/* Miniaturen in dezelfde 4:3 als de hoofdafbeelding (de 100×100-crop wordt boven en
	   onder bijgesneden); de hoogte staat zo al vast vóór ze laden. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border: 1px solid #0F52BA;
}

/* ============================================================
   TABBALK — jump-navigatie boven de gestapelde secties in de linkerkolom.
   ============================================================ */
.wv-tabs__nav {
	display: flex;
	gap: 16px;
}
.wv-tabs__tab {
	position: relative;
	margin: 0;
	padding: 0 8px 12px;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: color .15s ease;
}
/* Onderstreping van de actieve tab, precies op de scheidingslijn van de onderzone. */
.wv-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: #0F52BA;
	/* Standaard onzichtbaar; de regel verderop zet hem aan bij hover en op de
	   actieve tab. Zonder deze nul staat de streep onder álle tabs. */
	opacity: 0;
	transition: opacity .15s ease;
}
.wv-tabs__tab:hover,
.wv-tabs__tab:focus {
	background: none;
	color: #171717;
}
.wv-tabs__tab.is-active {
	color: #0F52BA;
}
/* Zelfde gedrag als de tabbalk op drukpro: de streep verschijnt ook bij mouseover.
   Storefront zet button::after op display:none, vandaar block hier. */
.wv-tabs__tab::after {
	display: block;
}
.wv-tabs__tab:hover::after,
.wv-tabs__tab:focus-visible::after,
.wv-tabs__tab.is-active::after {
	opacity: 1;
}
/* Scroll-doel van de tabbalk stopt net onder de bovenrand. */
.wv-tabs__section {
	scroll-margin-top: 24px;
}
/* Kop van de specificatie-sectie verborgen; de tabbalk benoemt die al. */
#wv-section-specificaties .wv-tabs__section-title {
	display: none;
}
/* Layout C: de tabbalk boven de secties in de linkerkolom, met de lijn op kolombreedte. */
.wv-layout-c__content .wv-tabs__nav {
	margin-bottom: 24px;
	border-bottom: 1px solid #e4e4e4;
}
@media (max-width: 768px) {
	.wv-tabs__nav {
		gap: 20px;
		overflow-x: auto;
	}
	.wv-tabs__tab {
		font-size: 15px;
	}
}

/* ============================================================
   VERGELIJKBARE PRODUCTEN — onder het witte productgrid, op de grijze ondergrond,
   met de winkelkaarten (archive.css). Storefront zet op li.product in .site-main
   floats en procentbreedtes; die gaan hier uit zodat het winkelgrid werkt.
   ============================================================ */
/* Zelfde volle breedte als de witte zone erboven (buiten Storefronts .col-full), zodat
   de inhoud op dezelfde lijn staat als het productgrid. */
.wv-vergelijkbaar {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 72px 0;
	background: #f8f8f8;
}
.wv-vergelijkbaar__title {
	margin: 0 0 24px;
	font-size: 28px;
	font-weight: 600;
	color: #171717;
}
.wv-vergelijkbaar ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}
/* Storefront geeft .site-main én .content-area een ondermarge van 2.6em; op de
   productpagina is dat een lege grijze strook tussen "Vergelijkbare producten" en de footer. */
.single-product .site-main,
.single-product .content-area {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.wv-vergelijkbaar {
		padding: 48px 0;
	}
}

/* ============================================================
   WIJDEVEN — DIKTEKIEZER (bovenin de configurator)
   Knoppen naar de andere diktes van dezelfde productfamilie; de huidige dikte
   staat blauw omlijnd, een uitverkochte dikte blijft zichtbaar maar doorgestreept.
   ============================================================ */
.wv-dikte {
	margin-bottom: 0;
}
.wv-dikte__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-top: 18px;
}
/* Formaatknoppen ("2500 × 1200 mm") zijn breder: drie per rij. */
.wv-dikte--formaat .wv-dikte__list {
	grid-template-columns: repeat(3, 1fr);
}
.wv-dikte__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 10px 4px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	text-align: center;
	line-height: 1.25;
	color: #171717;
	text-decoration: none;
	transition: border-color .15s ease;
	background: #fff;
}
a.wv-dikte__item:hover {
	border-color: #0F52BA;
}
.wv-dikte__item.is-active {
	border-color: #0F52BA;
	box-shadow: inset 0 0 0 1px #0F52BA;
	background: #EEF3FB;
}
.wv-dikte__mm {
	font-size: 15px;
	font-weight: 500;
}
.wv-dikte__waarde {
	margin-top: 2px;
	font-size: 12px;
	color: #6B7280;
	font-weight: 400;
}
/* Uitverkochte dikte in de kleuren van de foutmelding. */
.wv-dikte__item.is-uitverkocht {
	background: #fef2f2;
	border-color: #fecaca;
}
.wv-dikte__item.is-uitverkocht .wv-dikte__mm {
	color: #e84b3d;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}
.wv-dikte__item.is-uitverkocht .wv-dikte__waarde {
	color: #e84b3d;
}
/* Mobiel: formaat twee naast elkaar, dikte vier per rij. */
@media (max-width: 768px) {
	.wv-dikte__list {
		grid-template-columns: repeat(4, 1fr);
		gap: 6px;
	}
	.wv-dikte--formaat .wv-dikte__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.wv-dikte__item {
		padding: 8px 2px;
		white-space: nowrap;
	}
	.wv-dikte__mm {
		font-size: 13px;
	}
	.wv-dikte__waarde {
		font-size: 11px;
	}
}

/* ============================================================
   WIJDEVEN — OP AANVRAAG (in plaats van het bestelformulier)
   ============================================================ */
.wv-config__aanvraag-text {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.5;
	color: #4b5563;
}
/* Zelfde maat en kleur als "In winkelwagen", zodat de pagina hetzelfde aanvoelt. */
.wv-config__aanvraag-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: 6px;
	background: #0F52BA;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s;
}
.wv-config__aanvraag-btn:hover {
	background: #115FD7;
	color: #fff;
}

/* ============================================================
   WIJDEVEN — USP LIJST (onder configurator)
   ============================================================ */
/* Betaallogo's tussen de configurator en de USP's: gelijk verdeeld over de volle
   kaartbreedte, eerste en laatste logo gelijk met de kaartranden. Alle logo's even
   hoog; de breedte volgt het bestand (de Mollie-logo's zijn iets smaller). */
.wv-betaallogos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	row-gap: 8px;
	margin-top: 24px;
	padding: 0 32px;
}
.wv-betaallogos__logo {
	display: block;
	width: auto;
	height: 28px;
}
/* Witte tegels: de grijze lijn uit het bestand is vervangen door een echte 1px-rand
   binnen dezelfde 32px, zodat alle tegels even hoog blijven. */
.wv-betaallogos__logo--rand {
	box-sizing: border-box;
	border: 1px solid #E5E7EB;
	border-radius: 5px;
}
/* Mobiel: op ware grootte (24px hoog), zodat acht logo's naast elkaar passen. */
@media (max-width: 768px) {
	.wv-betaallogos__logo {
		height: 24px;
	}
	.wv-betaallogos__logo--rand {
		border-radius: 4px;
	}
}

/* ============================================================
   WIJDEVEN — TAB-INHOUD (bodytekst van productinformatie/specificaties)
   ============================================================ */
.wv-product-info__body {
	line-height: 1.6;
	color: #171717;
}
.wv-product-info__body > *:last-child {
	margin-bottom: 0;
}
b,
strong {
	color: #171717;
	font-weight: 600;
}

/* Productspecificaties-tabel — zebra rows: oneven rijen gearceerd (#F3F4F6),
   even rijen wit, met een dunne scheidingslijn boven elke rij. Hoeken zijn plat.
   border-collapse: separate + border-spacing: 0 houdt de celranden enkel. */
.wv-product-info__body .woocommerce-product-attributes {
	width: 100%;
	border-bottom: 0px solid #e4e4e4;
	border-collapse: separate;
	border-spacing: 0;
}
.wv-product-info__body .woocommerce-product-attributes th,
.wv-product-info__body .woocommerce-product-attributes td {
	border-bottom: 1px solid #e4e4e4;
	padding: 8px 14px;
	text-align: left;
	font-size: 15px;
}
.wv-product-info__body .woocommerce-product-attributes th {
	font-weight: 600;
	color: #171717;
}
.wv-product-info__body .woocommerce-product-attributes td {
	font-weight: 400;
	color: #171717;
}
.wv-product-info__body .woocommerce-product-attributes tr:nth-child(odd) th,
.wv-product-info__body .woocommerce-product-attributes tr:nth-child(odd) td {
	background: #fff;
}
.wv-product-info__body .woocommerce-product-attributes tr:nth-child(even) th,
.wv-product-info__body .woocommerce-product-attributes tr:nth-child(even) td {
	background: #f8f8f8;
}

/* ============================================================
   WIJDEVEN — PRODUCT CONFIGURATOR
   ============================================================ */

.wv-config-wrap {
	margin-top: 32px;
}

.wv-config {
	position: relative;
	z-index: 1;
	/* TIJDELIJK uit: kader, vlak en padding rond de configurator. Terugzetten of weghalen
	   zodra de keuze definitief is. */
	display: flex;
	flex-direction: column;
	gap: 32px;
}
/* Linksboven blijft vlak zolang de linker tab (Zakelijk) erin smelt; staat
   de rechter tab (Particulier) actief, dan hoort die hoek weer afgerond. */
.wv-config-wrap:has(input[name="wv_btw"][value="incl"]:checked) .wv-config {
	border-top-left-radius: 8px;
}

.wv-config__btw-suffix {
	color: #777;
	font-weight: 400;
}

.wv-config__modus {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wv-config__radio {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	width: 100%;
	height: 56px;
	padding: 0 11px 0 16px;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	font-size: 15px;
	box-sizing: border-box;
	transition: border-color .15s;
	background: #fff;
}
.wv-config__radio:hover { border-color: #0F52BA; }
.wv-config__radio:has(input:checked) {
	border-color: #0F52BA;
	box-shadow: inset 0 0 0 1px #0F52BA;
	background: #EEF3FB;
}
/* Zelfde radio-bolletje als op de afrekenpagina (factuuradres-/verzendkeuze). */
.wv-config__radio input {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	margin: 0;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid #b5b5b5;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}
.wv-config__radio input:checked {
	border-color: #0F52BA;
}
.wv-config__radio input:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #0F52BA;
	transform: translate(-50%, -50%);
}
/* Storefront legt bij elke input:focus een 2px outline in de accentkleur; om het bolletje
   oogt dat als een extra dikke rand na een muisklik. Alleen bij toetsenbordfocus tonen. */
.wv-config__radio input:focus {
	outline: none;
}
.wv-config__radio input:focus-visible {
	outline: 2px solid #0F52BA;
	outline-offset: 2px;
}
.wv-config__radio > span {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-weight: 500;
	color: #171717;
}
.wv-config__radio small {
	color: #6b7280;
	font-size: 15px;
	font-weight: 400;
}
.wv-config__korting {
	margin-left: auto;
	align-self: center;
	background: #e84b3d;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 3px 12px;
	border-radius: 999px;
	letter-spacing: 0;
	margin-top: -52px;
}

/* Vloeiende in-/uitklap van de per-m² sectie. grid-template-rows 1fr↔0fr is de
   moderne CSS-standaard hiervoor: animeert naar de echte content-hoogte zonder
   magic numbers. De negatieve margin bij collapse heft één kant van de
   flex-gap van .wv-config op zodat er geen dubbele tussenruimte ontstaat. */
.wv-config__collapse {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .28s ease, opacity .2s ease, margin-top .28s ease;
}
.wv-config__collapse.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
	margin-top: -16px;
}
.wv-config__collapse-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.wv-config__opp-wrap {
	position: relative;
	display: inline-block;
}
.wv-config__opp-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #6b7280;
	pointer-events: none;
}
.wv-config__opp-input {
	border: 1px solid #d4d4d4 !important;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	text-align: right;
	font-family: inherit;
	margin: 0;
}
.wv-config__opp-input:focus {
	outline: none;
	border-color: #0F52BA !important;
}

.wv-config__form {
	margin: 0;
}
/* Storefront geeft form.cart op productpagina's een vaste onderruimte;
   onze configurator zit al binnen .wv-config met eigen padding, dus weg ermee.
   Flex-rij zodat qty + add-to-cart op simpele producten gelijk uitlijnen. */
.single-product div.product form.cart {
	padding: 0px 0 0;
	margin-bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}
.single-product div.product form.cart .quantity {
	float: none;
	margin: 0;
}
/* Configurator gebruikt óók een form.cart maar heeft een eigen block-layout
   (collapse-blok + volledige-breedte knop onder elkaar). De flex-regel van
   simple-producten mag daar dus niet gelden. */
.single-product div.product .wv-config-wrap form.cart {
	display: block;
}
/* Label van het aantalveld links, voorraadstatus rechts op dezelfde regel. */
/* align-items: center, niet baseline: de voorraadregel is zelf een flexrij die met het
   bolletje begint, en een blokje zonder tekst levert zijn onderrand als basislijn — dat
   verschoof de tekst 2px. Beide helften zijn even hoog, dus centreren lijnt ze exact uit. */
.wv-configb__labelrij {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
/* Voorraadregel links boven de configurator; 32px tot het aantalveld (valt samen met de
   bovenmarge van de configurator). */
.wv-product-page__summary > .wv-stock {
	display: flex;
	margin: 0 0 32px;
	line-height: 1.4;
}
/* Storefront geeft form.cart een ::before/::after clearfix die in een flex
   container een leeg flex-item wordt — de gap:12px zit dan tussen die ghost
   en .quantity, wat een 12px gat aan de linkerkant geeft. Verbergen. */
.single-product div.product form.cart::before,
.single-product div.product form.cart::after {
	display: none;
}
.wv-config__qty {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #c6c6c6;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}
.wv-config__qty-btn {
	width: 48px;
	height: 48px;
	border: 0;
	background: none;
	color: #171717;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wv-config__qty-btn:hover { background: #f4f4f4; }
.wv-config__qty-btn svg {
	display: block;
}
.wv-config__qty-input {
	width: 48px;
	height: 48px;
	background: #fff;
	font-size: 16px;
	text-align: center;
	font-family: inherit;
	margin: 0;
	/* Firefox: geen pijltjes in het getalveld (Chrome kent deze eigenschap niet en
	   streept hem in DevTools door; daar doen de ::-webkit-regels hieronder het werk). */
	-moz-appearance: textfield;
}
.wv-config__qty-input::-webkit-outer-spin-button,
.wv-config__qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Selector bevat .button.alt zodat hij de globale WooCommerce .button.alt
   kleurregel (style.css) qua specificiteit verslaat. */
.wv-config__cta.button.alt {
	flex: 1 1 auto;
	background: #FF7518;
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 0 24px;
	height: 52px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s;
}
.wv-config__cta.button.alt:hover {
	background: #e8650f;
	color: #fff;
}

/* ============================================================
   SIMPELE PRODUCTPAGINA — QTY-STEPPER + ADD-TO-CART
   Visueel identiek aan de configurator: .quantity is de bordered
   wrapper (zoals .wv-config__qty), .wv-qty-step zijn de ± knoppen
   (zoals .wv-config__qty-btn), de .qty input heeft alleen
   zij-borders (zoals .wv-config__qty-input). De ± knoppen worden
   PHP-side gerenderd via woocommerce_before/after_quantity_input_field.
   ============================================================ */
.single-product div.product form.cart .quantity {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #b4b8b5;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
}
/* Bewust geen font-weight/color/padding override hier: Storefront's
   `input[type="number"]` regel (specificiteit 0,0,1,1) wint van
   `.wv-config__qty-input` (0,0,1,0) op de configurator, dus het cijfer rendert
   daar in 16/400 #43454b + 0.618em padding. Spiegelen we hier 1-op-1. */
.single-product div.product form.cart .quantity .qty {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	font-family: inherit;
	font-size: 16px;
	text-align: center;
	margin: 0;
	box-sizing: border-box;
	-moz-appearance: textfield;
	appearance: textfield;
}
.single-product div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.single-product div.product form.cart .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.single-product div.product form.cart .wv-qty-step {
	width: 48px;
	height: 48px;
	border: 0;
	background: transparent;
	color: #171717;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.single-product div.product form.cart .wv-qty-step:hover {
	background: #f5f5f7;
}
.single-product div.product form.cart .wv-qty-step svg {
	display: block;
}

/* Simpele cart als card — exact dezelfde opbouw en styling als de configurator:
   "Aantal" label, rekenrij (qty-stepper links, live totaal rechts) en daaronder
   een volle-breedte knop. Card-look (schaduw/padding/radius) overgenomen van
   .wv-config. Overschrijft de flex-rij van de generieke form.cart-regel. */
.single-product div.product form.cart.wv-simple-cart {
	display: block;
	background: #fff;
	border: 0;
	border-radius: 8px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	padding: 32px;
	margin: 24px 0 0;
}
.wv-simple-cart .wv-configb__label {
	margin-bottom: 16px;
}
.wv-simple-cart .single_add_to_cart_button.button.alt {
	width: 100%;
	margin-top: 24px;
}

.single-product div.product form.cart .single_add_to_cart_button.button.alt {
	flex: 0 0 auto;
	background: #0F52BA;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 0 32px;
	height: 54px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s;
}
.single-product div.product form.cart .single_add_to_cart_button.button.alt:hover {
	background: #115FD7;
	color: #fff;
}
.single-product div.product form.cart .single_add_to_cart_button.button.alt:disabled,
.single-product div.product form.cart .single_add_to_cart_button.button.alt:disabled:hover {
	background: #0F52BA;
	opacity: .45;
	cursor: not-allowed;
}

/* Restpartij: melding boven de knop wanneer meer m² is ingevuld dan op voorraad.
   Lucide "triangle-alert"-icoon links via ::before (geen markup nodig). */
.wv-config__max-msg,
.wv-config__error {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
	padding: 10px 14px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 400;
	color: #c33;
	text-align: center;
}
/* De foutmelding kan over twee regels lopen; daar leest links uitgelijnd beter,
   met wat meer ruimte tussen icoon en tekst. De rest deelt hij hierboven. */
.wv-config__error {
	gap: 12px;
	padding: 12px 16px;
	text-align: left;
}
/* display:flex zou de [hidden]-UA-regel verslaan — expliciet verbergen. */
.wv-config__max-msg[hidden],
.wv-config__pallet-tip[hidden] {
	display: none;
}
/* Pallet-tip bij pakketten: zelfde vorm als de voorraadmelding, maar neutraal (informatie,
   geen fout) met een vrachtwagen ervoor. */
.wv-config__pallet-tip {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	padding: 12px 16px;
	background: rgba(23, 23, 23, 0.05);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
	color: #374151;
}
.wv-config__pallet-tip .wv-icoon--ms {
	flex-shrink: 0;
	font-size: 22px;
	color: #0F52BA;
}
.wv-config__max-msg::before,
.wv-config__error::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ============================================================
   WIJDEVEN — CONFIGURATOR LAYOUT B (compact)
   ============================================================ */
/* Label boven de rekenrij ("Aantal platen"). */
.wv-configb__label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #171717;
	margin-bottom: 0px;
	line-height: 1;
}
/* Eén compacte rekenrij: stepper/veld — m² — totaalprijs rechts. Geldt voor de
   configurator én de simpele cart-card, zodat de rij daar identiek
   is (stepper links, totaal rechts). */
.wv-config-wrap--b .wv-configb__calc,
.wv-simple-cart .wv-configb__calc {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.wv-configb__eq {
	color: #6b7280;
	font-size: 16px;
}
.wv-configb__m2 {
	font-size: 16px;
	font-weight: 400;
	color: #171717;
}
/* Subsidie-badge in de samenvatting: gewoon in de tekststroom onder de prijsregel. */
.wv-product-page__summary .wv-badge-subsidie {
	position: static;
	margin: 0 0 24px;
	pointer-events: auto;
}
/* Per pakket: het aantal platen achter de m² ("(18 platen)"). */
.wv-configb__platen {
	font-size: 16px;
	color: #6b7280;
}
.wv-configb__field {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wv-configb__field .wv-config__opp-input {
	width: 144px;
	/* Zelfde maat als de knoppen van de stepper bij plaat- en pakketproducten. */
	height: 48px;
	box-sizing: border-box;
}
.wv-configb__unit {
	font-size: 16px;
	color: #171717;
	font-weight: 400;
}
.wv-configb__total {
	margin-left: auto;
	text-align: right;
	line-height: 1;
}
/* Suffix ("excl./incl. BTW") boven de prijs binnen .wv-configb__total —
   geldt zowel voor de configurator als de simpele cart-card. */
.wv-config-wrap--b .wv-config__btw-suffix,
.wv-configb__total .wv-config__btw-suffix {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
}
.wv-configb__price {
	font-size: 24px;
	font-weight: 600;
	color: #171717;
	letter-spacing: 0;
}
.wv-config-wrap--b .wv-config__cta {
	width: 100%;
	margin-top: 24px;
}

/* ============================================================
   WIJDEVEN — LAYOUT C (galerij + secties links, sticky configurator rechts)
   ============================================================ */
/* Full-bleed: de zone breekt uit Storefront's .col-full naar de volledige
   viewportbreedte; overflow-x: clip op body (style.css) vangt de scrollbar-
   breedte op. De inhoud staat via .wv-layout-c__inner weer op containerbreedte. */
.wv-layout-c__zone {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #fff;
	padding-bottom: 72px;
}
.wv-layout-c__inner {
	max-width: var(--wv-container-max);
	margin: 0 auto;
	padding: 0 var(--wv-container-pad);
	box-sizing: border-box;
}
/* Twee kolommen: galerij (rij 1) en secties (rij 2) links, de configurator rechts
   over beide rijen. Doordat de rechterkolom de volle hoogte van het grid beslaat,
   kan hij sticky meescrollen tot de secties links op zijn. */
.wv-layout-c__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 64px;
	row-gap: 64px;
	align-items: start;
}
/* Grid-items mogen niet breder worden dan hun kolom: de (scrollbare) tabbalk en de
   specificatietabel hebben een min-content breder dan de mobiele kolom en rekten anders
   de hele kolom op, waardoor de pagina rechts werd afgesneden. */
.wv-layout-c__grid > * {
	min-width: 0;
}
.wv-product-page__gallery {
	grid-column: 1;
	grid-row: 1;
	/* De badge (Aanbieding, Nieuw) hangt hier absoluut in; zonder positie op de galerij
	   zocht hij het eerstvolgende gepositioneerde element en belandde naast de foto. */
	position: relative;
}
.wv-layout-c__content {
	grid-column: 1;
	grid-row: 2;
}
/* Rechterkolom: configurator-vlak + betaallogo's + infoblok, als geheel sticky. */
.wv-product-page__kolom {
	grid-column: 2;
	grid-row: 1 / span 2;
	position: sticky;
	top: 24px;
	align-self: start;
}
/* Het configurator-vlak. */
.wv-layout-c .wv-product-page__summary {
	padding: 32px;
	background: #f8f8f8;
	border-radius: 8px;
}
/* Ingelogd: onder de vaste admin-balk van WordPress blijven. */
.admin-bar .wv-product-page__kolom {
	top: 56px;
}
/* Is de rechterkolom (vlak + infoblok) hoger dan het scherm, dan zet configurator.js de
   top negatief: de kolom scrolt dan mee tot zijn onderkant in beeld is en plakt daar,
   zodat ook de laatste vraag bereikbaar blijft. */

/* Voordelen en infoblok onder het vlak, elk 32px uit het vorige. */
.wv-product-page__onder .wv-voordelen {
	margin-top: 32px;
}
.wv-product-page__onder .wv-info-block {
	margin-top: 32px;
	padding-top: 0px;
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
}

/* Galerij: hoofdafbeelding op de volle kolombreedte, miniaturen als rij eronder.
   Zo is de hoofdafbeelding altijd even groot, met of zonder miniaturen. */
.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-viewport {
	width: 100%;
	margin-bottom: 8px;
}
/* Eén afbeelding: WooCommerce zet FlexSlider dan uit, dus de wrapper heeft geen
   .flex-viewport die de breedte regelt. */
.single-product div.product.wv-layout-c .woocommerce-product-gallery__wrapper {
	margin: 0;
	width: 100%;
}
/* Mobiel: de hoofdafbeelding beeldvullend, van rand tot rand van het scherm (door de
   zijmarge heen). De miniaturen eronder blijven binnen de marge; de badge schuift mee
   zodat hij 12px van de afbeeldingsrand blijft. */
@media (max-width: 768px) {
	.single-product div.product.wv-layout-c .woocommerce-product-gallery {
		overflow: visible;
	}
	.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-viewport,
	.single-product div.product.wv-layout-c .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
		width: calc(100% + 2 * var(--wv-container-pad));
		margin-left: calc(-1 * var(--wv-container-pad));
		margin-right: calc(-1 * var(--wv-container-pad));
	}
	/* Beeldvullend zonder ronde hoeken: het schuifvenster, de afbeelding en de placeholder. */
	.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-viewport,
	.single-product div.product.wv-layout-c .woocommerce-product-gallery__image .wp-post-image,
	.single-product div.product.wv-layout-c .woocommerce-product-gallery__image--placeholder .wv-placeholder {
		border-radius: 0;
	}
	.single-product div.product.wv-layout-c .wv-product-page__gallery .wv-badge-wrap {
		left: calc(12px - var(--wv-container-pad));
	}
	/* Miniaturen op 8px van de schermrand, dus iets door de zijmarge heen, in vier kolommen
	   die meeschalen met de breedte. */
	.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-control-thumbs {
		width: calc(100% + 2 * (var(--wv-container-pad) - 8px));
		margin-left: calc(8px - var(--wv-container-pad));
		margin-right: calc(8px - var(--wv-container-pad));
	}
	.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-control-thumbs li {
		width: calc((100% - 3 * 12px) / 4) !important;
	}
}
/* Zonder afbeelding: de zoomknop hoort bij de placeholder, niet bij de galerij eromheen. */
.woocommerce-product-gallery__image--placeholder {
	position: relative;
}
/* Geen verspringen tijdens het laden. Vóór FlexSlider start staan alle afbeeldingen
   op volle breedte onder elkaar (Storefront laadt WC's basisstijlen niet): alleen de
   eerste tonen en de hoogte van de miniaturenrij (72px + 16px) alvast reserveren. */
.single-product div.product.wv-layout-c .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image:not(:first-child) {
	display: none;
}
.single-product div.product.wv-layout-c .woocommerce-product-gallery:not(:has(.flex-viewport)):has(.woocommerce-product-gallery__image:nth-child(2)) {
	padding-bottom: 88px;
}
/* Bij de start maakt FlexSlider de wrapper 200% per afbeelding breed en zet pas 100 ms
   later de breedte per slide; tot die tijd vult elke slide de hele wrapper en is de
   afbeelding dus 4× zo groot. Slides meteen naast elkaar op viewportbreedte zetten
   (cqw = breedte van .flex-viewport), precies wat FlexSlider daarna zelf inline zet. */
.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-viewport {
	container-type: inline-size;
}
.single-product div.product.wv-layout-c .woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
	float: left;
	width: 100cqw;
}

/* ============================================================
   PROEF (21 sept 2026): productafbeelding 1:1 en miniaturen naast het beeld (nu rechts).
   Alles staat in dit ene blok, dus terugdraaien = dit blok weghalen. Geldt alleen
   op desktop; onder 768px blijft de bestaande opmaak (beeldvullend, miniaturen eronder).
   ============================================================ */
@media (min-width: 769px) {
	/* Beeldvlak vierkant in plaats van 4:3, ook voor de miniaturen. */
	.single-product .woocommerce-product-gallery__image img,
	.single-product .woocommerce-product-gallery__image .wp-post-image,
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
		aspect-ratio: 1 / 1;
	}
	/* Galerij als rooster: kolom 1 het beeld, kolom 2 de miniaturen (96px), dus miniaturen
	   rechts van het beeld. De badges linksboven blijven op hun plek in het beeld. */
	.single-product div.product .woocommerce-product-gallery:has(.flex-control-thumbs) {
		display: grid;
		grid-template-columns: 1fr 96px;
		column-gap: 12px;
		align-items: start;
	}
	.single-product div.product .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-viewport {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}
	.single-product div.product .woocommerce-product-gallery:has(.flex-control-thumbs) .flex-control-thumbs {
		grid-column: 2;
		grid-row: 1;
		flex-direction: column;
		width: 96px;
	}
	/* Eén foto (geen slider, zie configurator.js): het beeld staat dan direct in de wrapper. */
	.single-product div.product .woocommerce-product-gallery:has(.flex-control-thumbs) > .woocommerce-product-gallery__wrapper {
		grid-column: 1;
		grid-row: 1;
	}
}
/* De losse miniatuur bij één foto valt niets mee te kiezen: geen handje, en op mobiel weg
   (daar vult de foto de breedte toch al en staan miniaturen eronder). */
.single-product div.product .woocommerce-product-gallery .wv-thumbs-enkel img {
	cursor: default;
}
@media (max-width: 768px) {
	.single-product div.product .woocommerce-product-gallery .flex-control-thumbs.wv-thumbs-enkel {
		display: none;
	}
}

/* Secties onder de galerij (productinformatie, specificaties, vaak samen gekocht),
   met 40px ruimte ertussen en geen lijnen; de rij-afstand van het grid is de
   ruimte tot de galerij. */
.wv-tabs__section {
	max-width: 800px;
	scroll-margin-top: 24px;
}
.wv-tabs__section + .wv-tabs__section {
	margin-top: 40px;
	padding-top: 0px;
	border-top: 0px solid #e4e4e4;
}

/* Kaarten "Vaak samen gekocht". */
.wv-upsell__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.wv-upsell-card {
	display: flex;
	gap: 16px;
	align-items: center;
	padding: 14px;
	border: 1px solid #e4e4e4;
	border-radius: 8px;
	transition: border-color .15s ease;
}
.wv-upsell-card:hover {
	border-color: #0F52BA;
}
/* Niet op voorraad: gedempt zoals de productkaart in de winkel, bij mouseover weer volledig. */
.wv-upsell-card--uitverkocht {
	opacity: .6;
	transition: border-color .15s ease, opacity .15s ease;
}
.wv-upsell-card--uitverkocht:hover {
	opacity: 1;
}
/* Link met foto en tekst; de acties (aantal + knop) staan er rechts naast, buiten de link. */
.wv-upsell-card__link {
	display: flex;
	gap: 16px;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.wv-upsell-card__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
}
/* Smal: passen naam en acties niet naast elkaar, dan zakken de acties naar een eigen regel
   (rechts uitgelijnd). Zonder dit rekt de kaart de hele productkolom breder dan het scherm. */
@media (max-width: 640px) {
	.wv-upsell-card {
		flex-wrap: wrap;
	}
	.wv-upsell-card__name {
		overflow-wrap: anywhere;
	}
}
/* Aantalkiezer: dezelfde als in de winkelwagen-lade (cart-drawer.css). */
.wv-upsell-card__qty {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #D4d4d4;
	border-radius: 4px;
	overflow: hidden;
	flex-shrink: 0;
}
.wv-upsell-card__qty-btn {
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: #171717;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wv-upsell-card__qty-btn:hover { background: #f5f5f7; }
.wv-upsell-card__qty-btn svg {
	display: block;
}
.wv-upsell-card__qty-value {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: #171717;
}
/* Vierkante blauwe knop met het trolley-icoon, even hoog als de aantalkiezer. */
.wv-upsell-card__add {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #0F52BA;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
/* Alleen bij muis-over of toetsenbordfocus; na een klik houdt de knop focus en
   zou hij anders blauw-licht blijven. */
.wv-upsell-card__add:hover,
.wv-upsell-card__add:focus-visible {
	background: #115FD7;
	color: #fff;
}
.wv-upsell-card__add .material-symbols-outlined {
	font-size: 22px;
	line-height: 1;
	font-weight: 300;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.wv-upsell-card__img {
	width: 128px;
	height: 96px;
	flex-shrink: 0;
}
.wv-upsell-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}
.wv-upsell-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wv-upsell-card__name {
	font-size: 18px;
	font-weight: 600;
	color: #171717;
}
.wv-upsell-card .wv-stock,
.wv-upsell-card .wv-stock__label {
	font-size: 14px;
	font-weight: 500;
}
/* Prijs gelijk aan de productkaart (archive.css): 20px vet, eenheid klein en licht. */
.wv-upsell-card__price {
	font-size: 18px;
	font-weight: 600;
	color: #171717;
	letter-spacing: -0.3px;
}
.wv-upsell-card__unit {
	font-size: 14px;
	font-weight: 400;
	color: #171717;
	letter-spacing: 0;
}
.wv-upsell-card__price del {
	margin-right: 0;
	font-weight: 600;
	font-size: 16px;
	text-decoration-thickness: 2px;
	text-decoration-color: #e84b3d;
}

/* Mobiel: alles onder elkaar — galerij, configurator, secties — en niets sticky. */
@media (max-width: 768px) {
	.wv-layout-c__grid {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}
	.wv-gallery-zoom {
		right: 8px;
		bottom: 8px;
	}
	/* Configurator compacter. (De padding staat tijdelijk uit, zie .wv-config hierboven.) */
	.wv-config__collapse-inner {
		gap: 10px;
	}
	.wv-dikte {
		margin-bottom: 10px;
	}
	.wv-dikte__list {
		margin-top: 10px;
	}
	.wv-dikte__mm {
		font-size: 14px;
	}
	.wv-betaallogos {
		margin-top: 20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.wv-product-page__kolom {
		grid-column: 1;
		grid-row: 2;
		position: static;
	}
	.wv-layout-c__content {
		grid-row: 3;
	}
	.wv-layout-c__zone {
		padding-bottom: 48px;
	}
	.wv-product-page__onder .wv-info-block {
		margin-bottom: 10px;
	}
}


/* ============================================================
   STICKY ADD-TO-CART — thumbnail-placeholder klein houden.
   De sticky balk toont een productthumbnail; bij een product zonder afbeelding
   valt die terug op onze SVG-placeholder (<span class="wv-placeholder"> met
   width:100% + aspect-ratio 1/1). Als flex-item zonder vaste breedte groeit die
   naar volle breedte en maakt de balk metershoog. Hier vast op thumbnail-formaat.
   ============================================================ */
.storefront-sticky-add-to-cart .wv-placeholder {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	aspect-ratio: auto;
	margin-right: 16px;
	border-radius: 4px;
}

/* ============================================================
   INFOBLOK — uitklapbare regels onder de configurator (ACF-veld wv_faq). Geen
   vragenlijst maar USP's met uitleg; daarom eigen klassen (wv-info__*), los van het
   FAQ-blok op pagina's (wv-faq__* in blocks.css). Zelfde markup via
   wv_render_faq_accordion( $items, 'wv-info' ).
   ============================================================ */
.wv-info__vraag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	margin-bottom: 0px;
	background: none;
	border-radius: 0px;
	list-style: none;
	font-size: 15px;
	font-weight: 400;
}
/* Alleen een scheidingslijn tússen de vragen, dus niet onder de laatste. */
.wv-info__item + .wv-info__item .wv-info__vraag {
	border-top: 1px solid #e4e4e4;
}
/* Standaard driehoekje van <summary> weg (beide browser-varianten). */
.wv-info__vraag::-webkit-details-marker { display: none; }
.wv-info__vraag::marker { content: ""; }
.wv-info__vraag-text { flex: 1; }
/* Vraag met gekozen icoon: icoon vóór de vraag; zonder icoon blijft de vraag
   gewone tekst. */
/* Flexrij: elk stuk tekst wordt een eigen item, dus de gap valt ook tussen een </strong>
   en het woord erna. 8px daar; het icoon krijgt geen extra marge meer. */
.wv-info__vraag-text--icoon {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #374151;
}
.wv-info__vraag-text--icoon .wv-info__vraag-icon {
	margin-right: 0px;
}
.wv-info__vraag b,
.wv-info__vraag strong {
	font-weight: 600;
}
.wv-info__vraag-icon {
	flex-shrink: 0;
	color: #0F52BA;
}
/* Google Material Symbol; twee klassen zodat de maat wint van Googles eigen
   .material-symbols-outlined (24px). */
.wv-info__vraag-text .wv-info__vraag-icon--ms {
	font-size: 20px;
	font-weight: 700;
	font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24;
}
.wv-info__icon {
	flex-shrink: 0;
	color: #171717;
}
/* Voordelenblok onder de configurator: drie kolommen, icoon gecentreerd boven maximaal
   twee regels tekst, met een lijn tussen de kolommen. Ook op mobiel drie naast elkaar. */
.wv-voordelen__lijst {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.wv-voordelen__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 0 12px;
	text-align: center;
}
.wv-voordelen__item + .wv-voordelen__item {
	border-left: 1px solid #e4e4e4;
}
.wv-voordelen__icoon {
	display: flex;
	color: #0F52BA;
}
.wv-voordelen__icoon svg {
	width: 28px;
	height: 28px;
}
.wv-voordelen__icoon .wv-voordelen__vraag-icon--ms {
	font-size: 28px;
	font-weight: 300;
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
/* Tekst maximaal twee regels (zelf af te breken met <br>). */
.wv-voordelen__tekst {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.4;
	color: #171717;
}
/* Plus wordt min: de verticale streep draait weg en vervaagt. */
.wv-info__icon-v {
	transform-origin: center;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.wv-info__item[open] .wv-info__icon-v {
	transform: rotate(90deg);
	opacity: 0;
}
.wv-info__antwoord {
	padding: 0 24px 24px 0;
	font-size: 15px;
	line-height: 1.6;
	color: #777;
}
.wv-info__antwoord p { margin: 0 0 12px; }
.wv-info__antwoord p:last-child { margin-bottom: 0; }
.wv-info__antwoord ul { margin: 0 0 12px; padding-left: 20px; }
.wv-info__antwoord li { margin-bottom: 4px; }
.wv-info__antwoord a { color: #0F52BA; text-decoration: underline; }

/* ============================================================
   VOORDELEN / NADELEN — één lijst onder de productomschrijving. Geen kopjes en
   geen kolommen: het groene vinkje of rode kruisje zegt wat het punt is, en de
   volgorde volgt het veld, zodat voor- en nadelen door elkaar mogen staan.
   ============================================================ */
.wv-proscons {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wv-proscons__item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 16px;
	line-height: 1.6;
	color: #4b5563;
}
/* Hoogte gelijk aan de line-height van het item, zodat het icoon midden op de eerste
   tekstregel staat — ook als de tekst doorloopt. */
.wv-proscons__icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	width: 20px;
	height: 1.6em;
	font-size: 24px;
	font-weight: 500;
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.wv-proscons__item--pro .wv-proscons__icon { color: #00A66A; }
.wv-proscons__item--con .wv-proscons__icon { color: #c33; }

/* ============================================================
   OFFERTE-VENSTER — knop onder "In winkelwagen" + venster met het CF7-formulier.
   Markup: wv_render_offerte_knop() (functions.php), gedrag: offerte.js.
   ============================================================ */
.wv-offerte-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	margin-top: 12px;
	padding: 0 24px;
	background: #fff;
	border: 1px solid #0F52BA;
	border-radius: 4px;
	color: #0F52BA;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wv-offerte-btn:hover,
.wv-offerte-btn:focus {
	background: #EEF3FB;
	color: #0F52BA;
	border: 1px solid #0F52BA;
}

/* Venster: zelfde donkere overlay en overgang als de winkelwagen-lade. */
.wv-offerte {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.wv-offerte[hidden] {
	display: none;
}
.wv-offerte__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, .45);
	opacity: 0;
	transition: opacity .25s ease;
}
.wv-offerte.is-open .wv-offerte__overlay {
	opacity: 1;
}
.wv-offerte__paneel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 620px;
	max-height: 100%;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.wv-offerte.is-open .wv-offerte__paneel {
	opacity: 1;
	transform: none;
}
.wv-offerte__paneel:focus {
	outline: none;
}
.wv-offerte__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-shrink: 0;
	padding: 20px 24px;
	border-bottom: 1px solid #e4e4e4;
}
.wv-offerte__titel {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: #171717;
}
.wv-offerte__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: #171717;
	cursor: pointer;
}
.wv-offerte__sluit:hover,
.wv-offerte__sluit:focus {
	background: none;
	color: #171717;
}
.wv-offerte__sluit .material-symbols-outlined {
	display: block;
	font-size: 24px;
	font-weight: 400;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.wv-offerte__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 24px;
}
.wv-offerte__intro {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: #4b5563;
}
/* Het product waar de aanvraag over gaat, ingevuld door offerte.js. */
.wv-offerte-form__product {
	margin-bottom: 20px;
	padding: 12px 16px;
	background: #f4f4f4;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #171717;
}
.wv-offerte-form__product:empty {
	display: none;
}
/* Velden in dezelfde stijl als de checkout. */
.wv-offerte-form .wv-form-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}
.wv-offerte-form .wv-form-row > p {
	flex: 1 1 200px;
	min-width: 0;
}
.wv-offerte-form p {
	margin: 0 0 14px;
}
.wv-offerte-form label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #171717;
}
.wv-offerte-form input[type="text"],
.wv-offerte-form input[type="email"],
.wv-offerte-form input[type="tel"],
.wv-offerte-form input[type="number"],
.wv-offerte-form textarea {
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	padding: 0 12px;
	height: 48px;
	background: #fff;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	color: #171717;
}
.wv-offerte-form textarea {
	height: auto;
	padding: 12px;
	line-height: 1.5;
}
.wv-offerte-form input:focus,
.wv-offerte-form textarea:focus {
	border-color: #0F52BA;
	box-shadow: inset 0 0 0 1px #0F52BA;
	outline: none;
	background: #fff;
}
.wv-offerte-form input[type="submit"] {
	width: 100%;
	height: 52px;
	margin-top: 4px;
	padding: 0 24px;
	background: #0F52BA;
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
}
.wv-offerte-form input[type="submit"]:hover {
	background: #115FD7;
	color: #fff;
}
/* Meldingen van CF7 in de huisstijl. */
.wv-offerte-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 13px;
	color: #c33;
}
.wv-offerte-form .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 12px 16px !important;
	border: 1px solid #e4e4e4 !important;
	border-radius: 6px;
	font-size: 15px;
	line-height: 1.5;
}
.wv-offerte-form form.sent .wpcf7-response-output {
	border-color: #00A66A !important;
	background: #f2fbf7;
	color: #171717;
}
.wv-offerte-form form.invalid .wpcf7-response-output,
.wv-offerte-form form.failed .wpcf7-response-output {
	border-color: #c33 !important;
	color: #c33;
}
/* Na een geslaagde aanvraag blijft alleen de bevestiging staan. */
.wv-offerte.is-verzonden .wv-offerte__intro,
.wv-offerte.is-verzonden .wv-offerte-form__product,
.wv-offerte.is-verzonden .wv-offerte-form form > *:not(.wpcf7-response-output) {
	display: none;
}
body.wv-offerte-open {
	overflow: hidden;
}
@media (max-width: 640px) {
	.wv-offerte {
		padding: 0;
		align-items: stretch;
	}
	.wv-offerte__paneel {
		max-width: none;
		border-radius: 0;
	}
	.wv-offerte__body {
		padding: 20px;
	}
}