/**
 * HIZ – startpagina, media-blok en plaatsenkaart.
 *
 * Alleen de secties van de startpagina, het media-blok en de provinciekaart. De basis (kleuren,
 * typografie, knoppen, grids, statuslabels) staat in hiz.css; dit bestand voegt daar niets aan toe
 * en overschrijft er alleen iets van binnen `.hiz-home-sectie` – de secties van de startpagina.
 *
 * Ronde 5 (visuele standaard, `docs/agents/visuele-standaard.md`):
 *  - geen enkele losse pixelwaarde en geen eigen lettergrootte meer; alles loopt via de tokens
 *    uit de standaard (`--hiz-space-*`, `--hiz-section-gap`, `--hiz-h*`, `--hiz-text-*`,
 *    `--hiz-radius-*`, `--hiz-measure*`);
 *  - één sectieritme: secties hebben geen eigen padding meer, alleen `--hiz-section-gap`
 *    ertússen (nooit padding-bottom van de een én margin-top van de ander);
 *  - één sectiekop: eyebrow → H2 → lead, gestapeld en links, nooit een lead rechts;
 *  - geen leeg beeldvlak groter dan 120 px.
 *
 * Wat wél nog als kaal getal in dit bestand staat, en waarom:
 *  - 12 px (eyebrow), 13 px (kaartmeta en hulptekst) en 15 px (prijs, kaarttitel, chiptekst):
 *    de standaard geeft die drie in haar typografietabel als vaste waarden zónder tokennaam;
 *  - 120 px (lege beeldband), 320 px (tegelfoto), 420 px (kaarttekening), 560 px (herobeeld):
 *    bovengrenzen die de standaard letterlijk noemt onder "Beeldverhoudingen";
 *  - 1 px lijnen.
 * Alle overige maten, afstanden, radii en lettergroottes komen uit een token.
 *
 * Kleuren komen uit de tokens van hiz.css:
 *   --hiz-color-paper  Nourished  (achtergrond)
 *   --hiz-color-forest Bright Slate (merk, koppen, knoppen)
 *   --hiz-color-lemon  Pow Orange (accent; alleen witte tekst erop)
 *   --hiz-color-mint / --hiz-color-sage  Link Water (steunvlakken)
 */

/* ------------------------------------------------------------------- beeld */

.hiz-media {
	margin: 0;
}

.hiz-media__img {
	display: block;
	width: 100%;
	/* Op smalle schermen mag een liggende foto een andere uitsnede krijgen dan in een kolom.
	   De verhouding staat altijd vast vóórdat het beeld laadt: geen layoutsprong (web.dev, CLS). */
	aspect-ratio: var(--hiz-ratio-mobiel, var(--hiz-ratio, 4 / 5));
	border-radius: var(--hiz-radius-lg, 24px);
}

@media (min-width: 768px) {
	.hiz-media__img {
		aspect-ratio: var(--hiz-ratio, 4 / 5);
	}
}

.hiz-media__img {
	height: auto;
	object-fit: cover;
	background: var(--hiz-color-mint);
}

/*
 * Lege staat: `.hiz-media-leeg` krijgt zijn vorm alleen uit hiz.css (band van maximaal 120 px
 * in Link Water met het monogram). De eigen verhouding, rand en maximale hoogte die hier
 * stonden zijn weg (livegang-QA; ronde 5b-punt "overbruggingslagen").
 */
.hiz-media__caption {
	margin-top: var(--hiz-space-3, 12px);
	font-size: var(--hiz-text-sm, 14px);
	color: var(--hiz-color-muted);
}

/* ------------------------------------------------------------ sectieritme */

/*
 * Auditpunt 4: "Secties hebben wisselende afstanden (soms 40 px, soms 140 px)". Op de
 * startpagina heeft geen enkele sectie nog eigen padding; de ruimte zit uitsluitend in
 * `--hiz-section-gap` tussen twee secties. Zo telt er nooit iets bij elkaar op.
 *
 * De `constrained`-layout van WordPress zet met `:where()` (specificiteit 0) een blockGap tussen
 * de kinderen van `<main>`; deze regels winnen dat.
 */
.hiz-home-sectie {
	padding-block: 0;
	margin-block: 0;
}

.hiz-home-sectie + .hiz-home-sectie {
	margin-block-start: var(--hiz-section-gap, clamp(48px, 7vw, 96px));
}

.hiz-home-sectie:first-child {
	margin-block-start: var(--hiz-space-7, 48px);
}

.hiz-home-sectie:last-child {
	margin-block-end: var(--hiz-section-gap, clamp(48px, 7vw, 96px));
}

/* De vertrouwensrij hoort visueel bij de hero, niet bij de sectie eronder. */
.hiz-home-sectie + .hiz-home-sectie--aansluitend {
	margin-block-start: var(--hiz-space-6, 32px);
}

/* -------------------------------------------------------------- sectiekop */

/*
 * Eén kop voor alle secties: eyebrow → H2 → lead, gestapeld en links uitgelijnd. hiz.css zet de
 * kop vanaf 1024 px in een rij met de lead rechts; op de startpagina gaf dat per sectie een
 * andere uitlijning (auditpunt 4). Deze selector is specifieker en wint in beide richtingen.
 */
.hiz-home-sectie .hiz-section__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hiz-space-3, 12px);
	margin-block: 0 var(--hiz-space-6, 32px);
	max-width: var(--hiz-measure, 64ch);
	/* De `constrained`-layout van WordPress zet `margin-left/right: auto !important` op elk kind
	   dat smaller is dan de container. Zonder deze regel stond elke sectiekop gecentreerd boven
	   een links uitgelijnd raster – alleen met !important is die layoutregel te overrulen. */
	margin-inline: 0 auto !important;
}

.hiz-home-sectie .hiz-eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--hiz-color-muted);
}

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

.hiz-home-sectie .hiz-section__lead,
.hiz-home-sectie .hiz-lead {
	margin: 0;
	max-width: var(--hiz-measure-lead, 54ch);
	font-size: var(--hiz-text-lg, 18px);
	line-height: 1.55;
	color: var(--hiz-color-pine);
}

.hiz-home-sectie h3 {
	font-size: var(--hiz-h3, 21px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

/* -------------------------------------------------------------------- hero */

/*
 * Eén DOM-volgorde, twee indelingen.
 *
 * Mobiel (één kolom): bovenkop → kop → zin → foto → zoekveld → feitenregel.
 * Vanaf 1024 px verhuist de foto naar een tweede kolom die alle rijen overspant; de verdeling
 * is 7/5 zoals de standaard voorschrijft.
 *
 * Geen card-in-card meer (auditpunt 7): het zoekveld staat kaal in de hero.
 */
.hiz-home-hero .hiz-hero {
	display: grid;
	gap: var(--hiz-space-4, 16px);
}

/* De blok-editor zet zelf marges tussen kinderen; in een grid doet de `gap` dat werk. */
.hiz-home-hero .hiz-hero > * {
	margin-block: 0;
}

/*
 * Geen `max-width` in `ch` op de kop. De terugvalfamilie met `size-adjust` in hiz.css is
 * gekalibreerd op gewicht 400/700; de kop staat op 800 en krijgt dus synthetisch vet met een
 * andere `0`-breedte. Daardoor betekende `16ch` iets anders vóór en ná het omwisselen van het
 * font, brak de kop op een andere plek af en sprong de hele hero: CLS 0,030 op 768 px.
 * De kolom van 7/12 begrenst de regellengte op desktop al.
 */
.hiz-home-hero .hiz-hero__titel {
	margin: 0;
	font-size: var(--hiz-h1, clamp(32px, 4.5vw, 52px));
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.hiz-home-hero .hiz-hero__lead {
	max-width: var(--hiz-measure-lead, 54ch);
}

.hiz-home-hero .hiz-hero__beeld,
.hiz-home-hero .hiz-hero__actie {
	margin-block: 0;
}

.hiz-home-hero .hiz-hero__actie {
	margin-block-start: var(--hiz-space-2, 8px);
}

/*
 * Mobiel en tablet (< 1024 px): kop, uitleg, prijsregel, zoekveld en dan pas de foto.
 * Visuele standaard: "zoekveld in de hero, beeld eronder op mobiel"; CX-01: prijs en gratis
 * verzending boven de vouw. Alleen de volgorde verandert, de HTML niet (geen layoutsprong).
 */
@media (max-width: 1023.98px) {
	.hiz-home-hero .hiz-hero {
		grid-template-areas: "eyebrow" "titel" "lead" "meta" "actie" "beeld";
	}

	.hiz-home-hero .hiz-hero__eyebrow {
		grid-area: eyebrow;
	}

	.hiz-home-hero .hiz-hero__titel {
		grid-area: titel;
	}

	.hiz-home-hero .hiz-hero__lead {
		grid-area: lead;
	}

	.hiz-home-hero .hiz-hero__meta {
		grid-area: meta;
	}

	.hiz-home-hero .hiz-hero__actie {
		grid-area: actie;
	}

	.hiz-home-hero .hiz-hero__beeld {
		grid-area: beeld;
	}
}

@media (min-width: 1024px) {
	.hiz-home-hero .hiz-hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-areas:
			"eyebrow beeld"
			"titel   beeld"
			"lead    beeld"
			"actie   beeld"
			"meta    beeld";
		align-content: center;
		column-gap: var(--hiz-space-8, 64px);
	}

	.hiz-home-hero .hiz-hero__eyebrow {
		grid-area: eyebrow;
	}

	.hiz-home-hero .hiz-hero__titel {
		grid-area: titel;
	}

	.hiz-home-hero .hiz-hero__lead {
		grid-area: lead;
	}

	.hiz-home-hero .hiz-hero__actie {
		grid-area: actie;
	}

	.hiz-home-hero .hiz-hero__meta {
		grid-area: meta;
	}

	.hiz-home-hero .hiz-hero__beeld {
		grid-area: beeld;
		align-self: center;
	}
}

/* Desktop: 3:2 met een bovengrens van 560 px (standaard, "Beeldverhoudingen"). */
@media (min-width: 1024px) {
	.hiz-home-hero .hiz-media__img {
		max-block-size: 560px;
	}
}

/*
 * Mobiel en tablet: 4:5, maximaal 60 vh. Zo passen bovenkop, kop, zin, foto én het zoekveld
 * samen in het eerste scherm van een 375 × 667-toestel. `object-fit: cover` snijdt bij.
 */
@media (max-width: 1023px) {
	.hiz-home-hero .hiz-media__img {
		/* 60 vh is de bovengrens uit de standaard; op een toestel van 930 px hoog zou dat 558 px
		   worden en het zoekveld uit het eerste scherm duwen. 24 rem houdt het daaronder. */
		max-block-size: min(60vh, 24rem);
	}
}

/* Het zoekveld: geen wit paneel met rand meer, alleen label, veld en knop. */
.hiz-home-hero .hiz-plaatszoeker {
	max-width: var(--hiz-measure-form, 40rem);
	padding: 0;
	gap: var(--hiz-space-2, 8px);
	background: none;
	border: 0;
	border-radius: 0;
}

.hiz-home-hero .hiz-plaatszoeker__label {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	letter-spacing: 0;
}

.hiz-home-hero .hiz-plaatszoeker__row {
	gap: var(--hiz-space-2, 8px);
}

.hiz-home-hero .hiz-plaatszoeker__input {
	min-height: var(--hiz-control);
	border-width: 1px;
	border-radius: var(--hiz-radius-sm, 10px);
	font-size: var(--hiz-text-md, 16px);
}

.hiz-home-hero .hiz-plaatszoeker__button {
	min-height: var(--hiz-control);
}

.hiz-home-hero .hiz-plaatszoeker__hint,
.hiz-home-hero .hiz-field__hint {
	font-size: 13px;
	color: var(--hiz-color-muted);
}

/* Het resultaatvak houdt 3,5 rem vrij om een layoutsprong te voorkomen zodra er een uitkomst
   komt. Zolang er niets in staat, is dat in de hero alleen maar lucht. */
.hiz-home-hero .hiz-plaatszoeker__result:empty {
	display: none;
}

/* Eén feitenregel onder het zoekveld in plaats van twee losse links. */
/*
 * Lopende tekst, geen flexrij: in een flexrij werd elk tekstje en elke middenpunt een eigen item
 * met een eigen gat ertussen. De harde spaties vóór de middenpunten (inc/home.php en het pattern)
 * houden een punt bij het woord ervoor.
 */
.hiz-hero__meta {
	display: block;
	margin: 0;
	font-size: var(--hiz-text-sm, 14px);
	line-height: 1.7;
	color: var(--hiz-color-muted);
}

.hiz-hero__meta strong {
	font-weight: 700;
	color: var(--hiz-color-forest);
}

/* Tikdoel van 44 px voor de tweede route naar de collectie, zonder de regelhoogte te veranderen:
   een onzichtbaar vlak rond de link vangt de tik op. */
.hiz-hero__meta a {
	position: relative;
	font-weight: 600;
	color: var(--hiz-color-forest);
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.hiz-hero__meta a::after {
	position: absolute;
	inset: -12px -6px;
	content: "";
}

/* --------------------------------------------------------- vertrouwensrij */

/*
 * Vier feiten, geen beloftes. Rustig, zonder kaders: het is een steunrij, geen kaartenwaaier.
 *
 * **Let op de naamsbotsing.** `woo.css` gebruikt dezelfde klassenamen (`hiz-usp`, `hiz-usp__item`,
 * `hiz-usp__titel`, `hiz-usp__tekst`) voor een héél ander onderdeel: de vertrouwensrij in de
 * winkelwagen, met een wit kader en een raster van `24px 1fr` per regel. `woo.css` laadt op de
 * startpagina mee (er staan productkaarten) en ná `home.css`, dus die regels wonnen: de vier
 * feiten kwamen in een wit kadertje te staan met de titel in een kolom van 24 px, letter onder
 * letter, over de tekst heen. `docs/agents/blok-contract.md` §Vertrouwensrij kent `hiz-usp` toe
 * aan déze rij; de winkelwagenrij hoort dus een eigen naam te krijgen (zie het PR-document).
 * Zolang dat niet is gebeurd, staan de regels hieronder onder `.hiz-home-vertrouwen`, zodat ze
 * los van de laadvolgorde winnen.
 */
.hiz-home-vertrouwen .hiz-usp {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-4, 16px) var(--hiz-space-6, 32px);
	margin: 0;
	padding: var(--hiz-space-5, 24px) 0;
	border: 0;
	border-top: 1px solid var(--hiz-color-line);
	border-bottom: 1px solid var(--hiz-color-line);
	border-radius: 0;
	background: none;
	list-style: none;
}

@media (min-width: 560px) {
	.hiz-home-vertrouwen .hiz-usp {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-home-vertrouwen .hiz-usp {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hiz-home-vertrouwen .hiz-usp__item {
	display: block;
	margin: 0;
	min-width: 0;
}

.hiz-home-vertrouwen .hiz-usp__titel {
	display: block;
	margin: 0;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--hiz-color-forest);
}

/* Tikdoel van 44 px zonder flexvak: 14 px x 1,4 + 2 x 12 px padding. Een `inline-flex`-link
   krimpt rond losse tekst tot min-content en telt niet mee in de regelhoogte van de alinea. */
.hiz-home-vertrouwen .hiz-usp__titel a {
	display: block;
	min-height: var(--hiz-touch);
	padding-block: var(--hiz-space-3, 12px);
	margin-block: calc(var(--hiz-space-3, 12px) * -1) 0;
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.2em;
}

.hiz-home-vertrouwen .hiz-usp__titel a:hover,
.hiz-home-vertrouwen .hiz-usp__titel a:focus-visible {
	text-decoration: underline;
}

.hiz-home-vertrouwen .hiz-usp__tekst {
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hiz-color-muted);
}

/* ---------------------------------------------------------- productsoorten */

/*
 * Drie gelijke tegels: beeld 4:5, naam, prijs-vanaf, aantal. Vanaf 768 px naast elkaar
 * (Baymard #237: laat de breedte van het assortiment zien). Daaronder staan ze als compacte
 * rijen met de foto links – onder elkaar met de foto bovenaan is elke tegel ruim 500 px hoog
 * en kost deze sectie twee schermen.
 *
 * De categorieomschrijving staat er niet meer bij: die maakte de drie tegels ongelijk hoog en
 * herhaalt wat op de categoriepagina zelf staat (`"toonTekst": false` in het patroon).
 */
.hiz-soorten {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.hiz-soorten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hiz-space-5, 24px);
	}
}

.hiz-soort__link {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	overflow: hidden;
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	text-decoration: none;
}

/* Het hele vlak is klikbaar, niet alleen de naam: Baymard vindt bij 43 % van de webshops een
   verschil tussen wat er klikbaar uitziet en wat het is. */
.hiz-soort__tekstblok {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--hiz-space-1, 4px);
	padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px) var(--hiz-space-4, 16px);
}

/* Een echte productfoto uit de categorie zelf; nooit een tekening. */
.hiz-soort__beeld {
	display: block;
	overflow: hidden;
	background: var(--hiz-color-mint);
}

.hiz-soort__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform var(--hiz-motion-normal) var(--hiz-ease);
}

/* Op 1280 px is een kolom 282 px breed; 4:5 maakt de foto dan 352 px hoog en de sectie bijna
   800 px. Een bovengrens houdt de drie tegels binnen één blikveld; `object-fit: cover` snijdt
   de foto netjes bij, de verhouding blijft 4:5 tot die grens. */
@media (min-width: 768px) {
	.hiz-soort__beeld img {
		max-block-size: 320px;
	}
}

/*
 * Onder 768 px liggen de drie tegels als compacte rijen onder elkaar met de foto links. Met de
 * foto bóven de tekst is elke tegel ruim 500 px hoog en kost deze sectie twee schermen.
 * De rij heeft een vaste minimumhoogte (7,5 rem = 6 rem breed beeld in 4:5), zodat de foto de
 * hele rij vult en er geen wit blok onder het beeld overblijft – én er geen layoutsprong is.
 */
@media (max-width: 767px) {
	.hiz-soort__link {
		flex-direction: row;
		align-items: stretch;
		min-height: 7.5rem;
	}

	.hiz-soort__beeld {
		position: relative;
		flex: 0 0 6rem;
		align-self: stretch;
	}

	/* Absoluut in het (uitgerekte) beeldvak: dan is de hoogte van het vak de hoogte van de rij.
	   Met `height: 100%` op een vak zonder vaste hoogte pakt de browser de intrinsieke hoogte van
	   het bestand (750 px) en werd elke tegel meer dan 1.500 px hoog. */
	.hiz-soort__beeld img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}

	.hiz-soort__tekstblok {
		justify-content: center;
		padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
	}

	.hiz-soort__aantal {
		margin-top: 0;
	}
}

/* Hover: alleen het beeld beweegt (standaard, "Kaarten"). De achtergrond wisselde eerder naar
   Bright Slate; dat was een tweede, veel zwaardere beweging in dezelfde sectie. */
.hiz-soort__link:hover .hiz-soort__beeld img,
.hiz-soort__link:focus-visible .hiz-soort__beeld img {
	transform: scale(1.03);
}

.hiz-soort__link:hover .hiz-soort__naam,
.hiz-soort__link:focus-visible .hiz-soort__naam {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hiz-soort__naam {
	font-size: var(--hiz-h3, 21px);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.hiz-soort__prijs {
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.hiz-soort__aantal {
	margin-top: auto;
	padding-top: var(--hiz-space-1, 4px);
	font-size: 13px;
	color: var(--hiz-color-muted);
}

/* De prijs komt uit WooCommerce en brengt zijn eigen opmaak mee. */
.hiz-soort__prijs .woocommerce-Price-amount {
	font: inherit;
	color: inherit;
}

/* ----------------------------------------------- uitgelichte ontwerpen */

/*
 * Vier kaarten per rij vanaf 1024 px. Op 375 px is dit een horizontale snap-strook van ongeveer
 * 2,2 kaarten breed: acht kaarten onder elkaar zijn daar vier schermen scrollen, in een strook
 * passen ze in één (visuele standaard, §Mobiel). De strook is met het toetsenbord bereikbaar
 * omdat elke kaart zelf een link is.
 */
.hiz-home-drops .hiz-grid--producten {
	gap: var(--hiz-space-4, 16px);
}

@media (max-width: 767px) {
	.hiz-home-drops .hiz-grid--producten {
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--hiz-space-3, 12px);
	}

	.hiz-home-drops .hiz-grid--producten > * {
		scroll-snap-align: start;
	}
}

@media (min-width: 768px) {
	.hiz-home-drops .hiz-grid--producten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-home-drops .hiz-grid--producten {
		gap: var(--hiz-space-5, 24px);
	}
}

/* Kaart volgens de standaard: wit vlak op papier, radius md, geen rand, beeld bovenaan met
   vaste verhouding, inhoud met 12/16 padding. */
.hiz-home-drops .hiz-card {
	overflow: hidden;
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white);
}

.hiz-home-drops .hiz-card__link {
	gap: 0;
	padding-bottom: var(--hiz-space-4, 16px);
}

.hiz-home-drops .hiz-card__media {
	margin-bottom: var(--hiz-space-3, 12px);
	border-radius: 0;
}

.hiz-home-drops .hiz-card__link > *:not(.hiz-card__media) {
	margin-inline: var(--hiz-space-4, 16px);
}

.hiz-home-drops .hiz-card__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.hiz-home-drops .hiz-card__meta {
	margin-top: var(--hiz-space-1, 4px);
	font-size: 13px;
}

.hiz-home-drops .hiz-card__price {
	margin-top: var(--hiz-space-1, 4px);
	font-size: 15px;
	font-weight: 700;
}

/* Kleurstippen: laat in één oogopslag zien dat één ontwerp meerdere kleuren heeft. De stippen
   dragen zelf geen informatie (aria-hidden); het aantal staat er in woorden bij. */
.hiz-card__kleuren {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-1, 4px);
	margin: var(--hiz-space-2, 8px) 0 0;
	font-size: 13px;
	color: var(--hiz-color-muted);
}

.hiz-card__stip {
	display: inline-block;
	width: var(--hiz-space-3, 12px);
	height: var(--hiz-space-3, 12px);
	border-radius: var(--hiz-radius-pill);
	background: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgba(30, 35, 82, 0.18);
}

.hiz-card__stip--licht {
	box-shadow: inset 0 0 0 1px rgba(30, 35, 82, 0.4);
}

.hiz-card__kleuren-n {
	margin-left: var(--hiz-space-1, 4px);
	font-size: 13px;
}

/* Eén actie per sectie, gecentreerd onder het raster. */
.hiz-home-sectie .hiz-section__actie {
	margin: var(--hiz-space-6, 32px) 0 0;
	text-align: center;
}

/* --------------------------------------------------------------- panelen */

/*
 * Eén paneelvorm voor de startpagina (standaard, "Panelen"): Link Water of wit, radius lg,
 * padding `--hiz-space-6`. Vervangt het donkere Editions-vlak en de losse FAQ-lijst.
 */
.hiz-paneel {
	padding: var(--hiz-space-6, 32px);
	border-radius: var(--hiz-radius-lg, 24px);
}

@media (min-width: 768px) {
	.hiz-paneel {
		padding: var(--hiz-space-7, 48px);
	}
}

.hiz-paneel--licht {
	background: var(--hiz-color-mint);
}

.hiz-paneel--wit {
	background: var(--hiz-color-white);
}

.hiz-paneel--smal {
	max-width: 52rem;
}

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

/* --------------------------------------------------------- zo maken we het */

/*
 * Tweede naamsbotsing met `woo.css`: daar is `.hiz-stappen` de voortgangsbalk van het afrekenen
 * (flexrij, Barlow Condensed, hoofdletters). Op de startpagina is het de genummerde
 * verhaalreeks. `woo.css` laadt op de startpagina mee en ná dit bestand, dus de drie stappen
 * stonden in condensed hoofdletters. De regels hieronder staan daarom onder `.hiz-home-maken`
 * en zetten expliciet terug wat `woo.css` erop plakt. Zie het PR-document: één van beide hoort
 * een eigen naam te krijgen.
 */
.hiz-home-maken .hiz-stappen {
	counter-reset: hiz-stap;
	display: grid;
	gap: var(--hiz-space-5, 24px);
	margin: var(--hiz-space-6, 32px) 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--hiz-font-body);
	font-size: var(--hiz-text-md, 16px);
	letter-spacing: 0;
	text-transform: none;
}

.hiz-home-maken .hiz-stappen > li {
	position: relative;
	padding-left: var(--hiz-space-8, 64px);
}

.hiz-home-maken .hiz-stappen > li::before {
	counter-increment: hiz-stap;
	content: counter(hiz-stap, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-h4, 17px);
	font-weight: 800;
	letter-spacing: 0.06em;
	/* Niet oranje: Pow Orange is op de startpagina voorbehouden aan de ene primaire actie (de
	   knop "Zoek" in de hero). Twee genummerde reeksen in twee accentkleuren maakten de pagina
	   onrustig; beide reeksen staan nu in Bright Slate-licht. */
	color: var(--hiz-color-fern);
	line-height: 1.4;
}

.hiz-home-maken .hiz-stappen h3 {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-transform: none;
}

.hiz-home-maken .hiz-stappen p {
	margin: 0;
	font-size: var(--hiz-text-md, 16px);
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hiz-color-pine);
}

.hiz-maken__kop {
	max-width: var(--hiz-measure, 64ch);
}

.hiz-maken .hiz-section__head {
	margin-bottom: 0;
}

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

.hiz-home-maken .hiz-stappen--kolommen {
	margin-top: var(--hiz-space-6, 32px);
	padding-top: var(--hiz-space-6, 32px);
	border-top: 1px solid var(--hiz-color-line);
}

@media (min-width: 768px) {
	.hiz-home-maken .hiz-stappen--kolommen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hiz-space-6, 32px);
	}
}

/* Met foto: twee kolommen 6/6 (standaard, "Container en maat"). */
.hiz-home-maken .hiz-maken__kolommen {
	gap: var(--hiz-space-7, 48px);
}

.hiz-home-maken .hiz-media__img {
	max-block-size: 60vh;
}

/* --------------------------------------------------------- HIZ Studio-blok */

.hiz-home-studio .hiz-principes {
	gap: var(--hiz-space-5, 24px);
	margin-top: var(--hiz-space-6, 32px);
}

.hiz-home-studio .hiz-principes > li {
	border-top-width: 1px;
	padding-top: var(--hiz-space-4, 16px);
}

.hiz-home-studio .hiz-principes > li::before {
	font-size: var(--hiz-h4, 17px);
	margin-bottom: var(--hiz-space-2, 8px);
}

.hiz-home-studio .hiz-principes h3 {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
}

.hiz-home-studio .hiz-principes p {
	margin: 0;
	font-size: var(--hiz-text-md, 16px);
	line-height: 1.6;
	color: var(--hiz-color-pine);
}

/* -------------------------------------------------------------------- FAQ */

/* Uniforme uitklappers in één wit paneel: dezelfde regelafstand, dezelfde koptekstgrootte en
   één lijn per vraag. De laatste vraag krijgt ook een onderlijn, zodat de reeks afsluit. */
.hiz-home-faq .hiz-accordeon summary {
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	letter-spacing: -0.01em;
	padding-block: var(--hiz-space-4, 16px);
}

.hiz-home-faq .hiz-accordeon > :not(summary) {
	margin-block: 0 var(--hiz-space-4, 16px);
	max-width: var(--hiz-measure, 64ch);
	font-size: var(--hiz-text-md, 16px);
	line-height: 1.6;
	color: var(--hiz-color-pine);
}

.hiz-home-faq .hiz-faq > .hiz-accordeon:last-child {
	border-bottom: 1px solid var(--hiz-color-line);
}

/* ---------------------------------------------------------- plaatsenkaart */

/*
 * Vanaf 1024 px: de kaart links (minimaal 420 px breed) en rechts één paneel met het zoekveld,
 * de grootste collecties en de provinciechips. Daarvoor stonden die drie als losse blokken naar
 * en onder de kaart, met vier verschillende uitlijningen in één sectie (auditpunt 4 en 7).
 */
.hiz-kaart {
	display: grid;
	gap: var(--hiz-space-5, 24px);
}

.hiz-kaart__kolommen {
	display: grid;
	gap: var(--hiz-space-5, 24px);
	align-items: start;
}

/* Onder 1024 px staat het paneel voorop en de knop "Toon kaart" eronder: eerst zoeken en
   kiezen, dan pas de tekening. De DOM-volgorde blijft kaart → paneel, want daar staat de kaart
   links. */
.hiz-kaart__kaartblok {
	order: 2;
}

@media (min-width: 1024px) {
	.hiz-kaart__kolommen {
		grid-template-columns: minmax(420px, 5fr) minmax(0, 7fr);
		gap: var(--hiz-space-7, 48px);
	}

	.hiz-kaart__kaartblok {
		order: 0;
	}
}

.hiz-kaart__paneel-kiezen {
	display: grid;
	gap: var(--hiz-space-5, 24px);
	align-content: start;
	padding: var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-mint);
}

@media (min-width: 768px) {
	.hiz-kaart__paneel-kiezen {
		padding: var(--hiz-space-6, 32px);
	}
}

.hiz-kaart__zoek {
	display: grid;
	gap: var(--hiz-space-2, 8px);
	max-width: var(--hiz-measure-form, 40rem);
}

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

.hiz-kaart__zoek-label {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-kaart__zoek-input {
	min-height: var(--hiz-control);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-white);
}

.hiz-kaart__zoek-status {
	margin: 0;
	min-height: 1.5rem;
	font-size: 13px;
	color: var(--hiz-color-muted);
}

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

/* De grootste collecties: meteen zes echte plaatsen, ook voordat iemand een provincie kiest. */
.hiz-kaart__populair-kop,
.hiz-kaart__knoppen-kop {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-family: var(--hiz-font-code);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
}

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

.hiz-kaart__populair-lijst a {
	text-decoration: none;
}

/* De kaart zelf: op smalle schermen ingeklapt achter "Toon kaart", daarboven open en zonder
   knop. `view.js` zet het `<details>` open zodra er ruimte voor is. */
.hiz-kaart__kaartblok[hidden] {
	display: none;
}

.hiz-kaart__kaartknop {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch);
	padding: 0 var(--hiz-space-5, 24px);
	border: 1px solid var(--hiz-color-forest);
	border-radius: var(--hiz-radius-pill);
	font-size: 15px;
	font-weight: 600;
	color: var(--hiz-color-forest);
	cursor: pointer;
	list-style: none;
}

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

.hiz-kaart__kaartblok[open] .hiz-kaart__kaartknop::after {
	content: "–";
}

.hiz-kaart__kaartknop::after {
	content: "+";
	font-family: var(--hiz-font-code);
	font-weight: 700;
}

.hiz-kaart__figuur {
	margin: var(--hiz-space-4, 16px) 0 0;
}

@media (min-width: 1024px) {
	.hiz-kaart__kaartknop {
		display: none;
	}

	.hiz-kaart__figuur {
		margin-top: 0;
	}
}

.hiz-kaart__svg {
	display: block;
	width: 100%;
	max-block-size: 420px;
	height: auto;
	margin-inline: auto;
	overflow: visible;
}

.hiz-kaart__pad {
	fill: var(--hiz-color-sage);
	stroke: var(--hiz-color-paper);
	stroke-width: 2;
	stroke-linejoin: round;
	cursor: pointer;
	transition: fill var(--hiz-motion-fast) var(--hiz-ease);
}

.hiz-kaart__pad:hover {
	fill: var(--hiz-color-fern);
}

.hiz-kaart__pad--leeg {
	fill: rgba(59, 68, 151, 0.08);
	cursor: default;
}

.hiz-kaart__pad.is-actief {
	fill: var(--hiz-color-forest);
}

.hiz-kaart__punt {
	font-family: var(--hiz-font-code);
	font-size: 15px;
	font-weight: 800;
	fill: var(--hiz-color-forest);
	cursor: pointer;
	pointer-events: none;
}

.hiz-kaart__punt.is-actief {
	fill: var(--hiz-color-white);
}

.hiz-kaart__bijschrift {
	margin: var(--hiz-space-2, 8px) 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--hiz-color-muted);
	text-align: center;
}

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

/*
 * Chips, pill, 14 px. De visuele standaard noemt 36 px (mobiel 40); `docs/agents/werkafspraken.md`
 * eist tikdoelen van minimaal 44 px en `tools/qa/a11y-check.mjs` meet daarop. Bij die twee regels
 * wint de tikdoelmaat: 40 px chips leverden 26 meldingen op waar ronde 4 er 4 had. De chip houdt
 * dus 44 px hoogte; de rest van de vorm (pill, 1 px lijn, 14 px tekst) volgt de standaard.
 */
.hiz-kaart__knop {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch);
	padding: 0 var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font: inherit;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--hiz-motion-fast) var(--hiz-ease), color var(--hiz-motion-fast) var(--hiz-ease);
}

.hiz-kaart__knop:hover {
	background: var(--hiz-color-sage);
}

.hiz-kaart__knop[aria-pressed="true"] {
	background: var(--hiz-color-forest);
	border-color: var(--hiz-color-forest);
	color: var(--hiz-color-white);
}

/* Op het donkere vlak van de gekozen provincie is een blauwe focusring niet te zien. */
.hiz-kaart__knop[aria-pressed="true"]:focus-visible {
	outline-color: var(--hiz-color-lemon);
}

.hiz-kaart__knop-n {
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	/* 0,85 i.p.v. 0,75: bij 0,75 zakt forest-tekst op papier onder 4,5:1 (WCAG 1.4.3). */
	opacity: 0.85;
}

/* Provincie zonder plaatsen: knop blijft aanklikbaar (geen disabled), dus 0,85 i.p.v. 0,65. */
.hiz-kaart__knop--leeg {
	opacity: 0.85;
}

/* Panelen ------------------------------------------------------------------ */

.hiz-kaart__panelen {
	display: grid;
	gap: var(--hiz-space-2, 8px);
}

.hiz-kaart__paneel {
	border-top: 1px solid var(--hiz-color-line);
	padding-top: var(--hiz-space-3, 12px);
}

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

.hiz-kaart__samenvatting {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hiz-space-3, 12px);
	min-height: var(--hiz-touch);
	padding: var(--hiz-space-1, 4px) 0;
	cursor: pointer;
	list-style: none;
}

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

.hiz-kaart__provincie {
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.hiz-kaart__provincie-n {
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-sm, 14px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
}

/* Met JavaScript kiest de bezoeker via de knoppen of de kaart. De samenvatting blijft staan als
   kop boven de lijst, maar hoeft dan niet meer als knop te ogen. */
.hiz-kaart--js .hiz-kaart__samenvatting {
	cursor: default;
}

.hiz-kaart__plaatsen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-1, 4px);
	margin: var(--hiz-space-2, 8px) 0 var(--hiz-space-3, 12px);
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.hiz-kaart__plaatsen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-kaart__plaatsen {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

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

.hiz-kaart__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch);
	padding: var(--hiz-space-2, 8px) var(--hiz-space-3, 12px);
	border-radius: var(--hiz-radius-sm, 10px);
	color: var(--hiz-color-forest);
	text-decoration: none;
}

.hiz-kaart__link:hover,
.hiz-kaart__link:focus-visible {
	background: var(--hiz-color-mint);
}

.hiz-kaart__naam {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.hiz-kaart__aantal {
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-sm, 14px);
	letter-spacing: 0.04em;
	color: var(--hiz-color-muted);
}

.hiz-kaart__leeg {
	margin: var(--hiz-space-2, 8px) 0 var(--hiz-space-3, 12px);
	color: var(--hiz-color-muted);
}

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

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

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

/* ---------------------------------------------------------- blog-teaser */

.hiz-berichtenlijst .wp-block-post-template {
	gap: var(--hiz-space-5, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-berichtenlijst .wp-block-post-template > li > * {
	margin-block: var(--hiz-space-2, 8px);
}

.hiz-berichtenlijst .wp-block-post-featured-image img {
	border-radius: var(--hiz-radius-md, 16px);
}

.hiz-berichtenlijst .wp-block-post-title {
	font-size: var(--hiz-h4, 17px);
}

.hiz-berichtenlijst .wp-block-post-title a {
	color: var(--hiz-color-forest);
	text-decoration: none;
}

.hiz-berichtenlijst .wp-block-post-title a:hover,
.hiz-berichtenlijst .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

.hiz-berichtenlijst .wp-block-post-date {
	font-size: 13px;
	color: var(--hiz-color-muted);
}

/* ------------------------------------------------------------- beweging uit */

@media (prefers-reduced-motion: reduce) {
	.hiz-soort__beeld img,
	.hiz-kaart__pad,
	.hiz-kaart__knop {
		transition: none;
	}

	.hiz-soort__link:hover .hiz-soort__beeld img,
	.hiz-soort__link:focus-visible .hiz-soort__beeld img {
		transform: none;
	}

	.hiz-home-drops .hiz-grid--producten {
		scroll-behavior: auto;
	}
}