/**
 * Dutch Balance — extra.css
 *
 * Aanvullingen op theme.json. Houd minimaal — meeste styling via theme.json
 * tokens. Hier alleen wat theme.json niet kan: animaties, mix-blend-mode op
 * productfoto's, sticky-header gedrag, custom utility-classes.
 */

/* ===== GEEN HORIZONTALE PAGINA-SCROLL =====
   Voorkomt dat de pagina zijwaarts scrolt als een element (carousel met negatieve
   marges, brede plugin-output, etc.) net buiten de viewport steekt. `clip` knipt af
   ZONDER een scroll-container te maken → de sticky header + fixed overlays blijven werken.
   Vertical scroll blijft normaal. */
html,
body {
	overflow-x: clip;
	max-width: 100%;
}

/* ===== ROOT TOKENS ===== */
:root {
	/* Eén radius door de hele site — pillen (999px), avatars (50%) en focus-rings (4px)
	   blijven semantisch wat ze zijn. De vier vars bestaan nog voor backwards-compat,
	   maar alle vier resolveren naar 15px. Geen 6/20/32px-cards meer. */
	--db-radius: 15px;
	--db-radius-lg: 15px;
	--db-radius-xl: 15px;
	--db-radius-2xl: 15px;

	/* Form-control radius — kleiner dan card-radius (15px). Een select/dropdown
	   leest met 15px te bol; 6px past beter bij het "input"-gevoel. Aparte
	   categorie zoals pillen (999px) en avatars (50%). */
	--db-radius-input-shape: 6px;

	/* Borders — twee zachtheid-stappen door de site. Eén subtle voor
	   dividers/card-borders/section-grenzen, één zwaarder voor form-inputs
	   (zichtbaarder zodat klant ziet waar te typen). */
	--db-border-subtle: rgba(0, 0, 0, 0.08);
	--db-border-input:  rgba(0, 0, 0, 0.12);

	/* Sale-rood — uit het palette, donkerder dan de oude #d44 zodat het
	   in de aardse kleurstemming valt. Gebruikt op badges + prijs-strikes. */
	--db-sale: #C44545;
	--db-sale-badge: #d44; /* Aanbieding-hoekbadge — poppier rood (Valentijn 2026-07-02, richting Vercel-ontwerp) */
	--db-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.04);
	--db-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
	--db-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.08);
	--db-shadow-glow: 0 8px 32px rgba(45, 74, 62, 0.2);
	--db-max-w: 1300px;

	/* ===== VERTICALE SPACING-SCHAAL (één ritme over alle templates) =====
	   Mobiel-waarden hier; desktop hieronder in @media. Gebruik deze tokens
	   i.p.v. losse rem-waarden in templates, zodat header→titel, sectie-tussen-
	   ruimte en pagina-onder overal gelijk zijn (PDP/PLP/cart/pagina/blog). */
	--db-page-top: 1rem;      /* header → breadcrumb (= PDP/PLP-strook, consistent) */
	--db-title-gap: 2rem;     /* breadcrumb → titel (mobiel) */
	--db-page-gap: 1.5rem;    /* page-header → eerste content-sectie */
	--db-page-bottom: 4rem;   /* laatste sectie → footer */
	--db-section-y: 3rem;     /* tussen grote secties binnen een pagina */
}
@media (min-width: 768px) {
	:root {
		--db-title-gap: 3rem; /* breadcrumb → titel desktop (= PDP/PLP ~48px) */
		--db-page-gap: 2rem;
		--db-page-bottom: 5rem;
		--db-section-y: 4rem;
	}
}

/* ===== PAGE-HEADER (consistent over alle pagina's) =====
   Breadcrumb + titel (+ optioneel intro), géén band — op de pagina-achtergrond.
   Eén patroon i.p.v. losse *-head-classes. PDP houdt z'n product-layout maar
   gebruikt dezelfde --db-page-top. Padding in CSS (niet inline block-JSON) zodat
   de tokens + breakpoints overal doorwerken. */
.db-page-header {
	padding-top: var(--db-page-top);     /* header → breadcrumb = 1rem, gelijk aan PDP/PLP */
	padding-bottom: var(--db-page-gap);
	padding-inline: 1.5rem;
}
.db-page-header > * {
	margin-block: 0;
}
.db-page-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 3.6vw, 2.375rem) !important; /* 30px mobiel → 38px desktop — IDENTIEK aan .db-pdp-title/.db-shop-title (canonieke H1) */
	font-weight: 400 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.005em;
	color: var(--wp--preset--color--forest) !important;
	margin-top: var(--db-title-gap) !important; /* breadcrumb → titel, = PDP/PLP-ritme */
}
/* Geen breadcrumb aanwezig (bv. funnel zonder crumb) → titel sluit netjes bovenaan aan */
.db-page-header > .db-page-title:first-child {
	margin-top: 0 !important;
}
/* Optionele eyebrow boven de paginatitel (bv. "Onze selectie" op /merken) */
.db-page-header .db-page-eyebrow {
	margin-top: var(--db-title-gap);
	margin-bottom: 0.6rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}
.db-page-header .db-page-eyebrow + .db-page-title {
	margin-top: 0 !important; /* eyebrow levert al de breadcrumb→titel-ruimte */
}

/* ===== /merken — overzicht (intro + merkenlijst) ===== */
.db-merken-intro {
	margin-bottom: 2.5rem;
}
/* WP's constrained-layout centreert de post-content-kinderen (margin-inline:auto).
   Links uitlijnen op de wrapper-rand, consistent met eyebrow/titel/merkenlijst. */
.db-merken-intro > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.db-merken-intro p {
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0;
}
.db-brands-list {
	list-style: none;
	margin: 0 !important; /* !important: overrule WP constrained-centrering (0,2,0) → links */
	padding: 0;
	max-width: 860px;
	border-top: 1px solid var(--db-border-subtle);
}
.db-brands-item {
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-brands-link {
	display: flex;
	align-items: flex-start;
	gap: 1.75rem;
	padding: 2rem 0;
	text-decoration: none;
	color: inherit;
}
.db-brands-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 168px;
	aspect-ratio: 10 / 7;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.db-brands-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.85rem;
	transition: transform 500ms;
}
.db-brands-link:hover .db-brands-img {
	transform: scale(1.04);
}
.db-brands-body {
	min-width: 0;
	flex: 1 1 auto;
}
.db-brands-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}
.db-brands-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	line-height: 1.2;
}
.db-brands-count {
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
	white-space: nowrap;
}
.db-brands-desc {
	display: block;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal-soft);
	margin-bottom: 0.85rem;
}
.db-brands-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	transition: color 150ms;
}
.db-brands-link:hover .db-brands-cta {
	color: var(--wp--preset--color--forest);
}
.db-brands-cta svg {
	transition: transform 150ms;
}
.db-brands-link:hover .db-brands-cta svg {
	transform: translateX(2px);
}
@media (max-width: 600px) {
	.db-brands-link { gap: 1.1rem; padding: 1.5rem 0; }
	.db-brands-thumb { width: 104px; }
	.db-brands-name { font-size: 20px; }
	.db-brands-desc { font-size: 14px; }
}
/* Body-onderkant via token (top-ruimte komt van .db-page-header's padding-bottom). */
.db-cart {
	padding-bottom: var(--db-page-bottom);
}
/* Lege winkelmand: H1-paginatitel verbergen — de empty-state heeft z'n eigen
   prominente kop ("Je winkelmand is nog leeg"), dus "Winkelmand" eronder is dubbelop.
   Breadcrumb blijft staan (navigatie + consistentie). Reageert client-side: zodra de
   cart leeg is rendert WC alleen de empty-cart-block → titel verdwijnt vanzelf, en
   verschijnt weer zodra er een product in zit. */
body.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .db-page-title {
	display: none;
}
/* Titel verborgen → de title-gap onder de breadcrumb (page-header padding-bottom)
   is dan overbodige warm-white ruimte vóór de cream-band. Weg, zodat de band direct
   onder de breadcrumb-divider aansluit (= 404: cream sluit op de header aan). */
body.woocommerce-cart:has(.wp-block-woocommerce-empty-cart-block) .db-page-header {
	padding-bottom: 0 !important;
}

/* ===== BODY DEFAULTS ===== */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ===== ANNOUNCEMENT BAR ===== */
.db-announcement {
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--sage-light);
	font-size: 13px;
	letter-spacing: 0.3px;
	line-height: 1.4;
}
.db-announcement-inner {
	max-width: var(--db-max-w);
	margin-inline: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.db-announcement-usps,
.db-announcement-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.db-announcement-usps {
	gap: 24px;
}
.db-announcement-usps li {
	display: flex;
	align-items: center;
	gap: 6px;
}
.db-announcement-usps svg {
	flex-shrink: 0;
	opacity: 0.85;
}
.db-announcement-links {
	gap: 24px;
}
.db-announcement-links a {
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	transition: color 150ms;
}
.db-announcement-links a:hover,
.db-announcement-links a:focus-visible {
	color: var(--wp--preset--color--cream);
}

/* Desktop: het ticker-duplicaat van USP #1 niet meetellen in de horizontale rij.
   (Hoge specificiteit nodig: .db-announcement-usps li zet zelf al display:flex.) */
.db-announcement-usps li.db-usp-clone {
	display: none;
}

/* Mobiel (<1024): utility-links weg, USP's als verticale ticker (Coolblue-stijl).
   De drie USP's rouleren één voor één; het aria-hidden duplicaat van USP #1
   maakt de loop naadloos (slide naar -3h = identiek aan 0h → reset onzichtbaar). */
@media (max-width: 1024px) {
	.db-announcement {
		font-size: 12px;
		--db-usp-h: 40px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.db-announcement-inner {
		gap: 0;
		height: var(--db-usp-h);
		overflow: hidden;
		justify-content: center;
	}
	.db-announcement-links {
		display: none;
	}
	.db-announcement-usps li.db-usp-clone {
		display: flex;
	}
	.db-announcement-usps {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		width: 100%;
		animation: db-usp-ticker 10.5s ease-in-out infinite;
	}
	.db-announcement-usps li {
		height: var(--db-usp-h);
		flex-shrink: 0;
		justify-content: center;
		white-space: nowrap;
	}
}
@keyframes db-usp-ticker {
	0%, 28%  { transform: translateY(0); }
	33%, 61% { transform: translateY(calc(-1 * var(--db-usp-h))); }
	67%, 94% { transform: translateY(calc(-2 * var(--db-usp-h))); }
	100%     { transform: translateY(calc(-3 * var(--db-usp-h))); }
}
@media (prefers-reduced-motion: reduce) {
	.db-announcement-usps {
		animation: none !important;
	}
}

/* ===== HEADER (sticky, backdrop-blur) ===== */
.db-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	background: rgba(250, 248, 245, 0.92) !important;
	border-bottom: 1px solid var(--db-border-subtle);
	transition: box-shadow 200ms;
}
.db-header.is-scrolled {
	box-shadow: var(--db-shadow-soft);
}
.db-header-inner {
	max-width: var(--db-max-w);
	margin-inline: auto;
}

/* Logo hoogte uniform — wp-block-site-logo plaatst img */
.db-header .wp-block-site-logo {
	flex-shrink: 0;
}
.db-header .wp-block-site-logo img {
	height: 22px;
	width: auto !important;
	max-width: 240px;
	display: block;
}

/* Navigation styling */
.db-header .wp-block-navigation {
	flex-grow: 1;
	justify-content: center;
}
.db-header .wp-block-navigation .wp-block-navigation-item__content {
	font-size: 14px !important;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	padding: 8px 0;
	transition: color 150ms;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.db-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.db-header .wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--forest);
}

/* Chevron pijltje (auto-toegevoegd door WP bij submenus) — subtieler + correct align */
.db-header .wp-block-navigation__submenu-icon {
	opacity: 0.5;
	padding: 0 0 0 2px !important;
	background: transparent !important;
	border: none !important;
	display: inline-flex !important;
	align-items: center !important;
	width: auto !important; /* override Gutenberg's .6em */
	height: auto !important;
}
.db-header .wp-block-navigation__submenu-icon svg {
	width: 16px !important;
	height: 16px !important;
	display: block;
}

/* ===== DROPDOWN PANEEL (Martijn's stijl 1:1) ===== */
.db-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.db-header .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
	min-width: 280px;
	white-space: nowrap;
	background: var(--wp--preset--color--warm-white) !important;
	border: 1px solid var(--db-border-subtle) !important;
	border-radius: var(--db-radius-lg) !important;
	box-shadow: var(--db-shadow-lg) !important;
	padding: 8px 0 !important;
	margin-top: 0 !important; /* geen gap — voorkomt hover-flicker tussen nav-item en dropdown */
	overflow: hidden;

	/* Gecentreerd onder parent-item (Martijn's stijl — left-1/2 -translate-x-1/2) */
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	top: 100% !important;
}

/* Submenu items */
.db-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px !important;
	font-size: 13px !important;
	font-weight: 400;
	color: var(--wp--preset--color--charcoal-soft);
	transition: background 150ms, color 150ms;
	display: block;
	width: 100%;
}
.db-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
}

/* Voorkom dat submenu-items een chevron krijgen (geen sub-sub) */
.db-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
	display: none;
}

/* "Alles in [categorie]" — eerste link in elke dropdown (Martijn's stijl) */
.db-header .wp-block-navigation .wp-block-navigation__submenu-container .db-nav-overview .wp-block-navigation-item__content {
	color: var(--wp--preset--color--forest) !important;
	font-weight: 600 !important;
}
.db-header .wp-block-navigation .wp-block-navigation__submenu-container .db-nav-overview {
	border-bottom: 1px solid var(--db-border-subtle);
	margin-bottom: 4px;
	padding-bottom: 4px;
}

/* Actions area (search + cart) */
.db-header-actions {
	flex-shrink: 0;
}
.db-header-actions .wp-block-search {
	margin: 0;
}
.db-header-actions .wp-block-search__inside-wrapper {
	border: none;
	padding: 0;
}
.db-header-actions .wp-block-search__input {
	display: none;
}
.db-header-actions .wp-block-search__button {
	background: transparent !important;
	border: 0 !important;
	padding: 8px !important;
	color: var(--wp--preset--color--charcoal-soft) !important;
	transition: color 150ms;
	min-width: auto;
}
.db-header-actions .wp-block-search__button:hover {
	color: var(--wp--preset--color--forest) !important;
}
.db-header-actions .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	/* Lucide-style outline — geen fill, alleen stroke (consistent met andere header-iconen). */
	fill: none !important;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Account + cart links (icon-based) — gedeelde stijl */
.db-account-link,
.db-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
	transition: color 150ms;
}
.db-account-link:hover,
.db-cart-link:hover {
	color: var(--wp--preset--color--forest);
}
.db-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	min-width: 17px;
	height: 17px;
	padding: 0 3px;
	background: var(--wp--preset--color--forest);
	color: #fff;
	font-family: var(--wp--preset--font-family--body); /* niet Playfair — anders brede cijfers */
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	border-radius: 999px;
	border: 2px solid var(--wp--preset--color--warm-white); /* ring → losgekoppeld van het icoon */
	display: flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
}
/* Verberg counter bij 0 — later via JS live update */
.db-cart-count[data-cart-count="0"] {
	display: none;
}

/* ===== ZOEKEN — FiboSearch in uitklap-paneel ===== */
.db-search {
	position: relative;
	display: inline-flex;
}
.db-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--charcoal-soft);
	cursor: pointer;
	transition: color 150ms;
}
.db-search-toggle:hover,
.db-search.is-open .db-search-toggle {
	color: var(--wp--preset--color--forest);
}
/* De FiboSearch-vorm zelf is verborgen (alleen het icoon hierboven is zichtbaar),
   maar moet in de DOM blijven zodat FiboSearch initialiseert + de overlay-trigger
   aanmaakt. Visueel verbergen (niet display:none — dan init FiboSearch niet correct). */
.db-search-host {
	position: absolute;
	visibility: hidden;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	pointer-events: none;
}

/* ===== FiboSearch full-screen overlay op de huisstijl ===== */
/* Topbalk van de overlay (back-knop + zoekveld). */
.dgwt-wcas-overlay-mobile .dgwt-wcas-om-bar,
.dgwt-wcas-om-bar {
	background: var(--wp--preset--color--warm-white) !important;
	border-bottom: 1px solid var(--db-border-subtle) !important;
	box-shadow: none !important;
}
/* Back-knop: grijze blok weg, schone forest pijl. */
.dgwt-wcas-om-return {
	background: transparent !important;
	color: var(--wp--preset--color--forest) !important;
}
.dgwt-wcas-om-return svg,
.dgwt-wcas-om-return svg path {
	fill: var(--wp--preset--color--forest) !important;
}
/* Zoekveld in de overlay. */
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-input,
.dgwt-wcas-om-bar .dgwt-wcas-search-input {
	font-size: 16px !important;
	color: var(--wp--preset--color--charcoal) !important;
	background: transparent !important;
}
.dgwt-wcas-overlay-mobile .dgwt-wcas-search-input::placeholder {
	color: var(--wp--preset--color--text-muted) !important;
	opacity: 1 !important;
}
/* Magnifier-icoon in het overlay-veld. */
.dgwt-wcas-om-bar .dgwt-wcas-search-icon svg,
.dgwt-wcas-om-bar .dgwt-wcas-search-icon svg path {
	fill: var(--wp--preset--color--text-muted) !important;
}
/* "Toon alle resultaten" / suggestie-hover in de huisstijl. */
.dgwt-wcas-suggestion:hover,
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-hovered {
	background: var(--wp--preset--color--cream) !important;
}

/* ===== HERO (Sectie C) ===== */
.db-hero {
	background: linear-gradient(180deg, var(--wp--preset--color--warm-white) 0%, var(--wp--preset--color--cream) 100%);
	max-width: 100% !important;
	overflow: hidden;
}
.db-hero > .wp-block-columns {
	max-width: var(--db-max-w);
	margin-inline: auto;
}

/* Eyebrow — small caps, teal, klein */
.db-eyebrow {
	font-size: 12px !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	font-weight: 500;
	margin: 0;
}

/* Hero title — fluid serif */
.db-hero-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.01em;
}
.db-hero-title em {
	font-style: italic;
	color: var(--wp--preset--color--teal);
}

/* Hero lead-text */
.db-hero-lede {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal-soft);
	max-width: 540px;
	font-weight: 300;
}

/* CTA buttons — extra padding voor hero */
.db-hero-ctas .wp-block-button .wp-block-button__link {
	padding: 0.9rem 1.75rem !important;
	font-size: 15px;
	font-weight: 500;
	transition: all 250ms;
	box-shadow: var(--db-shadow-soft);
}
.db-hero-ctas .wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--db-shadow-md);
}

/* Trust row inline */
.db-hero-trust {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 2rem 0 0 0;
}
.db-hero-trust li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	font-weight: 400;
}
.db-hero-trust svg {
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

/* Visual column — placeholder image + floating-card */
.db-hero-image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
	max-width: 480px;
	margin-left: auto;
}
.db-hero-image {
	width: 100%;
	height: 100%;
	border-radius: var(--db-radius-2xl);
	background-image: url('https://dutchbalance.com/wp-content/uploads/2026/07/Dutch-Balance-CBD-olie-10-procent-1024x1024.jpg');
	background-size: cover;
	background-position: center;
	box-shadow: var(--db-shadow-lg);
	position: relative;
	overflow: hidden;
}

/* Float-card — social proof boven foto */
.db-hero-floatcard {
	position: absolute;
	bottom: -1.5rem;
	left: -1.5rem;
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--db-radius-lg);
	padding: 1rem 1.25rem;
	box-shadow: var(--db-shadow-md);
	min-width: 220px;
	z-index: 2;
}
.db-hero-floatcard-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 0.25rem;
	font-weight: 500;
}
.db-hero-floatcard-product {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin-bottom: 0.25rem;
	font-size: 16px;
}
.db-hero-floatcard-rating {
	font-size: 12px;
	color: var(--wp--preset--color--charcoal-soft);
	letter-spacing: 0.04em;
}

/* Hero mobile */
@media (max-width: 768px) {
	.db-hero {
		padding: 3rem 1rem 4rem !important;
	}
	.db-hero-cols .wp-block-column {
		flex-basis: 100% !important;
	}
	.db-hero-visual {
		order: -1;
		margin-bottom: 2rem;
	}
	.db-hero-image-wrap {
		max-width: 100%;
		aspect-ratio: 16/12;
	}
	.db-hero-floatcard {
		left: 1rem;
		bottom: -1rem;
		min-width: auto;
	}
	.db-hero-ctas {
		flex-direction: column;
	}
	.db-hero-ctas .wp-block-button {
		width: 100%;
	}
	.db-hero-ctas .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* ===== SECTIE HEADERS (gedeeld) ===== */
.db-section-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}
.db-section-title em {
	font-style: italic;
	color: var(--wp--preset--color--teal);
}
.db-section-subtitle {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal-soft);
	font-weight: 300;
}
.db-section-header-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.db-section-header-flex .db-section-title {
	margin: 0.5rem 0 0.5rem 0;
}
.db-section-header-flex .db-section-subtitle {
	margin: 0;
}
.db-link-ghost {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	text-decoration: none;
	padding: 6px 0;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms;
	flex-shrink: 0;
}
.db-link-ghost:hover {
	border-bottom-color: var(--wp--preset--color--forest);
}

/* ===== SECTIE D — TRUST STRIP ===== */
.db-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.db-trust-item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-trust-item strong {
	display: block;
	color: var(--wp--preset--color--forest);
	font-weight: 500;
	margin-bottom: 2px;
	font-size: 15px;
}
.db-trust-sub {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.4;
	font-weight: 300;
}
.db-trust-icon {
	width: 44px;
	height: 44px;
	background: #eaf0e9;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--forest);
	flex-shrink: 0;
}

/* ===== SECTIE E — DOELEN GRID ===== */
.db-doelen-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.db-doel-card {
	display: block;
	padding: 2rem;
	border-radius: var(--db-radius-2xl);
	text-decoration: none;
	transition: transform 250ms, box-shadow 250ms;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.db-doel-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--db-shadow-md);
}
.db-doel-icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	border-radius: var(--db-radius-lg);
	background: rgba(255, 255, 255, 0.55);
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}
.db-doel-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 0.4rem;
	line-height: 1.2;
}
.db-doel-desc {
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.8;
	margin-bottom: 1.5rem;
	font-weight: 300;
}
.db-doel-count {
	font-size: 13px;
	font-weight: 500;
}

/* Doel-categorie kleuren */
.db-doel-slaap { background: var(--wp--preset--color--goal-slaap-bg); color: var(--wp--preset--color--goal-slaap); }
.db-doel-energie { background: var(--wp--preset--color--goal-energie-bg); color: var(--wp--preset--color--goal-energie); }
.db-doel-ontspanning { background: var(--wp--preset--color--goal-ontspanning-bg); color: var(--wp--preset--color--goal-ontspanning); }
.db-doel-weerstand { background: var(--wp--preset--color--goal-weerstand-bg); color: var(--wp--preset--color--goal-weerstand); }
.db-doel-gewrichten { background: var(--wp--preset--color--goal-gewrichten-bg); color: var(--wp--preset--color--goal-gewrichten); }
.db-doel-dagelijks { background: #eef2f0; color: var(--wp--preset--color--forest); }

/* ===== SECTIE F — BESTSELLERS ===== */
.db-products-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.db-product-card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 300ms;
}
.db-product-card:hover {
	transform: translateY(-4px);
}
.db-product-img {
	position: relative;
	aspect-ratio: 1/1;
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	background: var(--wp--preset--color--cream);
	margin-bottom: 14px;
}
.db-product-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: multiply;
	display: block;
}
.db-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 6px;
	z-index: 1;
}
.db-badge-dark { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--cream); }
.db-badge-sage { background: var(--wp--preset--color--sage); color: var(--wp--preset--color--forest-deep); }
.db-badge-new { background: var(--wp--preset--color--goal-energie); color: white; }

.db-product-body {
	padding: 0 4px;
}
.db-product-cat {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	font-weight: 500;
	margin-bottom: 4px;
}
.db-product-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin-bottom: 4px;
	line-height: 1.25;
}
.db-product-short {
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	line-height: 1.4;
	margin-bottom: 10px;
	font-weight: 300;
}
.db-product-price {
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin-bottom: 10px;
}
.db-product-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}
.db-product-link {
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}
.db-product-subscribe {
	color: var(--wp--preset--color--text-muted);
	font-size: 12px;
}

/* ===== SECTIE G — STACKS ===== */
.db-stacks-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}
.db-stack-card {
	display: block;
	padding: 2rem 1.5rem;
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--db-radius-2xl);
	text-decoration: none;
	color: inherit;
	transition: transform 250ms, box-shadow 250ms;
	box-shadow: var(--db-shadow-soft);
}
.db-stack-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--db-shadow-md);
}
.db-stack-icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	color: white;
}
.db-stack-slaap .db-stack-icon { background: var(--wp--preset--color--goal-slaap); }
.db-stack-ontspanning .db-stack-icon { background: var(--wp--preset--color--goal-ontspanning); }
.db-stack-energie .db-stack-icon { background: var(--wp--preset--color--goal-energie); }
.db-stack-gewrichten .db-stack-icon { background: var(--wp--preset--color--goal-gewrichten); }

.db-stack-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 4px;
}
.db-stack-slaap .db-stack-label { color: var(--wp--preset--color--goal-slaap); }
.db-stack-ontspanning .db-stack-label { color: var(--wp--preset--color--goal-ontspanning); }
.db-stack-energie .db-stack-label { color: var(--wp--preset--color--goal-energie); }
.db-stack-gewrichten .db-stack-label { color: var(--wp--preset--color--goal-gewrichten); }

.db-stack-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin-bottom: 0.5rem;
	line-height: 1.2;
}
.db-stack-products {
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	line-height: 1.4;
	margin-bottom: 1.25rem;
	font-weight: 300;
}
.db-stack-meta {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 1rem;
}
.db-stack-price {
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}
.db-stack-discount {
	font-size: 13px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--cream);
}
.db-stack-slaap .db-stack-discount { color: var(--wp--preset--color--goal-slaap); }
.db-stack-ontspanning .db-stack-discount { color: var(--wp--preset--color--goal-ontspanning); }
.db-stack-energie .db-stack-discount { color: var(--wp--preset--color--goal-energie); }
.db-stack-gewrichten .db-stack-discount { color: var(--wp--preset--color--goal-gewrichten); }

.db-stack-cta {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
}

/* ===== SECTIE H — FOUNDER ===== */
.db-founder {
	max-width: 100% !important;
	position: relative;
	color: var(--wp--preset--color--cream);
	overflow: hidden;
}
.db-founder-bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, rgba(30, 53, 41, 0.85), rgba(30, 53, 41, 0.9)),
		url('../images/founder-bg.jpg');
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.db-founder-inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.db-founder-eyebrow {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sage-light);
	font-weight: 500;
	margin: 0 0 1.5rem 0;
}
.db-founder-quotemark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 5rem;
	line-height: 0.8;
	color: var(--wp--preset--color--sage-light);
	opacity: 0.7;
	margin-bottom: 0;
}
.db-founder-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	font-weight: 400;
	line-height: 1.3;
	margin: 0 0 1.5rem 0;
	color: var(--wp--preset--color--cream);
	letter-spacing: -0.005em;
	padding: 0;
	border: none;
}
.db-founder-text {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(245, 241, 235, 0.85);
	font-weight: 300;
	margin-bottom: 2.5rem;
}
.db-founder-sig {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 2rem;
}
.db-founder-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--sand);
}
.db-founder-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.db-founder-sig-text {
	text-align: left;
}
.db-founder-name {
	font-weight: 500;
	font-size: 15px;
	color: var(--wp--preset--color--cream);
}
.db-founder-role {
	font-size: 13px;
	color: rgba(245, 241, 235, 0.7);
}
.db-founder-cta-wrap { text-align: center; }
.db-founder-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	transition: color 200ms;
}
.db-founder-cta:hover { color: var(--wp--preset--color--cream); }

/* ===== SECTIE I — KENNISCENTRUM ===== */
.db-kennis-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.db-kennis-card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	box-shadow: var(--db-shadow-soft);
	transition: transform 300ms, box-shadow 300ms;
}
.db-kennis-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--db-shadow-md);
}
.db-kennis-img {
	aspect-ratio: 16/10;
	overflow: hidden;
}
.db-kennis-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.db-kennis-body {
	padding: 1.5rem;
}
.db-kennis-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 1rem;
}
.db-kennis-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
	line-height: 1.3;
	margin: 0 0 0.75rem 0;
}
.db-kennis-excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--charcoal-soft);
	font-weight: 300;
	margin-bottom: 1rem;
}
.db-kennis-read {
	font-size: 13px;
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}

/* ===== SECTIE J — REVIEWS ===== */
.db-reviews-stat {
	text-align: right;
}
.db-reviews-score {
	font-size: 2rem;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	line-height: 1;
}
.db-reviews-stars {
	color: var(--wp--preset--color--goal-energie);
	font-size: 16px;
	letter-spacing: 2px;
	margin-top: 4px;
}
.db-reviews-count {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
	margin-top: 2px;
}
.db-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.db-review-card {
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--db-radius-2xl);
	padding: 1.75rem;
	box-shadow: var(--db-shadow-soft);
}
.db-review-card .db-review-stars {
	color: var(--wp--preset--color--goal-energie);
	font-size: 14px;
	letter-spacing: 2px;
	margin-bottom: 1rem;
}
.db-review-text {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--charcoal-soft);
	font-weight: 300;
	margin-bottom: 1.5rem;
}
.db-review-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 1rem;
	border-top: 1px solid var(--db-border-subtle);
}
.db-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: white;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.db-review-author {
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	font-size: 14px;
}
.db-review-product {
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
}
.db-review-verified {
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}

/* ===== SECTIE K — NEWSLETTER ===== */
.db-newsletter {
	max-width: 100% !important;
}
.db-newsletter-inner {
	display: block;
	text-align: center;
	gap: 3rem;
	align-items: center;
	max-width: 720px;
	margin: 0 auto;
}
.db-newsletter-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.75rem, 3vw, 2.3rem) !important;
	font-weight: 400 !important;
	line-height: 1.2;
	color: var(--wp--preset--color--cream);
	margin: 0 0 1rem 0;
	letter-spacing: -0.005em;
}
.db-newsletter-title em {
	font-style: italic;
	color: var(--wp--preset--color--sage-light);
}
.db-newsletter-text {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(245, 241, 235, 0.82);
	margin: 0;
	font-weight: 300;
}
.db-newsletter-form {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	max-width: 480px;
	margin-left: auto;
	position: relative;
}
.db-newsletter-input {
	padding: 14px 18px;
	background: rgba(245, 241, 235, 0.1);
	border: 1px solid rgba(245, 241, 235, 0.25);
	border-radius: 999px;
	color: var(--wp--preset--color--cream);
	font-size: 15px;
	font-family: inherit;
	outline: none;
	transition: border-color 150ms, background 150ms;
}
.db-newsletter-input::placeholder {
	color: rgba(245, 241, 235, 0.5);
}
.db-newsletter-input:focus {
	border-color: var(--wp--preset--color--sage-light);
	background: rgba(245, 241, 235, 0.15);
}
.db-newsletter-submit {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
	border: 0;
	padding: 0 24px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	cursor: pointer;
	transition: background 200ms;
	font-family: inherit;
}
.db-newsletter-submit:hover {
	background: var(--wp--preset--color--sage-light);
}
.db-newsletter-privacy {
	grid-column: 1 / -1;
	font-size: 12px;
	color: rgba(245, 241, 235, 0.55);
	margin: 4px 0 0 16px;
	font-weight: 300;
}
.db-newsletter-feedback {
	grid-column: 1 / -1;
	font-size: 13px;
	color: var(--wp--preset--color--sage-light);
	margin: 4px 0 0 16px;
	min-height: 1rem;
}

/* ===== RESPONSIVE: tablet + mobile ===== */
@media (max-width: 1024px) {
	.db-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.db-doelen-grid { grid-template-columns: repeat(2, 1fr); }
	.db-products-grid { grid-template-columns: repeat(2, 1fr); }
	.db-stacks-grid { grid-template-columns: repeat(2, 1fr); }
	.db-kennis-grid { grid-template-columns: repeat(2, 1fr); }
	.db-reviews-grid { grid-template-columns: 1fr; }
	.db-newsletter-inner { grid-template-columns: 1fr; gap: 2rem; }
	.db-newsletter-form { margin-left: 0; }
}

@media (max-width: 640px) {
	.db-trust-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.db-doelen-grid { grid-template-columns: 1fr; }
	.db-products-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.db-stacks-grid { grid-template-columns: 1fr; }
	.db-kennis-grid { grid-template-columns: 1fr; }
	.db-section-header-flex { flex-direction: column; align-items: flex-start; }
	.db-reviews-stat { text-align: left; }
}

/* ===== FOOTER ===== */
.db-footer {
	font-family: var(--wp--preset--font-family--body);
}
.db-footer-logo img {
	max-width: 180px;
	height: auto;
	display: block;
	/* Tijdelijke filter — Martijn's logo-light.png is bytewise identiek aan logo.png.
	   TODO: vervang door echte witte SVG-versie zodra Valentijn die laat maken. */
	filter: brightness(0) invert(1);
	opacity: 0.92;
}
.db-footer-pitch {
	font-size: 14px;
	line-height: 1.65;
	max-width: 320px;
	color: rgba(245, 241, 235, 0.78);
	font-weight: 300;
}

/* Footer kolom-headings */
.db-footer .db-footer-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--cream);
	margin: 0 0 1rem 0;
	letter-spacing: 0.01em;
}

/* Footer link-lijstjes */
.db-footer .db-footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 14px;
	line-height: 1;
}
.db-footer .db-footer-list li {
	margin: 0 0 0.65rem 0;
	padding: 0;
}
.db-footer .db-footer-list a {
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	transition: color 150ms;
	font-weight: 300;
}
.db-footer .db-footer-list a:hover {
	color: var(--wp--preset--color--cream);
}

/* "Bekijk alle producten →" — subtiele CTA, iets meer adem + bold */
.db-footer .db-footer-cta {
	margin-top: 0.75rem !important;
}
.db-footer .db-footer-cta a {
	color: var(--wp--preset--color--cream);
	font-weight: 500;
}

/* Socials */
.db-socials {
	display: flex;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0 0;
}
.db-socials li {
	margin: 0;
}
.db-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 1px solid rgba(245, 241, 235, 0.18);
	color: rgba(245, 241, 235, 0.78);
	transition: all 200ms;
	text-decoration: none;
}
.db-socials a:hover {
	color: var(--wp--preset--color--forest-deep);
	background: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--cream);
}

/* Separator over volledige wrapper-breedte */
.db-footer-separator {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	border: 0 !important;
	height: 1px !important;
}

/* Bottom-bar */
.db-footer-bottom {
	gap: 1rem;
}
.db-footer-bottom p {
	color: rgba(245, 241, 235, 0.6);
	font-size: 13px;
	line-height: 1.4;
}
.db-footer-legal {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.db-footer-legal li {
	margin: 0;
}
.db-footer-legal a {
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	font-size: 13px;
	transition: color 150ms;
}
.db-footer-legal a:hover {
	color: var(--wp--preset--color--cream);
}

/* Disclaimer-link in bottom-bar paragraaf — zelfde gedrag als legal-links */
.db-footer-bottom p a {
	color: var(--wp--preset--color--sage-light);
	text-decoration: none;
	transition: color 150ms;
}
.db-footer-bottom p a:hover {
	color: var(--wp--preset--color--cream);
}

/* Disclaimer */
.db-footer-disclaimer {
	color: rgba(245, 241, 235, 0.5);
	font-size: 12px;
	line-height: 1.6;
	font-style: italic;
	max-width: 640px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* De binnenste constrained-group krijgt van WP root-padding (16px) bovenop de
   .db-footer-padding → footer-content stond 16px verder naar binnen dan header/content.
   Weghalen zodat de footer de header spiegelt: outer-padding + max-width, geen dubbele
   laag. Geldt op élke breedte (lijnt zo ook op desktop met de 1300px-wrapper). */
.db-footer > .wp-block-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Footer mobile */
@media (max-width: 1024px) {
	.db-footer {
		padding: 3rem 1.5rem 1.5rem !important; /* horizontaal 1.5rem = gelijk aan header/content */
	}
	.db-footer-cols {
		gap: 0 !important;
		flex-wrap: wrap !important;
	}
	.db-footer-cols .wp-block-column {
		flex-basis: 100% !important;
	}
	.db-footer-cols .db-footer-brand {
		text-align: left;
		/* Ruimte onder de socials (boven de eerste accordeon). !important + parent-selector:
		   WP's column-block nult de kolom-margin met hogere specificiteit. */
		margin-bottom: 30px !important;
	}

	/* ===== FOOTER-ACCORDEON (mobiel) — link-kolommen inklapbaar (Martijn-stijl).
	   Brand-kolom blijft gewoon staan; alleen .db-footer-col wordt accordeon. ===== */
	.db-footer-col {
		border-top: 1px solid rgba(245, 241, 235, 0.12);
	}
	.db-footer-col:last-of-type {
		border-bottom: 1px solid rgba(245, 241, 235, 0.12);
	}
	.db-footer .db-footer-col .db-footer-heading {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 1rem 0;
		cursor: pointer;
		user-select: none;
	}
	/* Chevron rechts (Lucide), draait bij open. */
	.db-footer .db-footer-col .db-footer-heading::after {
		content: "";
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		background-color: var(--wp--preset--color--sand-light);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
		transition: transform 200ms ease;
	}
	.db-footer .db-footer-col.is-open .db-footer-heading::after {
		transform: rotate(180deg);
	}
	/* Lijst standaard ingeklapt; open bij .is-open. */
	.db-footer .db-footer-col .db-footer-list {
		display: none;
		padding-bottom: 1rem;
	}
	.db-footer .db-footer-col.is-open .db-footer-list {
		display: block;
	}
	/* De full-width separator is op mobiel overbodig (de accordeon-borders zijn al
	   dividers) én vormt mét z'n marges een leeg "accordeon"-vak onder Populair. Weg. */
	.db-footer-separator {
		display: none;
	}
	.db-footer-bottom {
		flex-direction: column;
		text-align: center;
		margin-top: 2rem;
	}
	.db-footer-legal {
		justify-content: center;
		flex-wrap: wrap;
	}
}

/* ===== HEADER MOBILE / TABLET (<1024) ===== */
@media (max-width: 1024px) {
	/* Alleen verticale padding verkleinen op mobiel — NIET de binnenste group
	   pad-den (dat stapelt bovenop de 1.5rem van .db-header → hamburger 16px te
	   ver naar binnen). Horizontaal blijft 1.5rem zodat de hamburger op 24px
	   uitlijnt met breadcrumb + content. */
	.db-header {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}

	/* Volgorde: hamburger (☰) · logo · zoeken · account · winkelmand.
	   Het nav-block bevat onder 1024 alleen de hamburger-toggle → order:-1 zet
	   die vooraan; de actions schuiven via margin-left naar rechts. */
	.db-header-inner {
		gap: 0.5rem;
	}
	.db-header .wp-block-navigation {
		order: -1;
		flex-grow: 0;
	}
	/* Logo links uitlijnen (groep met hamburger), net als Weltechniek. margin-right:auto
	   op het logo slokt de vrije ruimte rechts ervan op → logo strak achter de ☰,
	   icoontjes naar de rechterrand. (margin-left:auto op de actions pakte niet door.) */
	.db-header .wp-block-site-logo {
		margin-right: auto;
		margin-left: 0.375rem; /* gat ☰→logo */
	}
	/* Logo verkleinen op mobiel: bij height 22px is het wordmark ~238px breed →
	   samen met hamburger + 3 icoontjes past dat niet binnen een iPhone-viewport
	   (375–430px) en valt de winkelmand eraf. Op 15px is het ~162px → past met
	   marge tot 375px MÉT alle drie de icoontjes (Weltechniek-aanpak: logo iets
	   kleiner i.p.v. icoontjes weglaten). max-width capt voor de smalste schermen. */
	.db-header .wp-block-site-logo img {
		height: 15px;
		max-width: 170px;
	}
	.db-header-actions {
		margin-left: 0;
		gap: 6px; /* krapper dan desktop (12px) → icoontjes dichter op elkaar */
	}
	/* Tik-vlakken iets strakker op mobiel (8px → 5px) zodat de drie icoontjes
	   samen smaller worden zonder onder de a11y-tikmaat te zakken. */
	.db-header-actions .db-account-link,
	.db-header-actions .db-cart-link,
	.db-header-actions .db-search-toggle {
		padding: 5px;
	}
	/* Spiegelbeeld van de hamburger-correctie. Negatieve margin-right werkt niet
	   op het laatste flex-item, dus halen we de rechter-padding van het laatste
	   icoon (winkelmand) weg → de zichtbare winkelmand-rechterrand komt op
	   ~24px-van-rechts, gelijk met breadcrumb/H1/content. */
	.db-header-actions .db-cart-link {
		padding-right: 0;
	}

	/* Inklappen al vanaf 1024 i.p.v. WP's default 600: het inline-menu verbergen
	   en de hamburger tonen in de hele 600–1024 zone (anders wrappen de 7 items). */
	.db-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
	.db-header .wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

/* ===== HEADER MOBILE — uitklap-overlay (fullscreen drawer) =====
   WP koppelt de modal-layout van het overlay-menu aan z'n eigen @media(max-width:600px).
   Omdat wij de hamburger al vanaf 1024 tonen, repliceren we die modal-layout hier zelf
   (fullscreen, kolom, gebrand) zodat de hele 600–1024-zone óók klopt. Tegelijk
   neutraliseren we de desktop-dropdown-CSS (absolute/transform) die anders inlekt. */
/* Bij open menu: pagina-scroll vergrendelen + de backdrop-filter van .db-header
   uitzetten. Die filter maakt .db-header anders het containing block voor de
   fixed-overlay (→ gevangen onder de announcement-bar). Zonder filter valt de
   overlay terug op de viewport en dekt 'ie het hele scherm. (class via JS) */
html.db-menu-open {
	overflow: hidden;
}
html.db-menu-open .db-header {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

.db-header .wp-block-navigation__responsive-container.is-menu-open {
	display: flex !important;
	flex-direction: column;
	position: fixed !important;
	inset: 0 !important;
	height: 100dvh !important;
	z-index: 200;
	background: var(--wp--preset--color--warm-white) !important;
	padding: 0 !important; /* bar + content hebben hun eigen padding */
	overflow-y: auto;
	overscroll-behavior: contain;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: static !important;
}
/* Topbalk (JS-gebouwd): "Menu" links + sluitknop rechts. Gewoon bovenaan (niet sticky). */
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
	background: var(--wp--preset--color--warm-white);
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-bar-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
}
/* Sluitknop zit nu in de balk → static (was absolute). Lucide-X-styling komt elders. */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: static !important;
	margin: 0 !important;
	flex: 0 0 auto;
}
/* Menu-inhoud als verticale lijst. WP zet hier padding-top:56px (voor z'n absolute
   sluitknop) — niet meer nodig, de balk regelt de top. Eigen padding ipv overlay-padding. */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column;
	align-items: stretch !important; /* WP zet flex-end (items-justified-right) → reset */
	width: 100%;
	margin-top: 0;
	padding: 1.25rem 1.5rem 2.5rem !important;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 0;
	order: 0 !important; /* WP zet order:-1 → zou de "Producten"-kop eronder duwen */
}
/* Accordion in de overlay: hoofditem = rij met label (links) + chevron-toggle
   (rechts); submenu eronder op een nieuwe regel. Default ingeklapt — WP's native
   submenu-toggle wisselt aria-expanded, onze CSS toont/verbergt het submenu.
   Links uitlijnen (nav heeft items-justified-right voor desktop). */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	flex-wrap: wrap;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	justify-content: flex-start !important;
	text-align: left !important;
	flex: 1 1 0 !important;
	min-width: 0;
	width: auto;
	margin: 0 !important;
}
/* Chevron-toggle (= WP's submenu__toggle button) zichtbaar + rechts; draait open */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex !important;
	align-items: center;
	flex: 0 0 auto;
	margin-left: auto;
	padding: 12px 0 12px 12px !important;
	background: transparent !important;
	border: 0 !important;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
	width: 18px !important;
	height: 18px !important;
	transform-origin: center;
	transition: transform 200ms ease;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* Sectie-eyebrows ("Producten" / "Info & service") + snelle links (JS-geïnjecteerd).
   BELANGRIJK: deze zitten in de overlay-content die op desktop inline zichtbaar is
   → standaard verbergen, alleen tonen binnen de open mobiele overlay. */
.db-header .db-menu-eyebrow,
.db-header .db-menu-quick,
.db-header .db-menu-bar {
	display: none;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-quick {
	display: block;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-eyebrow {
	display: block;
	margin: 1.75rem 0 0.25rem;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--wp--preset--color--teal);
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .db-menu-eyebrow:first-child {
	margin-top: 0;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-quick-link {
	display: block;
	padding: 12px 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	border-bottom: 1px solid var(--db-border-subtle);
	transition: color 150ms;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-quick-link:last-child {
	border-bottom: 0;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .db-menu-quick-link:hover {
	color: var(--wp--preset--color--forest);
}

/* Hamburger + sluitkruis → Lucide (WP rendert eigen filled-iconen). Via CSS-mask
   met currentColor, zodat ze de Lucide-outline-look van de andere header-iconen
   matchen én meekleuren op hover. */
.db-header .wp-block-navigation__responsive-container-open svg,
.db-header .wp-block-navigation__responsive-container-close svg {
	display: none !important;
}
.db-header .wp-block-navigation__responsive-container-open {
	width: 26px;
	height: 26px;
	/* Optische uitlijning: Lucide-iconen hebben ~4px interne marge (lijnen lopen
	   x=4..20 in een 24-viewBox). Negatieve marge trekt de zichtbare lijntjes naar
	   de wrapper-rand (24px), gelijk met breadcrumb/H1/content. Box blijft 26px
	   klikbaar (marge verschuift alleen, verkleint de touch-target niet). */
	margin-left: -4px;
	color: var(--wp--preset--color--charcoal);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.db-header .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--forest);
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	width: 26px;
	height: 26px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / 24px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / 24px no-repeat;
}
/* Submenu-panelen terug naar inline genest (positionering uit de desktop-CSS resetten)
   + default INGEKLAPT (accordion). Volle breedte op een nieuwe regel onder label+chevron. */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	transform: none !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	min-width: 0 !important;
	flex-basis: 100%;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 0.5rem 0.75rem !important;
	margin: 0 !important;
	white-space: normal !important;
	overflow: visible !important;
	display: none !important;
}
/* Uitgeklapt: WP zet aria-expanded=true op de toggle (broer van het submenu) */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	display: block !important;
}
/* Top-level items: groter, met onderverdeler */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 16px !important;
	font-weight: 500;
	padding: 12px 0 !important;
}
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid var(--db-border-subtle);
}
/* Submenu-items: kleiner, ingesprongen */
.db-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 14px !important;
	padding: 8px 0 !important;
}

/* ===== PRODUCTFOTO MIX-BLEND-MODE ===== */
/* Maakt productflesjes natuurlijk in de cream-achtergrond vallen (Dutch Balance signature). */
.wc-block-components-product-image img,
.woocommerce-product-gallery img,
.db-product-img img {
	mix-blend-mode: multiply;
}

/* ===== SCROLL-REVEAL ===== */
.db-reveal,
.db-reveal-left,
.db-reveal-right {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.db-reveal {
	transform: translateY(28px);
}
.db-reveal-left {
	transform: translateX(-24px);
}
.db-reveal-right {
	transform: translateX(24px);
}
.db-reveal.is-visible,
.db-reveal-left.is-visible,
.db-reveal-right.is-visible {
	opacity: 1;
	transform: translate(0);
}
@media (prefers-reduced-motion: reduce) {
	.db-reveal,
	.db-reveal-left,
	.db-reveal-right {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== CONTACT FORM ===== */
.db-contact-form {
	display: grid;
	gap: 1rem;
	max-width: 600px;
}
.db-contact-form label {
	display: block;
	font-weight: 500;
	margin-bottom: 0.25rem;
	color: var(--wp--preset--color--forest);
}
.db-contact-form input,
.db-contact-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1.5px solid var(--db-border-input);
	border-radius: var(--db-radius);
	font-family: inherit;
	font-size: 0.9375rem;
	background: var(--wp--preset--color--warm-white);
	transition: border-color 150ms;
}
.db-contact-form input:focus,
.db-contact-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal);
}
.db-contact-form button {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	border: 0;
	padding: 0.75rem 1.75rem;
	border-radius: 999px;
	font-weight: 500;
	cursor: pointer;
	transition: background 200ms;
	font-family: inherit;
}
.db-contact-form button:hover {
	background: var(--wp--preset--color--forest-light);
}
.db-contact-form button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ===== PAGE — generieke content-pagina ===== */
.db-page {
	max-width: 100% !important;
}
.db-page .db-page-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2rem, 4vw, 2.75rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
	margin: 0 0 2rem 0 !important;
}

/* Prose-styling — Martijn's `.product-prose` 1:1 vertaald.
   Body 15px / line-height 1.75, headings in Playfair.
   Gebruikt op page.html, single.html, account-pages, klantenservice. */
.db-page-prose {
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--charcoal);
}
.db-page-prose > * + * {
	margin-top: 1.25rem;
}
.db-page-prose p {
	margin: 0 0 1.25rem 0;
}
.db-page-prose h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 2.5rem 0 1rem 0;
	letter-spacing: -0.005em;
}
.db-page-prose h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 2rem 0 0.75rem 0;
}
.db-page-prose h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 1.5rem 0 0.5rem 0;
}
.db-page-prose ul,
.db-page-prose ol {
	margin: 0 0 1.25rem 1.5rem;
	padding: 0;
}
.db-page-prose li {
	margin: 0 0 0.5rem 0;
	line-height: 1.6;
}
.db-page-prose a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 150ms;
}
.db-page-prose a:hover {
	color: var(--wp--preset--color--forest);
}
.db-page-prose strong {
	font-weight: 600;
	color: var(--wp--preset--color--forest-deep);
}
.db-page-prose blockquote {
	margin: 2rem 0;
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--cream);
	border-left: 3px solid var(--wp--preset--color--sage);
	border-radius: var(--db-radius);
	font-style: italic;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-page-prose blockquote p:last-child {
	margin-bottom: 0;
}
.db-page-prose img,
.db-page-prose figure {
	max-width: 100%;
	height: auto;
	border-radius: var(--db-radius-lg);
	margin: 2rem 0;
}
.db-page-prose hr {
	border: 0;
	border-top: 1px solid var(--db-border-subtle);
	margin: 2.5rem 0;
}
.db-page-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 14px;
}
.db-page-prose table th,
.db-page-prose table td {
	padding: 0.65rem 0.9rem;
	border-bottom: 1px solid var(--db-border-subtle);
	text-align: left;
}
.db-page-prose table th {
	background: var(--wp--preset--color--cream);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
}
.db-page-prose code {
	font-family: 'SF Mono', Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var(--wp--preset--color--cream);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	color: var(--wp--preset--color--forest-deep);
}

/* Buttons binnen prose — gebruik theme.json defaults, geen override nodig */

/* ===== CART + CHECKOUT (gedeelde head-strook + WC-blocks tweaks) ===== */
.db-cart-head {
	max-width: 100% !important;
}
.db-cart-eyebrow {
	font-weight: 500 !important;
}
.db-cart-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 4vw, 2.75rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}
.db-cart,
.db-checkout {
	max-width: 100% !important;
}

/* "Je rekent momenteel af als gast." — overbodige ruis, verbergen. */
.db-checkout .wc-block-checkout__guest-checkout-notice {
	display: none !important;
}

/* Contact-stap: account-aanmaken bóven de nieuwsbrief zetten. De form is een
   simpele stapel (e-mail + 2 checkboxes), dus flex-column + order is veilig hier. */
.db-checkout #contact-fields .wc-block-components-address-form {
	display: flex;
	flex-direction: column;
}
.db-checkout #contact-fields .wc-block-checkout__create-account {
	order: 1;
}
.db-checkout #contact-fields .wc-block-components-address-form__db-newsletter-optin {
	order: 2;
}
/* Ruimte tussen de twee checkboxes (account ↔ nieuwsbrief) + van het e-mailveld af.
   !important nodig: WC zet zelf een margin-top op deze checkbox-wrappers. */
.db-checkout #contact-fields .wc-block-checkout__create-account {
	margin-top: 0.85rem !important;
}
.db-checkout #contact-fields .wc-block-components-address-form__db-newsletter-optin {
	margin-top: 0.85rem !important;
}

/* Mobiel: minder dode ruimte tussen de inline-login en het (bovenaan gestapelde)
   besteloverzicht. WC's checkout-wrapper is display:flex met gap:32px → die gap
   valt óók vóór het checkout-blok (na lege notice-containers) = ~64px dood. Plus
   block-gap (16px) + wrapper-padding (24px). Allemaal inkorten. */
@media (max-width: 1024px) {
	.db-checkout .db-checkout-login {
		margin-bottom: 0.75rem;
	}
	.db-checkout .wp-block-woocommerce-checkout.db-checkout-block {
		margin-top: 0 !important;
		padding-top: 0 !important;
		gap: 0.5rem !important;
	}
	/* WC rendert op mobiel het besteloverzicht dubbel: ingeklapt bovenaan (sidebar)
	   + volledig onderaan in de form-kolom. De onderste weg — de uitklapbare balk
	   bovenaan volstaat (voorkomt dubbel overzicht). */
	.db-checkout .wc-block-checkout__main .wp-block-woocommerce-checkout-order-summary-block {
		display: none !important;
	}
	/* Onderruimte (na de USP) gelijk aan de bovenruimte (boven de login) = 3rem.
	   Was 80px padding-bottom + 16px checkout-marge = te veel. */
	.db-checkout {
		padding-bottom: 3rem !important;
	}
	.db-checkout .wc-block-checkout {
		margin-bottom: 0 !important;
	}
	/* Block-gap tussen de checkout en de footer-part (48px margin-top) weg → alleen
	   de 3rem padding-bottom telt = symmetrisch met de bovenruimte. */
	.db-checkout-footer {
		margin-top: 0 !important;
	}
	/* Afleidingsvrije footer gecentreerd op mobiel (= de normale copyright-balk). */
	.db-checkout-footer .db-checkout-footer-inner {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0.75rem;
	}

	/* Ingeklapte samenvatting (mobiel) = nette tappable button-balk i.p.v. losse
	   tekst met WC-divider-lijntjes. "OVERZICHT" op titelgrootte, totaal + chevron
	   rechts; chevron in een cirkel = duidelijke button-affordance (= DB-category-card). */
	/* Samenvatting-card op mobiel compacter (collapsed = button-balk). Padding op het
	   overzicht-blok zelf (de totals-block is nu een transparante kolom). */
	.db-checkout .wp-block-woocommerce-checkout-order-summary-block {
		padding: 1rem 1.5rem;
	}
	.db-checkout .wc-block-components-checkout-order-summary__title {
		border-top: none !important;
		border-bottom: none !important;
		margin-top: 0 !important; /* WC zet 16px margin-top → maakte de balk hoog + scheef */
		padding: 0.25rem 0 !important;
		align-items: center;
		gap: 0.625rem;
		cursor: pointer;
	}
	.db-checkout .wc-block-components-checkout-order-summary__title-text {
		font-family: var(--wp--preset--font-family--heading) !important;
		font-size: 18px !important;
		font-weight: 500 !important;
		color: var(--wp--preset--color--forest) !important;
		text-transform: uppercase;
	}
	.db-checkout .wc-block-components-checkout-order-summary__title-price {
		margin-left: auto;
		color: var(--wp--preset--color--forest) !important;
		font-weight: 600 !important;
		font-size: 15px !important;
	}
	.db-checkout .wc-block-components-checkout-order-summary__title-icon {
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: #eaf0e9;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		transition: background 150ms;
	}
	.db-checkout .wc-block-components-checkout-order-summary__title:hover .wc-block-components-checkout-order-summary__title-icon {
		background: var(--wp--preset--color--forest);
	}
	.db-checkout .wc-block-components-checkout-order-summary__title-icon svg {
		width: 18px;
		height: 18px;
		color: var(--wp--preset--color--forest);
		stroke: var(--wp--preset--color--forest);
	}
	.db-checkout .wc-block-components-checkout-order-summary__title:hover .wc-block-components-checkout-order-summary__title-icon svg {
		color: #fff;
		stroke: #fff;
	}
}

/* ============================================================
   Checkout mobiel vanaf 1024px — volle breedte, uitgelijnd met
   header/footer. WC zet z'n layout via een container-query op 700px:
   >=700 = 2 koloms, <700 = gestapeld MET ingeklapte OVERZICHT-balk.
   Wij willen volle breedte (>=700) MAAR toch gestapeld + ingeklapt.
   Daarom: (a) de kolommen zelf op volle breedte stapelen, (b) de
   ingeklapte balk zelf bouwen — WC's eigen klik-toggle werkt alleen
   bij container <700px, dus checkout.js neemt de klik over via .is-open.
   ============================================================ */
@media (max-width: 1024px) {
	/* 1 kolom op volle breedte (WC zou bij >=700 twee kolommen tonen). WC zet ook een
	   gutter (padding-right 4.53% op main, padding-left 2.26% op sidebar) voor de
	   2-koloms-ruimte → bij volle breedte gestapeld = dode ruimte, dus op 0. */
	.db-checkout .wc-block-checkout__main,
	.db-checkout .wc-block-checkout__sidebar {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Overzicht (sidebar) bovenaan, onder de login; form eronder. Niet sticky. */
	.db-checkout .wc-block-checkout__sidebar {
		order: 0 !important;
		position: static !important;
		top: auto !important;
		margin-bottom: 1.5rem !important;
	}
	.db-checkout .wc-block-checkout__main {
		order: 1 !important;
	}

	/* Ingeklapte OVERZICHT-balk op volle breedte. WC verbergt chevron + totaal bij
	   container >=700 en toont de content altijd; wij draaien dat om: chevron + totaal
	   tonen, content default ingeklapt, open via .is-open (checkout.js zet die klasse). */
	.db-checkout .wc-block-components-checkout-order-summary__title-icon {
		display: flex !important;
	}
	.db-checkout .wc-block-components-checkout-order-summary__title-price {
		display: block !important;
	}
	.db-checkout .wc-block-components-checkout-order-summary__content {
		display: none !important;
	}
	.db-checkout .wc-block-components-checkout-order-summary__content.is-open {
		display: block !important;
		border-bottom: 0 !important; /* punt 3: overbodige onderrand weg */
	}
	.db-checkout .wp-block-woocommerce-checkout-order-summary-block:has(.wc-block-components-checkout-order-summary__content.is-open) .wc-block-components-checkout-order-summary__title-icon svg {
		transform: rotate(180deg);
	}

	/* Losse USP onder de bestelknop ("Gratis retourneren…") verbergen zodra we
	   gestapeld zijn: de trust-USP-kaart toont deze info dan al. */
	.db-checkout .db-checkout-usp {
		display: none !important;
	}
	/* Trust-USP-blok links uitlijnen met de form-kolom (staat gestapeld onderaan
	   main). De 1.75rem-inspring is voor de desktop-sidebar; op mobiel weg. */
	.db-checkout .db-checkout-trust {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ── Inline "Terugkerende klant?"-login boven het checkout-blok. Vervangt de
   block-loginlink (die naar /mijn-account/ navigeert) → klant blijft op de
   checkout. Markup = WC's eigen woocommerce_checkout_login_form(), geïnjecteerd
   via render_block in inc/checkout.php. ── */
.db-checkout .wc-block-checkout__login-prompt {
	display: none !important;
}
.db-checkout-notices {
	margin-bottom: 1.25rem;
}
.db-checkout-login {
	margin-bottom: 1.25rem;
}
/* Boven het checkout-blok gerenderd (server-prepend). De wrapper houdt z'n normale
   constrained-breedte (start dus op dezelfde content-rand als de main-kolom); de
   zichtbare boxen erbinnen begrenzen we op de main-kolom-breedte (~65%) en lijnen
   links uit (block-default margin 0) → login staat visueel bóven de linkerkolom.
   Niet de wrapper zelf op margin-left:0 zetten: constrained-layout centreert op
   1300px bínnen de group-padding, dus dat valt te ver naar links. */
@media (min-width: 1024px) {
	.db-checkout-login > * {
		/* = breedte van de invulvelden: main-kolom (65% van de 1300px-content)
		   minus dezelfde rechter-gutter (~3.68rem) die WC op de form-kolom zet. */
		max-width: calc(65% - 3.68rem);
		box-sizing: border-box;
	}
}
/* Toggle-prompt ("Terugkerende klant? Klik hier om in te loggen") subtiel maken —
   niet de site-brede WC notice-banner-stijl. */
.db-checkout-login .woocommerce-form-login-toggle .woocommerce-info {
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--charcoal-soft);
	font-size: 15px;
}
.db-checkout-login .woocommerce-info::before {
	display: none !important;
}
.db-checkout-login a.showlogin,
.db-checkout-login .lost_password a {
	color: var(--wp--preset--color--teal);
	font-weight: 600;
	text-decoration: none;
}
.db-checkout-login a.showlogin:hover,
.db-checkout-login .lost_password a:hover {
	text-decoration: underline;
}
/* Login-card in huisstijl (inputs erven al de .db-checkout input-stijl). */
.db-checkout-login form.woocommerce-form-login {
	width: 100% !important;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	padding: 1.25rem 1.375rem;
	margin-top: 0.75rem;
	box-shadow: var(--db-shadow-soft);
}
.db-checkout-login form .form-row {
	margin: 0 0 0.875rem;
}
/* Label boven het veld (classic WC-form zet ze inline) + veld full-width.
   De border/radius/bg/focus erven de velden al van de .db-checkout input-stijl. */
.db-checkout-login form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-checkout-login form input.input-text {
	width: 100%;
	box-sizing: border-box;
}
.db-checkout-login form .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-checkout-login form button[name="login"] {
	display: block;
	width: 100%;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	border: 0;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: 16px;
	min-height: 50px;
	margin-top: 0.5rem;
	cursor: pointer;
	transition: background 200ms;
}
.db-checkout-login form button[name="login"]:hover {
	background: var(--wp--preset--color--forest-light);
}

/* ============================================================
   Verzendopties + Betaalmethoden = losse cards (à la Weltechniek)
   ============================================================ */
/* Elke optie een losse afgeronde card met tussenruimte. Verzenden = de optie is
   direct .__option; betalen = .accordion-option (label + uitgeklapte inhoud), het
   __option daarbinnen krijgt géén eigen rand (anders dubbele/geneste rand). */
.db-checkout .wc-block-components-radio-control__option,
.db-checkout .wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--db-border-subtle) !important;
	border-radius: var(--db-radius-input-shape) !important;
	margin-bottom: 0.625rem !important;
	background: #fff !important;
	overflow: hidden;
}
.db-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	border: 0 !important;
	border-radius: 0 !important;
	margin-bottom: 0 !important;
}
.db-checkout .wc-block-components-radio-control__option:last-child,
.db-checkout .wc-block-components-radio-control-accordion-option:last-child {
	margin-bottom: 0 !important;
}
/* "Gratis" bij gratis verzending: geen hoofdletters, forest + dikgedrukt — zoals
   links/knoppen/"Totaal". WC toont de tekst "Gratis" met text-transform:uppercase. */
.db-checkout .wc-block-checkout__shipping-option--free {
	text-transform: none !important;
	color: var(--wp--preset--color--forest) !important;
	font-weight: 600 !important;
}
/* "Meest gebruikt"-nudge bij iDEAL (JS-geïnjecteerd, db-pay-badge). Zelfde stijl
   als "Gratis": forest + dikgedrukt, erft de labelgrootte. Puur presentatie. */
.db-checkout .db-pay-badge {
	margin-left: 0.75rem;
	color: var(--wp--preset--color--forest);
	font-weight: 600;
	white-space: nowrap;
}
/* WC's scheidingslijntjes tussen opties + kader om de hele groep (::before/::after) uit. */
.db-checkout .wc-block-components-radio-control__option::before,
.db-checkout .wc-block-components-radio-control__option::after,
.db-checkout .wc-block-components-radio-control-accordion-option::before,
.db-checkout .wc-block-components-radio-control-accordion-option::after,
.db-checkout .wc-block-components-radio-control::before,
.db-checkout .wc-block-components-radio-control::after,
.db-checkout .wc-block-components-radio-control-accordion::before,
.db-checkout .wc-block-components-radio-control-accordion::after {
	display: none !important;
}

/* Gekozen optie: zachte sage-rand + licht groen-getinte achtergrond. De forest
   radio-dot draagt het hoofdsignaal, dus de rand mag zacht. */
.db-checkout .wc-block-components-radio-control__option--checked-option-highlighted,
.db-checkout .wc-block-components-radio-control-accordion-option:has(input:checked),
.db-checkout .wc-block-components-radio-control-accordion-option:has(input:checked) .wc-block-components-radio-control__option {
	box-shadow: none !important;
	border-color: var(--wp--preset--color--sage) !important;
	background: #ecf3f0 !important;
}

/* Uitgeklapte Pay.nl-beschrijving ("Betaal met iDEAL" + groot logo) weg — het logo
   rechts in de rij toont de methode al. Alleen verbergen als de uitklap géén
   invoervelden bevat (redirect-methodes); methodes met inline velden houden hun inhoud. */
.db-checkout .wc-block-components-radio-control-accordion-content:not(:has(input, select, textarea)) {
	display: none !important;
}

/* Radio-bolletje in huisstijl: wit met zachte rand; forest rand + forest dot als gekozen. */
.db-checkout .wc-block-components-radio-control__input {
	width: 20px !important;
	height: 20px !important;
	border: 2px solid var(--db-border-input) !important;
	background: #fff !important;
	box-shadow: none !important;
}
.db-checkout .wc-block-components-radio-control__input:checked,
.db-checkout .wc-block-components-radio-control__option--checked .wc-block-components-radio-control__input {
	border-color: var(--wp--preset--color--forest) !important;
	background: radial-gradient(var(--wp--preset--color--forest) 0 38%, #fff 44% 100%) !important;
}
.db-checkout .wc-block-components-radio-control__input::after,
.db-checkout .wc-block-components-radio-control__input:checked::after {
	content: none !important;
}
/* WC tekent het bolletje soms als ::before met zwarte bg → forest maken. */
.db-checkout .wc-block-components-radio-control__input::before {
	background-color: var(--wp--preset--color--forest) !important;
}

/* Betaalmethode-rij (Pay.nl .PPMFWC_method): logo verticaal gecentreerd, flush rechts. */
.db-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
	position: relative;
}
.db-checkout .PPMFWC_method img {
	position: absolute !important;
	top: 50% !important;
	right: 16px !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
}

/* ── Terms-/privacytekst boven de plaats-bestelling-knop (geïnjecteerd via checkout.js
   uit een footer-<template>; WC's block-terms bereikte de tekst niet). ── */
.db-checkout .db-checkout-terms {
	margin: 0 0 1.25rem;
	font-size: 13px;
	line-height: 1.6;
	color: var(--wp--preset--color--text-muted);
}
.db-checkout .db-checkout-terms a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

/* ── Retour-USP onder de plaats-bestelling-knop (geruststelling). ── */
/* WC zet 36px margin-bottom op de actions-container → die collapse't met de USP-marge
   en bepaalt de afstand. Weghalen zodat alleen de USP-margin (14px) telt = dichter op de knop. */
.db-checkout .wc-block-checkout__actions {
	margin-bottom: 0 !important;
}
.db-checkout .db-checkout-usp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin: 1.25rem 0 0;
	font-size: 14px;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-checkout .db-checkout-usp svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	stroke: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal);
}

/* ============================================================
   Trust-USP's ("Daarom Dutch Balance") onder het overzicht.
   Bewust GEEN kaart (geen bg/rand/schaduw) — het overzicht is de
   ankerkaart, deze USP's zijn rustige ondersteunende geruststelling.
   Tekst lijnt links uit met de inhoud van de overzicht-kaart (1.75rem).
   ============================================================ */
.db-checkout .db-checkout-trust {
	margin-top: 1.75rem;
	padding: 0 1.75rem;
}
.db-checkout .db-checkout-trust__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
}
.db-checkout .db-checkout-trust__title {
	margin-bottom: 0.875rem;
}
.db-checkout .db-usp-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 14px;
	color: var(--wp--preset--color--charcoal);
}
.db-checkout .db-usp-list li {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
}
.db-checkout .db-usp-list svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--forest);
	stroke: var(--wp--preset--color--forest);
}
.db-checkout .db-usp-list strong {
	color: var(--wp--preset--color--forest);
	font-weight: 500;
}
.db-checkout .db-checkout-trust__reviews {
	display: block;
	margin-top: 0.875rem;
	padding-top: 0.875rem;
	border-top: 1px solid var(--db-border-subtle);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
}
.db-checkout .db-checkout-trust__reviews:hover {
	color: var(--wp--preset--color--forest);
}
.db-checkout .db-checkout-trust__reviews strong {
	color: var(--wp--preset--color--forest);
	font-weight: 600;
}
.db-checkout .db-checkout-trust__stars {
	color: #f5b301;
	letter-spacing: -0.025em;
}

/* WC Cart-block — totals-block sticky op desktop. Witte card (= line-items-card
   en Martijn's "Overzicht"), border + soft-shadow → card-taal, niet plat. */
.db-cart .wp-block-woocommerce-cart-totals-block,
.db-checkout .wp-block-woocommerce-checkout-totals-block {
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	box-shadow: var(--db-shadow-soft);
	border-radius: var(--db-radius);
	padding: 1.75rem 1.75rem;
}
/* Checkout: de sticky sidebar IS de overzicht-card (WC 10.9 = één element). Om er
   losse trust-cards ONDER te kunnen zetten maken we de sidebar-kolom transparant en
   verhuizen we de card-look naar het overzicht-blok zelf. (Cart houdt de card op de
   totals-block.) De geïnjecteerde .db-checkout-trust is dan een
   zichtbaar losse card in dezelfde sticky kolom. */
.db-checkout .wp-block-woocommerce-checkout-totals-block {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.db-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background: #fff !important;
	border: 1px solid var(--db-border-subtle) !important;
	box-shadow: var(--db-shadow-soft);
	border-radius: var(--db-radius);
	padding: 1.75rem;
}
@media (min-width: 1024px) {
	.db-cart .wp-block-woocommerce-cart-totals-block,
	.db-checkout .wp-block-woocommerce-checkout-totals-block {
		position: sticky;
		top: 100px; /* header-hoogte + 20px */
	}
	/* WC zet op z'n sticky sidebar een max-height + overflow-y:auto → interne
	   scrollbalk zodra de samenvatting iets te hoog wordt. Wij willen de
	   natuurlijke hoogte (geen inline scroll). */
	.db-cart .wc-block-components-sidebar,
	.db-checkout .wc-block-components-sidebar {
		max-height: none !important;
		overflow: visible !important;
	}
}

/* Order-summary heading */
.db-cart .wc-block-cart-order-summary-heading-block,
.db-cart .wc-block-cart__totals-title,
.db-checkout .wp-block-woocommerce-checkout-order-summary-block > h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px !important;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin: 0 0 1rem 0;
}

/* WC regels (Subtotaal/Korting/Verzending) — sm, label gedempt, waarde forest (= Martijn). */
.db-cart .wc-block-components-totals-footer-item,
.db-checkout .wc-block-components-totals-footer-item,
.db-cart .wc-block-components-totals-item,
.db-checkout .wc-block-components-totals-item {
	font-size: 14px;
	color: var(--wp--preset--color--charcoal);
}
.db-cart .wc-block-components-totals-item__label,
.db-checkout .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--charcoal-soft);
}
.db-cart .wc-block-components-totals-item__value,
.db-checkout .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--forest);
	font-weight: 500;
}
/* Totaal-rij prominent maar in DEZELFDE body-font (Inter) als de overige prijzen
   (Subtotaal/Gratis + PDP/PLP-prijs) — geen serif, dat week af. Forest + bold. */
.db-cart .wc-block-components-totals-footer-item,
.db-checkout .wc-block-components-totals-footer-item {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	padding-top: 0.5rem;
	align-items: baseline;
}
.db-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.db-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	color: var(--wp--preset--color--forest);
	font-weight: 600;
}
/* De Totaal-WAARDE zit in .totals-item__value BÍNNEN de footer-item (er bestaat
   geen .totals-footer-item__value) → nested selector, anders pakt de grootte niet. */
.db-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.db-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--body);
	font-size: 24px;
	color: var(--wp--preset--color--forest);
	font-weight: 600;
}
/* WC rendert "Gratis" (gratis verzending) bold + UPPERCASE → normale case + medium
   (= Martijn: gewone "Gratis", geen schreeuwende hoofdletters). */
.db-cart .wc-block-components-totals-shipping strong,
.db-checkout .wc-block-components-totals-shipping strong {
	text-transform: none !important;
	font-weight: 500;
}

/* ============================================================
   Checkout consistency-polish (2026-07-03)
   ============================================================ */
/* Sectie-koppen (E-mailadres / Bezorggegevens / Verzendopties / Betalingsopties)
   groter — waren 15px, te klein voor sectie-titels. */
.db-checkout .wc-block-components-checkout-step__title {
	font-size: 20px !important;
	line-height: 1.3 !important;
}
/* Checkout-samenvatting-titel = winkelwagen-stijl ("OVERZICHT", uppercase). */
.db-checkout .wp-block-woocommerce-checkout-order-summary-block > h2,
.db-checkout .wc-block-components-checkout-order-summary__title {
	text-transform: uppercase;
}
/* Kortingscode-optie weg op de checkout (de winkelwagen heeft 'm al). */
.db-checkout .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
	display: none !important;
}
/* Lege WC toast/snackbar-containers zijn `position:fixed` (top 96, z-index 250,
   transparant) → op Safari een spookachtig sticky-artefact bovenaan. Ze bevatten
   een leeg list-<div>; verbergen zolang die leeg is. Zodra een toast verschijnt
   krijgt de div content → `:has(> div:empty)` matcht niet meer → weer zichtbaar. */
.woocommerce-checkout .wc-block-components-notices__snackbar:has(> div:empty),
.woocommerce-cart .wc-block-components-notices__snackbar:has(> div:empty) {
	display: none !important;
}

/* ── Checkout-overzicht 1:1 in winkelwagen-stijl (Valentijn 2026-07-03) ── */
/* Titel: Playfair 18px forest (was Inter 15px charcoal = week af van de cart). */
.db-checkout .wc-block-components-checkout-order-summary__title-text {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
}
/* WC zet 16px margin-top op de titel → checkout had 45px boven de titel vs 29px in
   de winkelwagen. Weg zodat de bovenruimte gelijk is (= alleen de card-padding). */
.db-checkout .wc-block-components-checkout-order-summary__title {
	margin-top: 0 !important;
}
/* Schone, zachte dividers = winkelwagen: WC zet donkere (0.2) border-top op elke
   totals-wrapper → alle weg, en zachte 0.08-lijnen terug (onder de producten +
   boven de Totaal-regel). */
.db-checkout .wc-block-components-totals-wrapper {
	border-top: 0 !important;
	padding-block: 0.25rem !important; /* Subtotaal/Gratis dichter op elkaar (= winkelwagen ~8px) */
}
.db-checkout .wp-block-woocommerce-checkout-order-summary-totals-block {
	border-top: 0 !important;
	padding-bottom: 0 !important;
}
.db-checkout .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--db-border-subtle) !important;
	margin-top: 0.1rem;
	padding-top: 1.1rem !important;
}
/* Productbeschrijving weg uit het overzicht (overbodig; winkelwagen toont 'm ook niet). */
.db-checkout .wc-block-components-product-metadata__description {
	display: none !important;
}
/* Aantal-badge (rond bolletje op de foto) + native stukprijs weg — we tonen het
   aantal als "N stuks"-tekst (checkout.js injecteert `.db-summary-qty`). */
.db-checkout .wc-block-components-order-summary-item__quantity {
	display: none !important;
}
/* De hele native stukprijs-node weg (niet alleen de waarde) — anders blijft 'ie als
   leeg flex-item staan en duwt de "N stuks"-meta 8px in via de prices-wrap flex-gap. */
.db-checkout .wc-block-cart-item__prices .wc-block-components-product-price {
	display: none !important;
}
.db-checkout .db-summary-qty {
	display: block;
	margin-top: 0.15rem;
	margin-left: 0 !important;
	padding-left: 0 !important;
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
/* Alle overzicht-inhoud links flush met de dividers. WC zet een 16px linker-inset
   via .wc-block-components-order-summary (padding) + .totals-item (padding) + de
   titel-marge. Weghalen zodat OVERZICHT / product / Subtotaal / Totaal op één lijn
   liggen (rechts ongemoeid, anders verspringen de bedragen). */
.db-checkout .wc-block-components-order-summary {
	padding-left: 0 !important;
}
.db-checkout .wc-block-components-totals-item {
	padding-left: 0 !important;
}
.db-checkout .wc-block-components-checkout-order-summary__title-text {
	margin-left: 0 !important;
}
.db-checkout .wc-block-cart-item__prices {
	padding-left: 0 !important;
	justify-content: flex-start !important;
}
/* Divider ONDER de OVERZICHT-titel (border-top op het producten-blok; verdwijnt
   vanzelf op mobiel-ingeklapt want dan is het blok verborgen) + divider ONDER de
   producten (boven Subtotaal). Coupon is verborgen op checkout. */
.db-checkout .wp-block-woocommerce-checkout-order-summary-cart-items-block {
	border-top: 1px solid var(--db-border-subtle) !important;
	border-bottom: 1px solid var(--db-border-subtle) !important;
	margin-top: 1.1rem !important; /* ruimte titel → border gelijk aan border → product */
	padding-top: 1.1rem !important;
	padding-bottom: 1.1rem !important;
	margin-bottom: 1.1rem !important;
}
/* Lege fee-/discount-wrappers (WC rendert ze altijd) → geen dode ruimte/lijn. */
.db-checkout .wp-block-woocommerce-checkout-order-summary-fee-block:not(:has(*)),
.db-checkout .wp-block-woocommerce-checkout-order-summary-discount-block:not(:has(*)) {
	display: none !important;
}

/* "Proceed to checkout" button */
.db-cart .wc-block-cart__submit-button,
.db-cart .wp-block-woocommerce-proceed-to-checkout-block a,
.db-checkout .wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--forest) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: 999px !important;
	padding: 0.95rem 1.5rem !important;
	font-weight: 500;
	font-family: var(--wp--preset--font-family--body) !important;
	text-decoration: none !important;
	transition: background 200ms;
	box-shadow: var(--db-shadow-soft);
}
.db-cart .wc-block-cart__submit-button:hover,
.db-checkout .wc-block-components-checkout-place-order-button:hover {
	background: var(--wp--preset--color--forest-light) !important;
}
/* Pijl achter "Doorgaan naar afrekenen" (= Martijn) via Lucide arrow-right.
   WC's checkout-CTA = a.wc-block-cart__submit-button (geen proceed-block-<a>). */
.db-cart .wc-block-cart__submit-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}
.db-cart .wc-block-cart__submit-button::after {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center / 18px no-repeat;
	mask: url("../icons/arrow-right.svg") center / 18px no-repeat;
	transition: transform 200ms;
}
.db-cart .wc-block-cart__submit-button:hover::after {
	transform: translateX(3px);
}

/* ===== MELDINGEN — WC block-notices + eigen .db-notice in huisstijl =====
   Geldt cart + checkout (coupon toegepast/fout, voorraad, validatie) én onze
   eigen verwijder-/undo-melding. Lucide-icoon per type. */
.wc-block-components-notice-banner,
.db-notice {
	display: flex !important;
	align-items: center;
	gap: 0.65rem;
	border-radius: var(--db-radius) !important;
	border: 1px solid var(--db-border-subtle) !important;
	background: #fff;
	padding: 0.8rem 1rem !important;
	margin: 0 0 1rem 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal);
	box-shadow: none !important;
}
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content > svg {
	display: none !important;
}
.wc-block-components-notice-banner::before,
.db-notice::before {
	content: "";
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--db-notice-icon) center / 20px no-repeat;
	mask: var(--db-notice-icon) center / 20px no-repeat;
}
.wc-block-components-notice-banner__content {
	flex: 1 1 auto;
	font-family: inherit;
}
.wc-block-components-notice-banner.is-success,
.db-notice--success {
	--db-notice-icon: url("../icons/check.svg");
	background: #eef3f0 !important;
	border-color: rgba(45, 74, 62, 0.2) !important;
	color: var(--wp--preset--color--forest) !important;
}
.wc-block-components-notice-banner.is-error,
.db-notice--error {
	--db-notice-icon: url("../icons/alert-circle.svg");
	background: rgba(196, 69, 69, 0.08) !important;
	border-color: rgba(196, 69, 69, 0.25) !important;
	color: var(--db-sale) !important;
}
.wc-block-components-notice-banner.is-info,
.db-notice--info {
	--db-notice-icon: url("../icons/info.svg");
	background: var(--wp--preset--color--cream) !important;
	border-color: var(--db-border-subtle) !important;
	color: var(--wp--preset--color--charcoal) !important;
}
/* WC-snackbar (bv. coupon toegepast) van linksonder → bovenaan gecentreerd,
   zodat álle meldingen bovenin verschijnen (Weltechniek-stijl). */
.wc-block-components-notice-snackbar-list,
.wc-block-components-snackbar-list {
	top: 96px !important;
	bottom: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	width: min(640px, calc(100vw - 3rem));
	z-index: 250;
}
.wc-block-components-notice-snackbar {
	width: 100%;
}

/* Eigen verwijder-melding: tekst + "Ongedaan maken" + sluitkruis. */
.db-cart-notices {
	margin-bottom: 1.25rem;
}
.db-notice__text {
	flex: 1 1 auto;
}
.db-notice__undo {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	cursor: pointer;
}
.db-notice__close {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--text-muted);
	-webkit-mask: none;
}
.db-notice__close::after {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: url("../icons/x.svg") center / 16px no-repeat;
	mask: url("../icons/x.svg") center / 16px no-repeat;
}

/* ===== CART trust-blok — USP's + betaal-icoontjes onder de knop (conversie) ===== */
.db-cart-trust {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--db-border-subtle);
}
.db-cart-usps {
	list-style: none;
	margin: 0 0 1.25rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.db-cart-usps li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	line-height: 1.3;
}
.db-cart-usps svg {
	color: var(--wp--preset--color--forest);
	flex: 0 0 auto;
}
.db-cart-payments-label {
	display: block;
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
	margin-bottom: 0.55rem;
}
.db-cart-payment-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.db-pay-icon {
	width: 42px;          /* gelijke breedte voor alle logo's (≈ Visa-breedte) */
	height: 27px;
	object-fit: contain; /* logo schaalt undistorted binnen het vaste vlak */
	display: block;
	/* Geen eigen border/bg: de logo's hebben al hun eigen kaartrand → anders dubbel. */
}

/* ===== CART line-items — netjes (Martijn-stijl) ===== */
/* Producttitel: geen default-link-underline, branded forest, leesbare maat. */
.db-cart .wc-block-components-product-name {
	text-decoration: none !important;
	color: var(--wp--preset--color--forest) !important;
	font-family: var(--wp--preset--font-family--heading) !important; /* Playfair, = Martijn */
	font-size: 18px !important;
	font-weight: 500;
	line-height: 1.25;
	transition: color 150ms;
}
.db-cart .wc-block-components-product-name:hover {
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
}
/* Korte omschrijving weg uit de winkelmand (clutter; staat al op de PDP). */
.db-cart .wc-block-components-product-metadata {
	display: none !important;
}
/* Cart-thumbnail: cream "cushion" zoals PDP/PLP (consistentie) — cream bg + radius
   + padding, flesje `contain` + `mix-blend:multiply` zodat de witte fotoachtergrond
   in de cream opgaat. Geen distortie meer (WC's object-fit:fill overruled). */
/* Cushion op de <a>-wrapper (niet de <td> — WC zet daar asymmetrische padding).
   Vast vierkant, flex-gecentreerd → foto altijd netjes in het midden. */
.db-cart .wc-block-cart-item__image {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 1px; /* td krimpt tot de cushion */
	vertical-align: top;
}
.db-cart .wc-block-cart-item__image a,
.db-cart .wc-block-cart-item__image > span,
.db-cart .wc-block-cart-item__image > img {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 112px;
	height: 112px;
	background: var(--wp--preset--color--cream);
	border-radius: var(--db-radius);
	padding: 14px;
	box-sizing: border-box;
	overflow: hidden;
}
.db-cart .wc-block-cart-item__image img {
	object-fit: contain !important;
	width: 100% !important;
	height: 100% !important;
	mix-blend-mode: multiply;
}
/* Regel-inhoud over de volledige cushion-hoogte: titel/prijs bovenaan,
   aantal-stepper onderaan (margin-top:auto) → rust ertussen, uitgelijnd met
   de boven-/onderkant van de afbeelding. */
.db-cart .wc-block-cart-item__wrap {
	display: flex !important;
	flex-direction: column;
	min-height: 112px; /* = cushion-hoogte */
}
.db-cart .wc-block-cart-item__quantity {
	margin-top: auto !important;
}
/* Doorgestreepte oude prijs gedempt; sale-prijs op huisstijl (forest, = normale
   prijzen) — de doorgestreepte van-prijs signaleert de korting al. Geen sale-rood
   meer (past niet bij het kalme/premium merk; rood geeft conversie geen echte
   boost — zichtbaarheid + verankering wel). DEMO scope = cart; bij akkoord ook
   PDP/shop. */
.db-cart .wc-block-components-product-price__regular {
	color: var(--wp--preset--color--text-muted);
}
.db-cart .wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--forest);
}
/* "Bespaar €x"-badge in zachtgroen (besparing = positief = groen, on-brand). */
.db-cart .wc-block-components-sale-badge {
	background: #ECF3F0 !important;
	color: var(--wp--preset--color--forest) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 500 !important;
}

/* ===== CART-iconen → Lucide (file-mask + background-color, Valentijn's methode:
   .svg in assets/icons/, opgehaald via url() — niet inline data-URI) ===== */
/* Remove/prullenbak: WC's eigen SVG verbergen, de button zelf maskeren met trash-2. */
.db-cart .wc-block-cart-item__remove-link {
	width: 24px;
	height: 24px;
	padding: 0;
	background-color: var(--wp--preset--color--text-muted) !important;
	-webkit-mask: url("../icons/trash-2.svg") center / 18px no-repeat;
	mask: url("../icons/trash-2.svg") center / 18px no-repeat;
	transition: background-color 150ms;
}
.db-cart .wc-block-cart-item__remove-link svg {
	display: none;
}
.db-cart .wc-block-cart-item__remove-link:hover {
	background-color: var(--db-sale);
}

/* Qty-stepper modern + consistent met de PDP: zachte rand, rondere hoek, groter
   klikvlak. WC-tekstteken verbergen (font-size:0), button maskeren met minus/plus. */
.db-cart .wc-block-components-quantity-selector {
	border: 1.5px solid var(--db-border-input) !important;
	border-radius: var(--db-radius) !important;
	height: 40px;
	width: auto !important;
	max-width: none !important;
	overflow: hidden;
	background: #fff;
}
.db-cart .wc-block-components-quantity-selector__input {
	width: 38px !important;
	min-width: 38px !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
	text-align: center;
}
.db-cart .wc-block-components-quantity-selector__button {
	font-size: 0 !important;
	color: transparent !important;
	width: 38px !important;
	height: 100% !important;
	background-color: var(--wp--preset--color--charcoal-soft);
	transition: background-color 150ms;
}
.db-cart .wc-block-components-quantity-selector__button--minus {
	-webkit-mask: url("../icons/minus.svg") center / 16px no-repeat;
	mask: url("../icons/minus.svg") center / 16px no-repeat;
}
.db-cart .wc-block-components-quantity-selector__button--plus {
	-webkit-mask: url("../icons/plus.svg") center / 16px no-repeat;
	mask: url("../icons/plus.svg") center / 16px no-repeat;
}
.db-cart .wc-block-components-quantity-selector__button:hover {
	background-color: var(--wp--preset--color--forest);
}

/* Coupon-toggle = lichte teal-link met tag-icoon links (Martijn-stijl), géén
   chevron of zware balk. WC's eigen icoon verbergen. */
.db-cart .wc-block-components-panel__button > svg,
.db-cart .wc-block-components-panel__button-icon {
	display: none !important;
}
.db-cart .wc-block-components-totals-coupon,
.db-cart .wc-block-components-panel {
	border: 0 !important;
}
.db-cart .wc-block-components-panel__button {
	color: var(--wp--preset--color--teal) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 0 !important;
	border: 0 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
}
.db-cart .wc-block-components-panel__button::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--teal);
	-webkit-mask: url("../icons/tag.svg") center / 16px no-repeat;
	mask: url("../icons/tag.svg") center / 16px no-repeat;
}
/* Coupon-veld + "Toepassen"-knop als net paar, conform huisstijl. Het veld krijgt
   al onze standaard input-stijl (warm-white, --db-border-input, 15px radius, teal
   focus). De knop stond als losgezongen 999px-pill → zelfde 15px-radius als het
   veld + forest-fill (= secundaire knop, niet de grote pill-CTA). */
.db-cart .wc-block-components-totals-coupon__form {
	gap: 0.5rem;
}
.db-cart .wc-block-components-totals-coupon__button {
	border-radius: var(--db-radius) !important;
	background: var(--wp--preset--color--forest) !important;
	color: var(--wp--preset--color--cream) !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	transition: background 200ms;
}
.db-cart .wc-block-components-totals-coupon__button:hover {
	background: var(--wp--preset--color--forest-light) !important;
}
/* Veld + knop exact even hoog (WC laat de input soms 1px afwijken). */
.db-cart .wc-block-components-totals-coupon__input input {
	height: 100%;
}

/* Schone dividers (Martijn): WC zet een border-top op ELKE totals-wrapper →
   te veel lijntjes. Alle weg, en één lichte divider terug bóven de Totaal-regel. */
.db-cart .wc-block-components-totals-wrapper {
	border-top: 0 !important;
	padding-block: 0.5rem !important;
}
/* Geen lijn onder de OVERZICHT-kop (kop loopt door naar de coupon-link). */
.db-cart .wc-block-cart-order-summary-heading-block {
	border-bottom: 0 !important;
}
.db-cart .wc-block-components-totals-footer-item {
	border-top: 1px solid var(--db-border-subtle) !important;
	/* Ruimte BOVEN de Totaal-divider gelijk aan de ruimte boven Subtotaal (~18px,
	   = coupon margin-bottom). WC's shipping-wrapper padding-bottom is daarom 0. */
	margin-top: 0.1rem;
	padding-top: 1.1rem !important;
}
/* Divider hoort BOVEN het Subtotaal-blok (= onder de kortingscode-toggle), niet
   tússen Subtotaal en Verzending (= Martijn). WC zet standaard een border-top op
   de totals-block (shipping/taxes-wrapper) → die weg, en de scheidingslijn op de
   onderkant van de coupon-toggle. padding-bottom 0 → geen extra ruimte vóór de
   Totaal-divider. */
.db-cart .wp-block-woocommerce-cart-order-summary-totals-block {
	border-top: 0 !important;
	padding-bottom: 0 !important;
}
/* WC zet een border-bottom op het hele order-summary-blok (onder de Totaal/BTW-
   regel, boven de knop) → weg. */
.db-cart .wp-block-woocommerce-cart-order-summary-block {
	border-bottom: 0 !important;
}
.db-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
	border-bottom: 1px solid var(--db-border-subtle);
	/* !important nodig: dit blok heeft óók class .wc-block-components-totals-wrapper
	   (padding-block:0.5rem !important hierboven) → anders maar 8px. 1.1rem = gelijk
	   aan de ruimte tussen de borders en de content (18px). */
	padding-bottom: 1.1rem !important;
	margin-bottom: 1.1rem;
}

/* ===== CART line-items als WITTE CARD (kleur-blok, niet plat default-WP) =====
   Zelfde card-taal als .db-card / mijn-account / Martijn. Summary blijft cream →
   bewust kleurverschil tussen de twee blokken. */
/* Linkerkolom (items) niet meerekken met de hoogte van de rechterkolom
   (samenvatting) → alleen zo hoog als de producten. */
@media (min-width: 1025px) {
	/* Desktop 2-koloms: linkerkolom niet meerekken + 40px gap. */
	.db-cart .wc-block-cart,
	.db-cart .wp-block-woocommerce-filled-cart-block {
		align-items: flex-start !important;
		flex-wrap: nowrap !important;
		gap: 2.5rem !important;
	}
}
@media (max-width: 1024px) {
	/* Mobiel/tablet: gestapeld → beide kolommen volle wrapper-breedte. */
	.db-cart .wp-block-woocommerce-cart-items-block,
	.db-cart .wp-block-woocommerce-cart-totals-block {
		width: 100% !important;
		max-width: 100% !important;
		flex-basis: auto !important;
	}
}
/* Kolom-wrapper (= __main) als flex-column, transparant → de witte card zit op de
   TABEL eronder, zodat de "Verder winkelen"-link ónder de card op de cream-bg valt
   (= Martijn). */
.db-cart .wc-block-cart__main {
	display: flex;
	flex-direction: column;
	background: transparent;
	box-shadow: none;
	padding: 0;
}
.db-cart .wc-block-cart-items {
	/* !important: WC zet background transparent op de tabel met gelijke specificiteit. */
	background: #fff !important;
	/* Subtiele 1px-rand = gelijk aan de OVERZICHT-card (beide kolommen consistent).
	   Row-dividers (border-top op de td's) blijven binnen de card. */
	border: 1px solid var(--db-border-subtle) !important;
	border-radius: var(--db-radius);
	/* border-radius pakt op een <table> alleen met separate borders. */
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	/* Soft-shadow = standaard card-schaduw (gelijk aan OVERZICHT-card + mijn-account),
	   zodat beide cart-kolommen dezelfde diepte hebben. */
	box-shadow: var(--db-shadow-soft);
	/* 8px card-padding + 16px td-padding = 24px netto-inset (gelijk aan links/rechts,
	   waar 24px card + 0 td). Td-padding op BEIDE cellen → cushion en content
	   lijnen exact uit (titel boven, qty onder = afbeelding boven/onder). */
	padding: 0.5rem 1.5rem;
}
/* "Verder winkelen"-link onder de productkaart, linksuitgelijnd (= Martijn). */
.db-cart .db-continue-shopping {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.25rem;
	padding-left: 0.25rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}
.db-cart .db-continue-shopping:hover {
	color: var(--wp--preset--color--forest);
}
.db-cart .db-continue-shopping::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-left.svg") center / 16px no-repeat;
	mask: url("../icons/arrow-left.svg") center / 16px no-repeat;
	transition: transform 150ms;
}
.db-cart .db-continue-shopping:hover::before {
	transform: translateX(-3px);
}
/* Beide rij-cellen identieke verticale padding + top-aligned → afbeelding en
   content starten op dezelfde hoogte en zijn even hoog. */
.db-cart .wc-block-cart-items__row > td {
	vertical-align: top !important;
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}
/* "PRODUCT / TOTAAL"-kolomkop weg (Martijn heeft 'm niet → rustiger). */
.db-cart .wc-block-cart-items__header {
	display: none !important;
}
/* Alle tabel-eigen borders weg (boven én onder) — alleen onze divider TUSSEN
   de regels blijft over (geen lijn aan de boven-/onderkant van de items). */
.db-cart .wc-block-cart-items,
.db-cart .wc-block-cart-items thead,
.db-cart .wc-block-cart-items__row:first-child {
	border: 0 !important;
}
/* WC zet de divider als border-TOP op de td-cellen. Onze subtiele kleur geven,
   en bij de EERSTE rij weghalen → geen lijn aan de bovenkant, alleen tússen rijen.
   (Geen eigen row-border-bottom → anders dubbel.) */
.db-cart .wc-block-cart-items__row td {
	border-top-color: var(--db-border-subtle) !important;
}
.db-cart .wc-block-cart-items__row:first-child td {
	border-top: 0 !important;
}
.db-cart .wc-block-cart-items__row {
	border-bottom: 0 !important;
}

/* ===== CART-regel op smal scherm (WC-container-staten is-medium/small/mobile,
   schakelt om bij container ≤ ~700px = ±749px viewport) =====
   WC reflowt de regel dan; onze desktop-cushion past niet in WC's mobiele grid.
   We geven de regel een eigen, bewuste layout (afspraak Valentijn):

       ┌────────┬──────────────────────────┐
       │ [foto] │ naam            [🗑 rechtsboven]
       │ [foto] │ stuksprijs (sale/doorstreept)
       ├────────┼──────────────────────────┤
       │ [- n +]│        regeltotaal + "Bespaar"
       └────────┴──────────────────────────┘

   = foto linksboven, naam + stuksprijs rechts, prullenbak rechtsboven,
     quantity-stepper onder de foto (linksonder), regeltotaal rechtsonder.

   Techniek: de regel wordt een named-grid. Naam/prijs/quantity zitten genest in
   .__product > .__wrap → die twee op display:contents zodat hun kinderen directe
   grid-items van de regel worden en los plaatsbaar zijn. De prullenbak zit in
   .__quantity samen met de stepper → die trekken we met absolute positionering
   los naar rechtsboven. */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-items__row {
	position: relative;
	display: grid !important;
	grid-template-columns: 80px 1fr !important;
	grid-template-areas:
		"image name"
		"image price"
		"qty   total" !important;
	/* Naam-rij + qty-rij = content-hoogte, prijs-rij = 1fr. De foto spant naam+prijs;
	   door de prijs-rij flexibel te maken vangt díe alle overtollige foto-hoogte op
	   i.p.v. dat die tussen naam en prijs valt. → naam+prijs strak tegen elkaar
	   (zoals desktop) én de vrije ruimte komt ónder de prijs, dus bóven de quantity. */
	grid-template-rows: auto 1fr auto !important;
	column-gap: 1rem !important;
	row-gap: 0.3rem !important;
	align-items: start !important;
	padding: 1.1rem 0 !important;
	/* Volle-breedte divider tússen regels op de regel zelf (de tds dragen 'm niet
	   meer omdat .__product display:contents is → anders een gat in de lijn). */
	border-top: 1px solid var(--db-border-subtle) !important;
}
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-items__row:first-child {
	border-top: 0 !important;
}
/* td-padding/borders weg in mobiel — spacing loopt via grid-gaps + row-padding. */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-items__row > td {
	padding: 0 !important;
	border-top: 0 !important;
}
/* Promoveer de geneste content naar directe grid-items van de regel. */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__product,
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__wrap {
	display: contents !important;
}
/* Foto linksboven, spant de naam+prijs-rijen. Cushion 80px, flesje gecentreerd. */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__image {
	grid-area: image !important;
	width: auto !important;
	padding: 0 !important;
}
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__image a,
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__image > span,
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__image > img {
	width: 80px !important;
	height: 80px !important;
	padding: 10px !important;
}
/* Naam rechtsboven; ruimte vrijhouden rechts voor de prullenbak. */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-components-product-name {
	grid-area: name !important;
	align-self: start;
	padding-right: 2rem;
}
/* Stuksprijs onder de naam (sale-kleur/doorstreept blijft via bestaande regels). */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__prices {
	grid-area: price !important;
	align-self: start;
}
/* Quantity-stepper linksonder, onder de foto. justify-self:start → het item
   krijgt zijn natuurlijke breedte (max-content) i.p.v. de 80px-track, zodat de
   +-knop niet wordt afgeknipt; steekt iets de kolom-gap in (geen overlap met het
   rechts-uitgelijnde totaal). */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__quantity {
	grid-area: qty !important;
	justify-self: start !important;
	/* margin-top → meer lucht tussen de foto en de stepper (= Valentijn). */
	margin: 0.7rem 0 0 0 !important;
	align-self: center;
}
/* Prullenbak los uit de quantity-flow → rechtsboven in de regel (= naam-hoogte). */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__remove-link {
	position: absolute !important;
	top: 1.1rem !important;
	right: 0 !important;
}
/* Regeltotaal + "Bespaar"-badge rechtsonder, op de quantity-rij. */
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__total {
	grid-area: total !important;
	justify-content: flex-end !important;
	align-items: center;
	align-self: center;
	/* zelfde margin-top als de qty → blijven verticaal uitgelijnd. */
	margin-top: 0.7rem;
}
.db-cart .wc-block-cart:is(.is-medium, .is-small, .is-mobile) .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	flex-direction: row !important;
	align-items: center;
	gap: 0.6rem;
}

/* Form fields — input + select styling */
.db-checkout input[type="text"],
.db-checkout input[type="email"],
.db-checkout input[type="tel"],
.db-checkout input[type="password"],
.db-checkout select,
.db-checkout textarea,
.db-cart input[type="text"],
.db-cart input[type="email"],
.db-cart input[type="tel"] {
	border: 1px solid var(--db-border-subtle) !important;
	border-radius: var(--db-radius-input-shape) !important;
	background: #fff !important;
	font-family: inherit;
	font-size: 15px;
	padding: 0.7rem 0.9rem;
	transition: border-color 150ms;
}
.db-checkout input:focus,
.db-checkout select:focus,
.db-checkout textarea:focus,
.db-cart input:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal) !important;
}

/* Field labels */
.db-checkout .wc-block-components-text-input label,
.db-checkout .wc-block-components-select label,
.db-checkout label {
	color: var(--wp--preset--color--charcoal-soft);
	font-size: 14px;
	font-weight: 500;
}

/* Empty-cart state — zelfde opzet als de 404: cream hero-band (full-bleed) +
   suggesties op pagina-bg eronder (geen divider). */
.db-cart-empty {
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
/* Full-bleed cream-band (breekt uit de 1300px-constraint van .db-cart, = .db-404).
   100vw veilig door overflow-x:clip op html/body. Content gecentreerd via de
   constrained-group (720px). */
.db-cart-empty-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 5rem 1.5rem !important;
	text-align: center;
}

/* Cart mobile */
@media (max-width: 1024px) {
	.db-cart .wc-block-cart,
	.db-checkout .wp-block-woocommerce-checkout {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}
}

/* ===== PDP (single-product) — Martijn's vormtaal 1:1 ===== */
.db-pdp-crumbs {
	max-width: 100% !important;
	/* border verhuisd naar de reusable .db-breadcrumbs-component (reist overal mee) */
}
.db-pdp {
	max-width: 100% !important;
}

/* HERO LAYOUT — 50/50 met 4rem gap (matched live) */
.db-pdp-hero {
	gap: 4rem !important;
}

/* Gallery — sticky desktop, cream-cushion, mix-blend op flesjes */
@media (min-width: 768px) {
	.db-pdp-gallery-col {
		position: sticky;
		top: 110px; /* header-hoogte + 20px adem */
		align-self: flex-start;
	}
}
/* WC's `wp-block-woocommerce-product-image-gallery` block heeft default
   `max-width: 512px` — vreemd, want hij zou mee moeten schalen met zijn kolom.
   Override hier zodat de gallery de volle kolom-breedte gebruikt. */
.wp-block-woocommerce-product-image-gallery,
.db-pdp-gallery {
	max-width: 100% !important;
	width: 100% !important;
}

.db-pdp-gallery-col .woocommerce-product-gallery,
.db-pdp-gallery .woocommerce-product-gallery {
	margin: 0 !important;
	opacity: 1 !important; /* WC inline-style zet opacity:0 voor JS-init dat niet runt zonder WC-frontend.js */
	width: 100% !important;
	max-width: 100%;
	overflow: hidden; /* clip de carousel-track (400% wide) zodat alleen actieve slide zichtbaar is */
}
/* WC zoom-trigger (magnifier-icoon linksboven): subtieler stylen — werkt nu
   met WC frontend.js + photoswipe. Klik = lightbox. */
.db-pdp-gallery .woocommerce-product-gallery__trigger,
.db-pdp-gallery-col .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: white;
	box-shadow: var(--db-shadow-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: -9999px;
	overflow: hidden;
	color: var(--wp--preset--color--forest);
	transition: background 150ms;
}
.db-pdp-gallery .woocommerce-product-gallery__trigger::before,
.db-pdp-gallery-col .woocommerce-product-gallery__trigger::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232D4A3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") center/18px no-repeat;
}
.db-pdp-gallery .woocommerce-product-gallery__trigger:hover {
	background: var(--wp--preset--color--cream);
}
/* Placeholder-state als product geen featured image heeft */
.db-pdp-gallery-col .woocommerce-product-gallery--without-images,
.db-pdp-gallery .woocommerce-product-gallery--without-images {
	background: var(--wp--preset--color--cream);
	border-radius: var(--db-radius-2xl);
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 600px;
}
.db-pdp-gallery-col .woocommerce-product-gallery--without-images img,
.db-pdp-gallery .woocommerce-product-gallery--without-images img {
	max-width: 60%;
	max-height: 60%;
	opacity: 0.4;
}
.db-pdp-gallery .woocommerce-product-gallery__image,
.db-pdp-gallery-col .woocommerce-product-gallery__image {
	background: var(--wp--preset--color--cream);
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	aspect-ratio: 1/1;
	position: relative;
}
.db-pdp-gallery .woocommerce-product-gallery__image img,
.db-pdp-gallery-col .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1.5rem;
	display: block;
	border-radius: 0 !important;
	box-sizing: border-box; /* Anders telt padding bovenop width:100% en steekt img uit cushion */
	cursor: default;
	transition: none;
}

/* jquery.zoom plakt een .zoomImg op de slide bij hover — zichtbaar als
   "transparant uitvergroot product". Theme-support uit én script-dequeue
   blijken niet genoeg (WC laadt 'm via slider-dependency), dus CSS-hide. */
.db-pdp-gallery img.zoomImg,
.db-pdp-gallery-col img.zoomImg,
.woocommerce-product-gallery .zoomImg {
	display: none !important;
	opacity: 0 !important;
}
.db-pdp-gallery .woocommerce-product-gallery__image:hover img,
.db-pdp-gallery-col .woocommerce-product-gallery__image:hover img {
	/* WC-defaults voor hover-zoom uitschakelen — pass 2 krijgt eigen lightbox-trigger */
	transform: none !important;
	opacity: 1 !important;
}
@media (min-width: 768px) {
	.db-pdp-gallery .woocommerce-product-gallery__image img {
		padding: 2.5rem;
	}
}

/* WC's flexslider regelt zelf welke slide actief is via classes + transforms.
   Geen eigen display:none nodig. */

/* Sale-badge top-left van image — forest (huisstijl, geen sale-rood), klein */
.db-pdp-gallery .onsale,
.db-pdp-gallery-col .onsale {
	position: absolute !important;
	top: 1rem !important;
	left: 1rem !important;
	background: var(--db-sale-badge) !important;
	color: var(--wp--preset--color--cream) !important;
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 12px !important;
	border-radius: var(--db-radius) !important;
	min-height: auto !important;
	min-width: auto !important;
	line-height: 1;
	margin: 0 !important;
	z-index: 2;
}

/* Thumbnail grid 4-koloms onder main image — elk vakje 1:1 vierkant */
.db-pdp-gallery .flex-control-thumbs,
.db-pdp-gallery-col .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin: 1rem 0 0 0;
	padding: 0;
	list-style: none;
	width: 100%;
	float: none;
}
.db-pdp-gallery .flex-control-thumbs li {
	width: auto !important;
	margin: 0 !important;
	list-style: none;
	aspect-ratio: 1/1;
	background: var(--wp--preset--color--cream);
	border-radius: var(--db-radius-lg);
	border: 2px solid transparent;
	box-sizing: border-box;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 150ms;
}
.db-pdp-gallery .flex-control-thumbs img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 0.5rem;
	box-sizing: border-box;
	transition: opacity 150ms;
	opacity: 0.7;
	mix-blend-mode: multiply;
	display: block;
}
.db-pdp-gallery .flex-control-thumbs li:hover img,
.db-pdp-gallery .flex-control-thumbs img.flex-active,
.db-pdp-gallery .flex-control-thumbs img:hover {
	opacity: 1;
}
.db-pdp-gallery .flex-control-thumbs li:has(.flex-active) {
	border-color: var(--wp--preset--color--forest);
}

/* BUYBOX */
.db-pdp-buybox {
	padding-top: 0;
}
.db-pdp-eyebrow,
.db-pdp-eyebrow a {
	font-weight: 600 !important;
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
	display: block;
	/* Niet aanklikbaar — breadcrumbs dekt al de category-link, eyebrow is puur label */
	pointer-events: none;
	cursor: default;
}
.db-pdp-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 3.6vw, 2.375rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}

/* Rating-stars — eigen block dutch-balance/pdp-rating (Martijn-stijl) */
.db-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	margin: -0.25rem 0 1rem 0; /* iets omhoog onder titel (Playfair descender compenseren) */
	color: inherit;
}
.db-rating-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--wp--preset--color--goal-energie);
}
.db-rating-star {
	position: relative;
	display: inline-flex;
	line-height: 0;
}
.db-rating-star-bg {
	/* Outlined ster — fungeert als 'lege' staat. Volle opacity, kleur via parent. */
	display: block;
}
.db-rating-star-fg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: inline-flex;
	line-height: 0;
	color: var(--wp--preset--color--goal-energie);
}
.db-rating-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-rating-avg {
	font-weight: 500;
	color: var(--wp--preset--color--forest);
}
.db-rating-sep {
	margin: 0 0.4rem;
	opacity: 0.5;
}
.db-rating-count {
	transition: color 150ms;
	text-underline-offset: 2px;
}
.db-rating:hover .db-rating-count {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}
.db-rating-sm .db-rating-text {
	font-size: 12px;
}

/* Price — 32px forest, sale-styling met Bespaar-badge via ::after */
.db-pdp-price,
.db-pdp-price .price,
.db-pdp-price .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--body);
	font-size: 32px !important;
	font-weight: 600;
	color: var(--wp--preset--color--forest) !important;
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.db-pdp-price .wc-block-components-product-price__regular,
.db-pdp-price del,
.db-pdp-price del .amount {
	color: var(--wp--preset--color--text-muted) !important;
	text-decoration: line-through;
	font-size: 18px !important;
	font-weight: 400;
	text-decoration-thickness: 1px;
}
.db-pdp-price .wc-block-components-product-price__value,
.db-pdp-price ins,
.db-pdp-price ins .amount {
	color: var(--wp--preset--color--forest) !important;
	background: transparent !important;
	text-decoration: none;
	font-weight: 600;
}

/* Short description */
.db-pdp-short {
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: var(--wp--preset--color--charcoal-soft) !important;
	font-weight: 300 !important;
}

/* ===== Custom PDP-blocks ===== */

/* KeySpecs / Highlights — checklist met Lucide-checks */
.db-pdp-keyspecs {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
}
/* Fallback-modus (WC attrs): 2 koloms zodat tabel-achtige data compact past */
.db-pdp-keyspecs:not(.db-pdp-keyspecs--highlights) {
	gap: 0.5rem;
}
@media (min-width: 640px) {
	.db-pdp-keyspecs:not(.db-pdp-keyspecs--highlights) {
		grid-template-columns: 1fr 1fr;
	}
}
/* Highlights-modus: 1 kolom, compact onder elkaar */
.db-pdp-keyspecs--highlights {
	gap: 0.35rem;
}
.db-pdp-keyspecs li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0;
}
.db-pdp-keyspecs li svg {
	margin-top: 0.25rem;
	flex-shrink: 0;
	color: var(--wp--preset--color--teal);
}
.db-pdp-keyspecs li strong {
	color: var(--wp--preset--color--forest);
	font-weight: 500;
}

/* StockIndicator — pulsing dot in drie staten */
.db-stock {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem 0;
}
.db-stock-dot {
	position: relative;
	display: inline-flex;
	width: 8px;
	height: 8px;
}
.db-stock-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
}
.db-stock-in .db-stock-dot::after { background: var(--wp--preset--color--sage); }
.db-stock-out .db-stock-dot::after { background: var(--db-sale); }
.db-stock-backorder .db-stock-dot::after { background: var(--wp--preset--color--goal-energie); }
.db-stock-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
	opacity: 0.75;
	animation: db-stock-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes db-stock-ping {
	75%, 100% {
		transform: scale(2.5);
		opacity: 0;
	}
}
.db-stock-label {
	font-size: 13px;
	font-weight: 500;
}
.db-stock-in .db-stock-label { color: var(--wp--preset--color--forest); }
.db-stock-out .db-stock-label { color: var(--db-sale); }
.db-stock-backorder .db-stock-label { color: var(--wp--preset--color--goal-energie); }

@media (prefers-reduced-motion: reduce) {
	.db-stock-ping { animation: none; }
}

/* Volume Pricing Table — compact, geen kolom-headers (Martijn-stijl) */
.db-volume-pricing-heading {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--wp--preset--color--forest) !important;
}
.db-volume-pricing {
	margin: 0 0 1.5rem 0;
	padding: 0.5rem 1rem;
	background: var(--wp--preset--color--cream);
	border-radius: var(--db-radius-lg);
	border: 1px solid var(--db-border-subtle);
}
.db-volume-pricing-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.db-volume-pricing-table td {
	padding: 0.55rem 0;
	color: var(--wp--preset--color--charcoal-soft);
	border-bottom: 1px solid var(--db-border-subtle);
	vertical-align: middle;
}
.db-volume-pricing-table tr:last-child td {
	border-bottom: 0;
}
.db-volume-col-range {
	width: 38%;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
}
.db-volume-col-badge {
	width: 22%;
	text-align: left;
}
.db-volume-col-price {
	text-align: right;
	white-space: nowrap;
}
.db-volume-col-price del {
	color: var(--wp--preset--color--text-muted);
	font-size: 11px;
	margin-right: 0.4rem;
	text-decoration: line-through;
	font-weight: 400;
}
.db-volume-col-price strong {
	color: var(--wp--preset--color--forest);
	font-weight: 600;
}
.db-volume-col-price del .amount,
.db-volume-col-price del .woocommerce-Price-amount {
	color: var(--wp--preset--color--text-muted) !important;
	font-size: 11px !important;
}
.db-volume-col-price strong .amount,
.db-volume-col-price strong .woocommerce-Price-amount {
	color: var(--wp--preset--color--forest) !important;
	font-size: 14px !important;
}
.db-volume-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--cream);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.db-volume-row-default {
	opacity: 0.7;
}

/* "Je bespaart" rij op cart/checkout */
.db-cart-savings th,
.db-cart-savings td {
	color: var(--wp--preset--color--teal) !important;
	font-weight: 500;
}
.db-cart-savings td strong {
	color: var(--wp--preset--color--teal) !important;
	font-weight: 600;
}

/* ===== PDP REVIEWS-SECTIE (Martijn's stijl — onder beschrijving, niet in tab) ===== */
.db-pdp-reviews {
	background: #ffffff;
	/* Top 4rem zodat de "merged witte zone" (reviews + related) consistent 4rem ademruimte heeft
	   bovenaan. Midden = 2rem (reviews-bottom) + 2rem (related-top) = 4rem. Bottom van related = 4rem. */
	padding: 4rem 1.5rem 2rem;
}
.db-pdp-reviews-inner {
	max-width: 1300px; /* in lijn met PDP-hero + tabs container */
	margin: 0 auto;
}
.db-pdp-reviews-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end; /* h2 onderkant gelijk met onderkant score-stack — past bij sectie-h2 zoals 'Klanten kochten ook' */
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 1.75rem;
}
.db-pdp-reviews-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.625rem, 3vw, 2rem);
	font-weight: 400;
	color: var(--wp--preset--color--forest);
	margin: 0;
}
.db-pdp-reviews-sub {
	font-size: 14px;
	color: var(--wp--preset--color--text-muted);
	margin: 0.4rem 0 0 0;
	font-weight: 300;
}
.db-pdp-reviews-score {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.25rem;
}
.db-pdp-reviews-avg {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	line-height: 1;
	margin-bottom: 0.35rem; /* extra ademruimte tussen cijfer en sterren */
}
.db-pdp-reviews-stars-wrap {
	color: var(--wp--preset--color--goal-energie);
	display: inline-flex;
}
.db-pdp-reviews-count {
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
}

/* Stars helper */
.db-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--wp--preset--color--goal-energie);
}

/* Reviews-list — 2 koloms grid op desktop */
.db-pdp-reviews-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 768px) {
	.db-pdp-reviews-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}
}
/* Mobiel: reviews = horizontale swipe-carousel (consistent met related). */
@media (max-width: 767px) {
	.db-pdp-reviews-list {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Géén negatieve bleed: lijst start bij de wrapper-rand. De peek van de
		   volgende kaart blijft binnen de wrapper (geclipt op de rechter wrapper-
		   rand) → uitgelijnd MÉT swipe-signaal dat er meer reviews zijn. */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.db-pdp-reviews-list::-webkit-scrollbar {
		display: none;
	}
	.db-pdp-reviews-list > .db-pdp-review {
		/* Kaart = wrapper-breedte − 64px → met de 1rem-gap peekt de volgende kaart
		   ~48px, vast (niet percentage-gebaseerd → consistent op elke viewport). */
		flex: 0 0 calc(100% - 64px);
		max-width: 360px;
		scroll-snap-align: start;
	}
}

.db-pdp-review {
	box-sizing: border-box; /* anders telt de 1.5rem padding bovenop max-width → kaart 48px te breed in de carousel → peek verdwijnt */
	background: var(--wp--preset--color--warm-white);
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-lg); /* 12px — Martijn's rounded-xl */
	padding: 1.5rem;
	transition: box-shadow 300ms ease;
}
.db-pdp-review:hover {
	box-shadow: var(--db-shadow-md, 0 4px 16px var(--db-border-subtle));
}
.db-pdp-review-head {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.9rem;
}
.db-pdp-review-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}
.db-pdp-review-meta {
	flex: 1;
	min-width: 0;
}
.db-pdp-review-author {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
}
.db-pdp-review-date {
	display: block;
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
	margin-top: 2px;
}
.db-pdp-review-verified {
	color: var(--wp--preset--color--teal);
	font-weight: 500;
}
.db-pdp-review-head .db-stars {
	margin-top: 2px;
}
.db-pdp-review-text {
	font-size: 14px;
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-pdp-review-text p {
	margin: 0;
}
.db-pdp-review-text p + p {
	margin-top: 0.65rem;
}

.db-pdp-reviews--empty .db-pdp-reviews-empty-head {
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-pdp-reviews--empty .db-pdp-reviews-empty-text {
	color: var(--wp--preset--color--text-muted);
	font-size: 15px;
	margin: 0.4rem 0 0 0;
}

/* Review-form CTA — compacte pill-button, links uitgelijnd onder de lijst */
.db-pdp-review-form-cta-wrap {
	margin-top: 2rem;
	text-align: left;
}
.db-pdp-review-form-toggle {
	display: block;
	text-align: left; /* form-content links uitgelijnd binnen geopend toggle */
	max-width: 100%;
}
.db-pdp-review-form-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.4rem;
	background: transparent;
	border: 1px solid var(--wp--preset--color--forest);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	cursor: pointer;
	list-style: none;
	transition: background 150ms, color 150ms;
}
.db-pdp-review-form-cta::-webkit-details-marker { display: none; }
.db-pdp-review-form-cta:hover {
	background: var(--wp--preset--color--forest);
	color: white;
}
.db-pdp-review-form-toggle[open] .db-pdp-review-form-cta {
	background: var(--wp--preset--color--forest);
	color: white;
}
.db-pdp-review-form-toggle .db-pdp-review-form-wrap {
	margin-top: 1.25rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--cream);
	border-radius: var(--db-radius-lg);
	width: 100%;
}

/* Review-form zelf (native WC comment_form) — minimal styling */
.db-pdp-review-form {
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	color: var(--wp--preset--color--charcoal);
}
.db-pdp-review-form label {
	display: block;
	font-weight: 500;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	margin-bottom: 0.4rem;
}
.db-pdp-review-form p {
	margin: 0 0 1rem 0;
}
.db-pdp-review-form input[type="text"],
.db-pdp-review-form input[type="email"],
.db-pdp-review-form input[type="url"],
.db-pdp-review-form textarea,
.db-pdp-review-form select {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--db-border-input);
	border-radius: var(--db-radius);
	background: white;
	font-family: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--charcoal);
	transition: border-color 150ms;
	box-sizing: border-box;
}
.db-pdp-review-form input:focus,
.db-pdp-review-form textarea:focus,
.db-pdp-review-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--forest);
}
.db-pdp-review-form textarea {
	resize: vertical;
	min-height: 110px;
}
.db-pdp-review-form .form-submit {
	margin: 0;
}
.db-pdp-review-form .submit,
.db-pdp-review-form button[type="submit"] {
	background: var(--wp--preset--color--forest);
	color: white;
	border: none;
	padding: 0.75rem 1.5rem;
	border-radius: var(--db-radius);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 150ms;
}
.db-pdp-review-form .submit:hover,
.db-pdp-review-form button[type="submit"]:hover {
	background: var(--wp--preset--color--forest-deep);
}
.db-pdp-review-form .comment-form-rating select {
	max-width: 280px;
}

/* WC's frontend.js injecteert óók een .stars-element vóór het rating-select.
   Normaal verbergt WC z'n eigen CSS de tekst en toont sterren-als-bg-image,
   maar wij dequeue-en WC default CSS dus de naked tekst ("1 van de 5 sterren")
   staat bloot. We tonen onze eigen widget — die van WC verbergen. */
.db-pdp-review-form .stars {
	display: none !important;
}

/* Interactieve star-rating-input — wordt door pdp.js geïnit op de hidden <select> */
.db-star-rating-input {
	display: inline-flex;
	gap: 2px;
	margin: 0.2rem 0 0;
}
.db-star-rating-star {
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: var(--wp--preset--color--text-muted);
	line-height: 0;
	transition: color 100ms;
	border-radius: 4px;
}
.db-star-rating-star:hover,
.db-star-rating-star:focus-visible {
	color: var(--wp--preset--color--goal-energie);
	outline: none;
}
.db-star-rating-star.is-filled {
	color: var(--wp--preset--color--goal-energie);
}
.db-star-rating-star.is-filled svg {
	fill: currentColor;
}
.db-star-rating-star:focus-visible {
	box-shadow: 0 0 0 2px rgba(196, 125, 58, 0.3);
}
.db-pdp-review-form .comment-notes,
.db-pdp-review-form .logged-in-as {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
/* Cookies-consent: checkbox + label naast elkaar (overrult default block-label) */
.db-pdp-review-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
}
.db-pdp-review-form .comment-form-cookies-consent input[type="checkbox"] {
	width: auto;
	margin: 0;
	flex-shrink: 0;
}
.db-pdp-review-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-weight: 400;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-pdp-reviews-closed {
	color: var(--wp--preset--color--text-muted);
	font-size: 14px;
}
.db-pdp-review-form-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	margin: 0 0 1rem 0;
}

/* WC product-rating styling onder PDP-title — toont sterren + (N reviews) */
.db-pdp-rating {
	margin-bottom: 1.25rem !important;
}
.db-pdp-rating .wp-block-woocommerce-product-rating,
.db-pdp-rating .wc-block-product-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.db-pdp-rating .wc-block-components-product-rating-stars,
.db-pdp-rating .star-rating {
	color: var(--wp--preset--color--goal-energie) !important;
	font-size: 16px;
}
.db-pdp-rating a {
	font-size: 13px;
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* USP-lijst onder add-to-cart — 2x2 grid op desktop, 1 kolom op mobile.
   Geen cream-blok / border — plat. */
.db-pdp-usps {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem 1.25rem;
	background: transparent;
	border: 0;
}
@media (max-width: 640px) {
	.db-pdp-usps {
		grid-template-columns: 1fr;
	}
}
.db-pdp-usps li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0;
	padding: 0;
}
.db-pdp-usps svg {
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
	opacity: 0.9;
}
.db-pdp-usps a {
	color: var(--wp--preset--color--forest);
	text-decoration: none;
	transition: color 150ms;
}
.db-pdp-usps a:hover {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Add-to-cart-form — Martijn's vormtaal: qty-pill + add-to-cart side-by-side. */
.db-pdp-add-to-cart form.cart {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 0 1rem 0;
}
.db-pdp-add-to-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--db-border-input);
	border-radius: var(--db-radius-lg);
	background: white;
	overflow: hidden;
	margin: 0;
}
.db-pdp-add-to-cart .db-qty-styled {
	transition: border-color 150ms;
}
.db-pdp-add-to-cart .db-qty-styled:focus-within {
	border-color: var(--wp--preset--color--forest);
}
.db-pdp-add-to-cart .db-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 100%;
	min-height: 48px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--charcoal-soft);
	cursor: pointer;
	transition: color 150ms, background 150ms;
}
.db-pdp-add-to-cart .db-qty-btn:hover {
	color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--cream);
}
.db-pdp-add-to-cart .quantity input.qty {
	width: 44px;
	padding: 0.75rem 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	font-family: inherit;
	color: var(--wp--preset--color--forest);
	-moz-appearance: textfield;
	appearance: textfield;
}
/* Verberg browser-default number-spinners (Chrome/Safari + Firefox) */
.db-pdp-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.db-pdp-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.db-pdp-add-to-cart .quantity input.qty:focus {
	outline: none;
}

/* Variant-picker (variable products) */
.db-pdp-add-to-cart .variations {
	width: 100%;
	margin: 0 0 1rem 0;
	border-collapse: collapse;
}
.db-pdp-add-to-cart .variations th,
.db-pdp-add-to-cart .variations td {
	padding: 0.5rem 0;
	text-align: left;
	vertical-align: middle;
}
.db-pdp-add-to-cart .variations th {
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	font-weight: 500;
	width: 110px;
}
.db-pdp-add-to-cart .variations select {
	padding: 0.55rem 0.75rem;
	border: 1.5px solid var(--db-border-input);
	border-radius: var(--db-radius);
	background: var(--wp--preset--color--warm-white);
	font-family: inherit;
	font-size: 14px;
	color: var(--wp--preset--color--forest);
	width: 100%;
	max-width: 240px;
}
.db-pdp-add-to-cart .variations select:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal);
}
.db-pdp-add-to-cart .reset_variations {
	display: inline-block;
	margin-left: 0.5rem;
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
}

/* Add-to-cart button — flex:1 naast qty-pill, geen pill maar rounded-xl (Martijn) */
.db-pdp-add-to-cart button.single_add_to_cart_button,
.db-pdp-add-to-cart .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--wp--preset--color--forest) !important;
	color: var(--wp--preset--color--cream) !important;
	border: 0 !important;
	padding: 0.95rem 2rem !important;
	border-radius: var(--db-radius-lg) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.005em;
	cursor: pointer;
	transition: background 200ms, transform 150ms, box-shadow 200ms;
	box-shadow: var(--db-shadow-soft);
}
.db-pdp-add-to-cart button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--forest-light) !important;
	transform: translateY(-1px);
	box-shadow: var(--db-shadow-glow);
}

/* (USP-styling staat hoger in dit bestand — plat, geen blok) */

/* Product-meta (SKU + cats) — klein, onderaan */
.db-pdp-meta,
.db-pdp-meta .product_meta,
.db-pdp-meta .wp-block-woocommerce-product-meta {
	font-size: 12px;
	color: var(--wp--preset--color--text-muted);
	padding-top: 1.25rem;
	border-top: 1px solid var(--db-border-subtle);
}
.db-pdp-meta .sku_wrapper,
.db-pdp-meta .posted_in,
.db-pdp-meta .tagged_as {
	display: block;
	margin: 0.25rem 0;
}
.db-pdp-meta a {
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
}
.db-pdp-meta a:hover {
	color: var(--wp--preset--color--forest);
}

/* ===== PDP TABS (eigen block dutch-balance/pdp-tabs) ===== */
.db-pdp-tabs {
	margin: 0;
}
.db-pdp-tabs-nav {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--db-border-subtle);
	margin: 0 0 2rem 0;
	/* Niet wrappen maar horizontaal scrollen als de tabs niet passen (mobiel). */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.db-pdp-tabs-nav::-webkit-scrollbar {
	display: none;
}
.db-pdp-tab {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0.9rem 1.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
	cursor: pointer;
	margin-bottom: -1px;
	transition: color 150ms, border-color 150ms;
	text-decoration: none; /* voor <a> anchor-variant */
	display: inline-block;
	flex: 0 0 auto; /* niet krimpen → scrollen i.p.v. samenpersen/wrappen */
	white-space: nowrap;
}
.db-pdp-tab:hover {
	color: var(--wp--preset--color--charcoal-soft);
}
.db-pdp-tab[aria-selected="true"] {
	color: var(--wp--preset--color--forest);
	border-bottom-color: var(--wp--preset--color--forest);
}
.db-pdp-tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Panels */
.db-pdp-tab-panel {
	max-width: 800px;
}
.db-pdp-tab-panel[hidden] {
	display: none;
}

/* Beschrijving — prose-styling */
.db-pdp-prose {
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--charcoal);
}
.db-pdp-prose > * + * {
	margin-top: 0.75rem;
}
.db-pdp-prose p {
	margin: 0 0 1rem 0;
}
.db-pdp-prose h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 1.75rem 0 0.5rem 0;
	letter-spacing: -0.005em;
}
.db-pdp-prose h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 1.5rem 0 0.4rem 0;
}
.db-pdp-prose h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
	margin: 1.25rem 0 0.4rem 0;
}
.db-pdp-prose ul,
.db-pdp-prose ol {
	margin: 0 0 1rem 1.25rem;
	padding: 0;
}
.db-pdp-prose li {
	margin: 0 0 0.3rem 0;
	line-height: 1.65;
}
.db-pdp-prose a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.db-pdp-prose a:hover {
	color: var(--wp--preset--color--forest);
}

/* Eigenschappen — spec-tabel */
.db-pdp-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.db-pdp-specs tr {
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-pdp-specs tr:first-child {
	border-top: 0; /* tegen eventuele default WP table-border */
}
.db-pdp-specs tr:last-child {
	border-bottom: 0;
}
.db-pdp-specs th,
.db-pdp-specs td {
	padding: 0.7rem 1rem 0.7rem 0;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}
/* Eerste rij flush met panel-top — gelijke startpositie als beschrijving-tab */
.db-pdp-specs tr:first-child th,
.db-pdp-specs tr:first-child td {
	padding-top: 0;
}
.db-pdp-specs th {
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	width: 40%;
}
.db-pdp-specs td {
	color: var(--wp--preset--color--charcoal-soft);
}

/* Veelgestelde vragen — accordion via native <details>/<summary> */
.db-pdp-faq {
	/* Geen outer borders — alleen scheidingslijnen tussen items, niet boven/onder de groep. */
}
.db-pdp-faq-item {
	border-bottom: 1px solid var(--db-border-subtle);
	padding: 0;
}
.db-pdp-faq-item:last-child {
	border-bottom: 0;
}
.db-pdp-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0; /* synchroon met specs-cell-padding — gelijke rij-hoogte tussen tabs */
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	list-style: none;
	transition: color 150ms;
}
/* Eerste vraag flush met panel-top — gelijke startpositie als beschrijving-tab */
.db-pdp-faq-item:first-child summary {
	padding-top: 0;
}
.db-pdp-faq-item summary::-webkit-details-marker {
	display: none;
}
.db-pdp-faq-item summary:hover {
	color: var(--wp--preset--color--teal);
}
.db-pdp-faq-chevron {
	flex-shrink: 0;
	color: var(--wp--preset--color--text-muted);
	transition: transform 200ms ease, color 200ms;
}
.db-pdp-faq-item[open] .db-pdp-faq-chevron {
	transform: rotate(180deg);
	color: var(--wp--preset--color--forest);
}
.db-pdp-faq-answer {
	padding: 0 0 1.25rem 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-pdp-faq-answer p {
	margin: 0 0 0.65rem 0;
}
.db-pdp-faq-answer p:last-child {
	margin-bottom: 0;
}

/* Beoordelingen — review-list binnen tab */
.db-pdp-tab-panel .db-pdp-reviews-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-pdp-tab-panel .db-pdp-reviews-sub {
	font-size: 14px;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
	font-weight: 300;
}
.db-pdp-tab-panel .db-pdp-reviews-score {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.db-pdp-tab-panel .db-pdp-reviews-avg {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
}
.db-pdp-reviews-empty {
	color: var(--wp--preset--color--text-muted);
	font-size: 15px;
	margin: 0;
}

/* ===== PRODUCT DETAILS (tabs) ===== */
.db-pdp-details {
	max-width: 100% !important;
}
.db-pdp-product-details .wc-tabs,
.db-pdp-product-details .wc-tabs-wrapper {
	margin: 0;
}
.db-pdp-product-details ul.tabs.wc-tabs,
.db-pdp-product-details .wc-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--db-border-input);
	margin: 0 0 2rem 0;
	padding: 0;
	list-style: none;
}
.db-pdp-product-details .wc-tabs li {
	margin: 0;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
}
.db-pdp-product-details .wc-tabs li a {
	display: inline-block;
	padding: 1rem 1.5rem;
	font-size: 14px;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 150ms, border-color 150ms;
}
.db-pdp-product-details .wc-tabs li a:hover {
	color: var(--wp--preset--color--forest);
}
.db-pdp-product-details .wc-tabs li.active a {
	color: var(--wp--preset--color--forest);
	border-bottom-color: var(--wp--preset--color--forest);
}

/* Tab-content typografie — eigen schaal binnen tab-panels.
   Anders krijgt h2/h3 de globale (te grote) theme.json-fontSize. */
.db-pdp-product-details .woocommerce-Tabs-panel {
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--charcoal);
	max-width: 800px; /* leesbare regelbreedte voor body-tekst */
}
.db-pdp-product-details .woocommerce-Tabs-panel > h2:first-child {
	/* Tab-titel die WC zelf print (Beschrijving / Aanvullende informatie / Beoordelingen) */
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.5rem, 2.5vw, 1.875rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
	margin: 0 0 1.25rem 0 !important;
}
/* Sub-headings binnen content — h2 die de klant invoegt in description */
.db-pdp-product-details .woocommerce-Tabs-panel h2:not(:first-child) {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.25rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 1.75rem 0 0.5rem 0 !important;
}
.db-pdp-product-details .woocommerce-Tabs-panel h3 {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1.125rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 1.5rem 0 0.4rem 0 !important;
}
.db-pdp-product-details .woocommerce-Tabs-panel h4 {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 1.25rem 0 0.4rem 0 !important;
}
.db-pdp-product-details .woocommerce-Tabs-panel p {
	margin: 0 0 1rem 0;
}
.db-pdp-product-details .woocommerce-Tabs-panel ul,
.db-pdp-product-details .woocommerce-Tabs-panel ol {
	margin: 0 0 1rem 1.25rem;
	padding: 0;
}
.db-pdp-product-details .woocommerce-Tabs-panel li {
	margin: 0 0 0.3rem 0;
	line-height: 1.65;
}
.db-pdp-product-details .woocommerce-Tabs-panel a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.db-pdp-product-details .woocommerce-Tabs-panel a:hover {
	color: var(--wp--preset--color--forest);
}
.db-pdp-product-details .woocommerce-Tabs-panel table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}
.db-pdp-product-details .woocommerce-Tabs-panel table.shop_attributes th,
.db-pdp-product-details .woocommerce-Tabs-panel table.shop_attributes td {
	padding: 0.65rem 0.9rem;
	border-bottom: 1px solid var(--db-border-subtle);
	text-align: left;
	font-style: normal;
}
.db-pdp-product-details .woocommerce-Tabs-panel table.shop_attributes th {
	background: var(--wp--preset--color--cream);
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	width: 40%;
}

/* ===== RELATED PRODUCTS (eigen block dutch-balance/pdp-related) ===== */
.db-pdp-related {
	max-width: 100% !important;
}
.db-pdp-related-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}
.db-pdp-related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.db-related-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	transition: transform 250ms;
}
.db-related-card:hover {
	transform: translateY(-3px);
}
.db-related-img-wrap {
	position: relative;
	aspect-ratio: 1/1;
	background: var(--wp--preset--color--cream); /* tegen witte sectie-bg, voor card-contrast */
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	margin-bottom: 0.75rem;
}
.db-related-img,
.db-related-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 1rem;
	box-sizing: border-box; /* anders schuift padding de img buiten de wrap → 'ingezoomd' */
	mix-blend-mode: multiply;
	display: block;
	transition: transform 400ms;
}
.db-related-card:hover .db-related-img {
	transform: scale(1.04);
}
.db-related-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--db-radius);
	z-index: 2;
}
.db-related-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0 0.25rem;
}
.db-related-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	line-height: 1.3;
	margin: 0 0 0.4rem 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.db-related-rating {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--goal-energie);
	margin-bottom: 0.4rem;
}
.db-related-count {
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}
.db-related-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin-top: auto;
	padding-top: 0.4rem;
}
.db-related-price del,
.db-related-price del .amount {
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
	font-size: 12px;
	margin-right: 0.3rem;
}
.db-related-link {
	font-size: 12px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	margin-top: 0.4rem;
	transition: color 150ms;
}
.db-related-card:hover .db-related-link {
	color: var(--wp--preset--color--forest);
}

@media (max-width: 1024px) {
	.db-pdp-related-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	/* Related = horizontale swipe-carousel i.p.v. grid (volgende kaart peekt). */
	.db-pdp-related-grid {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		/* Géén bleed: start bij de wrapper-rand, peek blijft binnen de wrapper
		   (identiek aan de reviews-carousel — één handschrift). */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.db-pdp-related-grid::-webkit-scrollbar {
		display: none;
	}
	.db-pdp-related-grid > .db-shop-card {
		/* Zelfde vaste peek (~48px) als de reviews-carousel. */
		flex: 0 0 calc(100% - 64px);
		max-width: 360px;
		scroll-snap-align: start;
	}
}

/* PDP mobile */
@media (max-width: 1024px) {
	.db-pdp-hero { gap: 2rem !important; }
}
@media (max-width: 768px) {
	.db-pdp-hero { flex-direction: column !important; }
	.db-pdp-gallery-col,
	.db-pdp-buybox {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	/* WC-fallback-grid (.products) — onze eigen grid is nu een carousel (zie boven). */
	.db-pdp-related .products { grid-template-columns: repeat(2, 1fr) !important; }

	/* Titelgroep (eyebrow+titel+rating) staat op mobiel bóven de gallery (JS).
	   Eigen marges van de elementen behouden (geen block-gap-dubbeling). */
	.db-pdp-titlegroup > * {
		margin-block-start: 0;
	}

	/* Voorraad-pill op één regel houden i.p.v. "verzonden" naar een 2e regel laten
	   breken. 12px past tot 375px; nowrap voorkomt breuk op nóg smallere schermen. */
	.db-pdp-buybox .db-stock-label {
		white-space: nowrap;
		font-size: 12px;
	}

	/* Aantal + toevoeg-knop náást elkaar op één regel (niet wrappen). */
	.db-pdp-add-to-cart form.cart {
		flex-wrap: nowrap;
	}
	/* Aantal-blok compacter op mobiel → betere verhouding: knop krijgt meer breedte
	   (knop is flex:1, dus alle ruimte die het aantal-blok inlevert gaat naar de knop). */
	.db-pdp-add-to-cart .db-qty-btn {
		width: 34px;
	}
	.db-pdp-add-to-cart .quantity input.qty {
		width: 32px;
	}
}

/* Knoptekst korter op telefoons ("In winkelmand") zodat aantal + knop op één regel
   passen tot 375px. De echte buttontekst blijft in de DOM (a11y/schermlezer),
   alleen visueel ingekort via font-size:0 + ::after. */
@media (max-width: 600px) {
	.db-pdp-add-to-cart button.single_add_to_cart_button,
	.db-pdp-add-to-cart .single_add_to_cart_button {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		white-space: nowrap;
		font-size: 0 !important;
	}
	.db-pdp-add-to-cart button.single_add_to_cart_button::after,
	.db-pdp-add-to-cart .single_add_to_cart_button::after {
		content: "In winkelmand";
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.005em;
	}
}
@media (max-width: 480px) {
	.db-pdp-title { font-size: 1.625rem !important; }
	.db-pdp-related .products { grid-template-columns: 1fr !important; }
}

/* ===== SHOP / ARCHIVE-PRODUCT (WC category) ===== */
.db-shop-head {
	max-width: 100% !important;
}
.db-shop-eyebrow {
	font-weight: 500 !important;
}
.db-shop-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 3.8vw, 2.75rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}
.db-shop-desc {
	max-width: 720px;
}

/* WP's globale regel `:where(.wp-site-blocks) > *` zet margin-block-start
   op ÁLLE directe children — tussen header→crumbs→content→footer ontstaat
   dan een gap waar de body-bg (warm-white) doorheen schijnt als strookje.
   We sturen spacing overal zelf via template-padding, dus de global margin
   generiek neutraliseren op alle directe children van .wp-site-blocks.
   (geleerd: 3× geraakt — PDP-top, boven footer, archive-breadcrumbs) */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Idem binnen de WC single-product wrapper: hero / tabs / reviews / related
   zijn siblings die WP-blockGap (24px) krijgen → smalle warm-white strookjes
   tussen secties met witte achtergrond. Sections hebben zelf ruime padding,
   dus block-gap neutraliseren binnen deze wrapper. */
.wp-block-group.woocommerce.product > * {
	margin-block-start: 0;
}

/* WC Breadcrumbs styling — eigen delimiter via woocommerce_breadcrumb_defaults filter.
   wp-block-breadcrumbs (outer DIV, alignwide max-width:1300) krijgt van WC een
   `display:flex`. De inner <nav class="woocommerce-breadcrumb"> wordt dan een
   flex-item dat shrinkt en auto-gemarged wordt — visueel gecentreerd. Fix:
   outer terug naar block, inner full-width zonder margin. */
.wp-block-breadcrumbs.db-breadcrumbs {
	display: block !important;
	position: relative;
	font-size: 13px !important;
	color: var(--wp--preset--color--text-muted) !important;
	line-height: 1.4 !important;
	/* Reusable breadcrumb-component: border + onder-ruimte reizen overal mee
	   (cart/PDP/PLP/pagina's) → één consistent patroon. De breadcrumb-tékst blijft
	   binnen de wrapper, maar de divider loopt FULL-BLEED (schermrand tot schermrand)
	   via het pseudo-element hieronder — zo loopt hij overal helemaal door, ook al
	   is de breadcrumb-content constrained tot 1300px. (100vw wordt door
	   `overflow-x:clip` op html/body afgevangen → geen horizontale scroll.) */
	padding-bottom: var(--db-page-top); /* = ruimte bóven de breadcrumb (header→crumb) → verticaal gecentreerd tussen header en divider */
}
.wp-block-breadcrumbs.db-breadcrumbs::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 100vw;
	border-bottom: 1px solid var(--db-border-subtle);
	pointer-events: none;
}
.wp-block-breadcrumbs.db-breadcrumbs > nav.woocommerce-breadcrumb {
	display: block !important;
	width: 100%;
	margin: 0 !important;
	font-size: inherit;
	color: inherit;
	/* Te lange kruimelpaden (lange producttitel) niet laten wrappen maar horizontaal
	   scrollbaar maken — start blijft bij de wrapper-rand, rest schuift mee. */
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.wp-block-breadcrumbs.db-breadcrumbs > nav.woocommerce-breadcrumb::-webkit-scrollbar {
	display: none;
}
.db-breadcrumb-sep {
	display: inline-block;
	margin: 0 0.65rem;
	color: var(--wp--preset--color--text-muted);
	opacity: 0.6;
}
/* Klikbare paden — lichter grijs (secundair) */
.db-breadcrumbs a,
.woocommerce-breadcrumb a {
	color: var(--wp--preset--color--text-muted) !important;
	text-decoration: none !important;
	transition: color 150ms;
}
.db-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
	color: var(--wp--preset--color--forest) !important;
}
/* Huidige pagina — donkerder (you-are-here) */
.db-breadcrumb-current {
	color: var(--wp--preset--color--forest);
	font-weight: 500;
}

.db-shop {
	max-width: 100% !important;
}

/* Product-grid layout — geforceerd 3 kolommen op desktop, ongeacht WC's shrink-logic */
.db-shop-grid {
	gap: 1.25rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
}
.db-shop-grid > li {
	list-style: none;
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 1024px) {
	.db-shop-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
	.db-shop-grid { grid-template-columns: 1fr !important; }
}

/* Product-card */
.db-shop-card {
	background: transparent;
	transition: transform 250ms;
}
.db-shop-card:hover {
	transform: translateY(-3px);
}

/* ===== SHOP / ARCHIVE-PRODUCT — PASS 2: 2-col layout met filter-sidebar (Martijn's vormtaal) ===== */

/* Hoofd-layout: sidebar + product-area. Op desktop blijft sidebar sticky. */
.db-shop-layout {
	gap: 2.5rem !important;
}
.db-shop-sidebar {
	flex-basis: 240px !important;
	flex-shrink: 0;
}
@media (min-width: 1024px) {
	.db-shop-sidebar {
		align-self: flex-start;
		padding-top: 0; /* geen offset — eerste filtergroep lijnt strak met H1-top */
	}
}
.db-shop-main {
	flex: 1 1 0 !important;
	min-width: 0;
}

/* WP zet block-flow margin-top (16px) op elke filter-wrapper omdat .db-shop-filters
   is-layout-flow is — daardoor zakt de eerste filtergroep onder de H1-top. Wegnemen,
   we sturen de gap zelf via border-bottom hieronder. (= dezelfde block-margin-valkuil
   als elders, nu binnen de sidebar) */
.db-shop-filters > * {
	margin-block-start: 0 !important;
}

/* Scheidingslijn + ruimte ONDER elke filtergroep (border-bottom = geen lijn boven groep 1) */
.db-shop-filters > .wp-block-woocommerce-filter-wrapper {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-shop-filters > .wp-block-woocommerce-filter-wrapper:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
/* Active-filters-wrapper collapsen zolang er geen chips zijn (anders 3rem dood-ruimte boven Soort CBD) */
.db-shop-filters > .wp-block-woocommerce-filter-wrapper:has(.db-shop-filter-active):not(:has(li)) {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
/* Filter-group titles (de "Spectrum type" / "CBD sterkte" labels) */
.db-shop-filters h3,
.db-shop-filters .wc-block-product-filter__title,
.db-shop-filters .wp-block-heading {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal) !important;
	letter-spacing: 0 !important;
	margin: 0 0 0.75rem 0 !important;
	text-transform: none !important;
}
/* Checkbox + label per optie */
.db-shop-filters label,
.db-shop-filters .wc-block-checkbox-list__label {
	display: flex !important;
	align-items: center !important;
	gap: 0.6rem;
	padding: 0.15rem 0;
	font-size: 13px;
	color: var(--wp--preset--color--charcoal-soft);
	cursor: pointer;
	transition: color 150ms;
}
/* Filter-list items strak — WC li's krijgen anders eigen marge */
.db-shop-filters ul,
.db-shop-filters .wc-block-checkbox-list,
.db-shop-filters .wc-block-components-checkbox-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.db-shop-filters li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
/* WC zet margin-top:20px op elke checkbox-wrapper → veel te ruim. Strakker. */
.db-shop-filters .wc-block-components-checkbox {
	margin: 0 !important;
}
.db-shop-filters li + li .wc-block-components-checkbox {
	margin-top: 0.35rem !important;
}
.db-shop-filters label:hover {
	color: var(--wp--preset--color--forest);
}

/* ===== Per-filter "Herstellen"-reset-knop weg (redundant: Alles wissen + chip-× + uitvinken) ===== */
.db-shop-filters .wc-block-components-filter-reset-button {
	display: none !important;
}

/* ===== Checkbox in filter-opties — eigen vorm, forest bij checked/hover + Lucide-check (wit) =====
   WC's eigen checkmark-SVG (.wc-block-components-checkbox__mark) verbergen we volledig;
   de vink tekenen we zelf als Lucide "check" via background-image op de input. Zo zit 'ie
   altijd perfect gecentreerd in het 18px vlak. */
.db-shop-filters .wc-block-components-checkbox__mark {
	display: none !important;
}
.db-shop-filters .wc-block-components-checkbox__input[type="checkbox"],
.db-shop-filters input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	border: 1.5px solid var(--db-border-input);
	border-radius: 4px;
	/* WC zet eigen background-size/position met hoge specificity → !important nodig */
	background-color: #fff !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 11px 11px !important;
	background-image: none !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 150ms, border-color 150ms;
}
/* Lucide "check" — witte stroke, gecentreerd. Toegepast bij checked én hover (preview). */
.db-shop-filters .wc-block-components-checkbox:hover .wc-block-components-checkbox__input,
.db-shop-filters label:hover input[type="checkbox"],
.db-shop-filters .wc-block-components-checkbox__input[type="checkbox"]:checked,
.db-shop-filters input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--forest) !important;
	border-color: var(--wp--preset--color--forest) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}
/* Count rechts naast optie */
.db-shop-filters .wc-block-checkbox-list__label-text,
.db-shop-filters .wc-filter-element-label-list-count {
	margin-left: auto;
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}

/* ===== NIEUWE WC PRODUCT FILTERS (WC 10.9, product-filter-*) — huisstijl =====
   De generieke .db-shop-filters input/label/h3-regels hierboven pakken al op de
   nieuwe blokken. Hier het nieuwe-blok-specifieke: groep-dividers, item-spacing,
   WC's eigen check-SVG verbergen (we tekenen de vink zelf via de input-background),
   naam+count-uitlijning, en de nieuwe actieve-chips + wis-knop. Scoped op
   .db-shop-filters-inner (= de product-filters container) voor voldoende specificity. */
/* Descendant (niet >): de groepen zitten genest in __overlay-content, niet als
   directe child van .db-shop-filters-inner. */
.db-shop-filters-inner .db-shop-filter-group {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-shop-filters-inner .db-shop-filter-group:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
/* Header-groep (flex-wrapper om de h3) — geen extra marge, kop levert de ruimte */
.db-shop-filters-inner .db-shop-filter-group > .wp-block-group {
	margin: 0 0 0.75rem 0;
	gap: 0;
}
/* Lijst-structuur (nieuwe blok gebruikt divs, geen li's) */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__item {
	margin: 0;
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__label {
	width: 100%;
}
/* Checkbox-vlak: 18px, WC's eigen check-SVG verbergen (vink komt van input-background) */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper svg {
	display: none !important;
}
/* WC tekent een grijze ::before-overlay (rgb(74,74,74)) in de wrapper → het "grijze
   blokje" ín de checkbox. Verbergen; onze vink komt van de input-background. */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper::before,
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input-wrapper::after {
	display: none !important;
	content: none !important;
	background: none !important;
}
/* Rating-filter sterren → standaard sterrenkleur (--goal-energie, = reviews/PDP-sterren) i.p.v. grijs */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__stars svg {
	color: var(--wp--preset--color--goal-energie);
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__stars svg path,
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__stars svg g {
	fill: var(--wp--preset--color--goal-energie) !important;
}

/* ===== WC Product Filters overlay UITGESCHAKELD — wij gebruiken onze EIGEN flyout =====
   Het WC-overlay-mechanisme botste met onze eigen mobiele flyout (shop.js: FAB +
   .db-shop-sidebar.is-open + topbalk = het menu-patroon). Twee systemen = kapot.
   Oplossing: WC's overlay-keten platslaan tot normale inline-flow, zodat de filters
   ALTIJD gewoon in de sidebar renderen — en onze flyout toont die sidebar full-cover
   op mobiel. WC's eigen knop/header/footer/× verbergen (wij leveren FAB + balk zelf). */
.db-shop-filters-inner {
	display: block !important; /* WC zet 'm soms op inline-flex */
}
.db-shop-filters-inner .wc-block-product-filters__overlay,
.db-shop-filters-inner .wc-block-product-filters__overlay-wrapper,
.db-shop-filters-inner .wc-block-product-filters__overlay-dialog,
.db-shop-filters-inner .wc-block-product-filters__overlay-content {
	position: static !important;
	display: block !important;
	inset: auto !important;
	width: auto !important;
	max-width: none !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	z-index: auto !important;
	overflow: visible !important;
	padding: 0 !important;
	margin: 0 !important;
	transform: none !important;
}
/* WC's eigen overlay-chrome verbergen — wij leveren FAB + topbalk zelf (shop.js) */
.wc-block-product-filters__open-overlay,
.wc-block-product-filters__overlay-header,
.wc-block-product-filters__overlay-footer,
.wc-block-product-filters__close-overlay,
.wc-block-product-filters__apply {
	display: none !important;
}
/* Naam links + count rechts */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__text-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__count {
	color: var(--wp--preset--color--text-muted);
	font-size: 11px;
	flex-shrink: 0;
}
/* Actieve filters (nieuwe blok) — titel "Actieve filters" + "Alles wissen" rechtsboven
   + chips eronder (= de oude look). Alleen tonen als er echt filters actief zijn. */
.db-shop-filters-inner .db-shop-filter-active {
	position: relative;
	display: block;
}
.db-shop-filters-inner .db-shop-filter-active:not(:has(.wc-block-product-filter-removable-chips__item)) {
	display: none !important; /* geen actieve filters → hele blok (titel incl.) weg */
}
.db-shop-filters-inner .db-shop-filter-active:has(.wc-block-product-filter-removable-chips__item) {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-shop-filter-active-title {
	margin: 0 0 0.75rem 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal) !important;
	line-height: 1.4;
}
/* Chips-lijst */
.db-shop-filters-inner .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Chip = pill (zachtgroen + forest, = "Bespaar"-chip-tint) */
.db-shop-filters-inner .wc-block-product-filter-removable-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0.2rem 0.35rem 0.2rem 0.65rem;
	background: #ECF3F0;
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--wp--preset--color--forest);
}
.db-shop-filters-inner .wc-block-product-filter-removable-chips__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--forest);
	opacity: 0.7;
	transition: opacity 150ms;
}
.db-shop-filters-inner .wc-block-product-filter-removable-chips__remove:hover {
	opacity: 1;
}
.db-shop-filters-inner .wc-block-product-filter-removable-chips__remove svg {
	width: 12px;
	height: 12px;
}
/* "Alles wissen" — teal-linkje rechtsboven op titel-hoogte (absoluut, = oude look) */
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	color: var(--wp--preset--color--teal);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	background: transparent;
	border: 0;
	padding: 0;
	white-space: nowrap;
}
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}

/* Checkbox expliciet op de nieuwe-blok-klasse — voorkomt native grijze render:
   ongevinkt = zuiver wit + subtiele rand, gevinkt = forest + witte Lucide-check. */
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	border: 1.5px solid var(--db-border-input) !important;
	border-radius: 4px !important;
	background-color: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: pointer;
}
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__label:hover .wc-block-product-filter-checkbox-list__input,
.db-shop-filters-inner .wc-block-product-filter-checkbox-list__input:checked {
	background-color: var(--wp--preset--color--forest) !important;
	border-color: var(--wp--preset--color--forest) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 11px 11px !important;
}

/* Rating-filter sterren — Lucide-sterren ipv WC-iconfont (consistent met PDP-review-sterren + "overal Lucide").
   WC-structuur: DIV.__stars (::before = lege backdrop) > inner SPAN (::before = gevulde, width-geclipt op rating).
   We verbergen de iconfont-tekst (font-size:0 + content:'') en tekenen 5 Lucide-sterren via repeterende background. */
.db-shop-filters .wc-block-components-product-rating__stars {
	position: relative;
	display: inline-block;
	width: 80px; /* 5 × 16px */
	height: 16px;
	font-size: 0 !important; /* verberg iconfont "SSSSS" */
	line-height: 0;
}
.db-shop-filters .wc-block-components-product-rating__stars::before {
	content: '' !important;
	display: block;
	width: 80px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C47D3A' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 16px 16px;
	opacity: 0.4; /* lege sterren: lichte outline */
}
.db-shop-filters .wc-block-components-product-rating__stars span {
	position: absolute;
	top: 0;
	left: 0;
	height: 16px;
	overflow: hidden; /* width-geclipt op rating door WC inline-style */
	display: block;
}
.db-shop-filters .wc-block-components-product-rating__stars span::before {
	content: '' !important;
	display: block;
	width: 80px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C47D3A' stroke='%23C47D3A' stroke-width='1.75' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-size: 16px 16px;
}
/* "(N)"-count na de sterren iets ademruimte geven */
.db-shop-filters .wc-block-components-product-rating-count {
	margin-left: 0.4rem;
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}
/* ===== Active-filters: "Actieve filters" titel links + "Alles wissen" rechts, chips eronder =====
   Structuur: .db-shop-filter-active > [H3 titel] + [.wc-block-active-filters > UL chips + BUTTON clear].
   Titel en clear-button zitten in verschillende parents → clear absoluut top-right positioneren. */
.db-shop-filter-active {
	position: relative;
}
/* .wc-block-active-filters mag GEEN positioning-context zijn, anders refereert de
   absolute clear-all aan dit element (begint onder de titel) ipv aan de wrapper. */
.db-shop-filter-active .wc-block-active-filters {
	position: static;
}
/* Titel "Actieve filters" — zelfde stijl als filtergroep-koppen (h3) */
.db-shop-filter-active .wc-block-active-filters__title,
.db-shop-filter-active > h3 {
	margin: 0 0 0.75rem 0 !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--charcoal) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 1.4;
}
/* "Alles wissen" — klein teal-linkje rechtsboven, op titel-hoogte.
   WC zet margin-top:15px → nullen, anders zakt de absolute knop omlaag. */
.db-shop-filter-active .wc-block-active-filters__clear-all {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--wp--preset--color--teal);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	padding: 0;
	white-space: nowrap;
	line-height: 1.4;
}
.db-shop-filter-active .wc-block-active-filters__clear-all:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
}
/* Chips-lijst, volle breedte onder de titel */
.db-shop-filter-active .wc-block-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* WC voegt per chip een type-prefix toe ("Soort CBD:") als los span — verbergen, de groep-context is duidelijk */
.db-shop-filter-active .wc-block-active-filters__list-item-type {
	display: none;
}
/* LI = transparante container (GEEN eigen pill — anders dubbele badge). De echte pill = .wc-block-components-chip erbinnen. */
.db-shop-filter-active .wc-block-active-filters__list-item {
	display: inline-flex;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
}
/* De pill zelf = WC's chip-element. Gevulde lichte teal-bg, geen border, pill-vorm. */
.db-shop-filter-active .wc-block-components-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: rgba(74, 124, 111, 0.12) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 3px 4px 3px 11px !important;
	min-height: 0 !important;
	color: var(--wp--preset--color--forest) !important;
}
.db-shop-filter-active .wc-block-components-chip__text {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}
/* ×-remove-knop: grijze cirkel weg, subtiel forest-icoontje */
.db-shop-filter-active .wc-block-components-chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	min-width: 16px;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 50% !important;
	color: var(--wp--preset--color--forest) !important;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 150ms, background 150ms;
}
.db-shop-filter-active .wc-block-components-chip__remove:hover {
	opacity: 1;
	background: rgba(45, 74, 62, 0.1) !important;
}
.db-shop-filter-active .wc-block-components-chip__remove svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
}

/* Categorie-titel + beschrijving */
.db-shop-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.875rem, 3.5vw, 2.375rem) !important; /* 38px desktop */
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
	margin: 0 0 0.75rem 0 !important;
}
.db-shop-desc {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
	max-width: 720px;
}

/* Korte intro onder H1 (eerste alinea van cat-omschrijving) — volle breedte product-area */
.db-shop-intro {
	font-size: 14px;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0 0 1.5rem 0;
}

/* SEO-sectie — binnen product-kolom, lijnt uit met intro + grid. "Meer over [cat]"-divider + prose */
.db-shop-seo {
	margin-top: 3.5rem; /* scheiding van het grid puur via witruimte, geen lijn */
}
.db-shop-seo-inner {
	max-width: 100%;
	margin: 0;
}
.db-shop-seo-prose {
	font-size: 15px;
	line-height: 1.75;
	color: var(--wp--preset--color--charcoal);
}

/* Trust-strip — 4 items met verticale dividers tussen, desktop-only */
.db-shop-trust-strip {
	display: none;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--db-border-subtle);
}
@media (min-width: 768px) {
	.db-shop-trust-strip {
		display: flex;
	}
}
.db-shop-trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	white-space: nowrap;
}
.db-shop-trust-item + .db-shop-trust-item {
	border-left: 1px solid var(--db-border-subtle);
	padding-left: 1.5rem;
	margin-left: 1.5rem;
}
.db-shop-trust-item svg {
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

/* Toolbar (count + sort-dropdown) — boven het grid. Geen border, alleen ademruimte. */
.db-shop-toolbar {
	margin-bottom: 1.5rem;
	gap: 1rem !important;
}
.db-shop-count {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
.db-shop-sort select,
.db-shop-sort .wc-block-product-sort-select__select {
	appearance: none;
	border: 1.5px solid var(--db-border-subtle);
	background: white;
	padding: 0.6rem 2rem 0.6rem 0.85rem;
	border-radius: var(--db-radius-input-shape);
	font-size: 13px;
	color: var(--wp--preset--color--charcoal);
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7A7A' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}

/* ===== PRODUCT-CARDS (Martijn's vormtaal: wit kaartje met cream-image-cushion erin) ===== */
.db-shop-card {
	background: white;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-lg);
	overflow: hidden;
	transition: box-shadow 300ms ease, transform 250ms ease;
	display: flex !important;
	flex-direction: column;
	height: 100%;
}
.db-shop-card:hover {
	box-shadow: var(--db-shadow-md);
	transform: none;
}
.db-shop-card a {
	text-decoration: none;
	color: inherit;
}

/* Image-cushion — cream bg, geen radius (card heeft die al via overflow:hidden) */
.db-shop-card .wc-block-components-product-image {
	background: var(--wp--preset--color--cream);
	aspect-ratio: 1/1;
	max-height: 280px; /* bovengrens — cards worden anders te groot bij brede viewports */
	width: 100%;
	overflow: hidden;
	margin: 0 !important;
	border-radius: 0 !important;
	padding: 1.25rem;
	box-sizing: border-box;
	display: block;
}
.db-shop-card .wc-block-components-product-image a {
	display: block;
	width: 100%;
	height: 100%;
}
.db-shop-card .wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain !important; /* WC product-image block zet inline object-fit:cover → overrulen */
	object-position: center;
	mix-blend-mode: multiply;
	display: block;
	transition: transform 600ms ease;
}
.db-shop-card:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

/* Sale-badge linksboven in image-area — forest (huisstijl, geen sale-rood).
   Exact gelijk aan de PDP-onsale-badge (zelfde padding + line-height:1 + min-height,
   anders rendert WC 'm hoger door default line-height/min-height). */
.db-shop-card .wc-block-components-product-sale-badge {
	background: var(--db-sale-badge) !important;
	color: var(--wp--preset--color--cream) !important;
	border-radius: var(--db-radius) !important;
	font-size: 10px !important;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 5px 12px !important;
	top: 12px;
	left: 12px;
	text-transform: uppercase;
	line-height: 1 !important;
	min-height: auto !important;
	border: 0 !important; /* WC zet een 1px-border → maakt 'm 2px hoger dan de PDP-badge */
}

/* Card-body — padding rondom titel + excerpt + prijs/cta */
.db-shop-card-body {
	display: flex !important;
	flex-direction: column !important;
	padding: 1rem 1.1rem 1.1rem !important;
	gap: 0.75rem;
	flex: 1;
}
/* Merk-eyebrow boven titel — klein, uppercase, teal */
.db-shop-card-brand {
	display: block;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--teal);
	line-height: 1.2;
	margin: 0 0 -0.55rem 0 !important; /* dicht op de titel (compenseert flex-gap) */
}
.db-shop-card-title {
	margin: 0 !important;
}
.db-shop-card-title a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 17px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	line-height: 1.3;
	transition: color 150ms;
	/* 2-line clamp */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.db-shop-card-title a:hover {
	color: var(--wp--preset--color--forest-deep);
}

/* Excerpt — klein muted, 2 regels */
.db-shop-card-excerpt {
	font-size: 12px;
	font-weight: 300;
	line-height: 1.55;
	color: var(--wp--preset--color--text-muted);
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.db-shop-card-excerpt p {
	margin: 0 !important;
}

/* Voorraadstatus op de card — compacte sage-dot + "Op voorraad" */
.db-card-stock {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0; /* duidelijk lucht boven de pil (los van de excerpt) */
}
.db-card-stock-dot {
	position: relative;
	display: inline-flex;
	width: 7px;
	height: 7px;
	flex-shrink: 0;
}
.db-card-stock-dot::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
}
.db-card-stock-ping {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--sage);
	opacity: 0.75;
	animation: db-stock-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.db-card-stock-label {
	font-size: 11.5px;
	font-weight: 500;
	color: var(--wp--preset--color--sage);
	letter-spacing: 0.01em;
}
@media (prefers-reduced-motion: reduce) {
	.db-card-stock-ping { animation: none; }
}

/* Footer-row: prijs links, Bekijk → rechts.
   Flex hier in CSS (niet alleen via block-layout) zodat ook PHP-gerenderde cards
   (bestsellers) de space-between krijgen. */
.db-shop-card-footer {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	margin-top: 0 !important;
	padding-top: 0;
	gap: 0.5rem !important;
}
.db-shop-card-price {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--forest) !important;
	text-align: left !important;
	white-space: nowrap;
}
.db-shop-card-price .wc-block-components-product-price__regular,
.db-shop-card-price del {
	color: var(--wp--preset--color--text-muted) !important;
	text-decoration: line-through;
	font-size: 12px !important;
	font-weight: 400 !important;
	margin-right: 0.3rem;
}
.db-shop-card-price .wc-block-components-product-price__value,
.db-shop-card-price ins {
	color: var(--wp--preset--color--forest) !important;
	background: transparent;
	text-decoration: none;
}
.db-shop-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 12px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	transition: color 150ms, transform 150ms;
	white-space: nowrap;
}
.db-shop-card:hover .db-shop-card-cta {
	color: var(--wp--preset--color--forest);
}
.db-shop-card:hover .db-shop-card-cta svg {
	transform: translateX(2px);
}
.db-shop-card-cta svg {
	transition: transform 150ms;
}

/* Lege-staat */
.db-shop-empty {
	color: var(--wp--preset--color--text-muted);
	font-size: 15px;
	padding: 4rem 1rem;
}
.db-shop-empty a {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

/* Pagination — kleine pills */
/* ============================================================
   Paginatie — sitebreed uniform via ÉÉN class `.db-pagination`.
   Markup = block pattern `dutch-balance/pagination` (patterns/pagination.php),
   gerefereerd in elke query-loop → markup én styling één bron van waarheid.
   Nummers = 6px-blokjes met subtiele rand, huidige = forest gevuld.
   Vorige/Volgende = tekst + pijl (forest-link, geen blok).
   ============================================================ */
.db-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}
/* Nummer-blokjes (6px, subtiele rand) */
.db-pagination .wp-block-query-pagination-numbers .page-numbers:not(.dots) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 4px; /* vierkant bij 1-2 cijfers; min-width vangt de rest */
	box-sizing: border-box;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-input-shape);
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
	transition: background 150ms, color 150ms, border-color 150ms;
}
.db-pagination .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--forest);
	border-color: var(--wp--preset--color--forest);
	color: #fff;
}
.db-pagination .wp-block-query-pagination-numbers .page-numbers:not(.current):not(.dots):hover {
	border-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--forest);
}
.db-pagination .page-numbers.dots {
	min-width: auto;
	border: 0;
	color: var(--wp--preset--color--text-muted);
}
/* Vorige / Volgende = tekst + pijl, forest-link (geen blok) */
.db-pagination .wp-block-query-pagination-previous,
.db-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	height: 38px;
	padding: 0 0.4rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--forest);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: color 150ms;
}
.db-pagination .wp-block-query-pagination-previous:hover,
.db-pagination .wp-block-query-pagination-next:hover {
	color: var(--wp--preset--color--forest-deep);
}

/* ===== MOBILE: full-screen filter-overlay (zelfde patroon als het menu) ===== */
@media (max-width: 1023px) {
	.db-shop-sidebar {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: none;
		height: 100dvh; /* expliciet — anders wordt 'ie content-hoog (geen interne scroll) */
		background: var(--wp--preset--color--warm-white);
		z-index: 200; /* boven de sticky header (100) — dekt 'm volledig */
		padding: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		box-shadow: none;
		display: none;
	}
	.db-shop-sidebar.is-open {
		display: block;
	}
	/* Topbalk: "Filters" links + X rechts (zoals het menu). JS-gebouwd. */
	.db-shop-filters-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.875rem 1.5rem;
		border-bottom: 1px solid var(--db-border-subtle);
		background: var(--wp--preset--color--warm-white);
	}
	.db-shop-filters-title {
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.25rem;
		font-weight: 500;
		color: var(--wp--preset--color--forest);
	}
	.db-shop-filters-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
		padding: 0;
		background: transparent;
		border: 0;
		color: var(--wp--preset--color--charcoal);
		cursor: pointer;
	}
	.db-shop-filters-close svg {
		width: 24px;
		height: 24px;
	}
	/* Filter-content krijgt eigen padding (sidebar zelf is padding:0 nu).
	   Bottom 2.5rem = gelijk aan de menu-overlay (consistent). De scroll-clearance
	   komt al van height:100dvh, niet van extra padding. */
	.db-shop-sidebar .db-shop-filters {
		padding: 1.25rem 1.5rem 2.5rem;
	}
	/* Dim-overlay niet meer nodig bij een full overlay. */
	.db-shop-filters-overlay {
		display: none !important;
	}
	/* Mobile floating "Filters"-FAB */
	.db-shop-filters-fab {
		position: fixed;
		bottom: 1.25rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 60;
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.85rem 1.25rem;
		background: var(--wp--preset--color--forest);
		color: white;
		border: 0;
		border-radius: 999px;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		box-shadow: 0 8px 24px rgba(45, 74, 62, 0.35);
		transition: background 150ms;
	}
	.db-shop-filters-fab:hover {
		background: var(--wp--preset--color--forest-deep);
	}
	/* Aantal actieve filters als badge op de FAB (wit rondje, forest cijfer). */
	.db-shop-filters-fab-count {
		display: none;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		border-radius: 999px;
		background: #fff;
		color: var(--wp--preset--color--forest);
		font-size: 11px;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
	}
	.db-shop-filters-fab.has-count .db-shop-filters-fab-count {
		display: inline-block;
	}
	.db-shop-layout {
		flex-direction: column !important;
		gap: 0 !important;
	}
}
@media (min-width: 1024px) {
	.db-shop-filters-fab,
	.db-shop-filters-overlay,
	.db-shop-filters-bar {
		display: none;
	}
}
.db-archive-head {
	max-width: 100% !important;
}
.db-archive-eyebrow {
	font-weight: 500 !important;
}
.db-archive-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2rem, 4.2vw, 3rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}
.db-archive-desc {
	max-width: 600px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.db-archive {
	max-width: 100% !important;
}

/* Grid van post-cards — WP rendert grid-layout zelf maar we forceren 3-koloms en gap */
.db-archive-grid {
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.db-archive-grid > li,
.db-archive-grid > * {
	list-style: none;
}

/* Kennis-card binnen post-template context (override van homepage-stijl waar nodig) */
.db-archive .db-kennis-card,
.db-archive-grid .db-kennis-card {
	background: var(--wp--preset--color--warm-white);
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	box-shadow: var(--db-shadow-soft);
	transition: transform 300ms, box-shadow 300ms;
	padding: 0 !important;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.db-archive .db-kennis-card:hover,
.db-archive-grid .db-kennis-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--db-shadow-md);
}
.db-archive .db-kennis-img,
.db-archive-grid .db-kennis-img {
	border-radius: 0 !important;
	overflow: hidden;
	aspect-ratio: 16/10;
}
.db-archive .db-kennis-img img,
.db-archive-grid .db-kennis-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.db-archive .db-kennis-tag,
.db-archive-grid .db-kennis-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 1rem;
	text-decoration: none;
}
.db-archive .db-kennis-title a,
.db-archive-grid .db-kennis-title a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	line-height: 1.3;
	text-decoration: none;
	display: block;
	margin: 0 0 0.75rem 0;
}
.db-archive .db-kennis-title a:hover,
.db-archive-grid .db-kennis-title a:hover {
	color: var(--wp--preset--color--forest-deep);
}
.db-archive .db-kennis-excerpt,
.db-archive-grid .db-kennis-excerpt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--wp--preset--color--charcoal-soft);
	font-weight: 300;
	margin: 0;
	flex-grow: 1;
}
.db-archive .db-kennis-date,
.db-archive-grid .db-kennis-date {
	font-size: 12px !important;
	color: var(--wp--preset--color--text-muted) !important;
}

/* Paginatie (.db-archive-pagination) — gestyled in het sitebrede uniforme
   paginatie-blok hierboven (zoek "Paginatie — sitebreed uniform"). */

@media (max-width: 1024px) {
	.db-archive-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
}
@media (max-width: 640px) {
	.db-archive-grid { grid-template-columns: 1fr !important; }
	.db-archive-head { padding-top: 3rem !important; padding-bottom: 2rem !important; }
}

/* ===== SINGLE (blog-detail) ===== */
.db-single {
	max-width: 100% !important;
}
.db-single-head {
	text-align: center;
}
.db-single-eyebrow,
.db-single-eyebrow a {
	font-weight: 500 !important;
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
}
.db-single-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(2rem, 4.2vw, 3rem) !important;
	font-weight: 400 !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--forest) !important;
	letter-spacing: -0.005em;
}
.db-single-meta {
	justify-content: center;
	align-items: center;
	gap: 0.5rem !important;
	color: var(--wp--preset--color--text-muted);
}
.db-single-meta-sep {
	margin: 0 !important;
	opacity: 0.6;
}
.db-single-meta time,
.db-single-meta .wp-block-post-author-name {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}

/* Featured image — radius via inline-style; wrap zorgt voor 1100px max */
.db-single-image-wrap {
	max-width: 100% !important;
}
.db-single-image img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: var(--db-shadow-md);
}

/* Body section: terug naar 720px content */
.db-single-body {
	max-width: 100% !important;
}

/* Author-bio onderaan */
.db-single-author {
	background: var(--wp--preset--color--warm-white);
	border-top: 1px solid var(--db-border-subtle);
}
.db-single-author-avatar img {
	border-radius: 50% !important;
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
}
.db-single-author-name {
	font-family: var(--wp--preset--font-family--heading) !important;
	margin: 0 0 0.25rem 0 !important;
}
.db-single-author-bio {
	line-height: 1.55;
	margin: 0 !important;
}

/* Related posts — gebruikt EXACT dezelfde kaart als het blog-archief:
   het grid draagt de class .db-blog-grid (zie single.html), dus base .db-kennis-*
   + .db-blog-grid + .db-kennis-foot doen al het werk. Eén blogkaart, overal gelijk
   (net als de productkaart op PLP/up-/cross-sell). Hier alleen de sectie-wrapper. */
.db-single-related {
	max-width: 100% !important;
}

/* ===== 404 — branded, helpful ===== */
.db-404 {
	max-width: 100% !important; /* group fullwidth, content blijft 720px via constrained layout */
}
.db-404-eyebrow {
	font-weight: 500;
	margin: 0;
}
/* Search-veld in 404: gecentreerd, vol-breedte binnen 720px container */
.db-404-search {
	max-width: 480px;
	margin: 0 auto !important;
}
.db-404-search .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--db-border-input);
	border-radius: 999px;
	background: var(--wp--preset--color--warm-white);
	padding: 4px 4px 4px 18px;
	transition: border-color 150ms;
}
.db-404-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--teal);
}
.db-404-search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 10px 0;
	font-size: 15px;
	color: var(--wp--preset--color--charcoal);
}
.db-404-search .wp-block-search__input:focus {
	outline: none;
}
.db-404-search .wp-block-search__button {
	background: var(--wp--preset--color--forest) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 10px !important;
	color: var(--wp--preset--color--cream) !important;
	transition: background 150ms;
}
.db-404-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--forest-light) !important;
}
.db-404-search .wp-block-search__button svg {
	width: 18px;
	height: 18px;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Outline-button-variant — voor "Terug naar home" naast filled CTA.
   theme.json definieert geen outline-style, dus we stylen 'm hier rechtstreeks. */
.db-404 .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--forest) !important;
	border: 1.5px solid var(--wp--preset--color--forest) !important;
}
.db-404 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--forest) !important;
	color: var(--wp--preset--color--cream) !important;
}

/* Populaire categorieën — grid van 3x2 cards onderaan 404 */
.db-404-cats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.db-404-cats li {
	margin: 0;
}
.db-404-cats a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem 1rem;
	background: var(--wp--preset--color--warm-white);
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-lg);
	color: var(--wp--preset--color--forest);
	text-decoration: none;
	font-weight: 500;
	font-size: 15px;
	text-align: center;
	transition: transform 200ms, box-shadow 200ms, border-color 200ms;
	box-shadow: var(--db-shadow-soft);
}
.db-404-cats a:hover {
	transform: translateY(-2px);
	box-shadow: var(--db-shadow-md);
	border-color: var(--wp--preset--color--sage-light);
	color: var(--wp--preset--color--forest-deep);
}

@media (max-width: 640px) {
	.db-404-cats { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
	.db-404 .wp-block-buttons { flex-direction: column; width: 100%; }
	.db-404 .wp-block-buttons .wp-block-button { width: 100%; }
	.db-404 .wp-block-button__link { display: block; text-align: center; }
}

/* ===== UTILITY ===== */
.db-container {
	max-width: var(--db-max-w);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

/* ===== TOAST — bevestiging bij add-to-cart (vervangt CartDrawer, B7) ===== */
.db-toast-root {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	pointer-events: none;
}
.db-toast {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 290px;
	max-width: 380px;
	padding: 0.85rem 1.1rem;
	background: var(--wp--preset--color--forest);
	color: #fff;
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-lg);
	font-size: 14px;
	font-weight: 500;
	pointer-events: auto;
	transform: translateY(1rem);
	opacity: 0;
	transition: transform 280ms cubic-bezier(0.2, 0, 0, 1), opacity 280ms;
}
.db-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}
.db-toast--error {
	background: var(--db-sale);
}
.db-toast-icon {
	display: inline-flex;
	flex-shrink: 0;
}
.db-toast-msg {
	flex: 1;
	line-height: 1.3;
}
.db-toast-link {
	flex-shrink: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
	transition: opacity 150ms;
}
.db-toast-link:hover {
	opacity: 0.8;
}
@media (max-width: 480px) {
	.db-toast-root {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
	}
	.db-toast {
		min-width: 0;
		max-width: none;
	}
}

/* Add-to-cart button loading-state (tijdens AJAX) */
.db-pdp-add-to-cart .single_add_to_cart_button.is-loading,
.db-pdp-add-to-cart button.is-loading {
	opacity: 0.65;
	cursor: progress;
}

/* ===== VAAK VERKOCHT (bestsellers op lege winkelmand) =====
   Breekt uit de smalle empty-cart-block (max-width:540px) naar de volle
   wrapperbreedte. De empty-cart-block is gecentreerd in de 1300px-main, dus
   centreren op de parent-center = centreren op de wrapper. */
.db-bestsellers {
	width: min(1300px, calc(100vw - 3rem));
	margin-left: 50%;
	transform: translateX(-50%);
	/* Geen divider meer: de cream-band erboven scheidt de secties (= 404). 4rem lucht
	   na de band, zoals de 404 "Populaire categorieën" (padding-top 4rem). */
	margin-top: 4rem;
}
.db-bestsellers-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.375rem, 2.5vw, 1.75rem);
	font-weight: 400;
	color: var(--wp--preset--color--forest);
	text-align: center;
	margin: 0 0 2.5rem 0;
}
.db-bestsellers-grid {
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 1.25rem !important;
}
/* De bestsellers staan in de gecentreerde empty-cart-block → erven text-align:center.
   Overrulen naar links, exact zoals de PLP-cards. */
.db-bestsellers .db-shop-card,
.db-bestsellers .db-shop-card-body {
	text-align: left;
}
/* Footer direct onder de voorraad-pil (geen auto-margin-gat). Cards zijn uniform
   genoeg met merk+titel+excerpt+voorraad, dus prijs-uitlijning blijft netjes. */
.db-bestsellers .db-shop-card-footer {
	margin-top: 0 !important;
}
@media (max-width: 1100px) {
	.db-bestsellers-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
	/* Cross-sell-strip = horizontale swipe-carousel (zelfde handschrift als PDP
	   related/reviews): eerste kaart op de wrapper, vaste peek ~48px van de
	   volgende kaart. De .db-bestsellers-container loopt al van wrapper-rand tot
	   wrapper-rand → géén bleed nodig; peek wordt op de rechter rand geclipt. */
	.db-bestsellers-grid {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 1rem !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.db-bestsellers-grid::-webkit-scrollbar {
		display: none;
	}
	.db-bestsellers-grid > .db-shop-card {
		flex: 0 0 calc(100% - 64px);
		max-width: 360px;
		scroll-snap-align: start;
	}
}

/* ===== MIJN ACCOUNT — auth (login + registratie, uitgelogd) ===== */
/* Layout op de canonieke componenten (.db-card / .db-field / .db-btn). */
/* WC zet op account-pagina's een eigen max-width (~1000px) op .woocommerce —
   overrulen zodat de content de site-wrapper (1300px) volgt. */
.db-account .woocommerce { max-width: 100% !important; width: 100%; }

/* Page-header (breadcrumb + titel) — zelfde patroon als de winkelmand. Zit ín
   .db-account (al 1.5rem side-padding) → eigen padding-inline neutraliseren, anders
   3rem inset. Top-ruimte komt van de page-header zelf (.db-account padding-top=0). */
.db-account .db-page-header { padding-inline: 0; }

.db-auth {
	display: grid;
	gap: 1.5rem;
	margin-inline: auto;
}
/* Volgt de site-wrapper (1300px) — lijnt uit met header/footer. */
.db-auth--split { grid-template-columns: 1fr 1fr; max-width: 100%; align-items: stretch; }
.db-auth--single { grid-template-columns: 1fr; max-width: 440px; }

/* Gelijke hoogte: cards rekken mee, body + form vullen de hoogte,
   submit-knop anker onderaan zodat beide knoppen uitlijnen. */
.db-auth__col { margin: 0; display: flex; flex-direction: column; }
.db-auth__col .db-card__body { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.db-auth__col .woocommerce-form { flex: 1; display: flex; flex-direction: column; }
.db-auth__col .woocommerce-form .db-btn { margin-top: auto; }
/* Registratie-kolom subtiel onderscheiden met cream-vlak. */
.db-auth__col--register { background: var(--wp--preset--color--cream); }

/* Vaste maat — NIET de fluid x-large preset (die schiet op desktop naar 42px). */
.db-auth__title { margin: 0 0 0.35rem; font-size: 1.625rem; line-height: 1.2; }
.db-auth__sub {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--charcoal-soft);
	font-size: 0.875rem;
	line-height: 1.55;
}
.db-auth__sub--small { font-size: 0.8125rem; color: var(--wp--preset--color--text-muted); margin-bottom: 0.5rem; }

.db-auth__benefits {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.db-auth__benefits li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-auth__benefits svg {
	flex-shrink: 0;
	margin-top: 0.05rem;
	color: var(--wp--preset--color--forest);
	stroke-width: 2.5;
}

/* Nieuwsbrief-opt-in (Klaviyo) — registratie + accountgegevens. */
.db-newsletter-optin { margin: 0 0 1.25rem; }
.db-newsletter-optin label {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	cursor: pointer;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-newsletter-optin input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--forest);
	cursor: pointer;
}
.db-newsletter-optin em { font-style: normal; color: var(--wp--preset--color--text-muted); }

.db-auth__field { margin: 0 0 1rem; }
.db-auth__field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal-soft);
}

.db-auth__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0.25rem 0 1.5rem;
	font-size: 0.8125rem;
}
.db-auth__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--charcoal-soft);
	cursor: pointer;
	margin: 0;
}
.db-auth__checkbox {
	width: 16px; height: 16px;
	accent-color: var(--wp--preset--color--forest);
	cursor: pointer;
}
.db-auth__lost { color: var(--wp--preset--color--teal); text-decoration: none; white-space: nowrap; }
.db-auth__lost:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }

.db-auth__back { margin: 1.25rem 0 0; text-align: center; font-size: 0.8125rem; }
.db-auth__back a { color: var(--wp--preset--color--teal); text-decoration: none; }
.db-auth__back a:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }

/* WC-foutmeldingen binnen account netjes. */
.db-account .woocommerce-error,
.db-account .woocommerce-message,
.db-account .woocommerce-info {
	list-style: none;
	margin: 0 auto 1.5rem;
	max-width: 880px;
	padding: 0.85rem 1.1rem;
	border-radius: var(--db-radius);
	border: 1px solid var(--db-border-subtle);
	background: var(--wp--preset--color--cream);
	font-size: 0.875rem;
}
.db-account .woocommerce-error { border-color: rgba(196, 69, 69, 0.3); background: rgba(196, 69, 69, 0.06); }

@media (max-width: 720px) {
	.db-auth--split { grid-template-columns: 1fr; max-width: 440px; }
	.db-auth__col .db-card__body { padding: 1.5rem; }
}

/* ===== MIJN ACCOUNT — ingelogd (sidebar-nav + dashboard) ===== */
/* 2-koloms layout (ingelogd): nav + content in .db-account-layout. */
.db-account-layout {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
}
.db-account-nav { width: 240px; flex-shrink: 0; }

/* Greeting boven de layout (dashboard) */
.db-account-greeting { margin-bottom: 1.75rem; }
.db-account-greeting__eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-bottom: 0.35rem;
}
.db-account-greeting__name {
	margin: 0;
	font-size: 2.25rem;
	line-height: 1.1;
	color: var(--wp--preset--color--forest);
}
.db-account .woocommerce-MyAccount-content { flex: 1; min-width: 0; }

/* Sidebar-navigatie */
.db-account-nav ul {
	list-style: none;
	margin: 0;
	/* WC zet padding:0 op de nav-ul (hogere specificity) → items plakten tegen
	   de cardrand. Forceren zodat ze inset zweven, zoals Martijn. */
	padding: 0.75rem !important;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
}
/* WC zet padding-bottom:20px op elke nav-li → grote gaten. Wegnemen. */
.db-account-nav li { margin: 0 !important; padding: 0 !important; }
.db-account-nav li a {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.8rem 1rem;
	border-radius: 10px;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.db-account-nav li a svg { color: var(--wp--preset--color--text-muted); flex-shrink: 0; }
.db-account-nav li a:hover { background: var(--wp--preset--color--warm-white); color: var(--wp--preset--color--forest); }
.db-account-nav li a:hover svg { color: var(--wp--preset--color--forest); }
/* Active = zachte cream-vulling + forest (Martijn-stijl), niet solid forest. */
/* WC zet text-decoration:underline op de actieve nav-link → weghalen. */
.db-account-nav li a { text-decoration: none !important; }
.db-account-nav li.is-active a { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--forest); font-weight: 600; }
.db-account-nav li.is-active a svg { color: var(--wp--preset--color--forest); }
/* Scheidingslijn vóór Uitloggen (Martijn-stijl). */
.db-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 0.4rem !important;
	padding-top: 0.5rem !important;
	border-top: 1px solid var(--db-border-subtle);
}

/* Dashboard */
.db-dash { display: flex; flex-direction: column; gap: 1.5rem; }
.db-dash__greeting { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--xxx-large); }
.db-dash__intro { margin: 0 0 1.75rem; color: var(--wp--preset--color--charcoal-soft); }

/* Welkomstbanner — zelfde witte card-stijl als de KPI-blokken eronder
   (erft .db-card: wit, subtiele border, shadow, 15px radius). */
.db-dash-banner__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.5rem 1.75rem;
}
.db-dash-banner__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin-bottom: 0.5rem;
}
.db-dash-banner__eyebrow svg { color: var(--wp--preset--color--teal); }
.db-dash-banner__text { margin: 0; color: var(--wp--preset--color--charcoal-soft); }
.db-dash-banner .db-btn { flex-shrink: 0; }

/* KPI-kaarten */
.db-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.db-kpi .db-card__body { padding: 1.5rem; }
.db-kpi__head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; }
.db-kpi__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--db-radius-input-shape);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--forest);
	flex-shrink: 0;
}
.db-kpi__label { font-size: 0.875rem; color: var(--wp--preset--color--charcoal-soft); }
.db-kpi__value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	line-height: 1.1;
	color: var(--wp--preset--color--forest);
}
.db-kpi__value span,
.db-kpi__value small {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}
.db-kpi__value .woocommerce-Price-amount { font-family: var(--wp--preset--font-family--heading); }
.db-dash__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; }
.db-dash__card .db-card__body { padding: 1.5rem; }
.db-dash__card h2 { margin: 0; font-size: 1.125rem; }
.db-dash__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.db-dash__all { font-size: 0.8125rem; color: var(--wp--preset--color--teal); text-decoration: none; white-space: nowrap; }
.db-dash__all:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }

.db-order-list { list-style: none; margin: 0; padding: 0; }
.db-order-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--db-border-subtle);
}
.db-order-row:last-child { border-bottom: 0; padding-bottom: 0; }
.db-order-row__main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.db-order-row__num { font-weight: 600; color: var(--wp--preset--color--charcoal); }
.db-order-row__date { font-size: 0.8125rem; color: var(--wp--preset--color--text-muted); }
.db-order-row__total { font-weight: 600; color: var(--wp--preset--color--charcoal); }

/* Order-status pillen (kleur per status, gebruikt .db-pill basis) */
.db-order-status { text-transform: none; }
.db-order-status--completed { background: rgba(127, 166, 142, 0.18); color: var(--wp--preset--color--forest); }
.db-order-status--processing { background: rgba(196, 125, 58, 0.15); color: var(--wp--preset--color--goal-energie); }
.db-order-status--on-hold,
.db-order-status--pending,
.db-order-status--checkout-draft,
.db-order-status--draft { background: rgba(0, 0, 0, 0.06); color: var(--wp--preset--color--charcoal-soft); }
.db-order-status--cancelled,
.db-order-status--failed,
.db-order-status--refunded { background: rgba(196, 69, 69, 0.12); color: var(--db-sale); }

.db-dash__empty { color: var(--wp--preset--color--text-muted); margin: 0 0 1rem; }
.db-dash__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.db-dash__links a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--forest);
	text-decoration: none;
	font-size: 0.9375rem;
}
.db-dash__links a svg { color: var(--wp--preset--color--text-muted); flex-shrink: 0; }
.db-dash__links a:hover { color: var(--wp--preset--color--teal); }
.db-dash__links a:hover svg { color: var(--wp--preset--color--teal); }

/* ----- Subpagina's (bestellingen / adressen / accountgegevens) ----- */
.db-account-title { margin: 0 0 1.5rem; font-size: var(--wp--preset--font-size--xxx-large); }

/* Paginatie (bestellingen) */
.db-account-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
}
.db-account-pagination__info { font-size: 0.8125rem; color: var(--wp--preset--color--text-muted); }

/* Account-formulieren — WC-velden op de .db-field-look */
.db-account .woocommerce-MyAccount-content form .form-row,
.db-account .woocommerce-MyAccount-content form .woocommerce-form-row { margin: 0 0 1.1rem; }
.db-account .woocommerce-MyAccount-content form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal-soft);
}
/* Checkbox-label (bv. Klaviyo nieuwsbrief-opt-in) is een gewone block-label met een
   baseline-checkbox → checkbox bungelt boven de tekst. Flex + center uitlijnen. */
.db-account .woocommerce-MyAccount-content form label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}
.db-account .woocommerce-MyAccount-content form label > input[type="checkbox"] {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--forest);
	cursor: pointer;
}
.db-account .woocommerce-MyAccount-content form .input-text,
.db-account .woocommerce-MyAccount-content form input[type="text"],
.db-account .woocommerce-MyAccount-content form input[type="email"],
.db-account .woocommerce-MyAccount-content form input[type="tel"],
.db-account .woocommerce-MyAccount-content form input[type="password"],
.db-account .woocommerce-MyAccount-content form select {
	/* Gelijk aan de cart/checkout-velden (1 input-stijl over de hele site):
	   warm-white, 1.5px border-input, 15px radius, 15px font. */
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	color: var(--wp--preset--color--charcoal);
	background: var(--wp--preset--color--warm-white);
	border: 1.5px solid var(--db-border-input);
	border-radius: var(--db-radius);
	padding: 0.7rem 0.9rem;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.4;
}
/* Select: native pijl weg, eigen Lucide-chevron (consistent met .db-field). */
.db-account .woocommerce-MyAccount-content form select {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
	padding-right: 2.5rem;
}
.db-account .woocommerce-MyAccount-content form .input-text:focus,
.db-account .woocommerce-MyAccount-content form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--teal);
	box-shadow: 0 0 0 3px rgba(74, 124, 111, 0.12);
}
/* Wachtwoord-zichtbaarheid-toggle (oogje). WC wikkelt het veld in span.password-input
   en hangt er een button.show-password-input aan, die default als leeg grijs blokje
   ónder het veld rendert. Netjes: ín het veld rechts, Lucide eye/eye-off (file-mask). */
.db-account .password-input {
	position: relative;
	display: block;
}
.db-account .password-input .input-text {
	padding-right: 2.75rem;
}
.db-account .password-input .show-password-input {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.75rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	background: transparent !important;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.db-account .password-input .show-password-input::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--text-muted);
	-webkit-mask: url("../icons/eye.svg") center / 18px no-repeat;
	mask: url("../icons/eye.svg") center / 18px no-repeat;
	transition: background-color 150ms;
}
/* Getoond wachtwoord → WC voegt class .display-password toe → eye-off (klik = verbergen). */
.db-account .password-input .show-password-input.display-password::after {
	-webkit-mask-image: url("../icons/eye-off.svg");
	mask-image: url("../icons/eye-off.svg");
}
.db-account .password-input .show-password-input:hover::after {
	background-color: var(--wp--preset--color--forest);
}
.db-account .woocommerce-MyAccount-content form button[type="submit"],
.db-account .woocommerce-MyAccount-content form button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
	border: 1.5px solid var(--wp--preset--color--forest);
	border-radius: 999px;
	padding: 0.75rem 1.75rem;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
	margin-top: 0.5rem;
}
.db-account .woocommerce-MyAccount-content form button[type="submit"]:hover,
.db-account .woocommerce-MyAccount-content form button.button:hover {
	background: var(--wp--preset--color--forest-light);
	border-color: var(--wp--preset--color--forest-light);
}
.db-account .woocommerce-MyAccount-content fieldset {
	border: 0;
	border-top: 1px solid var(--db-border-subtle);
	margin: 1.5rem 0 0;
	padding: 1.5rem 0 0;
}
.db-account .woocommerce-MyAccount-content fieldset legend {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--forest);
	font-size: 1.125rem;
	margin-bottom: 0.75rem;
}

/* Accountgegevens- + adres-formulier in een card (wit, border, shadow).
   Adres-form: het <form> heeft GEEN class (woocommerce-address-fields zit op een
   div erbinnen) → via :has() targeten zodat ook die de card krijgt, net als
   accountdetails. */
.db-account .woocommerce-MyAccount-content form.edit-account,
.db-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
.db-account .woocommerce-MyAccount-content form.edit-address,
.db-account .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) {
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.75rem;
	/* Vult de volle contentkolom (wrapper) i.p.v. een smalle 640px-kaart. */
	max-width: 100%;
}

/* Adressen-overzicht (facturatie + verzending als cards) */
.db-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 0;
}
.db-account .woocommerce-Address {
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.5rem;
}
.db-account .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.db-account .woocommerce-Address-title h2,
.db-account .woocommerce-Address-title h3 { margin: 0; font-size: 1.125rem; }
.db-account .woocommerce-Address-title a { font-size: 0.8125rem; color: var(--wp--preset--color--teal); text-decoration: none; white-space: nowrap; }
.db-account .woocommerce-Address-title a:hover { color: var(--wp--preset--color--forest); text-decoration: underline; }
.db-account .woocommerce-Address address { font-style: normal; color: var(--wp--preset--color--charcoal-soft); line-height: 1.7; }

/* ----- Order-detail (bestelling bekijken) ----- */
.db-order-detail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}
.db-order-detail__num { display: block; font-weight: 600; font-size: 1.125rem; color: var(--wp--preset--color--charcoal); }
.db-order-detail__date { display: block; font-size: 0.8125rem; color: var(--wp--preset--color--text-muted); margin-top: 0.2rem; }

/* Sectie-titels (Bestelgegevens / Factuuradres / Verzendadres) */
.db-account .woocommerce-order-details__title,
.db-account .woocommerce-column__title,
.db-account .woocommerce-customer-details h2 {
	font-family: var(--wp--preset--font-family--heading);
	color: var(--wp--preset--color--forest);
	font-size: 1.25rem;
	margin: 0 0 1rem;
}

/* Bestelgegevens-tabel */
.db-account .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	overflow: hidden;
}
.db-account .woocommerce-table--order-details th,
.db-account .woocommerce-table--order-details td {
	text-align: left;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--db-border-subtle);
	vertical-align: top;
}
.db-account .woocommerce-table--order-details thead th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
	background: var(--wp--preset--color--cream);
}
.db-account .woocommerce-table--order-details td.product-total,
.db-account .woocommerce-table--order-details th.product-total,
.db-account .woocommerce-table--order-details tfoot td {
	text-align: right;
}
.db-account .woocommerce-table--order-details tfoot th {
	text-align: left;
	font-weight: 600;
	color: var(--wp--preset--color--charcoal);
}
.db-account .woocommerce-table--order-details tfoot tr:last-child th,
.db-account .woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--forest);
}
.db-account .woocommerce-table--order-details a { color: var(--wp--preset--color--forest); text-decoration: none; }
.db-account .woocommerce-table--order-details a:hover { text-decoration: underline; }
.db-account .woocommerce-table--order-details .product-quantity { color: var(--wp--preset--color--text-muted); }

/* "Opnieuw bestellen" met wat ruimte boven */
.db-account .order-again { margin-top: 1.5rem; }

/* Klantgegevens / adressen onder de bestelling */
.db-account .woocommerce-customer-details { margin-top: 2rem; }
.db-account .woocommerce-customer-details .woocommerce-columns--addresses,
.db-account .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin: 0;
}
.db-account .woocommerce-customer-details .woocommerce-column,
.db-account .woocommerce-customer-details .col-1,
.db-account .woocommerce-customer-details .col-2 {
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.5rem;
	float: none;
	width: auto;
}
/* Eén adres (geen kolommen): adres als losse card onder de titel. */
.db-account .woocommerce-customer-details > address {
	display: block;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.5rem;
	max-width: 420px;
}
.db-account .woocommerce-customer-details address {
	font-style: normal;
	color: var(--wp--preset--color--charcoal-soft);
	line-height: 1.7;
	border: 0;
	padding: 0;
}
.db-account .woocommerce-customer-details > address { border: 1px solid var(--db-border-subtle); padding: 1.5rem; }

@media (max-width: 620px) {
	.db-account .woocommerce-customer-details .woocommerce-columns--addresses,
	.db-account .woocommerce-customer-details .col2-set { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	/* Kolom-stack: kleinere gap dan de 2rem desktop-kolom-gap (anders te veel lucht
	   tussen de nav-tab-bar en de content). */
	.db-account-layout { flex-direction: column; gap: 1.25rem; }
	.db-account-nav { width: 100%; }
	/* Layout heeft align-items:flex-start (desktop-sidebar) → content rekt anders niet
	   mee in de kolom. Full-width forceren op mobiel. */
	.db-account .woocommerce-MyAccount-content { width: 100%; }
	/* Nav als horizontaal scrollbare tab-bar (geen wrap) — Valentijn. */
	.db-account-nav ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.4rem;
		padding: 0.5rem !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.db-account-nav ul::-webkit-scrollbar { display: none; }
	.db-account-nav li { flex: 0 0 auto; }
	.db-account-nav li a { white-space: nowrap; }
	/* Uitloggen-scheiding werkt horizontaal niet als border-top → border-left. */
	.db-account-nav li.woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0 !important;
		margin-left: 0.3rem !important;
		padding-top: 0 !important;
		padding-left: 0.6rem !important;
		border-top: 0;
		border-left: 1px solid var(--db-border-subtle);
	}
	.db-dash__grid { grid-template-columns: 1fr; }
	.db-dash-banner__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 620px) {
	.db-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}

/* ===== PLP-productkaart volledig klikbaar (stretched link) ===== */
/* De titel-link rekt over de hele kaart; "Bekijk" is een span (geen
   concurrerende link), dus de hele kaart wordt één klikvlak naar het product. */
.db-shop-card { position: relative; }
.db-shop-card .db-shop-card-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ===== BEDANKPAGINA (order-received — WC block-order-confirmation) ===== */
.woocommerce-order-received .wp-block-post-content { padding-block: 1rem 4rem; }

/* Confirmation-onderdelen gecentreerd in een nette kolom */
.woocommerce-order-received .wc-block-order-confirmation-status,
.woocommerce-order-received .wc-block-order-confirmation-summary,
.woocommerce-order-received .wc-block-order-confirmation-totals-wrapper,
.woocommerce-order-received .wc-block-order-confirmation-address-wrapper,
.woocommerce-order-received .wp-block-post-content > h2,
.woocommerce-order-received .wp-block-post-content > h3 {
	max-width: 860px;
	margin-inline: auto;
}

/* Succes-header met vinkje */
.woocommerce-order-received .wc-block-order-confirmation-status {
	text-align: center;
	max-width: 620px;
	margin-block: 2.5rem 2.5rem;
}
.woocommerce-order-received .wc-block-order-confirmation-status::before {
	content: "";
	display: block;
	width: 68px;
	height: 68px;
	margin: 0 auto 1.25rem;
	border-radius: 50%;
	background-color: rgba(127, 166, 142, 0.18);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%232D4A3E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.woocommerce-order-received .wc-block-order-confirmation-status h1,
.woocommerce-order-received .wc-block-order-confirmation-status .wp-block-heading {
	font-size: 2rem;
	line-height: 1.15;
	margin: 0 0 0.5rem;
}
.woocommerce-order-received .wc-block-order-confirmation-status p {
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0;
}

/* Samenvatting (#, datum, totaal, e-mail) als card-rij */
.woocommerce-order-received .wc-block-order-confirmation-summary {
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.35rem 1.6rem;
	margin-bottom: 2.25rem;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2.5rem;
	margin: 0;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item { margin: 0; }
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
	margin-bottom: 0.2rem;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value {
	color: var(--wp--preset--color--charcoal);
	font-weight: 500;
}

/* Sectie-titels (Bestelgegevens / Factuuradres) */
.woocommerce-order-received .wp-block-post-content > h2,
.woocommerce-order-received .wp-block-post-content > h3 {
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

/* Totalen-tabel als card */
.woocommerce-order-received .wc-block-order-confirmation-totals__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	overflow: hidden;
	margin-bottom: 2.25rem;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table td {
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid var(--db-border-subtle);
	text-align: left;
	vertical-align: top;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table thead th {
	background: var(--wp--preset--color--cream);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table td:last-child,
.woocommerce-order-received .wc-block-order-confirmation-totals__table th:last-child { text-align: right; }
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot td { font-weight: 600; }
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child th,
.woocommerce-order-received .wc-block-order-confirmation-totals__table tfoot tr:last-child td {
	border-bottom: 0;
	color: var(--wp--preset--color--forest);
	font-size: 1.0625rem;
}
.woocommerce-order-received .wc-block-order-confirmation-totals__table a { color: var(--wp--preset--color--forest); text-decoration: none; }
.woocommerce-order-received .wc-block-order-confirmation-totals__table a:hover { text-decoration: underline; }

/* Adres als card */
.woocommerce-order-received .wc-block-order-confirmation-address {
	display: block;
	background: #fff;
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius);
	box-shadow: var(--db-shadow-soft);
	padding: 1.5rem;
	color: var(--wp--preset--color--charcoal-soft);
	line-height: 1.7;
	font-style: normal;
}

/* ============================================================
   SECTIE — BLOG (sessie 9, 2026-06-30)
   Archief (index/archive) + detail (single). Sessie-7 page-header
   (breadcrumb + titel, GÉÉN cream-band) + featured-post + leestijd.
   Vervangt de oude .db-archive-head-band-aanpak (dood, opruim-kandidaat).
   ============================================================ */

/* ---- Gedeeld: intro onder de paginatitel ---- */
.db-blog-intro {
	max-width: 640px;
	font-size: 15px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal-soft);
}
.db-blog {
	max-width: 100% !important;
}

/* ---- Featured-post (groot 2-koloms, alleen blog-landing) ---- */
.db-blog-featured {
	background: #fff; /* echt wit → contrast met warm-white body (= Martijn) */
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-2xl);
	overflow: hidden;
	box-shadow: var(--db-shadow-soft);
	transition: box-shadow 300ms;
	margin-bottom: 3rem;
}
.db-blog-featured:hover {
	box-shadow: var(--db-shadow-md);
}
.db-blog-featured-media {
	overflow: hidden;
	background: var(--wp--preset--color--cream);
}
.db-blog-featured-img,
.db-blog-featured-img img {
	display: block;
	width: 100%;
}
.db-blog-featured-img img {
	object-fit: cover;
	transition: transform 700ms ease;
}
.db-blog-featured:hover .db-blog-featured-img img {
	transform: scale(1.03);
}
.db-blog-featured-body {
	padding: 2.5rem !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* content bovenaan, voet onderaan gepind (= productkaart) */
}
.db-blog-featured-eyebrow,
.db-blog-featured-eyebrow a {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
	margin: 0 0 0.85rem 0 !important;
}
.db-blog-featured-title,
.db-blog-featured-title a {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--forest) !important;
	text-decoration: none !important;
	margin: 0 0 0.85rem 0 !important;
	display: block;
}
.db-blog-featured-title a:hover {
	color: var(--wp--preset--color--forest-deep) !important;
}
.db-blog-featured-excerpt {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal-soft);
	margin: 0 0 1.1rem 0;
}
.db-blog-featured-foot { display:flex; justify-content:space-between; align-items:center;
	gap: 0.5rem !important;
	margin-top: auto; /* duwt de voet naar de onderkant van de kaart (= productkaart) */
	padding-top: 1.5rem;
}
.db-blog-featured-date {
	font-size: 12px !important;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}
.db-blog-featured-cta {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	margin: 0;
}
/* Desktop: beeld vult de volledige kaarthoogte (= body-hoogte), geen vaste ratio */
@media (min-width: 782px) {
	.db-blog-featured {
		align-items: stretch;
	}
	.db-blog-featured-media {
		display: flex;
	}
	.db-blog-featured-img {
		flex: 1;
		display: flex;
	}
	.db-blog-featured-img img {
		height: 100%;
		aspect-ratio: auto !important;
	}
}
@media (max-width: 781px) {
	.db-blog-featured-body {
		padding: 1.75rem !important;
	}
}

/* ---- Grid van kennis-cards (gedeeld index/archive) ---- */
.db-blog-grid {
	gap: 2rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.db-blog-grid > li,
.db-blog-grid > * {
	list-style: none;
}
.db-blog-grid .db-kennis-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 !important;
	background: #fff; /* echt wit → contrast met warm-white body (= Martijn) */
	border: 1px solid var(--db-border-subtle);
}
.db-blog-grid .db-kennis-img {
	border-radius: 0 !important;
}
.db-blog-grid .db-kennis-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.db-blog-grid .db-kennis-excerpt {
	flex: 1;
}
/* Kaart-voet: datum links + "Lees verder" rechts, op één lijn onderaan */
.db-kennis-foot {
	margin-top: 1.1rem;
	gap: 0.5rem !important;
}
.db-kennis-foot .db-kennis-date {
	font-size: 12px !important;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}
.db-kennis-foot .db-kennis-read {
	margin: 0;
}
@media (max-width: 1024px) {
	.db-blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; }
}
@media (max-width: 640px) {
	.db-blog-grid { grid-template-columns: 1fr !important; }
}

/* Gerelateerd-blok onderaan een artikel = horizontale swipe-carousel op mobiel
   (zelfde handschrift als PDP up-/cross-sell + reviews + bestsellers). Alléén het
   gerelateerd-grid, NIET het blog-archief (dat blijft een stapelend grid). Eerste
   kaart op de wrapper-rand, vaste peek ~48px; peek wordt op de rechter band-rand
   geclipt (.db-single-related loopt wrapper-rand tot wrapper-rand → geen bleed). */
@media (max-width: 768px) {
	.db-single-related .db-blog-grid {
		display: flex !important;
		grid-template-columns: none !important;
		gap: 1rem !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.db-single-related .db-blog-grid::-webkit-scrollbar {
		display: none;
	}
	/* Post-template rendert <ul><li> → het <li> is het flex-item (de .db-kennis-card
	   zit erin), dus hier op de directe child (li) i.p.v. de kaart zoals bij de
	   custom-block-carousels (bestsellers/PDP). */
	.db-single-related .db-blog-grid > * {
		flex: 0 0 calc(100% - 64px);
		max-width: 360px;
		scroll-snap-align: start;
	}
}

/* ---- Leestijd-block (inline, klok-icoon) ---- */
.db-reading-time {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.db-reading-time-icon {
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

/* ---- Single-head: links uitgelijnd (override oude centrering) ---- */
.db-single-head {
	text-align: left;
}
.db-single-head .db-single-eyebrow {
	display: block; /* block → blijft binnen de constrained 760px-kolom, links uitgelijnd met de titel (inline-block valt uit de centrering) */
	margin-top: var(--db-title-gap);
	margin-bottom: 0.75rem !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.db-single-head .db-single-eyebrow,
.db-single-head .db-single-eyebrow a {
	color: var(--wp--preset--color--teal) !important;
	text-decoration: none !important;
}
.db-single-head .db-page-title.db-single-title {
	margin-top: var(--db-title-gap) !important; /* breadcrumb → titel (eyebrow verwijderd, titel levert nu de top-ruimte) */
}
.db-single-head .db-single-meta {
	justify-content: flex-start;
	margin-top: 1.25rem !important;
}
.db-single-head .db-single-meta time,
.db-single-head .db-single-meta .wp-block-post-author-name,
.db-single-head .db-single-meta .db-reading-time {
	font-size: 13px;
	color: var(--wp--preset--color--text-muted) !important;
	margin: 0 !important;
}

/* ---- Auteur-bio = cream card (E-E-A-T) ---- */
.db-single-author {
	background: color-mix(in srgb, var(--wp--preset--color--cream) 60%, var(--wp--preset--color--warm-white));
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-2xl);
	border-top: 1px solid var(--db-border-subtle); /* override oude full-width border-top */
}
.db-single-author-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 1rem 0;
}
.db-single-author-avatar img {
	width: 72px;
	height: 72px;
}
.db-single-author-name {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: 19px !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 0 0 0.4rem 0 !important;
}
.db-single-author-bio {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.65;
	color: var(--wp--preset--color--charcoal-soft) !important;
	margin: 0 !important;
}

/* ---- Terug-naar-blog ---- */
.db-single-back {
	border-top: 1px solid var(--db-border-subtle);
}
.db-single-back-link {
	margin: 0;
}
.db-single-back-link a {
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}
.db-single-back-link a:hover {
	color: var(--wp--preset--color--forest);
}

/* ---- Gerelateerd-kop: eyebrow+titel links, "Alle artikelen →" rechtsboven (= Martijn) ---- */
.db-single-related-head {
	margin-bottom: 2.25rem;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}
.db-single-related-all {
	margin: 0;
	flex-shrink: 0;
}
.db-single-related-all a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}
.db-single-related-all a::after {
	content: "";
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url(../icons/arrow-right.svg) center / contain no-repeat;
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}
.db-single-related-all a:hover {
	color: var(--wp--preset--color--forest);
}
/* Op smalle schermen weglaten — het gerelateerd-blok zelf is genoeg (= Martijn) */
@media (max-width: 767px) {
	.db-single-related-all {
		display: none;
	}
}
.db-single-related-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 0.5rem 0;
}
.db-single-related-title {
	font-family: var(--wp--preset--font-family--heading) !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--forest) !important;
}

/* ===== Blog-kaarten volledig klikbaar (stretched link, = PLP-productkaart) =====
   De titel-link rekt via ::after over de hele kaart. "Lees verder"/"Lees het
   artikel" zijn spans (geen concurrerende link); beeld-link + categorie-eyebrow
   worden gedekt → de hele kaart is één klikvlak naar het artikel. */
.db-blog-featured,
.db-blog-grid .db-kennis-card,
.db-single-related .db-kennis-card {
	position: relative;
}
.db-blog-featured .db-blog-featured-title a::after,
.db-blog-grid .db-kennis-title a::after,
.db-single-related .db-kennis-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ===== Single-detail: artikelkolom links op de wrapper-rand =====
   Breadcrumb + titel + meta + afbeelding staan op de wrapper-rand (x=106), 820px
   breed. Daaronder een rij [deel-rail | tekst] die SAMEN even breed is als de
   afbeelding (820): de rail zit op de wrapper-rand (onder de afbeelding-linkerrand),
   de tekst vult de rest → rechterrand tekst lijnt uit met de afbeelding. Zie
   .db-single-bodycol hieronder. */
/* Leesbreedte van het blog-detail (afbeelding + de [rail | tekst]-rij eronder).
   Eén knop voor de hele artikelkolom. */
body.single {
	--db-article-col: 1300px; /* volledige wrapper-breedte (geen sidebar nog) — = header/footer/gerelateerd */
}
.db-single-inner > .db-single-eyebrow,
.db-single-inner > .db-single-title,
.db-single-inner > .db-single-meta,
.db-single-inner > .db-single-image {
	max-width: var(--db-article-col, 820px);
}

/* ===== Inhoudsopgave (TOC) — box bovenaan de tekstkolom, onder de afbeelding ===== */
.db-toc {
	margin: 0 0 2.5rem 0;
	padding: 1.35rem 1.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--cream) 55%, var(--wp--preset--color--warm-white));
	border: 1px solid var(--db-border-subtle);
	border-radius: var(--db-radius-2xl);
}
.db-toc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
	margin: 0 0 0.9rem 0;
}
.db-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.db-toc-item {
	margin: 0;
}
.db-toc-item a {
	display: inline-block;
	padding: 0.28rem 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--wp--preset--color--charcoal-soft);
	text-decoration: none;
	transition: color 150ms;
}
.db-toc-item a:hover {
	color: var(--wp--preset--color--forest);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.db-toc-level-3 a {
	padding-left: 1.1rem;
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
/* Anker-sprong niet onder de sticky header laten vallen */
.db-page-prose h2,
.db-page-prose h3 {
	scroll-margin-top: 100px;
}

/* Auteur-box: "Meer artikelen van …"-link (= Martijn) */
.db-single-author-more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--wp--preset--color--teal);
	text-decoration: none;
	transition: color 150ms;
}
.db-single-author-more:hover { color: var(--wp--preset--color--forest); }
.db-single-author-more-icon { flex-shrink: 0; }

/* ===== DEEL-KNOPPEN (share) — sticky rail LINKS (desktop) + rij boven auteur (mobiel) ===== */
/* bodycol = flex-rij [rail | tekst], links op de wrapper-rand. De rail staat links
   (order:-1), de tekst-kolom (820) volgt na de gap → prose lijnt uit met de
   ingesprongen afbeelding/titel. */
.db-single-bodycol {
	max-width: var(--db-article-col, 820px); /* [rail | tekst] samen = afbeeldingsbreedte */
	display: flex;
	align-items: flex-start;
	gap: 2.5rem; /* 40px tussen deel-rail en tekst */
}
.db-single-main {
	flex: 1 1 auto;
	min-width: 0; /* vult de rest van de 820-kolom (820 − rail − gap) → rechterrand = afbeelding */
}

/* Desktop sticky rail — LINKS op de wrapper-rand, naast de tekst */
.db-single-share-rail {
	order: -1; /* visueel links; content blijft eerst in de DOM voor screenreaders */
	flex: 0 0 auto;
	position: sticky;
	top: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	padding-top: 0;
	margin-top: 0.25rem; /* "Deel"-label uitlijnen met de eerste tekstregel (offset gemeten) */
}
.db-share-rail-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 0.25rem 0;
}

/* Knoppen-container: rail = verticaal, mobiele rij = horizontaal */
.db-share-buttons {
	display: flex;
	gap: 0.6rem;
}
.db-single-share-rail .db-share-buttons {
	flex-direction: column;
}

/* Knop = ronde outline (Dutch Balance / Martijn-stijl) */
.db-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--db-border-subtle);
	background: #fff;
	color: var(--wp--preset--color--forest); /* groen icoon (huisstijl) */
	cursor: pointer;
	transition: color 150ms, border-color 150ms, background 150ms, transform 150ms;
	padding: 0;
}
.db-share-btn:hover {
	color: #fff; /* wit icoon op groene achtergrond */
	border-color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--forest);
	transform: translateY(-1px);
}
.db-share-btn svg { display: block; }

/* Kopieer-knop: vinkje verbergen tot gekopieerd */
.db-share-copy .db-share-copy-check { display: none; }
.db-share-copy.is-copied {
	color: #fff;
	border-color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--forest);
}
.db-share-copy.is-copied .db-share-copy-link { display: none; }
.db-share-copy.is-copied .db-share-copy-check { display: block; }

/* Mobiele deel-rij (boven auteur) — standaard verborgen (desktop gebruikt de rail) */
.db-single-share-row { display: none !important; }
.db-share-row-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--wp--preset--color--forest);
	margin: 0;
}

/* Onder 960px: rail eruit, content vol-breedte, mobiele deel-rij erin (boven auteur) */
@media (max-width: 960px) {
	.db-single-bodycol { display: block; max-width: 100%; }
	.db-single-main { max-width: 100%; }
	.db-single-share-rail { display: none; }
	.db-single-share-row {
		display: flex !important;
		align-items: center;
		gap: 1rem;
		flex-wrap: wrap;
		margin-top: 3rem;
		padding-top: 2rem;
		border-top: 1px solid var(--db-border-subtle);
	}
}

/* ===== Post-meta (auteur+avatar · datum+icoon · leestijd+klok) ===== */
.db-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
.db-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.db-meta-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: block;
}
.db-meta-icon {
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}
.db-meta-sep { opacity: 0.5; }
.db-single-meta time { color: inherit; }

/* Minder ruimte boven de afbeelding: head-onderruimte weg → gap = image padding-top (1.25rem, = titel-meta-gap) */
.db-single-head { padding-bottom: 0 !important; }


/* ===== FIX 2026-07-01: active-filter pills + wis-knop (live) ===== */
/* Pill: teal 8% gevuld, geen border, nette padding. !important want WC's eigen
   .__items .__item-regel (border + padding:0) is even specifiek en wint anders. */
.db-shop-filters-inner .wc-block-product-filter-removable-chips__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.375rem !important;
	margin: 0 !important;
	padding: 0.25rem 0.45rem 0.25rem 0.7rem !important;
	background: rgba(74, 124, 111, 0.08) !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-size: 12px !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--forest) !important;
}
/* "Wis filters" bevat nu een genest core/button (nodig voor de handler) -> kaal teal-linkje */
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-buttons,
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-button {
	margin: 0 !important;
	padding: 0 !important;
}
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link {
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--teal) !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}
.db-shop-filters-inner .wp-block-woocommerce-product-filter-clear-button .wp-block-button__link:hover {
	color: var(--wp--preset--color--forest) !important;
	background: transparent !important;
	text-decoration: underline !important;
}

/* ===== FIX mobiel klikbaar (<=600px) — pointer-events =====
   WC zet .__overlay op pointer-events:none buiten de @media(min-width:601px)-override.
   Onze flatten miste dit -> op telefoons zag je de filters wel maar kon je niks
   aanklikken. Overlay-keten forceren op pointer-events:auto (alle breedtes). */
.db-shop-filters-inner .wc-block-product-filters__overlay,
.db-shop-filters-inner .wc-block-product-filters__overlay-wrapper,
.db-shop-filters-inner .wc-block-product-filters__overlay-dialog,
.db-shop-filters-inner .wc-block-product-filters__overlay-content {
	pointer-events: auto !important;
}

/* ===== FIX 2026-07-01: PDP-eyebrow styling (verhuisd van inline post-terms) ===== */
.db-pdp-eyebrow,
.db-pdp-eyebrow a {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.16em !important;
	margin: 0 0 0.35rem !important;
}

/* ===== FIX 2026-07-01: PDP buybox-ritme =====
   Titel-cluster (eyebrow/titel/rating) plakte met 0px tegen de beschrijving.
   24px adem eronder = zelfde ritme als boven/onder de keyspecs (USP-lijst). */
.db-pdp-titlegroup {
	margin-bottom: 24px !important;
}

/* ===== FIX up/cross-sell kaart: sale-badge altijd linksboven =====
   pdp-related + shop-bestsellers renderen .db-shop-card met de hand (buiten
   product-collection), dus WC's absolute-plaatsing van de badge geldt daar niet
   -> badge viel in normale flow naar onderen. Pin 'm hier zelf, geldt overal. */
.db-shop-card .db-shop-card-img,
.db-shop-card .wc-block-components-product-image {
	position: relative;
}
.db-shop-card .wc-block-components-product-sale-badge {
	position: absolute !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	bottom: auto !important;
}

/* ===== FIX PDP titelgroep-ritme — rating niet tegen de titel plakken =====
   De rating had margin-top:-4px (gap titel->rating ~3px, veel krapper dan
   eyebrow->titel ~6px). Negatieve marge weg zodat de 3 items gelijk ademen. */
.db-pdp-titlegroup .db-rating {
	margin-top: 2px !important;
}
/* ===== FIX review-form breedte = linker review-kaart (desktop) ===== */
@media (min-width: 768px) {
	.db-pdp-review-form-toggle .db-pdp-review-form-wrap { width: calc(50% - 0.75rem); }
}

/* review-form-wrap box-sizing: padding meetellen zodat calc-breedte == review-kaart */
.db-pdp-review-form-toggle .db-pdp-review-form-wrap { box-sizing: border-box; }


/* ===== Home: uitgelichte categorie-kaarten ===== */
.db-cat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.db-cat-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--db-border-subtle); border-radius:var(--db-radius); overflow:hidden; text-decoration:none; transition:box-shadow 250ms ease, transform 250ms ease; }
.db-cat-card:hover { box-shadow:var(--db-shadow-md,0 4px 16px rgba(0,0,0,0.06)); transform:translateY(-2px); }
.db-cat-card-img { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3; overflow:hidden; background:#fff; padding:1.5rem; box-sizing:border-box; }
.db-cat-card-img img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; transition:transform 400ms ease; }
.db-cat-card:hover .db-cat-card-img img { transform:scale(1.05); }
.db-cat-card-body { border-top:1px solid var(--db-border-subtle); padding:1rem 1.1rem; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:0.75rem; }
.db-cat-card-name { font-family:var(--wp--preset--font-family--heading); font-size:17px; font-weight:500; color:var(--wp--preset--color--forest); line-height:1.3; }
.db-cat-card-count { font-size:12px; color:var(--wp--preset--color--text-muted); }
@media (max-width:1023px){ .db-cat-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .db-cat-cards{ gap:1rem; } }

/* ===== Home: reviews rating-regel + mobiele horizontale scroll (zoals product-reviews) ===== */
.db-reviews-rating-line { font-size:13px; color:var(--wp--preset--color--text-muted); margin:0.5rem 0 0 0; }
.db-reviews-grid.db-reviews-grid--scroll { grid-template-columns:repeat(4,1fr); }
@media (max-width:1023px){ .db-reviews-grid.db-reviews-grid--scroll { grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
	.db-reviews-grid.db-reviews-grid--scroll {
		display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
		scrollbar-width:none; -webkit-overflow-scrolling:touch; gap:1rem;
	}
	.db-reviews-grid.db-reviews-grid--scroll::-webkit-scrollbar { display:none; }
	.db-reviews-grid.db-reviews-grid--scroll > .db-review-card {
		flex:0 0 calc(100% - 48px); max-width:340px; scroll-snap-align:start; box-sizing:border-box;
	}
}
/* ===== Home: product-rijen (bestsellers + nieuw) 4-koloms, uitgelijnd met header ===== */
.db-bestsellers-section .db-shop-grid, .db-nieuw .db-shop-grid { grid-template-columns: repeat(4,1fr) !important; }
@media (max-width:1023px){ .db-bestsellers-section .db-shop-grid, .db-nieuw .db-shop-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:640px){ .db-bestsellers-section .db-shop-grid, .db-nieuw .db-shop-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* Home: product-rijen centreren (.db-shop-grid margin:0!important brak de constrained-centrering) */
.db-bestsellers-section .db-shop-grid, .db-nieuw .db-shop-grid { max-width:1300px !important; margin-left:auto !important; margin-right:auto !important; }

/* Home: block-gap tussen secties weg (WP zet margin-block-start tussen main-children -> body-bg-strookje). Secties sturen spacing zelf via padding. */
.db-home > * { margin-block-start: 0; }

/* Hero: gele shop-sterren (rating-USP) */
.db-hero-stars { color:#F5B301; font-size:14px; letter-spacing:1px; line-height:1; }

/* Hero floatcard klikbaar */
a.db-hero-floatcard { text-decoration:none; color:inherit; cursor:pointer; transition:transform 200ms ease, box-shadow 200ms ease; }
a.db-hero-floatcard:hover { transform:translateY(-2px); box-shadow:var(--db-shadow-lg,0 12px 48px rgba(0,0,0,0.10)); }

/* Hero visual-blok klikbaar (afbeelding + floatcard = 1 link) */
a.db-hero-image-wrap { display:block; text-decoration:none; color:inherit; cursor:pointer; }
a.db-hero-image-wrap:hover .db-hero-floatcard { transform:translateY(-2px); box-shadow:var(--db-shadow-lg,0 12px 48px rgba(0,0,0,0.10)); }
a.db-hero-image-wrap .db-hero-floatcard { transition:transform 200ms ease, box-shadow 200ms ease; }

/* Home blog-kaarten wit (waren warm-white = zelfde als sectie -> vielen weg; nu consistent met product/categorie-kaarten) */
.db-kennis .db-kennis-card { background:#fff; }


/* ===== Home blog-sectie: mobiel horizontaal scrollend (consistent met reviews/gerelateerde) ===== */
@media (max-width: 767px) {
	.db-kennis .db-kennis-grid {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		gap: 1rem;
	}
	.db-kennis .db-kennis-grid::-webkit-scrollbar { display: none; }
	.db-kennis .db-kennis-grid > li {
		flex: 0 0 calc(100% - 48px);
		max-width: 340px;
		margin: 0;
		scroll-snap-align: start;
	}
}
/* Founder-bg volledige breedte (constrained-layout capt directe children op 1300 -> bg was smal) */
.db-founder-bg { max-width:none !important; margin-left:0 !important; margin-right:0 !important; }

/* Zoek-dropdown onthullen (icoon toont FiboSearch-vorm) */
.db-search.is-open .db-search-host {
	position:absolute; top:calc(100% + 10px); right:0; left:auto;
	width:min(360px,78vw); height:auto; overflow:visible;
	clip:auto; clip-path:none; white-space:normal; pointer-events:auto; visibility:visible; z-index:300;
}
.db-search.is-open .db-search-host .dgwt-wcas-search-wrapp { width:100% !important; max-width:none !important; }

/* Zoek-dropdown mobiel full-width (onder de header, 1rem-marges) */
@media (max-width:1023px){
	.db-search { position:static; }
	.db-search.is-open .db-search-host { position:absolute; top:100%; left:1rem; right:1rem; width:auto; max-width:none; }
}

/* Soepel scrollen voor in-page anker-CTAs (hero -> #bestsellers). Respecteert reduced-motion. */
@media (prefers-reduced-motion: no-preference){
	html{ scroll-behavior:smooth; }
}


/* ===== SECTIE-KOPPEN: compacter + mobiele link onder het element (2026-07-01) =====
   Geldt voor de 5 secties met .db-section-header-flex (eyebrow+titel links,
   "meer"-link rechtsboven): bestsellers / nieuw / doelen / kennis / reviews. */

/* 1) Minder ruimte aan de onderzijde (dichter op de content). Overschrijft de
      inline block-padding (5rem) -> !important nodig. */
.db-bestsellers-section,
.db-nieuw,
.db-doelen,
.db-kennis,
.db-reviews { padding-bottom: 5rem !important; }

/* 2) Mobiel (<=640): de "meer"-link ONDER het element i.p.v. rechtsboven.
      De kop wordt display:contents zodat de link een flex-child van de sectie
      wordt en met order naar onderen kan: eyebrow -> titel -> element -> link. */
@media (max-width: 640px){
	.db-bestsellers-section,
	.db-nieuw,
	.db-doelen,
	.db-kennis,
	.db-reviews { display: flex; flex-direction: column; }

	.db-bestsellers-section > .db-section-header-flex,
	.db-nieuw > .db-section-header-flex,
	.db-doelen > .db-section-header-flex,
	.db-kennis > .db-section-header-flex,
	.db-reviews > .db-section-header-flex { display: contents; }

	.db-section-header-flex > div:first-child { margin-bottom: 1.25rem; }
	.db-section-header-flex > .db-link-ghost { order: 99; margin-top: 1.5rem; align-self: flex-start; }
}

/* Home kenniscentrum: kaarten gelijke hoogte (zoals blog-archief). De <li>-cellen
   stretchen al; de .db-kennis-card (display:block) vulde ze niet -> flex-column + height:100%. */
.db-kennis .db-kennis-grid > li { display: flex; }
.db-kennis .db-kennis-card { display: flex; flex-direction: column; height: 100%; }
.db-kennis .db-kennis-body { display: flex; flex-direction: column; flex: 1; }
.db-kennis .db-kennis-excerpt { flex: 1; }

/* Uitverkocht (PDP): bulk-pricing verbergen — product is niet bestelbaar, dus
   "Bestel meer, betaal minder" is verwarrend. Backorder blijft WEL tonen (is bestelbaar). */
body.outofstock .db-volume-pricing-heading,
body.outofstock .db-volume-pricing { display: none; }

/* Productkaart-voorraad: uitverkocht (sale-rood) + nabestelling (oranje). Op voorraad = sage (base). */
.db-card-stock--out .db-card-stock-dot::after { background: var(--db-sale); }
.db-card-stock--out .db-card-stock-label { color: var(--db-sale); }
.db-card-stock--backorder .db-card-stock-dot::after { background: var(--wp--preset--color--goal-energie); }
.db-card-stock--backorder .db-card-stock-label { color: var(--wp--preset--color--goal-energie); }

/* Home categorie-cards: horizontaal scrollend op mobiel (<=767), consistent met
   producten/blogs/reviews. Eerste kaart op de rand, ~64px peek van de volgende. */
@media (max-width: 767px){
	.db-cat-cards {
		display: flex !important;
		grid-template-columns: none !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		gap: 1rem;
	}
	.db-cat-cards::-webkit-scrollbar { display: none; }
	.db-cat-cards > .db-cat-card {
		flex: 0 0 calc(100% - 64px);
		max-width: 340px;
		scroll-snap-align: start;
	}
}

/* Categorie-card pijl-knop (USP-icoon-stijl: 44px cirkel, sage-tint, forest Lucide-pijl). */
.db-cat-card-arrow {
	width: 38px;
	height: 38px;
	background: #eaf0e9;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--forest);
	flex-shrink: 0;
	transition: background 200ms ease, color 200ms ease;
}
.db-cat-card:hover .db-cat-card-arrow {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--cream);
}

/* arrow-right.svg heeft stroke=#000 hardcoded -> gericht overschrijven zodat de pijl de kleur volgt. */
.db-cat-card-arrow svg { stroke: var(--wp--preset--color--forest); transition: stroke 200ms ease; }
.db-cat-card:hover .db-cat-card-arrow svg { stroke: #fff; }

/* Nieuwsbrief gecentreerd: ruimte tussen intro en het (Klaviyo-)formulier. */
.db-newsletter-copy { margin-bottom: 2rem; }

/* categorie-tegels: vierkant lifestyle-beeld (2026-07-02) */
.db-cat-card-img{aspect-ratio:1/1;padding:0;background:transparent;}
.db-cat-card-img img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;}

/* ===== Review-sterren op productkaarten (PLP/merk/bestsellers/up-cross-sell) =====
   Compacte db-rating-variant: geen eigen onder-marge (card-body flex-gap stuurt),
   klein beetje ruimte tussen gemiddelde en (aantal). Sterren-kleur/omvang erven
   van .db-rating / .db-rating-sm (identiek aan de PDP). */
.db-card-rating { margin: -0.4rem 0 0 0; }
.db-card-rating .db-rating-text { gap: 0.28rem; }

/* Review-sterren op productkaarten subtieler (Valentijn 2026-07-02):
   iets kleinere sterren, faint lege sterren, rustig gedempt cijfer/aantal.
   Scoped op .db-card-rating -> PDP (.db-rating) blijft ongewijzigd. */
.db-card-rating .db-rating-star svg { width: 13px; height: 13px; }
.db-card-rating .db-rating-stars { gap: 1px; }
.db-card-rating .db-rating-star-bg { opacity: 0.28; }
.db-card-rating .db-rating-text { font-size: 11px; gap: 0.3rem; }
.db-card-rating .db-rating-avg { font-weight: 400; color: var(--wp--preset--color--charcoal-soft); }
.db-card-rating .db-rating-count { color: var(--wp--preset--color--text-muted); }

/* ===== Rating-filter sterren FIX (Valentijn 2026-07-02) =====
   Nieuwe woocommerce/product-filter-rating: .__stars-span heeft inline width:X%
   (fill-ratio) + overflow:hidden rond een vaste 5-sterren-svg. WC's %-breedte
   rekende tegen de brede rij -> clip pakte nooit -> elke regel toonde 5 volle
   sterren (4 en 5 niet te onderscheiden). Fix: rij = grid met vaste sterren-
   kolom (80px = 5x16), zodat width:X% tegen die 80px rekent en overflow correct
   clipt (80% -> 4 sterren). Faint outline-backdrop toont de 'lege' 5e ster
   (zelfde look als PDP/kaart). Vervangt de oude niet-matchende
   .wc-block-components-product-rating__stars-regels hierboven. */
.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__text-wrapper {
	display: grid;
	grid-template-columns: 80px auto;
	align-items: center;
	column-gap: 0.5rem;
	width: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='none' stroke='%23C47D3A' stroke-opacity='0.32' stroke-width='1.75' stroke-linejoin='round'%3E%3Cdefs%3E%3Cpolygon id='s' points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/defs%3E%3Cuse href='%23s' x='0'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 80px 16px;
}
.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__stars {
	overflow: hidden;
	height: 16px;
	line-height: 0;
}
.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__stars svg {
	width: 80px !important;
	height: 16px !important;
	max-width: none !important;
	display: block;
}
.wp-block-woocommerce-product-filter-rating .wc-block-product-filter-checkbox-list__count {
	font-size: 11px;
	color: var(--wp--preset--color--text-muted);
}

/* ===== Nieuwsbrief-opt-in: kort label + (i)-tooltip (registratie) — Valentijn 2026-07-02 =====
   Label + info-icoon op één regel; tooltip opent boven het icoon (tap-baar via JS in
   de mu-plugin db-klaviyo-register-optin). Op smal scherm rechts uitgelijnd tegen
   viewport-overflow. */
.db-newsletter-optin { display: flex; align-items: center; flex-wrap: wrap; margin-top: 0.9rem; }
.db-newsletter-optin .db-optin-help { position: relative; display: inline-flex; }
.db-optin-info { position: relative; top: -5px;
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-left: 0.35rem; padding: 0;
	border: 0; background: none; cursor: pointer; line-height: 0;
	color: var(--wp--preset--color--text-muted); transition: color 150ms;
}
.db-optin-info:hover,
.db-optin-info[aria-expanded="true"] { color: var(--wp--preset--color--forest); }
.db-optin-info svg { width: 18px; height: 18px; display: block; }
.db-optin-tip {
	position: absolute; z-index: 30;
	bottom: calc(100% + 12px); left: -14px;
	width: max-content; max-width: min(320px, 78vw);
	background: #fff; color: var(--wp--preset--color--charcoal);
	border: 1px solid var(--db-border-subtle, rgba(0,0,0,0.08));
	border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,0.10);
	padding: 0.95rem 1.05rem;
	font-size: 14px; line-height: 1.55; font-weight: 300; text-align: left;
}
.db-optin-tip[hidden] { display: none; }
.db-optin-tip::after {
	content: ""; position: absolute; top: 100%; left: 20px;
	border: 7px solid transparent; border-top-color: #fff;
}
.db-optin-tip::before {
	content: ""; position: absolute; top: calc(100% + 1px); left: 19px;
	border: 8px solid transparent; border-top-color: var(--db-border-subtle, rgba(0,0,0,0.08));
	z-index: -1;
}
@media (max-width: 600px) {
	.db-newsletter-optin { position: relative; } .db-newsletter-optin .db-optin-help { position: static; } .db-optin-tip { left: 0; right: 0; width: auto; max-width: 100%; }
	.db-optin-tip::after, .db-optin-tip::before { display: none; }
	
}

/* Nieuwsbrief-tooltip in de checkout-context: op mobiel binnen de kaart houden
   (anker aan de checkbox-wrapper i.p.v. het icoon). */
@media (max-width: 600px) {
	.wc-block-components-checkbox:has(.db-optin-help) { position: relative; }
	.wc-block-components-checkbox .db-optin-help { position: static; }
}

/* .db-optin-help algemeen positioneren (geldt ook in de checkout-context, niet
   alleen bij .db-newsletter-optin) — zodat de tooltip aan het (i)-icoon ankert.
   Mobiel wordt dit per context weer op static gezet (zie media queries hierboven). */
.db-optin-help { position: relative; display: inline-flex; }

/* ===== Afleidingsvrije checkout: mini-header + mini-footer (Martijn/Vercel-stijl) ===== */
.db-checkout-header { background: #fff; border-bottom: 1px solid var(--db-border-subtle, rgba(0,0,0,0.08)); }
.db-checkout-header-inner { max-width: 1160px; margin: 0 auto; padding: 1rem 1.5rem; }
.db-checkout-secure { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 12px; font-weight: 500; color: var(--wp--preset--color--text-muted); }
.db-checkout-secure svg { color: var(--wp--preset--color--teal); flex-shrink: 0; }
.db-checkout-footer { background: #fff; border-top: 1px solid var(--db-border-subtle, rgba(0,0,0,0.08)); margin-top: 3rem; }
.db-checkout-footer-inner { max-width: 1160px; margin: 0 auto; padding: 1.5rem; gap: 0.75rem; }
.db-checkout-copy { margin: 0; font-size: 12px; color: var(--wp--preset--color--text-muted); }
.db-checkout-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.db-checkout-footer-links a { font-size: 12px; color: var(--wp--preset--color--text-muted); text-decoration: none; }
.db-checkout-footer-links a:hover { color: var(--wp--preset--color--forest); }
@media (max-width: 600px) { .db-checkout-secure-full, .db-checkout-secure-sep { display: none; } }

/* ===== Merk-checkbox: forest + witte Lucide-check — ÉÉN herbruikbare stijl =====
   Geldt voor ALLE checkboxes op de front: registratie-opt-in (native input),
   checkout-opt-in + overige WC-block-checkboxes. De filter-checkboxes hebben een
   eigen (identieke) regel met extra hover-preview; die blijft. WC's eigen mark-SVG
   verbergen; de vink tekenen we zelf als background-image (altijd gecentreerd). */
.wc-block-components-checkbox__mark { display: none !important; }
.db-newsletter-optin input[type="checkbox"],
.wc-block-components-checkbox__input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	border: 1.5px solid var(--db-border-input);
	border-radius: 4px;
	background-color: #fff !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: 11px 11px !important;
	background-image: none !important;
	cursor: pointer;
	flex-shrink: 0;
	transition: background-color 150ms, border-color 150ms;
}
.db-newsletter-optin input[type="checkbox"]:checked,
.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--forest) !important;
	border-color: var(--wp--preset--color--forest) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}

/* Checkout-(i) 1px extra omhoog: de WC-checkbox maakt de regel 2px hoger dan op de
   registratie, waardoor het icoon 1px lager uitkwam. Zo staat 'ie 1:1 met de registratie. */
.wc-block-components-checkbox .db-optin-info { top: -1px; }

/* Checkout: WC-label heeft gap:12px die ook vóór de (i) valt -> icoon stond 12px te ver
   van de tekst. Opheffen zodat de afstand gelijk is aan de registratie (~5,6px). */
.wc-block-components-checkbox .db-optin-help { margin-left: -12px; }