/*
 * HIZ – winkels, verkooppunten en fotoactie.
 * Aanvulling op assets/css/hiz.css (agent A levert de basis: knoppen, velden, secties, grids).
 * Mobile-first: 375 px is de basis, daarboven bouwen we op. Alleen --hiz-*-tokens gebruiken.
 */

/* ---------------------------------------------------------------- Secties */

/*
 * Ronde 5: de sectievorm van de winkelpagina (`.hiz-section`, `.hiz-section__head`,
 * `.hiz-section__title`, `.hiz-section__lead`, `.hiz-eyebrow`) staat sinds de visuele
 * standaard in assets/css/paginas.css, samen met de kaarten en panelen. Hier stonden
 * dezelfde klassen met eigen pixel- en rem-maten (marge 2,5–4,5 rem, lead 62ch), waardoor
 * de winkelpagina er anders uitzag dan Studio en Voor makers.
 *
 * De hero is geen donker blok meer maar een gewone intro in twee kolommen (7/5); zie
 * patterns/retail-hero.php en `.hiz-intro` in paginas.css.
 */

/* ---------------------------------------------------------------- Rekentool */

/* `.hiz-form.hiz-rekentool`: moet winnen van `.hiz-form` in hiz.css, ongeacht de volgorde van
   de stijlbladen (WordPress zet retail.css op de ene pagina vóór en op de andere na hiz.css). */
.hiz-form.hiz-rekentool {
	display: grid;
	gap: var(--hiz-space-5, 24px);
	/* Pagina-eis: rekentool als wit paneel van maximaal 720 px. */
	max-width: 45rem;
	background: var(--hiz-color-white, #fff);
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 16px));
	/* Zelfde reden als bij `.hiz-paneel`: op 375 px kost 32 px padding te veel regelbreedte. */
	padding: var(--hiz-space-4, 16px);
}

@media (min-width: 640px) {
	.hiz-form.hiz-rekentool {
		padding: var(--hiz-space-6, 32px);
	}
}

/*
 * Hotfix 1.0.1: de velden van de rekentool volgen de veldvorm van hiz.css (zelfde binnenruimte en
 * tekstkleur als de andere formulieren; hier stonden eigen waarden). De hulptekst staat bij elk
 * veld ónder het veld: bij "Pakket" en "Model" stond hij eronder, bij "Aantal stuks" en
 * "Verkoopprijs" erboven, waardoor de velden in de twee kolommen niet op één lijn stonden.
 */
.hiz-rekentool .hiz-field > .hiz-field__input {
	order: 1;
}

.hiz-rekentool .hiz-field > .hiz-field__hint {
	order: 2;
}

.hiz-rekentool .hiz-field > .hiz-field__error {
	order: 3;
}

.hiz-rekentool .hiz-field--invalid {
	border-color: var(--hiz-color-fout, #8a1c12);
	outline: 2px solid var(--hiz-color-fout, #8a1c12);
	outline-offset: 1px;
}

.hiz-rekentool__uitkomst {
	display: block;
	background: var(--hiz-color-white, #fff);
	border-radius: var(--hiz-radius-small, 14px);
	/* Hotfix 1.0.1: geen eigen binnenruimte (wit op wit); de tabel staat nu op één lijn met de
	   velden en heeft op 390 px de breedte die hij nodig heeft. */
	padding: 0;
	/* Vaste minimumhoogte voorkomt dat de pagina springt bij een nieuwe uitkomst. */
	min-height: 18rem;
	overflow-x: auto;
}

.hiz-rekentool__tabel {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.hiz-rekentool__tabel th,
.hiz-rekentool__tabel td {
	text-align: left;
	padding: var(--hiz-space-2, 8px) var(--hiz-space-2, 8px) var(--hiz-space-2, 8px) 0;
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	font-size: var(--hiz-text-md, 1rem);
}

.hiz-rekentool__tabel thead th {
	/* Tabelkop zoals in de standaard: 14 px, 600, geen gespatieerde hoofdletters. */
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hiz-color-forest, #3B4497);
}

.hiz-rekentool__tabel td {
	text-align: right;
	white-space: nowrap;
}

/* Op een telefoon passen de drie kolommen alleen met cijfers van 14 px (de laatste kolom
   viel eerst 50 px buiten het paneel). */
@media (max-width: 479px) {
	/* `.hiz-rekentool` ervoor: paginas.css zet 16 px rechts met `.hiz-pagina :is(table th, …)`. */
	.hiz-rekentool .hiz-rekentool__tabel th,
	.hiz-rekentool .hiz-rekentool__tabel td {
		padding-right: var(--hiz-space-2, 8px);
		font-size: var(--hiz-text-sm, 0.875rem);
	}
}

.hiz-rekentool__tabel thead th + th {
	text-align: right;
}

/* De laatste kolom staat recht tegen de rand van het paneel, niet 8 px ervandaan. */
.hiz-rekentool__tabel :is(th, td):last-child {
	padding-right: 0;
}

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

.hiz-rekentool__aannames {
	font-size: var(--hiz-text-sm, 0.875rem);
	color: var(--hiz-color-muted, #545A7E);
}

.hiz-rekentool__aannames-titel {
	font-size: var(--hiz-text-md, 1rem);
	margin: 0 0 var(--hiz-space-2, 8px);
}

.hiz-rekentool__aannames ul {
	margin: 0;
	padding-left: var(--hiz-space-4, 16px);
}

/* ---------------------------------------------------------------- Staffels en modellen */

.hiz-staffels {
	overflow-x: auto;
}

.hiz-staffels table {
	width: 100%;
	/* Hotfix 1.0.1: geen minimumbreedte meer. Met 34 rem viel de kolom "Inkoop excl. btw" op
	   390 px half buiten beeld; drie kolommen passen ook op een telefoon als de eerste afbreekt. */
	min-width: 0;
	border-collapse: collapse;
}

/*
 * Core zet 3 px onder de tabelkop; de standaard wil alleen dunne horizontale lijnen. Op de rij
 * zelf kan de lijn niet: paginas.css haalt de rand van elke laatste rij weg, en de kop is één rij.
 */
.hiz-pagina :is(.hiz-staffels, .hiz-rekentool__tabel) thead {
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
}

.hiz-staffels th,
.hiz-staffels td {
	text-align: left;
	padding: var(--hiz-space-3, 12px) var(--hiz-space-2, 8px);
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	font-size: var(--hiz-text-md, 1rem);
}

/*
 * Ronde 5: de samenwerkingsvormen staan niet meer in `wp:columns` met een eigen mint vlak,
 * maar in `.hiz-kaarten` – dezelfde kaartvorm als op Studio en Voor makers (paginas.css).
 */

/* ---------------------------------------------------------------- Formulieren */

/*
 * Hotfix 1.0.1: deze basisvormen (formulier, veld, knop, melding) staan ook in hiz.css. Buiten een
 * laag wonnen ze op /voor-winkels/ van hiz.css, omdat WordPress retail.css daar ná hiz.css zet:
 * knoppen werden 52 px hoog met 24 px zijruimte en velden kregen een eigen tekstkleur en
 * binnenruimte. Op /fotoactie/ staat retail.css juist vóór hiz.css. In de laag `hiz-fallback`
 * (zoals in studio.css) wint hiz.css altijd; dit blijft alleen staan voor als hiz.css ontbreekt.
 */
@layer hiz-fallback {

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

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

	.hiz-form .hiz-field__input {
		min-height: var(--hiz-control, 48px);
		width: 100%;
		box-sizing: border-box;
		padding: var(--hiz-space-3, 12px) var(--hiz-space-3, 12px);
		border: 1px solid var(--hiz-color-veldrand, rgba(59, 68, 151, 0.7));
		border-radius: var(--hiz-radius-small, 14px);
		background: var(--hiz-color-white, #fff);
		color: var(--hiz-color-forest, #3B4497);
		font: inherit;
	}

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

	.hiz-form .hiz-field--keuze .hiz-field__label {
		display: grid;
		grid-template-columns: 1.5rem 1fr;
		gap: var(--hiz-space-2, 8px);
		align-items: start;
		font-weight: 400;
		font-size: var(--hiz-text-md, 1rem);
		line-height: 1.45;
	}

	.hiz-form .hiz-field--keuze input[type="checkbox"] {
		width: 1.25rem;
		height: 1.25rem;
		margin-top: var(--hiz-space-1, 4px);
	}

	.hiz-form__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--hiz-space-3, 12px);
	}

	.hiz-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--hiz-touch, 44px);
		padding: var(--hiz-space-3, 12px) var(--hiz-space-5, 24px);
		border: 1px solid var(--hiz-color-forest, #3B4497);
		border-radius: var(--hiz-radius-pill, 999px);
		background: var(--hiz-color-forest, #3B4497);
		color: var(--hiz-color-paper, #EBE5D3);
		font: inherit;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;
	}

	.hiz-button--accent {
		/* Pow Orange met witte tekst haalt 3,87:1; deze diepere variant komt op 4,9:1 (zie hiz.css). */
		background: var(--hiz-color-lemon-tekst, #C9430F);
		border-color: var(--hiz-color-lemon-tekst, #C9430F);
		color: var(--hiz-color-white, #fff);
	}

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

	.hiz-notice {
		margin: 0;
		padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
		border-radius: var(--hiz-radius-small, 14px);
		border: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
		font-size: var(--hiz-text-md, 1rem);
	}

	.hiz-notice--succes {
		background: var(--hiz-color-mint, #D3D9EB);
		border-color: var(--hiz-color-fern, #4C56AE);
	}

	.hiz-notice--fout {
		background: var(--hiz-color-fout-vlak, #f7e4e1);
		border-color: var(--hiz-color-fout, #8a1c12);
		color: var(--hiz-color-fout, #8a1c12);
	}

}

/* ---------------------------------------------------------------- Verkooppunten */

.hiz-verkooppunten {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hiz-space-4, 16px);
}

/* Kaart zonder rand, radius md, padding space-6 – zelfde vorm als elders (standaard). */
.hiz-verkooppunt {
	background: var(--hiz-color-white, #fff);
	border: 0;
	border-radius: var(--hiz-radius-md, var(--hiz-radius-medium, 16px));
	padding: var(--hiz-space-6, 32px);
}

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

.hiz-verkooppunt__link {
	color: inherit;
	text-decoration: none;
}

.hiz-verkooppunt__link:hover,
.hiz-verkooppunt__link:focus-visible {
	text-decoration: underline;
}

.hiz-verkooppunt__adres {
	font-style: normal;
	margin: 0 0 var(--hiz-space-2, 8px);
}

.hiz-verkooppunt__assortiment,
.hiz-verkooppunt__meta {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-text-md, 1rem);
	color: var(--hiz-color-muted, #545A7E);
}

.hiz-verkooppunt-detail__meta {
	list-style: none;
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: 0;
	display: grid;
	gap: var(--hiz-space-2, 8px);
}

.hiz-verkooppunt-detail__meta strong {
	display: block;
	font-size: var(--hiz-text-sm, 0.875rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hiz-color-muted, #545A7E);
}

.hiz-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- Breedere schermen */

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

	.hiz-rekentool .hiz-form__actions,
	.hiz-rekentool__uitkomst,
	.hiz-rekentool__aannames {
		grid-column: 1 / -1;
	}

	.hiz-rekentool__uitkomst {
		min-height: 16rem;
	}

	.hiz-verkooppunten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

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

/* ------------------------------------------------- Ronde 3: gedeelde formulier-onderdelen
 *
 * De winkelaanvraag gebruikt sinds ronde 3 dezelfde veldrenderer als de Studio-aanvraag.
 * Deze regels zijn de tegenhanger van dezelfde klassen in studio.css; retail.css laadt op
 * pagina's waar studio.css niet laadt, dus ze moeten hier ook staan.
 */

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

.hiz-form .hiz-field__error {
	margin: 0;
	color: var(--hiz-color-fout, #8a1c12);
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 600;
}

.hiz-form .hiz-field--invalid .hiz-field__input {
	border-color: var(--hiz-color-fout, #8a1c12);
	border-width: 2px;
}

.hiz-field__optioneel {
	color: var(--hiz-color-muted, #545A7E);
	font-weight: 400;
	font-size: var(--hiz-text-sm, 0.875rem);
}

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

.hiz-form__vooraf {
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: var(--hiz-space-4, 16px) var(--hiz-space-4, 16px) var(--hiz-space-4, 16px) var(--hiz-space-6, 32px);
	border-radius: var(--hiz-radius-medium, 24px);
	background: var(--hiz-color-mint, #D3D9EB);
	font-size: var(--hiz-text-md, 1rem);
	max-width: var(--hiz-measure-form, 40rem);
}

.hiz-form__vooraf li + li {
	margin-top: var(--hiz-space-2, 8px);
}

.hiz-bevestiging {
	max-width: var(--hiz-measure-form, 40rem);
}

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

.hiz-bevestiging__kop {
	margin: var(--hiz-space-4, 16px) 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-md, 1rem);
}

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

.hiz-bevestiging__stappen li + li {
	margin-top: var(--hiz-space-2, 8px);
}

.hiz-retail-aanvraag .hiz-field__optie {
	display: flex;
	gap: var(--hiz-space-2, 8px);
	align-items: flex-start;
	min-height: var(--hiz-touch, 44px);
}

.hiz-form .hiz-field__teller {
	margin: 0;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
	text-align: right;
}

.hiz-form .hiz-field__teller--vol {
	color: var(--hiz-color-lemon-tekst, #C9430F);
	font-weight: 600;
}

/* Zelfde vangnet als in studio.css: `.hiz-button` en `.hiz-notice` zetten een display-waarde
   die wint van de standaard `[hidden] { display: none }` van de browser. */
.hiz-retail-aanvraag [hidden],
.hiz-rekentool [hidden] {
	display: none !important;
}

/* ------------------------------------------- Hotfix 1.0.1 (25 sep): ritme van de formulieren
 *
 * Hetzelfde ritme als de Studio-aanvraag en de makersinzending (studio.css): label → 4 px →
 * hulptekst → 8 px → veld, en tussen alle onderdelen van het formulier alleen de `gap` van
 * `.hiz-form` (24 px). De marge van 16 px die blocks.css onder elk veld zet telde daar bij op.
 * In de rekentool staat de hulptekst onder het veld (zie boven), dus daar geen uitzondering
 * voor een hulptekst direct onder het label.
 */
:is(.hiz-retail-aanvraag, .hiz-fotoactie, .hiz-rekentool) .hiz-field {
	margin: 0;
}

:is(.hiz-retail-aanvraag, .hiz-fotoactie, .hiz-rekentool) .hiz-field__label {
	margin: 0;
}

:is(.hiz-retail-aanvraag, .hiz-fotoactie, .hiz-rekentool) .hiz-field > * + * {
	margin-top: var(--hiz-space-1, 4px);
}

:is(.hiz-retail-aanvraag, .hiz-fotoactie) .hiz-field > .hiz-field__label + .hiz-field__hint {
	margin-top: 0;
}

/* Op een telefoon is de verzendknop even breed als de velden, zoals bij Studio en makers. */
@media (max-width: 559px) {
	:is(.hiz-retail-aanvraag, .hiz-fotoactie, .hiz-rekentool) .hiz-form__actions .hiz-button {
		flex: 1 1 100%;
	}
}

/* Uploadvak van de fotoactie: zelfde knop als bij de makersinzending (studio.css). */
.hiz-fotoactie input[type="file"] {
	padding: 5px var(--hiz-space-2, 8px);
	cursor: pointer;
}

.hiz-fotoactie input[type="file"]::file-selector-button {
	min-height: 36px;
	margin-right: var(--hiz-space-3, 12px);
	padding: 0 var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-forest, #3B4497);
	border-radius: var(--hiz-radius-pill, 999px);
	background: transparent;
	color: var(--hiz-color-forest, #3B4497);
	font: inherit;
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 600;
	cursor: pointer;
}

.hiz-fotoactie input[type="file"]:hover::file-selector-button {
	background: var(--hiz-color-mint, #D3D9EB);
}

/* Toestemmingszin: lopende tekst in de tekstkleur, niet in de kleur van een label. */
.hiz-fotoactie .hiz-field--keuze .hiz-field__label {
	color: var(--hiz-color-ink, #1E2352);
}

/*
 * Op /fotoactie/ staat het blok binnen de sectie van het paginasjabloon, direct onder een
 * alinea. paginas.css haalt de marge van een geneste sectie weg, dus de eyebrow "Meedoen"
 * plakte tegen die alinea. 48 px, de sectieafstand op een telefoon.
 */
.hiz-pagina .hiz-section .hiz-section.hiz-fotoactie {
	margin-block-start: var(--hiz-space-7, 48px);
}

/*
 * Sectiekop altijd links (standaard §Spacing). De kop "Voorstel staffels" is een groep met
 * constrained layout; WordPress centreert daarin elk smaller kind met `margin: auto
 * !important`, zodat eyebrow en H2 midden boven een links uitgelijnde tabel stonden.
 */
.hiz-winkels-pagina .hiz-section__head > * {
	margin-inline: 0 !important;
}

/* ======================================================================================
 * Winkelprogramma (branch groei/retail, september 2026)
 *
 * Pagina Voor winkels (stappen, prijzen, voorwaarden), het overzicht "Waar te koop", het
 * nabestelformulier onder Mijn account en de conceptvoorwaarden. Alleen tokens uit de
 * visuele standaard; kaarten wit op Nourished, radius md, geen schaduwen.
 * ==================================================================================== */

/* Hero: één knop, daaronder een gewone tekstlink. */
.hiz-winkels-intro__link {
	margin: 0;
	font-size: var(--hiz-text-sm, 0.875rem);
}

.hiz-winkels-intro__link a {
	color: var(--hiz-color-forest, #3B4497);
}

/* ------------------------------------------------------------------- Zo werkt het */

.hiz-winkel-stappen {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hiz-space-4, 16px);
}

.hiz-winkel-stap {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: var(--hiz-space-4, 16px);
	align-items: start;
	margin: 0;
	padding: var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
}

.hiz-winkel-stap__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background: var(--hiz-color-mint, #D3D9EB);
	color: var(--hiz-color-forest, #3B4497);
	font-weight: 700;
}

.hiz-winkel-stap__titel {
	margin: 0 0 var(--hiz-space-1, 4px);
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.hiz-winkel-stap__tekst p {
	margin: 0;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
	line-height: 1.55;
}

@media (min-width: 640px) {
	.hiz-winkel-stap__tekst p {
		font-size: var(--hiz-text-md, 1rem);
		line-height: 1.6;
	}
}

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

	/* Vijf stappen: de laatste over de volle breedte in plaats van een halve lege rij. */
	.hiz-winkel-stap:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* ------------------------------------------------------------------------ Prijzen */

.hiz-prijzen {
	display: grid;
	gap: var(--hiz-space-4, 16px);
}

.hiz-prijzen__tabel {
	margin: 0;
	padding: var(--hiz-space-2, 8px) var(--hiz-space-4, 16px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
}

.hiz-prijzen__tabel table {
	min-width: 30rem;
}

.hiz-prijzen__tabel thead th {
	font-size: var(--hiz-text-sm, 0.875rem);
	font-weight: 600;
	color: var(--hiz-color-muted, #545A7E);
}

.hiz-prijzen__tabel tbody th {
	font-weight: 600;
}

.hiz-prijzen__tabel tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

.hiz-prijzen__tabel .wp-element-caption {
	margin: var(--hiz-space-2, 8px) 0;
	font-size: var(--hiz-text-sm, 0.875rem);
	color: var(--hiz-color-muted, #545A7E);
	text-align: left;
}

.hiz-prijzen__voorbeeld,
.hiz-prijzen--op-aanvraag p {
	margin: 0;
	max-width: var(--hiz-measure, 64ch);
}

/* -------------------------------------------------------------- Voorwaarden in het kort */

.hiz-voorwaarden__lijst {
	margin: 0;
	display: grid;
}

.hiz-voorwaarden__item {
	display: grid;
	gap: var(--hiz-space-1, 4px);
	padding: var(--hiz-space-3, 12px) 0;
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
}

.hiz-voorwaarden__item:first-child {
	padding-top: 0;
}

.hiz-voorwaarden__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.hiz-voorwaarden__item dt {
	font-weight: 600;
}

.hiz-voorwaarden__item dd {
	margin: 0;
	color: var(--hiz-color-ink, #1E2352);
	max-width: var(--hiz-measure, 64ch);
}

@media (min-width: 768px) and (max-width: 1023px) {
	.hiz-voorwaarden__item {
		grid-template-columns: 11rem minmax(0, 1fr);
		gap: var(--hiz-space-5, 24px);
	}
}

/* Breed scherm: twee kolommen afspraken, zonder lijnen; scheelt de helft van de hoogte. */
@media (min-width: 1024px) {
	.hiz-voorwaarden__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hiz-space-5, 24px) var(--hiz-space-7, 48px);
	}

	.hiz-voorwaarden__item,
	.hiz-voorwaarden__item:first-child,
	.hiz-voorwaarden__item:last-child {
		padding: 0;
		border-bottom: 0;
	}
}

.hiz-voorwaarden__noot {
	margin: var(--hiz-space-4, 16px) 0 0;
	font-size: var(--hiz-text-sm, 0.875rem);
	color: var(--hiz-color-muted, #545A7E);
}

/* ------------------------------------------------------------ Verkooppunten: overzicht */

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

.hiz-verkooppunten-overzicht {
	display: grid;
	gap: var(--hiz-space-7, 48px);
}

.hiz-verkooppunten-overzicht__kop {
	margin: 0 0 var(--hiz-space-4, 16px);
	font-size: var(--hiz-h3, clamp(1.1875rem, 1.8vw, 1.375rem));
	font-weight: 600;
	letter-spacing: -0.015em;
}

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

.hiz-verkooppunten-overzicht__leeg {
	margin: 0;
	max-width: var(--hiz-measure, 64ch);
}

/* ------------------------------------------------------------ Nabestellen (Mijn account) */

/*
 * Flex in een kolom, geen grid: een gridkolom groeit mee met de breedste inhoud (de tabel
 * "Eerder besteld" heeft een minimumbreedte) en duwde op 375 px het hele formulier buiten
 * beeld. De tabel scrolt nu binnen zijn eigen vak.
 */
.hiz-nabestellen,
.hiz-nabestellen__form {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-5, 24px);
	min-width: 0;
	max-width: 100%;
}

.hiz-nabestellen > *,
.hiz-nabestellen__form > * {
	min-width: 0;
	max-width: 100%;
}

.hiz-nabestellen__titel {
	margin: 0 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-h3, clamp(1.1875rem, 1.8vw, 1.375rem));
	font-weight: 600;
	letter-spacing: -0.015em;
}

.hiz-nabestellen__intro p {
	margin: 0 0 var(--hiz-space-2, 8px);
	max-width: var(--hiz-measure, 64ch);
}

.hiz-nabestellen__feiten {
	margin: 0;
	padding-left: var(--hiz-space-5, 24px);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}


.hiz-nabestellen__groep {
	min-width: 0;
	margin: 0;
	padding: var(--hiz-space-4, 16px);
	border: 0;
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
}

.hiz-nabestellen__legend {
	padding: 0;
	margin-bottom: var(--hiz-space-3, 12px);
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
}

.hiz-nabestellen__scroll {
	overflow-x: auto;
}

/* Geen minimumbreedte: de artikelnaam breekt af, zodat het aantalveld op 375 px in beeld blijft. */
.hiz-nabestellen__tabel {
	width: 100%;
	border-collapse: collapse;
}

.hiz-nabestellen__tabel :is(th, td) {
	padding: var(--hiz-space-2, 8px);
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	text-align: left;
	font-size: var(--hiz-text-sm, 0.875rem);
	vertical-align: middle;
}

.hiz-nabestellen__tabel tbody th {
	font-weight: 400;
}

.hiz-nabestellen .hiz-nabestellen__tabel .hiz-nabestellen__getal {
	width: 5rem;
}

.hiz-nabestellen__regels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--hiz-space-4, 16px);
}

.hiz-nabestellen__regel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--hiz-space-2, 8px) var(--hiz-space-3, 12px);
	padding-bottom: var(--hiz-space-4, 16px);
	border-bottom: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
}

.hiz-nabestellen__regel:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

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

.hiz-nabestellen .hiz-field {
	margin: 0;
	min-width: 0;
}

.hiz-nabestellen .hiz-field__input {
	width: 100%;
	box-sizing: border-box;
}

.hiz-nabestellen .hiz-form__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-3, 12px);
}

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

	.hiz-nabestellen__regel {
		grid-template-columns: minmax(0, 1fr) 8rem 7rem;
		align-items: end;
	}

	.hiz-nabestellen__product {
		grid-column: auto;
	}
}

/* ------------------------------------------------------- Voorwaarden voor verkooppunten */

/* Release 1.1.0: de voorwaarden staan live, zonder conceptbanner. De versie- en bedrijfsregel
   klein en gedempt onder de lead; de artikelen volgen de gewone lopende tekst (.hiz-prose). */
.hiz-voorwaarden-tekst__versie {
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 0.875rem);
}

/* ------------------------------------------------ Kennismakingsformulier: compacter */

.hiz-retail-aanvraag .hiz-form__rijen {
	display: grid;
	gap: var(--hiz-space-4, 16px);
}

/* Korte velden twee aan twee vanaf 768 px; lange velden (toelichting) over de volle breedte. */
@media (min-width: 768px) {
	.hiz-retail-aanvraag .hiz-form__rijen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--hiz-space-4, 16px) var(--hiz-space-5, 24px);
	}

	.hiz-retail-aanvraag .hiz-form__rijen > .hiz-field--textarea {
		grid-column: 1 / -1;
	}
}

.hiz-retail-aanvraag .hiz-form__rijen > .hiz-field {
	margin: 0;
	min-width: 0;
}

.hiz-form__meer {
	margin: var(--hiz-space-4, 16px) 0 0;
	border-top: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	padding-top: var(--hiz-space-4, 16px);
}

.hiz-form__meer > summary {
	min-height: 44px;
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
	color: var(--hiz-color-forest, #3B4497);
}

.hiz-form__meer > summary:focus-visible {
	outline: 2px solid var(--hiz-color-forest, #3B4497);
	outline-offset: 2px;
}

.hiz-form__meer[open] > summary {
	margin-bottom: var(--hiz-space-4, 16px);
}

/* ----------------------------------------------- QA 1.2.0: uitlijning vragen en formulier */

/*
 * Vanaf 1024 px stond de kop "Wat winkeliers ons vragen" links, maar de vragenlijst en de
 * mailregel eronder gecentreerd (constrained layout: automatische marge op elk smal kind), 232 px
 * naar rechts. En `paginas.css` zet een sectie met een formulierpaneel in twee kolommen (uitleg 5,
 * formulier 7); de winkelaanvraag heeft geen uitlegkolom (het blok levert zijn eigen kop), dus stond
 * het paneel rechts naast een lege kolom. Nu staat alles links op de inhoudsrand, zoals de koppen.
 */
.hiz-pagina .hiz-retail-faq > .hiz-faq,
.hiz-pagina .hiz-retail-faq > .hiz-faq ~ p {
	margin-inline: 0 auto !important;
}

@media (min-width: 1024px) {
	.hiz-pagina .hiz-section.hiz-retail-aanvraag-sectie:has(> .hiz-paneel--formulier) {
		display: block;
	}

	.hiz-pagina .hiz-section.hiz-retail-aanvraag-sectie > .hiz-paneel--formulier {
		/* Zelfde maat als `.hiz-paneel--formulier` in paginas.css: 640 px formulier plus de
		   binnenruimte; de constrained layout zou er anders 1.200 px van maken. */
		max-width: calc(var(--hiz-measure-form, 40rem) + 2 * var(--hiz-space-6, 2rem));
		margin-inline: 0 auto !important;
	}
}