/**
 * HIZ – productpagina. Eén bestand voor alles wat alleen op `/product/<slug>/` staat.
 *
 * Laadt ná woo.css en is sinds ronde 3 de énige plek voor productpagina-CSS: de galerij, de
 * kleurstalen, het variatieformulier, de maathulp, de koopknop, de vertrouwensrij, de
 * uitklappers, de canvas tas-upsell, de sticky koopbalk, de beoordelingen en de aanbevelingen.
 *
 * Ronde 5 (visuele standaard, `docs/agents/visuele-standaard.md`): alle maten, afstanden en
 * lettergroottes komen uit de tokens van V0. Er staan hier geen losse pixelwaarden meer,
 * behalve (a) de fallback in `var(--token, waarde)` zolang V0 nog niet gemerged is, (b) twee
 * componentconstanten die de standaard niet benoemt (`--hiz-koopbalk-hoogte`, `--hiz-swatch`)
 * en (c) 1px lijnen.
 *
 * Mobile-first: 375 px is de basis, breder bouwt op. De kolomwissel staat op 1024 px
 * (standaard: "tweekolomsopzet vanaf 1024 px"), niet meer op de 782 px van WordPress.
 *
 * Volgorde:
 *   0. Scrollmarges voor sticky header en koopbalk (WCAG 2.2 SC 2.4.11)
 *   1. Paginaraster: galerij 6/12, koopkolom 5/12 (sticky), verhaal en uitklappers onder de galerij
 *   2. Kruimelpad, titel, prijs en credit
 *   3. Galerij (spoor; telefoon: volgende foto half in beeld, tablet: twee naast elkaar,
 *      miniaturen vanaf 1024; pijlen, zoom)
 *   4. Kleur: vermelding, of dit ontwerp in andere kleuren
 *   5. Kleurstalen bij het variatieformulier
 *   6. Variatieformulier en maten
 *   7. Maathulp en maattabel
 *   8. Aantal, koopknop en koopwenk
 *   9. Zekerheden bij de koopknop
 *  10. Canvas tas-upsell
 *  11. Verhaal van het ontwerp en uitklappers
 *  12. Sticky koopbalk en schuiflade
 *  13. Aanbevelingen
 *  14. Beoordelingen
 *  15. Laat het me weten (uitverkochte maat)
 *  16. Beweging uit
 */

/* ------------------------------- 0. Scrollmarges (WCAG 2.2 SC 2.4.11) */

/*
 * Een element met toetsenbordfocus mag niet helemaal achter een vaste balk verdwijnen. Boven
 * staat de sticky header (56/64 px), onder – tot 1023 px – de sticky koopbalk. `scroll-padding`
 * is de voldoende techniek C43 uit WCAG 2.2: de browser scrollt een element met focus dan tot
 * buiten die randen. De koopbalk-marge geldt alleen zolang de balk er staat (product.js zet de
 * klasse). Productpagina-CSS, dus alleen hier; sitebreed hoort de bovenmarge in hiz.css.
 */
:root {
	--hiz-koopbalk-hoogte: 56px;

	scroll-padding-top: calc(var(--hiz-header-hoogte, 56px) + var(--hiz-space-2, 8px));
}

html.hiz-heeft-koopbalk {
	scroll-padding-bottom: calc(var(--hiz-koopbalk-hoogte) + var(--hiz-space-2, 8px));
}

/* Terwijl de schuiflade met de maatkeuze openstaat, scrolt de pagina erachter niet mee. */
html.hiz-koopsheet-open {
	overflow: hidden;
}

/* ------------------------------- 1. Paginaraster */

/*
 * Desktop: galerij 6/12 links, koopkolom 5/12 rechts, de resterende 1/12 is de tussenruimte
 * (`--hiz-space-8`). De uitklapreeks staat onder de galerij in de linkerkolom en niet onder de
 * koopkolom: alleen zo kan de koopkolom écht sticky zijn. Stond de uitklapreeks eronder in
 * dezelfde kolom, dan zou de meeschuivende koopkolom er overheen worden getekend. De motivering
 * staat in `docs/pr/r5-product.md`.
 *
 * Mobiel en tablet houden de DOM-volgorde aan: galerij → koopkolom → verhaal en uitklappers, met
 * zo weinig lucht tussen foto en titel dat prijs, kleur en maat op 375 × 812 in het eerste scherm
 * staan (vóór ronde "productpagina-2" begon de titel op 727 px en stond de prijs onder de
 * koopbalk). De foto blijft het eerste wat je ziet (Baymard: 56% begint bij de foto's), maar met
 * de volgende foto half in beeld in plaats van een rij stipjes eronder.
 */
/* Mobiel 16 px tussen foto en titel (vanaf 768 px 24): samen met de kleinere marges bij de
   prijsregel, de kleur en het maatlabel staat de matenrij zo op 375 × 812 boven de koopbalk. */
.hiz-product__hoofd {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-4, 16px);
	margin-block: var(--hiz-space-3, 12px) 0;
}

/*
 * Hotfix 1.0.1: in het raster zorgt `gap` voor de ruimte. De flow-layout van WordPress gaf de
 * koopkolom daarbovenop nog 16 px margin-top: op 390 px extra lucht boven de titel, op 1280 px
 * stond de titel 16 px lager dan de bovenkant van de foto.
 */
.hiz-product .hiz-product__hoofd > * {
	margin-block: 0;
}

/*
 * Hotfix 1.0.1: de hoofdinhoud eindigt met dezelfde sectieafstand als `.hiz-main` op de andere
 * sjablonen; "Bekijk heel <plaats>" stond 16 px boven de voet.
 */
.hiz-product {
	padding-bottom: var(--hiz-section-gap, clamp(48px, 7vw, 96px));
}

.hiz-product__koop > * {
	max-width: 100%;
}

@media (min-width: 768px) {
	.hiz-product__hoofd {
		gap: var(--hiz-space-5, 24px);
		margin-block-start: var(--hiz-space-5, 24px);
	}
}

@media (min-width: 1024px) {
	.hiz-product__hoofd {
		grid-template-columns: 6fr 5fr;
		column-gap: var(--hiz-space-8, 64px);
		row-gap: var(--hiz-space-7, 48px);
		align-items: start;
	}

	.hiz-product__media {
		grid-column: 1;
		grid-row: 1;
	}

	.hiz-product__info {
		grid-column: 1;
		grid-row: 2;
	}

	/*
	 * De koopkolom beslaat beide rijen en staat bovenaan uitgelijnd: zo is haar sticky-gebied
	 * net zo hoog als de linkerkolom en blijft de keuze in beeld terwijl de galerij en de
	 * uitklappers doorlopen. Top = headerhoogte + 24 px, zodat de vaste header hem niet afdekt.
	 */
	.hiz-product__koop {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: start;
		position: sticky;
		top: calc(var(--hiz-header-hoogte, 72px) + var(--hiz-space-5, 24px));
	}
}

/* ------------------------------- 2. Kruimelpad, titel, prijs en credit */

/* Het blok krijgt van theme.json `has-small-font-size` (14 px) mee; de standaard vraagt hier
   13 px. Twee klassen plus het element winnen dat van de presetklasse. */
.hiz-product .hiz-product__kruimels,
.hiz-product .hiz-product__kruimels .hiz-breadcrumb,
.hiz-product .hiz-product__kruimels nav {
	margin-block: var(--hiz-space-4, 16px) 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

.hiz-product .hiz-product__kruimels a {
	color: inherit;
}

/*
 * Hotfix 1.0.1: de WooCommerce-blokken voor kruimelpad en meldingen staan uit zichzelf op
 * `alignwide` (1360 px), de productpagina zelf op de inhoudsbreedte (1200 px). Vanaf 1281 px
 * stond het kruimelpad daardoor links van de foto (op 1440 en 1536 px 80 px). Nu op één lijn.
 */
.hiz-product > .hiz-product__kruimels.alignwide,
.hiz-product > .wp-block-woocommerce-store-notices.alignwide {
	max-width: var(--wp--style--global--content-size, var(--hiz-container, 1200px));
}

/*
 * Hotfix 1.0.1: op een telefoon brak het kruimelpad midden in de productnaam af ("Krommenie
 * Hoodie –" / "Oranje"). De productnaam staat vlak eronder als H1; onder 600 px tonen we daarom
 * alleen het pad erboven (Nederland / Krommenie / Hoodie). De laatste kruimel is een losse
 * tekstknoop zonder eigen element: lettergrootte 0 op de nav, en terug op de links en
 * scheidingstekens. Krijgt de huidige kruimel later een eigen element, dan staat hij er gewoon
 * weer (en blijft ook zijn scheidingsteken staan).
 */
@media (max-width: 599px) {
	.hiz-product .hiz-product__kruimels nav.hiz-breadcrumb {
		font-size: 0;
	}

	.hiz-product .hiz-product__kruimels nav.hiz-breadcrumb > * {
		font-size: var(--hiz-text-xs, 13px);
	}

	.hiz-product .hiz-product__kruimels .hiz-breadcrumb__scheiding:last-of-type {
		display: none;
	}
}

/*
 * Tot 768 px: het kruimelpad op één regel (aanvulling op de hotfix hierboven). Onder 600 px valt
 * de productnaam al weg; tussen 600 en 767 px en bij een lange plaatsnaam kapt een beletselteken
 * af in plaats van een tweede regel boven de foto.
 */
@media (max-width: 767px) {
	.hiz-product .hiz-product__kruimels,
	.hiz-product .hiz-product__kruimels .hiz-breadcrumb,
	.hiz-product .hiz-product__kruimels nav {
		overflow: hidden;
		line-height: 1.6;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.hiz-product__titel {
	margin: 0 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-h2, clamp(26px, 3vw, 36px));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.hiz-product__prijs {
	margin: 0;
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 700;
}

.hiz-product__prijs del {
	color: var(--hiz-color-muted);
	font-weight: 400;
}

.hiz-product__prijsregel {
	margin: var(--hiz-space-1, 4px) 0 var(--hiz-space-3, 12px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

@media (min-width: 768px) {
	.hiz-product__prijsregel {
		margin-bottom: var(--hiz-space-5, 24px);
	}
}

.hiz-credit {
	margin: 0 0 var(--hiz-space-5, 24px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-credit a {
	color: var(--hiz-color-pine);
}

/* ------------------------------- 3. Galerij */

/*
 * Vaste beeldverhouding (4/5) op elke foto, horizontaal veegbaar spoor, geen layoutsprong.
 * De beeldverhouding is hier de belangrijkste regel: bij een kleurwissel komen er foto's van
 * een ander formaat in beeld (600 × 750 naast 600 × 800), en zonder vaste ratio verspringt de
 * hele pagina. Samen met de `width`/`height` die het theme op elke `<img>` zet, is dat wat
 * web.dev als CLS-remedie noemt.
 *
 * Ronde 5: de "stapel alle foto's onder elkaar"-weergave vanaf 1280 px is weg. Die maakte de
 * mediakolom bijna 1.800 px hoog (gemeten) terwijl de standaard één hoofdbeeld met een
 * miniatuurrij eronder vraagt.
 */

/* WooCommerce beperkt het galerijblok tot 512 px; HIZ laat het de hele kolom vullen. */
.hiz-product .wp-block-woocommerce-product-image-gallery {
	width: 100%;
	max-width: none;
}

.hiz-product .woocommerce-product-gallery {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	/* WooCommerce zet inline opacity:0 en rekent op FlexSlider om dat op te heffen; die JS is bewust uit. */
	opacity: 1 !important;
}

/* Hotfix 1.0.1: WooCommerce zet `margin-bottom: 2em` op de galerij (`.woocommerce div.product
   div.images`, drie klassen en twee elementen) en won van de regel hierboven. Daardoor stonden
   de stippen en miniaturen 44 px onder de foto in plaats van 12. */
.hiz-product .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
	margin: 0;
}

.hiz-product .woocommerce-product-gallery__wrapper {
	display: flex;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	list-style: none;
}

.hiz-product .woocommerce-product-gallery__wrapper::-webkit-scrollbar {
	display: none;
}

.hiz-product .woocommerce-product-gallery__image {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	scroll-snap-align: center;
}

/*
 * Telefoon: de volgende foto staat half in beeld. Baymard (*Always Signpost Hidden Thumbnails*,
 * bijgewerkt 2026) noemt een half afgesneden foto even effectief als miniaturen om te laten zien
 * dát er meer is, en het kost geen extra rij onder de foto. De foto zelf wordt daardoor 84% van
 * de breedte: 288 × 360 px op 375 px, zodat titel, prijs, kleur en maat in het eerste scherm passen.
 *
 * Alleen CSS, geen klasse uit product.js: zou de breedte pas na het script veranderen, dan
 * verspringt alles onder de foto (CLS). `:has()` telt of er een tweede foto is; een browser
 * zonder `:has()` toont gewoon één foto over de volle breedte.
 */
@media (max-width: 767px) {
	.hiz-product .woocommerce-product-gallery__wrapper:has(> .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image) > .woocommerce-product-gallery__image {
		flex-basis: 84%;
		scroll-snap-align: start;
	}
}

/*
 * Tablet (768–1023 px, nog één kolom): twee foto's naast elkaar. Alle 918 live producten hebben
 * precies twee foto's; zo staan ze allebei in beeld en blijft de koopknop binnen 1024 px.
 */
@media (min-width: 768px) and (max-width: 1023px) {
	.hiz-product .woocommerce-product-gallery__wrapper:has(> .woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image) > .woocommerce-product-gallery__image {
		flex-basis: calc(50% - var(--hiz-space-1, 4px));
		scroll-snap-align: start;
	}
}

.hiz-product .woocommerce-product-gallery__image a,
.hiz-product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: 100%;
}

.hiz-product .woocommerce-product-gallery__image img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hiz-radius-lg, 24px);
	background: var(--hiz-color-mint);
}

/*
 * Geen foto bij dit product: WooCommerce zet zijn plaatshouder neer. Op een 4:5-vlak van ruim
 * 700 px is dat precies het "lege vlak" dat de visuele standaard verbiedt (§Vorm, lege staat:
 * hooguit een band van 120 px in Link Water). De plaatshouder wordt daarom een lage band.
 */
/* Vier klassen in de selector: WooCommerce zelf zet `height: auto` met
   `.woocommerce div.product div.images img` (drie klassen, drie elementen); bij gelijk aantal
   klassen wint dan het aantal elementen, dus een kortere selector verliest hier. */
.hiz-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image--placeholder img,
.hiz-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img.woocommerce-placeholder {
	aspect-ratio: auto;
	height: var(--hiz-space-9, 96px);
	object-fit: contain;
	opacity: 0.5;
}

.hiz-product .woocommerce-product-gallery__wrapper:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 3px;
}

/* WooCommerce-triggerknop voor de lightbox staat uit; verberg de rest van zijn UI. */
.hiz-product .woocommerce-product-gallery__trigger {
	display: none;
}

/* Bediening: kleine pijlen op de muis, puntjes op mobiel, miniaturen vanaf 768 px. */
.hiz-galerij__pijl {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hiz-color-line);
	border-radius: 50%;
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font-size: var(--hiz-h4, 17px);
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
}

.hiz-galerij__pijl--vorige {
	left: var(--hiz-space-3, 12px);
}

.hiz-galerij__pijl--volgende {
	right: var(--hiz-space-3, 12px);
}

.hiz-galerij__pijl[disabled] {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) and (min-width: 768px) {
	.hiz-galerij .hiz-galerij__pijl {
		display: flex;
	}
}

/*
 * Miniaturen vanaf 1024 px (Baymard: de minste misklikken en de beste vindbaarheid). Daaronder
 * doet de foto die half in beeld staat (telefoon) of de tweede foto ernaast (tablet) dat werk;
 * de rij stipjes van ronde 5 kostte op 375 px 56 px hoogte tussen foto en titel. Heeft een
 * product meer dan twee foto's, dan staan de miniaturen op de tablet er wél (`--veel`).
 */
.hiz-galerij__thumbs {
	display: flex;
	margin: var(--hiz-space-3, 12px) 0 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 767px) {
	.hiz-galerij__thumbs {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hiz-product__media:not(:has(.hiz-galerij--veel)) .hiz-galerij__thumbs {
		display: none;
	}
}

/*
 * Vanaf 1024 px zet product.js de miniaturen onder de foto. Die ruimte (12 px + 82 px) houden we
 * vooraf vrij zolang er meer dan één foto is, zodat de uitklappers eronder niet verspringen
 * als de strook verschijnt.
 */
@media (min-width: 1024px) {
	.hiz-product__media:has(.woocommerce-product-gallery__image ~ .woocommerce-product-gallery__image):not(:has(.hiz-galerij__thumbs)) {
		padding-bottom: calc(var(--hiz-space-3, 12px) + var(--hiz-space-8, 64px) * 1.25 + 2px);
	}
}

.hiz-galerij__thumbs li {
	margin: 0;
	flex: 0 0 auto;
}

.hiz-galerij__thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.hiz-galerij__thumb:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
}

/* Miniaturen van 64 px breed (4:5) in een rij onder het hoofdbeeld. */
@media (min-width: 768px) {
	.hiz-galerij__thumbs {
		gap: var(--hiz-space-2, 8px);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.hiz-galerij__thumbs::-webkit-scrollbar {
		display: none;
	}

	.hiz-galerij__thumb {
		border: 1px solid var(--hiz-color-line);
		border-radius: var(--hiz-radius-sm, 10px);
		background: var(--hiz-color-mint);
		overflow: hidden;
	}

	.hiz-galerij__thumb img {
		display: block;
		width: var(--hiz-space-8, 64px);
		height: calc(var(--hiz-space-8, 64px) * 1.25);
		object-fit: cover;
	}

	.hiz-galerij__thumb.is-actief {
		border-color: var(--hiz-color-forest);
		box-shadow: inset 0 0 0 1px var(--hiz-color-forest);
	}
}

/* Vergroten */

.hiz-zoom {
	width: min(96vw, 900px);
	max-width: 96vw;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--hiz-radius-lg, 24px);
	background: var(--hiz-color-white);
}

.hiz-zoom::backdrop {
	background: rgb(30 35 82 / 78%);
}

.hiz-zoom__foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hiz-radius-lg, 24px);
}

.hiz-zoom__sluit {
	position: absolute;
	top: var(--hiz-space-2, 8px);
	right: var(--hiz-space-2, 8px);
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	border: 1px solid var(--hiz-color-line);
	border-radius: 50%;
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font-size: var(--hiz-h4, 17px);
	line-height: 1;
	cursor: pointer;
}

.hiz-product .woocommerce-product-gallery__image a[role="button"] {
	cursor: zoom-in;
}

/* ------------------------------- 4. Kleur: vermelding, of dit ontwerp in andere kleuren */

/*
 * Eén kleur (het gewone geval: 886 ontwerpen voor 918 producten) is een vermelding, geen knop:
 * "KLEUR ● Zwart". Bestaat hetzelfde ontwerp in meer kleuren, dan staat eronder een rij links
 * naar die kleuren. Hetzelfde label als de rijen van het variatieformulier, zodat een kleur
 * er op een samengevoegd en een los product hetzelfde uitziet.
 */
.hiz-familie {
	margin: 0 0 var(--hiz-space-3, 12px);
}

@media (min-width: 768px) {
	.hiz-familie {
		margin-bottom: var(--hiz-space-4, 16px);
	}
}

.hiz-familie__kop {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hiz-familie__naam {
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-familie--vast {
	display: flex;
	min-height: var(--hiz-space-6, 32px);
	align-items: center;
	gap: var(--hiz-space-2, 8px);
}

.hiz-familie--vast .hiz-familie__kop {
	margin-inline-end: var(--hiz-space-1, 4px);
}

.hiz-familie--vast .hiz-familie__swatch {
	order: 1;
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
}

.hiz-familie--vast .hiz-familie__naam {
	order: 2;
}

.hiz-familie__regel {
	display: flex;
	align-items: baseline;
	gap: var(--hiz-space-2, 8px);
	margin: 0 0 var(--hiz-space-2, 8px);
}

.hiz-familie__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-familie__lijst li {
	margin: 0;
}

/* Attribuut met één waarde in het variatieformulier (#8777): dezelfde vermelding. */
.hiz-keuze-vast {
	display: inline-flex;
	min-height: var(--hiz-space-6, 32px);
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	margin-bottom: var(--hiz-space-3, 12px);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-keuze-vast__staal {
	display: block;
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
	border-radius: 50%;
	background: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}

.hiz-keuze-vast__staal--licht {
	box-shadow: inset 0 0 0 1px var(--hiz-color-forest);
}

.hiz-familie__item {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	padding: 0 var(--hiz-space-4, 16px) 0 var(--hiz-space-2, 8px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	color: inherit;
	font-size: var(--hiz-text-sm, 14px);
	text-decoration: none;
}

.hiz-familie__item.is-current {
	border-color: var(--hiz-color-forest);
	background: var(--hiz-color-mint);
	font-weight: 700;
}

.hiz-familie__swatch {
	display: block;
	width: var(--hiz-space-6, 32px);
	height: var(--hiz-space-6, 32px);
	border-radius: 50%;
	background: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}

.hiz-familie__swatch--licht {
	box-shadow: inset 0 0 0 1px var(--hiz-color-forest);
}

.hiz-familie__label {
	white-space: nowrap;
}

/* ------------------------------- 5. Kleurstalen bij het variatieformulier */

.hiz-kleuren {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin-bottom: var(--hiz-space-4, 16px);
}

/*
 * Staal 32 px met het label ernaast; het label is verplicht (WCAG 2.5.3 Label in Name).
 * Dezelfde maat als `.hiz-familie__swatch`: op een samengevoegd product is kleur een variatie
 * (deze knoppen), op een niet-samengevoegd product een link naar een ander product
 * (`.hiz-familie`). Voor de bezoeker is het dezelfde keuze en hoort het er hetzelfde uit te zien.
 */
.hiz-kleuren__knop {
	display: inline-flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	padding: 0 var(--hiz-space-4, 16px) 0 var(--hiz-space-2, 8px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-ink);
	font: inherit;
	font-size: var(--hiz-text-sm, 14px);
	cursor: pointer;
}

.hiz-kleuren__staal {
	display: block;
	width: var(--hiz-space-6, 32px);
	height: var(--hiz-space-6, 32px);
	border-radius: 50%;
	background: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 18%);
}

/* Lichte kleuren krijgen een duidelijke rand, anders vallen ze weg tegen de witte knop. */
.hiz-kleuren__staal--licht {
	box-shadow: inset 0 0 0 1px var(--hiz-color-forest);
}

.hiz-kleuren__knop.is-actief {
	border-color: var(--hiz-color-forest);
	background: var(--hiz-color-mint);
	font-weight: 700;
}

.hiz-kleuren__knop[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	text-decoration: line-through;
}

/* Uitverkocht in de gekozen maat, maar kiesbaar: leesbaar gehouden, zie de maatknoppen. */
.hiz-kleuren__knop.is-uitverkocht:not([disabled]) {
	border-style: dashed;
	color: var(--hiz-color-muted);
	text-decoration: line-through;
}

.hiz-kleuren__knop:focus-visible,
.hiz-maten__knop:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
}

/* ------------------------------- 6. Variatieformulier en maten */

.hiz-product form.cart {
	margin: 0;
}

/*
 * Hotfix 1.0.1: het WooCommerce-blok maakt van het variatieformulier een raster met
 * `grid-auto-flow: column`; de clearfix (`::after`) kreeg daarin een eigen kolom. Op 768 px was
 * die 27 px breed en stopte de koopknop zo ver vóór de rechterrand. Alle kinderen besloegen
 * al de volle breedte, dus een gewoon blok ziet er verder hetzelfde uit.
 */
.hiz-product .wp-block-add-to-cart-form form.variations_form {
	display: block;
}

.hiz-product table.variations {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

/*
 * De tabel is een blok (WooCommerce), maar tbody en tr bleven tabelrijen. Daaromheen maakt de
 * browser dan een anonieme tabel die zo smal wordt als de inhoud, en een raster met `auto-fill`
 * (de maatknoppen) krimpt daarin tot één kolom: zeven maten onder elkaar, 332 px hoog op 375 px.
 * Alles blok, dan vult de cel de kolom.
 */
.hiz-product table.variations tbody,
.hiz-product table.variations tr {
	display: block;
	width: 100%;
}

.hiz-product table.variations th,
.hiz-product table.variations td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
}

/*
 * Hotfix 1.0.1: WooCommerce zet op elke cel `padding-bottom: var(--wp--style--block-gap)` en
 * `line-height: 2em` (`.woocommerce div.product form.cart .variations th`, vier klassen en drie
 * elementen) en won van de regel hierboven. Het label "Maat" nam zo 57 px in, de matenrij stond
 * 40 px onder zijn label en 45 px boven de maathulp. Nu: label, 8 px, knoppen, 8 px, maathulp.
 */
.hiz-product .wp-block-add-to-cart-form form.cart table.variations tr > th,
.hiz-product .wp-block-add-to-cart-form form.cart table.variations tr > td {
	padding: 0;
	line-height: 1.5;
}

.hiz-product div.wp-block-add-to-cart-form form.cart table.variations {
	margin-bottom: var(--hiz-space-2, 8px);
}

/* Als blok: geen regelvak van 24 px om een label van 20 px heen (4 px per keuze). */
.hiz-product table.variations th.label label {
	display: block;
	width: fit-content;
	margin-bottom: var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hiz-product .reset_variations {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	margin-top: var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

/*
 * WooCommerce verbergt de "Wis"-link met `visibility: hidden` en laat hem dus 44 px ruimte
 * innemen: een gat tussen de matenrij en de maathulp waar niets staat. Zolang hij verborgen is,
 * neemt hij ook geen ruimte in; zodra WooCommerce hem toont, staat hij er weer met zijn volle
 * tikdoel.
 *
 * QA 1.2.0 (CLS): die regel keek naar de inline stijl die WooCommerce pas zet als zijn script loopt;
 * tot dan nam de link wél ruimte in en sprong de maathulp daarna 52 px omhoog. Nu vanaf de eerste
 * verf: zonder voorgekozen waarde (de meeste producten) neemt de link geen ruimte in tot de bezoeker
 * iets kiest. Mét een voorgekozen waarde (samengevoegd product met standaardkleur) toont WooCommerce
 * hem meteen; dan houdt hij vanaf het begin zijn plek.
 */
.hiz-product .variations_form:not(:has(.variations option[selected]:not([value=""]))) .reset_variations:not([style*="visibility: visible"]):not([style*="visibility:visible"]) {
	display: none;
}

/*
 * QA 1.2.0 (CLS): de knoppenrij (maten, kleuren, 44 px) bouwt product.js pas na het laden en zet de
 * select dan visueel weg. Tot dat moment stond de select er op zijn eigen hoogte (42 px, als inline
 * blok met regelruimte) en schoof alles eronder (maathulp, koopknop, zekerheden) mee. Nu staat de
 * select tot dan op precies de hoogte van de rij die ervoor in de plaats komt. Zonder JavaScript
 * blijft hij gewoon bruikbaar.
 */
.hiz-product form.variations_form .variations td.value:not(.hiz-maten__houder) select {
	display: block;
	box-sizing: border-box;
	height: var(--hiz-touch, 44px);
	margin: 0;
}

/* De kleurenrij heeft 16 px ondermarge (.hiz-kleuren); de select die ervoor in de plaats komt ook. */
.hiz-product form.variations_form .variations td.value:not(.hiz-maten__houder) select[name="attribute_pa_kleur"]:has(option:nth-child(3)) {
	margin-bottom: var(--hiz-space-4, 16px);
}

/*
 * De select blijft in de DOM (toetsenbord en schermlezer); de knoppenrij staat ernaast.
 *
 * Een raster van gelijke vakken in plaats van een vrije rij: op 375 px passen XS tot en met 3XL
 * zo op één regel (7 × 45 px), waar ze eerst over twee regels liepen (96 px hoog). Maten met een
 * langere naam ("One size") krijgen de vrije rij terug (`--lang`, gezet door product.js).
 */
.hiz-maten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--hiz-touch, 44px), 1fr));
	gap: var(--hiz-space-1, 4px);
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.hiz-maten {
		grid-template-columns: repeat(auto-fill, minmax(calc(var(--hiz-touch, 44px) + var(--hiz-space-2, 8px)), 1fr));
		gap: var(--hiz-space-2, 8px);
	}
}

.hiz-maten.hiz-maten--lang {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
}

.hiz-maten__knop {
	min-width: var(--hiz-touch, 44px);
	min-height: var(--hiz-touch, 44px);
	padding: 0 var(--hiz-space-1, 4px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font: inherit;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--hiz-motion-fast) var(--hiz-ease), color var(--hiz-motion-fast) var(--hiz-ease);
}

.hiz-maten__knop.is-actief {
	border-color: var(--hiz-color-forest);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-maten--lang .hiz-maten__knop {
	padding: 0 var(--hiz-space-4, 16px);
}

/* Bestaat niet in deze kleur: uitgeschakeld (een inactief element valt buiten SC 1.4.3). */
.hiz-maten__knop[disabled] {
	color: var(--hiz-color-muted);
	cursor: not-allowed;
	opacity: 0.5;
	text-decoration: line-through;
}

/*
 * Uitverkocht maar kiesbaar (daarna volgt "Laat het me weten"): doorgestreept, zonder
 * doorzichtigheid, zodat de tekst gewoon 4,5:1 haalt – de knop is niet inactief, dus SC 1.4.3
 * geldt volledig. De naam zegt "M, uitverkocht" (product.js).
 */
.hiz-maten__knop.is-uitverkocht:not([disabled]) {
	border-style: dashed;
	color: var(--hiz-color-muted);
	text-decoration: line-through;
}

.hiz-maten__knop.is-uitverkocht.is-actief:not([disabled]) {
	border-style: solid;
	background: var(--hiz-color-mint);
	color: var(--hiz-color-ink);
}

/* Zodra de knoppenrij er staat, is de select een tweede besturing voor dezelfde keuze. Hij bleef
   zichtbaar als een leeg "Kies een optie"-veld onder de matenknoppen en werd bovendien afgeknipt.
   Hij is nu visueel verborgen maar blijft in de DOM en in de toegankelijkheidsboom; krijgt hij
   focus (toetsenbord), dan komt hij volledig terug zodat de focus altijd zichtbaar is. */
.hiz-product .hiz-maten__houder select {
	position: absolute;
	/* WooCommerce zet met hogere specificiteit `width: 100%; max-width: 100%` op deze select
	   en `min-width: 70-75%` (`.woocommerce div.product form.cart .variations select`). Absoluut
	   gepositioneerd rekende die percentages tegen de hele hoofdkolom, waardoor de pagina op
	   1280 en 1536 px horizontaal overliep. Alleen met !important is dat te overrulen. */
	/* `box-sizing` en `padding` moeten mee: WooCommerce zet padding op deze select met een
	   hogere specificiteit, en bij `content-box` telde die padding gewoon door. De "verborgen"
	   select was daardoor nog 25 px hoog — genoeg om de koopkolom een stukje op te rekken en
	   om in de a11y-controle als veld van < 48 px te verschijnen. */
	box-sizing: border-box !important;
	width: 1px !important;
	min-width: 0 !important;
	max-width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;
	margin: -1px;
	padding: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hiz-product .hiz-maten__houder select:focus {
	position: static;
	width: auto !important;
	min-width: 12rem !important;
	height: auto !important;
	min-height: var(--hiz-control, 48px);
	max-height: none !important;
	max-width: 100% !important;
	margin: var(--hiz-space-2, 8px) 0 0;
	padding: 0 var(--hiz-space-3, 12px);
	overflow: visible;
	clip-path: none;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font: inherit;
	font-size: var(--hiz-text-md, 16px);
}

.hiz-product .single_variation_wrap {
	margin-top: 0;
}

/* QA 1.2.0 (CLS): WooCommerce geeft het (lege) variatievak 16 px ondermarge (block-gap) en laat het
   bij het laden inklappen met jQuery slideUp: de koopknop en alles eronder schoven 16 px op en weer
   terug. Geen marge op het vak zelf; prijs en voorraad eronder hebben hun eigen 8 px. */
.hiz-product .single_variation_wrap .woocommerce-variation.single_variation {
	margin-bottom: 0;
}

.hiz-product .woocommerce-variation-price {
	margin-bottom: var(--hiz-space-2, 8px);
	font-weight: 700;
}

.hiz-product .woocommerce-variation-availability {
	margin-bottom: var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* ------------------------------- 7. Maathulp en maattabel */

/*
 * De maathulp staat direct onder de matenrij (Baymard: maatgids náást de maatkeuze, niet
 * onderaan de pagina). Bovenaan het pasvormadvies in één zichtbare regel ("Valt iets kleiner:
 * …") – het belangrijkste maatfeit hoort niet achter een klik –, daaronder na het kiezen de
 * centimeters van die maat, en dan de tekstlink die de volledige tabel openklapt.
 */
.hiz-maathulp {
	margin: var(--hiz-space-2, 8px) 0 var(--hiz-space-4, 16px);
}

.hiz-maathulp__kort,
.hiz-maathulp__maat {
	max-width: var(--hiz-measure, 64ch);
	margin: 0 0 var(--hiz-space-1, 4px);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-sm, 14px);
	line-height: 1.5;
}

.hiz-maathulp__maat {
	color: var(--hiz-color-pine);
	font-weight: 600;
}

.hiz-maathulp__maat:empty {
	display: none;
}

.hiz-maathulp__details {
	margin: 0;
	border: 0;
	background: none;
}

.hiz-maathulp__knop {
	display: inline-flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	gap: var(--hiz-space-1, 4px);
	padding: 0;
	color: var(--hiz-color-pine);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	list-style: none;
}

.hiz-maathulp__knop::-webkit-details-marker {
	display: none;
}

.hiz-maathulp__knop::after {
	content: "+";
	font-size: var(--hiz-text-md, 16px);
	line-height: 1;
	text-decoration: none;
}

.hiz-maathulp__details[open] .hiz-maathulp__knop::after {
	content: "–";
}

.hiz-maathulp__knop:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
}

.hiz-maathulp__inhoud {
	max-width: var(--hiz-measure, 64ch);
	padding: var(--hiz-space-3, 12px) 0 0;
}

.hiz-maathulp__advies,
.hiz-maathulp__uitleg,
.hiz-maathulp__leeg {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-maathulp__uitleg,
.hiz-maathulp__leeg {
	margin-bottom: 0;
	color: var(--hiz-color-muted);
}

/* Tabellen: alleen horizontale lijnen, geen buitenrand (visuele standaard). */
.hiz-maattabel {
	width: 100%;
	margin: 0 0 var(--hiz-space-3, 12px);
	border-collapse: collapse;
	font-size: var(--hiz-text-sm, 14px);
	font-variant-numeric: tabular-nums;
}

.hiz-maattabel__caption {
	margin-bottom: var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	text-align: left;
}

.hiz-maattabel th,
.hiz-maattabel td {
	padding: var(--hiz-space-2, 8px) var(--hiz-space-2, 8px) var(--hiz-space-2, 8px) 0;
	border-bottom: 1px solid var(--hiz-color-line);
	text-align: left;
}

.hiz-maattabel thead th {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hiz-maattabel tbody th {
	width: 5rem;
}

/* ------------------------------- 8. Aantal, koopknop en koopwenk */

/* Aantal en koopknop op één rij; onder 600 px krijgt de knop een eigen regel omdat de
   knoptekst dan niet naast het aantal past. */
.hiz-product .woocommerce-variation-add-to-cart,
.hiz-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	align-items: center;
}

.hiz-product form.cart .quantity {
	display: inline-flex;
	margin: 0;
	flex: 0 0 auto;
}

.hiz-product form.cart .quantity input {
	width: 4.5rem;
	min-height: var(--hiz-control, 48px);
	padding: 0 var(--hiz-space-2, 8px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm, 10px);
	font: inherit;
	text-align: center;
}

/* Hotfix 1.0.1: het aantalveld was 50 px hoog (48 + rand) naast een knop van 48 px, met nog een
   extra marge rechts van WooCommerce (`div.quantity .qty`). Nu even hoog als de knop. */
main.hiz-product .wp-block-add-to-cart-form form.cart div.quantity input.qty {
	box-sizing: border-box;
	height: var(--hiz-control, 48px);
	margin: 0;
}

/* En de 4 px marge rechts die WooCommerce op het vak zelf zet: de `gap` van de rij is genoeg. */
main.hiz-product .wp-block-add-to-cart-form form.cart div.quantity {
	margin: 0;
}

/*
 * Primaire actie van de pagina: Pow Orange met witte tekst. `--hiz-color-lemon-tekst`
 * (#C9430F) haalt met wit 4,77:1 en is dus ook voor gewone tekstgrootte voldoende; de knop
 * hoeft daarom niet meer op 19 px/800 te staan zoals in ronde 3.
 */
.hiz-product .single_add_to_cart_button,
.hiz-product form.cart button[type="submit"] {
	display: inline-flex;
	flex: 1 1 14rem;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: var(--hiz-control, 48px);
	padding: 0 var(--hiz-space-5, 24px);
	border: 1px solid var(--hiz-color-lemon-tekst);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-lemon-tekst);
	color: var(--hiz-color-white);
	font: inherit;
	font-size: var(--hiz-text-md, 16px);
	font-weight: 700;
	cursor: pointer;
}

.hiz-product .single_add_to_cart_button:focus-visible,
.hiz-product form.cart button[type="submit"]:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 3px;
}

/* Nog geen maat gekozen: de knop moet er ook echt uitzien als "nog niet". */
.hiz-product form.cart button[type="submit"]:disabled,
.hiz-product form.cart button[type="submit"].disabled,
.hiz-product form.cart button[type="submit"].wc-variation-selection-needed,
.hiz-product .single_add_to_cart_button.disabled,
.hiz-product .single_add_to_cart_button[disabled] {
	border-color: var(--hiz-color-line);
	background: var(--hiz-color-mint);
	color: var(--hiz-color-muted);
	cursor: not-allowed;
}

/*
 * Livegang (LQ): WooCommerce zet op een uitgeschakelde knop `opacity: .5` met een zwaardere
 * selector (`.woocommerce button.button:disabled[disabled]`). Daardoor werd de tekst #a0a0a9
 * op #dfdfdf (1,94:1, axe color-contrast op elke productpagina). Zonder die halvering is het
 * muted op Link Water, 4,7:1.
 */
.hiz-product form.cart button.single_add_to_cart_button:is(.disabled, :disabled, .wc-variation-selection-needed) {
	opacity: 1;
}

@media (max-width: 599px) {
	.hiz-product .single_add_to_cart_button,
	.hiz-product form.cart button[type="submit"] {
		flex: 1 1 100%;
	}
}

/* Hotfix 1.0.1: altijd op een eigen regel onder de knop. Op 768 px stond de wenk er als derde
   flexitem rechts naast geperst. */
.hiz-koopwenk {
	flex: 1 0 100%;
	margin: var(--hiz-space-2, 8px) 0 0;
	color: var(--hiz-color-pine);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-koopwenk[hidden] {
	display: none;
}

/*
 * Bevestiging na toevoegen zonder herladen (product.js, klantreis P-1): één regel en de
 * volgende stap, direct onder de knop. Leeg neemt hij geen ruimte in.
 */
.hiz-toegevoegd:empty {
	display: none;
}

.hiz-toegevoegd {
	margin: var(--hiz-space-3, 12px) 0 0;
	padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-mint);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-toegevoegd__tekst {
	margin: 0;
	font-weight: 600;
}

.hiz-toegevoegd.is-gelukt .hiz-toegevoegd__tekst::before {
	margin-inline-end: var(--hiz-space-1, 4px);
	color: var(--hiz-color-forest);
	content: "✓";
	content: "✓" / "";
}

.hiz-toegevoegd__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	margin: var(--hiz-space-3, 12px) 0 0;
}

.hiz-toegevoegd__wagen {
	display: inline-flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	color: var(--hiz-color-pine);
	font-weight: 600;
}

/* Tijdens het toevoegen: de knop zegt niets nieuws, maar laat zien dat er iets gebeurt. */
.hiz-product form.cart button.single_add_to_cart_button.is-bezig {
	cursor: progress;
	opacity: 0.8;
}

/* ------------------------------- 9. Zekerheden bij de koopknop */

/*
 * Concrete regels direct onder de koopknop (blok `hiz/product-zekerheden`): verzendkosten en
 * drempel, levertijd met verwachte datum, bedenktijd en betaalmethode (Baymard 4.1–4.4), alles
 * uit de instellingen. Eén compacte lijst – icoon 16 px, tekst 14 px. Dezelfde regels voor
 * verzending en levertijd staan ook in de schuiflade.
 */
.hiz-product .hiz-vertrouwen,
.hiz-koopsheet .hiz-vertrouwen {
	margin: var(--hiz-space-5, 24px) 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	list-style: none;
}

.hiz-product .hiz-vertrouwen li,
.hiz-koopsheet .hiz-vertrouwen li {
	position: relative;
	margin: 0;
	padding: var(--hiz-space-1, 4px) 0 var(--hiz-space-1, 4px) var(--hiz-space-6, 32px);
	font-size: var(--hiz-text-sm, 14px);
	line-height: 1.5;
}

/* Hotfix 1.0.1: het vinkje staat op het midden van de éérste regel (padding + halve regelhoogte).
   Met `top: 50%` hing het bij een zekerheid van twee regels tussen beide regels in. */
.hiz-product .hiz-vertrouwen li::before,
.hiz-koopsheet .hiz-vertrouwen li::before {
	position: absolute;
	top: calc(var(--hiz-space-1, 4px) + 0.75em);
	left: 0;
	display: flex;
	width: var(--hiz-space-4, 16px);
	height: var(--hiz-space-4, 16px);
	align-items: center;
	justify-content: center;
	/* Release 1.1.0: slate, niet oranje – oranje is alleen de koopknop (één oranje per scherm,
	   advies UX-L in docs/pr/look-feel.md). */
	color: var(--hiz-color-forest);
	content: "✓";
	/* Versiering: niet voorlezen ("vinkje") voor elke regel. */
	content: "✓" / "";
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	line-height: 1;
	transform: translateY(-50%);
}

.hiz-product .hiz-vertrouwen a,
.hiz-koopsheet .hiz-vertrouwen a {
	color: var(--hiz-color-pine);
}

/* ------------------------------- 10. Canvas tas-upsell */

/*
 * Eén compacte regel onder de koopknop: beeld 48 px, tekst, knop 44 px. De tas verschijnt pas
 * ná de maatkeuze (view.js) en onderbreekt de koopflow dus nooit.
 */
.hiz-upsell {
	display: grid;
	grid-template-columns: var(--hiz-control, 48px) 1fr auto;
	gap: var(--hiz-space-3, 12px);
	align-items: center;
	margin: var(--hiz-space-4, 16px) 0 0;
	padding: var(--hiz-space-3, 12px) 0 0;
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-upsell[hidden] {
	display: none;
}

.hiz-upsell__afbeelding {
	width: var(--hiz-control, 48px);
	height: calc(var(--hiz-control, 48px) * 1.25);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint);
	object-fit: cover;
}

.hiz-upsell__tekst {
	min-width: 0;
}

.hiz-upsell__kop {
	margin: 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hiz-upsell__naam {
	margin: 0;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-upsell__kleur {
	color: var(--hiz-color-muted);
	font-weight: 400;
}

.hiz-upsell__uitleg {
	margin: 0;
	overflow: hidden;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hiz-upsell__actie .hiz-button {
	min-height: var(--hiz-touch, 44px);
	background: var(--hiz-color-white);
	font-size: var(--hiz-text-sm, 14px);
	white-space: nowrap;
}

.hiz-upsell__status {
	grid-column: 1 / -1;
	margin: 0;
	color: var(--hiz-color-pine);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-upsell__status:empty {
	display: none;
}

/* Onder 480 px past knop naast tekst niet meer: knop op een eigen regel. */
@media (max-width: 479px) {
	.hiz-upsell {
		grid-template-columns: var(--hiz-control, 48px) 1fr;
	}

	.hiz-upsell__actie {
		grid-column: 1 / -1;
	}

	.hiz-upsell__actie .hiz-button {
		width: 100%;
	}
}

/* ------------------------------- 11. Uitklappers */

/*
 * Eerst het verhaal van het ontwerp, open (blok `hiz/product-info`): wat de A van Alkmaar met
 * kaas te maken heeft, is waarom iemand dít shirt koopt en geen ander. Daaronder één uitklapreeks:
 * pasvorm en materiaal (van dít product), verzenden en retourneren. Geen attribuuttabel, en het
 * verhaal staat niet nog eens in een uitklapper. Afwijking van de visuele standaard (die ook
 * "ontwerp en herkomst" dichtklapt), gemotiveerd in docs/pr/productpagina-2.md.
 */
/* Hotfix 1.0.1: de lijnen lopen over de volle kolombreedte, net als alles erboven (op 768 px
   stopten ze 50 px voor de rechterrand). De tekst ín een uitklapper houdt zijn measure. */
.hiz-product__info {
	margin: 0;
}

.hiz-ontwerpverhaal {
	margin: 0 0 var(--hiz-space-6, 32px);
}

.hiz-ontwerpverhaal__kop {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.hiz-ontwerpverhaal__tekst > * {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-size: var(--hiz-text-md, 16px);
}

.hiz-ontwerpverhaal__herkomst {
	margin: 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-ontwerpverhaal__herkomst a {
	color: var(--hiz-color-pine);
}

.hiz-product__info > .hiz-uitklap:first-of-type,
.hiz-productinfo > .hiz-uitklap:first-of-type {
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-product__info .hiz-uitklap {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--hiz-color-line);
	border-radius: 0;
	background: none;
}

.hiz-product__info .hiz-uitklap > summary {
	display: flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	padding: var(--hiz-space-3, 12px) 0;
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.hiz-product__info .hiz-uitklap > summary::-webkit-details-marker {
	display: none;
}

.hiz-product__info .hiz-uitklap > summary::after {
	margin-left: auto;
	content: "+";
	font-size: var(--hiz-h3, 22px);
	line-height: 1;
}

.hiz-product__info .hiz-uitklap[open] > summary::after {
	content: "–";
}

.hiz-product__info .hiz-uitklap > summary:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
}

.hiz-product__info .hiz-uitklap > :not(summary) {
	max-width: var(--hiz-measure, 64ch);
	margin: 0 0 var(--hiz-space-4, 16px);
	font-size: var(--hiz-text-md, 16px);
}

.hiz-product__info .hiz-uitklap > :last-child {
	margin-bottom: var(--hiz-space-5, 24px);
}

/*
 * Hotfix 1.0.1: tussenkoppen in de productbeschrijving ("Materiaal", "Design", "Pasvorm")
 * waren 19 px, groter dan de kop van de uitklapper zelf (17 px), en stonden even ver van hun
 * eigen alinea als van de alinea erboven. Nu ondergeschikt (16 px vet) en dicht bij hun tekst.
 */
.hiz-product__info .hiz-uitklap .wc-block-product-description > :is(h2, h3, h4, h5) {
	margin: var(--hiz-space-5, 24px) 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-text-md, 16px);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
}

.hiz-product__info .hiz-uitklap .wc-block-product-description > :is(h2, h3, h4, h5) + * {
	margin-top: 0;
}

.hiz-product__info .hiz-uitklap .wc-block-product-description > :first-child {
	margin-top: 0;
}

/* ------------------------------- 12. Sticky koopbalk */

/* Hoogte van de sticky koopbalk: `--hiz-koopbalk-hoogte` op `:root` (§0). Componentconstante:
   de standaard benoemt hier geen token, en de balk, de ruimte die `body` eronder vrijhoudt en de
   scrollmarge moeten dezelfde waarde gebruiken. `product.css` laadt alleen op productpagina's. */

.hiz-koopbalk {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	display: flex;
	min-height: var(--hiz-koopbalk-hoogte);
	gap: var(--hiz-space-3, 12px);
	align-items: center;
	justify-content: space-between;
	padding: var(--hiz-space-1, 4px) var(--hiz-gutter) calc(var(--hiz-space-1, 4px) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--hiz-color-line);
	background: var(--hiz-color-achtergrond, #F5F1E8);
	box-shadow: 0 8px 24px rgb(30 35 82 / 10%);
}

.hiz-koopbalk[hidden] {
	display: none;
}

.hiz-koopbalk__info {
	display: flex;
	min-width: 0;
	flex-direction: column;
	line-height: 1.25;
}

.hiz-koopbalk__prijs {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
}

.hiz-koopbalk__variant {
	overflow: hidden;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hiz-koopbalk__knop {
	flex: 0 0 auto;
	min-height: var(--hiz-touch, 44px);
	color: var(--hiz-color-white);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
}

/* Nog geen maat gekozen: de knop in de balk zegt "Kies je maat" en ziet er ook anders uit. */
.hiz-koopbalk__knop.is-wachtend {
	border-color: var(--hiz-color-forest);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
}

/* Net toegevoegd (klantreis P-1): "✓ In je winkelwagen" links, "Afrekenen" rechts. */
.hiz-koopbalk.is-toegevoegd .hiz-koopbalk__prijs::before {
	margin-inline-end: var(--hiz-space-1, 4px);
	color: var(--hiz-color-forest);
	content: "✓";
	content: "✓" / "";
}

/*
 * De melding "… is toegevoegd aan je winkelwagen" bovenaan: "Bekijk winkelwagen" als echte
 * knop in plaats van een kleine tekstlink (klantreis P-1).
 */
.hiz-product .wc-block-components-notice-banner.is-success a.wc-forward,
.hiz-product .woocommerce-message a.wc-forward {
	display: inline-flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	margin-inline-end: var(--hiz-space-2, 8px);
	padding: 0 var(--hiz-space-4, 16px);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-white);
	font-weight: 700;
	text-decoration: none;
}

.hiz-product .wc-block-components-notice-banner.is-success a.wc-forward:focus-visible,
.hiz-product .woocommerce-message a.wc-forward:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
}

/* De balk mag nooit inhoud of browserbediening afdekken: we maken onderaan ruimte vrij. */
body.hiz-heeft-koopbalk {
	padding-bottom: calc(var(--hiz-koopbalk-hoogte) + env(safe-area-inset-bottom, 0px));
}

/*
 * Vanaf 1024 px staan galerij en koopblok naast elkaar en is de koopkolom zelf sticky; dan is
 * de balk overbodig. Daaronder (ook op 768 px, waar de kolommen nog stapelen) hoort hij er wel.
 */
@media (min-width: 1024px) {
	.hiz-koopbalk {
		display: none;
	}

	body.hiz-heeft-koopbalk {
		padding-bottom: 0;
	}
}

/*
 * Schuiflade met de keuze, geopend vanuit de koopbalk als er nog geen maat gekozen is. Een
 * native modale `<dialog>` onderaan het scherm: focus blijft erin, Escape sluit. Eén lichte
 * schaduw, zoals de standaard voor zwevende elementen toestaat.
 */
.hiz-koopsheet {
	position: fixed;
	inset: auto 0 0;
	width: 100%;
	max-width: 100%;
	max-height: 85vh;
	margin: 0;
	padding: var(--hiz-space-4, 16px) var(--hiz-gutter, 16px) calc(var(--hiz-space-4, 16px) + env(safe-area-inset-bottom, 0px));
	overflow-y: auto;
	border: 0;
	border-radius: var(--hiz-radius-lg, 24px) var(--hiz-radius-lg, 24px) 0 0;
	background: var(--hiz-color-achtergrond, #F5F1E8);
	box-shadow: 0 8px 24px rgb(30 35 82 / 10%);
	color: var(--hiz-color-ink);
}

.hiz-koopsheet::backdrop {
	background: rgb(30 35 82 / 45%);
}

.hiz-koopsheet__kopregel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-3, 12px);
}

.hiz-koopsheet__kop {
	margin: 0;
	font-size: var(--hiz-h4, 17px);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.hiz-koopsheet__sluit {
	display: inline-flex;
	flex: none;
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hiz-color-line);
	border-radius: 50%;
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font-size: var(--hiz-h4, 17px);
	line-height: 1;
	cursor: pointer;
}

.hiz-koopsheet__sluit:focus-visible,
.hiz-koopsheet__knop:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
}

.hiz-koopsheet__product {
	margin: var(--hiz-space-1, 4px) 0 var(--hiz-space-4, 16px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-koopsheet__prijs {
	color: var(--hiz-color-ink);
	font-weight: 700;
}

.hiz-koopsheet__keuze {
	margin: 0 0 var(--hiz-space-3, 12px);
}

.hiz-koopsheet__label {
	margin: 0 0 var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hiz-koopsheet .hiz-kleuren {
	margin-bottom: 0;
}

.hiz-koopsheet .hiz-maathulp__details {
	margin: 0 0 var(--hiz-space-3, 12px);
}

.hiz-koopsheet__status {
	margin: 0 0 var(--hiz-space-3, 12px);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-koopsheet__status[hidden] {
	display: none;
}

.hiz-koopsheet__knop {
	display: flex;
	width: 100%;
	min-height: var(--hiz-control, 48px);
	align-items: center;
	justify-content: center;
	margin-top: var(--hiz-space-2, 8px);
	color: var(--hiz-color-white);
	font-size: var(--hiz-text-md, 16px);
	font-weight: 700;
}

.hiz-koopsheet .hiz-koopsheet__zekerheden {
	margin: 0 0 var(--hiz-space-2, 8px);
}

.hiz-koopsheet__zekerheden[hidden] {
	display: none;
}

.hiz-koopsheet__knop[disabled],
.hiz-koopsheet__knop.is-wachtend {
	border-color: var(--hiz-color-line);
	background: var(--hiz-color-mint);
	color: var(--hiz-color-muted);
	cursor: not-allowed;
}

/* Geen `display: none` vanaf 1024 px: een open modale dialoog die onzichtbaar wordt, laat de
   pagina inert achter. product.js sluit de lade zodra het scherm die breedte bereikt. */

/* ------------------------------- 13. Aanbevelingen */

/*
 * Hooguit twee rijen van vier kaarten. De sectieafstand staat alléén aan de bovenkant, precies
 * zoals `.hiz-section` in hiz.css: nooit padding-bottom van de ene sectie én margin-top van de
 * volgende. De regel staat hier ook omdat de productpagina in ronde 4 nog de oude
 * dubbelzijdige sectiepadding erfde; na de merge van V0 is hij identiek aan de component.
 */
.hiz-product .hiz-aanbevelingen,
.hiz-product .hiz-reviews {
	padding-block: var(--hiz-section-gap, clamp(48px, 7vw, 96px)) 0;
	margin-block: 0;
}

.hiz-aanbevelingen__rij + .hiz-aanbevelingen__rij {
	margin-top: var(--hiz-space-7, 48px);
}

/*
 * Sectiekop is altijd gestapeld en links uitgelijnd (visuele standaard §Spacing): eyebrow →
 * H2 → lead. In ronde 4 stond de lead op ≥ 1024 px rechts náást de kop. Zelfde waarden als
 * `.hiz-section__head` in hiz.css, zodat deze regel na de merge van V0 niets meer verandert.
 */
.hiz-product .hiz-section__head {
	display: flex;
	max-width: var(--hiz-measure, 64ch);
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--hiz-space-3, 12px);
	margin-bottom: var(--hiz-space-6, 32px);
}

.hiz-aanbevelingen__rij .hiz-section__title {
	font-size: var(--hiz-h2, clamp(26px, 3vw, 36px));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* Het label dat zegt wáárom deze producten hier staan (Baymard: geen vage kop zonder grond). */
.hiz-product .hiz-aanbevelingen__lead {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* Directe categorielinks onder een rij: verder kijken zonder terug naar het menu. */
.hiz-aanbevelingen__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: var(--hiz-space-4, 16px) 0 0;
	padding: 0;
	list-style: none;
}

.hiz-aanbevelingen__links li {
	margin: 0;
}

.hiz-aanbevelingen__links a {
	display: inline-flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	padding: 0 var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	color: var(--hiz-color-pine);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	text-decoration: none;
}

.hiz-aanbevelingen__meer {
	margin: var(--hiz-space-6, 32px) 0 0;
}

/* Hotfix 1.0.1: de tekstknop stond 13 px ingesprongen ten opzichte van de kaarten en chips
   erboven; nu links uitgelijnd op de kolom. Het tikdoel blijft 48 px hoog. */
.hiz-aanbevelingen__meer .hiz-button--ghost {
	padding-inline: 0;
}

/*
 * Hotfix 1.0.1: woo.css zet productrasters tussen 768 en 1279 px op drie kolommen. Een rij hier
 * heeft vier kaarten, dus stond er telkens één kaart alleen op een tweede regel. Vanaf 768 px
 * vier kolommen (op 768 px zo breed als een kaart in het tweekoloms raster op een telefoon).
 */
@media (min-width: 768px) {
	.hiz-product .hiz-aanbevelingen .hiz-grid--producten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Mobiel: de twee rijen worden veegbare stroken in plaats van rasters van drie hoog. De
 * visuele standaard staat dat expliciet toe ("horizontale scroll-strook (snap) toegestaan voor
 * rijen") en het scheelt op 375 px ruim 600 px paginahoogte. De kaarten zelf blijven de gewone
 * productkaarten; alleen de rol eromheen verandert.
 */
@media (max-width: 767px) {
	.hiz-product .hiz-aanbevelingen .hiz-grid--producten {
		/* `position: relative` is nodig: zonder eigen positioneringscontext telde Chromium de
		   kaarten die buiten de strook vallen mee in `documentElement.scrollWidth` en meldde de
		   QA-tool horizontale overloop op 375 px, terwijl er niets te scrollen viel. */
		position: relative;
		display: flex;
		gap: var(--hiz-space-4, 16px);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.hiz-product .hiz-aanbevelingen .hiz-grid--producten::-webkit-scrollbar {
		display: none;
	}

	.hiz-product .hiz-aanbevelingen .hiz-grid--producten > .hiz-card {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

/* ------------------------------- 14. Beoordelingen */

/*
 * Beoordelingen staan er alleen als ze er zijn. Wit paneel, samenvatting boven de lijst,
 * formulier maximaal 640 px breed.
 */
/* Hotfix 1.0.1: de `padding` hieronder overschreef de sectieafstand van de gedeelde regel in §13,
   waardoor het witte paneel tegen de uitklappers plakte. Een paneel krijgt zijn afstand als marge. */
.hiz-product .hiz-reviews {
	margin-block: var(--hiz-section-gap, clamp(48px, 7vw, 96px)) 0;
	padding: var(--hiz-space-6, 32px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white);
}

.hiz-reviews__beleid,
.hiz-reviews__pasvorm {
	max-width: var(--hiz-measure, 64ch);
	margin: 0;
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-reviews__beleid {
	color: var(--hiz-color-muted);
}

.hiz-reviews__pasvorm {
	font-weight: 600;
}

.hiz-product .hiz-reviews .comment-form,
.hiz-product .hiz-reviews #review_form_wrapper {
	max-width: var(--hiz-measure-form, 40rem);
}

/* De verwijzing naar bewijs buiten de site, als HIZ die invult. Eén regel, geen kop. */
.hiz-reviews__extern {
	max-width: var(--hiz-measure, 64ch);
	margin: var(--hiz-section-gap, clamp(48px, 7vw, 96px)) 0 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-reviews__extern-link {
	color: var(--hiz-color-pine);
	font-weight: 600;
}

/* WooCommerce zet het label "geverifieerde koper" zelf bij elke beoordeling van een koper. */
.hiz-reviews .woocommerce-review__verified {
	color: var(--hiz-color-pine);
	font-size: var(--hiz-text-xs, 13px);
	font-style: normal;
	font-weight: 700;
}

.hiz-pasvorm__oordeel {
	margin: var(--hiz-space-1, 4px) 0 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* Pasvormveld in het beoordelingsformulier. */
.hiz-pasvorm {
	margin: var(--hiz-space-4, 16px) 0 0;
	padding: 0;
	border: 0;
}

.hiz-pasvorm__legend {
	padding: 0;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-pasvorm__keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px) var(--hiz-space-5, 24px);
	margin-top: var(--hiz-space-2, 8px);
}

.hiz-pasvorm__keuze {
	display: inline-flex;
	min-height: var(--hiz-touch, 44px);
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	cursor: pointer;
}

.hiz-pasvorm__maat {
	margin-top: var(--hiz-space-3, 12px);
}

.hiz-pasvorm__maat label {
	display: block;
	margin-bottom: var(--hiz-space-1, 4px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-pasvorm__maat input {
	width: 8em;
	min-height: var(--hiz-control, 48px);
}

/* ------------------------------- 15. Laat het me weten (uitverkochte maat, UX4) */

/*
 * Blok `hiz/voorraadmelding`, automatisch geplaatst onder het koopformulier. Staat er alleen
 * als er echt een maat uitverkocht is. De knoppen per maat zijn links (werken zonder
 * JavaScript); het formulier eronder klapt open zodra er een maat gekozen is.
 */
.hiz-voorraadmelding {
	margin-top: var(--hiz-space-4, 16px);
	padding: var(--hiz-space-4, 16px);
	border: 0;
	border-radius: var(--hiz-radius-md, 16px);
	background-color: var(--hiz-color-mint);
}

.hiz-voorraadmelding__titel {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
}

.hiz-voorraadmelding__lead {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-voorraadmelding__maten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-voorraadmelding__maat.is-actief {
	background-color: var(--hiz-color-forest);
	border-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-voorraadmelding__form {
	margin-top: var(--hiz-space-3, 12px);
	gap: var(--hiz-space-3, 12px);
}

.hiz-voorraadmelding__form[hidden] {
	display: none;
}

/*
 * Een aankruisvakje van 13 px is voor een vinger geen doel. Het vakje wordt 24 px en de hele
 * regel is klikbaar en minstens 48 px hoog.
 */
.hiz-voorraadmelding__form .hiz-field--akkoord .hiz-field__label {
	display: flex;
	gap: var(--hiz-space-2, 8px);
	align-items: flex-start;
	min-height: var(--hiz-control, 48px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
}

.hiz-voorraadmelding__form input[type="checkbox"] {
	flex: none;
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
	margin-top: var(--hiz-space-1, 4px);
	accent-color: var(--hiz-color-forest);
}

/* ------------------------------- 16. Beweging uit */

/*
 * De galerij scrollt met `behavior: smooth` vanuit het script; wie beweging heeft uitgezet
 * krijgt hier de harde sprong terug. Het script controleert `prefers-reduced-motion` ook zelf,
 * maar CSS is de plek waar het hoe dan ook geldt.
 */
@media (prefers-reduced-motion: reduce) {
	.hiz-product .woocommerce-product-gallery__wrapper {
		scroll-behavior: auto;
	}
}