/*
 * Het kruimelpad: rol klein, ink-soft; de huidige pagina in ink. Onder 640
 * px alleen de terug-link, met het raakvlak uit het ontwerpsysteem.
 *
 * Mobile-first, met alleen (width > N) ("Breekpunten"): de basis is de
 * terug-link, vanaf 640 px staat de lijst er. Op 639 en 640 gedraagt het zich
 * zoals de eerste versie met (width <= 639px); KruimelpadTest toetst beide
 * breedtes.
 */
.dg-kruimelpad {
	font-size: var(--wp--preset--font-size--s);
	line-height: var(--wp--custom--leading--s);
	color: var(--wp--preset--color--ink-soft);
}

.dg-kruimelpad__lijst {
	display: none;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Eerst zonder alt-tekst: Safari vóór 17.4 en Firefox vóór 128 kennen
 * content met "/" niet, en laten die regel dan vallen. Wie hem kent,
 * neemt de tweede, en schermlezers lezen het teken niet voor.
 */
.dg-kruimelpad__item + .dg-kruimelpad__item::before {
	content: "›";
	content: "›" / "";
	margin-inline-end: var(--wp--preset--spacing--8);
}

.dg-kruimelpad a {
	color: var(--wp--preset--color--ink-soft);
}

.dg-kruimelpad [aria-current="page"] {
	color: var(--wp--preset--color--ink);
}

.dg-kruimelpad__terug {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	min-block-size: var(--dg-raakvlak, var(--wp--custom--raakvlak));
}

@media (width > 639px) {
	.dg-kruimelpad__lijst {
		display: flex;
	}

	.dg-kruimelpad__terug {
		display: none;
	}
}

/*
 * De band op de productpagina (variant 2 van de eigenaar, 23-10-2026: de maten
 * en de vorm van Rituals, alles wit). Alleen met het attribuut band, dat
 * alleen templates/single-product.html zet: op categorie, zoeken, pagina en
 * FAQ blijft het kruimelpad zoals hierboven (KruimelpadOngewijzigdTest).
 *
 * De nav is de band: 48 hoog plus de haarlijn, samen 49, met de inhoud
 * verticaal gecentreerd op de lijn van de container. De haarlijn loopt over
 * de volle breedte: een border-image met een uitloop naar links en rechts zo
 * breed als de grootste container. Wat buiten de rand van een element
 * getekend wordt, is inktoverloop en scrolt niet (geen zijwaartse scroll op
 * 320), en de groep dg-productkop laat de zijkanten door (clip-path in
 * inc/modules/product/blokstijlen.css). Rendert het blok niets (minder dan
 * twee kruimels), dan is er geen band en geen lijn.
 *
 * De focusring van de terug-link ligt binnen de link (outline-offset naar
 * binnen, zoals bij zoeken en de fotorij): de header ligt boven de band, en de
 * clip-path van de groep knipt boven en onder. Een ring van 2 + 2 px buiten
 * een terug-link van 44 (aanraken) in een band van 48 liep er 2 px overheen.
 * De links van de lijst (bureaublad) zijn laag genoeg en houden de ring van
 * de site.
 */
.dg-kruimelpad--band {
	display: flex;
	align-items: center;
	box-sizing: content-box;
	min-block-size: var(--wp--preset--spacing--48);
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	border-image: linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) 0 0 100% 0 / 0 0 var(--wp--custom--lijn--dun) 0 / 0 var(--wp--custom--container--xxl);
	letter-spacing: var(--wp--custom--spatie--licht);
}

/* Onder 640 staat alleen de terug-link. Zonder ouder met een adres is er
   geen terug-link, en dan ook geen lege band met een kale lijn. */
.dg-kruimelpad--band:not(:has(> .dg-kruimelpad__terug)) {
	display: none;
}

.dg-kruimelpad--band a {
	text-decoration: none;
}

.dg-kruimelpad--band .dg-kruimelpad__terug:focus-visible {
	outline-offset: calc(-1 * var(--wp--custom--lijn--dik));
}

@media (hover: hover) {
	.dg-kruimelpad--band a:hover {
		text-decoration: underline;
	}
}

.dg-kruimelpad--band [aria-current="page"] {
	color: var(--wp--preset--color--kop);
}

/* Telefoon: een pijl en de naam van het niveau erboven, 16 px in kop. */
.dg-kruimelpad--band .dg-kruimelpad__terug {
	gap: var(--wp--preset--spacing--8);
	font-size: var(--wp--preset--font-size--m);
	line-height: var(--wp--custom--leading--m);
	color: var(--wp--preset--color--kop);
}

.dg-kruimelpad--band .dg-kruimelpad__terug .dg-icoon {
	flex: none;
	inline-size: var(--wp--custom--kruimelpad--pijl);
	block-size: var(--wp--custom--kruimelpad--pijl);
}

/* Bureaublad: het huis als eerste kruimel, de tekens ertussen op één lijn. */
.dg-kruimelpad--band .dg-kruimelpad__lijst,
.dg-kruimelpad--band .dg-kruimelpad__item {
	align-items: center;
}

.dg-kruimelpad--band .dg-kruimelpad__item {
	display: flex;
}

.dg-kruimelpad__huis {
	display: inline-flex;
}

.dg-kruimelpad__huis .dg-icoon {
	inline-size: var(--wp--preset--spacing--16);
	block-size: var(--wp--preset--spacing--16);
}

@media (width > 639px) {
	.dg-kruimelpad--band:not(:has(> .dg-kruimelpad__terug)) {
		display: flex;
	}
}