/*
 * HIZ – commerce-pagina's: winkelwagen, afrekenen, bedankpagina, Mijn account en 404 (ronde 5).
 *
 * In ronde 5 uit `woo.css` gelicht (daar §11, §12 en §12b) en herbouwd op de tokens van
 * `docs/agents/visuele-standaard.md`, met terugval zolang V0 die tokens nog niet in `hiz.css`
 * heeft gezet. Geen losse pixelwaarden: de vier maten die de opdracht letterlijk noemt staan
 * als variabele bovenaan. Panelen wit of Link Water, radius md; velden en knoppen 48 px;
 * één Pow Orange-knop per scherm.
 *
 * Niet hier: productkaarten en catalogus (`woo.css`), productpagina (`product.css`), de
 * basiscomponenten (`hiz.css`, eigenaar V0).
 */

/* -------------------------------------------------------------- 0. Componentmaten en context */

/* Drie groottes uit de typografietabel (prijs/kaarttitel 15, kaartmeta 13, eyebrow 12) hebben
   daar geen tokennaam. Hier één keer, zodat ze verderop geen losse pixelwaarde worden. */
:root {
	--hiz-text-xs: 13px;
	--hiz-text-sm-plus: 15px;
	--hiz-eyebrow-size: 12px;
}

.hiz-cart,
.hiz-checkout,
.hiz-bedankt,
.hiz-account,
.hiz-404 {
	/* Vier maten die de pagina-eisen letterlijk noemen. */
	--hiz-regel-beeld: 72px;
	--hiz-stepper: 40px;
	--hiz-kolom-smal: 720px;

	/* Afgeleide waarden, zodat panelen en kaarten overal hetzelfde ademen. */
	--hiz-paneel-pad: var(--hiz-space-6, 32px);
	--hiz-paneel-radius: var(--hiz-radius-md, 16px);

	/* Hotfix 1.0.1: de scheidingslijnen van WooCommerce (samenvatting, voorwaarden, keuzelijsten,
	   inlogkader) volgen deze variabele; zonder waarde werden ze grijs (20% van de tekstkleur). */
	--wc-separator-color: var(--hiz-color-line);

	padding-block: var(--hiz-space-6, 32px) var(--hiz-section-gap, clamp(48px, 7vw, 96px));
}

/* De `constrained`-layout zet `margin-left/right: auto !important` op elk kind dat smaller is
   dan de container; alles met een leesbreedte stond daardoor gecentreerd onder de kop. Zelfde
   oplossing als `hiz.css` bij `.hiz-section__lead`: alleen !important overrulet dat. */
.hiz-commerce > .hiz-cart__titel,
.hiz-commerce > .hiz-checkout__titel,
.hiz-commerce > .hiz-account__titel,
.hiz-commerce > .hiz-account__lead,
.hiz-commerce > .hiz-404__inhoud,
.hiz-commerce .hiz-commerce-lead,
.hiz-commerce .hiz-cart__leeg,
.hiz-commerce .hiz-cart__zoeker,
.hiz-commerce .wc-block-order-confirmation-status h1,
.hiz-commerce .wc-block-order-confirmation-status p,
.hiz-commerce .hiz-bedankt__verder p,
.hiz-commerce .hiz-cart__leeg > p,
.hiz-commerce .hiz-account__hulp,
.hiz-commerce .hiz-cart__verder,
.hiz-commerce .hiz-404__verder {
	margin-inline: 0 auto !important;
	/*
	 * QA 1.2.0: `0` lijnde uit tegen de rand van <main>, dat hier schermbreed is. Tot 1280 px valt
	 * dat samen met de inhoudsbreedte; daarboven stonden de H1 van winkelwagen en afrekenen, de
	 * hele 404 en het inlogblok van Mijn account tegen de linkerrand (x = 40 op 1536 px) terwijl
	 * het logo en de rest van de pagina op x = 168 beginnen. Nu links in de inhoudskolom van
	 * 1.200 px: de helft van wat <main> breder is. Bij een smallere ouder wordt dit 0, zoals eerst.
	 */
	margin-inline: max(0px, (100% - var(--wp--style--global--content-size, 1200px)) / 2) auto !important;
}

/* --------------------------------------------------------------- 1. Paginakop en sectiekoppen */

/*
 * Eén H1 per pagina, op de schaal van de standaard (max. 52 px, ook op 1536). De koppen stonden
 * hiervoor op een eigen clamp die op 1536 px tot 44 px opliep naast tekst van 16 px.
 */
.hiz-cart__titel,
.hiz-checkout__titel,
.hiz-account__titel,
.hiz-bedankt h1,
.hiz-404__titel {
	margin: 0 0 var(--hiz-space-3, 12px);
	max-width: var(--hiz-measure-lead, 54ch);
	font-size: var(--hiz-h1, clamp(32px, 4.5vw, 52px));
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.hiz-cart h2,
.hiz-checkout h2,
.hiz-bedankt h2,
.hiz-account h2 {
	margin: 0 0 var(--hiz-space-4, 16px);
	font-size: var(--hiz-h2, clamp(26px, 3vw, 36px));
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.hiz-cart h3,
.hiz-checkout h3,
.hiz-bedankt h3,
.hiz-account h3 {
	margin: 0 0 var(--hiz-space-3, 12px);
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
}

.hiz-commerce .hiz-commerce-eyebrow {
	margin: 0 0 var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-eyebrow-size, 12px);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.hiz-commerce .hiz-commerce-lead {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: 0 0 var(--hiz-space-6, 32px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-lg, clamp(17px, 1.6vw, 19px));
	line-height: 1.55;
}

/* ------------------------------------------------------------------------- 2. Paneel en kaart */

/*
 * Twee vormen, meer niet: een wit paneel (inhoud die je leest of invult) en een Link
 * Water-paneel (uitleg, lege staat). Geen randen, geen schaduw, radius md.
 */
.hiz-commerce .hiz-paneel {
	padding: var(--hiz-paneel-pad);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

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

.hiz-commerce .hiz-kaartrij {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-commerce .hiz-kaart {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 8px);
	padding: var(--hiz-space-5, 24px);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

/* Eén nummerstijl op de hele site: Barlow Condensed 800, 17 px, Slate licht, zoals de stappen op
   /hiz-studio/ en "01 02 03" op de home. Het was hier een Link Water-rondje (UX-L T2). */
.hiz-commerce .hiz-kaart__nr {
	display: block;
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-h4, 17px);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--hiz-color-fern);
}

.hiz-commerce .hiz-kaart > .hiz-kaart__titel {
	margin: 0;
	font-size: var(--hiz-h4, 17px);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.hiz-commerce .hiz-kaart__tekst {
	margin: 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
	line-height: 1.5;
}

/* ------------------------------------------------------------ 3. Tegels met de productsoorten */

/*
 * Drie productsoorten als tegels, op de lege winkelwagen én op de 404: één vraag, drie
 * antwoorden. Bewust géén `hiz/productsoorten`-blok (dat haalt de laagste prijs live op, maar
 * trekt via `inc/home.php` 20 kB `home.css` mee op juist de pagina die ronde 4 van 2.781 naar
 * 319 kB bracht). De klassenamen zijn wél die van dat blok, voor een latere inruil.
 */
.hiz-cart__leeg .hiz-soorten,
.hiz-404 .hiz-soorten {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-cart__leeg .hiz-soort,
.hiz-404 .hiz-soort {
	margin: 0;
}

/*
 * Op 375 px past "T-shirts · vanaf € 22,50" niet in een kolom van 110 px: daar staat de naam
 * links en de prijs rechts op één regel. Vanaf 560 px worden het drie tegels naast elkaar.
 */
.hiz-cart__leeg .hiz-soort__link,
.hiz-404 .hiz-soort__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-3, 12px);
	height: 100%;
	min-height: var(--hiz-control, 48px);
	padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	text-decoration: none;
	transition: background var(--hiz-motion-fast, 160ms) var(--hiz-ease, ease);
}

.hiz-cart__leeg .hiz-soort__link:hover,
.hiz-cart__leeg .hiz-soort__link:focus-visible,
.hiz-404 .hiz-soort__link:hover,
.hiz-404 .hiz-soort__link:focus-visible {
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-cart__leeg .hiz-soort__tekstblok,
.hiz-404 .hiz-soort__tekstblok {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-3, 12px);
	width: 100%;
	min-height: 0;
	padding: 0;
}

.hiz-cart__leeg .hiz-soort__naam,
.hiz-404 .hiz-soort__naam {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

.hiz-cart__leeg .hiz-soort__prijs,
.hiz-404 .hiz-soort__prijs {
	color: var(--hiz-color-muted);
	font-family: inherit;
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.hiz-cart__leeg .hiz-soort__link:hover .hiz-soort__prijs,
.hiz-cart__leeg .hiz-soort__link:focus-visible .hiz-soort__prijs,
.hiz-404 .hiz-soort__link:hover .hiz-soort__prijs,
.hiz-404 .hiz-soort__link:focus-visible .hiz-soort__prijs {
	color: inherit;
}

/* --------------------------------------------------- 3b. Botsing met `home.css` afvangen

   `home.css` gebruikt `.hiz-usp`, `.hiz-stappen` en `.hiz-kaart` voor ándere onderdelen van de
   startpagina, en laadt mee op elke pagina met een home-blok. Alle regels hier staan daarom
   onder `.hiz-commerce`, één klasse dieper; wat het toevoegt zetten we expliciet uit. */

.hiz-commerce .hiz-stappen > li::before {
	content: none;
}

.hiz-commerce .hiz-stappen > li {
	position: static;
	padding-left: 0;
}

/* -------------------------------------------------------- 4. Voortgang: winkelwagen → betalen */

.hiz-commerce .hiz-stappen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-5, 24px);
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: 0;
	list-style: none;
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-sm, 14px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hiz-commerce .hiz-stappen__item {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	color: var(--hiz-color-muted);
}

.hiz-commerce .hiz-stappen__item a {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	color: inherit;
}

.hiz-commerce .hiz-stappen__nr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
	border: 1px solid currentcolor;
	border-radius: var(--hiz-radius-pill, 999px);
	font-size: var(--hiz-text-xs, 13px);
	line-height: 1;
}

.hiz-commerce .hiz-stappen__item--nu {
	color: var(--hiz-color-forest);
	font-weight: 700;
}

.hiz-commerce .hiz-stappen__item--nu .hiz-stappen__nr {
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-commerce .hiz-stappen__item--klaar {
	color: var(--hiz-color-pine);
}

/* Een dun lijntje tussen de stappen maakt er één voortgang van in plaats van drie losse labels;
   8 px + 16 px lijn + 8 px tussen twee stappen (UX-L). */
.hiz-commerce .hiz-stappen {
	column-gap: var(--hiz-space-2, 8px);
}

.hiz-commerce .hiz-stappen__item + .hiz-stappen__item::before {
	content: "";
	display: block;
	flex: none;
	width: var(--hiz-space-4, 16px);
	height: 1px;
	background-color: currentcolor;
	opacity: 0.5;
}

/*
 * Hotfix 1.0.1: op een smalle telefoon liep de balk over twee regels (winkelwagen vanaf 375 px,
 * afrekenen vanaf 360 px: "3 Betalen" viel eronder). Onder 480 px staat alleen de huidige stap
 * uitgeschreven, de andere als nummer. De woorden blijven in de HTML (lettergrootte 0), dus een
 * schermlezer leest ze gewoon voor. Overgenomen uit het look-and-feel-werk (UX-L C2), zonder de
 * verbindingslijntjes.
 */
@media (max-width: 479px) {
	.hiz-commerce .hiz-stappen {
		flex-wrap: nowrap;
		gap: var(--hiz-space-1, 4px) var(--hiz-space-2, 8px);
	}

	/* Zonder `gap` in de ingeklapte stappen houdt het lijntje zijn 8 px tot het nummer (UX-L). */
	.hiz-commerce .hiz-stappen__item:not(.hiz-stappen__item--nu)::before {
		margin-right: var(--hiz-space-2, 8px);
	}

	.hiz-commerce .hiz-stappen__item:not(.hiz-stappen__item--nu),
	.hiz-commerce .hiz-stappen__item:not(.hiz-stappen__item--nu) a {
		gap: 0;
		font-size: 0;
		letter-spacing: 0;
	}

	/* De stap terug ("1" → winkelwagen) blijft een tikdoel van 44 × 44 px; het nummer staat
	   links in dat vlak, op één lijn met de kop erboven. */
	.hiz-commerce .hiz-stappen__item:not(.hiz-stappen__item--nu) a {
		justify-content: flex-start;
		min-width: var(--hiz-touch, 44px);
	}
}

/*
 * Bij een lege winkelwagen valt er niets af te rekenen; dan is de voortgangsbalk misleidend.
 * De regel in `inc/assets.php` (ronde 4) zet hem tijdens de laadstaat van een gevúlde
 * winkelwagen weer aan, zodat er geen sprong van 48 px ontstaat. Die samenhang blijft.
 */
.hiz-cart:has(.wp-block-woocommerce-empty-cart-block) .hiz-stappen {
	display: none;
}

/* -------------------------------------------------------- 5. Zekerheden (blok `hiz/usp`) */

/*
 * Eén regel per zekerheid, 14 px. De uitleg onder de titel is in ronde 5 uit de variant `rij`
 * gehaald (render.php): de titels dragen alle vier de feiten die Baymard noemt – herkomst,
 * verzendkosten, retourtermijn en betaalmethode – en de rij werd daarmee van vier kaarten van
 * twee regels één band van 14 px.
 */
.hiz-commerce .hiz-usp {
	display: block;
	margin-block: var(--hiz-space-5, 24px) var(--hiz-space-6, 32px);
	padding: var(--hiz-space-4, 16px) var(--hiz-space-5, 24px);
	border: 0;
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

.hiz-commerce .hiz-usp__lijst {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hiz-space-3, 12px) var(--hiz-space-5, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-commerce .hiz-usp__item {
	display: grid;
	grid-template-columns: var(--hiz-space-5, 24px) 1fr;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	margin: 0;
}

.hiz-commerce .hiz-usp__icoon {
	color: var(--hiz-color-fern);
}

.hiz-commerce .hiz-usp__tekst {
	display: block;
	min-width: 0;
	margin: 0;
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 14px);
	line-height: 1.4;
}

.hiz-commerce .hiz-usp__titel {
	display: block;
	margin: 0;
	color: var(--hiz-color-forest);
	font-family: inherit;
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.hiz-commerce .hiz-usp__uitleg {
	display: block;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

/* De variant `compact` (bedankpagina) houdt de uitleg wél: daar is er ruimte en rust voor. */
.hiz-commerce .hiz-usp--compact .hiz-usp__item {
	align-items: start;
}

.hiz-commerce .hiz-usp--compact .hiz-usp__icoon {
	margin-top: var(--hiz-space-1, 4px);
}

/*
 * Verzendmeter. De vaste minimumhoogte blijft: de regel staat server-side leeg in de HTML en
 * wordt door view.js gevuld met het bedrag uit de Store API – zonder hoogte zou dat een
 * layoutsprong geven (ronde 3/4).
 */
/*
 * Ronde 2 van de conversiefeedback: dezelfde opbouw als de mini-winkelwagen na quick add —
 * tekst gewoon op de regel, een dunne baan eronder die van links vult in Bright Slate. Geen
 * Link Water-doos met een wit streepje meer (dat las onduidelijk: welke kant was "al gevuld"?).
 */
.hiz-commerce .hiz-usp__verzendmeter {
	position: relative;
	min-height: 2.75rem;
	margin: 0 0 var(--hiz-space-3, 12px);
	padding: 0 0 var(--hiz-space-4, 16px);
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

/*
 * Onzichtbaar tot view.js het bedrag heeft, maar mét zijn plek. Met `display: none` (ronde 3/4)
 * verscheen de regel ná het Store API-antwoord en duwde hij de winkelwagen 58 px omlaag:
 * gemeten CLS 0,262 op 1280 px. Het bedrag server-side zetten kan niet – de pagina is
 * cachebaar – dus reserveren we de ruimte, niet de inhoud.
 */
.hiz-commerce .hiz-usp__verzendmeter:not([data-status]) {
	visibility: hidden;
}

.hiz-commerce .hiz-usp__verzendmeter:not([data-status])::before,
.hiz-commerce .hiz-usp__verzendmeter:not([data-status])::after {
	content: none;
}

.hiz-commerce .hiz-usp__verzendmeter::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-mint);
}

.hiz-commerce .hiz-usp__verzendmeter[data-status]::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	width: var(--hiz-usp-voortgang, 0%);
	max-width: 100%;
	height: 4px;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-forest);
}

@media (prefers-reduced-motion: no-preference) {
	.hiz-commerce .hiz-usp__verzendmeter[data-status]::before {
		transition: width .3s var(--hiz-ease, ease);
	}
}

/* Drempel gehaald: de balk blijft staan, nu helemaal vol (view.js zet --hiz-usp-voortgang op
   100%) — "met een volle balk", niet weggehaald. */
.hiz-commerce .hiz-usp__verzendmeter[data-status="gehaald"] {
	min-height: 0;
}

/* ------------------------------------------------------------------------- 6. Winkelwagen */

/*
 * Twee kolommen 7/5 vanaf 1024 px, totalen als wit paneel rechts. De standaard staat dat toe
 * "als het WooCommerce-blok het afdwingt", en dat doet het hier:
 * 1. De cross-sell zit ín `.wc-block-cart__main`; bij één kolom belandt de knop "Doorgaan naar
 *    afrekenen" eronder. Losmaken kan alleen met `display: contents` op `__main` – precies het
 *    element waar `inc/assets.php` (ronde 4) de skelethoogte op zet.
 * 2. `cart.css` schakelt op containerbreedte (`@container (max-width: 699px)`); een kolom van
 *    720 px zet het blok permanent in zijn smalle stand.
 */
.hiz-cart .wc-block-cart,
.hiz-checkout .wc-block-checkout {
	margin-inline: 0;
	gap: 0;
}

.hiz-cart .wc-block-cart__main,
.hiz-checkout .wc-block-checkout__main {
	padding-right: 0;
}

.hiz-cart .wc-block-cart__sidebar,
.hiz-checkout .wc-block-checkout__sidebar {
	padding: 0;
}

/*
 * Hotfix 1.0.1: WooCommerce zet de twee kolommen al neer zodra het blok breder is dan 700 px
 * (klasse `is-large`), dus ook op 768 px. De 7/5 hieronder stond alleen vanaf 1024 px, en de
 * tussenruimte was hierboven op 0 gezet: tussen 700 en 1023 px stonden velden en tabel tegen
 * het witte paneel aan (65/35) en brak de productnaam in de samenvatting midden in een woord
 * ("Woerd-en"). Nu 7/5 met 32 px ertussen zodra WooCommerce twee kolommen toont; vanaf
 * 1024 px 64 px (§11).
 */
.hiz-cart .is-large .wc-block-cart__main,
.hiz-checkout .is-large .wc-block-checkout__main {
	flex: 0 1 58.333%;
	max-width: 58.333%;
	padding-right: var(--hiz-space-6, 32px);
}

.hiz-cart .is-large .wc-block-cart__sidebar,
.hiz-checkout .is-large .wc-block-checkout__sidebar {
	flex: 0 1 41.667%;
	max-width: 41.667%;
}

.hiz-checkout .is-large .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--hiz-space-5, 24px);
}

/* --- 6a. De regels --------------------------------------------------------------------- */

.hiz-cart .wc-block-cart-items {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

/* Alleen horizontale lijnen, geen buitenrand (standaard §Vorm, Tabellen). */
.hiz-cart .wc-block-cart-items__header {
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-cart .wc-block-cart-items__header th {
	padding: 0 0 var(--hiz-space-3, 12px);
	border-bottom: 1px solid var(--hiz-color-line);
}

/* WooCommerce trekt de scheidingslijn al onder de `<tr>`; wij zetten alleen de kleur goed.
   Een tweede lijn op de cellen gaf twee streepjes op verschillende hoogte. */
.hiz-cart .wc-block-cart-items__row {
	border-bottom-color: var(--hiz-color-line);
}

.hiz-cart .wc-block-cart-items__row td {
	padding-block: var(--hiz-space-5, 24px);
	border: 0;
	vertical-align: top;
}

.hiz-cart .wc-block-cart-items__header-image,
.hiz-cart .wc-block-cart-item__image {
	width: var(--hiz-regel-beeld);
	padding-right: var(--hiz-space-4, 16px);
}

.hiz-cart .wc-block-cart-item__image img {
	width: var(--hiz-regel-beeld);
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint);
}

.hiz-cart .wc-block-cart-item__wrap {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 8px);
	align-items: flex-start;
}

.hiz-cart .wc-block-components-product-name {
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

/* De stuksprijs is bijzaak: het regeltotaal staat rechts. */
.hiz-cart .wc-block-cart-item__prices,
.hiz-cart .wc-block-components-product-metadata {
	margin: 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	line-height: 1.4;
}

.hiz-cart .wc-block-components-product-details {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-cart .wc-block-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-3, 12px);
	margin-top: var(--hiz-space-1, 4px);
}

.hiz-cart .wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	height: var(--hiz-stepper);
	margin: 0;
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white);
}

.hiz-cart .wc-block-components-quantity-selector::after {
	content: none;
}

.hiz-cart .wc-block-components-quantity-selector__button,
.hiz-cart .wc-block-components-quantity-selector__input {
	min-width: var(--hiz-stepper);
	height: var(--hiz-stepper);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	opacity: 1;
}

.hiz-cart .wc-block-components-quantity-selector__input {
	width: var(--hiz-stepper);
	text-align: center;
}

.hiz-cart .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	margin: 0;
	padding: 0;
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
	text-decoration: underline;
}

.hiz-cart .wc-block-cart-item__total {
	text-align: right;
	white-space: nowrap;
}

.hiz-cart .wc-block-cart-item__total .wc-block-components-product-price {
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 700;
}

/* --- 6b. Totalen: één wit paneel ------------------------------------------------------- */

.hiz-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block {
	padding: var(--hiz-paneel-pad);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

.hiz-cart .wc-block-cart__totals-title {
	margin: 0 0 var(--hiz-space-4, 16px);
	padding: 0;
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-cart .wc-block-components-totals-wrapper {
	padding-block: var(--hiz-space-3, 12px);
	border-color: var(--hiz-color-line);
}

.hiz-cart .wc-block-components-totals-item__label,
.hiz-checkout .wc-block-components-totals-item__label {
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-cart .wc-block-components-totals-item__value,
.hiz-checkout .wc-block-components-totals-item__value {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 700;
}

.hiz-cart .wc-block-components-totals-footer-item,
.hiz-checkout .wc-block-components-totals-footer-item {
	font-size: var(--hiz-h4, 17px);
	font-weight: 700;
}

.hiz-cart .wc-block-components-totals-item__description,
.hiz-checkout .wc-block-components-totals-item__description {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

/* --- 6c. Cross-sell: een kaartenrij onder de lijst -------------------------------------- */

/*
 * WooCommerce zet de cross-sells als `inline-block` van 30% neer (float-raster uit de klassieke
 * winkel): op 375 px stak de laatste kolom buiten de viewport. Hier een echt raster op de
 * naamloze `<div>` naast de kop. De WooCommerce-regels voor de kaart staan drie klassen diep,
 * vandaar de lange selectors hieronder.
 */
.hiz-cart .wp-block-woocommerce-cart-cross-sells-block {
	margin-top: var(--hiz-space-7, 48px);
	padding-top: var(--hiz-space-6, 32px);
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-cart .wp-block-woocommerce-cart-cross-sells-block > div {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hiz-space-5, 24px) var(--hiz-space-4, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tijdens de laadstaat blijft de cross-sell verborgen: `inc/assets.php` (ronde 4) reserveert de
   hoogte ervan, en zichtbaar worden vóór de hydratatie zou die reservering dubbel tellen. */
.hiz-cart .wp-block-woocommerce-cart.is-loading .wp-block-woocommerce-cart-cross-sells-block {
	display: none;
}

.hiz-cart .hiz-cart__crosssell-titel {
	margin: 0 0 var(--hiz-space-5, 24px);
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 600;
	letter-spacing: -0.015em;
}

.hiz-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 8px);
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
}

/* De kaartinhoud zit nog een `<div>` diep; die moet dezelfde kolom worden. */
.hiz-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product > div {
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 8px);
}

.hiz-cart .wp-block-woocommerce-cart-cross-sells-block .wp-block-cart-cross-sells-product__product-image {
	margin: 0;
}

.hiz-cart .wp-block-cart-cross-sells-product__product-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint);
}

.hiz-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-title,
.hiz-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-name {
	margin: 0;
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.hiz-cart .wp-block-cart-cross-sells-product__product-price {
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 700;
}

/* Zonder beoordelingen is dit een lege regel die alleen ruimte kost. */
.hiz-cart .wc-block-components-product-rating-stars:empty,
.hiz-cart .wc-block-components-product-rating-stars__container:empty {
	display: none;
}

.hiz-cart .wp-block-woocommerce-cart-cross-sells-block .wc-block-components-product-button__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hiz-touch, 44px);
	margin: var(--hiz-space-1, 4px) 0 0;
	padding: 0 var(--hiz-space-5, 24px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

/* --- 6d. Lege winkelwagen -------------------------------------------------------------- */

.hiz-cart__leeg {
	max-width: var(--hiz-kolom-smal);
	margin-inline: auto;
	padding: var(--hiz-paneel-pad);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-mint);
	text-align: left;
}

.hiz-cart__leeg > h2 {
	margin: 0 0 var(--hiz-space-2, 8px);
	font-size: var(--hiz-h2, clamp(26px, 3vw, 36px));
	text-align: left;
}

.hiz-cart__leeg > p {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: 0 0 var(--hiz-space-6, 32px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-md, 16px);
	text-align: left;
}

/* Hotfix 1.0.1: `.hiz-cart__leeg > p` (hierboven) woog zwaarder en maakte dit label 16 px met
   32 px lucht tot de tegels; met de oudersklasse erbij wint het label weer (12 px, 12 px). */
.hiz-cart__leeg > .hiz-cart__soorten-kop,
.hiz-cart__zoeker-kop {
	margin: 0 0 var(--hiz-space-3, 12px);
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-eyebrow-size, 12px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-cart__zoeker {
	max-width: var(--hiz-measure-form, 40rem);
	margin: var(--hiz-space-6, 32px) 0 0;
	text-align: left;
}

/*
 * Geen kaart in een kaart: de plaatszoeker staat hier ín het paneel en heeft dus geen eigen
 * rand, achtergrond of radius nodig.
 */
.hiz-cart__leeg .hiz-plaatszoeker,
.hiz-404 .hiz-plaatszoeker {
	max-width: var(--hiz-measure-form, 40rem);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/*
 * Hotfix 1.0.1: de plaatszoeker houdt 56 px vrij voor zijn resultaat (inline stijl in het blok).
 * In deze panelen stond daardoor een lege strook van ± 90 px: lege winkelwagen tussen de hint en
 * de knoppen, 404 tussen het zoekveld en "Productsoorten" (melding agent inhoud). Het resultaat
 * verschijnt pas na typen, en een verschuiving na invoer telt niet als layoutsprong. Hoogte 0 en
 * niet `display: none`: het is een `aria-live`-gebied, dat moet in de toegankelijkheidsboom
 * blijven om het resultaat voor te lezen.
 */
.hiz-cart__leeg .hiz-plaatszoeker__result[data-status="idle"]:empty,
.hiz-404 .hiz-plaatszoeker__result[data-status="idle"]:empty {
	min-height: 0 !important;
}

.hiz-cart__leeg .hiz-plaatszoeker__label,
.hiz-404 .hiz-plaatszoeker__label {
	margin-bottom: var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-cart__leeg .wp-block-buttons,
.hiz-404 .wp-block-buttons {
	margin-top: var(--hiz-space-6, 32px);
}

.hiz-cart__verder {
	margin-top: var(--hiz-space-7, 48px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* --------------------------------------------------------------------------- 7. Afrekenen */

/*
 * Vier stappen (contact → adres → verzending → betaling), gescheiden door een kop op de
 * H3-schaal en een lijn. Twee keuzes:
 * 1. De koppen zijn `<h2>` in de React-markup; die tag is zonder JS-ingreep niet te wijzigen,
 *    dus krijgen ze hier de H3-schaal (19–22 px, 600). Semantisch blijft het h2 onder de h1.
 * 2. `showFormStepNumbers` staat uit: WooCommerce hangt die nummers buiten de kolom
 *    (`left: -24px`, 36 px inspringing) en in de 7/5-kolom liep het cijfer de pagina uit. De
 *    voortgang staat al bovenaan in `.hiz-stappen`.
 */
.hiz-checkout .wc-block-components-checkout-step {
	margin: 0;
	padding: var(--hiz-space-6, 32px) 0 0;
	border: 0;
	border-top: 1px solid var(--hiz-color-line);
}

.hiz-checkout .wc-block-components-checkout-step:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.hiz-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 var(--hiz-space-4, 16px);
}

.hiz-checkout .wc-block-components-checkout-step__title {
	color: var(--hiz-color-forest);
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	text-transform: none;
}

.hiz-checkout .wc-block-components-checkout-step__description {
	max-width: var(--hiz-measure, 64ch);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-checkout .wc-block-components-checkout-step__content {
	max-width: var(--hiz-measure-form, 40rem);
	margin: 0;
	padding: 0 0 var(--hiz-space-5, 24px);
}

/* --- 7a. Velden: label boven het veld, veld 48 px --------------------------------------- */

/*
 * WooCommerce zet het label zwevend ín het veld (`position: absolute`); de standaard wil het
 * boven het veld (14/600). Het label staat in de DOM ná het invoerveld, dus zet `order` het er
 * visueel vóór – zonder JS-ingreep.
 */
.hiz-woo .wc-block-components-text-input,
.hiz-woo .wc-block-components-textarea-wrapper {
	display: flex;
	flex-direction: column;
	margin-top: var(--hiz-space-4, 16px);
	padding: 0;
	border: 0;
	background: transparent;
}

.hiz-woo .wc-block-components-text-input > label {
	position: static;
	order: -1;
	max-width: none;
	margin: 0 0 var(--hiz-space-2, 8px);
	padding: 0;
	transform: none;
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	overflow: visible;
}

.hiz-woo .wc-block-components-text-input > input,
.hiz-woo .wc-block-components-text-input > textarea,
.hiz-woo .wc-block-components-textarea,
.hiz-woo .wc-blocks-components-select__select,
.hiz-woo .wc-block-components-combobox-control input,
.hiz-woo select {
	order: 0;
	width: 100%;
	min-height: var(--hiz-control, 48px);
	margin: 0;
	padding: 0 var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-veldrand);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-ink, inherit);
	font-family: inherit;
	font-size: var(--hiz-text-md, 16px);
	line-height: 1.4;
}

/* Afrekenvelden: WooCommerce zet een eigen, bijna zwarte rand met hoeken van 4 px (0,3,1). Zelfde
   rand en hoeken als elk ander veld op de site: Bright Slate 70 %, 10 px (UX-L, WCAG 1.4.11). */
html .hiz-woo .wc-block-components-form .wc-block-components-text-input :is(input, textarea),
html .hiz-woo .wc-block-components-text-input :is(input[type="email"], input[type="text"], input[type="tel"], input[type="number"], input[type="password"], input[type="url"]),
html .hiz-woo .wc-blocks-components-select .wc-blocks-components-select__select,
html .hiz-woo .wc-block-components-textarea {
	border-color: var(--hiz-color-veldrand);
	border-radius: var(--hiz-radius-sm, 10px);
}

.hiz-woo .wc-block-components-textarea {
	min-height: calc(3 * var(--hiz-control, 48px));
	padding-block: var(--hiz-space-3, 12px);
}

.hiz-woo .wc-block-components-text-input > input:focus,
.hiz-woo .wc-blocks-components-select__select:focus,
.hiz-woo select:focus {
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 1px;
	box-shadow: none;
}

.hiz-woo .wc-block-components-validation-error {
	order: 1;
	margin-top: var(--hiz-space-2, 8px);
	color: var(--hiz-color-fout);
	font-size: var(--hiz-text-xs, 13px);
}

.hiz-woo .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	border: 0;
	background: transparent;
}

.hiz-woo .wc-blocks-components-select__label {
	position: static;
	order: -1;
	margin: 0 0 var(--hiz-space-2, 8px);
	padding: 0;
	transform: none;
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-woo .wc-blocks-components-select {
	margin-top: var(--hiz-space-4, 16px);
}

/* Aankruisvakjes: de hele regel is aanklikbaar en minstens 44 px hoog. */
.hiz-woo .wc-block-components-checkbox {
	display: flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-woo .wc-block-components-checkbox > label {
	display: flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	line-height: 1.45;
}

/* Keuzerondjes voor verzending en betaling: rustige kaarten, geen zware randen. */
.hiz-woo .wc-block-components-radio-control-accordion-option,
.hiz-woo .wc-block-components-radio-control__option {
	min-height: var(--hiz-control, 48px);
	font-size: var(--hiz-text-sm, 14px);
}

/*
 * Hotfix 1.0.1: hier stond 12 px extra binnenruimte op de regel ín een optie die al 16 px
 * heeft. De tekst zakte daardoor 12 px onder het rondje (verzendopties, rondje op `top: 16px`),
 * en elke betaalmethode werd 82 px hoog. Zonder die regel staan rondje en tekst op één lijn.
 *
 * Kleuren: het kader om de lijst en de lijnen ertussen volgen `--wc-separator-color` (§0); de
 * gekozen optie kreeg een bijna zwarte rand van 1,5 px met hoeken van 4 px, de rondjes en
 * vinkjes waren grijs en zwart. Nu wit vlak zoals de velden, gekozen optie 2 px slate, radius sm.
 */
.hiz-woo .wc-block-components-radio-control--highlight-checked {
	border-radius: var(--hiz-radius-sm, 10px);
	background-color: var(--hiz-color-white);
}

.hiz-woo .wc-block-components-radio-control--highlight-checked::after {
	border-radius: var(--hiz-radius-sm, 10px);
}

.hiz-woo .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted,
.hiz-woo .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--hiz-radius-sm, 10px);
	box-shadow: inset 0 0 0 2px var(--hiz-color-forest);
}

.hiz-woo .wc-block-components-radio-control .wc-block-components-radio-control__input {
	border-color: var(--hiz-color-forest);
}

.hiz-woo .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
	background-color: var(--hiz-color-forest);
}

.hiz-woo .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border-color: var(--hiz-color-forest);
}

.hiz-woo .wc-block-components-checkbox .wc-block-components-checkbox__mark {
	fill: var(--hiz-color-forest);
}

/*
 * Mollie zet onder elke betaalmethode een eigen vak, ook als er niets in hoeft (iDEAL: één
 * lege `<div>`). WooCommerce geeft dat vak 16 px ondermarge, dus de gekozen methode stond als
 * een hoog kader met de naam bovenin. Alleen dat lege Mollie-vak valt weg; staat er iets in
 * (kaartvelden, uitleg), dan blijft het gewoon staan.
 */
.hiz-woo .wc-block-components-radio-control-accordion-content:has(> .mollie-payment-method-container:only-child > div:only-child:empty) {
	display: none;
}

/* Foutmeldingen bij een veld in de foutkleur van de huisstijl (was het rood van WooCommerce). */
.hiz-woo .wc-block-components-text-input.has-error > label,
.hiz-woo .wc-blocks-components-select.has-error .wc-blocks-components-select__label {
	color: var(--hiz-color-fout);
}

.hiz-woo .wc-block-components-text-input.has-error > input,
.hiz-woo .wc-blocks-components-select.has-error .wc-blocks-components-select__select {
	border-color: var(--hiz-color-fout);
}

.hiz-woo .wc-block-components-validation-error svg {
	fill: currentcolor;
}

.hiz-woo .wc-block-components-radio-control__label {
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 600;
}

.hiz-woo .wc-block-components-radio-control__secondary-label,
.hiz-woo .wc-block-components-radio-control__description {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

/* --- 7b. Knoppen ------------------------------------------------------------------------ */

/*
 * De hoofdactie van de pagina is Pow Orange; alle andere knoppen zijn slate of tekstknop
 * (standaard §Componenten). De diepere oranje `--hiz-color-lemon-tekst` houdt wit op 4,9:1;
 * `#E05320` haalde maar 3,87:1.
 */
.hiz-woo .wc-block-components-button,
.hiz-woo .wc-block-cart__submit-button,
.hiz-woo .wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hiz-control, 48px);
	padding-inline: var(--hiz-space-5, 24px);
	border: 0;
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-lemon-tekst);
	color: var(--hiz-color-white);
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 600;
}

.hiz-woo .wc-block-components-button:hover:not(:disabled) {
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

.hiz-woo .wc-block-components-button.outlined,
.hiz-woo .wc-block-components-checkout-return-to-cart-button {
	min-height: var(--hiz-touch, 44px);
	background: transparent;
	color: var(--hiz-color-forest);
	font-weight: 600;
}

/* Hotfix 1.0.1: WooCommerce zet het pijltje absoluut op 50% van de link, die hier 44 px hoog is;
   de tekst stond bovenin en het pijltje eronder. Nu pijl en woord op één lijn (UX-L C3). */
.hiz-woo .wc-block-components-checkout-return-to-cart-button {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	padding-left: 0;
}

.hiz-woo .wc-block-components-checkout-return-to-cart-button svg {
	position: static;
	flex: none;
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
	transform: none;
}

.hiz-checkout .wc-block-checkout__actions_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--hiz-space-4, 16px);
	padding: 0;
}

.hiz-checkout .wc-block-checkout__terms {
	margin-top: var(--hiz-space-5, 24px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* --- 7c. Besteloverzicht: wit paneel, sticky ------------------------------------------- */

.hiz-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--hiz-paneel-pad);
	border: 0;
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

.hiz-checkout .wc-block-components-checkout-order-summary__title {
	margin: 0 0 var(--hiz-space-4, 16px);
	padding: 0;
}

/*
 * Hotfix 1.0.1, mobiel (één kolom): bovenaan staat de samenvatting als uitklapregel. In het
 * witte paneel kreeg die regel de twee lijnen van WooCommerce tegen de tekst aan en 48 px wit
 * eronder. Nu één rustige regel in een lager paneel; uitgeklapt volgt de inhoud met 12 px.
 * Onderaan, vóór de bestelknop, stond dezelfde samenvatting in een grijs kader van 5 px
 * radius: nu hetzelfde witte paneel als op desktop.
 */
.hiz-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
	padding: var(--hiz-space-3, 12px) var(--hiz-space-5, 24px);
}

.hiz-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-block-components-checkout-order-summary__title {
	margin: 0;
	padding-block: var(--hiz-space-2, 8px);
	border-block: 0;
}

.hiz-checkout .wc-block-components-sidebar-layout:not(.is-large) .wc-block-components-checkout-order-summary__content {
	margin-top: var(--hiz-space-3, 12px);
}

.hiz-checkout .checkout-order-summary-block-fill {
	border: 0;
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

.hiz-checkout .wc-block-components-checkout-order-summary__title-text {
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-checkout .wc-block-components-order-summary-item__image img {
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-mint);
}

.hiz-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name {
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	line-height: 1.35;
}

.hiz-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-xs, 13px);
}

/* ------------------------------------------------------------------------ 8. Bedankpagina */

/*
 * Kop met het bestelnummer als eyebrow erboven, de bestelgegevens als paneel, en het vervolg
 * als drie kaarten. Het bestelnummer komt uit `woocommerce/order-confirmation-summary`; dat
 * blok staat in het sjabloon daarom vóór het statusblok met de <h1>.
 */
.hiz-bedankt .wc-block-order-confirmation-summary {
	margin: 0 0 var(--hiz-space-2, 8px);
}

.hiz-bedankt .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-5, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-eyebrow-size, 12px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-bedankt .wc-block-order-confirmation-summary-list-item {
	margin: 0;
	padding: 0;
	border: 0;
}

.hiz-bedankt .wc-block-order-confirmation-summary-list-item:first-child {
	color: var(--hiz-color-forest);
}

.hiz-bedankt .wc-block-order-confirmation-status p {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: 0 0 var(--hiz-space-6, 32px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-lg, clamp(17px, 1.6vw, 19px));
	line-height: 1.55;
}

.hiz-bedankt .wc-block-order-confirmation-status h1 {
	margin: 0 0 var(--hiz-space-3, 12px);
}

/* Het bestellingoverzicht, de adressen en de extra velden vormen samen één wit paneel. */
.hiz-bedankt__paneel {
	margin-block: var(--hiz-space-7, 48px);
	padding: var(--hiz-paneel-pad);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

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

/* Hotfix 1.0.1: zonder geldige bestelling (verlopen sessie, /afrekenen/order-received/ zonder
   sleutel) blijven alleen twee lege kolommen over: een leeg wit vlak van ± 100 px. */
.hiz-bedankt__paneel:not(:has(table, address)) {
	display: none;
}

.hiz-bedankt__paneel h2 {
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 600;
	letter-spacing: -0.015em;
}

/* Tabellen: alleen horizontale lijnen, geen buitenrand (standaard §Vorm). WooCommerce zet hier
   een volledig kader met verticale lijnen neer. */
.hiz-bedankt .wc-block-order-confirmation-totals__table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-bedankt .wc-block-order-confirmation-totals__table th,
.hiz-bedankt .wc-block-order-confirmation-totals__table td {
	padding: var(--hiz-space-3, 12px) 0;
	border: 0;
	border-bottom: 1px solid var(--hiz-color-line);
	text-align: left;
	vertical-align: top;
}

.hiz-bedankt .wc-block-order-confirmation-totals__table thead th {
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-text-xs, 13px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-bedankt .wc-block-order-confirmation-totals__table td:last-child,
.hiz-bedankt .wc-block-order-confirmation-totals__table th:last-child {
	text-align: right;
	white-space: nowrap;
}

.hiz-bedankt .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.hiz-bedankt .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	border-bottom: 0;
	font-size: var(--hiz-h4, 17px);
	font-weight: 700;
}

.hiz-bedankt .wc-block-order-confirmation-totals__table a {
	color: var(--hiz-color-forest);
	font-weight: 600;
	text-decoration: none;
}

/* Adressen: platte tekst in het paneel, geen tweede kader eromheen. */
.hiz-bedankt .wc-block-order-confirmation-shipping-address,
.hiz-bedankt .wc-block-order-confirmation-billing-address {
	padding: 0;
	border: 0;
	background: transparent;
}

.hiz-bedankt .wc-block-order-confirmation-shipping-address address,
.hiz-bedankt .wc-block-order-confirmation-billing-address address {
	padding: 0;
	border: 0;
	background: transparent;
}

.hiz-bedankt .wc-block-order-confirmation-address-wrapper {
	gap: var(--hiz-space-6, 32px);
	margin-top: var(--hiz-space-6, 32px);
}

.hiz-bedankt .wc-block-order-confirmation-address-wrapper .wp-block-column {
	min-width: 0;
}

.hiz-bedankt address,
.hiz-bedankt .woocommerce-column__title + address {
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
	font-style: normal;
	line-height: 1.6;
}

.hiz-bedankt__vervolg {
	margin-block: var(--hiz-space-7, 48px);
}

.hiz-bedankt__verder {
	margin-block: var(--hiz-space-7, 48px);
	padding: var(--hiz-paneel-pad);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-mint);
}

.hiz-bedankt__verder p {
	max-width: var(--hiz-measure, 64ch);
	margin: 0 0 var(--hiz-space-5, 24px);
	font-size: var(--hiz-text-md, 16px);
}

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

/* ------------------------------------------------------------------------ 9. Mijn account */

.hiz-account__lead {
	max-width: var(--hiz-measure-lead, 54ch);
	margin: 0 0 var(--hiz-space-6, 32px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-lg, clamp(17px, 1.6vw, 19px));
	line-height: 1.55;
}

/* Navigatie als tabs: chips van 40 px op één regel boven het paneel. */
.hiz-account .woocommerce-MyAccount-navigation ul {
	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-account .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	padding: 0 var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white);
	color: var(--hiz-color-forest);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	text-decoration: none;
}

.hiz-account .woocommerce-MyAccount-navigation .is-active a {
	border-color: var(--hiz-color-forest);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
}

/* De inhoud staat in een wit paneel; formulieren daarin maximaal 640 px. */
.hiz-account .woocommerce-MyAccount-content,
.hiz-account .woocommerce-form-login,
.hiz-account .woocommerce-form-register,
.hiz-account .woocommerce-ResetPassword {
	min-width: 0;
	padding: var(--hiz-paneel-pad);
	border: 0;
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

.hiz-account .woocommerce-MyAccount-content > :first-child,
.hiz-account .woocommerce-form-login > :first-child {
	margin-top: 0;
}

.hiz-account .woocommerce-MyAccount-content > :last-child,
.hiz-account .woocommerce-form-login > :last-child {
	margin-bottom: 0;
}

.hiz-account h2 {
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	font-weight: 600;
	letter-spacing: -0.015em;
}

.hiz-account .form-row,
.hiz-account .woocommerce-form-row {
	display: flex;
	flex-direction: column;
	max-width: var(--hiz-measure-form, 40rem);
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: 0;
}

.hiz-account label {
	margin-bottom: var(--hiz-space-2, 8px);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
}

.hiz-account form .woocommerce-Input,
.hiz-account form input[type="text"],
.hiz-account form input[type="email"],
.hiz-account form input[type="tel"],
.hiz-account form input[type="password"],
.hiz-account form select,
.hiz-account form textarea {
	width: 100%;
	max-width: var(--hiz-measure-form, 40rem);
	min-height: var(--hiz-control, 48px);
	padding: 0 var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-veldrand);
	border-radius: var(--hiz-radius-sm, 10px);
	background: var(--hiz-color-white);
	font: inherit;
	font-size: var(--hiz-text-md, 16px);
}

.hiz-account form textarea {
	padding-block: var(--hiz-space-3, 12px);
}

.hiz-account .button,
.hiz-account button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hiz-control, 48px);
	padding: 0 var(--hiz-space-5, 24px);
	border: 1px solid var(--hiz-color-forest);
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-forest);
	color: var(--hiz-color-paper);
	font: inherit;
	font-size: var(--hiz-text-sm-plus, 15px);
	font-weight: 600;
	cursor: pointer;
}

/* Wachtwoord-tonen-knop en aankruisvakjes duimbereikbaar maken. */
.hiz-account .password-input,
.hiz-account .woocommerce-password-input {
	position: relative;
	display: block;
}

.hiz-account .show-password-input {
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	background-position: center;
	background-repeat: no-repeat;
}

.hiz-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	font-weight: 400;
}

.hiz-account .woocommerce-form__input-checkbox {
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
}

.hiz-account .woocommerce-LostPassword {
	margin: var(--hiz-space-4, 16px) 0 0;
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-account table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-account table th,
.hiz-account table td {
	padding: var(--hiz-space-3, 12px) var(--hiz-space-2, 8px) var(--hiz-space-3, 12px) 0;
	border: 0;
	border-bottom: 1px solid var(--hiz-color-line);
	text-align: left;
}

.hiz-account table th {
	font-weight: 600;
}

/* Brede tabellen mogen zelf scrollen, de pagina nooit. */
.hiz-account .woocommerce-orders-table,
.hiz-account .shop_table {
	display: block;
	overflow-x: auto;
}

.hiz-account__hulp {
	margin-top: var(--hiz-space-7, 48px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/*
 * Hotfix 1.0.1 – het inlogformulier. `woocommerce.css` en `woocommerce-blocktheme.css` wonnen
 * met zwaardere selectors (`.woocommerce form .form-row …`) van de regels hierboven: een kader
 * van 5 px radius, labels met regelhoogte 2 (± 35 px tot het veld), velden met een bijna zwarte
 * rand en 4 px radius, en het blok gecentreerd op 1.000 px terwijl kop en inleiding links
 * staan. Het oogje (wachtwoord tonen) wordt getekend in `woocommerce-layout.css`, dat HIZ niet
 * laadt: het stond als leeg grijs vak onder het veld. Deze regels zijn één niveau zwaarder en
 * volgen de opzet van het look-and-feel-werk (UX-L C1).
 */
.hiz-account > .woocommerce:not(.wc-block-store-notices) {
	max-width: none;
	margin-inline: 0 auto !important;
	/* QA 1.2.0: zelfde correctie als bovenaan dit bestand – links in de inhoudskolom, niet tegen
	   de rand van de schermbrede <main> (op 1536 px stond het inlogblok op x = 40). */
	margin-inline: max(0px, (100% - var(--wp--style--global--content-size, 1200px)) / 2) auto !important;
}

.hiz-account .woocommerce form.woocommerce-form-login {
	max-width: calc(var(--hiz-measure-form, 40rem) + 2 * var(--hiz-paneel-pad));
	margin: 0;
	padding: var(--hiz-paneel-pad);
	border: 0;
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-white);
}

.hiz-account .woocommerce form .form-row {
	margin: 0 0 var(--hiz-space-5, 24px);
	padding: 0;
}

.hiz-account .woocommerce form .form-row label {
	display: block;
	margin: 0 0 var(--hiz-space-2, 8px);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-sm, 14px);
	font-weight: 600;
	line-height: 1.4;
}

.hiz-account .woocommerce form .form-row .required {
	color: var(--hiz-color-fout);
	text-decoration: none;
}

.hiz-account .woocommerce form .form-row input.input-text {
	min-height: var(--hiz-control, 48px);
	padding: var(--hiz-space-3, 12px) var(--hiz-space-4, 16px);
	border: 1px solid var(--hiz-color-veldrand);
	border-radius: var(--hiz-radius-sm, 10px);
	background-color: var(--hiz-color-white);
	color: var(--hiz-color-ink);
	font-size: var(--hiz-text-md, 16px);
	line-height: 1.4;
}

.hiz-account .woocommerce form .form-row input.input-text:focus {
	border-color: var(--hiz-color-forest);
	outline: 2px solid var(--hiz-color-forest);
	outline-offset: 1px;
}

/* Wachtwoord tonen: het oogje ín het veld, rechts, 44 × 44 px, in de merkkleur. */
.hiz-account .woocommerce form .password-input input.input-text {
	padding-right: calc(var(--hiz-touch, 44px) + var(--hiz-space-2, 8px));
}

.hiz-account .woocommerce form .show-password-input {
	position: absolute;
	top: 50%;
	right: var(--hiz-space-1, 4px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hiz-touch, 44px);
	height: var(--hiz-touch, 44px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--hiz-radius-sm, 10px);
	background: transparent;
	color: var(--hiz-color-forest);
	cursor: pointer;
	transform: translateY(-50%);
}

.hiz-account .woocommerce form .show-password-input:hover {
	background-color: var(--hiz-color-mint);
}

.hiz-account .woocommerce form .show-password-input::before {
	content: "";
	width: var(--hiz-space-5, 24px);
	height: var(--hiz-space-5, 24px);
	background-color: currentcolor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.hiz-account .woocommerce form .show-password-input.display-password::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6C3.9 8.4 2 12 2 12s3.5 7 10 7c1.9 0 3.6-.6 5-1.5'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.6 6.6C3.9 8.4 2 12 2 12s3.5 7 10 7c1.9 0 3.6-.6 5-1.5'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

/* Onthouden: vakje en woord op één lijn; de knop in de gewone knopvorm, niet 620 px breed. */
.hiz-account .woocommerce form .form-row label.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	margin: 0 0 var(--hiz-space-3, 12px);
	font-weight: 400;
}

.hiz-account .woocommerce form .woocommerce-form__input-checkbox {
	margin: 0;
	accent-color: var(--hiz-color-forest);
}

/* De rij is een kolom-flexbox (hierboven); zonder `align-self` rekt de knop over de volle breedte. */
.hiz-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
	align-self: flex-start;
	float: none;
	width: auto;
	margin: 0;
}

/* De accountinhoud komt uit een shortcode-blok, en WordPress zet daarin `<br>`s: tussen label en
   veld (22 px extra lucht) en vóór het vinkje (8 px inspringing). In formulieren doen ze niets. */
.hiz-account .woocommerce form br {
	display: none;
}

.hiz-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__submit:hover {
	border-color: var(--hiz-color-pine);
	background: var(--hiz-color-pine);
}

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

.hiz-account .woocommerce .lost_password a {
	display: inline-flex;
	align-items: center;
	min-height: var(--hiz-touch, 44px);
	color: var(--hiz-color-forest);
}

/* De meldingen zelf (`.woocommerce-message`, `-info`, `-error`, `.wc-block-components-notice-
   banner`) staan in `woo.css`: die verschijnen ook op de winkel- en productpagina's. */

/*
 * Hotfix 1.0.1 – meldingen op de commerce-pagina's. De blokmeldingen van WooCommerce stonden
 * in hun eigen kleuren: groen kader op mintgroen, blauw op lichtblauw, rood op roze, 4 px
 * radius (winkelwagen, afrekenen, Mijn account). Hier in de huisstijl: wit vlak met een dunne
 * lijn, radius sm, icoon in een slate rondje; succes op Link Water; een fout in de foutkleur.
 * `woo.css` (winkel, product) heeft ze nog in de WooCommerce-kleuren: zie het PR-document.
 */
.hiz-commerce .wc-block-components-notice-banner {
	border: 1px solid var(--hiz-color-line);
	border-radius: var(--hiz-radius-sm, 10px);
	background-color: var(--hiz-color-white);
	color: var(--hiz-color-ink);
}

.hiz-commerce .wc-block-components-notice-banner > svg {
	background-color: var(--hiz-color-forest);
	fill: var(--hiz-color-white);
}

.hiz-commerce .wc-block-components-notice-banner.is-success {
	border-color: var(--hiz-color-mint);
	background-color: var(--hiz-color-mint);
}

.hiz-commerce .wc-block-components-notice-banner.is-warning {
	border-color: var(--hiz-color-waarschuwing);
}

.hiz-commerce .wc-block-components-notice-banner.is-warning > svg {
	background-color: var(--hiz-color-waarschuwing);
}

.hiz-commerce .wc-block-components-notice-banner.is-error {
	border-color: var(--hiz-color-fout);
}

.hiz-commerce .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--hiz-color-fout);
}

.hiz-commerce .wc-block-components-notice-banner a {
	color: var(--hiz-color-forest);
	font-weight: 600;
}

/* De snackbar ("… is verwijderd") zweeft: daar mag de lichte schaduw uit de standaard. */
.hiz-commerce .wc-block-components-notice-snackbar {
	box-shadow: var(--hiz-schaduw, 0 8px 24px rgb(30 35 82 / 10%));
}

/* ------------------------------------------------------------------------------- 10. 404 */

/*
 * Compact: kop, één zin, zoekveld, drie productsoorten. De volledige plaatsenlijst met kaart
 * stond hier ook; die maakte de pagina op 375 px 3.625 px hoog voor iemand die alleen maar
 * verkeerd geklikt heeft.
 */
.hiz-404__inhoud {
	max-width: var(--hiz-kolom-smal);
}

.hiz-404__paneel {
	margin-top: var(--hiz-space-6, 32px);
	padding: var(--hiz-paneel-pad);
	border-radius: var(--hiz-paneel-radius);
	background: var(--hiz-color-mint);
}

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

.hiz-404__soorten-kop {
	margin: var(--hiz-space-6, 32px) 0 var(--hiz-space-3, 12px);
	color: var(--hiz-color-muted);
	font-family: var(--hiz-font-code);
	font-size: var(--hiz-eyebrow-size, 12px);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.hiz-404__verder {
	margin-top: var(--hiz-space-6, 32px);
	color: var(--hiz-color-muted);
	font-size: var(--hiz-text-sm, 14px);
}

/* ----------------------------------------------------------------------- 11. Breakpoints */

@media (max-width: 767px) {
	/*
	 * Sticky totaal op mobiel: het bedrag en de knop blijven bereikbaar zonder terugscrollen.
	 * 41% van de Nederlandse online aankopen gebeurt op een telefoon (Thuiswinkel 2026).
	 */
	.hiz-cart .wp-block-woocommerce-proceed-to-checkout-block {
		position: sticky;
		bottom: 0;
		z-index: 5;
		padding-block: var(--hiz-space-3, 12px) calc(var(--hiz-space-3, 12px) + env(safe-area-inset-bottom, 0px));
		background: var(--hiz-color-achtergrond, #F5F1E8);
		/* De schaduw uit de standaard (sticky bar), gespiegeld: deze balk zweeft aan de onderkant. */
		box-shadow: 0 -8px 24px rgb(30 35 82 / 10%);
	}
}

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

	.hiz-cart__leeg .hiz-soort__link,
	.hiz-404 .hiz-soort__link {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hiz-cart__leeg .hiz-soort__tekstblok,
	.hiz-404 .hiz-soort__tekstblok {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
}

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

	.hiz-cart .wp-block-woocommerce-cart-cross-sells-block > div {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/*
	 * Straat en huisnummer horen bij elkaar en staan daarom op één regel; WooCommerce legt de
	 * adresvelden in een flexcontainer, dus sturen we de flex-basis en niet de breedte.
	 */
	.hiz-checkout .wc-block-components-address-form > .wc-block-components-address-form__address_1 {
		flex: 0 1 62%;
		max-width: 62%;
	}

	.hiz-checkout .wc-block-components-address-form > .wc-block-components-address-form__hiz-huisnummer {
		flex: 0 1 34%;
		max-width: 34%;
	}
}

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

	/* 7/5 (zie hieronder, `is-large`) met de volle tussenruimte, en de totalen lopen niet mee. */
	.hiz-cart .is-large .wc-block-cart__main,
	.hiz-checkout .is-large .wc-block-checkout__main {
		padding-right: var(--hiz-space-8, 64px);
	}

	.hiz-checkout .is-large .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		padding: var(--hiz-paneel-pad);
	}

	.hiz-cart .wc-block-cart__sidebar > .wp-block-woocommerce-cart-order-summary-block,
	.hiz-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block {
		position: sticky;
		top: calc(var(--hiz-header-hoogte, 72px) + var(--hiz-space-5, 24px));
	}

	.hiz-cart__leeg .hiz-soorten,
	.hiz-404 .hiz-soorten {
		gap: var(--hiz-space-4, 16px);
	}

	.hiz-cart__leeg .hiz-soort__link,
	.hiz-404 .hiz-soort__link {
		padding: var(--hiz-space-4, 16px);
	}

	.hiz-commerce .hiz-kaartrij {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--hiz-space-5, 24px);
	}
}

/*
 * Hotfix 1.0.1: winkelwagen en afrekenen op dezelfde container als kop, inhoud en voet
 * (één linkerkant, ook op 1536 px). De blokken staan in het sjabloon op alignwide (1360 px).
 */
:is(.is-layout-constrained, .wp-block-group, main) > :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout).alignwide {
	max-width: var(--hiz-container, 1200px);
}

/*
 * Samenvoegen 2: kleurstaal voor de kleurnaam in de productdetails van winkelwagen en afrekenen
 * (plugin: Commerce\WagenStalen + wagen-stalen.js). Bij een andere inkt tweekleurig
 * (`.hiz-staal--combo`, hiz.css). Decoratief; de kleurnaam blijft het label.
 */
.hiz-wagen-staal {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: var(--hiz-space-1, 4px);
	border-radius: 50%;
	vertical-align: -1px;
	background: var(--hiz-swatch, var(--hiz-color-sage));
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 22%);
}

.hiz-wagen-staal--licht {
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 40%);
}

/* ------------------------------------------------------------------ QA 1.2.0: cross-sell */

/*
 * "Maak je bestelling compleet" (de canvas tas, `hiz_tas_product_id`): vier vaste kolommen in de
 * smalle winkelwagenkolom gaven op 768 px kaarten van 83 px, met een naam over twee regels en een
 * knop "Opties selecteren" die over twee regels liep en buiten de kaart stak. Nu kolommen van
 * minstens 10rem, een knop op één regel en de productnaam als kaarttitel (600, zoals elke
 * productkaart); WooCommerce' eigen regel voor de naam won met zwaardere selectors.
 */
.hiz-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block > div {
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.hiz-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-name {
	font-weight: 600;
}

.hiz-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button__link {
	padding-inline: var(--hiz-space-4, 16px);
	white-space: nowrap;
}

/* Knop links onder de prijs, zoals naam en prijs (WooCommerce centreert hem), en geen 16 px
   ondermarge onder de naam: titel en prijs staan op elke productkaart direct onder elkaar. */
.hiz-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-button {
	align-items: flex-start;
}

.hiz-cart .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wc-block-components-product-title {
	margin-bottom: 0;
}