/**
 * Header van ontwerp G (verbeterplan/ontwerpen/g-complete-webshop.html):
 * USP-balk, sticky header met woordmerk, productzoekveld, account en
 * winkelwagen, navigatierij met megamenu "Alle producten".
 *
 * Mobile-first. Breekpunten: 561px (ondertitel merk), 821px (zoekveld in de
 * hoofdrij, actieknoppen met tekst), 1181px (navigatierij + megamenu als
 * uitklappaneel; daaronder is de navigatierij het mobiele menu).
 *
 * Kleuren/typografie uitsluitend via design-tokens.css (--kleur-*, --font-*,
 * --radius*). Dit bestand laadt vóór design-tokens.css; daarom hebben alle
 * regels minstens twee klassen, zodat de basislaag daar nooit overheen gaat.
 * Animatie alleen via opacity/transform, 150–200 ms, uit bij
 * prefers-reduced-motion.
 *
 * .cs-container is gedeeld met de andere templates (zelfde breedte als G:
 * 1240px inhoud) en blijft daarom ongewijzigd.
 *
 * Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
 * Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
 * Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 */

:root {
	--cs-header-max-width: 1280px;
	--cs-dim: color-mix(in srgb, var(--kleur-inkt) 38%, transparent);
	--cs-header-top: 0px;
}

.admin-bar {
	--cs-header-top: var(--wp-admin--admin-bar--height, 32px);
}

/* Onder 601px scrolt de WordPress-adminbalk mee (position:absolute). */
@media (max-width: 600px) {
	.admin-bar {
		--cs-header-top: 0px;
	}
}

.cs-container {
	max-width: var(--cs-header-max-width);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Visueel verborgen, wel voorgelezen (ook gebruikt in footer.php). */
.cs-vv {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Ankersprongen (skip-link, #fragmenten) niet onder de sticky header laten
   vallen; header.js zet de werkelijke hoogte. */
html {
	scroll-padding-top: var(--cs-header-hoogte, 0px);
}

/* Scroll-lock zolang het mobiele menu open is (header.js). scrollbar-gutter
   voorkomt dat de pagina verspringt als de scrollbalk verdwijnt. */
html.cs-scroll-lock {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* Skip-link (S-05): onzichtbaar tot toetsenbordfocus. Specificiteit (0,3,0)
   boven `.screen-reader-text:focus` van het parent-theme. */
a.skip-link.cs-skip-link:focus {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	background: var(--kleur-wit);
	color: var(--kleur-groen-donker);
	border: 2px solid var(--kleur-groen-donker);
	border-radius: var(--radius);
	font-family: var(--font-tekst);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	outline: 3px solid var(--kleur-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   USP-balk
   ========================================================================== */
.cs-usp {
	background: var(--kleur-groen-donker);
	color: var(--kleur-wit);
	font-family: var(--font-tekst);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}

.cs-usp .cs-usp-lijst {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 38px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.cs-usp .cs-usp-lijst::-webkit-scrollbar {
	display: none;
}

/* Alleen als de balk echt scrolt (header.js): zachte rand rechts als hint en
   een focusbare scrollcontainer voor toetsenbordgebruikers. */
.cs-usp .cs-usp-lijst.is-scrollbaar {
	-webkit-mask-image: linear-gradient(to right, var(--kleur-inkt) calc(100% - 32px), transparent);
	mask-image: linear-gradient(to right, var(--kleur-inkt) calc(100% - 32px), transparent);
}

.cs-usp .cs-usp-lijst.is-scrollbaar.is-eind {
	-webkit-mask-image: none;
	mask-image: none;
}

.cs-usp .cs-usp-lijst:focus-visible {
	outline: 3px solid var(--kleur-focus);
	outline-offset: -3px;
	border-radius: 4px;
}

.cs-usp .cs-usp-lijst li {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	margin: 0;
	white-space: nowrap;
}

.cs-usp .cs-usp-lijst svg {
	flex: none;
	color: var(--kleur-amber);
}

/* ==========================================================================
   Header (sticky)
   ========================================================================== */
.cs-header {
	position: sticky;
	top: var(--cs-header-top);
	z-index: 100;
	background: var(--kleur-pagina);
	box-shadow: 0 1px 0 var(--kleur-lijn);
	font-family: var(--font-tekst);
	color: var(--kleur-inkt);
}

/* Hoofdrij — mobiel: merk + acties, zoekveld op een eigen rij eronder. */
.cs-header .cs-header-rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"merk acties"
		"zoek zoek";
	align-items: center;
	column-gap: 12px;
	min-height: 64px;
}

.cs-header .cs-merk {
	grid-area: merk;
	display: grid;
	justify-items: start;
	align-self: center;
	min-width: 0;
	padding-block: 10px;
	color: var(--kleur-inkt);
	text-decoration: none;
	line-height: 1.05;
}

.cs-header .cs-merk:focus-visible,
.cs-footer .cs-merk:focus-visible {
	outline: 3px solid var(--kleur-groen-donker);
	outline-offset: 4px;
	border-radius: 4px;
}

.cs-header .cs-merk-naam,
.cs-footer .cs-merk-naam {
	font-family: var(--font-koppen);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--kleur-groen);
	white-space: nowrap;
}

.cs-header .cs-merk-sub,
.cs-footer .cs-merk-sub {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--kleur-zacht);
}

.cs-header .cs-merk-sub {
	display: none;
}

/* Geüpload logo (alleen als het geen oud goud-SVG is). Specificiteit (0,3,1)
   wint van `.woocommerce-page img { height:auto }`. */
.cs-header .cs-merk img.cs-logo {
	display: block;
	width: auto;
	height: 36px;
	max-width: none;
}

/* Zoekveld */
.cs-header .cs-zoek {
	grid-area: zoek;
	display: flex;
	width: 100%;
	margin: 0 0 12px;
	background: var(--kleur-wit);
	border: 2px solid var(--kleur-groen);
	border-radius: var(--radius-rond);
	overflow: hidden;
}

.cs-header .cs-zoek:focus-within {
	outline: 3px solid var(--kleur-groen-donker);
	outline-offset: 2px;
}

.cs-header .cs-zoek .cs-zoek-veld {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--kleur-inkt);
	font-family: var(--font-tekst);
	font-size: 16px; /* ≥ 16px: geen automatische zoom op iOS */
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}

.cs-header .cs-zoek .cs-zoek-veld::placeholder {
	color: var(--kleur-zacht);
	opacity: 1;
}

.cs-header .cs-zoek .cs-zoek-veld:focus {
	outline: none;
	box-shadow: none;
}

.cs-header .cs-zoek .cs-zoek-knop,
.cs-header .cs-zoek .cs-zoek-knop:hover,
.cs-header .cs-zoek .cs-zoek-knop:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 56px;
	margin: 0;
	padding: 0 18px;
	background: var(--kleur-groen);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--kleur-wit);
	cursor: pointer;
	transition: background-color 0.15s ease-out;
}

.cs-header .cs-zoek .cs-zoek-knop:hover {
	background: var(--kleur-groen-donker);
}

.cs-header .cs-zoek .cs-zoek-knop:focus-visible {
	background: var(--kleur-groen-donker);
	outline: none;
}

/* Acties: account, winkelwagen, menu */
.cs-header .cs-acties {
	grid-area: acties;
	display: flex;
	align-items: center;
	gap: 2px;
}

.cs-header .cs-acties .cs-actie,
.cs-header .cs-acties .cs-actie:hover,
.cs-header .cs-acties .cs-actie:focus {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 4px 6px;
	background: transparent;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	color: var(--kleur-inkt);
	font-family: var(--font-tekst);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-out;
}

.cs-header .cs-acties .cs-actie:hover {
	background: var(--kleur-vlak);
	color: var(--kleur-inkt);
}

.cs-header .cs-acties .cs-actie:focus-visible {
	outline: 3px solid var(--kleur-groen-donker);
	outline-offset: 0;
}

.cs-header .cs-acties .cs-actie svg {
	flex: none;
}

/* Tekst onder de iconen: mobiel alleen voor schermlezers. */
.cs-header .cs-acties .cs-actie-tekst {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.cs-header .cs-cart-link .cs-cart-count {
	position: absolute;
	top: 2px;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	background: var(--kleur-badge);
	border-radius: var(--radius-rond);
	color: var(--kleur-badge-tekst);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cs-header .cs-cart-link .cs-cart-count.is-leeg {
	display: none;
}

/* Menuknop: icoon wisselt naar een kruisje als het menu open is. */
.cs-header .cs-menu-toggle .cs-menu-icoon-dicht,
.cs-header .cs-menu-toggle[aria-expanded="true"] .cs-menu-icoon-open {
	display: none;
}

.cs-header .cs-menu-toggle[aria-expanded="true"] .cs-menu-icoon-dicht {
	display: block;
}

.cs-header .cs-acties .cs-menu-toggle[aria-expanded="true"] {
	background: var(--kleur-vlak);
}

/* ==========================================================================
   Navigatierij — mobiel (≤ 1180px): het uitklapmenu onder de header
   ========================================================================== */
.cs-header .cs-navrij {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: var(--cs-menu-max, calc(100vh - 140px));
	max-height: var(--cs-menu-max, calc(100dvh - 140px));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--kleur-wit);
	border-top: 1px solid var(--kleur-lijn);
	/* Dimt de pagina eronder, niet de header (clip-path laat de schaduw
	   alleen naar beneden en opzij uitlopen). */
	clip-path: inset(0 -100vmax -100vmax -100vmax);
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
	transition: none; /* sluiten direct, zie het megamenu */
}

.cs-header .cs-navrij.is-open {
	box-shadow: 0 0 0 100vmax var(--cs-dim);
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

@starting-style {
	.cs-header .cs-navrij.is-open {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.cs-header .cs-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding-block: 8px 20px;
}

/* Megamenu staat in het mobiele menu statisch open; de knop is weg. */
.cs-header .cs-mega .cs-mega-knop {
	display: none;
}

.cs-header .cs-mega-paneel {
	position: static;
}

.cs-header .cs-mega-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px 20px;
	max-width: none;
	padding: 8px 0 16px;
}

.cs-header .cs-mega-kop {
	margin: 12px 0 2px;
	color: var(--kleur-zacht);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.cs-header .cs-mega-kolom > .cs-mega-kop:first-child {
	margin-top: 8px;
}

.cs-header .cs-mega-lijst {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-header .cs-mega-lijst li {
	margin: 0;
	break-inside: avoid;
}

.cs-header .cs-mega-lijst a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	color: var(--kleur-inkt);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
}

.cs-header .cs-mega-lijst a:hover {
	color: var(--kleur-groen-donker);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cs-header .cs-mega-lijst a:focus-visible,
.cs-header .cs-nav-menu a:focus-visible,
.cs-header .cs-nav .cs-advieslink:focus-visible {
	outline: 3px solid var(--kleur-groen-donker);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Promotegel */
.cs-header .cs-mega-promo {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 88px;
	align-items: center;
	gap: 14px;
	margin-top: 8px;
	padding: 16px 18px;
	background: var(--kleur-groen-licht);
	border-radius: var(--radius);
	color: var(--kleur-inkt);
	text-decoration: none;
	transition: transform 0.15s ease-out;
}

.cs-header .cs-mega-promo:focus-visible {
	outline: 3px solid var(--kleur-groen-donker);
	outline-offset: 2px;
}

.cs-header .cs-mega-promo-titel {
	display: block;
	margin-bottom: 4px;
	font-family: var(--font-koppen);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.cs-header .cs-mega-promo:hover .cs-mega-promo-titel {
	color: var(--kleur-groen-donker);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cs-header .cs-mega-promo-zin {
	display: block;
	font-size: 15px;
	line-height: 1.45;
}

.cs-header .cs-mega-promo img.cs-mega-promo-beeld {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* Directe links (WordPress-menu "hoofdmenu", diepte 1) */
.cs-header .cs-nav-menu {
	display: flex;
	flex-direction: column;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--kleur-lijn);
}

.cs-header .cs-nav-menu > li {
	margin: 0;
	border-bottom: 1px solid var(--kleur-lijn);
}

/* De merken staan in het mobiele menu al bij "Merken" hierboven. */
.cs-header .cs-nav-menu > li.cs-menu-item-winkel {
	display: none;
}

.cs-header .cs-nav-menu > li > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0;
	color: var(--kleur-inkt);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.cs-header .cs-nav-menu > li.cs-menu-item-secundair > a {
	min-height: 44px;
	color: var(--kleur-zacht);
	font-size: 15px;
	font-weight: 500;
}

.cs-header .cs-nav-menu > li > a:hover,
.cs-header .cs-nav-menu > li > a[aria-current="page"] {
	color: var(--kleur-groen-donker);
}

.cs-header .cs-nav .cs-advieslink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	min-height: 48px;
	margin-top: 12px;
	color: var(--kleur-groen-donker);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.cs-header .cs-nav .cs-advieslink:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cs-header .cs-nav .cs-advieslink svg {
	flex: none;
}

/* ==========================================================================
   ≥ 561px: ondertitel onder de merknaam
   ========================================================================== */
@media (min-width: 561px) {
	.cs-header .cs-merk-sub {
		display: block;
	}
}

/* Vagheggi-lijnen in twee kolommen zodra er ruimte is. */
@media (min-width: 600px) {
	.cs-header .cs-mega-lijst--kolommen {
		display: block;
		columns: 2;
		column-gap: 20px;
	}
}

/* ==========================================================================
   ≥ 821px: zoekveld in de hoofdrij, acties met tekst
   ========================================================================== */
@media (min-width: 821px) {
	.cs-header .cs-header-rij {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "merk zoek acties";
		column-gap: 28px;
		min-height: 76px;
	}

	.cs-header .cs-merk-naam {
		font-size: 26px;
	}

	.cs-header .cs-merk img.cs-logo {
		height: 44px;
	}

	.cs-header .cs-zoek {
		justify-self: center;
		max-width: 620px;
		margin: 0;
	}

	.cs-header .cs-zoek .cs-zoek-veld {
		height: 46px;
	}

	.cs-header .cs-acties {
		gap: 6px;
	}

	.cs-header .cs-acties .cs-actie,
	.cs-header .cs-acties .cs-actie:hover,
	.cs-header .cs-acties .cs-actie:focus {
		min-width: 64px;
		min-height: 48px;
		padding: 4px 8px;
	}

	.cs-header .cs-acties .cs-actie-tekst {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		clip-path: none;
	}

	.cs-header .cs-cart-link .cs-cart-count {
		top: 0;
		right: 10px;
	}
}

/* ==========================================================================
   ≥ 1181px: navigatierij zichtbaar, megamenu als uitklappaneel
   ========================================================================== */
@media (min-width: 1181px) {
	.cs-header .cs-acties .cs-menu-toggle {
		display: none;
	}

	.cs-header .cs-navrij {
		position: relative;
		top: auto;
		max-height: none;
		overflow: visible;
		background: var(--kleur-pagina);
		border-top: 0; /* geen streep tussen logo-rij en navigatie */
		box-shadow: none;
		clip-path: none;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: none;
	}

	.cs-header .cs-nav {
		flex-direction: row;
		align-items: center;
		gap: 4px;
		padding-block: 0;
	}

	.cs-header .cs-mega .cs-mega-knop,
	.cs-header .cs-mega .cs-mega-knop:hover,
	.cs-header .cs-mega .cs-mega-knop:focus {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 40px; /* lager dan de navrij (48px), zodat hij de onderlijn niet raakt */
		height: 40px;
		margin: 0 8px 0 0;
		padding: 0 14px;
		background: var(--kleur-groen);
		border: 0;
		border-radius: 6px;
		box-shadow: none;
		color: var(--kleur-wit);
		font-family: var(--font-tekst);
		font-size: 15px;
		font-weight: 600;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		transition: background-color 0.15s ease-out;
	}

	.cs-header .cs-mega .cs-mega-knop:hover,
	.cs-header .cs-mega .cs-mega-knop[aria-expanded="true"] {
		background: var(--kleur-groen-donker);
	}

	.cs-header .cs-mega .cs-mega-knop:focus-visible {
		outline: 3px solid var(--kleur-groen-donker);
		outline-offset: 2px;
	}

	.cs-header .cs-mega .cs-mega-knop svg {
		transition: transform 0.15s ease-out;
	}

	.cs-header .cs-mega .cs-mega-knop[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	.cs-header .cs-mega-paneel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 45;
		max-height: var(--cs-paneel-max, calc(100vh - 200px));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--kleur-wit);
		border-top: 1px solid var(--kleur-lijn);
		clip-path: inset(0 -100vmax -100vmax -100vmax);
		/* Gesloten: echt uit de weergave (display:none), zodat het paneel
		   nooit doorschemert bij herteken of een venster-resize. De fade-in
		   loopt via @starting-style + allow-discrete. */
		display: none;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-4px);
		/* Sluiten gaat direct (geen overgang), zodat een dicht paneel nooit
		   half zichtbaar of klikbaar kan zijn. Alleen openen faadt in. */
		transition: none;
	}

	.cs-header .cs-mega-paneel.is-open {
		display: block;
		box-shadow: 0 0 0 100vmax var(--cs-dim);
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: opacity 0.16s ease-out, transform 0.16s ease-out;
	}

	@starting-style {
		.cs-header .cs-mega-paneel.is-open {
			opacity: 0;
			transform: translateY(-4px);
		}
	}

	.cs-header .cs-mega-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.3fr);
		gap: 32px;
		max-width: var(--cs-header-max-width);
		padding: 28px 20px 32px;
	}

	.cs-header .cs-mega-kop,
	.cs-header .cs-mega-kolom > .cs-mega-kop:first-child {
		margin: 0 0 10px;
	}

	.cs-header .cs-mega-lijst + .cs-mega-kop {
		margin-top: 22px;
	}

	.cs-header .cs-mega-lijst a {
		min-height: 36px;
	}

	.cs-header .cs-mega-promo {
		grid-column: auto;
		grid-template-columns: minmax(0, 1fr) 120px;
		align-self: start;
		margin-top: 0;
		padding: 22px;
	}

	.cs-header .cs-mega-promo:hover {
		transform: translateY(-2px);
	}

	.cs-header .cs-mega-promo-titel {
		margin-bottom: 6px;
		font-size: 19px;
	}

	.cs-header .cs-nav-menu {
		flex-direction: row;
		align-items: center;
		gap: 2px;
		margin: 0;
		border-top: 0;
	}

	.cs-header .cs-nav-menu > li {
		border-bottom: 0;
	}

	.cs-header .cs-nav-menu > li.cs-menu-item-winkel {
		display: block;
	}

	.cs-header .cs-nav-menu > li.cs-menu-item-secundair {
		display: none;
	}

	.cs-header .cs-nav-menu > li > a {
		min-height: 48px;
		padding: 0 12px;
		border-radius: 6px;
		font-size: 15px;
		white-space: nowrap;
	}

	.cs-header .cs-nav-menu > li > a[aria-current="page"] {
		box-shadow: inset 0 -3px 0 var(--kleur-groen);
		border-radius: 0;
	}

	.cs-header .cs-nav .cs-advieslink {
		align-self: center;
		min-height: 48px;
		margin: 0 0 0 auto;
		color: var(--kleur-groen);
		font-size: 14px;
		white-space: nowrap;
	}

	.cs-header .cs-nav .cs-advieslink:hover {
		color: var(--kleur-groen-donker);
	}
}

/* Grote aanraakschermen (bijv. tablet liggend ≥ 1181px): ook in het paneel
   44px tikdoelen. */
@media (min-width: 1181px) and (pointer: coarse) {
	.cs-header .cs-mega-lijst a {
		min-height: 44px;
	}
}

/* ==========================================================================
   Afrekenpagina (body.cs-header-checkout, zie header.php): alleen merk,
   "Veilig afrekenen" en winkelwagen. Geldt niet voor de winkelwagenpagina.
   ========================================================================== */
body.cs-header-checkout .cs-header .cs-header-rij {
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-template-areas: "merk label acties";
}

.cs-header .cs-checkout-label {
	grid-area: label;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--kleur-zacht);
	font-size: 14px;
	font-weight: 600;
}

.cs-header .cs-checkout-label svg {
	color: var(--kleur-groen);
}

@media (max-width: 420px) {
	.cs-header .cs-checkout-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* ==========================================================================
   Minder beweging
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.cs-header .cs-navrij,
	.cs-header .cs-mega-paneel,
	.cs-header .cs-mega-promo,
	.cs-header .cs-mega .cs-mega-knop svg,
	.cs-header .cs-acties .cs-actie,
	.cs-header .cs-zoek .cs-zoek-knop {
		transition: none !important;
	}

	.cs-header .cs-navrij,
	.cs-header .cs-mega-paneel,
	.cs-header .cs-mega-promo:hover {
		transform: none !important;
	}
}