/*
 * HIZ – designsysteem (mobile-first).
 *
 * Basis 375 px, opbouwend via 430 / 768 / 1024 / 1280 / 1536.
 * Klassen volgen docs/agents/blok-contract.md; de plugin rendert de markup, dit bestand levert de vorm.
 * Geen gradients, geen schaduwen, hooguit één accent (lemon) per sectie.
 */

/* ------------------------------------------------- terugvalfont met metrics */

/*
 * Barlow Condensed en Manrope laden met `font-display: swap`. Tot ze er zijn tekent de
 * browser met een systeemfont, en dat is bij een condensed font veel breder: dezelfde
 * payoffregel meet 389 px in Arial en 284 px in Barlow Condensed. Dat verschil maakte de
 * header 130 px hoog in plaats van 74 px zodra het font wisselde (CLS 0,111, ronde 3).
 *
 * De terugvalfamilies hieronder zetten `size-adjust`, `ascent-override` en
 * `descent-override` zo dat het systeemfont bijna exact even breed en hoog tekent als het
 * echte font. Percentages gemeten met Playwright op 1536 px; zie docs/fases/ronde-4.
 */

/* Barlow Condensed → Arial Narrow. Gemeten: 84,2% (600) en 86,1% (800). */
@font-face {
	font-family: "HIZ Condensed val";
	src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Nimbus Sans Narrow");
	font-style: normal;
	font-weight: 600;
	size-adjust: 84.2%;
	ascent-override: 108.3%;
	descent-override: 28.1%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "HIZ Condensed val";
	src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Nimbus Sans Narrow");
	font-style: normal;
	font-weight: 800;
	size-adjust: 86.1%;
	ascent-override: 105.9%;
	descent-override: 27.5%;
	line-gap-override: 0%;
}

/* Barlow Condensed → Arial, voor systemen zonder Arial Narrow. Gemeten: 69% en 70,6%. */
@font-face {
	font-family: "HIZ Condensed val breed";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans");
	font-style: normal;
	font-weight: 600;
	size-adjust: 69%;
	ascent-override: 132.2%;
	descent-override: 34.3%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "HIZ Condensed val breed";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans");
	font-style: normal;
	font-weight: 800;
	size-adjust: 70.6%;
	ascent-override: 129.2%;
	descent-override: 33.6%;
	line-gap-override: 0%;
}

/* Manrope → Arial. Gemeten: 100,9% (400) en 100,6% (700, tegen Arial Bold). */
@font-face {
	font-family: "HIZ Sans val";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Nimbus Sans");
	font-style: normal;
	font-weight: 400;
	size-adjust: 100.9%;
	ascent-override: 105.7%;
	descent-override: 29.7%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "HIZ Sans val";
	src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"), local("Liberation Sans Bold");
	font-style: normal;
	font-weight: 700;
	size-adjust: 100.6%;
	ascent-override: 106%;
	descent-override: 29.8%;
	line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens */

:root {
	--hiz-color-forest: #3B4497;
	--hiz-color-pine: #2E3677;
	--hiz-color-fern: #4C56AE;
	--hiz-color-sage: #D3D9EB;
	--hiz-color-mint: #D3D9EB; /* Link Water uit het palet (was een lichtere eigen tint #E6EAF5) */
	--hiz-color-lemon: #E05320;
	/* Pow Orange draagt witte tekst maar haalt daarmee 3,87:1 – onder de AA-eis van 4,5:1.
	   Vlakken mét tekst (accentknoppen, badges) gebruiken daarom deze iets diepere variant
	   van dezelfde oranje: wit erop komt op 4,9:1. Puur decoratief oranje blijft #E05320. */
	--hiz-color-lemon-tekst: #C9430F;
	--hiz-color-paper: #EBE5D3;
	--hiz-color-white: #fff;
	--hiz-color-ink: #1E2352;
	/* Was #6B6F8C: 3,9:1 op Nourished, dus onvoldoende voor metaregels en hints. */
	--hiz-color-muted: #545A7E;
	--hiz-color-waarschuwing: #6E5300;
	--hiz-color-fout: #8a1c12;
	--hiz-color-line: rgba(59, 68, 151, 0.18);
	--hiz-color-line-licht: rgba(235, 229, 211, 0.24);
	/* Bright Slate met Link Water erdoor: 3,5:1 op Bright Slate, dus genoeg voor grote tekst
	   (WCAG 1.4.3). Gebruikt voor het decoratieve woordmerk in de voettekst (UX4). */
	--hiz-color-slate-licht: #9AA3D8;

	/* ---- vorm (visuele standaard ronde 5) ---- */
	--hiz-radius-sm: 10px;
	--hiz-radius-md: 16px;
	--hiz-radius-lg: 24px;
	--hiz-radius-pill: 999px;
	--hiz-schaduw: 0 8px 24px rgb(30 35 82 / 10%);

	/* Aliassen op de oude namen, zodat bestaande regels en pagina-CSS niet breken. */
	--hiz-radius-small: var(--hiz-radius-sm);
	--hiz-radius-medium: var(--hiz-radius-md);
	--hiz-radius-large: var(--hiz-radius-lg);

	--hiz-motion-fast: 160ms;
	--hiz-motion-normal: 240ms;
	--hiz-motion-reveal: 420ms;
	--hiz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* ---- container en maat ---- */
	--hiz-container: 1200px;
	--hiz-container-wide: 1360px;
	--hiz-gutter: clamp(16px, 4vw, 40px);
	--hiz-measure: 64ch;
	--hiz-measure-lead: 54ch;
	--hiz-measure-form: 40rem;
	--hiz-max: var(--hiz-container-wide);

	--hiz-touch: 44px;
	--hiz-control: 48px;

	/* ---- spacing (8 px-schaal) ---- */
	--hiz-space-1: 4px;
	--hiz-space-2: 8px;
	--hiz-space-3: 12px;
	--hiz-space-4: 16px;
	--hiz-space-5: 24px;
	--hiz-space-6: 32px;
	--hiz-space-7: 48px;
	--hiz-space-8: 64px;
	--hiz-space-9: 96px;
	--hiz-section-gap: clamp(48px, 7vw, 96px);
	--hiz-card-gap: var(--hiz-space-4);
	/* Oude naam uit ronde 1–4. */
	--hiz-space-sectie: var(--hiz-section-gap);

	/* ---- typografie ---- */
	--hiz-text-xs: 13px;
	--hiz-text-sm: 14px;
	--hiz-text-md: 16px;
	--hiz-text-lg: clamp(17px, 1.6vw, 19px);
	--hiz-h4: 17px;
	--hiz-h3: clamp(19px, 1.8vw, 22px);
	--hiz-h2: clamp(26px, 3vw, 36px);
	--hiz-h1: clamp(32px, 4.5vw, 52px);
	--hiz-eyebrow: 12px;

	/* De terugvalfamilies staan vóór de kale systeemfonts: zolang het echte font laadt,
	   tekent de browser met bijna exact dezelfde breedte (zie @font-face hierboven). */
	--hiz-font-body: Manrope, "HIZ Sans val", Arial, sans-serif;
	--hiz-font-code: "Barlow Condensed", "HIZ Condensed val", "HIZ Condensed val breed", "Arial Narrow", sans-serif;

	--hiz-header-hoogte: 56px;

	/* De preset uit theme.json haalt op Nourished geen 4,5:1. Zolang theme.json van een
	   andere agent is, corrigeren we de variabele hier: dit bestand laadt ná global-styles. */
	--wp--preset--color--muted: #545A7E;
}

@media (min-width: 768px) {
	:root {
		--hiz-header-hoogte: 64px;
		--hiz-card-gap: var(--hiz-space-5);
	}
}

/* -------------------------------------------------------------------- basis */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	overflow-x: clip;
	background-color: var(--hiz-color-paper);
	/* Lopende tekst is Ink; Bright Slate is voor koppen, links en knoppen (visuele standaard). */
	color: var(--hiz-color-ink);
	font-family: var(--hiz-font-body);
	font-size: var(--hiz-text-md);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Global styles (theme.json) wordt ná dit bestand in de <head> gezet en schrijft
 * `body { font-family: var(--wp--preset--font-family--manrope) }` en
 * `.has-…-font-family`. Bij gelijke specificiteit wint de laatste, dus zónder deze
 * regels blijft het terugvalfont met metrics buiten spel en verspringt de tekst alsnog
 * bij het omwisselen. Eén extra selector (`html`) is genoeg om de presets te winnen;
 * de waarde is dezelfde familie, alleen mét terugval.
 */
html body,
html .has-manrope-font-family {
	font-family: var(--hiz-font-body);
}

html .has-barlow-condensed-font-family {
	font-family: var(--hiz-font-code);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Voorkomt horizontale scroll door lange woorden of URL's op 320 px. */
h1,
h2,
h3,
h4,
p,
li,
figcaption,
dd,
dt {
	overflow-wrap: break-word;
}

:focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 3px;
	border-radius: 2px;
}

.has-forest-background-color :focus-visible,
.hiz-menu :focus-visible,
.hiz-footer :focus-visible,
.hiz-panel--donker :focus-visible {
	outline-color: var(--hiz-color-paper);
}

/*
 * Eén globale `hidden`-regel. Elk onderdeel dat met JS wordt getoond of verborgen
 * (filtersheet, badges, suggesties, chips, upsell) zette dit eerder zelf; dat waren
 * twaalf identieke regels. `!important` is nodig omdat de onderdelen zelf
 * `display: flex` of `grid` krijgen.
 */
[hidden] {
	display: none !important;
}

.hiz-visually-hidden:not(:focus):not(:active) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hiz-skip-link {
	position: absolute;
	left: var(--hiz-gutter);
	top: 0;
	z-index: 200;
	transform: translateY(-150%);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--hiz-radius-sm) var(--hiz-radius-sm);
	text-decoration: none;
	font-weight: 700;
}

.hiz-skip-link:focus {
	transform: translateY(0);
}

/* ------------------------------------------------------------- typografie */

/*
 * Eén schaal voor het hele theme (visuele standaard ronde 5). Koppen staan in Bright
 * Slate, lopende tekst in Ink. Niets wordt groter dan 52 px, ook niet op 1536 px.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--hiz-color-forest);
	text-wrap: balance;
}

h1 {
	font-size: var(--hiz-h1);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

h2 {
	font-size: var(--hiz-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

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

h4 {
	font-size: var(--hiz-h4);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

h5 {
	font-size: var(--hiz-text-md);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

h6 {
	font-size: var(--hiz-text-sm);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

small,
.hiz-klein {
	font-size: var(--hiz-text-sm);
}

.hiz-eyebrow {
	/* Blok-niveau: zo blijft de constrained-layout van WordPress de uitlijning bepalen. */
	display: block;
	margin-top: 0;
	margin-bottom: var(--hiz-space-2);
	font-family: var(--hiz-font-code);
	font-weight: 700;
	font-size: var(--hiz-eyebrow);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
	line-height: 1.2;
}

.hiz-eyebrow--licht,
.hiz-panel--donker .hiz-eyebrow,
.hiz-footer .hiz-eyebrow,
.hiz-menu .hiz-eyebrow {
	color: var(--hiz-color-sage);
}

.hiz-code {
	display: inline-block;
	font-family: var(--hiz-font-code);
	font-weight: 800;
	font-size: var(--hiz-text-md);
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 0.35em 0.6em;
	border: 2px solid currentColor;
	border-radius: var(--hiz-radius-sm);
}

.hiz-lead {
	font-size: var(--hiz-text-lg);
	line-height: 1.55;
	color: var(--hiz-color-ink);
	max-width: var(--hiz-measure-lead);
}

/* ---------------------------------------------------------------- prose */

/*
 * Lopende tekst: één regelbreedte, voorspelbare kopmarges. Alles wat een redacteur
 * in de editor typt (pagina's, verhalen, juridische teksten) staat hierin.
 */
.hiz-prose {
	max-width: var(--hiz-measure);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-md);
	line-height: 1.6;
}

.hiz-prose > * {
	max-width: var(--hiz-measure);
}

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

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

.hiz-prose p,
.hiz-prose ul,
.hiz-prose ol,
.hiz-prose dl,
.hiz-prose blockquote,
.hiz-prose figure,
.hiz-prose table {
	margin-block: 0 var(--hiz-space-5);
}

.hiz-prose h2 {
	margin-block: var(--hiz-space-7) var(--hiz-space-4);
}

.hiz-prose h3 {
	margin-block: var(--hiz-space-6) var(--hiz-space-3);
}

.hiz-prose h4 {
	margin-block: var(--hiz-space-5) var(--hiz-space-2);
}

.hiz-prose ul,
.hiz-prose ol {
	padding-left: 1.25rem;
}

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

/* In lopende tekst is een link onderstreept; in navigatie en op kaarten niet. */
.hiz-prose a:not(.hiz-button):not(.wp-block-button__link) {
	color: var(--hiz-color-forest);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hiz-prose img {
	border-radius: var(--hiz-radius-md);
}

/* ------------------------------------------------------------------ secties */

/*
 * Eén ritme voor de hele site: elke sectie heeft alléén ruimte bóven zich
 * (`--hiz-section-gap`). Zo telt de padding van twee secties nooit op en is de afstand
 * tussen twee blokken overal gelijk. De ruimte vóór de voettekst zet `.hiz-main`.
 */
.hiz-section,
.hiz-collectie,
.hiz-aanbevelingen {
	padding-block: var(--hiz-section-gap) 0;
}

.hiz-section--compact {
	padding-block-start: var(--hiz-space-7);
}

/* Een sectie die als eerste blok onder de header staat, hoeft niet extra te wachten. */
.hiz-section--strak {
	padding-block-start: 0;
}

.hiz-container {
	width: 100%;
	max-width: var(--hiz-container);
	margin-inline: auto;
	padding-inline: var(--hiz-gutter);
}

.hiz-container--wide {
	max-width: var(--hiz-container-wide);
}

/*
 * Sectiekop: altijd gestapeld en links uitgelijnd – eyebrow, H2, lead. Nooit een lead
 * rechts naast de kop; dat was in ronde 4 de grootste bron van "rare verhoudingen".
 */
.hiz-section__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hiz-space-3);
	margin-bottom: var(--hiz-space-6);
	max-width: var(--hiz-measure);
}

.hiz-section__title {
	margin: 0;
	font-size: var(--hiz-h2);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--hiz-color-forest);
}

.hiz-section__lead {
	margin: 0;
	max-width: var(--hiz-measure-lead);
	font-size: var(--hiz-text-lg);
	line-height: 1.55;
	color: var(--hiz-color-ink);
}

/* Een lead die los onder een kop staat, hoort links uit te lijnen met die kop. De
   `constrained`-layout van WordPress zet `margin-left/right: auto !important` op smalle
   kinderen; daardoor stond de lead gecentreerd als een losse kolom half onder de kop
   (o.a. /editions/). Alleen met !important is die regel te overrulen. */
:not(.hiz-section__head) > .hiz-section__lead {
	margin-inline: 0 auto !important;
}

/* Losse alinea's binnen een sectiekop blijven leesbaar breed. */
.hiz-section__head > p {
	max-width: var(--hiz-measure-lead);
}

/* Een actie rechts van de kop (bv. "Alles bekijken") staat eronder, links. */
.hiz-section__actie {
	margin-top: var(--hiz-space-2);
}

/* --------------------------------------------------------------------- grid */

.hiz-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

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

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

/* -------------------------------------------------------------------- knop */

.hiz-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hiz-space-2);
	min-height: var(--hiz-control);
	padding: 0 20px;
	border: 1px solid var(--hiz-color-forest);
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--hiz-motion-fast) var(--hiz-ease), color var(--hiz-motion-fast) var(--hiz-ease), border-color var(--hiz-motion-fast) var(--hiz-ease);
}

.hiz-button:hover,
.hiz-button:focus-visible {
	background-color: var(--hiz-color-pine);
	border-color: var(--hiz-color-pine);
	color: var(--hiz-color-paper);
	text-decoration: none;
}

.hiz-button--accent,
.hiz-panel--donker .hiz-button--accent,
.hiz-footer .hiz-button--accent,
.hiz-menu .hiz-button--accent,
.is-style-lemon > .wp-block-button__link {
	background-color: var(--hiz-color-lemon-tekst);
	border-color: var(--hiz-color-lemon-tekst);
	color: var(--hiz-color-white);
}

.hiz-button--accent:hover,
.hiz-button--accent:focus-visible,
.is-style-lemon > .wp-block-button__link:hover,
.is-style-lemon > .wp-block-button__link:focus-visible {
	background-color: var(--hiz-color-forest);
	border-color: var(--hiz-color-forest);
	color: var(--hiz-color-white);
}

.hiz-button--outline {
	background-color: transparent;
	color: var(--hiz-color-forest);
}

/*
 * Eén "gekozen of aangewezen"-vorm: merkvlak, papieren tekst. Chips, segmentkeuze,
 * omlijnde knoppen, de huidige pagina in de paginering en de snelkoppelingen in het
 * zoekpaneel deelden deze drie declaraties in zeven losse regels.
 */
.hiz-button--outline:hover,
.hiz-button--outline:focus-visible,
.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:focus-visible,
.hiz-segment__item:has(input:checked),
.wp-block-query-pagination .page-numbers.current,
.hiz-chip:has(.hiz-chip__input:checked),
.hiz-chip--actief:hover,
.hiz-chip--actief:focus-visible,
.hiz-header__zoek-snel a:hover,
.hiz-header__zoek-snel a:focus-visible,
.hiz-button--ghost {
	background-color: transparent;
	border-color: transparent;
	color: var(--hiz-color-forest);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	padding-inline: var(--hiz-space-3);
}

.hiz-button--ghost:hover,
.hiz-button--ghost:focus-visible {
	background-color: transparent;
	border-color: transparent;
	color: var(--hiz-color-fern);
}

.hiz-button--small {
	min-height: var(--hiz-touch);
	padding-inline: var(--hiz-space-4);
	font-size: var(--hiz-text-sm);
}

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

.hiz-panel--donker .hiz-button,
.hiz-footer .hiz-button,
.hiz-menu .hiz-button,
.hiz-menu__chips a:hover,
.hiz-menu__chips a:focus-visible,
.hiz-panel--donker .wp-block-button:not(.is-style-outline):not(.is-style-ghost):not(.is-style-lemon) > .wp-block-button__link,
.has-forest-background-color .wp-block-button:not(.is-style-outline):not(.is-style-ghost):not(.is-style-lemon) > .wp-block-button__link {
	background-color: var(--hiz-color-paper);
	border-color: var(--hiz-color-paper);
	color: var(--hiz-color-forest);
}

.hiz-panel--donker .hiz-button--outline,
.hiz-footer .hiz-button--outline,
.hiz-menu .hiz-button--outline {
	background-color: transparent;
	border-color: var(--hiz-color-paper);
	color: var(--hiz-color-paper);
}

.hiz-panel--donker .hiz-button--outline:hover,
.hiz-footer .hiz-button--outline:hover,
.hiz-menu .hiz-button--outline:hover,
/* ------------------------------------------------------------------- links */

.hiz-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: var(--hiz-touch);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* --------------------------------------------------------------- formulier */

.hiz-form {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-5);
	max-width: var(--hiz-measure-form);
}

.hiz-field {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-1);
	min-width: 0;
}

.hiz-field__label {
	font-weight: 600;
	font-size: var(--hiz-text-sm);
	line-height: 1.4;
	color: var(--hiz-color-forest);
}

/*
 * Toestemmingsregel met een aankruisvakje (UX4). Het vakje zelf is in elke browser 13 px –
 * geen tikdoel. Het wordt 24 px en de hele regel is klikbaar en minstens 44 px hoog, want dát
 * is waar een vinger op mikt. De tekst blijft normaal van gewicht: het is een zin, geen kop.
 */
.hiz-form .hiz-field__label:has(> input[type="checkbox"]) {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	min-height: var(--hiz-touch);
	padding-block: 0.4rem;
	font-weight: 400;
	cursor: pointer;
}

.hiz-form .hiz-field__label > input[type="checkbox"] {
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: 0.1rem;
	accent-color: var(--hiz-color-forest);
}

.hiz-field__input,
.hiz-plaatszoeker__input,
.hiz-form input[type="text"],
.hiz-form input[type="email"],
.hiz-form input[type="tel"],
.hiz-form input[type="url"],
.hiz-form input[type="number"],
.hiz-form input[type="search"],
.hiz-form select,
.hiz-form textarea {
	width: 100%;
	min-height: var(--hiz-control);
	padding: var(--hiz-space-3) var(--hiz-space-4);
	font: inherit;
	font-size: var(--hiz-text-md);
	color: var(--hiz-color-ink);
	background-color: var(--hiz-color-white);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm);
	appearance: none;
}

.hiz-form textarea {
	min-height: 8rem;
	resize: vertical;
}

.hiz-field__input:focus-visible,
.hiz-plaatszoeker__input:focus-visible,
.hiz-form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 2px;
	border-color: var(--hiz-color-forest);
}

.hiz-filters__kop:focus-visible,
.hiz-field__hint {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--hiz-color-muted);
}

.hiz-field__error {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--hiz-color-fout);
}

.hiz-field--invalid .hiz-field__input {
	border-color: var(--hiz-color-fout);
}

.hiz-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-4);
}

.hiz-form__steps {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-6);
}

/*
 * Livegang (LQ): een stap is een kale <fieldset>. In ronde 5 is deze regel bij het
 * ontdubbelen samengevoegd met de voortgangsbalk hieronder; daardoor stond elke stap van
 * de Studio-, maker- en winkelaanvraag in Barlow Condensed hoofdletters (labels, hulptekst,
 * keuzes) en als flex-wrap-rij, zodat velden naast elkaar vielen met wisselende breedtes.
 */
.hiz-form__step {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hiz-form__progress {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-muted);
}

.hiz-form__progress [aria-current="step"] {
	color: var(--hiz-color-forest);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.hiz-form__summary {
	background-color: var(--hiz-color-mint);
	border-radius: var(--hiz-radius-md);
	padding: var(--hiz-space-5);
}

.hiz-form__summary dl {
	display: grid;
	gap: 0.5rem 1rem;
	margin: 0;
}

@media (min-width: 640px) {
	.hiz-form__summary dl {
		grid-template-columns: minmax(8rem, 14rem) 1fr;
	}
}

.hiz-form__summary dt {
	font-weight: 700;
}

.hiz-form__summary dd {
	margin: 0;
}

/* ----------------------------------------------------------- notice/status */

.hiz-notice {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2);
	padding: var(--hiz-space-4) var(--hiz-space-5);
	border-radius: var(--hiz-radius-sm);
	font-size: var(--hiz-text-sm);
	line-height: 1.5;
	max-width: var(--hiz-measure);
	border-left: 4px solid var(--hiz-color-fern);
	background-color: var(--hiz-color-mint);
	color: var(--hiz-color-forest);
}

.hiz-notice p {
	margin: 0;
}

.hiz-notice--succes {
	border-left-color: var(--hiz-color-pine);
	background-color: var(--hiz-color-sage);
}

.hiz-notice--fout {
	border-left-color: var(--hiz-color-fout);
	background-color: #f7e4e1;
}

.hiz-notice--info {
	border-left-color: var(--hiz-color-lemon);
	background-color: var(--hiz-color-white);
}

.hiz-status {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2);
	font-weight: 600;
	font-size: var(--hiz-text-sm);
	line-height: 1.3;
	white-space: nowrap;
}

.hiz-status::before {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background-color: currentColor;
	flex: none;
}

.hiz-status--beschikbaar {
	color: var(--hiz-color-pine);
}

.hiz-status--binnenkort {
	color: var(--hiz-color-waarschuwing);
}

.hiz-status--wachtlijst {
	color: var(--hiz-color-fern);
}

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

/* Statusregel boven de plaatstitel: code, status en aantal op één rustige regel. */
.hiz-plaats-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 var(--hiz-space-4);
	color: var(--hiz-color-muted);
	font-size: 15px;
}

.hiz-plaats-status .hiz-code {
	font-size: var(--hiz-text-md);
}

/* Op de plaatspagina staat de naam al als H1 eronder; hem hier nog eens tonen leest als een
   fout ("Beschikbaar Haarlem – 149 ontwerpen" boven "Haarlem"). Voor schermlezers blijft de
   naam staan, omdat de statusregel vóór de titel komt. */
.hiz-plaats .hiz-plaats-status__naam {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------- plaatszoeker */

.hiz-plaatszoeker {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	max-width: 34rem;
	padding: var(--hiz-space-5);
	background-color: var(--hiz-color-white);
	border: 1px solid var(--hiz-color-forest);
	border-radius: var(--hiz-radius-md);
}

.hiz-plaatszoeker__label {
	font-weight: 800;
	font-size: var(--hiz-h4);
	letter-spacing: -0.02em;
}

.hiz-plaatszoeker__row {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	min-width: 0;
}

/* Zelfde veldvorm als het formulier (zie `.hiz-field__input`), alleen flexibel. */
.hiz-plaatszoeker__input {
	flex: 1 1 auto;
}

.hiz-plaatszoeker__button {
	flex: none;
	min-height: var(--hiz-control);
	padding-inline: 1.25rem;
}

.hiz-plaatszoeker__suggesties {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm);
	max-height: 16rem;
	overflow-y: auto;
}

.hiz-plaatszoeker__suggesties li > * {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--hiz-touch);
	padding: 0.5rem 0.75rem;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.hiz-plaatszoeker__suggesties li + li {
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-plaatszoeker__result {
	/* Vaste minimumhoogte voorkomt layoutsprong zodra het resultaat verschijnt. */
	min-height: 3.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	justify-content: center;
}

.hiz-plaatszoeker__status {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 15px;
}

.hiz-plaatszoeker__cta {
	align-self: flex-start;
}

.hiz-plaatszoeker__hint {
	margin: 0;
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-muted);
}

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

/*
 * Kaart = wit vlak op Nourished, radius md, geen rand, geen schaduw en geen "lift" bij
 * hover: alleen de foto zoomt licht in. De inhoud staat op 16 px zijmarge en 12 px onder
 * de foto (visuele standaard). De opmaak werkt zonder extra wrapper, omdat het
 * blok-contract de titel, meta en prijs rechtstreeks in `.hiz-card__link` zet.
 */
.hiz-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: var(--hiz-color-white);
	border-radius: var(--hiz-radius-md);
	overflow: hidden;
}

.hiz-card__link {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-1);
	text-decoration: none;
	color: inherit;
	height: 100%;
}

.hiz-card__link > :not(.hiz-card__media) {
	padding-inline: var(--hiz-space-4);
}

.hiz-card__link > .hiz-card__media + * {
	padding-top: var(--hiz-space-3);
}

.hiz-card__link > :first-child:not(.hiz-card__media) {
	padding-top: var(--hiz-space-4);
}

.hiz-card__link > :last-child {
	padding-bottom: var(--hiz-space-4);
}

/*
 * Livegang (LQ): deze hoverregel stond in één selectorlijst met `.hiz-card__media`, waardoor de
 * kaarttitel bij hover de 4:5-verhouding en het Link Water-vlak van de foto kreeg (titel van
 * 52 naar 261 px op /winkel/, 1280 px). Hover onderstreept nu alleen de titel.
 */
.hiz-card__link:hover .hiz-card__title,
.hiz-card__link:focus-visible .hiz-card__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hiz-card__media {
	margin: 0;
	aspect-ratio: var(--hiz-ratio, 4 / 5);
	overflow: hidden;
	background-color: var(--hiz-color-mint);
}

.hiz-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--hiz-motion-normal) var(--hiz-ease);
}

.hiz-card__link:hover .hiz-card__media img,
.hiz-card__link:focus-visible .hiz-card__media img {
	transform: scale(1.03);
}

.hiz-card--maker .hiz-card__media {
	--hiz-ratio: 1 / 1;
}

/* Een kaart in een donker paneel blijft een witte kaart met donkere tekst. */
.hiz-panel--donker .hiz-card :is(h1, h2, h3, h4, p, li),
.is-style-dark .hiz-card :is(h1, h2, h3, h4, p, li),
.has-forest-background-color .hiz-card :is(h1, h2, h3, h4, p, li) {
	color: var(--hiz-color-ink);
}

.hiz-card__title {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--hiz-color-forest);
}

.hiz-card__meta {
	margin: 0;
	font-size: 13px;
	color: var(--hiz-color-muted);
	line-height: 1.4;
}

.hiz-card__price {
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--hiz-color-forest);
}

.hiz-card__price del {
	color: var(--hiz-color-muted);
	font-weight: 400;
	margin-right: var(--hiz-space-1);
}

/* --------------------------------------------------------------- collectie */

.hiz-collectie__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem var(--hiz-space-4);
	margin-bottom: var(--hiz-space-5);
	padding-bottom: var(--hiz-space-4);
	border-bottom: 2px solid var(--hiz-color-line);
}

.hiz-collectie__title {
	margin: 0;
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	letter-spacing: -0.03em;
}

.hiz-collectie__count {
	margin: 0;
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
}

.hiz-collectie__leeg {
	margin: 0;
	color: var(--hiz-color-muted);
}

/* "Uitgelicht" en "Klassiekers" zijn redactionele selecties. Zolang die voor een plaats leeg
   zijn, tonen ze alleen een regel over de redactie zelf; dat is projecttekst, geen klanttekst.
   De secties verdwijnen dan en de volledige collectie schuift naar voren. De lege staat van de
   volledige collectie blijft wél staan: die vertelt de koper iets. */
.hiz-collectie--uitgelicht:has(.hiz-collectie__leeg),
.hiz-collectie--klassiekers:has(.hiz-collectie__leeg) {
	display: none;
}

/* ----------------------------------------------------------------- filters */

/*
 * Filterpaneel (blok `hiz/catalog-filters`). Onder 1024 px een sheet achter de knop
 * "Filter"; vanaf 1024 px een smalle zijbalk die permanent openstaat. Elke groep is een
 * rij chips, nooit een kolom aankruisvakjes: 45 plaatsen onder elkaar was de klacht.
 */

.hiz-filters {
	margin-bottom: var(--hiz-space-5);
}

.hiz-filters__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-4);
}

.hiz-filters__toggle {
	flex: none;
}

.hiz-filters__toggle svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.hiz-filters__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.35rem;
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-lemon-tekst);
	color: var(--hiz-color-white);
	font-size: 13px;
	font-weight: 800;
}

/* Mobiel: onderaan verankerde sheet. */
.hiz-filters__sheet {
	width: 100%;
	max-width: 100%;
	max-height: 88dvh;
	margin: auto auto 0;
	padding: var(--hiz-space-5) var(--hiz-gutter) calc(var(--hiz-space-5) + env(safe-area-inset-bottom));
	border: 0;
	border-radius: var(--hiz-radius-lg) var(--hiz-radius-lg) 0 0;
	background-color: var(--hiz-color-paper);
	color: var(--hiz-color-forest);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hiz-filters__sheet::backdrop {
	background-color: rgba(30, 35, 82, 0.5);
}

/* Fallback wanneer <dialog> niet wordt ondersteund: hiz.js zet .is-open. */
.hiz-filters__sheet:not([open]):not(.is-open) {
	display: none;
}

.hiz-filters__sheet.is-open {
	display: block;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 120;
}

.hiz-filters__sheet-kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-4);
	margin-bottom: var(--hiz-space-4);
}

.hiz-filters__sheet-titel {
	margin: 0;
	font-family: var(--hiz-font-code);
	font-weight: 800;
	font-size: var(--hiz-text-lg);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hiz-filters__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill);
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--hiz-h3);
	cursor: pointer;
}

.hiz-filters__form {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-5);
}

.hiz-filters__group {
	border: 0;
	border-top: 1px solid var(--hiz-color-line);
	margin: 0;
	padding: var(--hiz-space-4) 0 0;
	min-width: 0;
}

.hiz-filters__group:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.hiz-filters__group legend {
	padding: 0;
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 15px;
}

/*
 * Elke facetgroep is een <details> (UX4). De <summary> is de kop én de knop: 44 px hoog,
 * met een driehoekje dat meedraait. De <legend> erbinnen blijft bestaan voor schermlezers
 * en voor het script dat de facetnamen eruit leest, maar is visueel verborgen.
 */
.hiz-filters__group > .hiz-filters__veld {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.hiz-filters__kop {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-2);
	min-height: var(--hiz-touch);
	padding: 0;
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
}

/* Het driehoekje staat vóór de naam en draait met de open-staat mee. */
.hiz-filters__kop::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transform-origin: 55% 55%;
	transition: transform 0.15s ease;
}

details[open] > .hiz-filters__kop::before {
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.hiz-filters__kop::before {
		transition: none;
	}
}

.hiz-filters__kop-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.3rem;
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	font-size: var(--hiz-eyebrow);
	letter-spacing: 0;
}

/* De gekozen sortering staat in de samenvatting, zodat de groep dicht kan blijven. */
.hiz-filters__kop-keuze {
	margin-left: auto;
	font-family: var(--hiz-font-body);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-muted);
}

/* Toegepaste filters bovenaan het paneel: zien wat aanstaat zonder te scrollen. */
.hiz-filters__toegepast {
	padding-bottom: var(--hiz-space-4);
	border-bottom: 1px solid var(--hiz-color-line);
}

.hiz-filters__toegepast-kop {
	margin: 0 0 var(--hiz-space-2);
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--hiz-color-muted);
}

/* Chip-lijsten (filters, actieve filters, menu) delen een vorm. */
.hiz-filters__toegepast-lijst,
.hiz-actieve-filters,
.hiz-menu__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-filters__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2);
	margin-top: var(--hiz-space-2);
}

.hiz-filters__zoek {
	margin-top: var(--hiz-space-2);
}

.hiz-filters__zoekveld {
	width: 100%;
}

.hiz-filters__meer {
	margin-top: var(--hiz-space-2);
}

.hiz-filters__meer summary {
	display: flex;
	align-items: center;
	min-height: var(--hiz-touch);
	font-weight: 700;
	font-size: 15px;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
	list-style: none;
}

.hiz-filters__geen {
	margin: var(--hiz-space-2) 0 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm);
}

.hiz-filters__actions {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: var(--hiz-space-4);
	margin-top: auto;
	padding-block: var(--hiz-space-4);
	border-top: 1px solid var(--hiz-color-line);
	background-color: var(--hiz-color-paper);
}

.hiz-filters__actions .hiz-button[type="submit"] {
	flex: 1 1 auto;
}

/* --------------------------------------------------------------------- chip */

/*
 * Eén keuze. Het aankruisvakje ligt onzichtbaar over de hele chip: zo is het tikdoel
 * even groot als de chip (48 px) en blijft de bediening een echt formulierveld.
 */
.hiz-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2);
	/* 40 px op mobiel (tikdoel), 36 px vanaf 768 px. */
	min-height: 40px;
	padding: 0 var(--hiz-space-4);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

@media (min-width: 768px) {
	.hiz-chip {
		min-height: 36px;
	}
}

/*
 * Afwijking van de visuele standaard, bewust: een chip die zélf een link of knop is
 * (plaatsbuur, productsoort, scope-suggestie, "filter weg") blijft 44 px hoog. De harde
 * tikdoelregel uit het contract weegt zwaarder dan de 36 px uit de standaard; chips die
 * een `<label>` om een keuzevakje zijn, tellen niet als tikdoel in de a11y-controle en
 * volgen de standaard wel.
 */
a.hiz-chip,
button.hiz-chip {
	min-height: var(--hiz-touch);
}

/* Een chip die een link is (scope-suggestie, model op de zoekpagina) is een knop, geen link
   in lopende tekst; de onderstreping van `a` hoort er niet bij. */
a.hiz-chip {
	text-decoration: none;
}

/*
 * Chip en segmentkeuze dragen hun radio/checkbox onzichtbaar over de hele knop: het
 * tikdoel is de knop, niet het vakje. `inset: -1px` compenseert de rand, want absolute
 * positionering rekent vanaf de padding-box.
 */
.hiz-chip__input,
.hiz-segment__item input {
	position: absolute;
	inset: -1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	appearance: none;
}

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

.hiz-chip:hover {
	border-color: var(--hiz-color-forest);
}

.hiz-chip__n {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	/* 0,85 i.p.v. 0,7: bij 0,7 zakt forest-tekst op wit/papier onder 4,5:1 (WCAG 1.4.3). */
	opacity: 0.85;
}

.hiz-chip__swatch {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 22%);
	flex: none;
}

/*
 * Een optie die met de huidige filters niets meer oplevert. Blijft een echt, aanklikbaar
 * formulierveld (geen `disabled`), dus de tekst moet aan 1.4.3 blijven voldoen. 0,85 i.p.v.
 * 0,45 (was 2,3:1 op het label); de `.hiz-chip__n`-teller krijgt hier zijn eigen opacity
 * terug, anders stapelen de twee op tot ver onder 4,5:1.
 */
.hiz-chip.is-leeg {
	opacity: 0.85;
}

.hiz-chip.is-leeg .hiz-chip__n {
	opacity: 1;
}

/* ------------------------------------------------- actieve filters (chips) */

.hiz-chip--actief {
	/* Link Water is ook de paneelkleur; een actieve chip moet daarop zichtbaar blijven. */
	background-color: var(--hiz-color-forest);
	border-color: var(--hiz-color-forest);
	color: var(--hiz-color-white);
	text-decoration: none;
}

.hiz-chip__weg {
	font-size: var(--hiz-text-lg);
	line-height: 1;
}

/* ------------------------------------------------------------ segmentkeuze */

/* Grid in plaats van flex: wanneer de vier keuzes niet op één regel passen (smalle
   zijbalk, 375 px) blijven ze een net blok in plaats van een uitgelopen pil. */
.hiz-segment {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	margin-top: var(--hiz-space-2);
	padding: 4px;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm);
	background-color: var(--hiz-color-white);
}

.hiz-segment__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hiz-control);
	padding: 0 0.75rem;
	border-radius: var(--hiz-radius-pill);
	font-size: var(--hiz-text-sm);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}

@media (min-width: 1024px) {
	/* Vanaf 1024 px staat de dialog permanent open als zijbalk. */
	.hiz-filters--inline {
		display: block;
		margin-bottom: 0;
	}

	.hiz-filters--inline .hiz-filters__balk {
		display: none;
	}

	.hiz-filters--inline .hiz-filters__sheet,
	.hiz-filters--inline .hiz-filters__sheet:not([open]):not(.is-open) {
		display: block;
		position: static;
		inset: auto;
		max-height: none;
		width: auto;
		margin: 0;
		padding: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}

	.hiz-filters--inline .hiz-filters__sheet-kop {
		display: none;
	}

	.hiz-filters--inline .hiz-filters__actions {
		position: static;
		background: none;
	}

	/*
	 * Op desktop staat het paneel als vaste zijbalk naast het raster en moet het op één
	 * schermhoogte passen (UX4). Daarom hier iets krappere tussenruimte dan in de mobiele
	 * sheet, waar het paneel het hele scherm heeft.
	 */
	.hiz-filters--inline .hiz-filters__form {
		gap: var(--hiz-space-4);
	}

	.hiz-filters--inline .hiz-filters__group {
		padding-top: var(--hiz-space-2);
	}

	/* Op desktop past het formulier zichzelf toe zodra er JavaScript is; de verzendknop
	   zou dan een tweede, overbodige bediening zijn. Zonder JavaScript blijft hij staan. */
	.hiz-js .hiz-filters--inline .hiz-filters__actions .hiz-button[type="submit"] {
		display: none;
	}

	.hiz-catalogus {
		display: grid;
		grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
		gap: var(--hiz-space-7);
		align-items: start;
	}
}

/* ------------------------------------------------------- productonderdelen */

.hiz-familie {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.hiz-familie__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--hiz-touch);
	padding: 0.35rem 0.85rem 0.35rem 0.35rem;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill);
	text-decoration: none;
	color: inherit;
	font-size: 15px;
	font-weight: 600;
}

.hiz-familie__item.is-current {
	border-color: var(--hiz-color-forest);
}

.hiz-familie__swatch {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var(--hiz-swatch, var(--hiz-color-sage));
	border: 1px solid var(--hiz-color-line);
	flex: none;
}

.hiz-credit {
	margin: 0;
	font-size: 15px;
	color: var(--hiz-color-muted);
}

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

.hiz-upsell {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-4);
	padding: var(--hiz-space-5);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-md);
	background-color: var(--hiz-color-mint);
}

.hiz-aanbevelingen {
	padding-block: clamp(2.5rem, 6vw, 4rem);
}

/* ------------------------------------------------------------ verkooppunten */

.hiz-verkooppunten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hiz-space-5);
	grid-template-columns: 1fr;
}

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

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

.hiz-verkooppunt {
	padding: var(--hiz-space-5);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-md);
	background-color: var(--hiz-color-white);
	min-width: 0;
}

.hiz-verkooppunt__naam {
	margin: 0 0 0.35rem;
	font-size: var(--hiz-h4);
	letter-spacing: -0.02em;
}

.hiz-verkooppunt__adres {
	font-style: normal;
	color: var(--hiz-color-pine);
	line-height: 1.5;
}

.hiz-verkooppunt__meta {
	margin: 0.5rem 0 0;
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-muted);
}

/* ---------------------------------------------------------------- rekentool */

.hiz-rekentool {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-5);
	padding: var(--hiz-space-5);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-md);
	background-color: var(--hiz-color-white);
}

.hiz-rekentool__uitkomst {
	display: block;
	min-height: 3rem;
	font-size: var(--hiz-text-lg);
	font-weight: 700;
}

.hiz-rekentool__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.hiz-rekentool__tabel th,
.hiz-rekentool__tabel td {
	text-align: left;
	padding: 0.5rem 0.5rem 0.5rem 0;
	border-bottom: 1px solid var(--hiz-color-line);
}

.hiz-tabel-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------------ header */

/*
 * Eén rij: menuknop (mobiel) · woordmerk · navigatie · zoekveld · acties.
 * Vanaf 1024 px verdwijnt de menuknop en verschijnt de navigatie; vanaf 1280 px staat
 * het zoekveld open in de rij zelf. Daaronder ligt het als paneel onder de header,
 * absoluut gepositioneerd, zodat openen niets verschuift.
 */

.hiz-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background-color: var(--hiz-color-paper);
	border-bottom: 1px solid var(--hiz-color-line);
}

/* `.is-compact` verandert geen enkele maat: alleen rand en schaduw. Een krimpende
   sticky header trekt de hele pagina omhoog (layoutsprong, web.dev Optimize CLS). */
.hiz-header.is-compact {
	border-bottom-color: var(--hiz-color-forest);
	box-shadow: 0 2px 12px rgb(30 35 82 / 10%);
}

.hiz-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--hiz-space-2);
	/* Vaste hoogte: 56 px mobiel, 64 px vanaf 768 px. Sticky mag nooit van hoogte
	   veranderen, anders springt de hele pagina bij het scrollen (CLS). */
	height: var(--hiz-header-hoogte);
	min-height: var(--hiz-header-hoogte);
	max-width: var(--hiz-container-wide);
	margin-inline: auto;
	padding-inline: var(--hiz-gutter);
}

.hiz-header__links {
	flex: 1 1 0;
	display: flex;
	align-items: center;
}

.hiz-header__merk {
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
}

/* Compact woordmerk: "HIZ" past op elke breedte; de volledige sitenaam staat in de a11y-tekst. */
.hiz-woordmerk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
	color: inherit;
	text-decoration: none;
}

.hiz-woordmerk__tekst {
	font-family: var(--hiz-font-code);
	font-weight: 800;
	font-size: 26px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--hiz-color-forest);
}

/*
 * De payoff onder het woordmerk beantwoordt in één blik de vraag "wat verkoopt dit?".
 * Baymard: benoem de scope volledig – nooit kaal "Hoodies", maar het model én de plaats.
 * Pas vanaf 1536 px: daaronder maakt hij de merkkolom zo breed dat de navigatie op een
 * tweede regel valt en de header 125 px hoog wordt (gemeten, ronde 3).
 */
.hiz-header__pitch {
	display: none;
	margin: 0;
	font-family: var(--hiz-font-code);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--hiz-color-muted);
}

/* Staat er een echt logo ingesteld, dan wint dat en verdwijnt het tekstwoordmerk. */
.hiz-header__merk:has(.wp-block-site-logo img) .hiz-woordmerk__tekst {
	display: none;
}

.hiz-header__merk .wp-block-site-logo img {
	max-height: 36px;
	width: auto;
}

.hiz-header__acties {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
}

.hiz-header__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hiz-space-2);
	/* Icoon 24 px in een tikgebied van 44 px. */
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
	padding: 0 var(--hiz-space-3);
	border: 0;
	border-radius: var(--hiz-radius-pill);
	background: none;
	color: var(--hiz-color-forest);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
}

.hiz-header__knop:hover,
.hiz-header__knop svg {
	width: 24px;
	height: 24px;
	flex: none;
}

/* Account bereik je op mobiel via het menu; naast de winkelwagen zou het te druk worden. */
.hiz-header__account {
	display: none;
}

.hiz-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--hiz-space-1);
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

/* NN/g: vanaf 768 px staat het woord bij het icoon; daaronder alleen voor schermlezers. */
@media (max-width: 767.98px) {
	.hiz-header__cart-label,
	.hiz-header__account-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ------------------------------------------------- versoberde afrekenheader */

/*
 * Op de afrekenpagina blijven alleen het woordmerk, de geruststelling en één weg terug
 * staan (verzoek C3; Baymard meet dat elke extra uitgang op de laatste stap afhaakt).
 * Menu, zoekveld en knoppenrij gaan met `display: none` weg, dus ze staan ook niet meer
 * in de tabvolgorde; wat overblijft is een gewone link en dus met het toetsenbord te
 * bereiken. De selector is de WooCommerce-body-klasse, zodat er geen `:has()` nodig is.
 *
 * Livegang (LQ): niet op de bedankpagina (/afrekenen/order-received/…). Die draagt dezelfde
 * body-klasse, en na het bestellen stond daar 'Terug naar winkelwagen' (naar een lege wagen)
 * zonder menu of zoekveld. Daar hoort weer de gewone header.
 */
.hiz-header__afrekenen {
	display: none;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header__links,
body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header .hiz-nav,
body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header__zoek,
body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header__acties,
body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-menu {
	display: none;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header__inner {
	justify-content: space-between;
	gap: var(--hiz-space-4);
}

body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header__merk {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	align-items: flex-start;
}

body.woocommerce-checkout:not(.woocommerce-order-received) .hiz-header__afrekenen {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem 1rem;
	min-width: 0;
}

.hiz-header__veilig {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-weight: 700;
	font-size: 15px;
	color: var(--hiz-color-forest);
}

/* Livegang (LQ): het slot-icoon stond in de selector van de terugknop en had geen maat; het
   werd 80 px hoog en duwde "Beveiligd afrekenen" op twee regels. */
.hiz-header__veilig svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.hiz-header__terug {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-height: var(--hiz-touch);
	padding: 0 0.6rem;
	border-radius: var(--hiz-radius-pill);
	font-weight: 700;
	font-size: 15px;
	color: var(--hiz-color-forest);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hiz-header__terug svg {
	width: 18px;
	height: 18px;
	flex: none;
}

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

/* Op 375 px past de geruststelling niet naast de terugknop; dan telt de weg terug. */
@media (max-width: 559.98px) {
	.hiz-header__veilig {
		display: none;
	}
}

/*
 * De visuele standaard vraagt een zoekveld van 40 px in de header. Dat botst met de
 * harde contractregel "formuliervelden minstens 48 px" (a11y-check meldde het veld en de
 * knop als fout). Het veld blijft daarom 48 px; alleen de tekst gaat naar 14 px, zodat de
 * balk optisch lichter wordt binnen een header van 64 px.
 */
@media (min-width: 1280px) {
	.hiz-header__zoek .hiz-zoek__input,
	.hiz-header__zoek input[type="search"],
	.hiz-header__zoek .hiz-zoek__knop {
		font-size: var(--hiz-text-sm);
	}
}

/* -------------------------------------------------------------- zoekpaneel */

/*
 * Onder 1280 px: paneel onder de header. `position: absolute` houdt het uit de flow,
 * dus openen en sluiten verschuift geen enkele pixel van de pagina eronder.
 */
.hiz-header__zoek {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 5;
	display: none;
	padding: var(--hiz-space-5) var(--wp--custom--gutter--fluid, var(--hiz-gutter));
	border-block: 1px solid var(--hiz-color-line);
	background-color: var(--hiz-color-mint);
	box-shadow: 0 10px 24px rgb(30 35 82 / 12%);
}

.hiz-header__zoek.is-open {
	display: block;
}

/*
 * De lege staat van het zoekpaneel: waar begin je? Drie modellen en de plaatsenpagina.
 * Twee van de vier benchmarkshops vullen hun zoekpaneel op dezelfde manier.
 */
.hiz-header__zoek-snel {
	list-style: none;
	margin: var(--hiz-space-4) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hiz-header__zoek-snel a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch);
	padding: 0 0.9rem;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-paper);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	color: var(--hiz-color-forest);
}

/* Core zet via inline layout-CSS `display:flex` op .wp-block-navigation-is-layout-flex
   (specificiteit 0,1,0) en die stijl staat ná dit bestand; daarom hier twee klassen. */
.hiz-header .hiz-nav {
	display: none;
}

@media (min-width: 1024px) {
	.hiz-header__inner {
		gap: var(--hiz-space-5);
	}

	.hiz-header__links {
		display: none;
	}

	.hiz-header__merk {
		flex: 0 0 auto;
		align-items: flex-start;
	}

	.hiz-header .hiz-nav {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
	}

	.hiz-header__acties {
		flex: 0 0 auto;
	}

	.hiz-header__account {
		display: inline-flex;
	}

	/* Twee selectors: de klasse `wp-block-navigation__container` staat bij core op de <ul>
	   zelf, die óók `hiz-nav` heet. Met alleen de afstammelingsselector raakte deze regel
	   niets en liep de rij tóch terug (gevonden in ronde 4). */
	.hiz-nav.wp-block-navigation__container,
	.hiz-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		justify-content: center;
		gap: clamp(0.5rem, 1.2vw, 1.25rem);
	}

	/* Core tekent een pijl van 24 px naast "Collectie"; op deze schaal is dat een blok. */
	.hiz-nav .wp-block-navigation__submenu-icon svg {
		width: 12px;
		height: 12px;
	}

	.hiz-nav .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		/* 42 px was 2 px te laag voor het minimale tikdoel van 44 px. */
		min-height: var(--hiz-touch);
		text-decoration: none;
		padding-block: 0.5rem;
	}

	.hiz-nav .wp-block-navigation-item__content:hover {
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}

	/* De pagina waar je staat hoort in het menu aangewezen te zijn (WAI: `aria-current`).
	   61% van de shops laat dit weg; het kost één regel. */
	.hiz-nav .wp-block-navigation-item__content[aria-current] {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.3em;
		font-weight: 800;
	}

	/* Submenu "Collectie": rustig kaartje, geen kolom vol randen. Baymard meet dat een
	   opening zonder vertraging flikkert zodra je met de muis langs het menu beweegt;
	   300 ms wachten voorkomt dat, en sluiten mag meteen. */
	.hiz-nav .wp-block-navigation__submenu-container {
		min-width: 13rem;
		padding: 0.5rem;
		border: 1px solid var(--hiz-color-line);
		border-radius: var(--hiz-radius-sm);
		background-color: var(--hiz-color-paper);
		transition-delay: 0s;
	}

	.hiz-nav .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container {
		transition-delay: 300ms;
	}

	.hiz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex;
		width: 100%;
		padding: 0.5rem 0.75rem;
		border-radius: var(--hiz-radius-sm);
	}

	.hiz-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background-color: var(--hiz-color-mint);
		text-decoration: none;
	}

	.hiz-header__menu-toggle {
		display: none;
	}
}

/*
 * Vanaf 1280 px staat het zoekveld gewoon open in de header. NN/g en Baymard meten
 * allebei dat een dichtgeklapt zoekveld minder gebruikt wordt; bij een winkel waar de
 * plaatsnaam dé zoekterm is, is dat de duurste klik van de site.
 */
@media (min-width: 1280px) {
	.hiz-header__zoek {
		position: static;
		display: block;
		flex: 0 1 18rem;
		min-width: 11rem;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.hiz-header__zoek-snel,
	.hiz-header__zoek-knop {
		display: none;
	}
}

@media (min-width: 1536px) {
	.hiz-header__pitch {
		display: block;
	}

	/*
	 * De merkkolom krijgt een vaste breedte. De payoff staat op één regel (`nowrap`) en zou
	 * de kolom dus zo breed maken als het lettertype toevallig tekent; met het terugvalfont
	 * was dat 331 px in plaats van 284 px, en dat verschil duwde de navigatie naar een
	 * tweede regel. Vast = 18 rem: het terugvalfont met `size-adjust` past daar precies in,
	 * en een lettertype dat tóch breder uitvalt wordt afgekapt in plaats van dat het de
	 * header hoger maakt. Geen enkele wissel verandert nog een pixel aan de layout.
	 */
	.hiz-header__merk {
		flex: 0 0 18rem;
		width: 18rem;
		max-width: 18rem;
	}

	/* Alleen de payoff wordt afgekapt; de merkkolom zelf niet, anders knipt hij de
	   focusrand van het woordmerk weg. */
	.hiz-header__pitch {
		max-width: 100%;
		overflow: hidden;
	}

	/* Het woordmerk hoeft geen eigen tikdoelhoogte meer: de merkkolom is met de payoff
	   erbij al ruim boven de 44 px. */
	.hiz-header__merk .hiz-woordmerk {
		min-height: auto;
	}
}

/* ------------------------------------------------- zoekveld met suggesties */

/*
 * Blok `hiz/zoeken`, weergave "veld". Het invoerveld is een combobox (W3C APG); het
 * paneel eronder is een listbox met groepen. Baymard: geef plaats-suggesties een andere
 * opmaak dan gewone treffers, anders vallen de twee soorten over elkaar heen.
 */

.hiz-zoek {
	position: relative;
}

.hiz-zoek__form {
	margin: 0;
}

.hiz-zoek__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 700;
}

.hiz-zoek__row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.hiz-zoek__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--hiz-control);
}

/* Safari tekent een eigen kruisje in `type="search"`; dat botst met de suggesties. */
.hiz-zoek__input::-webkit-search-decoration,
.hiz-zoek__input::-webkit-search-cancel-button {
	appearance: none;
}

.hiz-zoek__knop {
	flex: none;
}

.hiz-zoek--compact .hiz-zoek__input {
	min-height: var(--hiz-touch);
}

.hiz-zoek--compact .hiz-zoek__knop {
	padding-inline: 1rem;
}

.hiz-zoek__paneel {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 0.35rem);
	z-index: 70;
	max-height: min(70vh, 30rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.35rem;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm);
	background-color: var(--hiz-color-white);
	box-shadow: 0 14px 34px rgb(30 35 82 / 18%);
	text-align: start;
}

.hiz-zoek__groep + .hiz-zoek__groep {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-zoek__groep-kop {
	margin: 0.25rem 0.6rem;
	font-family: var(--hiz-font-code);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
}

.hiz-zoek__optie {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--hiz-touch);
	padding: 0.35rem 0.6rem;
	border-radius: var(--hiz-radius-sm);
	color: var(--hiz-color-ink);
	cursor: pointer;
}

.hiz-zoek__optie.is-actief,
.hiz-zoek__optie:hover {
	background-color: var(--hiz-color-mint);
}

/* Plaats: de tweede as van HIZ, dus visueel apart – een streep in de accentkleur.
   Als `box-shadow` en niet als `border-left`: met de afgeronde hoeken van de optie
   werd een echte rand een boogje in plaats van een streep. */
.hiz-zoek__optie--plaats {
	justify-content: space-between;
	padding-left: 0.75rem;
	box-shadow: inset 3px 0 0 var(--hiz-color-lemon);
	font-weight: 700;
}

/* Scope-suggestie ("Hoodie uit Haarlem"): cursief, zoals Baymard adviseert. */
.hiz-zoek__optie--scope {
	font-style: italic;
}

.hiz-zoek__optie--alles {
	justify-content: center;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hiz-zoek__optie-beeld {
	flex: none;
	width: 40px;
	height: 50px;
	object-fit: cover;
	border-radius: 6px;
	background-color: var(--hiz-color-mint);
}

.hiz-zoek__optie-tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hiz-zoek__optie-naam {
	font-weight: 400;
	overflow-wrap: anywhere;
}

/* Het deel dat de bezoeker nog niet had getypt, wordt benadrukt – niet andersom. */
.hiz-zoek__aanvulling {
	font-weight: 800;
}

.hiz-zoek__optie-meta {
	flex: none;
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-muted);
}

.hiz-zoek__optie--product .hiz-zoek__optie-meta {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ mobiel menu */

.hiz-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	/* Standaard dicht; hiz.js opent het menu. Zo is er geen flits voordat het script laadt. */
	display: none;
	flex-direction: column;
	gap: var(--hiz-space-5);
	padding: var(--hiz-space-5) var(--hiz-gutter) calc(var(--hiz-space-6) + env(safe-area-inset-bottom));
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hiz-menu.is-open {
	display: flex;
}

.hiz-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-4);
	min-height: var(--hiz-touch);
}

.hiz-menu__titel {
	margin: 0;
	font-family: var(--hiz-font-code);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: var(--hiz-text-md);
	color: var(--hiz-color-sage);
}

.hiz-menu__sluit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
	border: 1px solid var(--hiz-color-line-licht);
	border-radius: var(--hiz-radius-pill);
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--hiz-h3);
	cursor: pointer;
}

.hiz-menu a,
.hiz-menu .wp-block-navigation-item__content {
	color: var(--hiz-color-paper);
}

.hiz-menu .wp-block-navigation__container,
.hiz-menu .wp-block-navigation {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.hiz-menu .wp-block-navigation-item {
	border-bottom: 1px solid var(--hiz-color-line-licht);
}

.hiz-menu .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 3.25rem;
	font-size: var(--hiz-h3);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-decoration: none;
}

/* Submenu-items in de overlay staan gewoon ingesprongen onder hun kop. */
.hiz-menu .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	position: static;
	width: auto;
	min-width: 0;
	padding: 0 0 0 var(--hiz-space-4);
	border: 0;
	background: none;
	opacity: 1;
	visibility: visible;
}

.hiz-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: var(--hiz-touch);
	font-size: var(--hiz-h4);
	font-weight: 600;
}

.hiz-menu__kop {
	margin: 0 0 var(--hiz-space-2);
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-sage);
}

.hiz-menu__chips a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch);
	padding: 0 1rem;
	border: 1px solid var(--hiz-color-line-licht);
	border-radius: var(--hiz-radius-pill);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
}

/* Het zoekveld staat op het donkere vlak; het suggestiepaneel blijft wit. */
.hiz-menu__zoek .hiz-zoek__input {
	background-color: var(--hiz-color-white);
	color: var(--hiz-color-ink);
}

.hiz-menu__zoek .hiz-zoek__paneel a,
.hiz-menu__zoek .hiz-zoek__optie {
	color: var(--hiz-color-ink);
}

.hiz-menu__voet {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-4);
	font-size: 15px;
	color: var(--hiz-color-sage);
}

.hiz-menu__secundair {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--hiz-space-4);
}

.hiz-menu__secundair a {
	display: flex;
	align-items: center;
	min-height: var(--hiz-touch);
	color: var(--hiz-color-sage);
	font-weight: 600;
	text-underline-offset: 0.3em;
}

body.hiz-menu-open {
	overflow: hidden;
}

@media (min-width: 1024px) {
	.hiz-menu,
	.hiz-menu.is-open {
		display: none;
	}
}

/* ------------------------------------------------------------------ footer */

.hiz-footer {
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-footer a {
	color: var(--hiz-color-paper);
	text-decoration: none;
}

.hiz-footer a:hover,
.hiz-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hiz-footer :is(h2, h3, h4),
.hiz-menu__zoek .hiz-zoek__label,
.hiz-footer__kop {
	margin: 0 0 var(--hiz-space-2);
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: var(--hiz-eyebrow);
	line-height: 1.2;
	color: var(--hiz-color-sage);
}

/*
 * Decoratief woordmerk (aria-hidden), als omtrek in Link Water: een vulling in Slate
 * donker haalde 1,28:1 en werd door axe als `color-contrast` gemeld (ronde 3, 21x).
 * Zonder `-webkit-text-stroke` valt hij terug op een vulling die zelf 3,5:1 haalt.
 */
.hiz-footer__wordmark {
	font-family: var(--hiz-font-code);
	font-weight: 800;
	/* Ronde 5: nooit hoger dan 96 px. 0.85 regelhoogte op 112 px zou 95 px halen; met
	   clamp(56px, 10vw, 112px) blijft de bandhoogte binnen 96 px op elke breedte. */
	font-size: clamp(56px, 10vw, 112px);
	line-height: 0.85;
	max-height: 96px;
	letter-spacing: -0.02em;
	color: var(--hiz-color-slate-licht);
	margin: 0 0 var(--hiz-space-5);
}

@supports (-webkit-text-stroke: 3px currentColor) {
	.hiz-footer__wordmark {
		color: transparent;
		-webkit-text-stroke: 2px var(--hiz-color-sage);
	}
}

/*
 * Livegang (LQ): woordmerk en linkgroepen staan samen in `.hiz-footer__boven`. Onder 1024 px
 * boven elkaar, daarna het woordmerk links naast de vier groepen. Zo blijft de voettekst op
 * 1280 px onder 450 px in plaats van 730 px.
 */
.hiz-footer__boven {
	display: grid;
	gap: var(--hiz-space-5);
}

.hiz-footer__boven .hiz-footer__wordmark {
	margin: 0;
	/* Regelhoogte 1: bij 0,85 viel de letter 30 px onder zijn eigen vak en liep hij over de
	   kop "Collectie" heen (gemeten op 1280 px). */
	line-height: 1;
	max-height: none;
}

@media (min-width: 1024px) {
	.hiz-footer__boven {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: var(--hiz-space-8);
	}

	.hiz-footer__boven .hiz-footer__wordmark {
		font-size: 88px;
	}
}

/*
 * Baymard: footerlinks worden pas scanbaar in gescheiden groepen met een eigen kop.
 * Mobiel (< 768 px) is elke groep een uitklapper van één regel: vier regels in plaats van
 * vier kolommen van 270 px onder elkaar (de voettekst was 1.900 px op 375 px). Vanaf 768 px
 * staan de groepen altijd open naast elkaar; `::details-content` toont de inhoud ook zonder
 * JavaScript, `initVoettekst()` in hiz.js zet daarnaast `open` voor de juiste semantiek.
 */
.hiz-footer__kolommen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	font-size: var(--hiz-text-sm);
}

.hiz-footer__groep {
	border-top: 1px solid var(--hiz-color-line-licht);
}

.hiz-footer .hiz-footer__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-2);
	min-height: var(--hiz-touch);
	margin: 0;
	cursor: pointer;
	list-style: none;
}

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

.hiz-footer__kop::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: var(--hiz-space-1);
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1rem, -0.1rem);
	transition: transform var(--hiz-motion-fast) var(--hiz-ease);
}

.hiz-footer__groep[open] > .hiz-footer__kop::after {
	transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.hiz-footer__groep > ul {
	padding-bottom: var(--hiz-space-3);
}

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

	.hiz-footer__groep {
		border: 0;
	}

	/* Op brede schermen is de kop een kop, geen knop. */
	.hiz-footer .hiz-footer__kop {
		min-height: 0;
		margin-bottom: var(--hiz-space-2);
		cursor: default;
		pointer-events: none;
	}

	.hiz-footer__kop::after {
		display: none;
	}

	.hiz-footer__groep::details-content {
		content-visibility: visible;
	}

	.hiz-footer__groep > ul {
		padding-bottom: 0;
	}
}

.hiz-footer .wp-block-list,
.hiz-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.hiz-footer li {
	line-height: 1.3;
}

.hiz-footer li a {
	display: inline-flex;
	align-items: center;
	/* 14 px tekst, maar het tikdoel blijft 44 x 44 px (contract). De minimumbreedte is
	   nodig sinds de kolommen 14 px zijn: "Zwolle" mat 41 px breed. */
	min-height: var(--hiz-touch);
	min-width: var(--hiz-touch);
	font-size: var(--hiz-text-sm);
}

/*
 * CX-24: één regel boven de onderbalk, in dezelfde lichte kleur als de voettekst eronder
 * (Link Water op het donkere vlak, contrast 5,6 : 1). De link houdt zijn onderstreping:
 * `.hiz-footer a` haalt die voor de menulinks weg, maar een link midden in een zin moet ook
 * zonder kleur herkenbaar zijn.
 */
.hiz-footer__nieuws {
	max-width: var(--hiz-measure-lead);
	margin: 0;
	font-size: var(--hiz-text-sm);
	line-height: 1.5;
	color: var(--hiz-color-sage);
}

.hiz-footer .hiz-footer__nieuws .hiz-textlink {
	color: var(--hiz-color-paper);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.hiz-footer__juridisch ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.hiz-footer__onder {
	border-top: 1px solid var(--hiz-color-line-licht);
	padding-top: var(--hiz-space-5);
	font-size: 13px;
	color: var(--hiz-color-sage);
}

.hiz-footer__onder p {
	margin: 0;
	font-size: 13px;
}

/* ------------------------------------------------------- plaatsenindex (voet) */

/*
 * Alle plaatsen per provincie. Standaard dichtgeklapt: de voettekst blijft rustig en
 * toont eerst de structuur (NN/g), terwijl de links wél in de HTML staan – vindbaar met
 * Ctrl+F en voor zoekmachines de goedkoopste manier om elke plaatspagina te bereiken.
 */
.hiz-plaatsindex {
	margin-block: var(--hiz-space-6);
	padding-top: var(--hiz-space-5);
	border-top: 1px solid var(--hiz-color-line-licht);
}

.hiz-plaatsindex__titel {
	margin: 0 0 var(--hiz-space-4);
	font-family: var(--hiz-font-code);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: var(--hiz-eyebrow);
	line-height: 1.2;
	color: var(--hiz-color-sage);
}

.hiz-plaatsindex__groepen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	gap: 0 var(--hiz-space-5);
	align-items: start;
}

.hiz-plaatsindex__kop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-2);
	min-height: var(--hiz-touch);
	padding-right: var(--hiz-space-1);
	font-size: var(--hiz-text-sm);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* Eigen driehoekje, zodat de kop links begint en het teken rechts staat. */
.hiz-plaatsindex__kop::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: auto;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1rem, -0.1rem);
	transition: transform var(--hiz-motion-fast) var(--hiz-ease);
}

.hiz-plaatsindex__groep[open] > .hiz-plaatsindex__kop::after {
	transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

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

.hiz-plaatsindex__n {
	font-family: var(--hiz-font-code);
	font-variant-numeric: tabular-nums;
	color: var(--hiz-color-sage);
}

.hiz-plaatsindex__lijst {
	margin: 0 0 var(--hiz-space-4);
	padding: 0 0 0 var(--hiz-space-1);
	list-style: none;
	font-size: var(--hiz-text-sm);
}

/* Over de hele kolombreedte klikbaar, met een ondergrens voor korte plaatsnamen: "Best",
   "Edam" en "Lisse" bleven anders 32–38 px breed en haalden het tikdoel van 44 px niet. */
.hiz-plaatsindex__lijst a {
	display: flex;
	align-items: center;
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
	color: var(--hiz-color-sage);
}

.hiz-plaatsindex__lijst a:hover,
.hiz-plaatsindex__lijst a:focus-visible {
	color: var(--hiz-color-paper);
}

/* ---------------------------------------------------- zoekresultatenpagina */

.hiz-zoekpagina .hiz-zoek {
	max-width: 34rem;
	margin-top: var(--hiz-space-4);
}

.hiz-zoek__plaatsen {
	margin-bottom: var(--hiz-space-5);
}

.hiz-zoek__plaatsen-kop,
.hiz-zoek__overig-kop {
	margin: 0 0 var(--hiz-space-2);
	font-size: 15px;
	color: var(--hiz-color-muted);
}

.hiz-zoek__plaatskaarten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: var(--hiz-space-4);
}

.hiz-zoek__plaatskaart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	height: 100%;
	padding: var(--hiz-space-4);
	border: 1px solid var(--hiz-color-line);
	border-left: 4px solid var(--hiz-color-lemon);
	border-radius: var(--hiz-radius-sm);
	background-color: var(--hiz-color-mint);
	color: inherit;
	text-decoration: none;
}

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

.hiz-zoek__plaatsnaam {
	font-size: var(--hiz-h3);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hiz-zoek__plaatsaantal {
	font-size: 15px;
	color: var(--hiz-color-muted);
}

.hiz-zoek__scopes,
.hiz-zoek__modellen {
	list-style: none;
	margin: 0 0 var(--hiz-space-5);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hiz-zoek__scope {
	text-decoration: none;
	font-style: italic;
}

.hiz-zoek__producten-kop,
.hiz-zoek__geen-kop {
	margin: 0 0 var(--hiz-space-4);
	font-size: var(--hiz-h3);
	letter-spacing: -0.01em;
}

.hiz-zoekresultaten__paginering {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--hiz-space-4);
	margin-top: var(--hiz-space-5);
}

.hiz-zoekresultaten__pagina {
	font-variant-numeric: tabular-nums;
	color: var(--hiz-color-muted);
}

.hiz-zoek__geen {
	max-width: 46ch;
}

.hiz-zoek__geen-lead {
	margin-bottom: var(--hiz-space-2);
}

.hiz-zoek__overig {
	margin-top: var(--hiz-space-6);
	padding-top: var(--hiz-space-5);
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-zoek__overiglijst,
.hiz-productlijst .wc-block-grid__products,
.hiz-productlijst ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hiz-zoek__overiglijst li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	min-height: var(--hiz-touch);
}

.hiz-zoek__overigsoort {
	font-family: var(--hiz-font-code);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
}

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

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

.hiz-panel {
	background-color: var(--hiz-color-white);
	border-radius: var(--hiz-radius-md);
	padding: var(--hiz-space-6);
}

.hiz-panel--donker,
.is-style-dark {
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	border-radius: var(--hiz-radius-md);
	padding: var(--hiz-space-6);
}

.hiz-panel--donker :is(h1, h2, h3, h4, p, li),
.is-style-dark :is(h1, h2, h3, h4, p, li) {
	color: var(--hiz-color-paper);
}

/* Bijschriften erven de gedempte kleur; op Bright Slate is dat 1,3:1. */
.hiz-panel--donker figcaption,
.hiz-panel--donker .has-muted-color,
.hiz-menu__zoek .hiz-field__hint,
.has-pine-background-color .hiz-eyebrow,
.has-forest-background-color figcaption,
.hiz-footer figcaption,
.hiz-menu figcaption {
	color: var(--hiz-color-sage);
}

.hiz-panel--donker a:not(.hiz-button):not(.wp-block-button__link) {
	color: var(--hiz-color-paper);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/*
 * Elk vlak met Bright Slate als achtergrond. `theme.json` geeft koppen en knoppen de
 * merkkleur als tekstkleur; op een merkkleurig vlak levert dat 1:1 op. Deze regels staan
 * hier en niet in retail.css/studio.css, zodat elk nieuw donker vlak ze meekrijgt.
 * `.hiz-lead` staat er los bij: die heeft een eigen kleurregel.
 */
.has-forest-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-forest-background-color .hiz-lead,
.has-pine-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-pine-background-color .hiz-lead {
	color: var(--hiz-color-paper);
}

.has-forest-background-color .hiz-eyebrow {
	color: var(--hiz-color-sage);
}

.hiz-panel--mint,
.is-style-panel {
	background-color: var(--hiz-color-mint);
	border-radius: var(--hiz-radius-md);
	padding: var(--hiz-space-6);
}

/* Groot paneel en hero-beeld mogen de grote radius houden. */
.hiz-panel--groot {
	border-radius: var(--hiz-radius-lg);
	padding: var(--hiz-space-7);
}

.hiz-hero__titel {
	/* Was clamp(40px, 12vw, 80px) - de schaal stopt bij 52 px. */
	margin: 0;
	font-size: var(--hiz-h1);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.hiz-hero__media img {
	border-radius: var(--hiz-radius-lg);
	width: 100%;
	max-height: 560px;
	object-fit: cover;
}

.hiz-figuur {
	margin: 0;
}

.hiz-figuur img {
	border-radius: var(--hiz-radius-md);
	width: 100%;
	/* Sfeerbeeld nooit hoger dan 60vh (visuele standaard). */
	max-height: 60vh;
	object-fit: cover;
}

.hiz-figuur figcaption {
	margin-top: var(--hiz-space-2);
	font-size: 13px;
	color: var(--hiz-color-muted);
}

/* Op een Bright Slate-vlak haalt gedempt maar 1,3:1. */
.hiz-panel--donker .hiz-figuur figcaption,
.is-style-dark .hiz-figuur figcaption,
.has-forest-background-color .hiz-figuur figcaption,
.hiz-footer .hiz-figuur figcaption {
	color: var(--hiz-color-sage);
}

@media (min-width: 640px) {}

/* Plaatsenlijst (45 routes). */
.hiz-plaatsen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
}

.hiz-plaatsen a {
	display: flex;
	align-items: center;
	min-height: var(--hiz-touch);
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	background-color: var(--hiz-color-white);
}

.hiz-plaatsen a:hover,
.hiz-plaatsen a:focus-visible {
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	border-color: var(--hiz-color-forest);
}

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

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

/* Genummerde principes (01/02/03). */
.hiz-principes {
	list-style: none;
	counter-reset: hiz-principe;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hiz-space-5);
	grid-template-columns: 1fr;
}

.hiz-principes > li {
	counter-increment: hiz-principe;
	border-top: 2px solid var(--hiz-color-line);
	padding-top: var(--hiz-space-4);
}

.hiz-principes > li::before {
	content: counter(hiz-principe, decimal-leading-zero);
	display: block;
	font-family: var(--hiz-font-code);
	font-weight: 800;
	font-size: var(--hiz-h3);
	letter-spacing: 0.06em;
	color: var(--hiz-color-fern);
	margin-bottom: 0.25rem;
}

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

/* --------------------------------------------------------------- accordeon */

.hiz-accordeon,
.hiz-uitklap {
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-accordeon summary,
.hiz-uitklap > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-4);
	min-height: var(--hiz-touch);
	padding: var(--hiz-space-3) 0;
	font-weight: 600;
	font-size: var(--hiz-h4);
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--hiz-color-forest);
	cursor: pointer;
	list-style: none;
}

/* Elk eigen uitklapkopje verbergt de standaardmarker; één regel voor allemaal. */
.hiz-accordeon summary::-webkit-details-marker,
.hiz-uitklap > summary::-webkit-details-marker,
.hiz-filters__kop::-webkit-details-marker,
.hiz-filters__meer summary::-webkit-details-marker,
.hiz-plaatsindex__kop::-webkit-details-marker {
	display: none;
}

.hiz-accordeon summary::after,
.hiz-uitklap > summary::after {
	content: "+";
	font-family: var(--hiz-font-code);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	flex: none;
}

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

.hiz-accordeon > :not(summary),
.hiz-uitklap > :not(summary) {
	margin-block: 0 var(--hiz-space-4);
	max-width: var(--hiz-measure);
}

/* -------------------------------------------------------- core-blokstijlen */

.wp-block-button__link {
	min-height: var(--hiz-control);
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--hiz-color-forest);
	color: var(--hiz-color-forest);
}

.is-style-ghost > .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	color: var(--hiz-color-forest);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	padding-inline: 0.75rem;
}

.hiz-panel--donker .is-style-outline > .wp-block-button__link,
.has-forest-background-color .is-style-outline > .wp-block-button__link {
	border-color: var(--hiz-color-paper);
	color: var(--hiz-color-paper);
}

.hiz-panel--donker .is-style-outline > .wp-block-button__link:hover,
.has-forest-background-color .is-style-outline > .wp-block-button__link:hover {
	background-color: var(--hiz-color-paper);
	color: var(--hiz-color-forest);
}

h1.is-style-eyebrow,
h2.is-style-eyebrow,
h3.is-style-eyebrow,
h4.is-style-eyebrow,
h5.is-style-eyebrow,
h6.is-style-eyebrow {
	font-family: var(--hiz-font-code);
	font-weight: 700;
	font-size: var(--hiz-eyebrow);
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
	margin-bottom: var(--hiz-space-2);
}

.wp-block-list.is-style-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}

.wp-block-list.is-style-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.75rem;
	height: 0.4rem;
	border-left: 2px solid var(--hiz-color-fern);
	border-bottom: 2px solid var(--hiz-color-fern);
	transform: rotate(-45deg);
}

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--hiz-color-line);
	opacity: 1;
}

.wp-block-quote {
	margin-inline: 0;
}

.wp-block-search__button,
.wp-block-search .wp-block-search__button {
	min-height: var(--hiz-control);
	padding-inline: 20px;
	border: 1px solid var(--hiz-color-forest);
	border-radius: var(--hiz-radius-pill);
	background-color: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	font-weight: 700;
	cursor: pointer;
}

.wp-block-search__input {
	min-height: var(--hiz-control);
	padding: var(--hiz-space-3) var(--hiz-space-4);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm);
	background-color: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font: inherit;
	min-width: 0;
}

.wp-block-search__label {
	font-weight: 700;
	margin-bottom: 0.375rem;
	display: block;
}

.wp-block-query-pagination {
	margin-top: var(--hiz-space-6);
	gap: 0.5rem;
	align-items: center;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
	padding-inline: 0.5rem;
	border-radius: var(--hiz-radius-pill);
	text-decoration: none;
	font-weight: 700;
}

.wp-block-post-template,
.wp-block-post-template.is-layout-grid {
	gap: var(--hiz-card-gap);
}

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

.wp-block-post-featured-image {
	background-color: var(--hiz-color-mint);
	border-radius: var(--hiz-radius-md);
	overflow: hidden;
}

/* Tabellen: alleen horizontale lijnen, geen buitenrand; koppen 14px 600. */
.wp-block-table,
.hiz-tabel-scroll {
	overflow-x: auto;
}

.wp-block-table table,
table.hiz-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hiz-text-md);
}

.wp-block-table :is(td, th),
table.hiz-tabel :is(td, th) {
	border: 0;
	border-bottom: 1px solid var(--hiz-color-line);
	padding: var(--hiz-space-3) var(--hiz-space-4) var(--hiz-space-3) 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table th,
table.hiz-tabel th {
	font-size: var(--hiz-text-sm);
	font-weight: 600;
	color: var(--hiz-color-forest);
}

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

/* -------------------------------------------------------- reveal-animaties */

[data-hiz-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--hiz-motion-reveal) var(--hiz-ease), transform var(--hiz-motion-reveal) var(--hiz-ease);
	will-change: opacity, transform;
}

[data-hiz-reveal].is-zichtbaar,
/* Zonder JS blijft alles gewoon zichtbaar. */
html:not(.hiz-js) [data-hiz-reveal] {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------ reduced motion etc. */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	[data-hiz-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}

	.hiz-card__link:hover .hiz-card__media img {
		transform: none;
	}
}

@media (forced-colors: active) {
	.hiz-button,
	.hiz-header__knop,
	.hiz-menu__sluit {
		border: 2px solid ButtonText;
	}
}

/* ------------------------------------------------------------ print (kort) */

@media print {
	.hiz-header,
	.hiz-menu,
	.hiz-footer,
	.hiz-filters {
		display: none !important;
	}
}

/* ------------------------------------------------------- footer-onderdelen */

/* Terugval voor een voettekst die met de hand in kolommen is gezet. */
.hiz-footer .wp-block-columns {
	gap: var(--hiz-space-6);
}

/* -------------------------------------------------------------- hoofdinhoud */

.hiz-main {
	display: block;
	/* Secties hebben alleen ruimte bóven zich; de laatste krijgt hier zijn lucht. */
	padding-bottom: var(--hiz-section-gap);
}

/* Breadcrumb-achtige regel boven een titel. */
.hiz-kruimels {
	margin: 0 0 var(--hiz-space-2);
	font-size: var(--hiz-text-sm);
	color: var(--hiz-color-muted);
}

/* ------------------------------------------- lijsten uit core-query-blokken */

/* Producten: 2 kolommen op mobiel (leesbaar op 375 px), daarna opbouwend. */
.hiz-productlijst .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hiz-space-5) var(--hiz-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hiz-productlijst .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	min-width: 0;
}

.hiz-productlijst .wp-block-post-template > li > * {
	margin: 0;
}

/* De titel is het tikdoel van een productkaart; één regel tekst was 18–37 px hoog. */
.hiz-productlijst .wp-block-post-title a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch);
	text-decoration: none;
}

.hiz-productlijst .wp-block-post-title a:hover,
.hiz-productlijst .wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hiz-productlijst .wp-block-post-terms {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm);
}

.hiz-productlijst .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

/* De prijs hoort op de kaart: zonder prijs is een productrij geen winkel maar een galerij. */
.hiz-productlijst .wp-block-woocommerce-product-price {
	margin-top: 0.25rem;
	color: var(--hiz-color-forest);
	font-weight: 700;
}

.hiz-productlijst .wp-block-woocommerce-product-price del {
	color: var(--hiz-color-muted);
	font-weight: 400;
}

@media (min-width: 1024px) {
	.hiz-productlijst .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hiz-space-6) var(--hiz-space-5);
	}
}

@media (min-width: 1280px) {
	.hiz-productlijst .wp-block-post-template {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Berichten en overige archieven: rustiger, breder. */
.hiz-postlijst .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.hiz-postlijst .wp-block-post-template > li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	min-width: 0;
}

.hiz-postlijst .wp-block-post-template > li > * {
	margin: 0;
}

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

@media (min-width: 1280px) {
	.hiz-postlijst .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------- navigatie (core/navigation) */

/* De navigatieblok-klasse komt op zowel <nav> als <ul> te staan. */
@media (min-width: 1024px) {
	/*
	 * `nowrap` is hier geen opmaakkeuze maar een CLS-maatregel. De header staat in de flow
	 * (sticky), dus zodra deze rij naar een tweede regel terugloopt, groeit de header en
	 * schuift de hele pagina omlaag. Dat gebeurde bij het omwisselen van het lettertype op
	 * 1536 px: de merkkolom was met het terugvalfont 331 px breed, de menurij paste niet
	 * meer, de header werd 130 px en na de wissel weer 74 px (CLS 0,111, ronde 3–4).
	 * De rij mag krimpen (`min-width: 0`), maar nooit terugvallen op een tweede regel.
	 */
	.hiz-nav.wp-block-navigation__container,
	.hiz-nav .wp-block-navigation__container {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		min-width: 0;
		font-size: 15px;
		font-weight: 600;
		gap: clamp(12px, 1.6vw, 24px);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* De menu-items zelf houden hun woord op één regel; anders groeit de rij alsnog. */
	.hiz-nav.wp-block-navigation__container > .wp-block-navigation-item,
	.hiz-nav .wp-block-navigation__container > .wp-block-navigation-item {
		white-space: nowrap;
	}
}

.hiz-menu .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Lange sitenamen mogen de header niet twee regels hoog maken. */
.hiz-header__merk .wp-block-site-title {
	min-width: 0;
	max-width: 100%;
}

.hiz-header__merk .wp-block-site-title a {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Titels vullen de resterende ruimte, zodat metaregels onder elkaar uitlijnen. */
.hiz-productlijst .wp-block-post-title {
	flex: 1 1 auto;
}

.hiz-productlijst .wp-block-post-featured-image {
	margin-bottom: 0.25rem;
}

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

/*
 * Ontbreekt er een foto, dan komt daar een rustig Link Water-vlak met het HIZ-monogram –
 * nooit het woord "placeholder". `.hiz-media-leeg` is de klasse uit het contract
 * Media-rollen: `hiz_media_img()` (A2) rendert hem, en dit bestand geeft hem vorm.
 * De vorm zit in de achtergrond, zodat elk element hem kan dragen: een <div>, een
 * <figure> of een ::before op een kaart zonder afbeelding.
 */

/*
 * Ronde 5: een ontbrekende foto in een sectie levert géén leeg vlak van 300–450 px meer
 * op, maar een rustige band van maximaal 120 px in Link Water met een klein monogram.
 * De aspect-ratio blijft staan zolang die kleiner uitpakt dan 120 px (smalle kolommen),
 * `max-height` snijdt de rest weg. Kaartminiaturen houden wél hun ratio: anders zakt het
 * raster in en verspringen de rijen.
 */
/* Eén bron voor het monogramvlak; de varianten hieronder zetten alleen maat en vorm. */
.hiz-media-leeg,
.hiz-media-vlak,
.hiz-card__media-leeg,
.hiz-card__media:not(:has(img)),
.hiz-card__link:not(:has(.hiz-card__media))::before,
.hiz-productlijst .wp-block-post-template > li:not(:has(.wp-block-post-featured-image))::before {
	background-color: var(--hiz-color-mint);
	background-image: url("../img/hiz-monogram.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 40px;
}

/*
 * LET OP (ronde 5): `home.css` zet op dezelfde klasse `max-block-size: 28rem` (448 px),
 * een 4:5-verhouding, een rand en een Link Water-vlak, en laadt ná dit bestand – ook op
 * /hiz-studio/, want dat bestand komt mee met het `hiz/media`-blok. Zolang die regel er
 * staat, wint 448 px van de 120 px hieronder. `home.css` is van V1; die drie declaraties
 * moeten daar weg (gemeten: het lege vlak onder de Studio-hero is nu 448 px hoog).
 */
.hiz-media-leeg,
.hiz-media-vlak {
	display: block;
	aspect-ratio: var(--hiz-ratio, 16 / 5);
	max-height: 120px;
	max-block-size: 120px;
	border-radius: var(--hiz-radius-md);
	background-color: var(--hiz-color-mint);
	background-image: url("../img/hiz-monogram.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 40px;
}

.hiz-media-leeg--vierkant,
.hiz-media-leeg--breed,
.hiz-media-leeg--hero {
	--hiz-ratio: 16 / 5;
}

/* Productkaart uit het blok-contract zonder `.hiz-card__media`. */
.hiz-card__link:not(:has(.hiz-card__media))::before {
	content: "";
	display: block;
	aspect-ratio: var(--hiz-ratio, 4 / 5);
}

.hiz-card--maker .hiz-card__link:not(:has(.hiz-card__media))::before {
	--hiz-ratio: 1 / 1;
}

/* De plugin zet zelf een `.hiz-card__media-leeg` in de figure als er geen foto is
   (makers, editions). Die vult het hele vlak; werkt ook zonder :has()-ondersteuning. */
.hiz-card__media-leeg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Producten zonder uitgelichte afbeelding in een core-query krijgen hetzelfde vlak,
   zodat het raster niet inzakt. Browsers zonder :has() tonen simpelweg geen vlak. */
.hiz-productlijst .wp-block-post-template > li:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--hiz-radius-md);
	margin-bottom: var(--hiz-space-1);
}

/* ----------------------------------------------------- correcties uit de audit */

/* De plaatsenlijst uit `hiz/plaatsen-lijst` had links van 22 px hoog. Korte namen
   ("Best", "Edam") waren daarna nog steeds smaller dan 44 px. */
.hiz-plaatsen-lijst__link,
.hiz-plaatsen-lijst a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch);
	min-height: var(--hiz-touch);
}

/* Suggesties onder de plaatszoeker ("Bedoelde je misschien: Zeewolde"). */
.hiz-plaatszoeker__suggestie-lijst {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--hiz-space-4);
}

.hiz-plaatszoeker__suggestie-lijst a,
.hiz-verkooppunt a,
.hiz-verkooppunt__link,
.hiz-kruimels a,
.hiz-panel--donker p > a:not(.hiz-button):not(.wp-block-button__link),
.hiz-panel--donker li > a:not(.hiz-button):not(.wp-block-button__link) {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch);
}

/* Korte kruimels ("HIZ") bleven smaller dan 44 px. */
.hiz-kruimels a {
	justify-content: center;
	min-width: var(--hiz-touch);
	color: inherit;
}

/* Uitklappijltje van een submenu: tikgebied 44 px hoog, maar het pijltje zelf blijft klein. */
.hiz-nav .wp-block-navigation__submenu-icon,
.hiz-menu .wp-block-navigation__submenu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	min-width: 1.75rem;
	height: var(--hiz-touch);
	margin-left: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.hiz-nav .wp-block-navigation__submenu-icon svg,
.hiz-menu .wp-block-navigation__submenu-icon svg {
	width: 0.7rem;
	height: 0.7rem;
	margin-top: 0;
	stroke-width: 2;
}

/* Kop boven het raster: aantal links, actieve filters daarnaast. */
.hiz-catalog-grid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-2) var(--hiz-space-4);
	margin-bottom: var(--hiz-space-4);
}

.hiz-catalog-grid__count {
	margin: 0;
	color: var(--hiz-color-muted);
	font-size: 15px;
	white-space: nowrap;
}

.hiz-catalog-grid__meer {
	margin-top: var(--hiz-space-6);
	text-align: center;
}

/* Tijdens het bijwerken blijft de hoogte staan: geen sprong in de pagina. */
.hiz-catalog-grid__body {
	transition: opacity var(--hiz-motion-fast) var(--hiz-ease);
}

[data-hiz-catalog-grid][aria-busy="true"] .hiz-catalog-grid__body {
	opacity: 0.55;
}