/*!
 * Yaou Muziek — design-systeem v2 (21-07-2026): zwart + karmozijnrood,
 * o.b.v. de oude yaoumuziek.nl-huisstijl (klantwens, vervangt het eerder
 * afgesproken hout/vernis-palet volledig — zie DESIGN-SYSTEM.md).
 * Bijna-zwart (brand-900) voor header/footer/donkere vlakken, karmozijnrood
 * (brand-500/600) als hoofdaccent (badges, prijzen, actief-menu, cta's).
 * Grid-based, ronde kaarten, zachte schaduwen, serif-koppen / sans-body,
 * ruime witruimte. WCAG AA-streven.
 */

/* ===== 1. Fonts (self-hosted, geen Google Fonts-CDN i.v.m. AVG) ===== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter/Inter-Variable-latin.woff2') format('woff2-variations'), url('../fonts/inter/Inter-Variable-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url('../fonts/playfair-display/PlayfairDisplay-Variable-latin.woff2') format('woff2-variations'), url('../fonts/playfair-display/PlayfairDisplay-Variable-latin.woff2') format('woff2');
}

/* ===== 2. Design tokens ===== */

:root {
	/* Merkkleuren v2 (21-07-2026) — zwart + karmozijnrood, vervangt het
	   eerdere hout/vernis-palet (#c27a5d/#2c1e16 e.d.) volledig. Zie
	   DESIGN-SYSTEM.md voor de klantwens/toelichting. */
	--brand-50: #fbeaee;
	--brand-100: #f3c9d3;
	--brand-500: #c41e4a;
	--brand-600: #9e1840;
	--brand-900: #141110;

	--white: #ffffff;
	/* Exact gesampled uit de achtergrond van het echte logobestand
	   (yaou-logo-new-scaled.png, alle 4 hoeken + dominante pixel bevestigd
	   RGB 254,254,254 — geverifieerd met PIL, 23-07-2026), niet zomaar
	   aangenomen als zuiver wit. Uitsluitend voor header/footer-achtergrond,
	   zodat het logo er naadloos in opgaat; --white blijft het algemene
	   witte token voor de rest van de site (kaarten, knoppen, etc.). */
	--logo-bg: #fefefe;
	--gray-50: #fafaf9;
	--gray-200: #e7e2de;
	--gray-400: #a8a29e;
	--gray-500: #78716c;
	--gray-600: #57534e;
	--gray-900: #1c1917;

	/* Semantische aliassen. Let op contrast: brand-500 (karmozijn) is de
	   decoratieve vlakkleur (badges/iconen/hover-vlakken, i.c.m. witte tekst
	   erbovenop — dat combineert tot >=4.5:1). Voor tekst/links DIRECT op een
	   lichte achtergrond gebruiken we brand-600 (donkerder karmozijn,
	   voldoende contrast op wit, zie --color-accent-text hieronder), nooit
	   brand-500 als tekstkleur op wit. */
	--color-primary: var(--brand-900);
	--color-secondary: var(--gray-600);
	--color-accent: var(--brand-500);
	--color-accent-text: var(--brand-600);
	--color-accent-hover: var(--brand-600);
	--color-bg: var(--white);
	--color-bg-alt: var(--gray-50);
	--color-text: var(--gray-900);
	--color-border: var(--gray-200);
	--color-white: var(--white);
	--color-success: #166534;
	--color-error: #B91C1C;

	--font-heading: 'Playfair Display', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

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

	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 999px;
	--max-width: 1440px;
	--max-width-narrow: 1440px;

	/* Feedbackronde 6-8-2026: logo 2x vergroot (was 48px), header-baromvang
	   meegegroeid zodat er evenveel verticale ademruimte overblijft als voorheen
	   (was 76px bar / 48px logo -> 14px marge boven/onder). Losse variabele i.p.v.
	   opnieuw overal 76px hardcoden — was voorheen 4x apart hardcoded (header-bar,
	   mobiel-menu-offset, galerij-sticky-top, galerij-max-height), zie die regels. */
	--header-height: 124px;

	--shadow-card: 0 1px 3px rgba(20,17,16,0.09), 0 1px 2px rgba(20,17,16,0.06);
	--shadow-card-hover: 0 20px 40px -14px rgba(20,17,16,0.28), 0 8px 16px -8px rgba(20,17,16,0.12);

	--touch-target: 44px;
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
}

/* ===== 3. Reset ===== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
img, picture, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

button, a, input[type="submit"], summary { cursor: pointer; }
input, select, textarea { cursor: text; }
select { cursor: pointer; }

/* Toegankelijkheid: zichtbare focus-states op alle interactieve elementen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-accent-text);
	outline-offset: 2px;
}

@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;
	}
}

.screen-reader-text,
.yaou-skip-link {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.yaou-skip-link:focus {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	width: auto; height: auto;
	clip: auto;
	background: var(--brand-900);
	color: var(--white);
	padding: var(--space-3) var(--space-4);
	z-index: 200;
	border-radius: var(--radius-sm);
}

/* ===== 4. Typography ===== */

h1, h2, h3, h4, h5, h6,
.yaou-h1, .yaou-h2, .yaou-h3, .yaou-h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.15;
	color: var(--color-primary);
	margin: 0 0 var(--space-4);
}
.yaou-h1, h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 600; }
.yaou-h2, h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); }
.yaou-h3, h3 { font-size: 1.375rem; }
.yaou-h4, h4 { font-size: 1.125rem; font-family: var(--font-body); font-weight: 600; }

.yaou-eyebrow {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-accent-text);
	font-weight: 600;
	margin: 0 0 var(--space-2);
}

.yaou-prose p { margin: 0 0 var(--space-4); color: var(--color-secondary); }
.yaou-prose h2 { margin-top: var(--space-7); }
.yaou-prose ul, .yaou-prose ol { margin: 0 0 var(--space-4) var(--space-5); list-style: disc; }
.yaou-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ===== 5. Layout ===== */

.yaou-container {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
}
.yaou-container--narrow { max-width: var(--max-width-narrow); }

.yaou-main { display: block; }

.yaou-page-hero {
	padding-block: var(--space-8) var(--space-6);
	border-bottom: 1px solid var(--color-border);
}
/* Feedbackronde 6-8-2026: titelstrook op de hoofd-Webshop-pagina kleiner
   (klantfeedback "webshop-hero moet kleiner") — WooCommerce zet de
   body-class "woocommerce-shop" automatisch alleen op de hoofd-shoppagina
   (niet op categoriepagina's, tax-product_cat), dus scoped hier bewust smal
   i.p.v. .yaou-page-hero sitebreed te verkleinen (blog/infopagina's/categorieën
   behouden hun huidige, al goedgekeurde maat). */
.woocommerce-shop .yaou-page-hero { padding-block: var(--space-5) var(--space-4); }
.yaou-page-content { padding-block: var(--space-7); }

/* Donkere hero-variant voor informatiepagina's (Over ons, Instrumentenverhuur,
   Muzieklessen, Contact) — geeft deze voorheen kale tekstblok-pagina's een
   duidelijke intro-strook i.p.v. platte witte kop (klantfeedback "meer
   opmaak/design", zie eindrapport). Zelfde donkere toon als header/footer. */
.yaou-page-hero--dark {
	background: var(--brand-900);
	border-bottom: none;
	color: var(--white);
	padding-block: var(--space-8);
}
.yaou-page-hero--dark .yaou-h1, .yaou-page-hero--dark h1 { color: var(--white); }
.yaou-page-hero--dark .yaou-eyebrow { color: var(--brand-100); }
.yaou-page-hero--dark .yaou-icon { color: var(--brand-500); margin-bottom: var(--space-3); }

/* ===== 6. Buttons ===== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--touch-target);
	padding: 0 var(--space-6);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.button--primary, .button.button--primary, a.button:not(.button--ghost) {
	background: var(--brand-600);
	color: var(--white);
}
.button--primary:hover, a.button:not(.button--ghost):hover { background: var(--brand-500); color: var(--brand-900); }
.button--ghost {
	background: transparent;
	color: var(--color-primary);
	border-color: var(--color-primary);
}
.button--ghost:hover { background: var(--color-primary); color: var(--white); }

/* ===== 7. Aankondigingsbalk ===== */

.yaou-announcement-bar {
	background: var(--brand-900);
	color: var(--brand-50);
}
.yaou-announcement-bar__inner {
	max-width: var(--max-width);
	/* Bugfix: dit is een <p>-element zonder eigen margin-reset (alleen body/
	   ul/ol worden site-breed gereset, sectie 3) — de browser-standaard
	   <p>-marge (~1em boven/onder) telde bovenop de padding hieronder op,
	   waardoor deze bedoeld-dunne balk merkbaar meer witruimte toonde dan de
	   padding alleen zou geven (klantfeedback "rare witruimte boven de
	   header", zie eindrapport). margin:0 laat alleen de padding de hoogte
	   van de balk bepalen. */
	margin: 0 auto;
	padding: var(--space-2) var(--space-5);
	text-align: center;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}
.yaou-announcement-bar a { text-decoration: underline; text-underline-offset: 2px; }
.yaou-announcement-bar a:hover { color: var(--brand-500); }

/* ===== 8. Header ===== */

.yaou-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--logo-bg);
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}
.yaou-header__bar {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
	min-height: var(--header-height);
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.yaou-header__logo { display: flex; align-items: center; min-height: var(--touch-target); }
.yaou-header__logo-text { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--brand-900); }
/* Bugfix: op smalle (mobiele) headerbreedtes duwt de flex-layout van
   .yaou-header__logo dit <img>-element (flex-item, default flex-shrink:1)
   smaller dan zijn intrinsieke breedte, terwijl max-height de hoogte apart
   blijft vastzetten — zonder object-fit rekt de browser de PIXELS van het
   logo dan uit naar die niet-kloppende boxverhouding (zichtbaar vervormd
   logo op mobiel, gevonden bij visuele verificatie op een 390px-viewport).
   object-fit:contain garandeert dat de afbeelding zelf altijd zijn eigen
   beeldverhouding behoudt, ongeacht hoe de omliggende box wordt herschaald.
   Feedbackronde 6-8-2026: 96px, 2x de vorige 48px (klantwens, logo oogde te
   klein). */
.yaou-header__logo-img { max-height: 96px; width: auto; max-width: 100%; object-fit: contain; }
/* Bugfix 10-8-2026, tweede correctie: een vaste min-height/flex-shrink:0
   ("logo mag nooit krimpen") bleek op ECHTE telefoonbreedtes (<600px) juist
   averechts — logo (natuurlijk ~300px breed) + de resterende zoeken+
   hamburger-iconen (96px) + padding/gap (80px) passen daar simpelweg niet
   samen binnen bv. 360-390px, wat de header liet overlopen. Klantwens
   hierop: "alles moet ALTIJD passend zijn, verklein het logo dan toch iets
   op mobiel." Vanaf 600px (ruim boven de ~476px die minimaal nodig is voor
   logo+iconen+padding samen — telefoon-op-zijn-kant, kleine tablet, elke
   laptop) mag het logo wél zijn volle natuurlijke grootte opeisen; daaronder
   blijft het gewoon meekrimpen met de beschikbare ruimte (zoals hierboven,
   geen aparte regel nodig) — bij 390px komt dat empirisch nog steeds op een
   goed leesbare ~50-80px hoogte uit, dankzij de eerdere verwijdering van 3
   van de 5 icoonknoppen (bugfix #44). */
@media (min-width: 600px) {
	.yaou-header__logo { flex-shrink: 0; }
	.yaou-header__logo-img { min-height: 81px; flex-shrink: 0; }
}

/* Feedbackronde 6-8-2026: nav gecentreerd i.p.v. links-uitgelijnd direct na
   het logo — klantwens "meer ruimte tussen logo en paginalinks". .yaou-header__nav
   heeft al flex:1 (vult de ruimte tussen logo en de icoonknoppen rechts), dus
   center-alignment van de menu-items daarbinnen geeft vanzelf lucht aan beide
   kanten i.p.v. een nieuwe vaste marge te verzinnen. */
.yaou-header__nav { flex: 1; display: none; }
.yaou-nav-menu { display: flex; justify-content: center; gap: var(--space-6); }
.yaou-nav-menu li { position: relative; }
.yaou-nav-menu > li > a {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	font-weight: 500;
	border-bottom: 2px solid transparent;
}
.yaou-nav-menu a:hover, .yaou-nav-menu .current-menu-item > a { border-color: var(--color-accent); }

/* Dropdown-submenu ("Instrumenten"): progressive enhancement met :has(), geen
   functionaliteitsverlies zonder — het item blijft dan gewoon een normale link
   en het submenu staat er direct onder (geen JS nodig op desktop). */
.yaou-nav-menu li:has(.sub-menu) > a::after {
	content: '';
	width: 12px; height: 12px;
	margin-left: var(--space-1);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}
.yaou-nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-hover);
	padding: var(--space-2);
	margin-top: var(--space-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	z-index: 55;
}
.yaou-nav-menu li:hover > .sub-menu,
.yaou-nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.yaou-nav-menu .sub-menu li { position: static; }
.yaou-nav-menu .sub-menu a {
	display: flex;
	min-height: 40px;
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	border-bottom: none;
	white-space: nowrap;
}
.yaou-nav-menu .sub-menu a:hover { background: var(--color-bg-alt); border-color: transparent; }
/* Dropdown-paneel blijft licht (leesbaar in elke context); tekst daarbinnen
   expliciet donker zetten, anders erft 'ie de witte headertekst-kleur. */
.yaou-nav-menu .sub-menu a { color: var(--color-text); }

.yaou-header__actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
/* Bugfix 10-8-2026 (klantfeedback: logo te klein op mobiel/tablet). Account/
   verlanglijst/winkelmand lieten samen met zoeken + hamburger (5x 44px vast
   tikvlak, flex-shrink:0) op een smalle headerbreedte nauwelijks ruimte over
   voor het logo, het enige flex-item dat wél mag krimpen. Onder 960px blijven
   alleen zoeken + hamburger in de header; deze 3 staan daar als tekstlinks in
   het hamburgermenu (zie yaou-mobile-menu__list--account in navbar.php). */
.yaou-header__actions-secondary { display: none; align-items: center; gap: var(--space-2); }
.yaou-header__icon-btn {
	position: relative;
	width: var(--touch-target);
	height: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	padding: 0;
	font-size: 0;
	line-height: 0;
	flex-shrink: 0;
}
.yaou-header__icon-btn:hover { background: var(--color-bg-alt); }
.yaou-header__menu-toggle { display: inline-flex; }

.yaou-header__badge {
	position: absolute;
	top: 2px; right: 2px;
	min-width: 16px; height: 16px;
	border-radius: var(--radius-pill);
	background: var(--brand-500);
	color: var(--white);
	font-size: 0.625rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 3px;
	border: 1.5px solid var(--white);
}
.yaou-header__badge:empty, .yaou-header__badge[data-yaou-wishlist-count="0"], .yaou-cart-count:empty { display: none; }

/* Iets kleiner dan voorheen (was 22px) — klantfeedback: header-iconen mochten
   kleiner/rustiger binnen hun 44px-knop staan, zie eindrapport. */
.yaou-icon { width: 20px; height: 20px; }
.yaou-icon--sm { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: var(--space-1); }
.yaou-icon--lg { width: 32px; height: 32px; color: var(--color-accent); }

/* Omslagpunt 10-8-2026 verhoogd van 960px naar 1400px (klantwens: logo mag
   nooit meer krimpen, dus als het volledige menu + logo op zijn natuurlijke
   grootte niet meer past, moet de header eerder omschakelen naar het
   hamburgermenu i.p.v. het logo of de menutekst te verdrukken). Rekensom bij
   1600px-viewport, alles op zijn NATUURLIJKE (niet-gekrompen) breedte: logo
   300px + 6x padding/gaps (space-5/space-6) + navmenu (7 items, incl. de
   langste "Instrumentenverhuur", 741px inclusief tussenruimtes) + iconenrij
   200px (4x44px) = ~1353px minimum. 1400px geeft daar veilige marge boven
   op (scrollbar/subpixel-afronding) zonder een gangbare desktopbreedte
   onnodig naar het hamburgermenu te duwen. */
@media (min-width: 1400px) {
	.yaou-header__nav { display: block; }
	.yaou-header__menu-toggle { display: none; }
	.yaou-header__actions-secondary { display: flex; }
}

/* Mobile menu */
.yaou-mobile-menu {
	position: fixed;
	inset: var(--header-height) 0 0 0;
	background: var(--white);
	z-index: 45;
	overflow-y: auto;
	padding: var(--space-6) var(--space-5);
}
.yaou-mobile-menu[hidden] { display: none; }
.yaou-mobile-menu__list li { border-bottom: 1px solid var(--color-border); }
.yaou-mobile-menu__list a { display: flex; align-items: center; min-height: 56px; font-size: 1.125rem; font-weight: 500; }
.yaou-mobile-menu__list .sub-menu { padding-left: var(--space-4); border-top: 1px solid var(--color-border); }
.yaou-mobile-menu__list .sub-menu li:last-child { border-bottom: none; }
.yaou-mobile-menu__list .sub-menu a { min-height: 48px; font-size: 1rem; color: var(--color-secondary); }
/* Account/verlanglijst/winkelmand-items (zie .yaou-header__actions-secondary
   hierboven) — zelfde regel/hoogte-look als de gewone menu-links, maar ook
   van toepassing op de <button> (verlanglijst opent een paneel, geen link).
   De badge staat in de header absoluut gepositioneerd tegen een vierkante
   icoonknop; hier ligt hij plat in de tekstregel, dus position:static en
   rechts uitgelijnd i.p.v. in de hoek geplakt. */
.yaou-mobile-menu__list--account { margin-top: var(--space-2); }
.yaou-mobile-menu__list--account a,
.yaou-mobile-menu__list--account button {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-size: 1.125rem;
	font-weight: 500;
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
	color: var(--color-text);
	font-family: inherit;
	cursor: pointer;
}
/* Bugfix: de knop kreeg hierboven pas hier zijn display:flex (de <a>-variant
   erft 'm al van .yaou-mobile-menu__list a) — zónder een flex-CONTAINER als
   ouder werd deze badge (zelf altijd display:flex, zie basisregel hierboven)
   een blok-element dat de volle breedte van de knop opvulde i.p.v. een
   compact bolletje (klantfeedback-screenshot: een volle-breedte rode balk
   i.p.v. een klein rond teller-badge). Met de knop nu écht een flexrij is de
   badge een flex-ITEM en valt 'ie vanzelf weer terug op zijn eigen inhoud. */
.yaou-mobile-menu__list--account .yaou-header__badge { position: static; margin-left: auto; border: none; flex-shrink: 0; }
@media (min-width: 1400px) { .yaou-mobile-menu { display: none !important; } }

/* Search overlay */
.yaou-search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 17, 16, 0.92);
	z-index: 60;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--space-8) var(--space-5);
}
.yaou-search-overlay[hidden] { display: none; }
.yaou-search-overlay__inner { width: 100%; max-width: 640px; }
.yaou-search-form { display: flex; align-items: center; gap: var(--space-2); background: var(--white); border-radius: var(--radius-md); padding: var(--space-2); }
/* Bugfix: geen eigen `color` op het invoerveld — het erft de witte
   headertekst-kleur van de omliggende `.yaou-header` (zelfde root cause als
   de eerder gefixte wishlist-panel-link), waardoor getypte tekst wit-op-wit
   en dus onzichtbaar werd (klantfeedback, zie eindrapport). Expliciete
   donkere tekst-/placeholderkleur, consistent met de rest van de site. */
.yaou-search-form input[type="search"] { flex: 1; border: none; padding: var(--space-3); background: transparent; font-size: 1.125rem; color: var(--color-text); }
.yaou-search-form input[type="search"]::placeholder { color: var(--gray-500); }
.yaou-search-form input[type="search"]:focus { outline: none; }
/* Bugfix: browsers (Chrome/Safari) tekenen bij `type="search"` zelf al een
   ronde "x"-knop in het invoerveld zodra er tekst in staat, vlak naast onze
   eigen zoek-/sluitknopjes — dat gaf een verwarrend "dubbel kruisje"
   (klantfeedback, zie eindrapport). We hebben al een eigen sluitknop
   (.yaou-search-overlay__close), dus de native versie uitschakelen. */
.yaou-search-form input[type="search"]::-webkit-search-cancel-button,
.yaou-search-form input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
/* Bugfix: geen eigen `color`, dus erfde ook dit knopje (het zoek-icoon zelf,
   niet alleen het al gefixte sluitkruisje) de witte headertekst-kleur van
   `.yaou-header` — wit icoon op de witte zoekbalk-achtergrond, dus
   onzichtbaar (zelfde root cause als hierboven, gevonden bij visuele
   verificatie van de zoekoverlay). Geldt voor ALLE knopjes in deze balk. */
.yaou-search-form button { width: var(--touch-target); height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--gray-600); }
.yaou-search-form button:hover { background: var(--color-bg-alt); color: var(--brand-600); }
.yaou-search-form--inline { background: var(--white); border: 1px solid var(--color-border); max-width: 420px; margin: var(--space-5) 0; }

.yaou-search-suggestions {
	background: var(--white);
	margin-top: var(--space-2);
	border-radius: var(--radius-md);
	max-height: 60vh;
	overflow-y: auto;
}
.yaou-search-suggestions li a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.yaou-search-suggestions li:last-child a { border-bottom: none; }
/* Grotere productfoto (was 44px) + titel/beschrijving/categorie gestapeld
   ernaast, prijs rechts uitgelijnd (klantwens: meer context per suggestie
   dan alleen thumbnail+prijs, zie eindrapport punt 1). De brontfoto's in de
   catalogus zijn zelf maar 150x100px (zie DESIGN-SYSTEM.md, bekende
   openstaande punten), dus WordPress' standaard 'thumbnail'-formaat
   (150x150, altijd al gegenereerd voor elke upload) is ruim voldoende bron-
   materiaal — geen nieuw beeldformaat nodig dat nog geregenereerd zou
   moeten worden voor de bestaande 235 producten. */
.yaou-search-suggestions img { width: 72px; height: 72px; object-fit: contain; background: var(--color-bg-alt); border-radius: var(--radius-sm); flex-shrink: 0; }
.yaou-search-suggestions__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yaou-search-suggestions__name { font-weight: 600; color: var(--color-text); }
.yaou-search-suggestions__description {
	font-size: 0.8125rem;
	color: var(--color-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.yaou-search-suggestions__category { font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.02em; }
.yaou-search-suggestions__price { flex-shrink: 0; color: var(--brand-600); font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.yaou-search-suggestions__empty { padding: var(--space-4); color: var(--color-secondary); }

/* Laad-skeleton i.p.v. "Zoeken…"-tekst, zodra er een fetch onderweg is (zie
   search-autocomplete.js renderSkeleton()) — toont vast de vorm van de
   resultaten (foto/titel/beschrijving/prijs) i.p.v. een lege tekstregel,
   zelfde patroon als het wishlist-paneel hierboven. */
.yaou-search-suggestions__skeleton { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.yaou-search-suggestions__skeleton:last-child { border-bottom: none; }
.yaou-search-suggestions__skeleton-img { width: 72px; height: 72px; border-radius: var(--radius-sm); background: var(--color-bg-alt); flex-shrink: 0; }
.yaou-search-suggestions__skeleton-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.yaou-search-suggestions__skeleton-line { display: block; height: 10px; border-radius: 4px; background: var(--color-bg-alt); }
.yaou-search-suggestions__skeleton-line--name { width: 60%; }
.yaou-search-suggestions__skeleton-line--desc { width: 85%; }
.yaou-search-suggestions__skeleton-line--price { width: 48px; height: 14px; flex-shrink: 0; }
.yaou-search-suggestions__skeleton-img,
.yaou-search-suggestions__skeleton-line {
	animation: yaou-skeleton-pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.yaou-search-suggestions__skeleton-img,
	.yaou-search-suggestions__skeleton-line { animation: none; }
}

/* Wishlist panel */
.yaou-wishlist-panel {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: min(380px, 100vw);
	background: var(--white);
	z-index: 60;
	box-shadow: -8px 0 24px rgba(20,17,16,0.15);
	padding: var(--space-5);
	overflow-y: auto;
}
.yaou-wishlist-panel[hidden] { display: none; }
.yaou-wishlist-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.yaou-wishlist-panel__header h2 { margin: 0; font-size: 1.25rem; }
/* Bugfix: de sluitknop had geen enkele eigen stijl (geen achtergrond/hover/
   afmeting) — daardoor oogde 'ie niet als klikbare knop (zelfde soort
   probleem als het eerder te onopvallende zoek-kruisje). Zelfde
   knoppenpatroon als .yaou-header__icon-btn: vast 44px-klikvlak + zichtbare
   hover-achtergrond. */
.yaou-wishlist-panel__header button {
	width: var(--touch-target);
	height: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	color: var(--color-secondary);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.yaou-wishlist-panel__header button:hover { background: var(--color-bg-alt); color: var(--brand-600); }
.yaou-wishlist-panel__list li a {
	display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	/* Bugfix: erfde 'wit' van .yaou-header, onzichtbaar op de witte paneelachtergrond. */
	color: var(--color-text);
}
.yaou-wishlist-panel__list li a:hover { color: var(--brand-600); }
.yaou-wishlist-panel__list img { width: 56px; height: 56px; object-fit: contain; background: var(--color-bg-alt); border-radius: var(--radius-sm); }
.yaou-wishlist-panel__empty { color: var(--color-secondary); }
.yaou-wishlist-panel__load-error { color: var(--color-secondary); padding: var(--space-3) 0; }

/* Laad-skeleton, zodra het paneel opent en er een fetch onderweg is (zie
   wishlist.js renderSkeleton()) — voorkomt dat het paneel een paar seconden
   leeg/"hangend" oogt op deze trage testomgeving (klantfeedback, zie
   eindrapport punt 5). */
.yaou-wishlist-panel__skeleton { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.yaou-wishlist-panel__skeleton-img { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--color-bg-alt); flex-shrink: 0; }
.yaou-wishlist-panel__skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.yaou-wishlist-panel__skeleton-lines span { display: block; height: 10px; border-radius: 4px; background: var(--color-bg-alt); }
.yaou-wishlist-panel__skeleton-lines span:first-child { width: 70%; }
.yaou-wishlist-panel__skeleton-lines span:last-child { width: 40%; }
.yaou-wishlist-panel__skeleton-img,
.yaou-wishlist-panel__skeleton-lines span {
	animation: yaou-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes yaou-skeleton-pulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}
/* Toegankelijkheidsbaseline (zie DESIGN-SYSTEM.md): prefers-reduced-motion
   respecteren bij transities/animaties. */
@media (prefers-reduced-motion: reduce) {
	.yaou-wishlist-panel__skeleton-img,
	.yaou-wishlist-panel__skeleton-lines span { animation: none; }
}
/* Link naar de volledige verlanglijst in Mijn Account, ná de daadwerkelijke
   productregels (alleen ingelogd, zie wishlist.js renderProductItems()) —
   subtieler dan een productregel (geen afbeelding-gap, gecentreerd, geen
   onderrand) zodat 'ie duidelijk als footer-navigatie leest i.p.v. als nog
   een extra product. */
.yaou-wishlist-panel__account-link a {
	display: block;
	padding: var(--space-3) 0 0;
	border-bottom: none;
	text-align: center;
	font-size: 0.875rem;
	color: var(--brand-600);
	text-decoration: underline;
}
.yaou-wishlist-panel__account-link a:hover { color: var(--brand-500); }

/* ===== 9. Footer ===== */

.yaou-footer { background: var(--logo-bg); color: var(--gray-600); margin-top: var(--space-9); border-top: 1px solid var(--color-border); }
/* Bugfix: op de homepage heeft de laatste sectie (verhuur-CTA, .yaou-rental-teaser)
   zelf al een ruime padding-bottom (--space-9). De footer's eigen margin-top
   (ook --space-9) kwam daar nog eens bovenop, wat tussen twee donkere vlakken
   een opvallende lichte/witte kloof gaf (klantfeedback, zie eindrapport). Alleen
   op de front page corrigeren (de body-class 'home' die WordPress al meegeeft
   op de statische voorpagina) — andere pagina's eindigen met minder eigen
   bottom-padding en hebben de footer-marge dus wel nodig. */
.home .yaou-footer { margin-top: 0; }
.yaou-footer__inner {
	max-width: var(--max-width);
	margin-inline: auto;
	padding: var(--space-8) var(--space-5);
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
.yaou-footer__logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; display: block; margin-bottom: var(--space-3); color: var(--brand-900); }
.yaou-footer__logo-img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: var(--space-4); border-radius: var(--radius-sm); }
.yaou-footer__heading { font-family: var(--font-body); font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-900); margin-bottom: var(--space-4); }
.yaou-footer p, .yaou-footer li { color: var(--gray-600); }
/* brand-600, niet brand-500 — brand-500 is te licht als TEKSTkleur op een
   witte achtergrond (contrast, zie Kleurenpalet-regel in DESIGN-SYSTEM.md);
   brand-500 was hier alleen correct toen de footer nog donker was
   (verificatieronde 23-07-2026, na de witte-footer-omzetting). */
.yaou-footer a:hover { color: var(--brand-600); }
.yaou-footer__contact li { margin-bottom: var(--space-2); display: flex; align-items: center; }
.yaou-footer__menu li { margin-bottom: var(--space-2); }
.yaou-footer__visit-note { font-size: 0.8125rem; margin-top: var(--space-2); }

.yaou-footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.yaou-footer__social a {
	width: var(--touch-target);
	height: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
	color: var(--brand-900);
}
.yaou-footer__social a:hover { background: var(--brand-600); color: var(--white); }
.yaou-footer__social .yaou-icon { width: 20px; height: 20px; }

.yaou-footer__bottom { border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-5); text-align: center; }
.yaou-footer__bottom p { color: var(--gray-500); font-size: 0.8125rem; margin: 0; }

@media (min-width: 720px) {
	.yaou-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; }
	.yaou-footer__bottom { justify-content: space-between; }
}

/* ===== 10. Home ===== */

.yaou-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(620px, 82vh);
	padding-block: var(--space-9);
	color: var(--color-text);
	overflow: hidden;
}
/* Feedbackronde 6-8-2026, vierde correctie: klant wilde de foto niet in een
   eigen kolom maar de VOLLEDIGE hero-achtergrond laten vullen. Volle-breedte
   achtergrond (geen aparte foto-kolom meer). Bugfix 14-8-2026: de toen
   ingevoerde 90°-rotatie op desktop (bedoeld om een rechtopstaand instrument
   liggend te tonen) draaide ook foto's met een eigen (niet-simpele)
   compositie fout de kant op zodra Qiong zelf vrij foto's kiest —
   teruggedraaid, foto's staan nu altijd rechtop zoals geüpload.
   object-fit:cover (i.p.v. contain) zorgt dat de foto ondanks het ontbreken
   van de rotatie toch de volledige hero-band blijft vullen — randen mogen
   afvallen, geen witruimte, geen draai. */
.yaou-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--color-bg-alt); }
.yaou-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Langzaam kruisfadende achtergrondslides (klantwens, zie eindrapport +
   inc/helpers.php yaou_render_hero_extra_slides() / assets/js/main.js voor de
   dependency-vrije vanilla-JS cycler). Elke slide ligt exact over de vorige;
   alleen ".is-active" is zichtbaar (opacity), de rest staat te wachten. Geen
   animatie/interval bij prefers-reduced-motion — dan blijft gewoon de eerste
   (bewerkbare) hero-afbeelding staan. */
.yaou-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
}
.yaou-hero__slide.is-active { opacity: 1; }
.yaou-hero__slide .yaou-hero__img, .yaou-hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Tekst-leesbaarheid: nu de foto de volledige breedte vult (i.p.v. een eigen
   kolom), zou 'm anders weer over de linker tekstkolom kunnen vallen —
   zelfde probleem als de vorige ronde, nu structureel voorkomen met een
   links-naar-rechts vervaging i.p.v. een dichte overlay over de hele hero
   (die zou de foto rechts juist weer dempen, wat de klant niet vroeg).
   --color-bg-alt (100% dekkend links) is dezelfde kleur als de
   media-achtergrond zelf, dus geen zichtbare rand — vervaagt naar volledig
   doorzichtig zodat de foto rechts onaangetast blijft. */
.yaou-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--color-bg-alt) 0%, var(--color-bg-alt) 42%, rgba(250,250,249,0) 75%);
}
@media (prefers-reduced-motion: reduce) {
	.yaou-hero__slide { transition: none; }
}
.yaou-hero__content { max-width: 640px; }
.yaou-hero .yaou-eyebrow { color: var(--color-accent-text); }
.yaou-hero .yaou-h1, .yaou-hero h1 { color: var(--color-primary); }
.yaou-hero__intro { max-width: 46ch; }
.yaou-hero__intro p, .yaou-hero .yaou-prose p { color: var(--color-secondary); }
.yaou-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.yaou-hero .button--primary { background: var(--brand-600); color: var(--white); }
.yaou-hero .button--primary:hover { background: var(--brand-500); color: var(--white); }
.yaou-hero .button--ghost { border-color: var(--color-border); color: var(--color-text); }
.yaou-hero .button--ghost:hover { background: var(--color-bg-alt); border-color: var(--brand-500); color: var(--brand-900); }

.yaou-trust { padding-block: var(--space-7); background: var(--color-bg-alt); }
/* Bugfix: iconen stonden links uitgelijnd i.p.v. gecentreerd (text-align:center
   op de grid-parent centreert geen block-level svg zonder margin:auto) —
   elk item nu zelf een gecentreerde flex-kolom. */
.yaou-trust__grid { display: grid; gap: var(--space-6); text-align: center; }
.yaou-trust__item { display: flex; flex-direction: column; align-items: center; }
.yaou-trust__item p { margin: var(--space-3) 0 0; font-weight: 500; }
@media (min-width: 720px) { .yaou-trust__grid { grid-template-columns: repeat(3, 1fr); } }
.yaou-trust--band { border-top: 1px solid var(--color-border); }

/* Introblok: gecentreerd, decoratief lijntje, twee alinea's + link naar contact. */
.yaou-intro { padding-block: var(--space-9); }
.yaou-intro__inner { max-width: var(--max-width-narrow); margin-inline: auto; text-align: center; }
.yaou-intro__divider { width: 64px; height: 3px; margin: var(--space-5) auto; background: var(--brand-500); border-radius: var(--radius-pill); }
.yaou-intro .yaou-prose { text-align: center; }
.yaou-intro .yaou-prose p { color: var(--color-secondary); }
.yaou-intro__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-weight: 600; color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.yaou-intro__link:hover { color: var(--brand-900); }

.yaou-categories, .yaou-featured { padding-block: var(--space-8); }
/* Feedbackronde 6-8-2026: categorie-tegels bovenaan de hoofd-Webshop-pagina
   (woocommerce/archive-product.php, is_shop()) — iets minder verticale
   ruimte dan de homepage-versie (staat hier direct onder de al compacte
   .yaou-page-hero, geen dubbele grote witruimte nodig) + een scheidingslijn
   zodat 'm duidelijk als eigen "kies eerst"-stap oogt t.o.v. de filterbalk/
   productgrid eronder. */
.yaou-shop-categories { padding-block: var(--space-6) var(--space-7); border-bottom: 1px solid var(--color-border); }
/* Ingeklapte staat (klantwens feedbackronde 6-8-2026, tweede ronde): zodra
   een categorie al actief is via ?product_cat= start dit blok dicht — minder
   verticale ruimte vóór de eigenlijke productgrid — met de knop hieronder om
   'm weer te openen. .is-collapsed heeft verder geen eigen stijl nodig, de
   staat zit in [hidden] op het panel + het minder ruime paddingsverschil
   is bewust klein gehouden zodat open/dicht geen layout-sprong voelt. */
.yaou-shop-categories__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.yaou-shop-categories__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 40px;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.yaou-shop-categories__toggle:hover { border-color: var(--brand-500); }
.yaou-shop-categories__toggle:focus-visible { outline: 3px solid var(--color-accent-text); outline-offset: 2px; }
.yaou-shop-categories__chevron { transition: transform var(--transition-fast); }
.yaou-shop-categories__toggle[aria-expanded="false"] .yaou-shop-categories__chevron { transform: rotate(-90deg); }
.yaou-shop-categories__panel[hidden] { display: none; }
.yaou-section-cta { display: flex; justify-content: center; margin-top: var(--space-7); }
.yaou-category-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, 1fr); margin-top: var(--space-6); }
/* Bugfix 10-8-2026: sinds de subcategorielijst (.yaou-category-grid__subcats
   hieronder) als sibling ná de tegel-<a> in dezelfde <li> staat, kan die <a>
   niet langer height:100% van de (door CSS Grid gestretchte) <li> opeisen —
   dat zou de subcatslijst wegduwen/overlappen. .yaou-category-grid__item
   is nu zelf een kolom-flexcontainer: de tegel neemt zijn natuurlijke hoogte,
   de subcatslijst staat er gewoon onder. */
.yaou-category-grid__item { display: flex; flex-direction: column; }
.yaou-category-grid__item a {
	display: block;
	background: var(--white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-3);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.yaou-category-grid__item a:hover { box-shadow: var(--shadow-card-hover); border-color: var(--brand-500); transform: translateY(-4px); }
/* Bugfix (zie eindrapport): CSS aspect-ratio:1/1 rechtstreeks op de <img>
   bleek onbetrouwbaar te renderen zodra de afbeelding een srcset/sizes
   heeft (elke categorie kreeg een andere, niet-kloppende hoogte — 100px,
   683px, 924px... i.p.v. steeds gelijk aan de breedte, ook na diverse
   CSS-only pogingen). Vervangen door de decennia-beproefde
   "padding-top:100%"-truc: ".yaou-category-grid__media" is een blok waarvan
   de HOOGTE via padding-top altijd exact 100% van de eigen breedte is
   (aspect-ratio-onafhankelijk, werkt in elke browser), de <img>/placeholder
   erin wordt daarbinnen absoluut gepositioneerd en vult 'm volledig. */
.yaou-category-grid__media {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 100%;
	background: var(--color-bg-alt);
	border-radius: var(--radius-md);
	overflow: hidden;
}
.yaou-category-grid__placeholder,
.yaou-category-grid__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	object-position: center;
}
.yaou-category-grid__name {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Vaste minimumhoogte (± 2 tekstregels) zodat alle kaarten precies even
	   hoog blijven, ook als een categorienaam (bv. "Chinese instrumenten en
	   accessoires") over 2 regels loopt terwijl andere namen op 1 regel
	   passen (klantfeedback "alle kaarten exact dezelfde afmeting"). */
	min-height: 2.6em;
	margin-top: var(--space-3);
	font-weight: 600;
	text-align: center;
	color: var(--brand-900);
}
/* Subcategorieën onder de tegel (10-8-2026, klantwens: hoofdcategorieën MET
   hun subcategorieën tonen), zelfde component op homepage én /webshop/ (zie
   template-parts/woocommerce/category-grid.php). Compacte pill-links met een
   kleine fotominiatuur (12-8-2026, klantwens: de foto's die je via het
   categorieënscherm instelt, waren hier nergens zichtbaar) — geen volledige
   tweede fotogrid die met de hoofdtegel-foto's zou concurreren, wel genoeg
   om te herkennen. */
.yaou-category-grid__subcats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding: 0;
}
.yaou-category-grid__subcats a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 3px var(--space-4) 3px 3px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	color: var(--color-secondary);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.yaou-category-grid__subcats a:hover { color: var(--brand-600); border-color: var(--brand-500); }
.yaou-category-grid__subcat-media {
	/* Bugfix 12-8-2026: zonder position:relative hier grijpt de bredere
	   ".yaou-category-grid__item img"-regel (position:absolute; inset:0;
	   bedoeld voor de hoofdtegel-foto binnen ".yaou-category-grid__media",
	   die WEL position:relative heeft) — de <img> hierbinnen zocht dan de
	   dichtstbijzijnde gepositioneerde voorouder verderop in de boom en
	   rendert daardoor levensgroot/gek uitgerekt i.p.v. binnen dit kleine
	   rondje te blijven (klantscreenshot: een foto die over de hele hero
	   heen "glitchte"). Grootte 22px -> 38px (klantwens: rondjes groter). */
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-bg-alt);
}
.yaou-category-grid__subcat-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 720px) { .yaou-category-grid { grid-template-columns: repeat(3, 1fr); } }

/* Verhuur-bannersectie: donkere achtergrond + decoratief element + witte CTA. */
.yaou-rental-teaser { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-9); background: var(--brand-900); color: var(--white); }
.yaou-rental-teaser::before {
	content: '';
	position: absolute;
	top: -35%;
	right: -12%;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, var(--brand-600) 0%, transparent 70%);
	opacity: 0.4;
	border-radius: 50%;
	z-index: -1;
}
.yaou-rental-teaser h2 { color: var(--white); }
.yaou-rental-teaser .yaou-prose p { color: var(--brand-50); }
.yaou-rental-teaser__grid { max-width: 640px; }
.yaou-rental-teaser .button--primary { background: var(--white); color: var(--brand-900); }
.yaou-rental-teaser .button--primary:hover { background: var(--brand-100); }
/* Expliciete, gelijkwaardige ritmiek kop -> tekst -> knop (klantfeedback,
   zie eindrapport): i.p.v. losse, impliciet opeenstapelende
   paragraaf-marges (die per stuk niet gelijk hoefden uit te komen) hier een
   bewuste, symmetrische opbouw op de spacing-schaal. */
.yaou-rental-teaser__grid h2 { margin-bottom: var(--space-4); }
.yaou-rental-teaser__grid .yaou-prose { margin-bottom: var(--space-6); }
.yaou-rental-teaser__grid .yaou-prose p:last-child { margin-bottom: 0; }

.yaou-about-grid__img { border-radius: var(--radius-lg); aspect-ratio: 3/4; object-fit: cover; width: 100%; }

/* Over ons — redesign (klantwens "meer beeldmateriaal/iconen/FAQ, tekst
   gebruikte maar 2/3 van de breedte", zie eindrapport). Intro: sfeerbeeld +
   korte kernzin naast elkaar (i.p.v. de vaste 2-koloms verhouding die de
   hoofdtekst blijvend liet inklemmen); de eigenlijke bedrijfstekst eronder
   krijgt daarna de VOLLEDIGE containerbreedte (bewust, letterlijke
   klantwens — geen ch-leesbaarheidscap op deze pagina). */
.yaou-about-intro {
	display: grid;
	gap: var(--space-6);
	align-items: center;
	margin-bottom: var(--space-8);
}
@media (min-width: 720px) { .yaou-about-intro { grid-template-columns: 0.9fr 1.1fr; } }
.yaou-about-intro__lead {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	color: var(--brand-900);
	line-height: 1.4;
}
.yaou-about-story { margin-top: var(--space-2); }

.yaou-about-kernpunten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
	margin: 0 0 var(--space-8);
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
@media (min-width: 720px) { .yaou-about-kernpunten { grid-template-columns: repeat(4, 1fr); } }
.yaou-about-kernpunten li { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.yaou-about-kernpunten .yaou-icon--lg { margin: 0; }
.yaou-about-kernpunten span { font-weight: 600; font-size: 0.875rem; color: var(--color-secondary); }

/* FAQ-accordion */
.yaou-faq { padding-block: var(--space-8); background: var(--color-bg-alt); }
.yaou-faq-list { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.yaou-faq-item { background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.yaou-faq-item__q { margin: 0; }
.yaou-faq-item__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	width: 100%;
	min-height: var(--touch-target);
	padding: var(--space-4) var(--space-5);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--brand-900);
	text-align: left;
}
.yaou-faq-item__chevron { flex-shrink: 0; transition: transform var(--transition-fast); color: var(--color-accent-text); }
.yaou-faq-item__trigger[aria-expanded="true"] .yaou-faq-item__chevron { transform: rotate(180deg); }
.yaou-faq-item__panel { padding: 0 var(--space-5) var(--space-5); }
.yaou-faq-item__panel p { margin: 0; color: var(--color-secondary); }

/* ===== 11. Product grid / cards ===== */

.yaou-product-grid, ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--space-5) !important;
	margin-top: var(--space-6) !important;
	padding: 0 !important;
	list-style: none !important;
}
@media (min-width: 640px) { .yaou-product-grid, ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 960px) { .yaou-product-grid, ul.products { grid-template-columns: repeat(4, 1fr) !important; } }

/* Productkaart-redesign richting Thomann-stijl (23-07-2026, klantfeedback):
   minder "kaart"-achtig/decoratief — geen permanente rand/schaduw/achtergrond
   meer op de hele tegel, alleen de foto zelf krijgt een rustige, vlakke
   lichtgrijze backdrop met veel witruimte rond het product. De zachte
   schaduw-bij-hover (bestaand kaartpatroon, zie DESIGN-SYSTEM.md) verhuist
   mee naar de foto-backdrop i.p.v. de hele tegel. */
.yaou-product-card, li.product, .products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	border-radius: var(--radius-lg);
	padding: 0;
	box-shadow: none;
	transition: transform var(--transition-base);
}
.yaou-product-card a, li.product a.woocommerce-loop-product__link, li.product > a {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	min-width: 0;
	padding-bottom: var(--space-4);
}
li.product img, .yaou-product-card img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1/1;
	object-fit: contain;
	object-position: center;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	transition: box-shadow var(--transition-base);
}
@media (min-width: 960px) {
	li.product img, .yaou-product-card img { padding: var(--space-7); }
}
.yaou-product-card:hover img, li.product:hover img { box-shadow: var(--shadow-card-hover); }
/* Sterrenbeoordeling + reviewaantal, direct onder de foto (vóór de titel
   gehookt, zie inc/woocommerce.php `yaou_render_loop_rating()`). Hergebruikt
   de bestaande `.star-rating`-stersstijl/CSS-fix (zie Kritieke bugfixes #17
   in DESIGN-SYSTEM.md) — hier alleen de wrapper-marge/uitlijning eigen. */
.yaou-product-card__rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-3);
}
.yaou-product-card__rating .star-rating { margin: 0; }
.yaou-product-card__rating-count { font-size: 0.75rem; color: var(--gray-500); }
/* Bugfix: WooCommerce rendert de kaarttitel als een kaal <h2>, en de globale
   h1-h6-reset (sectie 4, Typography) maakt daar per ongeluk een grote,
   serif sectiekop van — precies de "te grote tekst"-klacht. Titel binnen de
   kaart hoort een normale, kleine sans-tekst te zijn, geen paginakop.
   Gewicht 400 (was 600, Thomann-redesign 23-07-2026) — "kleine regelmatige
   tekst", de prijs eronder draagt nu de visuele nadruk. */
.yaou-product-card__name, li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-size: 0.875rem;
	line-height: 1.4;
	font-weight: 400;
	margin-top: var(--space-2);
	margin-bottom: 0;
	color: var(--color-text);
}
.yaou-product-card__price, li.product .price {
	display: block;
	margin-top: auto;
	padding-top: var(--space-2);
	padding-right: 3.5rem;
	color: var(--brand-900);
	font-weight: 700;
	font-size: 1.125rem;
}
/* Doorgestreepte oorspronkelijke prijs gedempt, actuele/kortingsprijs houdt
   het karmozijn-accent (blijft duidelijk een aanbieding, klantwens
   "prijzen-accenten") — de gewone (niet-afgeprijsde) prijs is sinds de
   Thomann-redesign bijna-zwart (`--brand-900`) i.p.v. karmozijn, prominenter/
   vetter i.p.v. gekleurd, zie DESIGN-SYSTEM.md. */
.price del { color: var(--gray-400); font-weight: 500; font-size: 0.8125rem; }
.price ins { text-decoration: none; color: var(--brand-600); }
li.product .button { margin-top: var(--space-4); }
.yaou-btn-op-aanvraag.button, a.yaou-btn-op-aanvraag { width: 100%; background: var(--brand-500) !important; color: var(--white) !important; border-radius: var(--radius-pill); }
.yaou-btn-op-aanvraag.button:hover, a.yaou-btn-op-aanvraag:hover { background: var(--brand-600) !important; color: var(--white) !important; }

/* Rond icoon-knopje "toevoegen aan winkelwagen", rechtsonder in de kaart.
   v6 (23-07-2026, verificatieronde): het rondje was al verkleind naar 34px
   (i.p.v. de volle 44px --touch-target) en er was al een poging gedaan om
   het icoon te centreren (translateY(-1px), uitgaand van optisch "gewicht"
   onderin de winkelwagen-glyph) — bij pixel-exacte controle (Playwright-
   screenshot + PIL, ::after tijdelijk zichtbaar gemaakt zonder mask) bleek
   het icoon echter nog steeds ~3-4px UIT het midden te liggen, dus geen
   optisch-gewicht-kwestie maar een echte layout-bug: deze <a> heeft ECHTE
   (screenreader-)tekstinhoud ("Toevoegen aan winkelwagen", door WooCommerce
   zelf gerenderd) naast de ::after-icoonpseudo — ook op font-size:0/
   line-height:0 wikkelen browsers die tekst en de ::after nog steeds in ÉÉN
   gedeelde anonieme flex-item, waarvan de inline-baseline-positionering het
   icoontje omlaag duwt, ongeacht een correcte align-items/justify-content op
   de flex-container zelf. Fix: icoon (én de zichtbare cirkel) volledig
   loskoppelen van die tekst-flow via `position:absolute` + transform-
   centering op zichzelf, gegarandeerd exact het midden ongeacht die tekst.
   Het KLIKBARE tikvlak (de <a> zelf) is weer 44x44px (var(--touch-target),
   deze site se eigen Toegankelijkheid-baseline in DESIGN-SYSTEM.md: "minimaal
   44×44px klikbare iconen/knoppen", strenger dan de WCAG 2.5.8-ondergrens van
   24x24px) — de 34px-cirkel van de vorige ronde blijft de ZICHTBARE
   afmeting, nu via een aparte ::before-pseudo, dus decoratief kleiner zonder
   het tikvlak te verkleinen. */
li.product .add_to_cart_button,
.yaou-product-card .add_to_cart_button {
	position: absolute;
	right: var(--space-4);
	bottom: var(--space-4);
	width: var(--touch-target);
	height: var(--touch-target);
	min-height: 0;
	padding: 0;
	margin-top: 0;
	background: transparent !important;
	color: var(--white) !important;
	font-size: 0;
	line-height: 0;
	overflow: hidden;
}
li.product .add_to_cart_button::before,
.yaou-product-card .add_to_cart_button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background: var(--brand-600);
	transition: background-color var(--transition-fast);
}
li.product .add_to_cart_button::after,
.yaou-product-card .add_to_cart_button::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 14px; height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat;
}
li.product .add_to_cart_button:hover::before,
.yaou-product-card .add_to_cart_button:hover::before { background: var(--brand-500); }
li.product .added_to_cart {
	position: absolute;
	right: var(--space-4);
	bottom: calc(var(--touch-target) + var(--space-2) * -1);
	transform: translateY(100%);
	font-size: 0.6875rem;
	white-space: nowrap;
	color: var(--color-accent-text);
	text-decoration: underline;
}

/* Foto-archief (page-templates/template-archief.php, 23-07-2026): hergebruikt
   bewust dezelfde .yaou-product-card/.yaou-product-grid-fotostijl (grid,
   lichtgrijze backdrop, kleine regelmatige titel) maar zonder <a>-link (niet-
   gepubliceerde producten zijn voor bezoekers toch niet bereikbaar, en dit is
   nadrukkelijk geen verkoopkanaal) — .yaou-archive-grid__inner herhaalt dus
   alleen het flex-kolom-gedrag dat normaal van de kaart-<a> komt. */
.yaou-archive-grid__inner { display: flex; flex-direction: column; }
.yaou-archive-grid__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 1/1;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}

/* Kortingsbadge (WooCommerce .onsale) rechtsboven in de kaart. */
.onsale {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	background: var(--brand-500);
	color: var(--white);
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-pill);
	line-height: 1.4;
}

.yaou-wishlist-btn {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	width: var(--touch-target);
	height: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 4px rgba(20,17,16,0.18);
	color: var(--color-secondary);
	z-index: 2;
}
.yaou-wishlist-btn.is-active, .yaou-wishlist-btn:hover { color: var(--color-accent-text); }
.yaou-wishlist-btn.is-active .yaou-icon { fill: currentColor; }

/* .yaou-wishlist-grid draagt sinds 6-8-2026 geen eigen layout meer (die komt
   nu 1:1 van ul.products/li.product, zie inc/wishlist.php) — de klasse blijft
   uitsluitend staan als selector-haak voor de .yaou-prose-tegenregels
   hieronder (sectie 15, MyAccount-content). */

/* ===== 12. Shop filters ===== */

.yaou-shop-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-5);
	padding: var(--space-5);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	margin-block: var(--space-6);
}
.yaou-shop-filters__group { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 200px; }
.yaou-shop-filters__label, .yaou-shop-filters__group label { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); }
/* Herbruikbare custom-select-stijl (eigen pijltje, nette focus-state) — ook
   gebruikt door de sorteerdropdown hieronder (.yaou-shop-toolbar select) zodat
   alle dropdowns op de shop-pagina er hetzelfde uitzien i.p.v. kale
   browser-standaard-selects (klantfeedback, zie eindrapport). */
.yaou-shop-filters select,
.yaou-shop-toolbar select,
.yaou-shop-filters input[type="number"] {
	min-height: var(--touch-target);
	padding: 0 var(--space-7) 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white);
	transition: border-color var(--transition-fast);
}
.yaou-shop-filters select,
.yaou-shop-toolbar select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	background-size: 16px;
}
.yaou-shop-filters select:focus,
.yaou-shop-toolbar select:focus,
.yaou-shop-filters input[type="number"]:focus { border-color: var(--brand-500); outline: none; }
.yaou-shop-filters__checkboxes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.yaou-checkbox-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--white); gap: var(--space-2); font-size: 0.875rem; transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); }
.yaou-checkbox-pill:has(input:focus-visible) { outline: 3px solid var(--color-accent-text); outline-offset: 2px; }
.yaou-checkbox-pill:has(input:checked) { border-color: var(--brand-600); background: var(--brand-600); color: var(--white); }
.yaou-shop-filters__actions { display: flex; align-items: center; gap: var(--space-4); }

/* Inline paginering (assets/js/shop-pagination.js): korte dim-transitie
   tijdens het ophalen van de volgende pagina, i.p.v. een lege flits tussen
   de oude en nieuwe grid-inhoud. */
[data-yaou-shop-loop][aria-busy="true"] { opacity: 0.5; pointer-events: none; transition: opacity var(--transition-fast); }

/* Maat-multiselect-dropdown (vervangt de altijd-zichtbare checkbox-rij,
   klantfeedback zie eindrapport). Compacte trigger-knop + panel eronder,
   zelfde dropdown-vormtaal (pijltje, focus-state) als de gewone selects. */
.yaou-multiselect { position: relative; }
.yaou-multiselect__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	width: 100%;
	min-height: var(--touch-target);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	transition: border-color var(--transition-fast);
}
.yaou-multiselect.is-open .yaou-multiselect__trigger,
.yaou-multiselect__trigger:focus-visible { border-color: var(--brand-500); outline: none; }
.yaou-multiselect__chevron { flex-shrink: 0; transition: transform var(--transition-fast); }
.yaou-multiselect.is-open .yaou-multiselect__chevron { transform: rotate(180deg); }
.yaou-multiselect__panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	z-index: 10;
	min-width: 220px;
	max-height: 280px;
	overflow-y: auto;
	background: var(--white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-hover);
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
/* Bugfix: [hidden] en de class-selector hierboven hebben EXACT dezelfde
   specificiteit (0,1,0) — zonder deze regel wint de latere author-regel
   "display:flex" van de browser-standaard "[hidden]{display:none}", waardoor
   het paneel bij het laden van de pagina altijd al openstond i.p.v. pas na
   een klik op de trigger-knop (gevonden bij visuele verificatie na
   deployment). */
.yaou-multiselect__panel[hidden] { display: none; }
.yaou-multiselect__option {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 40px;
	padding: 0 var(--space-2);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	cursor: pointer;
}
.yaou-multiselect__option:hover { background: var(--color-bg-alt); }
.yaou-multiselect__option:has(input:focus-visible) { outline: 3px solid var(--color-accent-text); outline-offset: 1px; }
.yaou-multiselect__clear {
	margin-top: var(--space-2);
	padding-top: var(--space-2);
	border-top: 1px solid var(--color-border);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-accent-text);
	text-decoration: underline;
	text-align: left;
}

/* Dubbele prijs-slider (2 overlappende <input type=range>) i.p.v. twee losse
   tekstvelden (klantfeedback, zie eindrapport). De handles zijn de ECHTE
   native range-inputs (toetsenbord/aria al ingebouwd door de browser); alleen
   het spoor + de gevulde balk ertussen zijn eigen opmaak. */
.yaou-price-slider { padding-top: var(--space-2); }
.yaou-price-slider__values { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; color: var(--brand-600); margin-bottom: var(--space-2); }
.yaou-price-slider__track { position: relative; height: 4px; background: var(--color-border); border-radius: var(--radius-pill); margin: var(--space-4) var(--space-1) 0; }
.yaou-price-slider__fill { position: absolute; top: 0; bottom: 0; background: var(--brand-500); border-radius: var(--radius-pill); }
.yaou-price-slider__handle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	margin: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.yaou-price-slider__handle::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--brand-600);
	box-shadow: 0 1px 3px rgba(20,17,16,0.25);
	cursor: pointer;
}
.yaou-price-slider__handle::-moz-range-thumb {
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--white);
	border: 2px solid var(--brand-600);
	box-shadow: 0 1px 3px rgba(20,17,16,0.25);
	cursor: pointer;
}
.yaou-price-slider__handle::-webkit-slider-runnable-track { background: transparent; }
.yaou-price-slider__handle::-moz-range-track { background: transparent; }
.yaou-price-slider__handle:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--color-accent-text); outline-offset: 2px; }
.yaou-price-slider__handle:focus-visible::-moz-range-thumb { outline: 3px solid var(--color-accent-text); outline-offset: 2px; }

/* Custom select (sorteerdropdown, assets/js/shop-filters.js): eigen
   knop+listbox i.p.v. de kale, per-browser-verschillende opmaak van een
   uitgeklapte native <select> (klantfeedback — zie referentiebeeld
   uitgeklapte sorteerdropdown, zie eindrapport). Zonder JS (progressive
   enhancement) blijft de gewone <select> hieronder gewoon zichtbaar/bruikbaar. */
.yaou-custom-select { position: relative; display: inline-block; }
.yaou-custom-select select.yaou-custom-select__native {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.yaou-custom-select__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 40px;
	padding: 0 var(--space-7) 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right var(--space-3) center;
	background-size: 16px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text);
	transition: border-color var(--transition-fast);
	white-space: nowrap;
}
.yaou-custom-select.is-open .yaou-custom-select__trigger,
.yaou-custom-select__trigger:focus-visible { border-color: var(--brand-500); outline: none; }
.yaou-custom-select__listbox {
	position: absolute;
	top: calc(100% + var(--space-2));
	right: 0;
	z-index: 10;
	min-width: 100%;
	max-height: 280px;
	overflow-y: auto;
	background: var(--white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card-hover);
	padding: var(--space-2);
	list-style: none;
	margin: 0;
}
.yaou-custom-select__listbox li {
	min-height: 40px;
	display: flex;
	align-items: center;
	padding: 0 var(--space-3);
	border-radius: var(--radius-sm);
	font-size: 0.875rem;
	white-space: nowrap;
	cursor: pointer;
}
.yaou-custom-select__listbox li.is-active { background: var(--color-bg-alt); }
.yaou-custom-select__listbox li.is-selected { color: var(--brand-600); font-weight: 600; }
.yaou-custom-select__listbox:focus-visible { outline: none; }
.yaou-shop-filters__reset { font-size: 0.875rem; text-decoration: underline; min-height: var(--touch-target); display: inline-flex; align-items: center; color: var(--color-accent-text); }

/* Resultaat-telling + sorteerdropdown samen in één balkje i.p.v. twee losse,
   kaal-ogende standaardelementen (klantfeedback, zie eindrapport +
   inc/woocommerce.php voor de hook-wrapper die dit mogelijk maakt). */
.yaou-shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block: var(--space-6);
}
.yaou-shop-toolbar .woocommerce-result-count { margin: 0; color: var(--color-secondary); font-size: 0.875rem; }
.yaou-shop-toolbar select { min-height: 40px; font-size: 0.875rem; }

/* Breadcrumb: binnen dezelfde 1440px-container, subtiele/gedempte stijl met
   duidelijke "/"-scheiding (klantfeedback, zie eindrapport +
   inc/woocommerce.php voor de hook-wrapper die dit mogelijk maakt). */
.yaou-breadcrumb-wrap { padding-block: var(--space-3); }
.woocommerce-breadcrumb {
	font-size: 0.8125rem;
	color: var(--gray-500);
}
.woocommerce-breadcrumb a { color: var(--gray-500); text-decoration: none; }
.woocommerce-breadcrumb a:hover { color: var(--brand-600); text-decoration: underline; text-underline-offset: 2px; }

/* Paginering: nette aanklikbare component i.p.v. kale cijferlijst
   (klantfeedback, zie eindrapport). */
.woocommerce-pagination { margin-block: var(--space-7); display: flex; justify-content: center; }
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.woocommerce-pagination .page-numbers li { display: block; }
.woocommerce-pagination .page-numbers a.page-numbers,
.woocommerce-pagination .page-numbers span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--touch-target);
	height: var(--touch-target);
	padding-inline: var(--space-3);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: var(--white);
	font-weight: 600;
	font-size: 0.875rem;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.woocommerce-pagination .page-numbers a.page-numbers:hover { border-color: var(--brand-500); color: var(--brand-600); }
.woocommerce-pagination .page-numbers span.page-numbers.current {
	background: var(--brand-600);
	border-color: var(--brand-600);
	color: var(--white);
}
.woocommerce-pagination .page-numbers .next,
.woocommerce-pagination .page-numbers .prev { font-size: 0; }
.woocommerce-pagination .page-numbers .next::after,
.woocommerce-pagination .page-numbers .prev::after {
	content: '';
	width: 16px; height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}
.woocommerce-pagination .page-numbers .prev::after { transform: rotate(90deg); }
.woocommerce-pagination .page-numbers .next::after { transform: rotate(-90deg); }

/* ===== 13. Single product ===== */

.yaou-shop-main .product .summary { padding-block: var(--space-4); }
.woocommerce div.product div.images, .woocommerce div.product div.summary { margin-bottom: var(--space-6); }
@media (min-width: 860px) {
	/* Klantwens: 2/3 breedte voor de productgalerij, 1/3 voor prijs/koop-kolom
	   (was bijna gelijk verdeeld, zie eindrapport). LET OP: minmax(0, …) is
	   hier verplicht, niet alleen "2fr 1fr" — een kale fr-track krijgt van
	   CSS Grid een automatisch minimum ter grootte van de min-content-breedte
	   van zijn inhoud; de .summary-kolom (prijs/knoppen/tekst) bleek een
	   grotere automatische minimumbreedte te claimen dan zijn 1fr-aandeel,
	   waardoor de galerij-kolom juist SMALLER werd dan de summary-kolom (het
	   omgekeerde van de bedoeling — gevonden bij visuele verificatie na
	   deployment, computed grid-template-columns stond op "549px 795px").
	   minmax(0, …) forceert een expliciet minimum van 0 en laat de
	   verhouding wél kloppen. */
	.woocommerce div.product { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
	/* WooCommerce's bundled content-single-product.php rendert de galerij
	   (.images), .summary, de tabs (.woocommerce-tabs) EN "Gerelateerde
	   producten" (.related.products) allemaal als DIRECTE, niet-geneste
	   children van dezelfde div.product (gehookt op
	   woocommerce_after_single_product_summary, binnen dezelfde wrapper-div).
	   Een eerdere ronde loste op dat de tabs niet meer per ongeluk in de
	   brede 2fr-kolom belandden, maar zette ze toen over de VOLLE paginabreedte
	   — de klant bedoelde echter dat Beschrijving/Beoordelingen in dezelfde
	   rechter 1/3-kolom als de prijs/koopknop staan, ONDER die kolom
	   (klantfeedback, zie eindrapport punt 3). Omdat dit geen echte DOM-nesting
	   is, kan dat alleen via expliciete CSS Grid line-plaatsing:
	    - .images: kolom 1, spant BEIDE rijen (rij 1 naast .summary, rij 2
	      naast .woocommerce-tabs) — zo is de galerij-cel precies even hoog als
	      summary+tabs samen, wat de sticky-galerij hieronder nodig heeft.
	    - .summary: kolom 2, rij 1 (ongewijzigd).
	    - .woocommerce-tabs: kolom 2, rij 2 (i.p.v. de vorige volle-breedte-regel).
	    - .related.products/.upsells.products: blijven bewust WEL volle breedte,
	      als aparte sectie ONDER de 2/3-1/3-rij (dat stond al goed en verandert
	      niet) — geen aparte grid-row nodig, CSS Grid's auto-plaatsing schuift
	      een col-1/-1-item vanzelf naar de eerstvolgende rij waar zowel kolom 1
	      als kolom 2 nog vrij zijn (rij 3, want rij 1 en 2 hebben allebei kolom 1
	      al bezet door de gespannen galerij). */
	/* Feedbackronde 6-8-2026, DERDE bugfix op deze plek, zelfde dag — ditmaal de
	   werkelijke root cause i.p.v. nog een symptoombestrijding. De eerste twee
	   pogingen (sticky rechtstreeks op de grid-gestretchte ".images"-cel
	   zetten, en daarna max-height als JS-pixelwaarde) losten allebei een
	   deelprobleem op maar niet de kern: voor een GRID ITEM is de sticky
	   "containing block" (waarbinnen 'm mag stikken/moet loslaten) de HELE
	   grid-container — hier dus heel ".woocommerce div.product", INCLUSIEF de
	   rij waar "Gerelateerde producten" in staat (die deelt dezelfde grid via
	   grid-column:1/-1). Sticky op ".images" zelf laat 'm daardoor pas los na
	   het HELE grid, dus ook nog voorbij Gerelateerde producten — exact de
	   klantklacht ("gallery valt achter de volgende secties"), en géén
	   max-height-waarde (percentage of JS-pixel) verandert daar iets aan, want
	   max-height beperkt alleen de BOXGROOTTE, niet het loslaatmoment.
	   Structurele fix: ".images" weer NESTEN in een eigen wrapper
	   (".yaou-gallery-wrap", toegevoegd door initStickyGalleryWrapper() in
	   main.js, want WooCommerce's markup biedt op deze versie zelf geen
	   apart geneste element — zie de uitleg die hier eerder stond). Die
	   wrapper is de grid-item/gestretchte cel (rij 1-2, dus NIET de rij van
	   Gerelateerde producten); ".images" erbinnen is een gewoon blok-element
	   met ALS containing block die wrapper — daardoor laat sticky wél
	   betrouwbaar los zodra je voorbij summary+tabs scrolt, ruim vóór
	   Gerelateerde producten. max-height:100% is hier weer een gewone,
	   niet-zelfreferentiële percentage (100% van de wrapper, niet van
	   zichzelf) en resolvet nu wél correct — geen JS-meting meer nodig. */
	.yaou-gallery-wrap {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: 0;
		/* ".woocommerce div.product" zet align-items:start (regel hierboven,
		   voor de 2/3-1/3-kolomverdeling) — grid-items krijgen dat als hun
		   DEFAULT align-self, dus zonder deze expliciete override blijft de
		   wrapper op zijn eigen inhoudshoogte staan i.p.v. te stretchen tot
		   summary+tabs samen (gevonden bij het testen van de sticky-fix
		   hierboven: wrapper-hoogte bleek gelijk aan de eigen inhoud, niet aan
		   de gespande rijen — position:sticky had daardoor nauwelijks ruimte
		   om in te "stikken"). */
		align-self: stretch;
	}
	/* LET OP: ".images" is NA de JS-wrap geen directe child meer van
	   "div.product" (zit nu binnen ".yaou-gallery-wrap") — de kind-combinator
	   ">" hieronder is daarom bewust op ".yaou-gallery-wrap" gericht, niet op
	   "div.product". */
	.yaou-gallery-wrap > div.images {
		position: sticky;
		top: calc(var(--header-height) + var(--space-5));
		max-height: 100%;
		overflow: hidden;
	}
	.yaou-gallery-wrap > div.images .woocommerce-product-gallery {
		position: sticky;
		top: calc(var(--header-height) + var(--space-5));
		max-height: 100%;
		overflow: hidden;
	}
	.woocommerce div.product > div.summary {
		grid-column: 2;
		grid-row: 1;
	}
	.woocommerce div.product > .woocommerce-tabs {
		grid-column: 2;
		grid-row: 2;
		/* De unconditionele max-width:720px hieronder (sectie 19) was bedoeld
		   voor de oude volle-breedte-weergave (leesbare regellengte over de
		   hele paginabreedte); in deze 1fr-kolom (~1/3 van de content-breedte,
		   dus al ruim onder 720px) is die beperking overbodig — expliciet
		   opheffen voor de duidelijkheid, ook al heeft 'ie hier in de praktijk
		   toch geen effect. */
		max-width: none;
	}
	.woocommerce div.product > .related.products,
	.woocommerce div.product > .upsells.products {
		grid-column: 1 / -1;
	}
}

/* Productgalerij: vierkante, gecentreerde hoofdafbeelding + duidelijke
   duimnagelrij (bugfix — was een smalle verticale duimnagel-strook zonder
   werkende layout, zie eindrapport). WooCommerce's eigen galerij-CSS is
   sitebreed uitgeschakeld (add_filter('woocommerce_enqueue_styles', ...),
   eigen ontwerpsysteem i.p.v. dubbele stijlen), dus de structurele
   FlexSlider-basisregels (viewport/overflow/slide-breedte) staan hier zelf,
   plus de vierkant/contain-behandeling die overal elders al voor
   productfoto's geldt. De zoom/lightbox/swipe-JS (wc-product-gallery-zoom/
   lightbox/slider theme-support, inc/setup.php) blijft WooCommerce's eigen,
   beproefde functionaliteit — alleen de basislayout is hier eigen CSS. */
.woocommerce-product-gallery { position: relative; }
.woocommerce-product-gallery .flex-viewport {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
}
/* Bugfix, gevonden bij interactieve verificatie van punt 3/4 (scroll-/
   klikgedrag onthulde 'm, puur visueel/statisch was 'ie niet zichtbaar —
   zie hieronder waarom): de WooCommerce-versie op deze omgeving (10.9,
   style.css) rendert de galerij-wrapper en elke slide als een kale <div>
   (class "woocommerce-product-gallery__wrapper"/"woocommerce-product-gallery__image"),
   NIET als <ul>/<li> zoals deze regel vereiste. Zonder overeenkomende tag
   matchte deze regel dus NOOIT — white-space:nowrap op de wrapper (nodig om
   de slides in FlexSlider's horizontale filmstrip-opstelling naast elkaar
   te houden i.p.v. te laten omslaan) werd hierdoor nergens toegepast. Elke
   losse slide-<div> heeft zelf `white-space:normal` (regel hieronder) en
   `display:inline-block; width:100%`, dus zonder de nowrap-regel op de
   wrapper omsloegen de 3 slides gewoon naar een nieuwe regel/onder elkaar in
   plaats van naast elkaar te blijven staan. In combinatie met FlexSlider's
   eigen JS die de wrapper-breedte instelt op 100% x aantal slides (hier
   600% voor 3 slides, ivm animationLoop-clones) leidde dat tot een
   duizenden pixels hoge galerij (elke slide "gecontained" op zijn eigen,
   veel te brede 600%-aandeel i.p.v. z'n echte 100%/aantal-slides-breedte).
   Fix: tag-onafhankelijke class-selector (matcht zowel <ul>/<li> als de
   huidige <div>-markup, dus blijft ook werken als een toekomstige
   WooCommerce-versie weer terugschakelt naar lijst-markup). */
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery ul.slides {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image {
	display: inline-block;
	width: 100%;
	vertical-align: top;
	white-space: normal;
	text-align: center;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	/* Bugfix: zonder max-height werd de foto altijd even hoog als de kolom
	   breed is, los van de hoogte van summary+tabs ernaast (zie ook de
	   max-height op de .images-ouder hierboven). ~96px marge voor de
	   duimnagelstrip + spacing eronder. Browsers houden bij aspect-ratio +
	   width:100% + max-height de verhouding aan en krimpen de breedte mee
	   zodra max-height de bindende grens is, dus margin-inline:auto om 'm
	   gecentreerd te houden als de foto smaller wordt dan de kolom. */
	max-height: calc(100vh - var(--header-height) - var(--space-5) - var(--space-6) - 96px);
	margin-inline: auto;
	object-fit: contain;
	object-position: center;
	background: var(--color-bg-alt);
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 72px; }
.woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	border: 2px solid var(--color-border);
	cursor: pointer;
	opacity: 0.7;
	transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active { border-color: var(--brand-500); opacity: 1; }

/* Vorige/volgende-pijltjes op de hoofdafbeelding (klantwens, zie eindrapport
   punt 4) — client-side toegevoegd door initGalleryNav() (assets/js/main.js)
   zodra de duimnagelstrip er is, zelfde overlay-knopstijl als de bestaande
   zoom-trigger hierboven (witte cirkel + schaduw). Altijd zichtbaar i.p.v.
   alleen-bij-hover: op mobiel/touch bestaat er geen hover-state, en deze
   knoppen zijn de enige klik-gestuurde galerijnavigatie (naast de duimnagels
   zelf en WooCommerce's eigen swipe-gedrag).
   `top` is een fallback tot JS 'm overschrijft met een exacte pixelwaarde
   (positionButtons() in main.js): de knoppen zijn een kind van
   .woocommerce-product-gallery (bevat OOK de duimnagelstrip eronder, dus
   50% van díe hele hoogte zou de knoppen te laag zetten) en bewust GEEN
   kind van .flex-viewport zelf — FlexSlider (WooCommerce's eigen galerij-JS)
   gaat ervan uit dat .flex-viewport alleen de slides-<ul> als kind heeft en
   gebruikt het aantal directe kinderen daarvan voor zijn eigen breedte-/
   slidetelling-berekening; extra knop-elementen daarin bleken die
   berekening te corrumperen (galerij liep uit tot duizenden pixels hoog,
   gevonden bij interactieve verificatie — zie eindrapport punt 4). */
.yaou-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: var(--touch-target);
	height: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 4px rgba(20,17,16,0.18);
	color: var(--color-secondary);
	transition: color var(--transition-fast);
}
.yaou-gallery-nav:hover { color: var(--brand-600); }
.yaou-gallery-nav--prev { left: var(--space-3); }
.yaou-gallery-nav--next { right: var(--space-3); }
.yaou-gallery-nav::before {
	content: '';
	width: 20px; height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}
/* Zelfde chevron/rotatie-techniek als .woocommerce-pagination hierboven:
   de bron-mask is een neerwaartse chevron ("V"), rotate(90deg)/rotate(-90deg)
   draait 'm naar links- resp. rechtswijzend. */
.yaou-gallery-nav--prev::before { transform: rotate(90deg); }
.yaou-gallery-nav--next::before { transform: rotate(-90deg); }

/* Zoom/lightbox-trigger (PhotoSwipe, WooCommerce's eigen
   wc-single-product.js — theme-support "wc-product-gallery-lightbox",
   inc/setup.php): WooCommerce rendert hierin standaard een HARDCODED
   vergrootglas-EMOJI (🔍) als "knop"-inhoud, zonder enige eigen opmaak —
   precies het soort ingebouwd emoji-icoon waar de harde "geen emoji's"-regel
   voor waarschuwt (kwam pas naar voren bij een browser-render-check, stond
   niet in de kale server-HTML omdat wc-single-product.js 'm client-side
   toevoegt). Tekst visueel verbergen (font-size:0, zelfde patroon als de
   header-iconknoppen) en een eigen SVG-vergrootglas via mask tonen, plus
   nette positionering or de galerij (had zelf nog geen enkele stijl). */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 5;
	width: var(--touch-target);
	height: var(--touch-target);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--white);
	border-radius: var(--radius-pill);
	box-shadow: 0 1px 4px rgba(20,17,16,0.18);
	color: var(--color-secondary);
	transition: color var(--transition-fast);
}
.woocommerce-product-gallery__trigger:hover { color: var(--brand-600); }
.woocommerce-product-gallery__trigger span {
	font-size: 0;
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21 21-4.34-4.34'/><circle cx='11' cy='11' r='8'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21 21-4.34-4.34'/><circle cx='11' cy='11' r='8'/></svg>") center / contain no-repeat;
}

.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--brand-600); font-size: 1.375rem; font-weight: 600; }
.yaou-price-per-maat { font-size: 1rem; font-weight: 500; color: var(--color-secondary); font-style: italic; }

/* Verlanglijst-hartje op de single-productpagina (kritieke bugfix, zie
   eindrapport + inc/woocommerce.php voor de wrapper-div). yaou-wishlist-btn
   is standaard position:absolute (bedoeld voor de productkaart in de
   shop-loop); hier laten we 'm gewoon meestromen naast de titel i.p.v.
   absoluut over de hele pagina te laten zweven. */
.yaou-single-wishlist {
	display: inline-flex;
	margin: var(--space-2) 0 var(--space-4);
}
.yaou-single-wishlist .yaou-wishlist-btn {
	position: static;
	box-shadow: none;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
}
.yaou-single-wishlist .yaou-wishlist-btn:hover,
.yaou-single-wishlist .yaou-wishlist-btn.is-active { border-color: var(--brand-500); }

/* Toevoegen-aan-winkelwagen-knop op de productpagina consistent met de rest
   van de site (zelfde pill-vorm/kleur als .button--primary elders). */
.woocommerce div.product .cart .button,
.woocommerce div.product .cart button.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-6);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	background: var(--brand-600);
	color: var(--white);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.woocommerce div.product .cart .button:hover,
.woocommerce div.product .cart button.single_add_to_cart_button:hover { background: var(--brand-500); }
.woocommerce div.product .quantity input.qty {
	min-height: var(--touch-target);
	width: 4.5rem;
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white);
	text-align: center;
}
.woocommerce div.product .quantity input.qty:focus { border-color: var(--brand-500); outline: none; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-4); }

/* Gerelateerde producten: zelfde sectieritme als de rest van de site. */
.related.products { margin-top: var(--space-9); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.related.products > h2 { margin-bottom: var(--space-2); }

/* Feedbackronde 6-8-2026 (klantwens): WooCommerce's ingebouwde variatie-
   kiezer (table.variations, bv. Maat + Kleur koffer op een variabel product
   als Cellokoffer) had nog GEEN enkele eigen stijl — kale browser-default
   <select>-vakjes in een ongestylede tabel (klantfeedback-screenshot).
   Bewust NATIVE <select> gehouden (geen JS-vervanging zoals .yaou-custom-select
   elders) — WooCommerce's eigen variation-form.js luistert op change-events
   van dít element en (de)activeert opties op basis van voorraad/andere
   selectie; alleen CSS eromheen, zelfde vormtaal (rand/radius/pijltje) als
   de shop-filter-selects hierboven (sectie 12). */
.woocommerce div.product table.variations { width: 100%; border: none; margin-bottom: var(--space-2); }
.woocommerce div.product table.variations tr { display: flex; flex-direction: column; margin-bottom: var(--space-4); }
.woocommerce div.product table.variations tr:last-child { margin-bottom: 0; }
.woocommerce div.product table.variations th.label {
	text-align: left;
	padding: 0 0 var(--space-2);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-text);
}
.woocommerce div.product table.variations td.value { padding: 0; display: flex; align-items: center; gap: var(--space-3); }
.woocommerce div.product table.variations select {
	width: 100%;
	min-height: var(--touch-target);
	padding: 0 var(--space-7) 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--white);
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--space-3) center;
	background-size: 16px;
	transition: border-color var(--transition-fast);
}
.woocommerce div.product table.variations select:focus { border-color: var(--brand-500); outline: none; }
.woocommerce div.product table.variations select:disabled { opacity: 0.5; cursor: not-allowed; }
.woocommerce div.product a.reset_variations {
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-secondary);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.woocommerce div.product a.reset_variations:hover { color: var(--brand-600); }
/* Bugfix: bij variabele producten zitten hoeveelheid + knop genest in dit
   element (i.p.v. rechtstreeks in form.cart), dus de flex+gap hierboven op
   form.cart raakte ze niet — stonden zonder tussenruimte strak op elkaar
   (klantfeedback-screenshot, "Vioolkoffer D"). Zelfde flex+gap-aanpak hier
   herhaald zodat ze wél los van elkaar staan. */
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--space-3); font-size: 1.25rem; font-weight: 600; color: var(--brand-600); }
.woocommerce div.product .woocommerce-variation-availability p.stock { font-weight: 500; }
@media (min-width: 480px) {
	.woocommerce div.product table.variations tr { flex-direction: row; align-items: center; gap: var(--space-4); }
	.woocommerce div.product table.variations th.label { flex: 0 0 140px; padding: 0; }
	.woocommerce div.product table.variations td.value { flex: 1; }
}

.yaou-variation-table-wrap { margin-top: var(--space-6); }
.yaou-variation-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.yaou-variation-table th, .yaou-variation-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.yaou-variation-table thead { background: var(--color-bg-alt); }
.yaou-variation-table tr:last-child td { border-bottom: none; }
.yaou-stock--in { color: var(--color-success); font-weight: 500; }
.yaou-stock--out { color: var(--color-error); font-weight: 500; }

/* ===== 14. Forms & notices ===== */

.yaou-form__field { margin-bottom: var(--space-4); }
.yaou-form__field label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.yaou-form__field input, .yaou-form__field textarea {
	width: 100%;
	min-height: var(--touch-target);
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white);
}
.yaou-form__field input:focus, .yaou-form__field textarea:focus { border-color: var(--brand-500); }
.yaou-form__field textarea { min-height: 120px; }
.yaou-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.yaou-form-notice { padding: var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.yaou-form-notice--success { background: #DCFCE7; color: var(--color-success); }
.yaou-form-notice--error { background: #FEE2E2; color: var(--color-error); }

.yaou-rental-grid { display: grid; gap: var(--space-7); }
@media (min-width: 860px) { .yaou-rental-grid { grid-template-columns: 1fr 1fr; } }
.yaou-rental-form-wrap { background: var(--color-bg-alt); padding: var(--space-6); border-radius: var(--radius-lg); }

.yaou-contact-grid { display: grid; gap: var(--space-7); }
@media (min-width: 860px) { .yaou-contact-grid { grid-template-columns: 1.2fr 1fr; } }
.yaou-contact-card { background: var(--color-bg-alt); padding: var(--space-6); border-radius: var(--radius-lg); align-self: start; }
.yaou-contact-card p { margin: 0 0 var(--space-3); display: flex; align-items: center; }
.yaou-contact-card p a:hover { color: var(--brand-600); text-decoration: underline; }
.yaou-contact-card__legal { color: var(--color-secondary); font-size: 0.8125rem; margin-top: var(--space-5) !important; }

/* ===== 15. Blog ===== */

.yaou-blog-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-2); }
@media (min-width: 720px) { .yaou-blog-grid { grid-template-columns: repeat(3, 1fr); } }
.yaou-blog-card a { display: block; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.yaou-blog-card a:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
/* Feedbackronde 6-8-2026: 1:1 i.p.v. 16:10 (klantwens, vaste vierkante
   blogafbeeldingen). */
.yaou-blog-card img,
.yaou-blog-card__placeholder { display: block; width: 100%; border-radius: var(--radius-md); aspect-ratio: 1/1; object-fit: cover; background: var(--color-bg-alt); }
.yaou-blog-card__date { display: block; margin-top: var(--space-3); font-size: 0.8125rem; font-weight: 600; color: var(--color-accent-text); text-transform: uppercase; letter-spacing: 0.04em; }
.yaou-blog-card__title { display: block; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-top: var(--space-2); color: var(--brand-900); }
.yaou-blog-card__excerpt { display: block; color: var(--color-secondary); margin-top: var(--space-2); }

/* Feedbackronde 6-8-2026: hero-afbeelding los blogartikel (single.php) had
   nog GEEN enkele eigen stijl (klantfeedback "afbeelding niet gecentreerd").
   object-fit:cover + object-position:center + margin-inline:auto garandeert
   dat de foto altijd gecentreerd/gevuld oogt ongeacht bronverhouding, i.p.v.
   op intrinsieke grootte te renderen. */
.yaou-article__thumb {
	max-width: var(--max-width-narrow);
	margin: 0 auto var(--space-6);
	padding-inline: var(--space-5);
}
.yaou-article__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center;
	margin-inline: auto;
	border-radius: var(--radius-lg);
}

/* ===== 21. Gutenberg-blokken (blog) ===== */

/* Geldt automatisch voor ELKE blogpost: single.php zet the_content() in
   .yaou-prose (zie sectie 4 hierboven voor de basis-p/ul/ol/a-stijl); deze
   sectie vult dat aan met alle overige kernblok-typen (koppen, citaat,
   afbeelding, galerij, tabel, code, scheidingslijn, knop, kolommen, embed) —
   niets hiervan hoeft per post ingesteld te worden (klantwens "sjabloon
   automatisch op alle blogposts", zie eindrapport). WordPress' eigen
   wp-block-library-CSS laadt nog steeds mee (kern-gedrag, niet uitgezet);
   deze regels overschrijven 'm met de site-huisstijl (laden ná de
   kern-stylesheet, zie inc/enqueue.php-toelichting in het eindrapport). */

.yaou-prose h2 { font-size: 1.75rem; }
.yaou-prose h3 { font-size: 1.375rem; margin-top: var(--space-6); }
.yaou-prose > *:first-child { margin-top: 0; }

.yaou-prose ol { list-style: decimal; }
.yaou-prose ul ul, .yaou-prose ol ol, .yaou-prose ul ol, .yaou-prose ol ul { margin-top: var(--space-2); }
.yaou-prose li { margin-bottom: var(--space-2); }

/* Citaat/quote */
.yaou-prose .wp-block-quote,
.yaou-prose blockquote {
	margin: var(--space-7) 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-5);
	border-left: 3px solid var(--brand-500);
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--brand-900);
}
.yaou-prose .wp-block-quote p:last-of-type { margin-bottom: var(--space-2); }
.yaou-prose .wp-block-quote cite,
.yaou-prose .wp-block-quote__citation {
	display: block;
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-secondary);
}
.yaou-prose .wp-block-pullquote {
	margin: var(--space-8) 0;
	padding: var(--space-7) 0;
	border-top: 2px solid var(--brand-500);
	border-bottom: 2px solid var(--brand-500);
	text-align: center;
}
.yaou-prose .wp-block-pullquote blockquote { border-left: none; padding: 0; margin: 0; }
.yaou-prose .wp-block-pullquote p { font-size: 1.5rem; }

/* Afbeelding + bijschrift */
.yaou-prose .wp-block-image { margin: var(--space-6) 0; }
.yaou-prose .wp-block-image img { border-radius: var(--radius-lg); }
.yaou-prose .wp-block-image figcaption,
.yaou-prose .wp-caption-text {
	margin-top: var(--space-2);
	font-size: 0.8125rem;
	color: var(--color-secondary);
	text-align: center;
}

/* Galerij */
.yaou-prose .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
	margin: var(--space-7) 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) { .yaou-prose .wp-block-gallery.columns-3, .yaou-prose .wp-block-gallery { grid-template-columns: repeat(3, 1fr); } }
.yaou-prose .wp-block-gallery .wp-block-image,
.yaou-prose .wp-block-gallery .blocks-gallery-item { margin: 0; }
.yaou-prose .wp-block-gallery img { border-radius: var(--radius-md); aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.yaou-prose .wp-block-gallery figcaption { color: var(--color-secondary); }

/* Tabel */
.yaou-prose .wp-block-table { margin: var(--space-7) 0; overflow-x: auto; }
.yaou-prose .wp-block-table table,
.yaou-prose table {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.yaou-prose table th, .yaou-prose table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; }
.yaou-prose table thead th { background: var(--color-bg-alt); font-family: var(--font-body); font-weight: 600; color: var(--brand-900); }
.yaou-prose table tr:last-child td { border-bottom: none; }

/* Code / voorgeformatteerd */
.yaou-prose .wp-block-code,
.yaou-prose pre {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-5);
	background: var(--brand-900);
	color: var(--gray-50);
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}
.yaou-prose .wp-block-code code,
.yaou-prose code {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	background: none;
	color: inherit;
}
.yaou-prose p code, .yaou-prose li code {
	background: var(--color-bg-alt);
	color: var(--brand-600);
	padding: 0.125em 0.375em;
	border-radius: var(--radius-sm);
	font-size: 0.875em;
}

/* Scheidingslijn */
.yaou-prose .wp-block-separator,
.yaou-prose hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-8) 0;
}
.yaou-prose .wp-block-separator.is-style-wide { border-top-width: 1px; }
.yaou-prose .wp-block-separator.is-style-dots { border: none; text-align: center; line-height: 1; height: auto; }
.yaou-prose .wp-block-separator.is-style-dots::before {
	content: '\2022 \2022 \2022';
	font-size: 1.5rem;
	letter-spacing: 0.5em;
	color: var(--brand-500);
}

/* Knop-blok */
.yaou-prose .wp-block-button { margin: var(--space-6) 0; }
.yaou-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--brand-600);
	color: var(--white);
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none !important;
	transition: background-color var(--transition-fast);
}
.yaou-prose .wp-block-button__link:hover { background: var(--brand-500); }
.yaou-prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--brand-600);
	border: 1px solid var(--brand-600);
}

/* Kolommen */
.yaou-prose .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-7) 0; }
.yaou-prose .wp-block-column { flex: 1 1 240px; min-width: 0; }

/* Embed/video (responsive 16:9-container, ook zonder oEmbed-verbinding een
   nette placeholder-verhouding) */
.yaou-prose .wp-block-embed { margin: var(--space-7) 0; }
.yaou-prose .wp-block-embed__wrapper { position: relative; }
.yaou-prose .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper { aspect-ratio: 16/9; }
.yaou-prose .wp-block-embed iframe,
.yaou-prose .wp-block-embed__wrapper iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
	border-radius: var(--radius-lg);
	border: none;
}
.yaou-prose .wp-block-embed figcaption { color: var(--color-secondary); margin-top: var(--space-2); font-size: 0.8125rem; text-align: center; }

/* ===== 16. Cookiebanner (custom) ===== */

.yaou-cookie-banner {
	position: fixed;
	left: var(--space-4);
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 100;
	max-width: 640px;
	margin-inline: auto;
	background: var(--brand-900);
	color: var(--white);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}
.yaou-cookie-banner__title { font-size: 1.125rem; margin-bottom: var(--space-2); color: var(--white); }
.yaou-cookie-banner p { color: var(--brand-50); margin: 0 0 var(--space-4); font-size: 0.9375rem; }
.yaou-cookie-banner a { text-decoration: underline; color: var(--white); }
.yaou-cookie-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.yaou-cookie-banner .button--ghost { border-color: var(--gray-500); color: var(--white); }
.yaou-cookie-banner .button--ghost:hover { background: rgba(255,255,255,0.1); }
.yaou-cookie-banner .button--primary { background: var(--brand-500); color: var(--white); }
.yaou-cookie-banner .button--primary:hover { background: var(--brand-600); color: var(--white); }

/* ===== 17. 404 ===== */

.yaou-404 { text-align: center; padding-block: var(--space-9); }
.yaou-404 .yaou-search-form--inline { margin-inline: auto; }

/* ===== 18. Mijn account (WooCommerce-standaardtemplates) ===== */

/* WooCommerce's account-templates (inloggen, bestellingen, adressen,
   downloads, gegevens wijzigen, verlanglijst) zijn niet overridden — dit
   thema stylet ze via de standaard WooCommerce-classes, i.p.v. elke template
   te kopiëren, zodat toekomstige WC-updates hier gewoon in blijven werken.
   Klantfeedback: volledig kale standaardweergave inclusief niet-vertaalde
   titel (zie inc/woocommerce.php voor de titel-fix), zie eindrapport. */
.woocommerce-account .yaou-page-content { padding-top: var(--space-6); }

.woocommerce-MyAccount-navigation {
	margin-bottom: var(--space-7);
	border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-secondary);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}
.woocommerce-MyAccount-navigation li a:hover { background: var(--color-bg-alt); color: var(--brand-600); }
.woocommerce-MyAccount-navigation li.is-active a { background: var(--brand-600); color: var(--white); }

.woocommerce-MyAccount-content { max-width: 720px; }
.woocommerce-MyAccount-content .woocommerce-Message,
.woocommerce-form-login,
.woocommerce-ResetPassword,
.woocommerce-EditAccountForm,
.woocommerce-Address {
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}
.woocommerce-form-login p, .woocommerce-EditAccountForm p, .woocommerce-ResetPassword p, .woocommerce-Address p { margin-bottom: var(--space-4); }
.woocommerce-form-login label, .woocommerce-EditAccountForm label, .woocommerce-ResetPassword label, .woocommerce-Address label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.woocommerce-form-login .input-text,
.woocommerce-EditAccountForm .input-text,
.woocommerce-ResetPassword .input-text,
.woocommerce-Address .input-text,
.woocommerce-Addresses select,
.woocommerce-EditAccountForm select {
	width: 100%;
	min-height: var(--touch-target);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white);
}
.woocommerce-form-login .input-text:focus,
.woocommerce-EditAccountForm .input-text:focus,
.woocommerce-ResetPassword .input-text:focus,
.woocommerce-Address .input-text:focus { border-color: var(--brand-500); outline: none; }
.woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.woocommerce-form-login .button, .woocommerce-EditAccountForm .button, .woocommerce-Address .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--brand-600);
	color: var(--white);
	font-weight: 600;
}
.woocommerce-form-login .button:hover, .woocommerce-EditAccountForm .button:hover, .woocommerce-Address .button:hover { background: var(--brand-500); }
.woocommerce-LostPassword { margin-top: var(--space-4); }
.woocommerce-LostPassword a { color: var(--color-accent-text); text-decoration: underline; }

.woocommerce-orders-table, .woocommerce-table { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; border-collapse: separate; border-spacing: 0; }
.woocommerce-orders-table th, .woocommerce-table th { text-align: left; background: var(--color-bg-alt); padding: var(--space-3) var(--space-4); }
.woocommerce-orders-table td, .woocommerce-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.woocommerce-orders-table .button, .woocommerce-table .button {
	display: inline-flex;
	min-height: 36px;
	padding: 0 var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--brand-600);
	color: var(--white);
	font-size: 0.8125rem;
	font-weight: 600;
	align-items: center;
}
.woocommerce-orders-table .button:hover, .woocommerce-table .button:hover { background: var(--brand-500); }

.woocommerce-Addresses { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .woocommerce-Addresses { grid-template-columns: 1fr 1fr; } }
.woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
/* Bugfix: dit `<h2>` erft zowel de globale h-tag-marge als (via de
   `.yaou-prose`-wrapper van page.php, die de MyAccount-shortcode-content
   omsluit) de extra grote `.yaou-prose h2 { margin-top: var(--space-7) }`
   bedoeld voor lopende tekst — binnen deze flex-header duwde die marge de
   kop zichtbaar over de "Toevoegen/Bewerken"-link heen (klantfeedback, zie
   eindrapport). In een flex-header regelt `gap` de afstand, geen marge nodig. */
.woocommerce-Address-title h2 { margin: 0; }
.woocommerce-Address address { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-5); font-style: normal; line-height: 1.7; }

/* Bugfix: de MyAccount-shortcode-content rendert (via page.php) binnen
   dezelfde `.yaou-prose`-wrapper als gewone paginatekst, en erfde daardoor
   `.yaou-prose a { text-decoration: underline }` — bedoeld voor links in
   lopende tekst, maar hier overal toegepast (dashboardkaarten, "Log uit",
   adres-bewerklinks, bestel-acties), wat gedateerd oogde (klantfeedback,
   zie eindrapport). Subtiele accentkleur i.p.v. permanente onderstreping;
   onderstreping komt terug bij hover. Knop-gestijlde links (.button) blijven
   buiten schot, die hebben al hun eigen kleurstijl. */
.yaou-prose .woocommerce-MyAccount-content a:not(.button) {
	color: var(--brand-600);
	text-decoration: none;
}
.yaou-prose .woocommerce-MyAccount-content a:not(.button):hover {
	color: var(--brand-500);
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* De dashboardkaarten en de wishlist-kaarten hierboven hebben al hun eigen
   hover-stijl (schaduw/rand/lift) — geen onderstreping onder het hele
   kaartblok (icoon + titel + omschrijving) daar bovenop. */
.yaou-prose .woocommerce-MyAccount-content .yaou-account-dashboard-cards a,
.yaou-prose .woocommerce-MyAccount-content .yaou-account-dashboard-cards a:hover,
.yaou-prose .woocommerce-MyAccount-content .yaou-wishlist-grid a,
.yaou-prose .woocommerce-MyAccount-content .yaou-wishlist-grid a:hover {
	color: inherit;
	text-decoration: none;
}
/* Feedbackronde 6-8-2026, twee dezelfde-oorzaak-bugs als hierboven, alleen nog
   niet meegenomen: (1) .yaou-prose ul { list-style:disc } (Typography-sectie)
   erft ook door in deze twee kaartgrids (allebei een <ul> binnen dezelfde
   .yaou-prose-wrapper) — bullets vóór elke kaart (klantfeedback verlanglijst-
   screenshot). (2) .yaou-prose a { text-decoration:underline } is destijds
   alleen voor `.woocommerce-MyAccount-content a` gecarved, niet voor de
   TAB-navigatie zelf (.woocommerce-MyAccount-navigation, een sibling van
   -content, dus buiten die eerdere fix) — niet-actieve tabs (Dashboard/
   Downloads/Adressen/...) tonen daardoor nog een onderstreping die niet bij
   het pil-knoppenontwerp past (zie Componentpatronen "Mijn account" in
   DESIGN-SYSTEM.md). */
.yaou-prose .woocommerce-MyAccount-content .yaou-account-dashboard-cards,
.yaou-prose .woocommerce-MyAccount-content .yaou-wishlist-grid {
	list-style: none;
}
.yaou-prose .woocommerce-MyAccount-navigation a {
	text-decoration: none;
}

/* Dashboard-intro: kaart-/knop-links i.p.v. onderstreepte inline tekstlinks
   (klantfeedback, zie eindrapport + woocommerce/myaccount/dashboard.php voor
   de template-override die deze markup rendert). */
.yaou-account-dashboard-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	margin: var(--space-6) 0;
}
@media (min-width: 640px) { .yaou-account-dashboard-cards { grid-template-columns: repeat(4, 1fr); } }
.yaou-account-dashboard-cards li { display: flex; }
.yaou-account-dashboard-cards a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	width: 100%;
	background: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.yaou-account-dashboard-cards a:hover { box-shadow: var(--shadow-card-hover); border-color: var(--brand-500); transform: translateY(-2px); }
.yaou-account-dashboard-cards .yaou-icon--lg { margin: 0; }
.yaou-account-dashboard-cards__title { font-weight: 600; color: var(--brand-900); }
.yaou-account-dashboard-cards__desc { font-size: 0.8125rem; color: var(--color-secondary); }

/* ===== 19. WooCommerce Blocks (Cart/Checkout) ===== */

/* De Cart- en Checkout-pagina's zijn WooCommerce Blocks (Gutenberg), niet de
   klassieke shortcode-templates die de rest van dit thema aanneemt (zie
   inc/woocommerce.php) — andere, eigen classnamen-familie
   (.wp-block-woocommerce-*/.wc-block-*), losstaand van de WooCommerce
   front-end-CSS die sitebreed is uitgeschakeld. Deze sectie stemt die eigen
   Blocks-CSS af op het site-ontwerp (typografie erft al mee via de globale
   h1-h6-regel, dit is voornamelijk kleur/vorm/afstand). Klantfeedback: pagina
   stond in het Engels, ongestyled, met WooCommerce's eigen "verdrietig
   gezichtje"-icoon bij een lege winkelmand — zie ook de titel-vertaalfix in
   inc/woocommerce.php en de post_content-migratie van de statische
   Heading-blokteksten (eenmalig via wp-cli, zelfde root cause als de
   "My account"-titelbug hierboven). */

.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { margin-top: var(--space-2); }

.wc-block-components-loading-mask { opacity: 0.6; }

.wc-block-components-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a,
a.wc-block-cart__submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--touch-target);
	padding: 0 var(--space-6) !important;
	border-radius: var(--radius-pill) !important;
	font-weight: 600;
	font-size: 0.9375rem;
	background: var(--brand-600) !important;
	color: var(--white) !important;
	border: none !important;
	transition: background-color var(--transition-fast);
}
.wc-block-components-button:hover,
.wp-block-woocommerce-cart .wc-block-cart__submit-container a:hover { background: var(--brand-500) !important; }
.wc-block-components-button.wc-block-components-button--outlined,
.wc-block-components-button.is-link {
	background: transparent !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-primary) !important;
}

.wc-block-components-totals-item__value,
.wc-block-components-totals-item__label { color: var(--color-text); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--brand-600);
}

.wc-block-components-product-name { color: var(--brand-900); font-weight: 600; }
.wc-block-components-product-price .wc-block-components-formatted-money-amount { color: var(--brand-600); font-weight: 600; }

/* Bugfix: WooCommerce's eigen Cart-block-CSS zet zelf al padding op de
   rijen, maar die staat los van onze spacing-schaal en oogt nog steeds krap
   tegen de horizontale scheidingslijnen aan, zeker met de gestapelde inhoud
   (titel/prijs/omschrijving/hoeveelheidsstappers) in één rij (klantfeedback,
   zie eindrapport). !important omdat de laadvolgorde t.o.v. WooCommerce's
   eigen blocks-CSS niet gegarandeerd is (zelfde aanpak als de
   knop-/totalen-overrides hierboven). */
.wc-block-cart-items__row td,
.wc-block-cart-items__header th {
	padding-top: var(--space-6) !important;
	padding-bottom: var(--space-6) !important;
}
.wc-block-cart-item__image { padding-left: var(--space-5) !important; }
.wc-block-cart-item__total { padding-right: var(--space-5) !important; }

.wc-block-components-quantity-selector,
.wc-block-components-text-input input,
.wc-block-components-radio-control__input,
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="tel"],
.wc-block-checkout__form select {
	border-radius: var(--radius-sm) !important;
	border-color: var(--color-border) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-checkout__form input:focus { border-color: var(--brand-500) !important; }

.wc-block-components-panel,
.wc-block-components-order-summary,
.wc-block-cart-items,
.wc-block-checkout__main,
.wc-block-checkout__sidebar {
	--wc-block-radius: var(--radius-lg);
}
.wc-block-components-panel,
.wc-block-cart-items,
.wc-block-components-order-summary,
.wc-block-components-totals-wrapper {
	border-color: var(--color-border) !important;
	border-radius: var(--radius-lg) !important;
}

/* Lege winkelmand: eigen SVG-icoon i.p.v. WooCommerce's ingebouwde
   "verdrietig gezichtje" (mask-icoon uit WooCommerce Blocks' eigen CSS,
   .with-empty-cart-icon:before) — harde huisregel, geen emoji's/icoontjes
   die als een gezichtje ogen. Zelfde winkelmandje-SVG als het
   "toevoegen-aan-winkelmand"-icoontje elders op de site (sectie 11), zodat
   het visueel bij de rest van de iconenset past. */
.with-empty-cart-icon.wc-block-cart__empty-cart__title { padding-top: var(--space-7); }
.with-empty-cart-icon.wc-block-cart__empty-cart__title::before {
	background-color: var(--gray-400) !important;
	height: 3em !important;
	width: 3em !important;
	margin-bottom: var(--space-4) !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat !important;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>") center / contain no-repeat !important;
}
.wc-block-cart__empty-cart__title { font-family: var(--font-heading); color: var(--brand-900); }
.wp-block-woocommerce-empty-cart-block hr.wp-block-separator { border-color: var(--color-border); margin-block: var(--space-6); max-width: 120px; margin-inline: auto; }
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading { font-family: var(--font-heading); color: var(--brand-900); text-align: center; }

/* ===== 20. Producttabs & beoordelingen ===== */

/* WooCommerce's front-end-CSS is sitebreed uitgeschakeld (zie sectie 13), dus
   de tabbladwissel zelf (WooCommerce's eigen single-product.js, toont/verbergt
   .panel-elementen via inline style, geen CSS-afhankelijkheid) werkte al —
   alleen de VISUELE stijl van de tab-balk/panelen/beoordelingen ontbrak
   volledig (kale WooCommerce-standaardweergave, klantfeedback, zie
   eindrapport). */
.woocommerce-tabs { margin-top: var(--space-8); max-width: 720px; }
/* "Beluister"-tab (feedbackronde 6-8-2026, audiofragment-infrastructuur). */
.yaou-audio-fragment { width: 100%; margin-top: var(--space-4); border-radius: var(--radius-md); }
.woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
	border-bottom: 1px solid var(--color-border);
}
.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.wc-tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.wc-tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-4);
	margin-bottom: -1px;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-secondary);
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--brand-600); }
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.wc-tabs li.active a { color: var(--brand-600); border-color: var(--brand-600); }
.woocommerce-tabs .panel > h2:first-child { font-size: 1.375rem; margin-bottom: var(--space-4); }
.woocommerce-tabs .panel ul { list-style: disc; margin: 0 0 var(--space-4) var(--space-5); }
.woocommerce-tabs .panel ol { margin: 0 0 var(--space-4) var(--space-5); }
.woocommerce-tabs .panel p { color: var(--color-secondary); margin: 0 0 var(--space-4); }

/* Beoordelingen */
.woocommerce-Reviews-title { font-size: 1.25rem; margin-bottom: var(--space-5); }
.woocommerce-noreviews { color: var(--color-secondary); }
#comments .commentlist { margin: 0 0 var(--space-6); list-style: none; padding: 0; }
#comments .commentlist li.comment { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
#comments .commentlist .children { list-style: none; margin: 0; padding-left: var(--space-5); }
.woocommerce-review__author { font-weight: 600; color: var(--brand-900); }
.woocommerce-review__dash { color: var(--gray-400); margin: 0 var(--space-1); }
.woocommerce-review__published-date { color: var(--color-secondary); font-size: 0.8125rem; }
#comments .description { margin-top: var(--space-2); color: var(--color-secondary); }

#review_form_wrapper { max-width: 560px; }
#respond.comment-respond { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-6); }
#reply-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; color: var(--brand-900); display: block; margin-bottom: var(--space-4); }
#reply-title small a { font-size: 0.8125rem; font-weight: 400; text-decoration: underline; color: var(--color-secondary); margin-left: var(--space-2); }
.comment-form-rating label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.comment-form-rating select,
.comment-form-comment textarea,
.comment-form-author input,
.comment-form-email input {
	width: 100%;
	min-height: var(--touch-target);
	padding: 0 var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--white);
	margin-bottom: var(--space-4);
}
.comment-form-comment textarea { min-height: 120px; padding: var(--space-3); }
.comment-form-rating select:focus,
.comment-form-comment textarea:focus,
.comment-form-author input:focus,
.comment-form-email input:focus { border-color: var(--brand-500); outline: none; }
.comment-notes, .comment-form-cookies-consent { font-size: 0.8125rem; color: var(--color-secondary); margin-bottom: var(--space-4); }
#respond .form-submit { margin: 0; }
#respond .form-submit input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--touch-target);
	padding: 0 var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--brand-600);
	color: var(--white);
	font-weight: 600;
	border: none;
}
#respond .form-submit input#submit:hover { background: var(--brand-500); }

/* Sterrenwaardering-widget (WC's eigen JS zet de rating-<select> in
   #comment-form-rating om naar <p class="stars"><a>1..5</a></p> — zie
   assets/js/frontend/single-product.js in WooCommerce-core). Eigen
   SVG-ster-mask i.p.v. WooCommerce's iconenfont, dependency-vrij. */
p.stars { display: flex; gap: 2px; margin-bottom: var(--space-4) !important; }
/* WooCommerce's eigen JS wrapt de <a>-sterren in een extra
   <span role="group"> (toegankelijkheid) — die span is de directe flex-child
   van p.stars, niet de <a>'s zelf, dus p.stars { display:flex } "blockificeert"
   alléén die span. De <a>-elementen zelf bleven daardoor gewoon
   `display: inline` (standaardgedrag voor <a>), waardoor de width/height
   hieronder genegeerd werden door de browser (width/height hebben geen effect
   op inline-elementen) en de ::before-ster-mask op 0×0 uitkwam — het
   "waardering"-veld toonde daardoor geen enkele klikbare ster (lege ruimte,
   klantfeedback). Fix: expliciet inline-block zodat width/height wél gelden. */
p.stars a {
	display: inline-block;
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0;
	color: var(--gray-400);
	transition: color var(--transition-fast);
}
p.stars a::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>") center / contain no-repeat;
}
p.stars a.hover, p.stars a.active { color: var(--brand-500); }

/* Gemiddelde-beoordeling-weergave (samenvatting op de productpagina + evt.
   shop-kaarten) — WooCommerce zet hier zelf een <span style="width:X%">
   in neer (rating-percentage), dat blijft ongewijzigd werken, alleen de
   ster-vorm zelf is eigen SVG i.p.v. WooCommerce's iconenfont. */
.star-rating {
	position: relative;
	overflow: hidden;
	width: 5.4em;
	height: 1.1em;
	line-height: 1.1em;
	font-size: 0.9375rem;
	margin: var(--space-2) 0;
}
.star-rating::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--gray-200);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>") repeat-x left center;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>") repeat-x left center;
	-webkit-mask-size: 1.08em 1.1em;
	mask-size: 1.08em 1.1em;
}
/* De span krijgt van WooCommerce zelf een inline style="width:X%" (rating-
   percentage) — hier bewust GEEN eigen width zetten, dat zou die inline
   waarde overschrijven. ::before erin is bewust net zo breed als de HELE
   .star-rating-ouder (niet 100% van de eigen, procentuele span-breedte),
   zodat overflow:hidden op de span 'm op het juiste percentage afknipt.

   Bugfix (gevonden bij verificatie met een echte klantbeoordeling, zie
   eindrapport — tot dan toe had nog geen enkel product reviews, dus dit was
   nooit zichtbaar getest): WooCommerce zet in deze span zelf ook LETTERLIJKE
   tekst neer ("Rated X out of 5 based on N customer ratings"), bedoeld als
   schermlezer-only-omschrijving, geen zichtbare content. `overflow:hidden`
   alléén verbergt 'm niet — de tekst wordt gewoon bovenop de ster-iconen
   getekend zodra 'ie binnen de (kleine) box past, wat een onleesbare
   overlap gaf. WooCommerce's eigen (hier uitgeschakelde) front-end-CSS lost
   dit op met een `padding-top` ter grootte van de zichtbare sterrenhoogte:
   de tekst stroomt daardoor pas ONDER de zichtbare 1.1em-hoogte, waarna de
   buitenste `.star-rating` ('m vaste hoogte + overflow:hidden) 'm wegknipt.
   Zelfde techniek hier overgenomen (i.p.v. `inset:0 auto 0 0` dat de span
   zelf al op de zichtbare hoogte klemde, wat de tekst geen ruimte gaf om
   weg te stromen). */
.star-rating span {
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	padding-top: 1.1em;
}
.star-rating span::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: 5.4em;
	height: 1.1em;
	background-color: var(--brand-500);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>") repeat-x left center;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>") repeat-x left center;
	-webkit-mask-size: 1.08em 1.1em;
	mask-size: 1.08em 1.1em;
}