/*! Cakery Header. Instelbare waarden komen als custom properties binnen op
 *  .chdr, zodat dit bestand statisch blijft. Laadt bewust geen fonts. */

/* The class is in there twice. The Elementor kit sets h1 to h3 and p with a
   class plus an element (.elementor-kit-000 h1), and that beats a single class.
   Without this doubling the kit would decide the colour and the typeface here.
   Your own settings in the widget still come first: Elementor writes those with
   the wrapper included and so more specifically still. */

/* The class is in there twice. A theme rule like ".elementor button" is a class
   plus an element and so beats a single class; which of the two wins would
   otherwise depend on the order the stylesheets load in. */

.chdr,
.chdr *,
.ckmm,
.ckmm * { box-sizing: border-box; }

.chdr a,
.ckmm a { color: inherit; text-decoration: none; }

/* ---------- De balk ---------- */

.chdr {
	--chdr-bg1: #241C13;
	--chdr-bg2: #1A130B;
	--chdr-cream: #F4EEE2;
	--chdr-gold: #C9BE9E;
	--chdr-line: rgba(216, 204, 166, .28);
	--chdr-icn-color: #FFFFFF;
	--chdr-cut: 7px;
	--chdr-bar-cut-h: 8px;
	--chdr-bar-cut-w: 14px;
	--chdr-pad: 18px;
	--chdr-pad-stuck: 10px;
	--chdr-side: 42px;
	--chdr-logo: 72px;
	--chdr-logo-stuck: 50px;
	--chdr-stuck-bg: rgba(26, 19, 11, .92);
	--chdr-blur: 10px;
	--chdr-rule: rgba(201, 190, 158, .18);
	--chdr-ease: cubic-bezier(.2, .7, .3, 1);
	position: relative;
	z-index: 9000;
	width: 100%;
	padding: var(--chdr-pad) 0;
	background: transparent;
	color: var(--chdr-cream);
	font-weight: 300;
	transition: background .45s ease, box-shadow .45s ease, padding .45s ease;
}

/* De admin-balk staat er bovenop; zonder deze offset schuift de header eronder. */
.chdr--sticky {
	position: sticky;
	top: 0;
}

/* Vastgezet, voor een header die los in een pagina staat. De opvuller hieronder
   neemt zijn plek in de flow over. */
.chdr--fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.chdr-space {
	--chdr-pad: 18px;
	--chdr-logo: 72px;
	height: calc(var(--chdr-logo) + 2 * var(--chdr-pad));
}

/* Staat de header in een header-template, dan gaat het vastzetten een niveau
   omhoog, naar de omhulling van dat template. Twee redenen. Sticky kan niet op
   de balk zelf: die blijft binnen zijn eigen container en die is daar precies zo
   hoog als de header. En zou de balk zichzelf vastzetten, dan schoof hij over
   een topbar die erboven staat. Nu reist alles samen mee.

   Welke omhulling het wordt hangt af van het thema: Elementor zet er zelf een
   omheen, Rey nog een. De buitenste van de twee wint vanzelf, want de binnenste
   zit dan binnen een ouder die niet meer meescrolt. */
.elementor-location-header:has(.chdr--fixed),
.rey-siteHeader:has(.chdr--fixed) {
	position: sticky;
	top: 0;
	z-index: 9000;
}

/* Met de banner eronderdoor mag er geen ruimte gereserveerd worden; dan moet het
   vast in plaats van plakkend, want alleen dan staat het uit de flow. */
.elementor-location-header:has(.chdr--fixed.chdr--overlap),
.rey-siteHeader:has(.chdr--fixed.chdr--overlap) {
	position: fixed;
	left: 0;
	right: 0;
}

/* De omhulling reist in zijn geheel mee, dus zou een topbar die erboven staat
   ook blijven staan. Die vouwt daarom weg zodra er gescrold wordt: alleen de
   balk zelf blijft over. JS zet enkel het merkje en de klasse; hier gebeurt de
   rest, zodat er niets opgemeten hoeft te worden. */
[data-chdr-above] {
	overflow: hidden;
	max-height: 12rem;
	transition: max-height .5s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}

.chdr-wrap-stuck [data-chdr-above] {
	max-height: 0;
	opacity: 0;
}

/* Binnen zo'n omhulling positioneert de balk zichzelf niet meer, en is de
   opvuller overbodig: plakkend blijft in de flow staan en houdt zijn plek al. */
.elementor-location-header .chdr--fixed,
.rey-siteHeader .chdr--fixed {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
}

.elementor-location-header .chdr-space,
.rey-siteHeader .chdr-space {
	display: none;
}

/* De admin-balk staat er bovenop; zonder deze offset schuift alles eronder.
   De :has()-varianten staan apart: in een browser die :has() niet kent maakt
   een ongeldige selector de hele lijst ongeldig, en dan zouden de gewone
   gevallen hun offset ook kwijt zijn. */
.admin-bar .chdr--sticky,
.admin-bar .chdr--fixed { top: var(--wp-admin-bar-height, 32px); }

.admin-bar .elementor-location-header:has(.chdr--fixed),
.admin-bar .rey-siteHeader:has(.chdr--fixed) { top: var(--wp-admin-bar-height, 32px); }

@media screen and (max-width: 782px) {

	.admin-bar .chdr--sticky,
	.admin-bar .chdr--fixed { top: var(--wp-admin-bar-height, 46px); }

	.admin-bar .elementor-location-header:has(.chdr--fixed),
	.admin-bar .rey-siteHeader:has(.chdr--fixed) { top: var(--wp-admin-bar-height, 46px); }
}

.chdr.is-stuck {
	padding: var(--chdr-pad-stuck) 0;
	background: var(--chdr-stuck-bg);
	backdrop-filter: blur(var(--chdr-blur));
	-webkit-backdrop-filter: blur(var(--chdr-blur));
	box-shadow: 0 1px 0 var(--chdr-rule);
}

/* Dezelfde schuine onderhoeken als bij de hero, zodat de balk in dezelfde taal
   spreekt als de octagoon van het logo. Bovenaan blijft hij recht: daar sluit
   hij aan op de topbar of op de rand van het scherm.

   De achtergrond verhuist daarvoor naar een laag onder de inhoud. Een clip-path
   op de balk zelf zou namelijk de uitschuivende zoekbalk wegsnijden: die hangt
   op top:100% en zit dus buiten de box van de header. Nu wordt alleen de
   achtergrond gesneden en blijft alles wat eronder uitklapt gewoon staan.

   De haarlijn zit hier inzet in plaats van eronder, want een schaduw buiten de
   rand valt buiten de clip en zou toch niet te zien zijn. */
.chdr--cut {
	isolation: isolate;
}

.chdr--cut::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: transparent;
	transition: background .45s ease;

	/* Alle vier de hoeken: dezelfde achthoek als het logo en de icoonknoppen. */
	clip-path: polygon(
		var(--chdr-bar-cut-w) 0,
		calc(100% - var(--chdr-bar-cut-w)) 0,
		100% var(--chdr-bar-cut-h),
		100% calc(100% - var(--chdr-bar-cut-h)),
		calc(100% - var(--chdr-bar-cut-w)) 100%,
		var(--chdr-bar-cut-w) 100%,
		0 calc(100% - var(--chdr-bar-cut-h)),
		0 var(--chdr-bar-cut-h)
	);
}

/* Alleen onderaan snijden, voor wie de balk bovenaan tegen de schermrand wil
   laten aansluiten. */
.chdr--cut-b::before {
	clip-path: polygon(
		0 0,
		100% 0,
		100% calc(100% - var(--chdr-bar-cut-h)),
		calc(100% - var(--chdr-bar-cut-w)) 100%,
		var(--chdr-bar-cut-w) 100%,
		0 calc(100% - var(--chdr-bar-cut-h))
	);
}

.chdr--cut.is-stuck::before {
	background: var(--chdr-stuck-bg);
	backdrop-filter: blur(var(--chdr-blur));
	-webkit-backdrop-filter: blur(var(--chdr-blur));
	box-shadow: inset 0 -1px 0 var(--chdr-rule);
}

.chdr--cut.chdr--solid::before {
	background: linear-gradient(180deg, var(--chdr-bg1), var(--chdr-bg2));
	box-shadow: inset 0 -1px 0 var(--chdr-rule);
}

/* De balk zelf blijft dan leeg; anders staat er een rechthoek onder de laag met
   de afgesneden hoeken en zie je er niets van terug. */
.chdr--cut.is-stuck,
.chdr--cut.chdr--solid {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
}

/* Staat de zoekbalk open, dan sluit die direct onder de header aan. De hoeken
   zouden daar een driehoekje pagina laten zien tussen twee donkere vlakken;
   alleen de onderkant gaat daarom even recht, de bovenhoeken blijven. */
.chdr--cut:has(.chdr__search.is-on)::before {
	clip-path: polygon(
		var(--chdr-bar-cut-w) 0,
		calc(100% - var(--chdr-bar-cut-w)) 0,
		100% var(--chdr-bar-cut-h),
		100% 100%,
		0 100%,
		0 var(--chdr-bar-cut-h)
	);
}

.chdr--cut-b:has(.chdr__search.is-on)::before {
	clip-path: none;
}

/* De banner onder de header laten doorlopen. De hoogte volgt uit de eigen
   variabelen, zodat dit klopt zonder dat JS iets hoeft op te meten. */
.chdr--overlap:not(.chdr--fixed) {
	margin-bottom: calc(-1 * (var(--chdr-logo) + 2 * var(--chdr-pad)));
}

/* Altijd donker: voor pagina's zonder banner eronder. */
.chdr--solid {
	padding: var(--chdr-pad-stuck) 0;
	background: linear-gradient(180deg, var(--chdr-bg1), var(--chdr-bg2));
	box-shadow: 0 1px 0 var(--chdr-rule);
}

/* Drie kolommen, niet flexbox met space-between: alleen zo staat het logo
   altijd exact in het midden, hoeveel menu-items er ook links of rechts staan. */
.chdr__in {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	width: 100%;
	padding: 0 var(--chdr-side);
}

.chdr--boxed .chdr__in {
	max-width: var(--chdr-max, 1440px);
	margin: 0 auto;
}

/* Eén cel voor de linkerkant. Zie de widget: dit houdt de grid op drie kinderen,
   ongeacht of de navigatie of de hamburger zichtbaar is. */
.chdr__side {
	display: flex;
	align-items: center;
	gap: 30px;
	min-width: 0;
}

.chdr__nav {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chdr__nav--right { justify-content: flex-end; }

/* Alleen zichtbaar in de editor, als er nog geen menu gekozen is. */
.chdr__nav--hint span {
	display: block;
	padding: 4px 10px;
	border: 1px dashed var(--chdr-line);
	color: var(--chdr-cream);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .7;
}

.chdr__nav li { position: relative; }

.chdr__nav a {
	position: relative;
	display: block;
	padding-bottom: 4px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.chdr__nav a::after {
	content: "";
	position: absolute;
	right: 100%;
	bottom: 0;
	left: 0;
	height: var(--chdr-underline, 1px);
	background: var(--chdr-underline-color, var(--chdr-gold));
	transition: right .4s var(--chdr-ease);
}

.chdr__nav a:hover::after,
.chdr__nav a:focus-visible::after { right: 0; }

/* Een thema zet op elke link zijn eigen kleur, en op hover een tweede. In een
   donkere balk is die tweede meestal het donkere accent van de site, en dan valt
   het menu-item weg tegen zijn eigen achtergrond zodra je erover gaat. Deze
   regels leggen beide vast op de tekstkleur van de header zelf. De wortelklasse
   staat erbij zodat een themaregel met een class plus een element het niet wint. */
.chdr .chdr__nav a,
.chdr .chdr__acc,
.chdr .chdr__all,
.chdr .chdr__hit {
	color: inherit;
	text-decoration: none;
}

.chdr .chdr__nav a:hover,
.chdr .chdr__nav a:focus-visible,
.chdr .chdr__acc:hover,
.chdr .chdr__acc:focus-visible,
.chdr .chdr__all:hover,
.chdr .chdr__all:focus-visible,
.chdr .chdr__hit:hover,
.chdr .chdr__hit:focus-visible {
	color: var(--chdr-link-hover, var(--chdr-gold));
}

.chdr__logo.chdr__logo {
	display: block;
	justify-self: center;
}

/* De class staat er bewust twee keer. Elementor zet .elementor img op
   height:auto, met precies dezelfde specificiteit als een enkele class; wie
   dan wint hangt af van de volgorde waarin de stylesheets binnenkomen. In
   een header-template komt de onze eerder en verloor het logo zijn maat. */
.chdr__logo.chdr__logo img {
	display: block;
	width: auto;
	height: var(--chdr-logo);
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .35));
	transition: height .45s ease;
}

.chdr.is-stuck .chdr__logo img { height: var(--chdr-logo-stuck); }

.chdr__tools {
	display: flex;
	align-items: center;
	justify-self: end;
	gap: 8px;
}

.chdr__icn.chdr__icn {
	--c: var(--chdr-cut);
	position: relative;
	isolation: isolate;
	display: grid;
	flex: none;
	width: var(--chdr-icn, 40px);
	height: var(--chdr-icn, 40px);
	place-items: center;
	padding: 0;
	background: transparent;
	color: var(--chdr-icn-color);
	border: none;
	cursor: pointer;
}
/* De achthoek zit op een laag eronder, niet op de knop zelf. Een clip-path op de
   knop sneed namelijk het telvakje weg: dat hangt met opzet een stukje buiten de
   knop, en alles buiten de achthoek verdwijnt. */
.chdr__icn.chdr__icn::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--chdr-line);
	transition: background .35s ease, box-shadow .35s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__icn.chdr__icn:hover::before {
	background: var(--chdr-icn-hover, rgba(244, 238, 226, .12));
	box-shadow: inset 0 0 0 1px var(--chdr-gold);
}

.chdr__icn svg { width: 17px; height: 17px; }

/* Het gouden telvakje. Rey vervangt bij een AJAX-toevoeging alleen het binnenste
   spantje, dus de opmaak van dit vakje blijft staan. */
.chdr__n {
	--c: 4px;
	position: absolute;
	top: -6px;
	right: -6px;
	display: grid;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	place-items: center;
	background: var(--chdr-count-bg, var(--chdr-gold));
	color: var(--chdr-count-ink, #231C13);
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* Het cijfer komt van WooCommerce en wordt bij een AJAX-toevoeging vervangen;
   de opmaak moet dus ook op dat binnenste spantje staan. */
.chdr__n .__cart-count {
	display: block;
	color: inherit;
	font: inherit;
}

.chdr__n.is-empty { display: none; }

.chdr__acc.chdr__acc {
	margin-left: 6px;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.chdr__btn {
	--c: var(--chdr-cut);
	margin-left: 6px;
	padding: 12px 20px;
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__btn--fill {
	background: linear-gradient(135deg, #D8CCA6 0%, #B8AC8A 52%, #CDBF97 100%);
	color: #1B1409;
}

.chdr__btn--line { box-shadow: inset 0 0 0 1px var(--chdr-line); }

/* Even sterk als .chdr__icn hierboven zou betekenen dat de volgorde in dit
   bestand beslist. Met de balk erbij staat het vast. */
.chdr .chdr__burger { display: none; }

.chdr :focus-visible {
	outline: 2px solid var(--chdr-gold);
	outline-offset: 2px;
}

/* ---------- Zoeken ---------- */

.chdr__search {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: 0;
	overflow: hidden;
	background: rgba(26, 19, 11, .96);
	backdrop-filter: blur(var(--chdr-blur));
	-webkit-backdrop-filter: blur(var(--chdr-blur));
	box-shadow: 0 1px 0 var(--chdr-rule);
	transition: max-height .45s var(--chdr-ease);
}

.chdr__search.is-on { max-height: 70vh; }

.chdr__searchin {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px var(--chdr-side);
}

.chdr__search input[type="search"] {
	--c: var(--chdr-cut);
	flex: 1;
	padding: 14px 18px;
	background: transparent;
	color: var(--chdr-cream);
	border: none;
	box-shadow: inset 0 0 0 1px var(--chdr-line);
	font-family: inherit;
	font-size: 14px;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__search input::placeholder { color: rgba(244, 238, 226, .35); }

.chdr__search input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--chdr-gold);
}

.chdr__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* De resultaten, live terwijl je typt. */
.chdr__res {
	max-height: calc(70vh - 90px);
	overflow-y: auto;
	padding: 0 var(--chdr-side) 18px;
}

.chdr__res:empty { display: none; }

.chdr__hit.chdr__hit {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 0;
	border-top: 1px solid rgba(216, 204, 166, .12);
}

.chdr__hit.chdr__hit img {
	--c: 5px;
	flex: none;
	width: 48px;
	height: 48px;
	object-fit: cover;
	background: rgba(244, 238, 226, .08);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.chdr__hit b {
	display: block;
	font-size: 13.5px;
	font-weight: 400;
}

.chdr__hit span {
	display: block;
	margin-top: 2px;
	color: var(--chdr-gold);
	font-size: 11.5px;
}

.chdr__hit:hover b { color: var(--chdr-gold); }
.chdr__msg.chdr__msg {
	padding: 14px 0 4px;
	color: rgba(244, 238, 226, .55);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.chdr__all.chdr__all {
	display: inline-block;
	margin-top: 12px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(201, 190, 158, .5);
	color: var(--chdr-gold);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/* ---------- Mobiel menu ---------- */

.ckmm {
	--ckmm-cream: #F4EEE2;
	--ckmm-soft: rgba(244, 238, 226, .55);
	--ckmm-gold: #C9BE9E;
	--ckmm-gold-deep: #A9A083;
	--ckmm-line: rgba(216, 204, 166, .18);
	--ckmm-ease: cubic-bezier(.2, .7, .3, 1);
	position: fixed;
	inset: 0;
	z-index: 9500;
	display: flex;
	flex-direction: column;
	visibility: hidden;
	overflow-y: auto;
	padding: 20px 22px 26px;
	background: linear-gradient(180deg, #241C13, #160F08);
	color: var(--ckmm-cream);
	font-weight: 300;
	transform: translateX(100%);
	transition: transform .55s var(--ckmm-ease), visibility .55s;
}

.ckmm.is-open {
	visibility: visible;
	transform: translateX(0);
}

.ckmm__glow {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 340px;
	background: radial-gradient(600px 300px at 50% 120%, rgba(201, 190, 158, .2), rgba(201, 190, 158, 0) 70%);
	pointer-events: none;
}

.ckmm__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* De class staat er twee keer. Elementor zet .elementor img op height:auto, en
   dat is met een class plus een element sterker dan een enkele class; het logo
   kwam daardoor op ware grootte binnen. */
.ckmm__logo.ckmm__logo {
	display: block;
	width: auto;
	height: var(--ckmm-logo, 52px);
}

.ckmm__close.ckmm__close {
	--c: 7px;
	display: grid;
	flex: none;
	width: 44px;
	height: 44px;
	place-items: center;
	background: rgba(244, 238, 226, .08);
	color: var(--ckmm-cream);
	border: none;
	box-shadow: inset 0 0 0 1px var(--ckmm-line);
	cursor: pointer;
	transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.ckmm__close.ckmm__close:hover {
	background: rgba(244, 238, 226, .18);
	box-shadow: inset 0 0 0 1px var(--ckmm-gold);
	transform: rotate(90deg);
}

.ckmm__close svg { width: 17px; height: 17px; }

.ckmm__nav {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.ckmm__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: .62rem 0;
	border-bottom: 1px solid rgba(216, 204, 166, .12);
	font-family: "Myorie", Georgia, serif;
	font-size: 1.85rem;
	font-weight: 400;
	line-height: 1.25;
	opacity: 0;
	transform: translateX(20px);
	transition: color .3s ease;
}

.ckmm__nav a svg {
	flex: none;
	width: 15px;
	height: 15px;
	color: var(--ckmm-gold-deep);
	transition: transform .35s var(--ckmm-ease), color .3s ease;
}

.ckmm__nav a:hover { color: var(--ckmm-gold); }

.ckmm__nav a:hover svg {
	color: var(--ckmm-gold);
	transform: translate(3px, -3px);
}

.ckmm.is-open .ckmm__nav a { animation: ckmmIn .55s var(--ckmm-ease) forwards; }

@keyframes ckmmIn { to { opacity: 1; transform: translateX(0); } }

.ckmm.is-open .ckmm__nav li:nth-child(1) a { animation-delay: .10s; }
.ckmm.is-open .ckmm__nav li:nth-child(2) a { animation-delay: .15s; }
.ckmm.is-open .ckmm__nav li:nth-child(3) a { animation-delay: .20s; }
.ckmm.is-open .ckmm__nav li:nth-child(4) a { animation-delay: .25s; }
.ckmm.is-open .ckmm__nav li:nth-child(5) a { animation-delay: .30s; }
.ckmm.is-open .ckmm__nav li:nth-child(6) a { animation-delay: .35s; }
.ckmm.is-open .ckmm__nav li:nth-child(7) a { animation-delay: .40s; }
.ckmm.is-open .ckmm__nav li:nth-child(8) a { animation-delay: .45s; }

.ckmm__foot {
	position: relative;
	margin-top: auto;
	padding-top: 28px;
}

.ckmm__cta.ckmm__cta {
	--c: 7px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	padding: 17px 22px;
	background: linear-gradient(135deg, #D8CCA6 0%, #B8AC8A 52%, #CDBF97 100%);
	color: #1B1409;
	font-size: 11.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	transition: transform .35s var(--ckmm-ease);
	clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
		calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* Rustig van goud naar bruin, met lichtbeige tekst. Geen glansveeg en geen
   sprongetje: die trekken de aandacht naar het effect in plaats van naar de
   knop. Kleur en tekst staan in variabelen, dus je kunt er in Elementor
   overheen. */
.ckmm__cta.ckmm__cta:hover,
.ckmm__cta.ckmm__cta:focus-visible {
	background-color: var(--chdr-btn-hover-bg, #3A2C1F);
	background-image: none;
	color: var(--chdr-btn-hover-ink, #F5F0E3);
}
.ckmm__cta:active { transform: scale(.985); }
.ckmm__cta span,
.ckmm__cta svg { position: relative; z-index: 1; }
.ckmm__cta svg { width: 15px; height: 15px; }

.ckmm__meta {
	margin: 16px 0 0;
	color: var(--ckmm-soft);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-align: center;
	text-transform: uppercase;
}

.ckmm :focus-visible {
	outline: 2px solid var(--ckmm-gold);
	outline-offset: 2px;
}
/* Overslaan naar de inhoud, vóór de header in de DOM. */
.chdr-skip.chdr-skip {
	position: absolute;
	left: -9999px;
	z-index: 9999;
	padding: 12px 18px;
	background: #241C13;
	color: #F4EEE2;
}

.chdr-skip:focus {
	left: 12px;
	top: 12px;
}

/* ---------- Omslagpunt naar het mobiele menu ----------
   Hieronder verdwijnen de menu's en verschijnt de hamburger. Een mediaquery kan
   geen custom property lezen, dus staan de keuzes hier als vaste stappen; in de
   widget kies je welke klasse de balk meekrijgt. */

@media (max-width: 768px) {

	.chdr--bp768 .chdr__nav,
	.chdr--bp768 .chdr__acc,
	.chdr--bp768 .chdr__btn { display: none; }

	.chdr--bp768 .chdr__burger { display: grid; }
}

@media (max-width: 900px) {

	.chdr--bp900 .chdr__nav,
	.chdr--bp900 .chdr__acc,
	.chdr--bp900 .chdr__btn { display: none; }

	.chdr--bp900 .chdr__burger { display: grid; }
}

@media (max-width: 1080px) {

	.chdr--bp1080 .chdr__nav,
	.chdr--bp1080 .chdr__acc,
	.chdr--bp1080 .chdr__btn { display: none; }

	.chdr--bp1080 .chdr__burger { display: grid; }
}

@media (max-width: 1240px) {

	.chdr--bp1240 .chdr__nav,
	.chdr--bp1240 .chdr__acc,
	.chdr--bp1240 .chdr__btn { display: none; }

	.chdr--bp1240 .chdr__burger { display: grid; }
}

@media (max-width: 1440px) {

	.chdr--bp1440 .chdr__nav,
	.chdr--bp1440 .chdr__acc,
	.chdr--bp1440 .chdr__btn { display: none; }

	.chdr--bp1440 .chdr__burger { display: grid; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {

	.chdr,
	.chdr-space {
		--chdr-side: 20px;
		--chdr-logo: 56px;
		--chdr-logo-stuck: 44px;
	}

	.chdr {
		--chdr-bar-cut-h: 6px;
		--chdr-bar-cut-w: 10px;
	}

	/* Bewust ook hier 1fr auto 1fr. Met "auto 1fr auto" zijn de buitenkolommen
	   zo breed als hun inhoud, en die verschilt: links een hamburger van 40px,
	   rechts twee icoonknoppen. Het logo stond daardoor 24px naast het midden.
	   Met twee gelijke fr-kolommen staat het altijd precies in het midden.

	   De ruimte tussen de kolommen gaat wel omlaag, zodat de icoonknoppen op een
	   smal scherm binnen hun helft passen en niets de balans verstoort. */
	.chdr__in { gap: 12px; }
}

@media (max-width: 380px) {
	.ckmm__nav a { font-size: 1.6rem; }
	.ckmm__logo.ckmm__logo { height: calc(var(--ckmm-logo, 52px) * .85); }
}

@media (prefers-reduced-motion: reduce) {
	.chdr,
	.chdr *,
	.ckmm,
	.ckmm * {
		transition: none !important;
		animation: none !important;
	}

	.ckmm__nav a {
		opacity: 1;
		transform: none;
	}

	/* Het wegvouwen van de topbar staat buiten .chdr, dus dat valt niet onder de
	   regel hierboven. */
	[data-chdr-above] {
		transition: none;
	}
}

/* Zelfde verhaal in het uitgeschoven menu. */
.ckmm .ckmm__nav a,
.ckmm .ckmm__cta {
	color: inherit;
	text-decoration: none;
}

.ckmm .ckmm__nav a:hover,
.ckmm .ckmm__nav a:focus-visible {
	color: var(--chdr-link-hover, var(--chdr-gold));
}