/*
 * De header plakt door de browser en schuift na een paar tellen weg (live
 * sinds 18 oktober 2026, zie header-wegschuiven.php). Neemt de
 * plaats in van header-wegschuiven.css; de stukken over het logo, de pil en
 * de petrol band zijn daaruit overgenomen.
 *
 * Aart: "de sticky header mag een paar seconden blijven plakken en daarna
 * wegschuiven", en "gebeurt weleens dat je scrollt en dat header niet gelijk
 * sticky is". Dat laatste kwam van de scripts: Blocksy zet de header vast
 * vanuit sticky.js, dat pas na zijn hoofdscript wordt opgehaald, en wisselt
 * hem bij elke scroll van gewoon naar fixed. Loopt de telefoon achter, of is
 * dat script er nog niet, dan scrolt de header eerst weg.
 *
 * De baan staat nu in de CSS, vanaf het eerste beeld. De doos van Blocksy
 * ([data-sticky]) blijft in de pagina staan en loopt met een lege ::after
 * door tot ver voorbij het eind van de pagina; de rij plakt erin met
 * position: sticky. #main-container knipt de baan af (overflow: clip), dus de
 * pagina wordt er niet langer van. Een negatieve marge onderaan houdt de
 * doos in de opmaak even hoog als de rij.
 *
 * Twee standen, met elk een eigen top:
 * - los (data-sticky="shrink"): de grote rij met het logo van 85px. Hij
 *   plakt alleen als Blocksy hem nog niet vastgezet heeft, en dan met zijn
 *   midden waar het midden van de vaste pil komt;
 * - vast (yes:shrink): de pil. Blocksy zet hem om zodra de balk weg is. Het
 *   midden van de pil komt dan op het midden van de losse rij (de marge
 *   bovenaan), en hij loopt met de pagina mee tot hij op 8px van boven staat
 *   (op desktop 12px). Zo verspringt er niets: niet bij het omzetten, en ook
 *   niet als het omzetten een paar beelden te laat komt.
 *
 * Weg en terug: header-plakt.js maakt de baan korter (--nrd-baan). Het
 * einde neemt de rij dan mee omhoog, even snel als er gescrold wordt, en bij
 * omhoog scrollen schuift hij er even snel weer in. Helemaal weg parkeert het
 * script de doos (.nrd-kop-geparkeerd).
 */

@supports (overflow: clip) {
	/* Blocksy zet de vaste doos op position: fixed (main.min.css, dezelfde
	   selector-zwaarte; dit bestand laadt erna). */
	[data-sticky="yes:shrink"] {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}

	/* De -4px uit header.css schoof de vaste doos omhoog; in de baan zet de
	   marge van de rij hem op zijn plek. */
	[data-header*="type-1"] [data-sticky="yes:shrink"] {
		margin-top: 0;
	}

	/* --nrd-baan zet header-plakt.js alleen als de header gaat of komt. */
	[data-sticky*="shrink"] {
		margin-bottom: calc(-1 * var(--nrd-baan, 100000px));
		pointer-events: none;
	}

	[data-sticky*="shrink"]::after {
		content: "";
		display: block;
		height: var(--nrd-baan, 100000px);
	}

	/* Houdt de marges binnen de plek die Blocksy openhoudt. Anders zakte de
	   negatieve marge van de doos door de plek heen, zolang Blocksy er nog
	   geen hoogte op gezet heeft, en trok hij de pagina omhoog. */
	.ct-sticky-container {
		display: flow-root;
	}

	/* Blocksy zet de rij op position: var(--position, relative), met #header
	   ervoor (main.min.css); de variabele stuurt hem zonder zwaardere
	   selector. */
	[data-sticky*="shrink"] > [data-row] {
		--position: sticky;
		top: calc(var(--admin-bar, 0px) - 6px);
		pointer-events: auto;
	}

	[data-sticky="yes:shrink"] > [data-row] {
		top: calc(var(--admin-bar, 0px) + 8px);
		/* De losse rij is 100px hoog en de pil 72: 14px lager staat het
		   midden gelijk. Met een doorzichtige header komen daar de 12px van
		   de pil bij (Extra CSS); die zakken in de losse stand door de rij. */
		margin-top: 26px;
	}

	[data-device]:not([data-transparent]) [data-sticky="yes:shrink"] > [data-row] {
		margin-top: 14px;
	}

	/* Het mini-winkelmandvel zet de pagina op slot met overflow: hidden op
	   html (winkelmand.css). De overflow van body geldt dan voor body zelf, en
	   met hidden werd body een scrollvak: de rij plakte daarin en viel uit
	   beeld. Met clip blijft het venster het scrollvak. Voor het venster
	   zelf telt clip als hidden, dus verder verandert er niets. */
	body {
		overflow-x: clip;
	}

	@media (min-width: 1000px) {
		[data-sticky*="shrink"] > [data-row] {
			top: calc(var(--admin-bar, 0px) - 2.5px);
		}

		[data-sticky="yes:shrink"] > [data-row] {
			top: calc(var(--admin-bar, 0px) + 12px);
			margin-top: 26.5px;
		}

		[data-device]:not([data-transparent]) [data-sticky="yes:shrink"] > [data-row] {
			margin-top: 14.5px;
		}
	}

	/* Geparkeerd: helemaal weg, en dan weer vast zoals Blocksy hem zet (zie
	   header-plakt.js). Dezelfde waarden als zijn regel voor yes, maar 12px
	   hoger: de marge van de pil komt er in een vaste doos bij, en zonder
	   die 12px stak de schaduw onder de pil op mobiel 4px het beeld in. De
	   plek in de pagina houdt Blocksy open met een hoogte op
	   .ct-sticky-container. */
	[data-sticky="yes:shrink"].nrd-kop-geparkeerd {
		position: fixed;
		top: calc(var(--admin-bar, 0px) + var(--theme-frame-size, 0px) - 12px);
		left: var(--theme-frame-size, 0px);
		right: calc(var(--theme-frame-size, 0px) + var(--scrollbar-width, 0px));
		margin-bottom: 0;
	}

	[data-sticky="yes:shrink"].nrd-kop-geparkeerd::after {
		display: none;
	}

	/* De rij staat dan boven het beeld: zijn eigen hoogte, plus zijn afstand
	   tot de bovenrand en de schaduw eronder (24px, op desktop 32px). */
	[data-device] [data-sticky="yes:shrink"].nrd-kop-geparkeerd > [data-row] {
		--position: relative;
		margin-top: 0;
		transform: translateY(calc(-100% - 32px - var(--admin-bar, 0px)));
	}

	@media (min-width: 1000px) {
		[data-device] [data-sticky="yes:shrink"].nrd-kop-geparkeerd > [data-row] {
			transform: translateY(calc(-100% - 44px - var(--admin-bar, 0px)));
		}
	}
}

/* Het moment van vastzetten en loskomen (.nrd-kop-wissel, 700 ms, alleen
   als je eroverheen scrolt). Het logo krimpt of groeit, in plaats van dat
   het in één keer omspringt.

   Het logo springt bij het vastzetten van 85 naar 59px (gemeten: Blocksy
   laat het hier niet met het scrollen meekrimpen, --logo-sticky-shrink is
   niet gezet). Het heeft dus meteen zijn nieuwe maat en schaalt daar met
   transform naartoe, zodat de opmaak van de header niet bij elk beeld
   opnieuw berekend wordt. 1.44 en 0.694 zijn 85/59 en 59/85 (Customizer,
   Header, Logo); op een smal desktopscherm is het losse logo kleiner en
   staan er andere verhoudingen in --nrd-logo-los en --nrd-logo-vast (zie
   onderaan). De oorsprong ligt links: het logo staat links op de lijn
   van de inhoud, en vanuit het midden schoof het 12px opzij.

   Bij het vastzetten veert het logo (live sinds 11 oktober 2026). Het moet
   in een oogwenk van 85 naar 59px, schiet daardoor door naar 52px en veert
   terug naar zijn maat. De tijdfuncties staan per stuk in de keyframes,
   vandaar linear hier. Het loskomen bovenaan is een gewone groei. */
.nrd-kop-wissel [data-sticky="yes:shrink"] .site-logo-container {
	transform-origin: left center;
	animation: nrd-kop-logo-veert 0.56s linear both;
}

.nrd-kop-wissel [data-sticky="shrink"] .site-logo-container {
	transform-origin: left center;
	animation: nrd-kop-logo-groeit 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* De pil vormt zich bij het vastzetten met een overgang, en de iconen
   kleuren mee (live sinds 11 oktober 2026). header.css zet die overgangen
   voor de header uit; hier even aan. Niet met .nrd-kop-wissel: die klasse
   komt een stijlberekening na het omzetten, en een transition begint
   alleen als hij al gold toen de waarde veranderde. .nrd-kop-klaar staat al
   op de header zolang hij los staat (zie header-plakt.js), en zet de
   transition op de vaste stand: zo geldt hij op het moment van omzetten.
   Alleen bij het vastzetten. Terug naar boven verdwijnt de pil in één
   keer, zoals header.css het wil: een vervagend vlak boven de hero stond
   slordig. */
#header.nrd-kop-klaar [data-sticky="yes:shrink"] {
	--theme-icon-transition: fill 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Het zoekicoon krijgt zijn overgang in header.css op het icoon zelf (de
   draai van een toggle); hier de kleur erbij. */
#header.nrd-kop-klaar [data-sticky="yes:shrink"] [class*=ct-toggle] svg {
	--theme-icon-transition: fill 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s ease-out;
}

/* Het mandje onder 1000px ook: winkelmand.css zet daar een eigen transition
   op het icoon (de wissel naar het kruisje), zonder de kleur. */
#header.nrd-kop-klaar [data-sticky="yes:shrink"] [data-id="cart"] > .ct-cart-item .ct-icon-container > * {
	transition: opacity 0.2s ease, fill 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nrd-kop-klaar [data-sticky="yes:shrink"] [data-row*="middle"] > div {
	transition: background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), -webkit-backdrop-filter 0.35s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* De petrol band met de golf, waar de header niet doorzichtig is. Blocksy
   kleurt de losse rij zelf petrol en header-menu.css zet de golf eronder,
   maar die rij plakt (zie boven). Zette Blocksy hem een beeld te laat vast,
   bij een snelle scroll of een drukke telefoon, dan kwam de petrol band even
   mee naar beneden. Aart, 17 oktober 2026: "dat moet echt nooit". De band
   staat daarom in beide standen op de plek die Blocksy in de pagina
   openhoudt, en scrolt met de pagina weg; de rij zelf is los doorzichtig.
   Dezelfde selector als header-menu.css, dit bestand laadt erna. Kleur,
   hoogte en golf zijn die van de rij, dus bovenaan verandert er niets. */
[data-header*="type-1"] [data-device]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"] > div {
	background-color: transparent;
}

[data-header*="type-1"] [data-device]:not([data-transparent]) [data-sticky]:not([data-sticky*="yes"]) [data-row*="middle"]::after {
	content: none;
}

@media (max-width: 999.98px) {
	/* De band zelf (zie hierboven). Vastgezet scrolt hij onder de pil weg. */
	[data-header*="type-1"] [data-device="mobile"]:not([data-transparent]) .ct-sticky-container {
		position: relative;
		background: var(--nrd-kop-band, var(--theme-palette-color-10, #31545b));
	}

	[data-header*="type-1"] [data-device="mobile"]:not([data-transparent]) .ct-sticky-container::after,
	.nrd-kop-band::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 1px);
		height: 17px;
		pointer-events: none;
		background: var(--nrd-kop-band, var(--theme-palette-color-10, #31545b));
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	/* De band onder het vel (live sinds 11 oktober 2026). De band
	   hierboven hoort bij #header, en #header ligt boven het mint vel van het
	   mandje en van het menu. Net vastgezet steekt hij nog onder de pil uit, en
	   dan zat de eerste regel van het vel erachter (tot 25 px). Zolang een vel
	   open is, tekent de vaste header zijn band daarom niet. Een gelijke band buiten
	   de header (.nrd-kop-band, die header-plakt.js op dezelfde plek legt)
	   neemt het over, onder het vel: bij de tik verandert er niets, en het
	   vel schuift over de band heen. Zonder die tweede band, als het script
	   niet draait, gebeurt er niets. De klassen van het mandje staan in
	   winkelmand.css van het child-thema, .active van het menu zet Blocksy.

	   De regels kijken naar klassen op <html>: nrd-kop-band-er (de tweede
	   band ligt er) en nrd-kop-vast (de header staat vast en is niet
	   doorzichtig) zet header-plakt.js, nrd-menu-open zet mobiel-menu.js
	   zolang #offcanvas .active heeft. Met body voor een :has() rekende de
	   browser na elke wijziging in de pagina de stijl opnieuw uit (zie
	   zuinige-start.php). Bovenaan, los, blijft de band van de header staan:
	   daar ligt de hele rij met de band boven het vel, zoals altijd. */
	.nrd-kop-vast:is(.nrd-mand-open, .nrd-mand-gaat, .nrd-menu-open) #header {
		--nrd-kop-band: transparent;
	}

	/* Alleen waar de header zijn band heeft: vastgezet, en niet doorzichtig. */
	.nrd-kop-vast:is(.nrd-mand-open, .nrd-mand-gaat, .nrd-menu-open) [data-header*="type-1"] > .nrd-kop-band {
		visibility: visible;
	}
}

/* De tweede band, buiten de header (zie "De band onder het vel" hierboven).
   Op elke breedte uit de opmaak en onzichtbaar; alleen onder 1000 px gaat hij
   aan. Maat en plek zet het script. */
.nrd-kop-band {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 50;
	visibility: hidden;
	pointer-events: none;
	background: var(--theme-palette-color-10, #31545b);
}

/* Een omzetting die te laat komt (sinds 17 oktober 2026, live sinds 18
   oktober). Aart: "Als je direct begint te scrollen op bijv rise shine zit er
   even geen achtergrond achter. Daarna verspringt hij ook naar de blurry
   versie". Het omzetten naar de pil doet een script (header-plakt-vroeg.js,
   later Blocksy). Is de telefoon nog bezig met het laden van de pagina, dan
   komt dat tot ruim een seconde te laat (gemeten met de processor vier keer
   trager, op desktop ook). De losse rij plakt dan al, de band scrolt eronder
   weg, en het grote logo en de witte iconen staan zonder achtergrond boven
   de pagina. Daarna staat de pil er in één keer.

   De browser tekent de vaste stand daarom zelf na, met het scrollen mee: een
   pil achter de losse rij (::before), het logo op zijn vaste maat en de
   iconen en menulinks donker. Het zijn animaties op de plek van de plek in
   beeld (view-timeline), alleen met opacity, transform en filter. Die lopen
   in Chrome buiten de hoofdthread, dus ook als er nog geen script kan
   draaien. Ze beginnen 20px nadat de plek de bovenrand voorbij is, als de
   band onder de pil vandaan begint te scrollen, en zijn na 40px klaar. Komt
   het omzetten op tijd, dan zie je hier niets van. Komt het later, dan staat
   de vaste stand er al en zet header-plakt.js hem om zonder overgang (zie
   omgezet()). Maten en kleuren zijn die van de vaste pil: header-menu.css
   en de Customizer. Browsers zonder animation-timeline houden het oude
   gedrag. */
@supports (animation-timeline: view()) {
	.ct-sticky-container {
		view-timeline: --nrd-plek block;
		view-timeline-inset: var(--admin-bar, 0px) 0px;
	}

	[data-sticky="shrink"] > [data-row]::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		margin-inline: auto;
		box-sizing: border-box;
		pointer-events: none;
		/* Tot de browser de plek heeft gemeten, geldt de animatie nog niet:
		   zonder deze 0 stond de pil dan even over de band. */
		opacity: 0;
		animation: nrd-kop-pil-komt linear both;
		animation-timeline: --nrd-plek;
		animation-range: exit 20px exit 40px;
	}

	/* Op het plaatje en niet op .site-logo-container: daar staan de
	   animaties van het omzetten (zie .nrd-kop-wissel). */
	[data-sticky="shrink"] .site-logo-container img {
		transform-origin: left center;
		animation: nrd-kop-logo-krimpt linear both;
		animation-timeline: --nrd-plek;
		animation-range: exit 20px exit 40px;
	}

	[data-sticky="shrink"] :is([data-id="search"], [data-id="cart"], [data-id="account"]) svg {
		animation: nrd-kop-icoon-donker linear both;
		animation-timeline: --nrd-plek;
		animation-range: exit 20px exit 40px;
	}

	[data-sticky="shrink"] [data-id="menu"] > ul > li > a {
		animation: nrd-kop-tekst-donker linear both;
		animation-timeline: --nrd-plek;
		animation-range: exit 20px exit 40px;
	}

	/* De losse rij plakt op -6px en de pil staat op 8px: 14px lager. */
	@media (max-width: 999.98px) {
		[data-sticky="shrink"] > [data-row]::before {
			top: 14px;
			width: calc(100% - 16px);
			height: 72px;
			border: 1px solid rgba(255, 255, 255, 0.6);
			border-radius: 14px;
			background-color: color-mix(in srgb, var(--theme-palette-color-7, #eef5f2) 62%, transparent);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
			-webkit-backdrop-filter: blur(14px);
			backdrop-filter: blur(14px);
		}
	}

	/* Op desktop -2.5 en 12px: 14,5px lager, en zo breed als de inhoud. */
	@media (min-width: 1000px) {
		[data-sticky="shrink"] > [data-row]::before {
			top: 14.5px;
			width: var(--theme-container-width);
			max-width: var(--theme-normal-container-max-width);
			height: 71px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.57);
			border-radius: 12px;
			background-color: rgba(255, 255, 255, 0.31);
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
			-webkit-backdrop-filter: blur(8px);
			backdrop-filter: blur(8px);
		}
	}
}

@keyframes nrd-kop-pil-komt {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes nrd-kop-logo-krimpt {
	to {
		transform: scale(var(--nrd-logo-vast, 0.694));
	}
}

/* Wit (en het mint van het accounticoon) naar het donker van de pil,
   rgb(18, 23, 35): 0.09 van wit is even licht. */
@keyframes nrd-kop-icoon-donker {
	to {
		filter: brightness(0.09);
	}
}

/* De menulinks zijn voor 86% dekkend: zwart komt daardoor op het donker van
   de pil uit. */
@keyframes nrd-kop-tekst-donker {
	to {
		filter: brightness(0);
	}
}

/* De desktopheader (live sinds 11 oktober 2026). */
@media (min-width: 1000px) {
	/* De vaste header bleef bij header-wegschuiven.css 12px marge op de plek
	   houden: Blocksy haalde de doos uit de opmaak. In de baan blijft de doos
	   in de opmaak staan, dus de plek verschuift niet. */
	[data-device="desktop"] .ct-sticky-container {
		position: relative;
	}

	/* De petrol band van rand tot rand met de golf eronder (header-menu.css,
	   live sinds 15 oktober 2026), op de plek in de pagina: zie "De petrol
	   band met de golf" hierboven. Vastgezet scrolt hij onder de pil weg; de
	   vaste header zelf blijft de pil met blur. */
	[data-header*="type-1"] [data-device="desktop"]:not([data-transparent]) .ct-sticky-container::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		pointer-events: none;
		background: var(--theme-palette-color-10, #31545b);
	}

	[data-header*="type-1"] [data-device="desktop"]:not([data-transparent]) .ct-sticky-container::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: calc(100% - 1px);
		height: 24px;
		pointer-events: none;
		background: var(--theme-palette-color-10, #31545b);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1000 V52 C840,76 680,74 500,46 C330,20 160,18 0,40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	/* De menulinks zijn bovenaan wit en in de vaste pil donker: die kleuren
	   mee, net als de iconen. */
	#header.nrd-kop-klaar [data-device="desktop"] [data-sticky="yes:shrink"] {
		--theme-transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}
}

/* Het losse logo is onder 1200px kleiner (header-menu.css: 72 en 64px), het
   vaste blijft 59px. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
	[data-device="desktop"] .site-logo-container {
		--nrd-logo-los: 1.22;
		--nrd-logo-vast: 0.819;
	}
}

@media (min-width: 1000px) and (max-width: 1099.98px) {
	[data-device="desktop"] .site-logo-container {
		--nrd-logo-los: 1.085;
		--nrd-logo-vast: 0.922;
	}
}

@keyframes nrd-kop-logo-groeit {
	from {
		transform: scale(var(--nrd-logo-vast, 0.694));
	}

	to {
		transform: none;
	}
}

/* Snel omlaag en uitlopend in het diepste punt (0.88 is 52px), dan twee
   rustige halve slagen: iets voorbij de maat (1.025 is 60,5px) en terug. In
   een keerpunt staat het logo stil, dus elk stuk eindigt en begint vlak.
   De oorsprong blijft de linkerrand, net als bij het krimpen: het logo
   staat op de lijn van de inhoud. Eerst veerde het om zijn midden; dan
   stond het in het diepste punt 3,5px van die lijn af (11 oktober 2026). */
@keyframes nrd-kop-logo-veert {
	0% {
		transform: scale(var(--nrd-logo-los, 1.44));
		animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1);
	}

	30% {
		transform: scale(0.88);
		animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	}

	66% {
		transform: scale(1.025);
		animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
	}

	100% {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nrd-kop-wissel [data-sticky*="shrink"] .site-logo-container {
		animation: none;
	}

	.nrd-kop-klaar [data-sticky="yes:shrink"] [data-row*="middle"] > div {
		transition: none;
	}

	#header.nrd-kop-klaar [data-sticky="yes:shrink"],
	#header.nrd-kop-klaar [data-device="desktop"] [data-sticky="yes:shrink"] {
		--theme-icon-transition: none;
		--theme-transition: none;
	}

	#header.nrd-kop-klaar [data-sticky="yes:shrink"] [class*=ct-toggle] svg {
		--theme-icon-transition: transform 0.15s ease-out;
	}

	#header.nrd-kop-klaar [data-sticky="yes:shrink"] [data-id="cart"] > .ct-cart-item .ct-icon-container > * {
		transition: opacity 0.2s ease;
	}
}