/* =========================================================
   DreamGlow-stijl navigatie — dreamglow-nav.css
   Kleuren en type aanpassen? Wijzig alleen de tokens hieronder.
   ========================================================= */

:root {
	/* Kleuren volgen het DreamGlow-brandsysteem (dreamglow-brandsysteem.md);
	   de typografie blijft van dit pakket. */
	--dg-ink: #111111;          /* kop-zwart */
	/* LET OP: eigen wijziging. Terugval = de pakketwaarde, zodat dit blad
	   losstaand blijft werken; met het thema erbij volgen ze de
	   merktokens uit style.css sectie 1. Zonder die koppeling bleven
	   header, footer en minicart op de oude hex staan terwijl de rest van
	   de site meebewoog. */
	--dg-ink-soft: var(--ink-soft, #696969);  /* zachte tekst */
	--dg-paper: var(--surface, #FFF5E8);      /* header-achtergrond → crème */
	--dg-sand: #F7ECDB;         /* zacht zandgoud (USP-balk, panelen) */
	--dg-line: var(--line, #E5E5E5);          /* haarlijnen */
	--dg-gold: #A03C3C;         /* merkaccent, extra donker: kleurt ook 11px-menulabels op zand */
	--dg-font-display: "Marcellus", "Times New Roman", serif;
	--dg-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--dg-header-z: 900;
}

/* ---------- Basis ---------- */

.dg-header {
	position: sticky;
	top: 0;
	z-index: var(--dg-header-z);
	background: var(--dg-paper);
	color: var(--dg-ink);
	font-family: var(--dg-font-sans);
	font-weight: 400;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

.dg-header *,
.dg-header *::before,
.dg-header *::after {
	box-sizing: border-box;
}

.dg-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* LET OP: eigen wijziging, opnieuw toepassen na een update van dit
   pakket (zie PAKKETWIJZIGINGEN.md, sectie "nav").

   :where() houdt deze twee resets op (0,1,0) in plaats van (0,1,1).
   Op (0,1,1) verslaan ze elke component met één klasse, en dan moet
   elke knop of link in de header zijn eigen selector met een
   elementdeel opplussen om zijn kleur terug te winnen — wat op zijn
   beurt regels elders in het thema verslaat die niets met kleur te
   maken hebben (zo kwam het gewichtsplafond op de megatitels om).
   Op (0,1,0) wint een enkele klasse gewoon, en is die hele
   escalatieketen niet meer nodig. */
.dg-header :where(a) {
	color: inherit;
	text-decoration: none;
}

.dg-header :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.dg-header .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px; /* geen-schaal: randoverlap van het sr-only-patroon, geen ritmemaat */
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%); /* gelijkgetrokken met het patroon in style.css */
	white-space: nowrap;
	border: 0;
}

/* De focusring volgt de kleur van de rest van de site, niet die van dit
   pakket. --dg-gold (#A03C3C) bestaat hier omdat 11px-menulabels op zand
   extra donker moeten zijn; als focuskleur leverde het een tweede rood
   op naast de --moss (#B64444) die style.css overal elders gebruikt.
   Eén site, één ring. De fallback houdt het pakket zelfstandig. */
.dg-header :focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--dg-gold));
	outline-offset: 2px;
}

.dg-icon {
	width: 22px;
	height: 22px;
	display: block;
}

/* ---------- Rij 1: USP links · logo midden · service rechts ---------- */

/*
 * Maten en gutter komen uit tokens, met de oude pakketwaarde als fallback.
 *
 * Eerder stonden hier harde getallen (46px hoog, een eigen clamp voor de
 * zijmarge) terwijl het thema dezelfde twee dingen nog eens regelde. Beide
 * pakketwaarden waren daardoor dood: gelijke specificiteit, en het thema-
 * blad wordt later afgedrukt. Wie hier een getal aanpaste zag niets
 * gebeuren. Nu leest het pakket het token en houdt de fallback hem
 * zelfstandig bruikbaar zonder thema.
 */
.dg-usp {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--dg-space-5, 24px);
	height: var(--dg-usp-hoogte, 46px);
	padding-block: 0;
	padding-inline: var(--dg-gutter, clamp(var(--dg-space-4, 16px), 4vw, var(--dg-space-7, 48px))); /* geen-schaal: horizontale gutter volgt de vensterbreedte, zie taak 13 */
	background: var(--dg-paper);
	font-size: 0.75rem; /* 12px bij een root van 16px; rem zodat de balk de lettergrootte-instelling van de bezoeker volgt */
	letter-spacing: 0.04em;
	color: var(--dg-ink-soft);
}

.dg-usp__track {
	position: relative;
	height: 100%;
	min-width: 0;
}

/*
 * Bewust een block en geen flex.
 *
 * Dit was een flexcontainer met align-items/justify-content voor de
 * uitlijning. Maar text-overflow geldt alleen voor block containers: de
 * ellipsis hieronder werd genegeerd, en een boodschap die niet paste werd
 * midden in een letter afgekapt in plaats van met een beletselteken. Dat
 * treft juist de lange gevallen — een vertaling, of een hoger vrij-
 * verzendbedrag in "Gratis bezorging vanaf %s".
 *
 * De regel staat nu verticaal in het midden doordat de lijnhoogte gelijk
 * is aan de balkhoogte; de boodschap is per definitie één regel
 * (white-space: nowrap).
 */
.dg-usp__msg {
	position: absolute;
	inset: 0;
	/*
	 * De doos hugt de tekst in plaats van de hele rasterkolom te vullen.
	 *
	 * Met inset: 0 was dit vak zo breed als kolom 1 van het raster — op
	 * 1440px zo'n 562px, terwijl de boodschap er 157 van vult. Zolang de
	 * boodschap inert was viel dat niet op, maar zodra .is-active de
	 * kliks teruggeeft (hieronder) wordt die hele lege strook een link:
	 * 400px balk waar de cursor omslaat, de onderstreping aangaat en een
	 * dwaalklik je naar de bestemming stuurt, honderden pixels van de
	 * tekst vandaan.
	 *
	 * Met een breedte is de doos over-bepaald (links, rechts én breedte
	 * staan vast); rechts wordt dan genegeerd en de doos begint links.
	 * max-width houdt de ellipsis hierboven werkend: bij een te lange
	 * boodschap groeit de doos tot de kolombreedte en kapt daar af.
	 */
	width: fit-content;
	max-width: 100%;
	display: block;
	line-height: var(--dg-usp-hoogte, 46px);
	margin: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dg-usp__msg.is-active {
	opacity: 1;
	/*
	 * De kliks moeten mee terug.
	 *
	 * pointer-events: none hierboven houdt de onzichtbare boodschappen uit
	 * de weg, maar werd nooit opgeheven voor de zichtbare. Zodra er een
	 * dreamglow_nav_usp_link is ingesteld staat hier een echte <a>, en die
	 * was daardoor dood voor muis en touch: geen cursorwissel, geen
	 * onderstreping, en de klik ging er dwars doorheen. Alleen Tab + Enter
	 * werkte nog. Zelfde none/auto-paar als .dg-overlay verderop.
	 */
	pointer-events: auto;
}

/* Als de boodschap ergens heen linkt: onderstrepen bij aanwijzen of
   focussen, zoals elke andere tekstlink op de site. */
a.dg-usp__msg:hover,
a.dg-usp__msg:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dg-logo--top {
	justify-self: center;
	font-size: 18px;
}

.dg-utility {
	justify-self: end;
}

.dg-utility__list {
	display: flex;
	gap: var(--dg-space-5);
	white-space: nowrap;
}

/* LET OP: eigen wijziging, opnieuw toepassen na een update van dit
   pakket. :where() houdt deze regel op (0,1,0). Op (0,2,1) versloeg hij
   de wrapper .dg-lang__link uit het thema, waardoor de taalopties hun
   padding, hoverband en actieve kleur kwijtraakten. */
.dg-utility__list :where(a) {
	/* De balk is 32px; zonder padding was dit een klikdoel van 15px hoog.
	   Met 8px per kant komt het op ~31px — boven het WCAG-minimum van 24,
	   zonder de balk zelf te laten groeien. */
	display: inline-block;
	padding-block: var(--dg-space-2);
	transition: color 0.15s ease;
}

.dg-utility__list a:hover {
	color: var(--dg-ink);
}

/* Sticky: alleen een subtiele schaduw, de header blijft compleet */
.dg-header {
	border-bottom: 1px solid var(--dg-line);
}

.dg-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(26, 25, 25, 0.25);
}

/* ---------- Rij 2: categorieën links · iconen rechts ---------- */

.dg-main {
	display: flex;
	align-items: stretch;
	gap: clamp(var(--dg-space-3), 2vw, var(--dg-space-5)); /* geen-schaal: volgt de vensterbreedte, zie taak 13 */
	height: var(--dg-nav-hoogte, 60px); /* zelfde token-met-fallback als .dg-usp hierboven */
	padding-block: 0;
	padding-inline: var(--dg-gutter, clamp(var(--dg-space-4, 16px), 4vw, var(--dg-space-7, 48px))); /* geen-schaal: horizontale gutter volgt de vensterbreedte, zie taak 13 */
}

.dg-logo {
	font-family: var(--dg-font-display);
	font-size: 24px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-left: 0.32em; /* geen-schaal: compenseert letter-spacing rechts, schaalt met de letter mee */
}

/* Het beeldlogo staat in de USP-balk en mag hem niet uit elkaar drukken.
   Afgeleid van de balkhoogte in plaats van een los getal: 0,5rem lucht
   samen, dus 4px boven en 4px onder bij een balk van 2rem. Stond hier als
   harde 34px die het thema toch overschreef.

   Bewust --dg-usp-hoogte-basis en niet --dg-usp-hoogte: die tweede gaat
   bij het scrollen naar nul, en deze regel geldt óók voor .dg-logo--bar
   in de navbalk op mobiel. Met de vouwende maat zou dat logo bij het
   scrollen op max-height: 0 uitkomen en verdwijnen. */
.dg-logo--img img {
	display: block;
	max-height: calc(var(--dg-usp-hoogte-basis, 46px) - 0.5rem);
	width: auto;
}

/* Logo in de navbalk: alleen mobiel */
.dg-logo--bar {
	display: none;
}

/* Op desktop gedraagt de lade zich als onzichtbare wrapper,
   zodat .dg-nav direct in de flexrij van .dg-main meedoet */
.dg-drawer {
	display: contents;
}

/* .dg-search en alle .dg-search__* (het zoekformulier van dit pakket,
   in de mobiele lade als .dg-search--drawer) zijn hier weg. Sectie 24
   van style.css zet .dg-search--drawer en de hele #dg-searchbar op
   display:none — dreamglow-nav.php zegt er zelf bij waarom: het thema
   levert een eigen zoekcomponent (template-parts/header/search.php,
   assets/css/search.css) met combobox-patroon, debounce en een eigen
   REST-endpoint. Deze regels stuurden dus alleen nog onzichtbare
   elementen aan. */

.dg-actions {
	display: flex;
	align-items: center;
	gap: var(--dg-space-2);
	margin-left: auto;
}

.dg-action {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background 0.15s ease;
}

.dg-action:hover {
	background: var(--dg-sand);
}

.dg-cart__count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 var(--dg-space-1);
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--dg-ink);
	color: var(--dg-paper);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
	border-radius: 999px;
}

.dg-cart__count.is-visible {
	display: inline-flex;
}

/* Burger — alleen mobiel zichtbaar */
.dg-burger {
	display: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
}

.dg-burger__lines,
.dg-burger__lines::before,
.dg-burger__lines::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--dg-ink);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.dg-burger__lines {
	position: relative;
}

.dg-burger__lines::before,
.dg-burger__lines::after {
	content: "";
	position: absolute;
	left: 0;
}

.dg-burger__lines::before { top: -6px; }
.dg-burger__lines::after  { top: 6px; }

.dg-burger.is-open .dg-burger__lines { transform: rotate(45deg); }
.dg-burger.is-open .dg-burger__lines::before { transform: rotate(-90deg); top: 0; }
.dg-burger.is-open .dg-burger__lines::after  { opacity: 0; }

/* ---------- Categoriemenu (links uitgelijnd in rij 2) ---------- */

.dg-nav {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: stretch;
}

.dg-menu {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	/* Eén schaalstap strakker (was 16-32px): de items horen als één rij te
	   lezen, niet als losse eilanden.

	   Rendert in dit thema niet: sectie 33f van style.css zet
	   `.dg-main .dg-menu` (0,2,0) met een eigen gemeten clamp en wint
	   dus altijd. Dat is een bewuste override, geen ongeluk — maar wie
	   hier een waarde bijstelt ziet niets gebeuren en moet daar zijn. */
	gap: clamp(var(--dg-space-3), 1.6vw, var(--dg-space-5)); /* geen-schaal: volgt de vensterbreedte, zie taak 13 */
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}

.dg-menu::-webkit-scrollbar {
	display: none;
}

.dg-item {
	position: static; /* essentieel: mega-paneel spant t.o.v. de header */
	display: flex;
}

.dg-item__link {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 var(--dg-space-1);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dg-item__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--dg-gold);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.dg-item:hover > .dg-item__link::after,
.dg-item.is-open > .dg-item__link::after,
.dg-item:focus-within > .dg-item__link::after,
.dg-item.is-current > .dg-item__link::after {
	transform: scaleX(1);
}

/* Submenu-knop: op desktop verborgen (hover + focus-within volstaan) */
.dg-item__toggle {
	display: none;
}

/* De uitklapbalk #dg-searchbar (het vergrootglas-paneel van dit
   pakket) stond hier: .dg-searchbar, .is-open, __inner, __close en
   :hover. style.css zet #dg-searchbar en .dg-search--drawer op
   display:none — zie de aantekening bij .dg-actions hierboven. Een
   element dat nooit zichtbaar wordt, hoeft geen open-transitie of
   hover-status. */

/* ---------- Paginadim achter open mega/zoekbalk ---------- */

/*
 * De dim hoort achter de header, niet ervoor.
 *
 * Deze berekening klopt pas sinds de dim buiten <header> staat.
 *
 * Zolang hij een kind van .dg-header was, telde zijn z-index alleen
 * binnen de stapelcontext die de sticky header opspant — en daar staan
 * het mega-paneel, de menulinks, het logo en de iconen allemaal op auto.
 * De dim schilderde er dus overheen in plaats van erachter. Zie de
 * toelichting bij de markup in dreamglow-nav.php.
 */
.dg-dim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--dg-header-z) - 3);
	background: rgba(26, 25, 25, 0.35);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.dg-dim.is-visible {
	opacity: 1;
}

/* ---------- Mega-paneel: klapt open onder de header ---------- */

.dg-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--dg-paper);
	border-top: 1px solid var(--dg-line);
	box-shadow: 0 30px 40px -30px rgba(26, 25, 25, 0.35);
	clip-path: inset(0 0 100% 0);
	opacity: 0;
	visibility: hidden;
	transition:
		clip-path 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		opacity 0.22s ease,
		visibility 0s linear 0.32s;
}

.dg-item--mega:hover > .dg-mega,
.dg-item--mega.is-open > .dg-mega,
.dg-item--mega:focus-within > .dg-mega {
	clip-path: inset(0 0 0 0);
	opacity: 1;
	visibility: visible;
	transition:
		clip-path 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s,
		opacity 0.22s ease 0.05s,
		visibility 0s;
}

.dg-mega__inner {
	max-width: 1160px;
	margin: 0 auto;
	padding: var(--dg-space-7) var(--dg-space-6) var(--dg-space-7);
	transform: translateY(-10px);
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dg-item--mega:hover > .dg-mega .dg-mega__inner,
.dg-item--mega.is-open > .dg-mega .dg-mega__inner,
.dg-item--mega:focus-within > .dg-mega .dg-mega__inner {
	transform: translateY(0);
}

.dg-mega__cols {
	display: flex;
	/* De ondergrens is in de praktijk onbereikbaar: het mega-paneel toont
	   deze rij pas vanaf 1024px (zie de accordeon-omschakeling
	   verderop), en 5vw is daar al 51,2px, ruim boven zowel de oude (36)
	   als een afgeronde (32) ondergrens. Een platte ondergrens-token zou
	   dus geen afronding zijn maar een onbedoeld veel grotere inkrimping
	   van de kolomruimte dan bij elke andere waarde in dit bestand. */
	gap: clamp(var(--dg-space-6), 5vw, var(--dg-space-8)); /* geen-schaal: volgt de vensterbreedte, zie taak 13 */
}

/*
 * a.-selector en niet de kale klasse.
 *
 * Beide zijn <a>-elementen binnen de header, en het pakket zet daar zelf
 * `.dg-header a { color: inherit }` (0,1,1). Dat verslaat elke
 * enkelklasse-kleurregel, dus de kleuren hieronder kwamen nooit aan: de
 * kop en de links in het mega-paneel erfden gewoon de headerinkt. Met
 * het elementdeel erbij staan ze op gelijke specificiteit en wint deze
 * regel op volgorde.
 */
.dg-mega__title {
	display: inline-block;
	margin-bottom: var(--dg-space-4);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dg-ink);
}

.dg-mega__title:hover {
	color: var(--dg-gold);
}

.dg-mega__item {
	margin-bottom: var(--dg-space-2);
}

.dg-mega__link {
	font-size: 14px;
	color: var(--dg-ink-soft);
	transition: color 0.15s ease;
}

.dg-mega__link:hover {
	color: var(--dg-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Promokaart rechts in het paneel */
.dg-mega__promo {
	margin-left: auto;
	width: 264px;
	flex: none;
}

.dg-mega__promo a {
	display: block;
}

.dg-mega__promo-img,
.dg-mega__promo-ph {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 2px;
	background:
		radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.55), transparent 60%),
		linear-gradient(160deg, #F7ECDB 0%, #F1DDBE 55%, #EAD0A6 100%);
	transition: opacity 0.2s ease;
}

.dg-mega__promo a:hover .dg-mega__promo-img,
.dg-mega__promo a:hover .dg-mega__promo-ph {
	opacity: 0.88;
}

.dg-mega__promo-label {
	display: block;
	margin-top: var(--dg-space-3);
	font-family: var(--dg-font-display);
	font-size: 16px;
	line-height: 1.35;
}

.dg-mega__promo-cta {
	display: block;
	margin-top: var(--dg-space-1);
	font-family: var(--dg-font-sans);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dg-gold);
}

/* ---------- Kruimelpad (onder de header, scrollt mee weg) ---------- */

.dg-crumbs {
	font-family: var(--dg-font-sans);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--dg-ink-soft);
	/* Zelfde vlak als de header erboven: zonder deze achtergrond erfde de
	   balk het paginawit en brak het kruimelpad als lichte strook tussen
	   navbar en inhoud. */
	background: var(--dg-paper);
	/* Deze hele regel wordt overschreven door style.css: padding-inline
	   via --dg-gutter (sectie 23) en padding-block via een vaste 10px
	   (sectie 33c) -- beide gelden overal, zonder media query, en laden
	   ná dit bestand. Ze zijn dus niet dood in de zin dat ze nooit
	   renderen (dat doen ze wél op elke pagina), maar wat híer staat komt
	   nergens meer op het scherm. Buiten scope van deze taak om nu op te
	   ruimen; hier alleen getokeniseerd. */
	padding: var(--dg-space-4) clamp(var(--dg-space-4), 4vw, var(--dg-space-7)) var(--dg-space-1); /* geen-schaal: horizontale component volgt de vensterbreedte, zie taak 13 */
}

.dg-crumbs * {
	box-sizing: border-box;
}

.dg-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dg-space-1) var(--dg-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-crumbs__item {
	display: flex;
	align-items: center;
	gap: var(--dg-space-2);
}

.dg-crumbs__item + .dg-crumbs__item::before {
	content: "\203A"; /* › */
	/* Was #b3a99d: 2,15:1 op de crème header-achtergrond, terwijl een
	   scheidingsteken een grafisch onderdeel is met een norm van 3:1.
	   --dg-ink-soft haalt 4,7:1 en staat al in dit palet. */
	color: var(--dg-ink-soft);
	font-size: 13px;
	line-height: 1;
}

.dg-crumbs__link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.dg-crumbs__link:hover {
	color: var(--dg-gold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dg-crumbs__link:focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--dg-gold));
	outline-offset: 2px;
}

.dg-crumbs__current {
	color: var(--dg-ink);
}

/* ---------- Mini-cart (schuift van rechts in) ---------- */

.dg-minicart {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: var(--dg-header-z);
	display: flex;
	flex-direction: column;
	width: min(92vw, 420px);
	background: var(--dg-paper);
	transform: translateX(102%);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
	box-shadow: -24px 0 48px -32px rgba(26, 25, 25, 0.35);
}

.dg-minicart.is-open {
	transform: translateX(0);
}

/* LET OP: eigen wijziging. height leest nu het token dat het thema op 48px
   zet; de hardgecodeerde 60px hier was de oude navhoogte, waardoor deze
   kop 12px hoger stond dan de rij waarop hij was gemaatvoerd. */
.dg-minicart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	height: var(--dg-nav-hoogte, 60px);
	padding: 0 var(--dg-space-2) 0 var(--dg-space-5);
	border-bottom: 1px solid var(--dg-line);
}

.dg-minicart__title {
	font-family: var(--dg-font-display);
	font-size: 16px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.dg-minicart__count {
	font-family: var(--dg-font-sans);
	font-size: 13px;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--dg-ink-soft);
	margin-left: var(--dg-space-1);
}

.dg-minicart__close {
	width: 44px;
	height: 44px;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
}

/* Gratis-verzending-balk */
.dg-minicart__shipping {
	flex: none;
	padding: var(--dg-space-3) var(--dg-space-5) var(--dg-space-3);
	border-bottom: 1px solid var(--dg-line);
}

.dg-minicart__shipping p {
	margin: 0 0 var(--dg-space-2);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	color: var(--dg-ink-soft);
}

.dg-minicart__shipping.is-complete p {
	color: var(--dg-ink);
}

.dg-minicart__bar {
	display: block;
	height: 3px;
	background: var(--dg-line);
	border-radius: 2px;
	overflow: hidden;
}

.dg-minicart__bar-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--dg-gold);
	/* De vulling komt als scaleX uit dreamglow-nav.php: een transform
	   animeert op de compositor, een width-overgang kost layout per
	   frame. De parent clipt al met overflow:hidden. */
	transform-origin: left;
	transition: transform 0.3s ease;
}

/* Inhoud (WooCommerce mini-cart markup) */
.dg-minicart__body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 var(--dg-space-5) var(--dg-space-5);
}

.dg-minicart .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-minicart .woocommerce-mini-cart-item {
	position: relative;
	padding: var(--dg-space-4) var(--dg-space-6) var(--dg-space-4) var(--dg-space-8);
	min-height: 116px;
	border-bottom: 1px solid var(--dg-line);
}

.dg-minicart .woocommerce-mini-cart-item img {
	position: absolute;
	left: 0;
	top: 16px;
	width: 64px;
	height: 84px;
	object-fit: cover;
	border-radius: 2px;
	background: var(--dg-sand);
}

.dg-minicart .woocommerce-mini-cart-item a:not(.remove) {
	display: block;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dg-ink);
	text-decoration: none;
}

.dg-minicart .woocommerce-mini-cart-item a:not(.remove):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dg-minicart .woocommerce-mini-cart-item .quantity {
	display: block;
	margin-top: var(--dg-space-2);
	font-size: 13px;
	color: var(--dg-ink-soft);
}

.dg-minicart .remove_from_cart_button {
	position: absolute;
	top: 16px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	color: var(--dg-ink-soft);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.dg-minicart .remove_from_cart_button:hover {
	background: var(--dg-sand);
	color: var(--dg-ink);
}

.dg-minicart .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: var(--dg-space-7) var(--dg-space-4);
	text-align: center;
	font-size: 14px;
	color: var(--dg-ink-soft);
}

/* Subtotaal + knoppen */
.dg-minicart .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 var(--dg-space-4);
	padding-top: var(--dg-space-4);
	font-size: 14px;
}

.dg-minicart .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-size: 16px;
	font-weight: 500;
}

.dg-minicart .woocommerce-mini-cart__buttons {
	margin: 0;
}

.dg-minicart .button {
	display: block;
	margin: 0 0 var(--dg-space-2);
	padding: var(--dg-space-4) var(--dg-space-5);
	border: 1px solid var(--dg-ink);
	border-radius: 999px;
	background: transparent;
	color: var(--dg-ink);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.dg-minicart .button:hover {
	background: var(--dg-sand);
}

.dg-minicart .button.checkout {
	background: var(--dg-ink);
	color: var(--dg-paper);
}

.dg-minicart .button.checkout:hover {
	/* Neutrale donkere hover bij de inkt-knop; #33302d was een restant
	   van het oude warme palet. */
	background: #333333;
	border-color: #333333;
}

/* ---------- Lade & overlay ---------- */

.dg-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--dg-header-z) - 2);
	background: rgba(26, 25, 25, 0.4);
	opacity: 0;
	/* Zonder is-visible mag de (nog niet verborgen) overlay geen kliks
	   opslokken: tussen vervagen en hidden=true zit een JS-vangnetvenster,
	   en onder reduced-motion vuurt transitionend helemaal niet. */
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.dg-overlay.is-visible {
	pointer-events: auto;
}

.dg-overlay.is-visible {
	opacity: 1;
}

/* Desktop: lade-elementen gedragen zich als gewone header-onderdelen */
.dg-drawer__head,
.dg-drawer__extras {
	display: none;
}

/* =========================================================
   Mobiel & tablet  (< 1024px)
   ========================================================= */

@media (max-width: 1023px) {

	.dg-burger {
		display: flex;
	}

	/* Geen eigen mobiele hoogte meer: --dg-nav-hoogte geldt op elke
	   breedte. De 56px die hier stond werd door het thema toch
	   overschreven en was dus een dood getal dat alleen verwarring gaf. */
	.dg-main {
		position: relative;
		gap: var(--dg-space-3);
		align-items: center;
	}

	/* Logo: bovenbalk-logo weg, navbalk-logo gecentreerd */
	.dg-logo--top {
		display: none;
	}

	/* max-width erbij: het logo staat absoluut op het midden van de hele
	   rij, terwijl de burger links en de iconen rechts in diezelfde rij
	   staan. Zonder begrenzing liep het er op smalle telefoons overheen.
	   De rij is de gutter plus twee knoppen kwijt; wat overblijft is het
	   logo waard. */
	.dg-logo--bar {
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		max-width: calc(100% - 2 * (var(--dg-raakvlak, 40px) + var(--dg-space-3)));
		overflow: hidden;
		font-size: 18px;
		white-space: nowrap;
	}

	.dg-action--store {
		display: none;
	}

	.dg-utility {
		display: none;
	}

	/* Ook hier geen eigen mobiele hoogte: --dg-usp-hoogte is op elke
	   breedte hetzelfde getal. De 34px die hier stond was dood. */
	.dg-usp {
		grid-template-columns: 1fr;
		font-size: 0.72rem; /* ~11,5px bij een root van 16px */
	}

	/* margin-inline: auto en geen text-align: de doos hugt sinds de
	   klikvlak-fix de tekst, dus text-align heeft niets meer te
	   centreren. Bij een absoluut geplaatste doos met beide inzetten op 0
	   en een vaste breedte verdeelt auto de overgebleven ruimte gelijk —
	   dat centreert het vak zelf, inclusief zijn klik- en hovergebied. */
	.dg-usp__msg {
		margin-inline: auto;
	}

	/* padding-top stond hier ook; die was dood. style.css zet
	   `padding-block` op dezelfde enkele klasse en wordt later
	   afgedrukt, dus de shorthand overschreef hem op elke breedte. */
	.dg-crumbs {
		font-size: 12px;
	}

	/* Lade */
	.dg-drawer {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: var(--dg-header-z);
		width: min(86vw, 380px);
		background: var(--dg-paper);
		transform: translateX(-102%);
		/* visibility houdt de dichte lade uit de tab-volgorde: alleen
		   off-screen schuiven liet tientallen onzichtbare links focusbaar
		   — zelfde patroon als de minicart in style.css. */
		visibility: hidden;
		transition:
			transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
			visibility 0s linear 0.28s;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--dg-space-6);
	}

	.dg-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
		transition:
			transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
			visibility 0s;
	}

	.dg-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: var(--dg-nav-hoogte, 60px);
		padding: 0 var(--dg-space-2) 0 var(--dg-space-5);
		border-bottom: 1px solid var(--dg-line);
	}

	.dg-drawer__title {
		font-family: var(--dg-font-display);
		font-size: 17px;
		letter-spacing: 0.22em;
		text-transform: uppercase;
	}

	.dg-drawer__close {
		width: 44px;
		height: 44px;
		font-size: 26px;
		font-weight: 300;
		line-height: 1;
	}

	/* Menu als verticale lijst */
	.dg-nav {
		display: block;
	}

	.dg-menu {
		display: block;
		padding: var(--dg-space-2) 0 0;
		overflow: visible;
	}

	.dg-item {
		display: block;
		position: relative;
		border-bottom: 1px solid var(--dg-line);
	}

	.dg-item__link {
		display: block;
		padding: var(--dg-space-4) var(--dg-space-7) var(--dg-space-4) var(--dg-space-5);
		font-size: 13px;
		white-space: normal;
	}

	.dg-item__link::after {
		display: none;
	}

	/* Chevron-knop */
	.dg-item__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 51px;
	}

	.dg-item__toggle::before {
		content: "";
		width: 8px;
		height: 8px;
		border-right: 1.5px solid var(--dg-ink);
		border-bottom: 1.5px solid var(--dg-ink);
		transform: rotate(45deg) translateY(-2px);
		transition: transform 0.2s ease;
	}

	.dg-item.is-open > .dg-item__toggle::before {
		transform: rotate(225deg) translateY(-2px);
	}

	/* Mega wordt een accordeon */
	.dg-mega {
		position: static;
		display: none;
		clip-path: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		border-top: 1px solid var(--dg-line);
		box-shadow: none;
		background: var(--dg-sand);
		transition: none;
	}

	.dg-mega__inner,
	.dg-item--mega.is-open > .dg-mega .dg-mega__inner {
		transform: none;
		transition: none;
	}

	.dg-item.is-open > .dg-mega {
		display: block;
	}

	.dg-mega__inner {
		padding: var(--dg-space-2) var(--dg-space-5) var(--dg-space-4);
	}

	.dg-mega__cols {
		display: block;
	}

	.dg-mega__title {
		margin: var(--dg-space-4) 0 var(--dg-space-2);
		font-size: 11px;
		color: var(--dg-gold);
	}

	.dg-mega__item {
		margin: 0;
	}

	.dg-mega__link {
		display: block;
		padding: var(--dg-space-2) 0;
	}

	.dg-mega__promo {
		width: auto;
		margin: var(--dg-space-4) 0 var(--dg-space-1);
	}

	.dg-mega__promo a {
		display: flex;
		align-items: center;
		gap: var(--dg-space-3);
	}

	.dg-mega__promo-img,
	.dg-mega__promo-ph {
		width: 60px;
		aspect-ratio: 3 / 4;
		flex: none;
	}

	.dg-mega__promo-label {
		margin: 0;
		font-size: 15px;
	}

	.dg-drawer__extras {
		display: block;
		margin-top: var(--dg-space-4);
		padding: var(--dg-space-4) var(--dg-space-5) 0;
		border-top: 1px solid var(--dg-line);
	}

	.dg-drawer__links li {
		margin-bottom: var(--dg-space-1);
	}

	/* LET OP: zelfde reden als bij .dg-utility__list hierboven. */
	.dg-drawer__links :where(a) {
		display: block;
		padding: var(--dg-space-2) 0;
		font-size: 13.5px;
		color: var(--dg-ink-soft);
	}
}

/* Scroll-lock terwijl de lade open is */
body.dg-lock {
	overflow: hidden;
}

/* ---------- Footer ---------- */

.dg-footer {
	background: var(--dg-paper);
	color: var(--dg-ink);
	font-family: var(--dg-font-sans);
	font-weight: 400;
	line-height: 1.5;
	margin-top: var(--dg-footer-boven);
}

.dg-footer *,
.dg-footer *::before,
.dg-footer *::after {
	box-sizing: border-box;
}

.dg-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dg-footer a {
	color: inherit;
	text-decoration: none;
}

.dg-footer :focus-visible {
	outline: var(--dg-focus-ring, 2px solid var(--dg-gold));
	outline-offset: 2px;
}

/* Hier stonden .dg-footer__help-regel en de hele nieuwsbriefband
   (.dg-footer__newsletter, -inner, __heading, __intro, __form, __input,
   __submit). De eerste hoorde bij markup die geen enkel bestand meer
   uitstoot; de rest bij een band die het thema toch met display:none
   verborg. Die band staat nu in dreamglow-nav.php achter een poort en
   het themaformulier brengt zijn eigen opmaak mee, dus er valt hier
   niets meer te stijlen. */

/* Linkkolommen + contact */
.dg-footer__main {
	max-width: 1160px;
	margin: 0 auto;
	padding: var(--dg-space-7) var(--dg-space-6) var(--dg-space-6);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dg-space-6) var(--dg-space-7);
}

.dg-footer__title {
	margin: 0 0 var(--dg-space-4);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dg-ink);
}

.dg-footer__list li {
	margin-bottom: var(--dg-space-2);
}

.dg-footer__list a {
	font-size: 14px;
	color: var(--dg-ink-soft);
	transition: color 0.15s ease;
}

.dg-footer__list a:hover {
	color: var(--dg-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Onderbalk */
.dg-footer__bottom {
	border-top: 1px solid var(--dg-line);
	max-width: 1160px;
	margin: 0 auto;
	padding: var(--dg-space-4) var(--dg-space-6) var(--dg-space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dg-space-3) var(--dg-space-5);
	font-size: 12.5px;
	color: var(--dg-ink-soft);
}

.dg-footer__copy {
	margin: 0;
}

.dg-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dg-space-2) var(--dg-space-5);
}

.dg-footer__legal a {
	transition: color 0.15s ease;
}

.dg-footer__legal a:hover {
	color: var(--dg-ink);
}

@media (max-width: 900px) {
	.dg-footer__main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: var(--dg-space-7);
	}
}

@media (max-width: 560px) {
	.dg-footer__main {
		grid-template-columns: 1fr;
		gap: var(--dg-space-6);
	}

	.dg-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

}

/* ---------- Reduced motion ---------- */

/* Geen eigen prefers-reduced-motion-blok meer: style.css sectie 2 zet
   `*, *::before, *::after { animation: none !important; transition: none
   !important }` en dekt alles hier al. De kopieën liepen bovendien uit
   elkaar — sommige zetten `none`, andere 0.01ms — en omdat een gescopede
   selector met !important van de universele wint, vuurde transitionend
   binnen het ene pakket wél en binnen het andere niet. Scripts die op
   dat event wachten gedroegen zich daardoor per pagina anders. */