/**
 * Echt Bärig — basisstijlen.
 *
 * Opbouw: tokens, reset, typografie, layout, header/navigatie, componenten, footer,
 * hulpklassen. Mobile-first: elke @media-regel is een min-width, dus de mobiele
 * weergave is de basis en niet een correctie op desktop.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Kleur — afgeleid van het logo en de sfeerillustraties van echt-bärig. */
	--eb-brown-900: #2a1410;
	--eb-brown-800: #3d1f16;
	--eb-brown-700: #4e2814;
	--eb-brown-600: #603018;
	--eb-brown-500: #784818;
	--eb-brown-400: #8f6238;
	--eb-brown-300: #b08d63;
	--eb-brown-200: #d9c4ac;
	--eb-brown-100: #f0e4d6;

	--eb-amber-700: #b36a00;
	--eb-amber-600: #d86000;
	--eb-amber-500: #f0a830;
	--eb-amber-400: #faab3e;
	--eb-amber-300: #ffc060;
	--eb-amber-200: #ffd79a;
	--eb-amber-100: #fff0d6;

	--eb-white: #fff;
	--eb-cream: #fdf9f3;
	--eb-grey-200: #e7e1d9;
	--eb-grey-500: #7a736b;
	--eb-ink: var(--eb-brown-900);

	--eb-success: #2e7d4f;
	--eb-warning: var(--eb-amber-700);
	--eb-error: #b3261e;
	--eb-sale: #b3261e;

	/* Semantisch. Amber is altijd een vlak met donkere tekst erop, nooit een
	   tekstkleur op wit: wit op amber-500 haalt maar 1,9:1 contrast. */
	--eb-bg: var(--eb-white);
	--eb-bg-alt: var(--eb-cream);
	--eb-bg-warm: var(--eb-amber-100);
	--eb-text: var(--eb-ink);
	--eb-text-muted: #6b5a4e;
	--eb-border: var(--eb-grey-200);
	--eb-border-strong: var(--eb-brown-200);
	--eb-action: var(--eb-brown-600);
	--eb-action-hover: var(--eb-brown-700);
	--eb-accent: var(--eb-amber-500);
	--eb-focus: var(--eb-amber-600);

	/* Ruimte */
	--eb-space-1: 0.25rem;
	--eb-space-2: 0.5rem;
	--eb-space-3: 0.75rem;
	--eb-space-4: 1rem;
	--eb-space-5: 1.5rem;
	--eb-space-6: 2rem;
	--eb-space-7: 3rem;
	--eb-space-8: 4rem;
	--eb-space-9: 6rem;

	/* Typografie */
	--eb-font-body: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--eb-font-heading: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

	--eb-step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.89rem);
	--eb-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
	--eb-step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.42rem);
	--eb-step-2: clamp(1.44rem, 1.32rem + 0.6vw, 1.8rem);
	--eb-step-3: clamp(1.73rem, 1.54rem + 0.95vw, 2.28rem);
	--eb-step-4: clamp(2.07rem, 1.78rem + 1.45vw, 2.89rem);

	/* Vorm */
	--eb-radius-sm: 6px;
	--eb-radius-md: 12px;
	--eb-radius-lg: 20px;
	--eb-radius-full: 999px;

	/* Schaduw met bruine ondertoon in plaats van neutraal zwart; dat houdt de
	   warme uitstraling vast. */
	--eb-shadow-1: 0 1px 2px rgb(42 20 16 / 6%), 0 1px 3px rgb(42 20 16 / 10%);
	--eb-shadow-2: 0 4px 12px rgb(42 20 16 / 10%);
	--eb-shadow-3: 0 12px 32px rgb(42 20 16 / 14%);

	/* Layout */
	--eb-container: 1280px;
	--eb-gutter: clamp(1rem, 4vw, 2rem);
	--eb-header-height: 3.5rem;

	/*
	 * Afstand die sticky elementen onder de header moeten aanhouden.
	 *
	 * Bewust een tweede variabele en niet --eb-header-height zelf: die staat óók als
	 * `min-height` op de headerbalk, dus hem overschrijven met de gemeten hoogte zou de header
	 * laten groeien en dat weer laten meten — een lus. JavaScript zet hier de werkelijke hoogte
	 * in (zie initHeaderOffset in site.js); deze waarde is de terugval als dat niet draait.
	 *
	 * Nodig omdat de header op desktop uit twee rijen bestaat en daardoor veel hoger is dan de
	 * vaste waarde. Het filterpaneel plakte daardoor te hoog en verdween achter het menu.
	 */
	--eb-header-offset: var(--eb-header-height);

	/* Beweging */
	--eb-transition: 180ms cubic-bezier(0.2, 0, 0.2, 1);

	/* Minimale tikdoelgrootte, WCAG 2.2 target size. */
	--eb-tap: 44px;
}

@media (min-width: 768px) {
	:root {
		--eb-header-height: 4.5rem;
	}
}

/* Fonts. Alleen actief als de bestanden aanwezig zijn; anders valt de stack
   hierboven terug op systeemfonts. Variabele fonts, dus één bestand per familie. */
@font-face {
	font-family: Inter;
	src: url("../fonts/inter-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: Fraunces;
	src: url("../fonts/fraunces-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--eb-header-height) + var(--eb-space-4));
}

body {
	margin: 0;
	background: var(--eb-bg);
	color: var(--eb-text);
	font-family: var(--eb-font-body);
	font-size: var(--eb-step-0);
	line-height: 1.6;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;

	/*
	 * Hier stond `overflow-x: clip` als vangnet tegen horizontale overflow. Dat is
	 * eruit, om twee redenen.
	 *
	 * Ten eerste is het niet nodig: gemeten op 375px is er nul overschot, want de
	 * onderdelen die zouden kunnen uitsteken (categoriechips, filterbalk, tabellen,
	 * exemplaarkeuze) scrollen allemaal binnen hun eigen container.
	 *
	 * Ten tweede was het schadelijk. `overflow-x: clip` met `overflow-y: visible`
	 * computeert naar `hidden` op beide assen, en op `body` propageert dat naar de
	 * viewport. Op iOS Safari knipt dat `position: fixed`-elementen af en laat het
	 * scrollen haperen — het uitschuifmenu kwam daardoor niet in beeld.
	 *
	 * Steekt er ooit toch iets uit: los het op bij het element dat uitsteekt, niet
	 * met een clip op de body.
	 */
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * Basis voor de eigen iconen uit `echt_baerig_icon()`.
 *
 * De paden zijn getekend om gelijnd te worden, niet gevuld, en ze hebben geen eigen maat. Zonder
 * regel valt zo'n SVG terug op zwarte vulling en rekt hij door de reset hierboven
 * (`max-width: 100%; height: auto`) op tot de volle breedte van zijn container.
 *
 * Dat gebeurde op de homepage: het blok "Kommt vorbei in Coburg" gebruikt `.eb-product__services`,
 * maar die opmaak staat in shop.css en die wordt op de voorpagina niet geladen. Drie iconen werden
 * daardoor zwarte vlakken van een halve kolom breed.
 *
 * Deze regel staat bewust laag in specificiteit: elke contextregel (`.eb-icon-btn svg`,
 * `.eb-topbar__item svg`, `.eb-product__services svg`, …) is specifieker en wint. Dit is het
 * vangnet, niet de norm.
 */
.eb-icon {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   3. Typografie
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--eb-space-3);
	font-family: var(--eb-font-heading);
	font-weight: 600;
	line-height: 1.15;
	color: var(--eb-brown-700);
	text-wrap: balance;
}

h1 { font-size: var(--eb-step-4); }
h2 { font-size: var(--eb-step-3); }
h3 { font-size: var(--eb-step-2); }
h4 { font-size: var(--eb-step-1); }
h5, h6 { font-size: var(--eb-step-0); }

p {
	margin: 0 0 var(--eb-space-4);
	text-wrap: pretty;
}

/* Leeslengte begrenzen. 68 tekens is comfortabel; zonder dit worden regels op
   desktop te lang om vlot te lezen.

   De productrasters zijn hiervan uitgezonderd. Die zijn ook een `ul` en stonden dus mee onder
   deze regel — op de Schnäppchenecke werd het raster daardoor in 68 tekens breedte geperst,
   vier kolommen in een halve pagina, met merkbaar kleinere afbeeldingen dan overal elders.
   Leesbreedte hoort bij lopende tekst, niet bij een raster. */
.entry-content > p,
.entry-content > ul:not(.eb-product-grid):not(.products),
.entry-content > ol {
	max-width: 68ch;
}

a {
	color: var(--eb-action);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--eb-transition);
}

a:hover {
	color: var(--eb-amber-600);
}

/* Eén zichtbare focusstijl voor alles. :focus-visible zodat muisklikken geen ring
   laten zien maar toetsenbordnavigatie wel. */
:focus-visible {
	outline: 3px solid var(--eb-focus);
	outline-offset: 2px;
	border-radius: var(--eb-radius-sm);
}

small,
.eb-meta {
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

blockquote {
	margin: var(--eb-space-5) 0;
	padding: var(--eb-space-4) var(--eb-space-5);
	border-left: 4px solid var(--eb-accent);
	background: var(--eb-bg-warm);
	border-radius: 0 var(--eb-radius-md) var(--eb-radius-md) 0;
}

blockquote > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. Layout
   ========================================================================== */

.eb-container {
	width: 100%;
	max-width: var(--eb-container);
	margin-inline: auto;
	padding-inline: var(--eb-gutter);
}

.eb-container--narrow {
	max-width: 820px;
}

.eb-stack > * + * {
	margin-top: var(--eb-space-4);
}

.eb-section {
	padding-block: var(--eb-space-7);
}

@media (min-width: 768px) {
	.eb-section {
		padding-block: var(--eb-space-8);
	}
}

.eb-section--warm {
	background: var(--eb-bg-alt);
}

.eb-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--eb-space-3);
	margin-bottom: var(--eb-space-5);
}

.eb-section__head h2 {
	margin: 0;
}

.site-main {
	min-height: 50vh;
}

/* Skiplink: onzichtbaar tot hij focus krijgt. */
.skip-link {
	position: absolute;
	top: -100%;
	left: var(--eb-space-4);
	z-index: 200;
	padding: var(--eb-space-3) var(--eb-space-4);
	background: var(--eb-brown-600);
	color: var(--eb-white);
	border-radius: 0 0 var(--eb-radius-md) var(--eb-radius-md);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
	color: var(--eb-white);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   5. Knoppen
   ========================================================================== */

.eb-btn,
.wp-block-button__link,
button.button,
a.button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--eb-space-2);
	min-height: var(--eb-tap);
	padding: var(--eb-space-3) var(--eb-space-5);
	border: 2px solid transparent;
	border-radius: var(--eb-radius-md);
	background: var(--eb-action);
	color: var(--eb-white);
	font-weight: 600;
	font-size: var(--eb-step-0);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background var(--eb-transition), transform var(--eb-transition);
}

.eb-btn:hover,
.wp-block-button__link:hover,
button.button:hover,
a.button:hover,
input[type="submit"]:hover {
	background: var(--eb-action-hover);
	color: var(--eb-white);
	transform: translateY(-1px);
}

.eb-btn:active {
	transform: translateY(0);
}

.eb-btn--secondary {
	background: transparent;
	border-color: var(--eb-border-strong);
	color: var(--eb-brown-700);
}

.eb-btn--secondary:hover {
	background: var(--eb-brown-100);
	border-color: var(--eb-brown-400);
	color: var(--eb-brown-800);
}

/* Amber-knop: donkere tekst, want wit op amber is onleesbaar. */
.eb-btn--accent {
	background: var(--eb-accent);
	color: var(--eb-ink);
}

.eb-btn--accent:hover {
	background: var(--eb-amber-300);
	color: var(--eb-ink);
}

.eb-btn--full {
	width: 100%;
}

.eb-btn--small {
	min-height: 36px;
	padding: var(--eb-space-2) var(--eb-space-3);
	font-size: var(--eb-step--1);
}

/* Icoonknop, bijvoorbeeld in de header. Blijft altijd 44×44. */
.eb-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eb-tap);
	height: var(--eb-tap);
	padding: 0;
	border: 0;
	border-radius: var(--eb-radius-md);
	background: transparent;
	color: inherit;
	position: relative;
}

.eb-icon-btn:hover {
	background: rgb(255 255 255 / 15%);
}

.eb-icon-btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   6. Formulieren
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
	width: 100%;
	min-height: var(--eb-tap);
	padding: var(--eb-space-3);
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-sm);
	background: var(--eb-white);
	color: var(--eb-text);

	/* 16px voorkomt dat iOS Safari bij focus inzoomt op het formulier. */
	font-size: max(16px, var(--eb-step-0));
	transition: border-color var(--eb-transition), box-shadow var(--eb-transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--eb-brown-500);
	box-shadow: 0 0 0 3px rgb(240 168 48 / 35%);
	outline: none;
}

label {
	display: block;
	margin-bottom: var(--eb-space-1);
	font-size: var(--eb-step--1);
	font-weight: 600;
}

/* ==========================================================================
   7. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--eb-brown-600);
	color: var(--eb-white);

	/* Verloop naar het diepere bruin van de originele navigatiebalk-afbeelding. */
	background-image: linear-gradient(180deg, var(--eb-brown-500) 0%, var(--eb-brown-600) 60%, var(--eb-brown-700) 100%);
	box-shadow: var(--eb-shadow-2);
}

.site-header a {
	color: var(--eb-white);
}

/* Servicebalk boven de header. Verbergen op mobiel: de ruimte is daar te kostbaar
   en de informatie staat ook in de footer. */
.eb-topbar {
	display: none;
	background: var(--eb-brown-800);
	color: var(--eb-brown-100);
	font-size: var(--eb-step--1);
}

@media (min-width: 768px) {
	.eb-topbar {
		display: block;
	}
}

.eb-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--eb-space-4);
	min-height: 2.25rem;
}

.eb-topbar__list {
	display: flex;
	align-items: center;
	gap: var(--eb-space-4);
}

.eb-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: var(--eb-space-1);
}

.eb-topbar__item svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--eb-amber-300);
	stroke-width: 2;
	flex: none;
}

.eb-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--eb-space-2);
	min-height: var(--eb-header-height);
}

.eb-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--eb-space-2);
	text-decoration: none;
	font-family: var(--eb-font-heading);
	font-weight: 700;
	font-size: var(--eb-step-1);
	line-height: 1.05;
	color: var(--eb-white);
}

.eb-brand img {
	width: auto;
	height: 2.25rem;
	border-radius: var(--eb-radius-sm);
}

@media (min-width: 768px) {
	.eb-brand img {
		height: 3rem;
	}
}

.eb-brand__text {
	display: none;
}

@media (min-width: 480px) {
	.eb-brand__text {
		display: block;
	}
}

.eb-brand__tagline {
	display: block;
	font-family: var(--eb-font-body);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--eb-amber-200);
}

.eb-header__actions {
	display: flex;
	align-items: center;
	gap: var(--eb-space-1);
	justify-content: flex-end;
}

/* Teller op wenslijst- en winkelwagenknop. Amber vlak met donkere tekst. */
.eb-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--eb-radius-full);
	background: var(--eb-accent);
	color: var(--eb-ink);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

.eb-count:empty,
.eb-count[hidden] {
	display: none;
}

/* Taalwisselaar: twee korte codes naast elkaar, klein maar aanraakbaar. */
.eb-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: var(--eb-radius-full);
}

.eb-lang__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 28px;
	padding: 0 var(--eb-space-2);
	border-radius: var(--eb-radius-full);
	color: var(--eb-brown-100);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.eb-lang__option:hover {
	background: rgb(255 255 255 / 15%);
	color: var(--eb-white);
}

/* Amber vlak met donkere tekst voor de actieve taal — wit op amber leest niet. */
.eb-lang__option.is-current {
	background: var(--eb-amber-300);
	color: var(--eb-ink);
}

/* In de actiebalk op mobiel is de omringende ruimte krapper. */
.eb-header__actions .eb-lang {
	margin-inline-end: var(--eb-space-1);
}

.eb-header__actions .eb-lang__option {
	min-height: 32px;
}

/* Melding dat een tekst nog niet vertaald is. */
.eb-lang-note {
	padding: var(--eb-space-3) var(--eb-space-4);
	border-left: 3px solid var(--eb-amber-400);
	background: var(--eb-amber-100);
	border-radius: 0 var(--eb-radius-sm) var(--eb-radius-sm) 0;
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
}

/* ==========================================================================
   8. Zoeken in de header
   ========================================================================== */

/* Op mobiel schuift het zoekveld uit onder de header; vanaf md staat het altijd
   open, midden in de header. */
.eb-search {
	grid-column: 1 / -1;
	display: none;
	padding-bottom: var(--eb-space-3);
}

.eb-search.is-open {
	display: block;
}

@media (min-width: 768px) {
	.eb-search {
		grid-column: auto;
		display: block;
		padding-bottom: 0;
		max-width: 30rem;
		margin-inline: auto;
		width: 100%;
	}

	.eb-search__toggle {
		display: none;
	}
}

.eb-search__form {
	display: flex;
	gap: var(--eb-space-2);
	background: var(--eb-white);
	border-radius: var(--eb-radius-full);
	padding: 3px 3px 3px var(--eb-space-4);
	align-items: center;
}

.eb-search__form input[type="search"] {
	flex: 1;

	/*
	 * Zonder dit houdt een flexonderdeel zijn eigen inhoudsbreedte als ondergrens en puilt het
	 * formulier uit zijn kolom zodra de ruimte krap wordt. Met `0` krimpt het veld netjes mee.
	 * Een vangnet: de eigenlijke oorzaak van de samengeknepen zoekbalk zat in het raster van de
	 * header, zie de toelichting bij `.eb-nav`.
	 */
	min-width: 0;
	min-height: 38px;
	border: 0;
	background: transparent;
	padding: 0;
	color: var(--eb-ink);
}

.eb-search__form input[type="search"]:focus {
	box-shadow: none;
}

.eb-search__submit {
	flex: none;
	width: 38px;
	height: 38px;
	min-height: 38px;
	padding: 0;
	border-radius: var(--eb-radius-full);
	background: var(--eb-action);
}

.eb-search__submit svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
}

/* ==========================================================================
   9. Navigatie
   ========================================================================== */

.eb-nav-toggle {
	display: inline-flex;
}

@media (min-width: 1024px) {
	.eb-nav-toggle {
		display: none;
	}
}

/* Hamburger die in een kruis verandert. */
.eb-burger {
	position: relative;
	width: 22px;
	height: 16px;
}

.eb-burger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentcolor;
	border-radius: 2px;
	transition: transform var(--eb-transition), opacity var(--eb-transition);
}

.eb-burger span:nth-child(1) { top: 0; }
.eb-burger span:nth-child(2) { top: 7px; }
.eb-burger span:nth-child(3) { top: 14px; }

[aria-expanded="true"] .eb-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

[aria-expanded="true"] .eb-burger span:nth-child(2) {
	opacity: 0;
}

[aria-expanded="true"] .eb-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobiel paneel: schuift van rechts in, volledige hoogte, eigen scroll. */
.eb-nav {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(22rem, 88vw);
	z-index: 120;
	display: flex;
	flex-direction: column;
	background: var(--eb-brown-700);
	color: var(--eb-white);
	transform: translateX(100%);
	transition: transform var(--eb-transition);
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--eb-shadow-3);
	padding: var(--eb-space-4) 0 var(--eb-space-8);
}

.eb-nav.is-open {
	transform: translateX(0);
}

.eb-nav__close {
	align-self: flex-end;
	margin-inline-end: var(--eb-space-3);
	color: var(--eb-white);
}

/*
 * Zolang het mobiele menu open staat, moet de header bóven de overlay liggen.
 *
 * Het menu (`.eb-nav`, z-index 120) staat in de markup binnen `<header class="site-header">`, en
 * die is `position: sticky` met `z-index: 100`. Daarmee vormt de header een eigen stapelcontext:
 * de 120 van het menu telt alleen bínnen die header, en de header zelf staat als geheel op 100.
 * De overlay staat buiten de header op 110 en kwam er dus overheen te liggen.
 *
 * Gevolg was dat het menu wel zichtbaar was — je keek er doorheen, de overlay is 55 % dekkend —
 * maar niet aanklikbaar. Elke tik kwam op de overlay terecht, en die heeft een sluit-handler, dus
 * het menu klapte dicht in plaats van te navigeren.
 *
 * Alleen de z-index van de header verhogen zou de header ook boven de overlay houden als de
 * filterlade openstaat, en dan blijft hij daar onterecht onverduisterd en klikbaar. Vandaar dat
 * `site.js` per paneel een eigen klasse op de body zet.
 */
body.eb-nav-open .site-header {
	z-index: 130;
}

.eb-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgb(42 20 16 / 55%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--eb-transition), visibility var(--eb-transition);
}

.eb-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.eb-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eb-nav li {
	border-bottom: 1px solid rgb(255 255 255 / 10%);
}

.eb-nav a {
	display: block;
	padding: var(--eb-space-3) var(--eb-space-5);
	min-height: var(--eb-tap);
	text-decoration: none;
	font-weight: 500;
}

.eb-nav a:hover,
.eb-nav .current-menu-item > a {
	background: rgb(255 255 255 / 10%);
	color: var(--eb-amber-200);
}

/* Submenu's op mobiel: dichtgeklapt, uitklappen via een aparte knop naast de
   link. De link zelf blijft dus gewoon aanklikbaar — een veelgemaakte fout is de
   bovenliggende link opofferen aan het uitklappen. */
.eb-nav .eb-nav__item-wrap {
	display: flex;
	align-items: center;
}

.eb-nav .eb-nav__item-wrap > a {
	flex: 1;
}

.eb-nav__expand {
	flex: none;
	width: var(--eb-tap);
	height: var(--eb-tap);
	border: 0;
	background: transparent;
	color: inherit;
	display: grid;
	place-items: center;
}

.eb-nav__expand svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2.2;
	transition: transform var(--eb-transition);
}

.eb-nav__expand[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.eb-nav .sub-menu {
	display: none;
	background: rgb(0 0 0 / 18%);
}

.eb-nav .sub-menu.is-open {
	display: block;
}

.eb-nav .sub-menu a {
	padding-inline-start: var(--eb-space-7);
	font-weight: 400;
	font-size: var(--eb-step--1);
}

/* Desktop: horizontale balk met dropdowns. */
@media (min-width: 1024px) {
	.eb-nav {
		position: static;
		width: auto;
		transform: none;
		background: transparent;
		box-shadow: none;
		padding: 0;
		overflow: visible;
		flex-direction: row;

		/*
		 * Een eigen rij over de volle breedte. Dit is geen opmaakvoorkeur maar een reparatie.
		 *
		 * `.eb-header__inner` is een raster met `auto 1fr auto`, en het menu is het vierde kind:
		 * merk, zoekbalk, knoppen, menu. Op mobiel staat het menu op `position: fixed` en telt het
		 * niet mee in het raster — daar ging het goed. Vanaf deze breedte wordt het `static` en dus
		 * een echt rasteronderdeel, dat vanzelf op rij 2 in kolom 1 belandt.
		 *
		 * Een `auto`-kolom wordt zo breed als het breedste onderdeel erin, over álle rijen. Het
		 * hele menu duwde die eerste kolom dus open, waardoor de `1fr` in het midden werd
		 * platgedrukt. Daar staat de zoekbalk: die kromp tot een paar pixels, je kon er nog één
		 * letter in typen en de rest schoof uit beeld.
		 *
		 * Met `1 / -1` staat het menu over alle drie de kolommen en bepaalt kolom 1 zijn breedte
		 * alleen nog op het merk.
		 */
		grid-column: 1 / -1;
	}

	.eb-nav__close,
	.eb-nav__expand {
		display: none;
	}

	.eb-nav > ul {
		display: flex;
		align-items: center;
		gap: var(--eb-space-1);
	}

	.eb-nav li {
		border: 0;
		position: relative;
	}

	.eb-nav a {
		padding: var(--eb-space-2) var(--eb-space-3);
		border-radius: var(--eb-radius-md);
		font-size: var(--eb-step--1);
		font-weight: 600;
		letter-spacing: 0.01em;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.eb-nav .sub-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 15rem;
		padding: var(--eb-space-2);
		background: var(--eb-white);
		border-radius: var(--eb-radius-md);
		box-shadow: var(--eb-shadow-3);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity var(--eb-transition), transform var(--eb-transition), visibility var(--eb-transition);
	}

	.eb-nav li:hover > .sub-menu,
	.eb-nav li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.eb-nav .sub-menu a {
		color: var(--eb-brown-700);
		text-transform: none;
		font-weight: 500;
		padding: var(--eb-space-2) var(--eb-space-3);
	}

	.eb-nav .sub-menu a:hover {
		background: var(--eb-brown-100);
		color: var(--eb-brown-800);
	}

	/* Submenu's dieper dan één niveau klappen naar rechts uit. */
	.eb-nav .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}
}

/* Categoriebalk onder de header: horizontaal schuifbare chips op mobiel. */
.eb-catbar {
	background: var(--eb-brown-100);
	border-bottom: 1px solid var(--eb-border);
}

.eb-catbar__list {
	display: flex;
	gap: var(--eb-space-2);
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: var(--eb-space-2);
	scroll-snap-type: x proximity;
}

.eb-catbar__list::-webkit-scrollbar {
	display: none;
}

.eb-catbar__list a {
	flex: none;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--eb-space-2) var(--eb-space-4);
	border-radius: var(--eb-radius-full);
	background: var(--eb-white);
	border: 1px solid var(--eb-border-strong);
	color: var(--eb-brown-700);
	font-size: var(--eb-step--1);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.eb-catbar__list a:hover,
.eb-catbar__list a[aria-current="page"] {
	background: var(--eb-brown-600);
	border-color: var(--eb-brown-600);
	color: var(--eb-white);
}

/* ==========================================================================
   10. Hero en contentblokken
   ========================================================================== */

.eb-hero {
	position: relative;
	background: var(--eb-bg-warm);
	background-image: linear-gradient(135deg, var(--eb-amber-100) 0%, var(--eb-amber-200) 100%);
	overflow: hidden;
}

.eb-hero__inner {
	display: grid;
	gap: var(--eb-space-5);
	padding-block: var(--eb-space-7);
	align-items: center;
}

@media (min-width: 768px) {
	.eb-hero__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--eb-space-7);
		padding-block: var(--eb-space-8);
	}
}

.eb-hero h1 {
	margin-bottom: var(--eb-space-3);
	color: var(--eb-brown-800);
}

.eb-hero__lead {
	font-size: var(--eb-step-1);
	color: var(--eb-brown-700);
	max-width: 34ch;
}

.eb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-3);
	margin-top: var(--eb-space-5);
}

.eb-hero__media img {
	border-radius: var(--eb-radius-lg);
	box-shadow: var(--eb-shadow-3);
	width: 100%;
	object-fit: cover;
}

/* Vertrouwensbalk: de drie beloftes die nu in een bannerkop weggestopt zitten. */
.eb-usp {
	background: var(--eb-brown-700);
	color: var(--eb-brown-100);
}

.eb-usp__list {
	display: grid;
	gap: var(--eb-space-3);
	padding-block: var(--eb-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.eb-usp__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.eb-usp__item {
	display: flex;
	align-items: center;
	gap: var(--eb-space-3);
	font-size: var(--eb-step--1);
}

.eb-usp__item svg {
	flex: none;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--eb-amber-300);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.eb-usp__item strong {
	display: block;
	color: var(--eb-white);
	font-size: var(--eb-step-0);
}

/* Categoriekaarten op de homepage. */
.eb-cat-grid {
	display: grid;
	gap: var(--eb-space-4);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.eb-cat-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.eb-cat-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.eb-cat-card {
	position: relative;
	display: block;
	border-radius: var(--eb-radius-md);
	overflow: hidden;
	background: var(--eb-brown-100);
	text-decoration: none;
	box-shadow: var(--eb-shadow-1);
	transition: box-shadow var(--eb-transition), transform var(--eb-transition);
}

.eb-cat-card:hover {
	box-shadow: var(--eb-shadow-2);
	transform: translateY(-2px);
}

.eb-cat-card img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
}

.eb-cat-card__label {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--eb-space-5) var(--eb-space-3) var(--eb-space-3);
	background: linear-gradient(180deg, rgb(42 20 16 / 0%) 0%, rgb(42 20 16 / 82%) 100%);
	color: var(--eb-white);
	font-weight: 600;
	font-size: var(--eb-step-0);
	line-height: 1.25;
}

.eb-cat-card__count {
	display: block;
	font-size: var(--eb-step--1);
	font-weight: 400;
	color: var(--eb-amber-200);
}

/* ==========================================================================
   11. Meldingen
   ========================================================================== */

.eb-notice,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	gap: var(--eb-space-3);
	align-items: flex-start;
	margin: 0 0 var(--eb-space-5);
	padding: var(--eb-space-4);
	border-radius: var(--eb-radius-md);
	border-left: 4px solid var(--eb-brown-500);
	background: var(--eb-bg-warm);
	list-style: none;
	font-size: var(--eb-step-0);
}

.woocommerce-message {
	border-left-color: var(--eb-success);
	background: #edf7f1;
}

.woocommerce-error {
	border-left-color: var(--eb-error);
	background: #fdeeed;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	flex: none;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer {
	margin-top: var(--eb-space-8);
	background: var(--eb-brown-800);
	color: var(--eb-brown-200);
	font-size: var(--eb-step--1);
}

.site-footer a {
	color: var(--eb-brown-100);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--eb-amber-300);
	text-decoration: underline;
}

.eb-footer__cols {
	display: grid;
	gap: var(--eb-space-5);
	padding-block: var(--eb-space-7);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.eb-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.eb-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var(--eb-space-6);
	}
}

.eb-footer__title,
.footer-widget__title {
	margin: 0 0 var(--eb-space-3);
	color: var(--eb-white);
	font-family: var(--eb-font-heading);
	font-size: var(--eb-step-1);
}

.eb-footer__cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--eb-space-2);
}

/* Tikdoel in de footer op mobiel groot genoeg houden. */
.eb-footer__cols a {
	display: inline-block;
	padding-block: var(--eb-space-1);
}

.eb-footer__address {
	font-style: normal;
	line-height: 1.7;
}

/* Openingstijden als twee kolommen, zodat de tijden onder elkaar uitlijnen en in één oogopslag
   te lezen zijn. Smal gehouden: het is een lijstje, geen tabel. */
.eb-footer__hours {
	list-style: none;
	margin: 0 0 var(--eb-space-2);
	padding: 0;
	max-width: 16rem;
}

.eb-footer__hours li {
	display: flex;
	justify-content: space-between;
	gap: var(--eb-space-4);
	padding-block: var(--eb-space-1);
}

.eb-footer__hours-note {
	margin-block: 0 var(--eb-space-4);
	font-size: var(--eb-step--1);
	opacity: 0.85;
}

.eb-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 12%);
	padding-block: var(--eb-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-3) var(--eb-space-5);
	align-items: center;
	justify-content: space-between;
}

.eb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-2) var(--eb-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.eb-footer__payments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-2);
	align-items: center;
}

.eb-footer__payments span {
	padding: var(--eb-space-1) var(--eb-space-2);
	border: 1px solid rgb(255 255 255 / 20%);
	border-radius: var(--eb-radius-sm);
	font-size: 0.7rem;
	letter-spacing: 0.03em;
}

/* Widerrufsbutton in de footer. Moet opvallen: de wet vraagt een knop die net zo
   goed vindbaar is als de bestelknop, dus geen grijze tekstlink tussen de rest. */
.eb-widerruf-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--eb-space-2);
	min-height: var(--eb-tap);
	padding: var(--eb-space-2) var(--eb-space-4);
	border: 2px solid var(--eb-amber-300);
	border-radius: var(--eb-radius-md);
	background: transparent;
	color: var(--eb-amber-200);
	font-weight: 600;
	text-decoration: none;
}

.eb-widerruf-btn:hover,
.eb-widerruf-btn:focus-visible {
	background: var(--eb-amber-300);
	border-color: var(--eb-amber-300);

	/* Donkere tekst op amber: wit haalt daar geen leesbaar contrast. */
	color: var(--eb-ink);
	text-decoration: none;
}

.eb-widerruf-btn svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: none;
}

/* Het herroepingsformulier zelf. */
.eb-widerruf {
	max-width: 46rem;
}

.eb-widerruf .form-row {
	margin-bottom: var(--eb-space-4);
}

@media (min-width: 600px) {
	.eb-widerruf .eb-widerruf-form {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--eb-space-4);
	}

	.eb-widerruf .form-row-wide {
		grid-column: 1 / -1;
	}
}

.eb-widerruf table th {
	width: 14rem;
	text-align: start;
	background: var(--eb-brown-100);
}

.eb-widerruf table th,
.eb-widerruf table td {
	padding: var(--eb-space-3);
	border-bottom: 1px solid var(--eb-border);
}

/* ==========================================================================
   13. Pagina's, artikelen, paginering
   ========================================================================== */

.eb-page-header {
	background: var(--eb-bg-alt);
	border-bottom: 1px solid var(--eb-border);
	padding-block: var(--eb-space-5);
}

.eb-page-header h1 {
	margin: 0;
}

.eb-breadcrumb {
	font-size: var(--eb-step--1);
	color: var(--eb-text-muted);
	margin-bottom: var(--eb-space-2);
}

.eb-breadcrumb a {
	color: var(--eb-brown-600);
	text-decoration: none;
}

.eb-breadcrumb a:hover {
	text-decoration: underline;
}

.entry-content {
	padding-block: var(--eb-space-6);
}

.entry-content img {
	border-radius: var(--eb-radius-md);
}

.entry-content h2 {
	margin-top: var(--eb-space-6);
}

.entry-content h3 {
	margin-top: var(--eb-space-5);
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 var(--eb-space-4);
	padding-inline-start: 1.35em;
}

.entry-content li + li {
	margin-top: var(--eb-space-2);
}

.entry-content table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
	border: 1px solid var(--eb-border);
	border-radius: var(--eb-radius-md);
}

@media (min-width: 768px) {
	.entry-content table {
		display: table;
		white-space: normal;
	}
}

.entry-content th,
.entry-content td {
	padding: var(--eb-space-3);
	border-bottom: 1px solid var(--eb-border);
	text-align: start;
}

.entry-content th {
	background: var(--eb-brown-100);
	font-weight: 600;
}

.eb-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eb-space-2);
	justify-content: center;
	padding-block: var(--eb-space-6);
}

.eb-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--eb-tap);
	min-height: var(--eb-tap);
	padding-inline: var(--eb-space-2);
	border: 1px solid var(--eb-border-strong);
	border-radius: var(--eb-radius-md);
	background: var(--eb-white);
	color: var(--eb-brown-700);
	text-decoration: none;
	font-weight: 600;
}

.eb-pagination .page-numbers:hover {
	background: var(--eb-brown-100);
}

.eb-pagination .page-numbers.current {
	background: var(--eb-brown-600);
	border-color: var(--eb-brown-600);
	color: var(--eb-white);
}

.eb-pagination .dots {
	border: 0;
	background: transparent;
}

/* ==========================================================================
   14. Hulpklassen
   ========================================================================== */

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

.eb-hide-mobile {
	display: none;
}

@media (min-width: 768px) {
	.eb-hide-mobile {
		display: initial;
	}

	.eb-hide-desktop {
		display: none !important;
	}
}

/* Blokkeert scrollen achter het open menu of de open filterlade. */
body.eb-no-scroll {
	overflow: hidden;
}

/* Print: navigatie, filters en knoppen zijn op papier zinloos. */
@media print {
	.site-header,
	.site-footer,
	.eb-nav,
	.eb-catbar,
	.eb-filters,
	.eb-sticky-buy,
	.eb-btn {
		display: none !important;
	}

	body {
		font-size: 11pt;
	}
}