/*
 * HIZ – catalogus, plaatspagina en zoekresultaten (ronde 5, agent V2).
 *
 * Eigenaar: agent V2 (catalogus en plaats). Dit bestand is in ronde 5 afgesplitst van
 * `woo.css` §10 en bevat alleen de drie sjablonen waar de bezoeker producten zoekt:
 *
 *   1. catalogus  – /winkel/, /product-categorie/<model>/, /kleur/<kleur>/
 *   2. plaats     – /plaats/<plaats>/ en /plaats/<plaats>/<model>/
 *   3. zoeken     – /?s=…
 *
 * `woo.css` houdt de generieke commerce-onderdelen (basisklassen, productkaart, kruimelpad,
 * winkelwagen, afrekenen, mijn account). Dit stijlblad laadt ná `woo.css` (inc/woocommerce.php)
 * en mag dus met gelijke specificiteit corrigeren.
 *
 * Regels van de visuele standaard die hier zijn toegepast (docs/agents/visuele-standaard.md):
 * - alle maten, afstanden en lettergroottes komen uit de tokens van `hiz.css` (`--hiz-space-*`,
 *   `--hiz-h2`, `--hiz-text-sm`, `--hiz-text-xs`, `--hiz-measure*`, `--hiz-radius-*`), elk met
 *   een fallback zodat het blad ook zonder die tokens niet stukloopt; er staan geen losse
 *   pixelmaten meer in dit bestand behalve de drie die de standaard zélf als vaste maat noemt
 *   (zijbalk 260 px, kleurstip 10 px, hero 320 px / lege beeldband 120 px);
 * - één kop-patroon: eyebrow → H2 → lead, gestapeld en links;
 * - H1 op een catalogus-, plaats- of zoekpagina is `--hiz-h2` (max 36 px), niet de displayschaal;
 * - lopende tekst op `--hiz-measure`;
 * - geen sectie zonder inhoud, geen dubbele telling.
 */

/* ---------------------------------------------------------------------------
 * 1. Kop van een catalogus- of zoekpagina.
 *
 * Was: H1 op de displayschaal (42 px op 375, 80 px op 1536) met daaronder een
 * termbeschrijving over de volle containerbreedte. Nu: H2-schaal, één regelbreedte,
 * en het aantal staat niet hier maar in de balk boven het raster.
 * ------------------------------------------------------------------------- */

.hiz-catalog__kruimels {
	margin-block: 0 var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* Kruimels zijn tekstlinks; ze moeten op een telefoon wél raakbaar zijn. */
.hiz-catalog__kruimels a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	color: inherit;
}

/*
 * De kop is even breed als het raster eronder (de containerbreedte die WordPress uit
 * `theme.json` zet: 1.200 px); alleen de tekst erbinnen houdt regelbreedte. Zou de kop zelf
 * op `--hiz-measure` staan, dan centreert de constrained-layout hem en staat de H1 midden
 * boven een links uitgelijnd raster.
 */
.hiz-catalog__head,
.hiz-zoekpagina__kop {
	margin-bottom: var(--hiz-space-6, 32px);
}

.hiz-catalog__titel,
.hiz-zoekpagina__titel {
	margin: 0;
	max-width: var(--hiz-measure, 64ch);
	font-size: var(--hiz-h2, clamp(26px, 3vw, 36px));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--hiz-color-forest);
}

.hiz-catalog__lead {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: var(--hiz-space-3, 12px) 0 0;
	font-size: var(--hiz-text-lg, 17px);
	line-height: 1.55;
	color: var(--hiz-color-ink);
}

/*
 * De constrained-layout van WordPress zet `margin-left/right: auto !important` op smalle
 * kinderen. Binnen de kop moet de titel en de intro links blijven staan, in lijn met het
 * raster eronder; alleen met !important is die regel te overrulen. De kop, het raster en de
 * resultaten zelf houden wél de gewone containerbreedte van het thema (1.200 px), zodat de
 * kaarten op 1536 px niet meegroeien tot 350 px breed.
 */
.hiz-catalog__head > *,
.hiz-zoekpagina__kop > * {
	margin-inline: 0 !important;
}

/* De hele kop staat strak onder de header; de sectie-afstand hoort tussen de secties. */
.hiz-zoekpagina__kop {
	padding-block-start: var(--hiz-space-5, 24px);
}

/* ---------------------------------------------------------------------------
 * 2. Indeling catalogus: filterbalk + raster (mobiel) → zijbalk + raster (desktop).
 * ------------------------------------------------------------------------- */

/*
 * Mobiel: één band boven het raster. Rij 1 is de filterbalk (knop Filter + sorteerchips),
 * rij 2 de telling met de actieve filters. Daaronder pas het raster.
 */
.hiz-filters__balk {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-3, 12px);
	flex-wrap: nowrap;
	/* De sorteerchips mogen zijwaarts schuiven in plaats van de balk twee regels hoog te maken. */
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: var(--hiz-space-1, 4px);
}

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

.hiz-filters__toggle {
	flex: none;
}

/* Sorteren staat sinds ronde 5 in de balk, niet meer als uitklapgroep in het paneel:
   één bediening, en op desktop rechtsboven op dezelfde regel als de telling. */
.hiz-filters__sorteer {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hiz-filters__sorteer-label {
	padding: 0;
	float: none;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	white-space: nowrap;
}

/* In de balk is de segmentkeuze een rij pillen, niet het blok van twee kolommen uit het paneel. */
.hiz-filters__balk .hiz-segment {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hiz-space-1, 4px);
	margin-top: 0;
	padding: var(--hiz-space-1, 4px);
	border-width: 1px;
	border-radius: var(--hiz-radius-pill, 999px);
}

.hiz-filters__balk .hiz-segment__item {
	min-height: 40px;
	padding-inline: var(--hiz-space-4, 16px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

/* Telling en actieve filters: één regel, rustig, muted. Dit is de enige plek op de pagina
   waar het aantal staat (aria-live), dus geen tweede telling in de kop of in het paneel. */
.hiz-catalog-grid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	margin-block: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
}

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

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

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

.hiz-actieve-filters__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	padding-inline: var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-catalog-grid__plaats {
	margin: 0;
}

/* Raster: 2 kolommen tot 640, 3 tot 1280, daarna 4 – met de tussenruimte uit de standaard. */
.hiz-catalog .hiz-grid--producten,
.hiz-collectie .hiz-grid--producten,
.hiz-zoekpagina .hiz-grid--producten {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hiz-space-4, 16px);
}

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

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

/*
 * Vanaf 1024 px: drie kolommen – zijbalk (260 px), raster, sortering.
 *
 * `.hiz-filters`, het formulier eromheen en `.hiz-catalog-grid` staan op `display: contents`,
 * zodat hun kinderen zélf de rasteronderdelen zijn. Zo staan de telling (links) en de
 * sortering (rechts) op één rij bóven het raster, terwijl de sorteerkeuzes in hetzelfde
 * formulier blijven als de filters – `hiz-platform.js` leest ze daar uit.
 */
@media (min-width: 1024px) {
	.hiz-catalog {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr) auto;
		column-gap: var(--hiz-space-6, 32px);
		align-items: start;
	}

	.hiz-catalog > .hiz-filters,
	.hiz-catalog .hiz-filters__form,
	.hiz-catalog > .hiz-catalog-grid {
		display: contents;
	}

	/* `display: flex` staat er expliciet: `hiz.css` verbergt de balk zodra `hiz.js` de klasse
	   `hiz-filters--inline` zet, en die regel heeft dezelfde specificiteit als deze. */
	.hiz-catalog .hiz-filters__balk,
	.hiz-catalog .hiz-filters--inline .hiz-filters__balk {
		display: flex;
		grid-column: 3;
		grid-row: 1;
		justify-content: flex-end;
		align-items: center;
		overflow: visible;
		margin-block: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
	}

	/*
	 * Op desktop staat het paneel altijd open; de knop "Filter" heeft dan geen taak meer.
	 * "Toegepast" verdwijnt daar ook: dezelfde chips staan rechts ernaast in de kop van het
	 * raster, en twee identieke rijen chips naast elkaar op één scherm is precies de dubbeling
	 * waar ronde 5 vanaf wil. Op mobiel blijft het blok staan – daar is de sheet een apart
	 * scherm en zie je het raster er niet naast.
	 */
	.hiz-catalog .hiz-filters__toggle,
	.hiz-catalog .hiz-filters__sheet-kop,
	.hiz-catalog .hiz-filters__toegepast {
		display: none;
	}

	.hiz-catalog .hiz-filters__balk .hiz-segment__item {
		min-height: 36px;
	}

	/* De <dialog> is hier geen dialoog maar de zijbalk. Dit werkt ook zonder JavaScript:
	   de regel hangt niet aan de klasse `hiz-filters--inline` die `hiz.js` zet. */
	.hiz-catalog .hiz-filters__sheet,
	.hiz-catalog .hiz-filters__sheet:not([open]):not(.is-open) {
		display: block;
		position: static;
		inset: auto;
		grid-column: 1;
		grid-row: 1 / span 3;
		width: auto;
		max-width: none;
		max-height: none;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}

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

	.hiz-catalog .hiz-catalog-grid__body {
		grid-column: 2 / -1;
		grid-row: 2;
	}

	.hiz-catalog .hiz-catalog-grid__voet {
		grid-column: 2 / -1;
		grid-row: 3;
	}

	/* Met JavaScript past het formulier zichzelf toe; de verzendknop zou een tweede,
	   overbodige bediening zijn. Zonder JavaScript blijft hij staan. */
	.hiz-js .hiz-catalog .hiz-filters__actions .hiz-button[type="submit"] {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Filterzijbalk: rustige typografie op 14 px.
 *
 * Was: elke groepskop in Barlow Condensed 15 px, uppercase, letterspacing 0,12em – vier
 * schreeuwende kopjes naast een raster van 15 px kaarttitels. Nu gewoon 14 px vet.
 * ------------------------------------------------------------------------- */

.hiz-catalog .hiz-filters__form {
	gap: var(--hiz-space-4, 16px);
}

.hiz-catalog .hiz-filters__kop {
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	font-family: var(--hiz-font-body);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hiz-color-forest);
}

.hiz-catalog .hiz-filters__group {
	padding-top: var(--hiz-space-3, 12px);
}

.hiz-catalog .hiz-filters__chips {
	gap: var(--hiz-space-2, 8px);
	margin-top: var(--hiz-space-2, 8px);
}

.hiz-catalog .hiz-filters__toegepast-kop {
	font-family: var(--hiz-font-body);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hiz-color-muted);
}

.hiz-catalog .hiz-filters__meer summary,
.hiz-catalog .hiz-filters__geen {
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-catalog .hiz-filters__actions {
	margin-top: var(--hiz-space-2, 8px);
	padding-block: var(--hiz-space-4, 16px);
}

@media (min-width: 1024px) {
	/* De uitklap met alle 45 plaatsen is bewust lang; die houdt een eigen scrolvenster.
	   De rest van de zijbalk loopt gewoon met de pagina mee. */
	.hiz-catalog .hiz-filters__meer > .hiz-filters__chips {
		max-height: 12rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		padding: 2px;
		margin-inline: -2px;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Kaartdetails in het raster: kleurstippen 10 px, meta 13 px, geen dubbele regels.
 * ------------------------------------------------------------------------- */

.hiz-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-xs, 13px);
	line-height: 1.4;
	color: var(--hiz-color-muted);
}

.hiz-card__kleuren {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-1, 4px);
	min-width: 0;
}

.hiz-card__stalen {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex: 0 0 auto;
}

/* De standaard noemt de kleurstip expliciet op 10 px. */
.hiz-card__staal {
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	background: var(--hiz-swatch, var(--hiz-color-line));
}

.hiz-card__staal-meer,
.hiz-card__kleur {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Tweede foto bij hover: alleen op apparaten met een echte muisaanwijzer. */
.hiz-card__media--hover {
	position: relative;
}

.hiz-card__media--hover .hiz-card__foto-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
	.hiz-card__media--hover .hiz-card__foto-hover {
		transition: opacity var(--hiz-motion-fast, 160ms) ease;
	}

	.hiz-card__link:hover .hiz-card__foto-hover,
	.hiz-card__link:focus-visible .hiz-card__foto-hover {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hiz-card__media--hover .hiz-card__foto-hover {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Voet van het raster: "Meer laden" als omlijnde knop, paginering als tekstlinks.
 * ------------------------------------------------------------------------- */

.hiz-catalog-grid__voet {
	margin-top: var(--hiz-space-6, 32px);
	text-align: center;
}

.hiz-catalog-grid__voet[hidden],
.hiz-catalog-grid__meer[hidden],
.hiz-paginering[hidden] {
	display: none;
}

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

.hiz-catalog-grid__meer {
	margin: 0;
}

/* De nummers staan bewust ná de knop: de knop is de gewone weg, de links zijn er voor wie
   ze wil (en voor Google, dat een JavaScript-knop niet volgt). Ze zijn tekstlinks, geen
   knoppenrij: één omlijnde knop per rij is genoeg. */
.hiz-paginering {
	margin-top: var(--hiz-space-5, 24px);
}

.hiz-paginering__lijst {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--hiz-space-1, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-paginering__link,
.hiz-paginering__huidig,
.hiz-paginering__gat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch, 44px);
	min-height: var(--hiz-touch, 44px);
	padding-inline: var(--hiz-space-2, 8px);
	border-radius: var(--hiz-radius-sm, 10px);
	font-size: var(--hiz-text-sm, 14px);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

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

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

.hiz-paginering__huidig {
	color: var(--hiz-color-forest);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.hiz-paginering__gat {
	min-width: 1.5rem;
	color: var(--hiz-color-muted);
}

/* ---------------------------------------------------------------------------
 * 6. Lege resultaten: een paneel met een uitweg, geen dood spoor.
 * ------------------------------------------------------------------------- */

.hiz-leeg {
	max-width: var(--hiz-measure, 64ch);
	padding: var(--hiz-space-6, 32px);
	border-radius: var(--hiz-radius-md, 16px);
	background-color: var(--hiz-color-mint);
}

.hiz-leeg__titel {
	margin: 0 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-h3, 19px);
	font-weight: 700;
}

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

.hiz-leeg__suggesties {
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: 0;
	list-style: none;
}

.hiz-leeg__suggestie {
	display: flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	border-bottom: 1px solid var(--hiz-color-line);
	color: inherit;
	font-size: var(--hiz-text-sm, 14px);
	text-decoration: none;
}

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

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

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

/* De regelafstand blijft leesbaar ondanks de tikdoelen van 44 px. */
.hiz-leeg__elders {
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * 7. Tekstblok onderaan de catalogus: lopende tekst op één regelbreedte.
 *
 * Was: volle containerbreedte, dus regels van 150+ tekens op 1280 px.
 * ------------------------------------------------------------------------- */

.hiz-catalog-tekst {
	margin-top: var(--hiz-space-7, 48px);
	padding-top: var(--hiz-space-6, 32px);
	border-top: 1px solid var(--hiz-color-line);
}

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

.hiz-catalog-tekst__prose h2 {
	margin: 0 0 var(--hiz-space-4, 16px);
	font-size: var(--hiz-h3, 19px);
	font-weight: 700;
	letter-spacing: -0.015em;
}

.hiz-catalog-tekst__prose p {
	margin: 0 0 var(--hiz-space-5, 24px);
	max-width: var(--hiz-measure, 64ch);
	color: var(--hiz-color-ink);
}

.hiz-catalog-tekst__linkblokken {
	margin-top: var(--hiz-space-6, 32px);
}

.hiz-catalog-tekst__linkblokken h3 {
	margin: var(--hiz-space-5, 24px) 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	color: var(--hiz-color-muted);
}

.hiz-catalog-tekst__linkblokken > h3:first-child {
	margin-top: 0;
}

.hiz-catalog-tekst__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Korte plaats- en modelnamen ("Wit", "Grijs") bleven onder de 44 px breed. */
.hiz-catalog-tekst__links a,
.hiz-leeg__elders a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--hiz-touch, 44px);
	min-height: var(--hiz-touch, 44px);
	font-size: var(--hiz-text-sm, 14px);
}

/* ---------------------------------------------------------------------------
 * 8. Plaatspagina.
 * ------------------------------------------------------------------------- */

/* Vangnet: een sectiegroep waarvan het blok niets rendert, laat geen lege band achter. */
.hiz-plaats-pagina > .hiz-section:not(:has(*)) {
	display: none;
}

/* ---- 8a. Hero: maximaal 320 px hoog op desktop ---- */

.hiz-plaats-hero {
	padding-block: var(--hiz-space-5, 24px) 0;
}

.hiz-plaats-hero .hiz-kruimels {
	margin-bottom: var(--hiz-space-3, 12px);
}

.hiz-plaats-hero__kolommen {
	gap: var(--hiz-space-6, 32px);
	align-items: center;
}

.hiz-plaats-hero__tekst > * {
	margin-block: 0;
}

.hiz-plaats-hero__tekst > * + * {
	margin-top: var(--hiz-space-3, 12px);
}

/* Plaatscode + status als eyebrow: de plaatsnaam zelf staat in de H1 eronder en hoeft er
   niet nog een keer naast te staan (dubbele regel uit ronde 4). */
.hiz-plaats-hero .hiz-plaats-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-eyebrow, 12px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hiz-color-muted);
}

.hiz-plaats-hero .hiz-plaats-status__naam {
	display: none;
}

.hiz-plaats-hero__titel {
	margin: 0;
	font-size: var(--hiz-h1, clamp(32px, 4.5vw, 52px));
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--hiz-color-forest);
}

.hiz-plaats-hero .hiz-plaats-intro__lead,
.hiz-plaats-hero .hiz-lead {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: 0;
	font-size: var(--hiz-text-lg, 17px);
	line-height: 1.55;
	color: var(--hiz-color-ink);
}

/* Drie modelchips, één rij. */
.hiz-plaats-hero .hiz-plaats-soorten__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-plaats-hero .hiz-plaats-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-3, 12px);
	margin: 0;
}

.hiz-plaats-hero__beeld .hiz-plaats-beeld {
	margin: 0;
	overflow: hidden;
	border-radius: var(--hiz-radius-lg, 24px);
	background-color: var(--hiz-color-mint);
	aspect-ratio: var(--hiz-ratio, 3 / 2);
}

.hiz-plaats-hero__beeld .hiz-plaats-beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Lege staat van het beeld: nooit een leeg vlak groter dan 120 px (visuele standaard).
 * Zonder foto is het een rustige band in Link Water, geen hero van 400 px.
 */
.hiz-plaats-hero__beeld:has(.hiz-media-leeg) .hiz-plaats-beeld {
	aspect-ratio: auto;
	height: 120px;
}

@media (min-width: 1024px) {
	/* De hele hero – kruimelpad, tekstkolom en foto – blijft binnen 320 px. */
	.hiz-plaats-hero__kolommen {
		max-height: 320px;
	}

	.hiz-plaats-hero__beeld .hiz-plaats-beeld {
		max-height: 320px;
	}
}

/* ---- 8b. Uitgelicht: maximaal acht kaarten, op mobiel een snap-strook ---- */

.hiz-collectie__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	margin-bottom: var(--hiz-space-6, 32px);
	padding-bottom: 0;
	border-bottom: 0;
}

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

.hiz-collectie__count {
	margin: 0;
	font-family: var(--hiz-font-body);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hiz-color-muted);
}

.hiz-collectie__meer {
	margin: var(--hiz-space-5, 24px) 0 0;
}

/*
 * Op 375 px kostte "Uitgelicht" met negen kaarten 1.823 px – vijf schermen scrollen vóór
 * de volledige collectie. De visuele standaard staat een horizontale snap-strook toe voor
 * zo'n rij; de kaarten zijn daarmee één scherm hoog in plaats van vijf.
 */
@media (max-width: 767px) {
	.hiz-collectie--uitgelicht .hiz-grid--producten,
	.hiz-collectie--klassiekers .hiz-grid--producten {
		/* Flex en niet grid: een rasterscroller met `grid-auto-flow: column` liet in
		   Chromium de documentbreedte meegroeien (1.751 px op een venster van 375 px),
		   ook mét `overflow-x: auto`. Met flex klopt de scrollpoort wel. */
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		/* `contain: paint` is hier geen optimalisatie maar een correctie: zonder deze regel
		   telde Chromium de kaarten rechts van de scrollpoort mee in de documentbreedte
		   (1.751 px op een venster van 375 px = horizontale schuifbalk op de hele pagina). */
		contain: paint;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		padding-block: var(--hiz-space-1, 4px) var(--hiz-space-2, 8px);
	}

	.hiz-collectie--uitgelicht .hiz-grid--producten::-webkit-scrollbar,
	.hiz-collectie--klassiekers .hiz-grid--producten::-webkit-scrollbar {
		display: none;
	}

	.hiz-collectie--uitgelicht .hiz-grid--producten > li,
	.hiz-collectie--klassiekers .hiz-grid--producten > li {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hiz-collectie--uitgelicht .hiz-grid--producten,
	.hiz-collectie--klassiekers .hiz-grid--producten {
		scroll-behavior: auto;
	}
}

/* ---- 8c. Agenda, makers, verhaal, vragen, buurplaatsen ---- */

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

.hiz-agenda--plaats .hiz-agenda__intro {
	max-width: var(--hiz-measure-lead, 54ch);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

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

.hiz-plaats-verhaal__tekst p {
	margin: 0 0 var(--hiz-space-5, 24px);
}

.hiz-plaats-verhaal__tekst p:last-child {
	margin-bottom: 0;
}

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

/* De vragen staan in een paneel in plaats van als losse regels op de achtergrond. */
.hiz-plaats-faq__lijst.hiz-panel {
	padding: var(--hiz-space-5, 24px) var(--hiz-space-6, 32px);
}

.hiz-plaats-faq__lijst .hiz-accordeon summary {
	font-size: var(--hiz-text-md, 16px);
	font-weight: 600;
}

/* Buurplaatsen zijn chips, geen kaartenrij. */
.hiz-plaats-buren__lijst.hiz-chiprij {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-plaats-buren__meer {
	margin: var(--hiz-space-5, 24px) 0 0;
}

/* ---------------------------------------------------------------------------
 * 9. Zoekresultaten.
 * ------------------------------------------------------------------------- */

.hiz-zoekpagina .hiz-zoek__form {
	max-width: var(--hiz-measure-form, 40rem);
	margin-top: var(--hiz-space-4, 16px);
}

/* De kop en de resultaten zijn één blok; de sectie-afstand hoort tussen kop en resultaten
   niet nog een keer bovenop de marge van het zoekveld te komen. */
.hiz-zoekpagina__resultaten {
	padding-block-start: var(--hiz-space-6, 32px);
}

/*
 * De kaart in de zoekresultaten komt uit `Locations\Render::productkaart()` (eigenaar:
 * de plaatsenmodule) en zet plaats, model én kleur in de metaregel. De kleur staat al in de
 * producttitel ("Haarlem Hoodie – Bruin"), dus dat was een derde item dat de metaregel op
 * elke kaart over twee regels duwde. Zolang die renderer niet van deze agent is, halen we de
 * dubbele regel hier weg; zie docs/pr/r5-catalogus.md, "Gevraagde wijziging buiten mijn
 * eigenaarschap".
 */
.hiz-zoekpagina .hiz-card__meta .hiz-card__kleur {
	display: none;
}

/* Livegang (LQ): met de kleur weg bleef het scheidingsteken erachter staan ("Haarlem ·
   Hoodie ·"). De punten zijn losse tekst in de renderer; hier verdwijnen ze en komt er één
   terug vóór het model. */
.hiz-zoekpagina .hiz-card__meta {
	column-gap: 0;
	font-size: 0;
}

.hiz-zoekpagina .hiz-card__meta > span {
	font-size: 13px;
}

.hiz-zoekpagina .hiz-card__meta .hiz-card__model::before {
	content: " · ";
	white-space: pre;
}

/*
 * Plaatskaarten stonden als raster van kaarten van 15 rem boven de producten: op 375 px
 * duwde dat het eerste product ver onder de vouw. Het is nu één rij compacte chips die
 * zijwaarts schuift; de plaatsnaam en het aantal blijven leesbaar.
 */
.hiz-zoek__plaatsen {
	margin-bottom: var(--hiz-space-5, 24px);
}

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

.hiz-zoek__plaatskaarten {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0 0 var(--hiz-space-2, 8px);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.hiz-zoek__plaatskaarten > li {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.hiz-zoek__plaatskaart {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	height: auto;
	padding: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	background-color: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	text-decoration: none;
	white-space: nowrap;
}

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

.hiz-zoek__plaatsnaam {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
	letter-spacing: 0;
}

.hiz-zoek__plaatsaantal {
	font-size: var(--hiz-text-xs, 13px);
	color: var(--hiz-color-muted);
}

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

.hiz-zoek__producten-kop,
.hiz-zoek__geen-kop {
	margin: 0 0 var(--hiz-space-4, 16px);
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 700;
	letter-spacing: -0.015em;
}

/* Lege staat als paneel, met de uitwegen erin. */
.hiz-zoek__geen {
	max-width: var(--hiz-measure, 64ch);
	padding: var(--hiz-space-6, 32px);
	border-radius: var(--hiz-radius-md, 16px);
	background-color: var(--hiz-color-mint);
}

.hiz-zoek__geen p {
	max-width: var(--hiz-measure-lead, 54ch);
}

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

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

.hiz-zoekresultaten__pagina {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
	font-variant-numeric: tabular-nums;
}

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

.hiz-zoek__overiglijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-zoek__overiglijst li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hiz-space-3, 12px);
	min-height: var(--hiz-touch, 44px);
}

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

/* ---------------------------------------------------------------------------
 * 10. WooCommerce-terugval (plugin uit): hetzelfde raster, geen blokrommel.
 * ------------------------------------------------------------------------- */

.hiz-catalog-terugval .wc-block-product-template,
.hiz-catalog-terugval .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hiz-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-catalog-terugval .wc-block-product-template li,
.hiz-catalog-terugval .wp-block-post-template li {
	min-width: 0;
	margin: 0;
}

.hiz-catalog-terugval .wc-block-components-product-image img,
.hiz-catalog-terugval .wp-block-woocommerce-product-image img {
	aspect-ratio: 4 / 5;
	width: 100%;
	height: auto;
	border-radius: var(--hiz-radius-md, 16px);
	object-fit: cover;
}

.hiz-catalog-terugval .wp-block-post-title {
	margin: var(--hiz-space-3, 12px) 0 var(--hiz-space-1, 4px);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.hiz-catalog-terugval .wp-block-woocommerce-product-price {
	font-weight: 700;
	font-size: 15px;
}

@media (min-width: 768px) {
	.hiz-catalog-terugval .wc-block-product-template,
	.hiz-catalog-terugval .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hiz-space-5, 24px);
	}
}

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