/*
 * HIZ – inhoudspagina's (ronde 5, visuele standaard).
 *
 * Eén stelsel voor Studio, Voor makers, Voor winkels, Over ons, Contact, de juridische
 * pagina's, Verhalen, Agenda en de archieven/details van makers, Editions en verkooppunten.
 * Alles staat onder `.hiz-pagina`, de klasse die de sjablonen op `<main>` zetten; daardoor
 * raakt dit bestand nooit de home, de catalogus, de productpagina of het afrekenen.
 *
 * Regels komen uit docs/agents/visuele-standaard.md:
 * - alleen tokens uit die standaard, met een tijdelijke fallback zolang V0 hiz.css herschrijft;
 * - sectiekop altijd gestapeld en links; ruimte tussen secties alleen via margin-top;
 * - kaarten wit, radius md, padding space-6, nummer als eyebrow;
 * - lopende tekst op measure, leads op measure-lead, formulieren op measure-form;
 * - beeld met vaste verhouding, sfeerbeeld nooit hoger dan 60vh, lege mediarol een band
 *   van maximaal 120 px in plaats van een leeg vlak.
 *
 * De drie waarden hieronder staan niet in de tokenlijst van de standaard maar wél als eis in
 * de pagina-eisen; ze staan daarom hier als lokale variabele in plaats van los in de regels.
 */

.hiz-pagina {
	/* Pagina-eis "rekentool als wit paneel max 720 px". */
	--hiz-paneel-breed: 45rem;
	/* Pagina-eis "H1 ≤ 44 px" op Over ons, Contact en de juridische pagina's. */
	--hiz-h1-prose: clamp(1.75rem, 3.4vw, 2.75rem);
	/* Pagina-eis "lege staat nooit een vlak groter dan 120 px". */
	--hiz-leeg-band: 7.5rem;
	/* Pagina-eis "sfeerbeeld max-height 60vh". */
	--hiz-beeld-max: 60vh;
}

/* --------------------------------------------------------------- ritme van de secties */

/*
 * Nooit padding-bottom van de ene sectie én margin-top van de volgende (standaard §Spacing).
 * De secties in de patterns hebben daarom geen eigen padding meer; de afstand komt hier
 * vandaan, één keer, als margin-top.
 */
.hiz-pagina .hiz-section,
.hiz-pagina .hiz-sectie {
	padding-block: 0;
	margin-block: var(--hiz-section-gap, clamp(3rem, 7vw, 6rem)) 0;
}

.hiz-pagina .hiz-section:first-child,
.hiz-pagina .hiz-sectie:first-child,
.hiz-pagina .entry-content > .hiz-section:first-child {
	margin-block-start: 0;
}

/*
 * Sommige blokken uit hiz-platform (winkelaanvraag, rekentool) renderen zelf een
 * `<section class="hiz-section">`. Die staat binnen een sectie van het pattern en hoort
 * dus geen tweede sectie-afstand te krijgen; de gewone blokafstand hieronder is genoeg.
 */
.hiz-pagina .hiz-section .hiz-section {
	margin-block: 0;
	padding-block: 0;
}

/* De eerste sectie op een pagina houdt alleen ruimte tussen de header en de kop. */
.hiz-pagina > .hiz-section:first-child,
.hiz-pagina > .hiz-intro:first-child {
	margin-block-start: var(--hiz-space-7, 3rem);
}

.hiz-pagina {
	padding-bottom: var(--hiz-section-gap, clamp(3rem, 7vw, 6rem));
}

/*
 * Binnen een sectie: één vaste afstand tussen de blokken (standaard §Spacing, "kop-blok →
 * inhoud 32 px"). Zo hangt het ritme niet meer af van `--wp--style--block-gap`, dat per blok
 * verschilt. Aangrenzende marges klappen samen, dus de kop telt niet dubbel.
 */
.hiz-pagina .hiz-section > * + *,
.hiz-pagina .hiz-sectie > * + * {
	margin-block-start: var(--hiz-space-6, 2rem);
}

/* ------------------------------------------------------------------ koppen van secties */

/* De standaard wil de sectiekop altijd gestapeld en links, ook op 1280 en 1536 px. */
.hiz-pagina .hiz-section__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hiz-space-3, 0.75rem);
	margin-bottom: var(--hiz-space-6, 2rem);
	text-align: left;
}

.hiz-pagina .hiz-section__head > * {
	margin-block: 0;
	margin-inline: 0;
}

.hiz-pagina .hiz-section__title {
	margin: 0;
	font-size: var(--hiz-h2, clamp(1.625rem, 3vw, 2.25rem));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/*
 * `!important` op de marge: de constrained-layout van WordPress centreert elk kind dat
 * smaller is dan de container, waardoor een lead onder een kop half gecentreerd kwam te
 * staan. Zelfde reden en zelfde oplossing als bij `.hiz-section__lead` in hiz.css.
 */
.hiz-pagina .hiz-section__lead,
.hiz-pagina .hiz-section__head .hiz-section__lead,
.hiz-pagina .hiz-lead {
	margin-block-end: 0;
	margin-inline: 0 auto !important;
	max-width: var(--hiz-measure-lead, 54ch);
	font-size: var(--hiz-text-lg, clamp(1.0625rem, 1.6vw, 1.1875rem));
	line-height: 1.55;
}

/* Een kop die niet in een `.hiz-section__head` zit, krijgt dezelfde ruimte eronder. */
.hiz-pagina .hiz-section > .hiz-section__title {
	margin-bottom: var(--hiz-space-3, 0.75rem);
}

.hiz-pagina .hiz-section > .hiz-section__lead {
	margin-bottom: var(--hiz-space-6, 2rem);
}

.hiz-pagina .hiz-eyebrow {
	display: block;
	margin: 0;
	font-family: var(--hiz-font-code, "Barlow Condensed", sans-serif);
	font-size: var(--hiz-eyebrow-size, 0.75rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--hiz-color-muted, #545A7E);
}

/* --------------------------------------------------------------------- paginatitel (H1) */

.hiz-pagina .hiz-paginatitel,
.hiz-pagina .wp-block-post-title,
.hiz-pagina .wp-block-query-title {
	margin: 0;
	font-size: var(--hiz-h1, clamp(2rem, 4.5vw, 3.25rem));
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

/* Op tekstpagina's blijft de H1 kleiner: de standaard zet daar 44 px als bovengrens. */
.hiz-pagina--prose .hiz-paginatitel,
.hiz-pagina--prose .wp-block-post-title,
.hiz-pagina--prose .wp-block-query-title {
	font-size: var(--hiz-h1-prose);
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/*
 * Livegang (LQ): de titelgroep is 46 rem breed (contentSize van `page-content.html`), de
 * tekstkolom eronder werd 64ch óf 46 rem, afhankelijk van welke stijl als laatste werd
 * afgedrukt (`.hiz-prose` in hiz.css tegen de container-regel van WordPress, zelfde
 * specificiteit). Beide staan gecentreerd, dus op voorwaarden, privacy, cookies, verzenden,
 * contact en bedankt begon de H1 56 px links van de tekst (1280 px). De kolom is nu altijd
 * 46 rem; de alinea's erin blijven op 64ch en staan links, dus titel en tekst lijnen uit.
 */
.hiz-pagina--prose > .hiz-prose {
	max-width: 46rem;
	/* Kop-blok → inhoud: 32 px (standaard §Spacing); het was 16 px, waardoor een H2 als
	   eerste regel (bv. /bedankt/) tegen de H1 aan plakte. */
	margin-block-start: var(--hiz-space-6, 2rem);
}

/* -------------------------------------------------------------- intro in twee kolommen */

/*
 * 7/5 vanaf 1024 px (standaard §Container en maat). Zonder beeld wordt het een compact
 * paneel in plaats van een halve, lege kolom.
 */
.hiz-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-6, 2rem);
	align-items: start;
}

/*
 * Twee kolommen alleen als er ook echt iets in de tweede kolom staat: een foto, of het
 * compacte paneel dat in de plaats komt van een lege mediarol. Anders blijft de intro één
 * kolom in plaats van tekst in 7/12 met een leeg vlak ernaast.
 */
@media (min-width: 1024px) {
	.hiz-intro--met-beeld:has(.hiz-intro__beeld img),
	.hiz-intro--met-beeld:has(.hiz-media-leeg) {
		grid-template-columns: 7fr 5fr;
		gap: var(--hiz-space-7, 3rem);
		align-items: center;
	}
}

.hiz-intro:not(:has(.hiz-intro__beeld img)) .hiz-intro__beeld {
	display: none;
}

.hiz-intro__tekst {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hiz-space-4, 1rem);
	min-width: 0;
}

.hiz-intro__tekst > * {
	margin: 0;
	max-width: var(--hiz-measure-lead, 54ch);
}

.hiz-intro__tekst .hiz-paginatitel,
.hiz-intro__tekst .hiz-section__title {
	max-width: 20ch;
}

.hiz-intro__tekst .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-3, 0.75rem);
	margin-top: var(--hiz-space-2, 0.5rem);
}

.hiz-intro__beeld {
	min-width: 0;
	margin: 0;
}

.hiz-intro__beeld .hiz-media,
.hiz-intro__beeld figure {
	margin: 0;
}

.hiz-intro__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: var(--hiz-beeld-max);
	object-fit: cover;
	border-radius: var(--hiz-radius-lg, var(--hiz-radius-large, 1.5rem));
}

/*
 * Zonder beeld: een compact paneel met de kernpunten in plaats van een lege kolom
 * (standaard §Vorm, "Lege staat"). Het blok `hiz/media` rendert dan `.hiz-media-leeg`;
 * daarop kan de intro zichzelf omschakelen.
 */
.hiz-intro__paneel {
	display: none;
}

.hiz-intro:has(.hiz-media-leeg) .hiz-intro__beeld {
	display: none;
}

.hiz-intro:has(.hiz-media-leeg) .hiz-intro__paneel {
	display: block;
}

.hiz-intro__paneel {
	margin: 0;
	padding: var(--hiz-space-6, 2rem);
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
	background: var(--hiz-color-mint, #D3D9EB);
}

.hiz-intro__paneel > :first-child {
	margin-top: 0;
}

.hiz-intro__paneel > :last-child {
	margin-bottom: 0;
}

.hiz-intro__paneel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--hiz-space-3, 0.75rem);
}

/* ------------------------------------------------------------------------- sfeerbeeld */

.hiz-sfeerbeeld {
	margin: var(--hiz-space-6, 2rem) 0 0;
}

.hiz-sfeerbeeld img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: var(--hiz-beeld-max);
	object-fit: cover;
	border-radius: var(--hiz-radius-lg, var(--hiz-radius-large, 1.5rem));
}

.hiz-sfeerbeeld figcaption,
.hiz-intro__beeld figcaption {
	margin-top: var(--hiz-space-2, 0.5rem);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}

/*
 * Lege mediarol: een band van maximaal 120 px met het monogram, nooit een vlak van 300–450 px
 * (audit-punt 3 van de standaard).
 */
.hiz-pagina .hiz-media-leeg,
.hiz-pagina .hiz-media-vlak {
	aspect-ratio: auto;
	height: var(--hiz-leeg-band);
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
	background-size: auto 45%;
}

/* --------------------------------------------------------------------------- kaarten */

/*
 * Drie (of vier) gelijke kaarten: wit, radius md, padding space-6, nummer als eyebrow.
 * De oude klassen uit de Studio-patterns doen mee, zodat er één kaartvorm op de site staat.
 */
.hiz-pagina :is(.hiz-kaarten, .hiz-tiers, .hiz-doelgroepen, .hiz-proces) {
	--hiz-kolommen: 3;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-4, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-pagina .hiz-kaarten--4,
.hiz-pagina .hiz-doelgroepen {
	--hiz-kolommen: 4;
}

.hiz-pagina .hiz-kaarten--2 {
	--hiz-kolommen: 2;
}

@media (min-width: 640px) {
	.hiz-pagina :is(.hiz-kaarten, .hiz-tiers, .hiz-doelgroepen, .hiz-proces) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-pagina :is(.hiz-kaarten, .hiz-tiers, .hiz-doelgroepen, .hiz-proces) {
		grid-template-columns: repeat(var(--hiz-kolommen), minmax(0, 1fr));
		gap: var(--hiz-space-5, 1.5rem);
	}
}

/*
 * Vier korte kaarten passen op 375 px in twee kolommen; dat scheelt op mobiel bijna een
 * halve schermlengte (standaard §Mobiel, "Grids 2 kolommen"). Drie kaarten met lopende
 * tekst (de Studio-niveaus) blijven onder elkaar staan, anders wordt de regel te smal.
 */
@media (min-width: 400px) and (max-width: 639px) {
	.hiz-pagina :is(.hiz-kaarten--4, .hiz-doelgroepen, .hiz-proces) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.hiz-pagina :is(.hiz-kaart, .hiz-tier, .hiz-doelgroep, .hiz-stap) {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 0.5rem);
	margin: 0;
	/* Mobiel iets compacter: 24 px in plaats van 32 px (standaard §Mobiel). */
	padding: var(--hiz-space-5, 1.5rem);
	border: 0;
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
	background: var(--hiz-color-white, #fff);
}

@media (min-width: 640px) {
	.hiz-pagina :is(.hiz-kaart, .hiz-tier, .hiz-doelgroep, .hiz-stap) {
		padding: var(--hiz-space-6, 2rem);
	}
}

.hiz-pagina :is(.hiz-kaart, .hiz-tier, .hiz-doelgroep, .hiz-stap) > * {
	margin: 0;
}

.hiz-pagina :is(.hiz-kaart__nr, .hiz-tier__nr, .hiz-doelgroep__nr, .hiz-stap__nr) {
	color: var(--hiz-color-fern, #4C56AE);
}

.hiz-pagina :is(.hiz-kaart__titel, .hiz-tier__naam, .hiz-doelgroep__titel, .hiz-stap__titel) {
	font-size: var(--hiz-h3, clamp(1.1875rem, 1.8vw, 1.375rem));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.hiz-pagina :is(.hiz-kaart__kop, .hiz-tier__kop) {
	font-weight: 600;
}

.hiz-pagina :is(.hiz-kaart__tekst, .hiz-tier__tekst, .hiz-doelgroep__tekst, .hiz-stap__tekst) {
	color: var(--hiz-color-muted, #545A7E);
	/* Kaartinhoud staat op mobiel op 14 px (standaard §Mobiel), daarboven op 16 px. */
	font-size: var(--hiz-text-sm, 0.875rem);
	line-height: 1.55;
}

@media (min-width: 640px) {
	.hiz-pagina :is(.hiz-kaart__tekst, .hiz-tier__tekst, .hiz-doelgroep__tekst, .hiz-stap__tekst) {
		font-size: var(--hiz-text-md, 1rem);
		line-height: 1.6;
	}
}

.hiz-pagina :is(.hiz-kaart, .hiz-tier) ul {
	margin: 0;
	padding-left: var(--hiz-space-5, 1.5rem);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-md, 1rem);
}

.hiz-pagina :is(.hiz-kaart, .hiz-tier) li + li {
	margin-top: var(--hiz-space-1, 0.25rem);
}

/* ------------------------------------------------------------------------- beeldrij */

/* Een rij sfeerfoto's naast elkaar: vaste verhouding, gelijke hoogte, geen losse vlakken. */
.hiz-beeldrij {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hiz-space-4, 1rem);
	margin-block: var(--hiz-space-5, 1.5rem);
}

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

	.hiz-beeldrij--zes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hiz-beeldrij .hiz-media {
	margin: 0;
}

.hiz-beeldrij img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
}

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

/*
 * Op 375 px is 32 px paneelpadding aan beide kanten een tiende van het scherm: velden en
 * regels worden dan zo smal dat een formulier honderden pixels langer wordt. Mobiel dus
 * 16 px, vanaf 640 px de 32 px uit de standaard.
 */
.hiz-paneel {
	box-sizing: border-box;
	margin: 0;
	padding: var(--hiz-space-4, 1rem);
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
	background: var(--hiz-color-white, #fff);
}

@media (min-width: 640px) {
	.hiz-paneel {
		padding: var(--hiz-space-6, 2rem);
	}
}

.hiz-paneel--mint {
	background: var(--hiz-color-mint, #D3D9EB);
}

.hiz-paneel > * + * {
	margin-top: var(--hiz-space-5, 1.5rem);
}

.hiz-paneel > :first-child {
	margin-top: 0;
}

/* In een paneel is de kop een niveau kleiner; anders vecht hij met de sectiekop erboven. */
.hiz-pagina .hiz-paneel .hiz-section__title,
.hiz-pagina .hiz-faq .hiz-section__title {
	font-size: var(--hiz-h3, clamp(1.1875rem, 1.8vw, 1.375rem));
	letter-spacing: -0.015em;
}

.hiz-paneel > :last-child {
	margin-bottom: 0;
}

/*
 * Formulier: max 640 px in een wit paneel. De eis geldt voor het formulier zelf, dus telt
 * de padding van het paneel er aan beide kanten bij op; anders zouden de velden 576 px
 * breed worden en wordt het formulier onnodig lang.
 */
.hiz-paneel--formulier {
	max-width: calc(var(--hiz-measure-form, 40rem) + 2 * var(--hiz-space-6, 2rem));
}

/* Rekentool: wit paneel, max 720 px. */
.hiz-paneel--breed {
	max-width: var(--hiz-paneel-breed);
}

/* FAQ hoort in een paneel, niet als losse lijst (audit-punt 7). */
.hiz-pagina .hiz-faq {
	padding: var(--hiz-space-6, 2rem);
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
	background: var(--hiz-color-white, #fff);
}

.hiz-pagina .hiz-faq > :first-child {
	margin-top: 0;
}

.hiz-pagina .hiz-faq > :last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- lopende tekst */

/*
 * `!important` is hier nodig omdat de constrained-layout van WordPress `margin-left/right: auto`
 * op smalle kinderen zet; zonder dit staat elke alinea gecentreerd in plaats van links onder de
 * kop. Zelfde reden als bij `.hiz-section__lead` in hiz.css.
 */
.hiz-prose > * {
	max-width: var(--hiz-measure, 64ch);
	margin-inline: 0 auto !important;
}

/* Structuur mag wél de volle kolom gebruiken; alleen lopende tekst blijft op measure. */
.hiz-prose > :is(.hiz-section, .hiz-paneel, .hiz-faq, .hiz-kaarten, .hiz-contact__paneel, .hiz-sfeerbeeld, .wp-block-columns, .wp-block-table, figure) {
	max-width: none;
}

.hiz-prose :is(p, li, h2, h3, h4, blockquote) {
	max-width: var(--hiz-measure, 64ch);
}

.hiz-prose .hiz-media,
.hiz-prose figure {
	margin-block: var(--hiz-space-5, 1.5rem);
}

.hiz-prose .hiz-media img,
.hiz-prose > figure img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: var(--hiz-beeld-max);
	object-fit: cover;
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
}

.hiz-prose > :first-child {
	margin-top: 0;
}

.hiz-prose p,
.hiz-prose li {
	font-size: var(--hiz-text-md, 1rem);
	line-height: 1.6;
}

.hiz-prose p {
	margin-block: 0 var(--hiz-space-4, 1rem);
}

.hiz-prose h2 {
	margin-block: var(--hiz-space-7, 3rem) var(--hiz-space-3, 0.75rem);
	font-size: var(--hiz-h2, clamp(1.625rem, 3vw, 2.25rem));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.hiz-prose h3 {
	margin-block: var(--hiz-space-6, 2rem) var(--hiz-space-2, 0.5rem);
	font-size: var(--hiz-h3, clamp(1.1875rem, 1.8vw, 1.375rem));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.hiz-prose h4 {
	margin-block: var(--hiz-space-5, 1.5rem) var(--hiz-space-2, 0.5rem);
	font-size: var(--hiz-h4, 1.0625rem);
	font-weight: 600;
	line-height: 1.35;
}

.hiz-prose ul,
.hiz-prose ol {
	margin-block: 0 var(--hiz-space-4, 1rem);
	padding-left: var(--hiz-space-5, 1.5rem);
}

.hiz-prose li + li {
	margin-top: var(--hiz-space-2, 0.5rem);
}

.hiz-prose img {
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
}

/* Tabellen: alleen horizontale lijnen, geen buitenrand (standaard §Componenten). */
.hiz-pagina table,
.hiz-prose table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
}

.hiz-pagina :is(table th, table td),
.hiz-prose :is(table th, table td) {
	padding: var(--hiz-space-3, 0.75rem) var(--hiz-space-4, 1rem) var(--hiz-space-3, 0.75rem) 0;
	border: 0;
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	text-align: left;
	vertical-align: top;
}

.hiz-pagina table th,
.hiz-prose table th {
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 600;
}

.hiz-pagina table tr:last-child :is(th, td),
.hiz-prose table tr:last-child :is(th, td) {
	border-bottom: 0;
}

.hiz-pagina .wp-block-table,
.hiz-prose .wp-block-table {
	margin-block: 0 var(--hiz-space-5, 1.5rem);
	overflow-x: auto;
}

.hiz-pagina .wp-block-table figcaption,
.hiz-prose .wp-block-table figcaption {
	margin-top: var(--hiz-space-2, 0.5rem);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
	text-align: left;
}

/* --------------------------------------------------------------- contact in kolommen */

.hiz-contact__kolommen {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-5, 1.5rem);
}

@media (min-width: 768px) {
	.hiz-contact__kolommen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hiz-space-6, 2rem);
	}
}

.hiz-contact__kolom > * + * {
	margin-top: var(--hiz-space-3, 0.75rem);
}

.hiz-contact__kolom > :first-child {
	margin-top: 0;
}

.hiz-contact__kolom > :last-child {
	margin-bottom: 0;
}

.hiz-contact__kolom h3 {
	margin-block: var(--hiz-space-5, 1.5rem) var(--hiz-space-1, 0.25rem);
	font-size: var(--hiz-h4, 1.0625rem);
	font-weight: 600;
}

.hiz-contact__kolom > h3:first-of-type {
	margin-top: 0;
}

.hiz-contact__kolom address {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
}

.hiz-pagina .hiz-contact__kanalen {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--hiz-space-4, 1rem);
}

.hiz-pagina .hiz-contact__kanalen li + li {
	margin-top: 0;
}

.hiz-contact__termijn {
	display: block;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
	line-height: 1.5;
}

.hiz-contact__zakelijk {
	margin: var(--hiz-space-5, 1.5rem) 0 0;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}

/* ------------------------------------------------------------------ knoppenrijen */

.hiz-pagina .wp-block-buttons {
	gap: var(--hiz-space-3, 0.75rem);
}

/* ------------------------------------------------------------------ lege staten */

.hiz-pagina .hiz-collectie__leeg,
.hiz-pagina .hiz-agenda__leeg,
.hiz-pagina .hiz-lege-staat {
	margin: 0;
	padding: var(--hiz-space-5, 1.5rem) var(--hiz-space-6, 2rem);
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 1rem));
	background: var(--hiz-color-mint, #D3D9EB);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-md, 1rem);
}

/* ------------------------------------------------------------ zekerheden (hiz/usp) */

/*
 * Livegang (LQ): de zekerheden-rij (`hiz/usp`) staat ook op gewone pagina's, zoals
 * /bedankt/. Daar laadt commerce.css niet, dus de lijst had opsommingstekens met een los
 * icoon ervoor. Hier dezelfde vorm als in de winkelwagen: wit paneel, één regel per
 * zekerheid, icoon links.
 */
.hiz-pagina .hiz-usp {
	margin-block: var(--hiz-space-6, 2rem) 0;
	padding: var(--hiz-space-4, 1rem) var(--hiz-space-5, 1.5rem);
	border-radius: var(--hiz-radius-md, 1rem);
	background: var(--hiz-color-white, #FFFFFF);
}

.hiz-pagina .hiz-usp__lijst {
	display: grid;
	gap: var(--hiz-space-3, 0.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-pagina .hiz-usp__item {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-2, 0.5rem);
	margin: 0;
}

.hiz-pagina .hiz-usp__icoon {
	flex: none;
	color: var(--hiz-color-fern);
}

.hiz-pagina .hiz-usp__titel {
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 600;
}

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