/*
 * De Haagsche Cacaofabriek — hoofdstylesheet
 *
 * Bron van waarheid voor de vormgeving. Het prototype in docs/prototype/
 * laadt ditzelfde bestand, zodat wat daar gerenderd wordt gelijk is aan
 * wat het thema toont. Tokens en contrastregels: zie DESIGN.md.
 *
 * Uitgangspunt: de site is een rustige crème toonbank. De kleur komt uit de
 * wikkels van de repen; de vaste kleuren van de site zijn die van het logo —
 * blauw, crème en oker. Wijnrood is de kleur van de actie.
 */

/* ── Lettertypen ─────────────────────────────────────────── */

@font-face {
	font-family: "GingerBread";
	src: url("../fonts/gingerbread.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* DTL Nobel T: de huisletter. Twee gewichten bestaan, Licht en Regular.
   Alles wat 500 of 600 vraagt (knoppen, labels, strong) valt op Regular, zonder
   nep-vet. Bewust: het merkboek gebruikte Nobel ook alleen zo. */
@font-face {
	font-family: "DTL Nobel T";
	src: url("../fonts/nobel-t-light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "DTL Nobel T";
	src: url("../fonts/nobel-t.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────── */

:root {
	/* canvas — de referentie voor alle APCA-waarden */
	--dhc-creme: #FAF3E2;

	/* rampen: C = k·L in OKLCH, L opgelost voor een doel-APCA tegen crème */
	--dhc-roze-100: #FFDADC;  --dhc-oker-100: #FFDCBB;  --dhc-blauw-100: #BAEAFF;
	--dhc-roze-200: #FFCBCD;  --dhc-oker-200: #FFCF9F;  --dhc-blauw-200: #9AE1FF;
	--dhc-roze-300: #FFB1B5;  --dhc-oker-300: #FFB66A;  --dhc-blauw-300: #5BD3FF;
	--dhc-roze-400: #FF8E97;  --dhc-oker-400: #F89900;  --dhc-blauw-400: #00BFEF;
	--dhc-roze-500: #E76977;  --dhc-oker-500: #D27E00;  --dhc-blauw-500: #009FC9;
	--dhc-roze-600: #BA545E;  --dhc-oker-600: #A96400;  --dhc-blauw-600: #007FA3;
	--dhc-roze-700: #903F48;  --dhc-oker-700: #824C00;  --dhc-blauw-700: #00627F;
	--dhc-roze-800: #5C262C;  --dhc-oker-800: #532F00;  --dhc-blauw-800: #003D52;

	/* vaste merkkleuren, buiten de rampen */
	--dhc-merk: #D2475D;
	--dhc-wijn: #871F4E;

	/* rollen */
	--dhc-inkt: var(--dhc-blauw-800);      /* koppen, navigatie, iconen */
	--dhc-tekst: var(--dhc-roze-800);      /* lopende tekst, APCA 90 op crème */
	--dhc-actie: var(--dhc-wijn);          /* primaire knoppen */
	--dhc-accent: var(--dhc-oker-400);     /* ornamenten, alleen klein */
	--dhc-lijn: color-mix(in oklab, var(--dhc-blauw-800) 14%, transparent);

	--dhc-display: "GingerBread", Georgia, serif;
	--dhc-body: "DTL Nobel T", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* perfect fourth, 16px = 1em */
	--dhc-fs-base: 1rem;
	--dhc-fs-md: 1.333rem;
	--dhc-fs-lg: 1.777rem;
	--dhc-fs-xl: 2.369rem;
	--dhc-fs-2xl: 3.157rem;
	--dhc-fs-3xl: 4.209rem;

	--dhc-wrap: 1240px;
	--dhc-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--dhc-sectie: clamp(3.5rem, 8vw, 7rem);
	--dhc-radius: 4px;
	--dhc-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ── Basis ───────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--dhc-creme);
	color: var(--dhc-tekst);
	font-family: var(--dhc-body);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--dhc-display);
	font-weight: 400;
	line-height: 1;
	margin: 0;
	color: var(--dhc-inkt);
}
/* De browser geeft h3 standaard 18,7px; GingerBread mag niet onder de 20px
   (DESIGN.md). Dat raakt ook koppen uit WooCommerce en oude Elementor-inhoud. */
h3 { font-size: var(--dhc-fs-md); }
/* h4 en kleiner zijn te klein voor GingerBread: die krijgen Nobel T. */
h4, h5, h6 { font-family: var(--dhc-body); font-weight: 600; line-height: 1.3; margin: 0; color: var(--dhc-inkt); }

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
strong, b { font-weight: 600; }

/* browseroppervlakken horen bij het ontwerp */
::selection { background: var(--dhc-blauw-100); color: var(--dhc-blauw-800); }
:root { caret-color: var(--dhc-wijn); accent-color: var(--dhc-wijn); scrollbar-color: var(--dhc-roze-300) var(--dhc-creme); }
:focus-visible { outline: 2.5px solid var(--dhc-blauw-800); outline-offset: 3px; border-radius: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dhc-skip:focus {
	position: fixed !important; top: .75rem; left: .75rem; z-index: 100; width: auto; height: auto; clip: auto;
	background: var(--dhc-creme); color: var(--dhc-inkt); padding: .7rem 1rem; border-radius: var(--dhc-radius);
	box-shadow: 0 6px 18px -8px rgba(0, 61, 82, .5);
}

.dhc-wrap { max-width: var(--dhc-wrap); margin-inline: auto; padding-inline: var(--dhc-gutter); }
.dhc-sectie { padding-block: var(--dhc-sectie); }
.dhc-sectie h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
.dhc-sectie__kop { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
/* gekleurde vlakken met een golvende rand; de golf heeft de kleur van het aangrenzende vlak */
.dhc-vlak { position: relative; padding-block: calc(var(--dhc-sectie) + clamp(1rem, 2vw, 2rem)); }
.dhc-vlak--roze { background: var(--dhc-roze-100); }
.dhc-golf { position: absolute; left: 0; width: 100%; height: clamp(28px, 4vw, 56px); display: block; fill: var(--dhc-creme); pointer-events: none; }
.dhc-golf--boven { top: -1px; }
.dhc-golf--onder { bottom: -1px; rotate: 180deg; }
.dhc-golf--blauw { fill: var(--dhc-blauw-800); }
/* donker vlak: crème tekst, okerknop (wijnrood valt weg op blauw), de krul als accent */
.dhc-vlak--donker { background: var(--dhc-blauw-800); color: var(--dhc-creme); overflow: hidden; }
.dhc-vlak--donker h2, .dhc-vlak--donker h3 { color: var(--dhc-creme); }
.dhc-vlak--donker .dhc-btn--p { background: var(--dhc-oker-400); border-color: var(--dhc-oker-400); color: var(--dhc-blauw-800); }
.dhc-vlak--donker .dhc-btn--p:hover { background: var(--dhc-oker-300); border-color: var(--dhc-oker-300); }
.dhc-vlak--donker .dhc-btn--s { color: var(--dhc-creme); border-color: color-mix(in oklab, var(--dhc-creme) 45%, transparent); }
.dhc-vlak--donker .dhc-btn--s:hover { border-color: var(--dhc-creme); background: color-mix(in oklab, var(--dhc-creme) 12%, transparent); }
.dhc-krul { position: absolute; right: -3%; top: -6%; width: clamp(260px, 34vw, 560px); height: auto; fill: none; stroke: var(--dhc-creme); stroke-width: 9; stroke-linecap: round; opacity: .16; pointer-events: none; }
.dhc-vlak > .dhc-wrap { position: relative; }
/* na een gekleurd vlak of de band begint de volgende sectie niet strak tegen de rand */
.dhc-vlak + .dhc-sectie--vervolg, .dhc-band + .dhc-sectie--vervolg { padding-top: var(--dhc-sectie); }
.dhc-sectie__kop p { margin: .9rem auto 0; max-width: 52ch; }

/* ── Ornament ────────────────────────────────────────────── */

.dhc-orn { display: flex; align-items: center; gap: .55rem; color: var(--dhc-accent); }
.dhc-orn i { width: 7px; height: 7px; background: currentColor; rotate: 45deg; flex: none; }
.dhc-orn b { height: 1px; width: clamp(26px, 6vw, 56px); background: var(--dhc-tekst); opacity: .35; }
.dhc-orn--midden { justify-content: center; }

/* ── Knoppen ─────────────────────────────────────────────── */

.dhc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--dhc-body); font-weight: 500; font-size: .9375rem; line-height: 1.2;
	padding: .9rem 1.7rem; border-radius: 2px; border: 1.5px solid transparent;
	cursor: pointer; text-decoration: none;
	transition: background .18s, color .18s, border-color .18s, transform .18s var(--dhc-ease);
}
.dhc-btn:active { transform: translateY(1px); }
.dhc-btn--p { background: var(--dhc-actie); color: var(--dhc-creme); border-color: var(--dhc-actie); }
.dhc-btn--p:hover { background: var(--dhc-roze-800); border-color: var(--dhc-roze-800); }
.dhc-btn--s { background: transparent; color: var(--dhc-inkt); border-color: color-mix(in oklab, var(--dhc-inkt) 45%, transparent); }
.dhc-btn--s:hover { border-color: var(--dhc-inkt); background: color-mix(in oklab, var(--dhc-blauw-100) 45%, transparent); }
.dhc-btn--sm { padding: .62rem 1.1rem; font-size: .875rem; }

/* ── Header ──────────────────────────────────────────────── */

.dhc-hdr {
	position: sticky; top: 0; z-index: 50;
	background: color-mix(in oklab, var(--dhc-creme) 94%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border-bottom: 1px solid color-mix(in oklab, var(--dhc-blauw-800) 22%, transparent);
	transition: box-shadow .25s;
}
.dhc-hdr--scrolled { box-shadow: 0 12px 28px -22px rgba(0, 61, 82, .45); }
.admin-bar .dhc-hdr { top: 32px; }
@media (max-width: 782px) { .admin-bar .dhc-hdr { top: 46px; } }

.dhc-hdr__in { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-block: .85rem; }
.dhc-hdr__logo { display: block; flex: none; }
.dhc-hdr__logo img { width: 132px; }

.dhc-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem); }
/* B2B-portaal: een echte knop in het footerblauw, alleen voor zakelijke klanten */
.dhc-nav .dhc-btn--b2b { background: var(--dhc-blauw-800); color: var(--dhc-creme); border-color: var(--dhc-blauw-800); padding: .55rem 1rem; font-family: var(--dhc-body); font-size: .875rem; font-weight: 500; position: static; }
.dhc-nav .dhc-btn--b2b::after { display: none; }
.dhc-nav .dhc-btn--b2b:hover { background: var(--dhc-blauw-700); border-color: var(--dhc-blauw-700); color: var(--dhc-creme); }
.dhc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(.9rem, 2vw, 1.9rem); }
.dhc-nav a {
	display: block; font-size: .9375rem; font-weight: 500; color: var(--dhc-inkt);
	text-decoration: none; padding-block: .35rem; position: relative;
}
.dhc-nav a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
	background: var(--dhc-accent); transition: right .22s var(--dhc-ease);
}
.dhc-nav a:hover::after,
.dhc-nav .current-menu-item > a::after,
.dhc-nav .current_page_item > a::after { right: 0; }

.dhc-icons { display: flex; gap: .25rem; align-items: center; margin-left: .5rem; }
.dhc-ico {
	width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 0;
	background: none; color: var(--dhc-inkt); cursor: pointer; position: relative; text-decoration: none;
}
.dhc-ico:hover { background: color-mix(in oklab, var(--dhc-blauw-100) 55%, transparent); }
.dhc-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.dhc-pill {
	position: absolute; top: 3px; right: 3px; min-width: 17px; height: 17px; padding-inline: 4px; border-radius: 99px;
	background: var(--dhc-wijn); color: var(--dhc-creme); font-size: .6875rem; font-weight: 600;
	display: grid; place-items: center; line-height: 1;
}
.dhc-pill:empty { display: none; }
.dhc-burger { display: none; }

/* zoekbalk onder de header — :target werkt ook zonder JavaScript */
.dhc-zoekbalk { display: none; border-top: 1px solid var(--dhc-lijn); padding-block: 1rem; }
.dhc-zoekbalk:target, .dhc-zoekbalk[data-open] { display: block; }
.dhc-zoekbalk .dhc-zoek { margin: 0; max-width: 560px; }

/* ── Hero ────────────────────────────────────────────────── */

.dhc-hero__in {
	display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
	padding-block: clamp(2.75rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem);
}
.dhc-hero h1 {
	font-size: clamp(3.4rem, 8.4vw, 7rem); line-height: .92;
	margin-block: 1.2rem 1.5rem; letter-spacing: -.01em;
}
.dhc-hero h1 em { font-style: normal; color: var(--dhc-wijn); }
.dhc-hero__lead { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); max-width: 38ch; }
.dhc-knoppen { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2.1rem; }
.dhc-belofte { display: flex; align-items: center; gap: .55rem; margin-top: 1.6rem; font-size: .875rem; font-weight: 500; color: var(--dhc-inkt); }
.dhc-belofte svg { width: 18px; height: 18px; fill: none; stroke: var(--dhc-accent); stroke-width: 1.9; flex: none; }

/* drie repen, verspringend — elk op hun eigen studiokleur */
.dhc-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1.4vw, 1.1rem); align-items: start; }
.dhc-trio a {
	display: block; border-radius: var(--dhc-radius); overflow: hidden; aspect-ratio: 3 / 4.3;
	background: var(--dhc-blauw-100);
	box-shadow: 0 22px 40px -26px rgba(0, 61, 82, .55);
	transition: transform .35s var(--dhc-ease), box-shadow .35s;
}
.dhc-trio a:hover { transform: translateY(-5px); box-shadow: 0 30px 50px -28px rgba(0, 61, 82, .6); }
.dhc-trio img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.dhc-trio a:nth-child(1) { margin-top: clamp(1.5rem, 3.5vw, 3rem); }
.dhc-trio a:nth-child(3) { margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }
/* vrijstaande packshots: geen blok, een zachte slagschaduw en een lichte draai */
.dhc-trio a.dhc-trio__los { aspect-ratio: auto; background: none; overflow: visible; box-shadow: none; border-radius: 0; }
.dhc-trio a.dhc-trio__los:hover { box-shadow: none; transform: none; }
.dhc-trio a.dhc-trio__los img { height: auto; object-fit: contain; filter: drop-shadow(0 26px 26px rgba(0, 61, 82, .28)); transition: transform .35s var(--dhc-ease); }
.dhc-trio a:nth-child(1).dhc-trio__los img { transform: rotate(-7deg); }
.dhc-trio a:nth-child(3).dhc-trio__los img { transform: rotate(6deg); }
.dhc-trio a:nth-child(2).dhc-trio__los:hover img { transform: translateY(-6px); }
.dhc-trio a:nth-child(1).dhc-trio__los:hover img { transform: rotate(-7deg) translateY(-6px); }
.dhc-trio a:nth-child(3).dhc-trio__los:hover img { transform: rotate(6deg) translateY(-6px); }

/* ── Band in de kleuren van het logo ─────────────────────── */

.dhc-band { background: var(--dhc-blauw-800); color: var(--dhc-creme); overflow: hidden; padding-block: 1rem; }
.dhc-band__t { display: flex; gap: 2.4rem; width: max-content; animation: dhc-band 40s linear infinite; align-items: center; }
.dhc-band span { font-family: var(--dhc-display); font-size: 1.25rem; white-space: nowrap; }
.dhc-band i { width: 7px; height: 7px; background: var(--dhc-accent); rotate: 45deg; flex: none; }
.dhc-band:hover .dhc-band__t { animation-play-state: paused; }
@keyframes dhc-band { to { transform: translateX(-50%); } }

/* ── Verhaal ─────────────────────────────────────────────── */

.dhc-verhaal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dhc-verhaal img { border-radius: var(--dhc-radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dhc-verhaal p { margin-top: 1.1rem; max-width: 46ch; }
.dhc-verhaal .dhc-knoppen { margin-top: 1.8rem; }

/* ── Productkaarten ──────────────────────────────────────── */

.dhc-repen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(1.25rem, 2.6vw, 2.2rem); }
.dhc-kaart {
	display: flex; flex-direction: column; background: var(--dhc-creme);
	border: 1px solid var(--dhc-lijn); border-radius: var(--dhc-radius); overflow: hidden;
	transition: transform .25s var(--dhc-ease), box-shadow .25s, border-color .2s;
}
.dhc-kaart:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--dhc-blauw-800) 28%, transparent); box-shadow: 0 16px 34px -22px rgba(0, 61, 82, .45); }
.dhc-kaart__img { display: block; position: relative; aspect-ratio: 1 / .9; overflow: hidden; background: var(--dhc-blauw-100); }
.dhc-kaart__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--dhc-ease); }
.dhc-kaart:hover .dhc-kaart__img img { scale: 1.035; }
.dhc-kaart__label {
	position: absolute; top: .7rem; left: .7rem; background: var(--dhc-creme); color: var(--dhc-inkt);
	font-size: .75rem; font-weight: 600; padding: .3rem .6rem; border-radius: 2px;
}
.dhc-kaart__label--uit { background: var(--dhc-wijn); color: var(--dhc-creme); }
.dhc-kaart__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.dhc-kaart h3 { font-size: 1.65rem; line-height: 1.1; }
.dhc-kaart h3 a { text-decoration: none; }
.dhc-kaart__d { font-size: .9375rem; line-height: 1.55; flex: 1; }
.dhc-kaart__voet { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .7rem; padding-top: .8rem; border-top: 1px solid var(--dhc-lijn); }
/* WooCommerce zet na toevoegen een link achter de knop */
.dhc-kaart .added_to_cart { flex-basis: 100%; text-align: right; font-size: .8125rem; font-weight: 500; color: var(--dhc-wijn); }
.dhc-btn.loading { opacity: .6; pointer-events: none; }
.dhc-kaart__prijs { font-family: var(--dhc-display); font-size: 1.45rem; color: var(--dhc-inkt); }
.dhc-kaart__prijs del { opacity: .55; font-size: .8em; margin-right: .3rem; }
.dhc-kaart__prijs ins { text-decoration: none; }
.dhc-kaart .dhc-btn { margin-left: auto; }
/* icoonknop met aantalveld ervoor; het aantal gaat via main.js mee op de knop */
.dhc-kaart__koop { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.dhc-kaart__koop .dhc-btn { margin-left: 0; }
.dhc-kaart__aantal {
	width: 3rem; height: 40px; padding: 0 .3rem; text-align: center; -moz-appearance: textfield;
	border: 1.5px solid color-mix(in oklab, var(--dhc-inkt) 35%, transparent); border-radius: 2px;
	background: var(--dhc-creme); color: var(--dhc-tekst); font-family: var(--dhc-body); font-weight: 500; font-size: .9375rem;
}
.dhc-kaart__aantal::-webkit-inner-spin-button, .dhc-kaart__aantal::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.dhc-kaart__aantal:focus { outline: 2.5px solid var(--dhc-blauw-800); outline-offset: 2px; }
.dhc-btn--icoon { width: 40px; height: 40px; padding: 0; border-radius: 99px; flex: none; }
.dhc-btn--icoon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dhc-btn--icoon.added { background: var(--dhc-blauw-800); border-color: var(--dhc-blauw-800); }

/* ── Proefpakket-blok ────────────────────────────────────── */

.dhc-proef {
	background: var(--dhc-blauw-100); border-radius: var(--dhc-radius); padding: clamp(1.75rem, 4vw, 3.25rem);
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.dhc-proef h2 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); margin-block: .9rem .8rem; }
.dhc-proef p { color: var(--dhc-blauw-800); max-width: 46ch; }
.dhc-badge {
	display: inline-block; background: var(--dhc-oker-100); color: var(--dhc-oker-800);
	box-shadow: inset 0 0 0 1px var(--dhc-oker-400);
	font-size: .8125rem; font-weight: 600; padding: .35rem .75rem; border-radius: 2px;
}
.dhc-proef__img { display: flex; gap: .6rem; }
.dhc-proef__img img { width: clamp(78px, 11vw, 124px); aspect-ratio: 1 / 1.3; object-fit: cover; border-radius: var(--dhc-radius); }
/* de pakketfoto: een vaste kolom, anders is width:100% in een auto-kolom een cyclisch
   percentage en rekent de browser de hoogte verkeerd; de verhouding is die van de compositie */
.dhc-proef:has(.dhc-proef__img--pakket) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.dhc-proef__img--pakket { display: block; }
.dhc-proef__img--pakket img { width: 100%; height: auto; aspect-ratio: 1729 / 1000; object-fit: contain; border-radius: 0; }

/* ── Cijfers ─────────────────────────────────────────────── */

.dhc-cijfers { background: var(--dhc-wijn); color: var(--dhc-creme); text-align: center; }
.dhc-cijfers h2 { color: var(--dhc-creme); }
.dhc-cijfers__rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2rem, 4vw, 3rem); }
.dhc-cijfer b { display: block; font-family: var(--dhc-display); font-weight: 400; font-size: clamp(2.8rem, 6vw, 4.4rem); line-height: 1; }
.dhc-cijfer span { display: block; margin: .6rem auto 0; font-size: .9375rem; font-weight: 500; color: var(--dhc-roze-100); max-width: 20ch; }

/* ── FAQ ─────────────────────────────────────────────────── */

.dhc-faq { max-width: 820px; margin-inline: auto; }
.dhc-faq details { border-top: 1px solid var(--dhc-lijn); }
.dhc-faq details:last-of-type { border-bottom: 1px solid var(--dhc-lijn); }
.dhc-faq summary {
	cursor: pointer; list-style: none; padding: 1.3rem 2.6rem 1.3rem 0; position: relative;
	font-size: 1.125rem; font-weight: 500; color: var(--dhc-inkt);
}
.dhc-faq summary::-webkit-details-marker { display: none; }
.dhc-faq summary::after {
	content: ""; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px;
	border-right: 1.8px solid var(--dhc-accent); border-bottom: 1.8px solid var(--dhc-accent);
	translate: 0 -65%; rotate: 45deg; transition: rotate .25s var(--dhc-ease);
}
.dhc-faq details[open] summary::after { rotate: -135deg; }
.dhc-faq p { padding-bottom: 1.4rem; max-width: 62ch; }

/* ── Quote ───────────────────────────────────────────────── */

.dhc-quote { text-align: center; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.dhc-quote blockquote {
	margin: 1.6rem auto; font-family: var(--dhc-display); font-size: clamp(1.9rem, 4.4vw, 3.3rem);
	line-height: 1.12; color: var(--dhc-wijn); max-width: 22ch; text-wrap: balance;
}

/* ── Footer ──────────────────────────────────────────────── */

.dhc-ftr { background: var(--dhc-blauw-800); color: var(--dhc-creme); margin-top: clamp(2rem, 5vw, 4rem); }
.dhc-ftr__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(1.75rem, 4vw, 3rem); padding-block: clamp(3rem, 6vw, 4.5rem); }
.dhc-ftr__logo img { width: 168px; }
.dhc-ftr__adres { margin-top: 1.2rem; font-size: .9375rem; color: var(--dhc-blauw-100); font-style: normal; }
.dhc-ftr__kop { font-family: var(--dhc-body); font-size: .8125rem; font-weight: 600; line-height: 1.4; color: var(--dhc-oker-200); margin: 0 0 1rem; } /* oker-400 haalt hier maar APCA -52 */
.dhc-ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.dhc-ftr a { color: var(--dhc-creme); text-decoration: none; font-size: .9375rem; }
.dhc-ftr a:hover { text-decoration: underline; }
.dhc-ftr__titel { color: var(--dhc-creme); font-size: 1.9rem; margin: 0 0 .7rem; }
.dhc-ftr__brief p { color: var(--dhc-blauw-100); font-size: .9375rem; margin-bottom: 1rem; }
.dhc-veld {
	width: 100%; padding: .85rem 1rem; border: 1.5px solid transparent; border-radius: 2px;
	background: var(--dhc-creme); color: var(--dhc-tekst); font-family: var(--dhc-body); font-size: .9375rem;
}
.dhc-veld::placeholder { color: var(--dhc-roze-700); }
.dhc-ftr__brief form { display: grid; gap: .55rem; }
.dhc-ftr__brief .dhc-btn--p { background: var(--dhc-creme); color: var(--dhc-blauw-800); border-color: var(--dhc-creme); }
.dhc-ftr__brief .dhc-btn--p:hover { background: var(--dhc-blauw-100); border-color: var(--dhc-blauw-100); }
.dhc-ftr__bot {
	border-top: 1px solid color-mix(in oklab, var(--dhc-creme) 22%, transparent); padding-block: 1.3rem;
	display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; font-size: .8125rem; color: var(--dhc-blauw-100);
}

/* ── Inhoudspagina's ─────────────────────────────────────── */

.dhc-pagina { padding-block: clamp(2.5rem, 6vw, 5rem); }
.dhc-pagina__kop { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.dhc-pagina__kop h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-top: 1rem; }
/* Lopende tekst blijft 68ch; brede blokken (media-tekst, kolommen, video) mogen de hele wrap. */
.dhc-prose > :not(.alignwide):not(.alignfull):not(.wp-block-columns):not(.wp-block-media-text) { max-width: 68ch; }
.dhc-prose > * + * { margin-top: 1.1rem; }
.dhc-prose h2 { font-size: var(--dhc-fs-xl); margin-top: 2.6rem; }
.dhc-prose h3 { font-size: var(--dhc-fs-lg); margin-top: 2rem; }
.dhc-prose a { color: var(--dhc-wijn); }
.dhc-prose ul, .dhc-prose ol { padding-left: 1.3rem; }
.dhc-prose li + li { margin-top: .4rem; }
.dhc-prose img { border-radius: var(--dhc-radius); }
.dhc-prose blockquote { margin-inline: 0; padding-left: 1.2rem; border-left: 1px solid var(--dhc-accent); font-size: var(--dhc-fs-md); }

/* ── Blokken in pagina-inhoud ─────────────────────────────── */
.dhc-prose > .alignwide, .dhc-prose > .wp-block-columns, .dhc-prose > .wp-block-media-text { margin-block: clamp(2.5rem, 5vw, 4rem); }
.dhc-prose .dhc-lead { font-size: var(--dhc-fs-md); line-height: 1.5; max-width: 52ch; }
.dhc-prose .wp-block-media-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.dhc-prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
.dhc-prose .wp-block-media-text__media { margin: 0; border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-blauw-100); }
.dhc-prose .wp-block-media-text__media img { width: 100%; height: auto; display: block; }
.dhc-prose .wp-block-media-text__content { padding: 0; }
.dhc-prose .wp-block-media-text__content > * + * { margin-top: 1rem; }
.dhc-prose .wp-block-media-text__content h2, .dhc-prose .wp-block-media-text__content h3 { margin-top: 0; }
.dhc-prose .wp-block-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.dhc-prose .wp-block-column > * + * { margin-top: 1rem; }
.dhc-prose .wp-block-column > h2:first-child, .dhc-prose .wp-block-column > h3:first-child { margin-top: 0; }
.dhc-prose .wp-block-image, .dhc-prose .wp-block-video { margin-inline: 0; }
.dhc-prose .wp-block-image img, .dhc-prose .wp-block-video video { width: 100%; height: auto; border-radius: var(--dhc-radius); display: block; }
.dhc-prose figcaption { font-size: .8125rem; color: var(--dhc-roze-700); margin-top: .5rem; }
.dhc-prose table { width: 100%; border-collapse: collapse; }
.dhc-prose th, .dhc-prose td { padding: .6rem .7rem; border: 0; border-bottom: 1px solid var(--dhc-lijn); text-align: left; vertical-align: top; }
.dhc-prose th, .dhc-prose thead td { font-size: .875rem; font-weight: 600; color: var(--dhc-inkt); }
.dhc-prose .wp-block-table { margin-inline: 0; }
.dhc-prose .wp-block-table thead { border-bottom: 0; }
.dhc-prose .wp-block-table.is-style-stripes { border-bottom: 0; }
.dhc-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: color-mix(in oklab, var(--dhc-blauw-100) 30%, transparent); }
.dhc-prose .wp-block-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.dhc-prose .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5rem; font-family: var(--dhc-body); font-weight: 500; font-size: .9375rem; line-height: 1.2;
	padding: .9rem 1.7rem; border-radius: 2px; border: 1.5px solid var(--dhc-actie); background: var(--dhc-actie); color: var(--dhc-creme); text-decoration: none;
}
.dhc-prose .wp-block-button__link:hover { background: var(--dhc-roze-800); border-color: var(--dhc-roze-800); }
.dhc-prose .is-style-outline .wp-block-button__link { background: transparent; color: var(--dhc-inkt); border-color: color-mix(in oklab, var(--dhc-inkt) 45%, transparent); }
.dhc-prose .wp-block-separator { border: 0; height: 1px; background: var(--dhc-lijn); margin-block: 2rem; }
.dhc-prose small, .dhc-prose .dhc-klein { font-size: .875rem; color: var(--dhc-roze-700); }

/* lege staat en 404 */
.dhc-leeg { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.dhc-leeg h1 { font-size: clamp(3rem, 8vw, 5.6rem); margin-block: 1.2rem 1rem; }
.dhc-leeg p { max-width: 44ch; margin-inline: auto; }
.dhc-leeg .dhc-knoppen { justify-content: center; }
.dhc-zoek { display: flex; gap: .5rem; max-width: 460px; margin: 1.8rem auto 0; }
.dhc-zoek .dhc-veld { border-color: color-mix(in oklab, var(--dhc-inkt) 35%, transparent); }

/* modifiers die anders inline in templates zouden staan */
.dhc-sectie--vervolg { padding-top: 0; }
.dhc-knoppen--midden { justify-content: center; margin-top: 2.5rem; }
.dhc-meta { margin-top: .8rem; font-size: .875rem; }
.dhc-uitgelicht { margin-bottom: 2rem; }
.dhc-uitgelicht img { border-radius: var(--dhc-radius); }
.dhc-resultaten { margin-top: 2.5rem; }
.dhc-leeg--compact { padding-block: 2.5rem 0; }
.dhc-leeg--links { text-align: left; }
.dhc-leeg--links p { margin-inline: 0; }

/* winkelwagen, afrekenen en account: volle breedte, geen tekstkolom */
.dhc-winkel-inhoud { max-width: none; }

/* ── WooCommerce ─────────────────────────────────────────────
 * De stylesheets van WooCommerce blijven geladen tot ook winkelwagen,
 * afrekenen en account eigen zijn (mijlpaal 3 en 5). Vandaar hier en daar een
 * lange selector of een !important: die moeten van woocommerce.css winnen. */

.dhc-winkel { padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem); }

/* kruimelpad */
.dhc-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--dhc-roze-700); margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.dhc-kruimel a { color: inherit; text-decoration: none; }
.dhc-kruimel a:hover { text-decoration: underline; }
.dhc-kruimel i { width: 4px; height: 4px; background: currentColor; rotate: 45deg; opacity: .6; }

/* kop van winkel, categorie en zoekresultaten */
.woocommerce-products-header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.woocommerce-products-header h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); margin-top: 1rem; }
.woocommerce-products-header .term-description, .woocommerce-products-header .page-description { max-width: 56ch; margin-top: .9rem; }

/* categorieën links, sortering rechts */
.dhc-winkelbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: 1rem; border-bottom: 1px solid var(--dhc-lijn); }
.dhc-catnav { display: grid; gap: .5rem; }
.dhc-catnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.dhc-catnav a { display: inline-block; padding: .5rem .95rem; border-radius: 99px; border: 1.5px solid transparent; text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--dhc-inkt); }
.dhc-catnav a:hover { border-color: color-mix(in oklab, var(--dhc-inkt) 35%, transparent); }
.dhc-catnav a[aria-current] { background: var(--dhc-inkt); border-color: var(--dhc-inkt); color: var(--dhc-creme); }
.dhc-catnav__sub a { font-size: .875rem; padding: .35rem .8rem; }
.dhc-catnav__sub a[aria-current] { background: var(--dhc-blauw-100); border-color: var(--dhc-blauw-100); color: var(--dhc-inkt); }
.woocommerce .woocommerce-ordering { float: none; margin: 0; }
.woocommerce .woocommerce-ordering select, .woocommerce div.product form.cart table.variations select {
	padding: .6rem 2.2rem .6rem .9rem; border: 1.5px solid color-mix(in oklab, var(--dhc-inkt) 35%, transparent); border-radius: 2px;
	background: var(--dhc-creme); color: var(--dhc-tekst); font-family: var(--dhc-body); font-size: .9375rem; cursor: pointer;
}
.woocommerce .woocommerce-ordering select:focus, .woocommerce div.product form.cart table.variations select:focus { outline: 2.5px solid var(--dhc-blauw-800); outline-offset: 2px; }

/* het raster: de <li> van WooCommerce ís de kaart van de homepage */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(1.25rem, 2.6vw, 2.2rem); margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; }
.woocommerce ul.products li.product .dhc-kaart__img img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.woocommerce ul.products li.product .dhc-kaart__body h3 { padding: 0; margin: 0; font-size: 1.65rem; }

/* paginering */
.woocommerce nav.woocommerce-pagination { margin-top: 2.5rem; }
.woocommerce nav.woocommerce-pagination ul { border: 0; display: flex; justify-content: center; gap: .3rem; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { padding: .55rem .9rem; border-radius: 2px; color: var(--dhc-inkt); font-weight: 500; }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--dhc-inkt); color: var(--dhc-creme); }
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--dhc-blauw-100); }

/* knoppen en meldingen van WooCommerce zelf */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
	background: var(--dhc-actie); color: var(--dhc-creme); font-family: var(--dhc-body); font-weight: 500;
	border-radius: 2px; padding: .85rem 1.4rem; line-height: 1.2; border: 0;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--dhc-roze-800); color: var(--dhc-creme); }
.woocommerce span.onsale { background: var(--dhc-wijn); color: var(--dhc-creme); font-family: var(--dhc-body); font-weight: 600; min-height: 0; min-width: 0; padding: .3rem .65rem; line-height: 1.2; border-radius: 2px; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info { border-top-color: var(--dhc-blauw-600); background: var(--dhc-blauw-100); color: var(--dhc-blauw-800); }
.woocommerce .woocommerce-message::before, .woocommerce .woocommerce-info::before { color: var(--dhc-blauw-800); }
.woocommerce .woocommerce-error { border-top-color: var(--dhc-wijn); background: var(--dhc-roze-100); color: var(--dhc-roze-800); }

/* ── Productpagina ───────────────────────────────────────── */

.dhc-winkel div.product { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dhc-winkel div.product > :not(.images):not(.summary) { grid-column: 1 / -1; }
.dhc-winkel div.product div.images, .dhc-winkel div.product div.summary { float: none !important; width: auto !important; margin: 0 !important; }
.dhc-winkel div.product span.onsale { top: .75rem; left: .75rem; }

/* galerij */
.dhc-winkel .woocommerce-product-gallery__wrapper { margin: 0; }
.dhc-winkel .woocommerce-product-gallery__image { border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-blauw-100); }
.dhc-winkel .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-top: .75rem; }
.dhc-winkel .woocommerce-product-gallery .flex-control-thumbs li { width: auto; float: none; margin: 0; border-radius: var(--dhc-radius); overflow: hidden; border: 1.5px solid transparent; }
.dhc-winkel .woocommerce-product-gallery .flex-control-thumbs li:has(.flex-active) { border-color: var(--dhc-wijn); }
.dhc-winkel a.woocommerce-product-gallery__trigger { background: var(--dhc-creme); }
.dhc-winkel a.woocommerce-product-gallery__trigger::before { border-color: var(--dhc-inkt); }
.dhc-winkel a.woocommerce-product-gallery__trigger::after { background: var(--dhc-inkt); }

/* koopblok */
.dhc-winkel div.product .summary > .product_title { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--dhc-inkt); font-family: var(--dhc-display); font-size: 2.2rem; line-height: 1; }
.woocommerce div.product p.price { margin: 1rem 0 0; }
.woocommerce div.product p.price del, .woocommerce div.product span.price del { opacity: .55; font-size: .7em; margin-right: .3rem; }
.woocommerce div.product p.price ins, .woocommerce div.product span.price ins { text-decoration: none; font-weight: 400; }
.dhc-koop__meta { font-size: .8125rem; color: var(--dhc-roze-700); margin-top: .5rem; }
.dhc-winkel div.product .woocommerce-product-details__short-description { margin-top: 1.2rem; }
.dhc-winkel div.product .woocommerce-product-details__short-description p + p { margin-top: .8rem; }
.woocommerce div.product div.summary p { max-width: 48ch; }

/* voorraadstatus in het palet, niet in WooCommerce-groen en -oranje */
.woocommerce div.product p.stock, .woocommerce .stock { font-family: var(--dhc-body); font-size: .9375rem; font-weight: 500; color: var(--dhc-tekst) !important; }
.woocommerce .stock::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 99px; margin-right: .5rem; vertical-align: middle; background: var(--dhc-blauw-600); }
.woocommerce .stock.out-of-stock::before { background: var(--dhc-merk); }

/* aantalveld; de min- en plusknop komen uit main.js */
.woocommerce .quantity .qty {
	width: 4.2rem; height: 46px; padding: 0 .4rem; text-align: center; -moz-appearance: textfield;
	border: 1.5px solid color-mix(in oklab, var(--dhc-inkt) 35%, transparent); border-radius: 2px;
	background: var(--dhc-creme); color: var(--dhc-tekst); font-family: var(--dhc-body); font-weight: 500; font-size: 1rem;
}
.woocommerce .quantity .qty::-webkit-inner-spin-button, .woocommerce .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.woocommerce .quantity .qty:focus { outline: 2.5px solid var(--dhc-blauw-800); outline-offset: 2px; }
.woocommerce .quantity.dhc-aantal { display: inline-flex; align-items: center; border: 1.5px solid color-mix(in oklab, var(--dhc-inkt) 35%, transparent); border-radius: 2px; background: var(--dhc-creme); }
.woocommerce .quantity.dhc-aantal .qty { border: 0; border-radius: 0; width: 3rem; height: 43px; }
.woocommerce .quantity.dhc-aantal .qty:focus { outline-offset: -2.5px; }
.woocommerce .quantity.dhc-aantal button { width: 40px; height: 43px; border: 0; background: none; color: var(--dhc-tekst); font-family: var(--dhc-body); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.woocommerce .quantity.dhc-aantal button:hover { background: var(--dhc-blauw-100); }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-block: 1.4rem; }
.woocommerce div.product form.cart .quantity { float: none; margin: 0; }
.woocommerce div.product form.cart .button { height: 46px; line-height: 1; display: inline-flex; align-items: center; gap: .5rem; }
.woocommerce div.product form.cart .single_add_to_cart_button::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l-1.2 12.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l-1.2 12.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3Z'/%3E%3Cpath d='M9 7V5.5a3 3 0 0 1 6 0V7'/%3E%3C/svg%3E") center / contain no-repeat; }
.dhc-koopbalk .dhc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 6-pack-keuze uit dhc-core: twee opties als kaartjes, over de volle breedte van het formulier */
.dhc-pak { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 0 0 .4rem; padding: 0; border: 0; }
.dhc-pak__optie { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1.5px solid var(--dhc-lijn); border-radius: var(--dhc-radius); cursor: pointer; }
.dhc-pak__optie:has(:checked) { border-color: var(--dhc-inkt); background: color-mix(in oklab, var(--dhc-blauw-100) 40%, transparent); }
.dhc-pak__optie input { accent-color: var(--dhc-wijn); margin: 0; flex: none; }
.dhc-pak__naam { font-weight: 500; color: var(--dhc-inkt); line-height: 1.2; }
.dhc-pak__naam small { display: block; font-size: .75rem; font-weight: 300; color: var(--dhc-roze-700); }
.dhc-pak__prijs { margin-left: auto; font-family: var(--dhc-display); font-size: 1.15rem; color: var(--dhc-inkt); white-space: nowrap; }

/* uitverkocht: een weg naar wat er wél is */
.dhc-koop__op { margin-top: 1.2rem; padding: 1.1rem 1.2rem; border: 1.5px solid var(--dhc-lijn); border-radius: var(--dhc-radius); display: grid; gap: .8rem; justify-items: start; }

/* vertrouwensregel onder de knop; staat ín form.cart, dus over de volle breedte van de flex-rij */
.dhc-vertrouwen { list-style: none; margin: 1rem 0 0; padding: 1.3rem 0 0; display: grid; gap: .7rem; border-top: 1px solid var(--dhc-lijn); flex-basis: 100%; }
.dhc-vertrouwen li { display: flex; align-items: center; gap: .65rem; font-size: .9375rem; }
.dhc-vertrouwen svg { width: 18px; height: 18px; fill: none; stroke: var(--dhc-wijn); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dhc-vertrouwen b { font-weight: 600; }
.dhc-vertrouwen small { display: block; font-size: .8125rem; color: var(--dhc-roze-700); margin-top: .1rem; }
/* zakelijke klant: prijsblok in plaats van de losse prijs, en de weg naar het portaal */
.dhc-b2b-prijs { margin: .25rem 0 1.1rem; padding: 1rem 1.15rem; border: 1px solid var(--dhc-lijn); border-radius: var(--dhc-radius); background: color-mix(in oklab, var(--dhc-creme) 55%, white); }
.dhc-b2b-prijs__jouw { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.dhc-b2b-prijs__label { flex-basis: 100%; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dhc-roze-700); }
.dhc-b2b-prijs__jouw b { font-family: var(--dhc-display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--dhc-inkt); }
.dhc-b2b-prijs__jouw small { font-size: .8125rem; color: var(--dhc-roze-700); }
.dhc-b2b-prijs__lijst { margin: .9rem 0 0; display: grid; gap: .4rem; font-size: .9375rem; }
.dhc-b2b-prijs__lijst div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .4rem; border-top: 1px solid var(--dhc-lijn); }
.dhc-b2b-prijs__lijst dt { color: var(--dhc-roze-700); }
.dhc-b2b-prijs__lijst dd { margin: 0; text-align: right; }
.dhc-b2b-portaal { flex-basis: 100%; margin: .5rem 0 0; font-size: .9375rem; }

.woocommerce div.product .product_meta { font-size: .875rem; color: var(--dhc-roze-700); margin-top: 1.4rem; }
.woocommerce div.product .product_meta a { color: var(--dhc-inkt); }

/* accordeon (eigen template: woocommerce/single-product/tabs/tabs.php) */
.dhc-accordeon { margin-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--dhc-lijn); max-width: 72ch; }
.dhc-accordeon__item { border-bottom: 1px solid var(--dhc-lijn); }
.dhc-accordeon summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--dhc-display); font-size: var(--dhc-fs-lg); line-height: 1.1; color: var(--dhc-inkt); }
.dhc-accordeon summary::-webkit-details-marker { display: none; }
.dhc-accordeon summary::after { content: "+"; font-family: var(--dhc-body); font-weight: 300; font-size: 1.6rem; line-height: 1; color: var(--dhc-accent); flex: none; }
.dhc-accordeon [open] > summary::after { content: "−"; }
.dhc-accordeon summary:focus-visible { outline: 2.5px solid var(--dhc-blauw-800); outline-offset: 4px; }
.dhc-accordeon__panel { padding-bottom: 1.6rem; }
.dhc-accordeon__panel > * + * { margin-top: .9rem; }
.dhc-accordeon__panel h2 { font-size: var(--dhc-fs-xl); }
.dhc-accordeon__panel h4 { margin-top: 1.4rem; }
.woocommerce table.shop_attributes { border: 0; margin: 0; }
.woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border: 0; border-bottom: 1px solid var(--dhc-lijn); padding: .5rem 0; font-style: normal; background: none !important; text-align: left; }
.woocommerce table.shop_attributes th { font-weight: 500; color: var(--dhc-roze-700); width: 40%; }
.woocommerce table.shop_attributes td p { padding: 0; }

/* gerelateerd */
.dhc-winkel .related, .dhc-winkel .upsells { margin-top: clamp(3rem, 6vw, 5rem); }
.dhc-winkel .related > h2, .dhc-winkel .upsells > h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* variabel product: label boven de keuze, keuze op volle breedte */
.woocommerce div.product form.cart.variations_form { flex-direction: column; align-items: stretch; }
.woocommerce div.product form.cart table.variations { margin: 0; border: 0; width: 100%; }
.woocommerce div.product form.cart table.variations th, .woocommerce div.product form.cart table.variations td { display: block; border: 0; padding: 0 0 .5rem; text-align: left; line-height: 1.4; }
.woocommerce div.product form.cart table.variations th label { font-size: .875rem; font-weight: 600; color: var(--dhc-roze-700); }
.woocommerce div.product form.cart table.variations select { width: 100%; max-width: 360px; }
.woocommerce div.product form.cart .reset_variations { font-size: .8125rem; color: var(--dhc-roze-700); }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: .6rem; }
.woocommerce div.product .woocommerce-variation-availability p.stock { margin: 0 0 .8rem; }

/* Product Bundles: de bundelregels zijn een tabel met beeld, product en aantal */
.woocommerce div.product form.cart.bundle_form { display: block; }
.woocommerce div.product table.bundled_products { width: 100%; border: 0; border-collapse: collapse; margin: 0 0 1.5rem; }
.woocommerce div.product table.bundled_products th, .woocommerce div.product table.bundled_products td { border: 0; border-bottom: 1px solid var(--dhc-lijn); padding: 1rem .6rem; vertical-align: middle; background: none; text-align: left; }
.woocommerce div.product table.bundled_products th { font-family: var(--dhc-body); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dhc-roze-700); padding-block: .5rem; }
.woocommerce div.product .bundled_item_images_col { width: 92px; padding-left: 0 !important; }
.woocommerce div.product .bundled_product_images { width: 100% !important; float: none; margin: 0; }
.woocommerce div.product .bundled_product_images figure { margin: 0; border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-blauw-100); }
.woocommerce div.product .bundled_product .bundled_product_title { font-family: var(--dhc-body); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--dhc-inkt); margin: 0; }
.woocommerce div.product .bundled_product .bundled_product_title .item_qty { font-weight: 300; color: var(--dhc-roze-700); margin-left: .3rem; }
.woocommerce div.product .bundled_product .bundled_product_excerpt { font-size: .875rem; max-width: 46ch; margin-top: .25rem; }
.woocommerce div.product .bundled_product .bundled_product_excerpt p + p { margin-top: .3rem; }
.woocommerce div.product .bundled_product .bundled_product_excerpt ul { padding-left: 1.1rem; margin: .3rem 0 0; }
.woocommerce div.product .product-information--blank { display: none; }
.woocommerce div.product .bundled_item_qty_col { width: 130px; padding-right: 0 !important; }
.woocommerce div.product .bundled_item_cart_details p.stock { margin: .4rem 0 0; font-size: .875rem; }
.woocommerce div.product .bundle_wrap { display: grid; gap: .9rem; justify-items: start; }
.woocommerce div.product .bundle_wrap > :empty { display: none; }
.woocommerce div.product .bundle_button .dhc-vertrouwen { max-width: 56ch; }
.woocommerce div.product .bundle_error .woocommerce-info { margin: 0; }
.woocommerce div.product .bundle_button { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.woocommerce div.product .bundle_button .quantity { float: none; margin: 0; }

/* koopbalk op mobiel; main.js haalt het hidden-attribuut weg */
.dhc-koopbalk { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: .9rem; align-items: center; padding: .7rem var(--dhc-gutter); background: var(--dhc-creme); border-top: 1px solid var(--dhc-lijn); box-shadow: 0 -10px 26px -20px rgba(92, 38, 44, .7); }
.dhc-koopbalk__prijs { font-family: var(--dhc-display); font-size: 1.5rem; color: var(--dhc-inkt); line-height: 1; }
.dhc-koopbalk__prijs del { opacity: .55; font-size: .7em; margin-right: .2rem; }
.dhc-koopbalk__prijs ins { text-decoration: none; }
.dhc-koopbalk__prijs small { display: block; font-family: var(--dhc-body); font-size: .75rem; color: var(--dhc-roze-700); margin-top: .2rem; }
.dhc-koopbalk .dhc-btn { margin-left: auto; }

/* ── Formuliervelden van WooCommerce: hetzelfde veld als de zoekbalk ── */
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce table.shop_table td.actions .coupon .input-text {
	width: 100%; min-height: 44px; padding: .55rem .9rem; border: 1.5px solid color-mix(in oklab, var(--dhc-inkt) 35%, transparent); border-radius: 2px;
	background: var(--dhc-creme); color: var(--dhc-tekst); font-family: var(--dhc-body); font-size: .9375rem; line-height: 1.4;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus,
.woocommerce table.shop_table td.actions .coupon .input-text:focus { outline: 2.5px solid var(--dhc-blauw-800); outline-offset: 2px; }
.woocommerce form .form-row label { font-size: .875rem; font-weight: 500; color: var(--dhc-roze-700); line-height: 1.4; }
.woocommerce form .form-row .required { color: var(--dhc-merk); text-decoration: none; }

/* ── Winkelwagen ───────────────────────────────────────────── */
.woocommerce table.shop_table { border: 0; border-collapse: collapse; border-radius: 0; margin: 0; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border: 0; border-bottom: 1px solid var(--dhc-lijn); padding: 1rem .6rem; vertical-align: middle; text-align: left; }
.woocommerce table.shop_table th { font-family: var(--dhc-body); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dhc-roze-700); padding-block: .5rem; }
.woocommerce table.shop_table th.product-remove, .woocommerce table.shop_table td.product-remove { width: 44px; padding-left: 0; }
.woocommerce table.shop_table td.product-thumbnail { width: 92px; }
.woocommerce table.shop_table td.product-thumbnail a { display: block; width: 72px; border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-blauw-100); }
.woocommerce table.shop_table td.product-thumbnail img { width: 72px; height: 72px; object-fit: cover; display: block; }
.woocommerce table.shop_table td.product-name { font-weight: 600; color: var(--dhc-inkt); }
.woocommerce table.shop_table td.product-name a { text-decoration: none; color: var(--dhc-inkt); }
.woocommerce table.shop_table td.product-name dl.variation, .woocommerce table.shop_table td.product-name .wc-item-meta { font-size: .8125rem; font-weight: 300; color: var(--dhc-roze-700); margin: .25rem 0 0; }
.woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal { white-space: nowrap; }
.woocommerce table.shop_table th.product-subtotal, .woocommerce table.shop_table td.product-subtotal { text-align: right; padding-right: 0; }
.woocommerce table.shop_table td.product-subtotal { font-weight: 500; color: var(--dhc-inkt); }
.woocommerce-cart-form .tax_label { display: none; }
.woocommerce a.remove { width: 28px; height: 28px; line-height: 25px; font-size: 1.25rem; font-weight: 300; color: var(--dhc-roze-700) !important; border: 1px solid var(--dhc-lijn); border-radius: 99px; text-align: center; }
.woocommerce a.remove:hover { background: var(--dhc-wijn); border-color: var(--dhc-wijn); color: var(--dhc-creme) !important; }

/* acties onder de regels: kortingscode achter een link (main.js); bijwerken gebeurt vanzelf */
.woocommerce table.shop_table td.actions { padding: 1rem 0 0; border: 0; text-align: left; }
.woocommerce table.shop_table td.actions > * { display: inline-flex; align-items: center; vertical-align: middle; float: none !important; margin: 0 1rem .5rem 0; }
.woocommerce table.shop_table td.actions .coupon { gap: .5rem; flex-wrap: wrap; }
.woocommerce table.shop_table td.actions .coupon .input-text { width: 200px !important; float: none; margin: 0; }
.woocommerce table.shop_table td.actions .coupon .button { background: transparent; color: var(--dhc-inkt); border: 1.5px solid color-mix(in oklab, var(--dhc-inkt) 45%, transparent); }
.woocommerce table.shop_table td.actions .coupon .button:hover { border-color: var(--dhc-inkt); background: color-mix(in oklab, var(--dhc-blauw-100) 45%, transparent); }
.dhc-js .woocommerce-cart-form .coupon:not(.dhc-open) { display: none !important; }
.dhc-coupon-toggle { background: none; border: 0; padding: 0; font: inherit; font-size: .9375rem; color: var(--dhc-wijn); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.dhc-js .woocommerce-cart-form button[name="update_cart"] { display: none !important; }

/* overzicht rechts, cross-sells links */
.woocommerce .cart-collaterals { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.woocommerce .cart-collaterals::before, .woocommerce .cart-collaterals::after { display: none; }
.woocommerce .cart-collaterals .cross-sells, .woocommerce .cart-collaterals .cart_totals { float: none !important; width: auto !important; }
.woocommerce .cart-collaterals h2 { font-size: var(--dhc-fs-xl); margin-bottom: 1rem; }
.woocommerce .cart_totals { border: 1px solid var(--dhc-lijn); border-radius: var(--dhc-radius); padding: 1.4rem 1.5rem 1.5rem; }
.woocommerce .cart_totals table.shop_table th, .woocommerce .cart_totals table.shop_table td { padding: .8rem 0; }
.woocommerce .cart_totals table.shop_table th { font-size: .9375rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dhc-tekst); width: 38%; vertical-align: top; }
.woocommerce .cart_totals table.shop_table td { text-align: right; }
.woocommerce .cart_totals tr.order-total th, .woocommerce .cart_totals tr.order-total td { font-size: 1.125rem; font-weight: 600; color: var(--dhc-inkt); border-bottom: 0; padding-bottom: 0; }
.woocommerce .cart_totals tr.order-total .includes_tax { display: block; font-size: .8125rem; font-weight: 300; color: var(--dhc-roze-700); }
.woocommerce .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: left; }
.woocommerce .cart_totals ul#shipping_method li { margin: 0 0 .35rem; padding: 0; }
.woocommerce .cart_totals ul#shipping_method label { font-size: .9375rem; margin: 0; }
.woocommerce .cart_totals ul#shipping_method input[type="radio"] { accent-color: var(--dhc-wijn); margin-right: .4rem; }
.woocommerce .cart_totals .woocommerce-shipping-destination { font-size: .8125rem; color: var(--dhc-roze-700); text-align: left; margin-top: .4rem; }
.woocommerce .wc-proceed-to-checkout { padding: 1.25rem 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; width: 100%; text-align: center; font-size: 1rem; padding: 1rem; margin: 0; }

/* lege winkelwagen */
.woocommerce-cart .wc-empty-cart-message { text-align: center; padding-top: 1.5rem; }
.woocommerce-cart .cart-empty.woocommerce-info { background: none; border: 0; padding: 0; margin: 0; font-family: var(--dhc-display); font-size: var(--dhc-fs-lg); color: var(--dhc-inkt); }
.woocommerce-cart .cart-empty.woocommerce-info::before { display: none; }
.woocommerce-cart .return-to-shop { text-align: center; margin: 1.4rem 0 0; }
.woocommerce table.shop_table td.actions button[name="wcb2b_cart_empty"] { background: none; color: var(--dhc-roze-700); padding: 0; font-weight: 400; text-decoration: underline; text-underline-offset: .22em; }
.woocommerce table.shop_table td.actions button[name="wcb2b_cart_empty"]:hover { background: none; color: var(--dhc-wijn); }

/* ── Winkelwagen-drawer ────────────────────────────────────── */
.dhc-drawer__sluier { position: fixed; inset: 0; z-index: 90; background: rgba(0, 61, 82, .38); opacity: 0; transition: opacity .25s; }
.dhc-drawer__sluier--open { opacity: 1; }
.dhc-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; z-index: 91; width: min(440px, 100%);
	display: flex; flex-direction: column; background: var(--dhc-creme); box-shadow: -24px 0 60px -30px rgba(0, 61, 82, .5);
	transform: translateX(100%); transition: transform .26s var(--dhc-ease);
}
.dhc-drawer--open { transform: none; }
.admin-bar .dhc-drawer { top: 32px; }
@media (max-width: 782px) { .admin-bar .dhc-drawer { top: 46px; } }
.dhc-drawer-open { overflow: hidden; }
.dhc-drawer__hdr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--dhc-lijn); }
.dhc-drawer__hdr h2 { font-size: var(--dhc-fs-lg); outline: none; }
.dhc-drawer__sluit { font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--dhc-inkt); }
.dhc-drawer__inhoud { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem 1.6rem; transition: opacity .2s; }
.dhc-drawer--bezig .dhc-drawer__inhoud { opacity: .45; pointer-events: none; }
.dhc-drawer__leeg { text-align: center; padding-block: 2.5rem; display: grid; gap: 1.2rem; justify-items: center; }
.dhc-drawer__leeg p { font-family: var(--dhc-display); font-size: var(--dhc-fs-md); color: var(--dhc-inkt); }
.dhc-drawer__lijst { list-style: none; margin: 0; padding: 0; }
.dhc-drawer__regel, .dhc-drawer__xs { display: flex; align-items: center; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--dhc-lijn); }
.dhc-drawer__img { flex: none; width: 60px; border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-blauw-100); }
.dhc-drawer__img img { width: 60px; height: 60px; object-fit: cover; display: block; }
.dhc-drawer__tekst { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.dhc-drawer__naam { font-weight: 600; color: var(--dhc-inkt); text-decoration: none; }
.dhc-drawer__meta { font-size: .875rem; color: var(--dhc-roze-700); }
.dhc-drawer__meta .amount { color: var(--dhc-tekst); }
.dhc-drawer__sub { list-style: none; margin: .15rem 0 0; padding: 0; font-size: .8125rem; color: var(--dhc-roze-700); }
.dhc-drawer a.remove.dhc-drawer__weg { width: 28px; height: 28px; line-height: 25px; font-size: 1.25rem; font-weight: 300; color: var(--dhc-roze-700) !important; border: 1px solid var(--dhc-lijn); border-radius: 99px; text-align: center; text-decoration: none; flex: none; }
.dhc-drawer a.remove.dhc-drawer__weg:hover { background: var(--dhc-wijn); border-color: var(--dhc-wijn); color: var(--dhc-creme) !important; }
.dhc-drawer__totaal { display: flex; justify-content: space-between; align-items: baseline; padding-top: 1rem; font-weight: 500; color: var(--dhc-inkt); }
.dhc-drawer__totaal b { font-family: var(--dhc-display); font-weight: 400; font-size: 1.5rem; }
.dhc-drawer__noot { font-size: .8125rem; color: var(--dhc-roze-700); margin-top: .35rem; }
.dhc-drawer__acties { display: grid; gap: .6rem; margin-top: 1.2rem; }
.dhc-drawer__acties .dhc-btn { justify-content: center; padding-block: 1rem; }
.dhc-drawer__links { text-align: center; font-size: .875rem; color: var(--dhc-roze-700); margin-top: .3rem; }
.dhc-drawer__links a { color: var(--dhc-inkt); }
.dhc-drawer__verder { background: none; border: 0; padding: 0; font: inherit; color: var(--dhc-inkt); text-decoration: underline; text-underline-offset: .22em; cursor: pointer; }
.dhc-drawer__xsell { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--dhc-lijn); }
.dhc-drawer__xsell h3 { font-size: var(--dhc-fs-md); margin-bottom: .2rem; }
.dhc-drawer__xsell ul { list-style: none; margin: 0; padding: 0; }
.dhc-drawer__xs:last-child { border-bottom: 0; }
.dhc-drawer__xs .dhc-drawer__naam { font-size: .9375rem; }
@media (prefers-reduced-motion: reduce) { .dhc-drawer, .dhc-drawer__sluier { transition: none; } }

/* cadeau-flow (dhc-core): uitleg boven de verzendvelden */
.dhc-cadeau__uitleg { background: var(--dhc-roze-100); color: var(--dhc-roze-800); padding: .9rem 1rem; border-radius: var(--dhc-radius); margin: 0 0 1.2rem; font-size: .9375rem; }

/* proefpakket: aanbod links, bestelformulier van de bundel rechts */
.dhc-proefpakket__hero { margin-bottom: clamp(2rem, 4vw, 3rem); }
.dhc-proefpakket__aanbod .dhc-lead { margin-top: 1.2rem; }
.dhc-proefpakket__prijs { font-family: var(--dhc-display); font-size: var(--dhc-fs-2xl); color: var(--dhc-inkt); line-height: 1; margin-top: 1.4rem; }
.dhc-proefpakket__prijs del { opacity: .55; font-size: .6em; margin-right: .3rem; }
.dhc-proefpakket__prijs ins { text-decoration: none; }
.dhc-proefpakket__aanbod .dhc-klein { margin-top: .5rem; }
.dhc-proefpakket__koop { max-width: 860px; border: 1px solid var(--dhc-lijn); border-radius: var(--dhc-radius); padding: clamp(1.2rem, 2.5vw, 2rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.dhc-proefpakket__koop h2 { font-size: var(--dhc-fs-lg); margin-bottom: 1rem; }
.dhc-proefpakket__koop div.product { position: relative; }
.dhc-proefpakket__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.2rem; }
.dhc-proefpakket__kop h2 { margin: 0; }
.dhc-teller { font-size: .9375rem; color: var(--dhc-roze-700); }
.dhc-teller b { font-family: var(--dhc-display); font-weight: 400; font-size: 1.6rem; color: var(--dhc-inkt); margin-right: .15rem; }
.dhc-teller--klaar b { color: var(--dhc-blauw-600); }
.dhc-teller--teveel b { color: var(--dhc-merk); }
/* de tegels van Product Bundles (rasterindeling): foto, naam, voorraad, aantal */
.dhc-proefpakket__koop ul.bundled_products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.dhc-proefpakket__koop li.bundled_product { display: flex; flex-direction: column; border: 1px solid var(--dhc-lijn); border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-creme); }
.dhc-proefpakket__koop .bundled_product_images { width: 100% !important; float: none; margin: 0; background: var(--dhc-blauw-100); }
.dhc-proefpakket__koop .bundled_product_images figure { margin: 0; }
.dhc-proefpakket__koop .bundled_product_images img { width: 100%; height: auto; aspect-ratio: 1 / .9; object-fit: cover; display: block; }
.dhc-proefpakket__koop .details { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem .9rem; flex: 1; }
.dhc-proefpakket__koop .bundled_product_title { font-family: var(--dhc-body); font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--dhc-inkt); margin: 0; }
.dhc-proefpakket__koop .bundled_product_title .item_qty, .dhc-proefpakket__koop .bundled_product_title_link { display: none; }
.dhc-proefpakket__koop .bundled_product_excerpt { display: none; }
.dhc-proefpakket__koop .bundled_item_cart_details p.stock { margin: 0; font-size: .8125rem; }
.dhc-proefpakket__koop .bundled_item_cart_content { margin-top: auto; }
.dhc-proefpakket__koop .quantity.dhc-aantal { width: 100%; justify-content: space-between; }
.dhc-proefpakket__koop .quantity.dhc-aantal .qty { flex: 1; width: auto; }
.dhc-proefpakket__koop .bundle_wrap { margin-top: 1.4rem; }
.dhc-proefpakket__koop .bundle_error .woocommerce-info { background: var(--dhc-roze-100); border-top-color: var(--dhc-wijn); color: var(--dhc-roze-800); }
.dhc-proefpakket__koop .bundle_price { font-family: var(--dhc-display); font-size: 1.5rem; color: var(--dhc-inkt); }
.dhc-proefpakket .dhc-pagina__kop h1 { margin-top: .8rem; }
.woocommerce-page .dhc-proefpakket__koop form.cart { margin-block: 0; }

/* ── Zakelijk bestelscherm ─────────────────────────────────── */
.dhc-bestellen__intro { margin: -1rem 0 2rem; }
.dhc-bestel__tabel { width: 100%; border-collapse: collapse; }
.dhc-bestel__tabel th { font-family: var(--dhc-body); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dhc-roze-700); text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--dhc-lijn); }
.dhc-bestel__tabel td { padding: .9rem .6rem; border-bottom: 1px solid var(--dhc-lijn); vertical-align: middle; }
.dhc-bestel__tabel th:first-child, .dhc-bestel__tabel td:first-child { padding-left: 0; }
.dhc-bestel__tabel th:last-child, .dhc-bestel__tabel td:last-child { padding-right: 0; text-align: right; }
.dhc-bestel__reep { display: flex; align-items: center; gap: .9rem; }
.dhc-bestel__img { flex: none; width: 56px; border-radius: var(--dhc-radius); overflow: hidden; background: var(--dhc-blauw-100); }
.dhc-bestel__img img { width: 56px; height: 56px; object-fit: cover; display: block; }
.dhc-bestel__naam { font-weight: 600; color: var(--dhc-inkt); text-decoration: none; }
.dhc-bestel__meta { display: block; font-size: .8125rem; color: var(--dhc-roze-700); margin-top: .15rem; }
.dhc-bestel__prijs { white-space: nowrap; font-weight: 500; color: var(--dhc-inkt); }
.dhc-bestel__prijs .wcb2b-rrp, .dhc-bestel__prijs .price-suffix { font-weight: 300; font-size: .8125rem; color: var(--dhc-roze-700); }
.dhc-bestel__totaal { white-space: nowrap; font-weight: 500; color: var(--dhc-inkt); min-width: 6rem; }
.dhc-bestel__rij--uit .dhc-bestel__naam, .dhc-bestel__rij--uit .dhc-bestel__img { opacity: .55; }
.dhc-bestel__uit { font-size: .875rem; color: var(--dhc-roze-700); }
.dhc-bestel__balk { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; margin-top: 1.5rem; padding: .9rem 0; background: var(--dhc-creme); border-top: 1px solid var(--dhc-lijn); }
.dhc-bestel__som { text-align: right; line-height: 1.1; }
.dhc-bestel__som b { display: block; font-family: var(--dhc-display); font-weight: 400; font-size: 1.6rem; color: var(--dhc-inkt); }
.dhc-bestel__som small { font-size: .8125rem; color: var(--dhc-roze-700); }
.dhc-bestel__balk .dhc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* overige opties (displays, samples): uitklapbaar blok onder de repen, dicht bij het laden */
.dhc-bestel__overig { margin-top: 2.5rem; border-top: 1px solid var(--dhc-lijn); border-bottom: 1px solid var(--dhc-lijn); }
.dhc-bestel__overig summary { cursor: pointer; list-style: none; position: relative; padding: 1.1rem 2.6rem 1.1rem 0; font-family: var(--dhc-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--dhc-inkt); }
.dhc-bestel__overig summary::-webkit-details-marker { display: none; }
.dhc-bestel__overig summary small { display: block; font-family: var(--dhc-body); font-size: .8125rem; color: var(--dhc-roze-700); margin-top: .2rem; }
.dhc-bestel__overig summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 10px; height: 10px; border-right: 1.8px solid var(--dhc-accent); border-bottom: 1.8px solid var(--dhc-accent); translate: 0 -65%; rotate: 45deg; transition: rotate .25s var(--dhc-ease); }
.dhc-bestel__overig[open] summary::after { rotate: -135deg; }
.dhc-bestel__overig .dhc-bestel__tabel { margin-bottom: .6rem; }
.dhc-bestel__overig .dhc-bestel__tabel tr:last-child, .dhc-bestel__overig .dhc-bestel__tabel tr:last-child td { border-bottom: 0; }

/* account, uitgelogd: inloggen en registreren naast elkaar, in lijn met de kop */
.woocommerce-account #customer_login { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1.5rem, 4vw, 3rem); max-width: 960px; }
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after { display: none; }
.woocommerce-account #customer_login .col-1, .woocommerce-account #customer_login .col-2 { float: none; width: auto; max-width: none; }
.woocommerce-account #customer_login h2 { font-size: var(--dhc-fs-xl); margin-bottom: 1rem; }
.woocommerce-account form.woocommerce-form-login, .woocommerce-account form.woocommerce-form-register { border: 1px solid var(--dhc-lijn); border-radius: var(--dhc-radius); padding: 1.4rem 1.5rem; margin: 0; }
.woocommerce-account form.woocommerce-form-register p:not(.form-row) { font-size: .9375rem; color: var(--dhc-roze-700); }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .4rem; margin-left: 1rem; }
.woocommerce-account .lost_password { margin-top: 1rem; font-size: .9375rem; }
.woocommerce-account .lost_password a { color: var(--dhc-wijn); }

/* account */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: .7rem .9rem; border-radius: 2px; text-decoration: none; font-weight: 500; color: var(--dhc-inkt); }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: color-mix(in oklab, var(--dhc-blauw-100) 55%, transparent); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--dhc-blauw-100); }
.woocommerce-account .woocommerce-MyAccount-content { max-width: 68ch; }
.woocommerce-account .woocommerce-MyAccount-content p + p { margin-top: .9rem; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--dhc-wijn); }
@media (min-width: 769px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { float: none; width: 240px; }
	/* alleen ingelogd (met accountmenu); uitgelogd staan hier de inlog- en registratieformulieren */
	.woocommerce-account .dhc-winkel-inhoud > .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
	.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; grid-column: 2; }
	.woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
	/* WooCommerce zet een (meestal lege) meldingenwrapper vóór het menu; die mag geen rastercel innemen */
	.woocommerce-account .dhc-winkel-inhoud > .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
	.woocommerce-account .dhc-winkel-inhoud > .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }
}


/* ── Responsief ──────────────────────────────────────────── */

@media (max-width: 900px) {
	.dhc-hero__in, .dhc-verhaal, .dhc-proef { grid-template-columns: minmax(0, 1fr); }
	.dhc-proef:has(.dhc-proef__img--pakket) { grid-template-columns: minmax(0, 1fr); }
	.dhc-proef__img--pakket { order: -1; }
	.dhc-proef__img--pakket img { max-width: 520px; margin-inline: auto; }
	.dhc-hero__in { padding-top: 2rem; }
	/* Hetzelfde menu als op desktop, uitgeklapt onder de header. De header
	   is sticky en dus het bevattende blok voor deze absolute positie. */
	.dhc-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
		background: var(--dhc-creme); border-block: 1px solid var(--dhc-lijn);
		box-shadow: 0 18px 30px -24px rgba(0, 61, 82, .5);
	}
	.dhc-nav[data-open] { display: block; }
	.dhc-nav ul { flex-direction: column; gap: 0; max-width: var(--dhc-wrap); margin-inline: auto; padding: .5rem var(--dhc-gutter) 1.25rem; }
	.dhc-nav a { font-family: var(--dhc-display); font-size: 1.6rem; font-weight: 400; padding-block: .85rem; border-bottom: 1px solid var(--dhc-lijn); }
	.dhc-nav a::after { display: none; }
	.dhc-nav .dhc-btn--b2b { display: inline-flex; margin: .75rem var(--dhc-gutter) 1.25rem; padding: .7rem 1.2rem; font-size: 1rem; border-bottom: 1.5px solid var(--dhc-blauw-800); }
	.dhc-burger { display: grid; }
	/* de nav is hier verborgen en duwt dus niets meer: logo links, iconen rechts */
	.dhc-icons { margin-left: auto; }
	.dhc-trio a { aspect-ratio: 3 / 4.4; }
	.dhc-cijfers__rij { grid-template-columns: minmax(0, 1fr); }
	.dhc-ftr__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.dhc-ftr__merk, .dhc-ftr__brief { grid-column: 1 / -1; }
	/* productpagina onder elkaar; de koopbalk neemt het over van de knop */
	.dhc-winkel div.product { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
	.dhc-koopbalk:not([hidden]) { display: flex; }
	.dhc-koopbalk-open { padding-bottom: 78px; }
	/* winkelwagen: overzicht boven de cross-sells */
	.woocommerce .cart-collaterals { grid-template-columns: minmax(0, 1fr); }
	.woocommerce .cart-collaterals .cart_totals { order: -1; }
}

@media (max-width: 768px) {
	/* winkelwagen op een telefoon: WooCommerce stapelt de cellen met een label ervoor */
	.woocommerce table.shop_table_responsive tr td.product-remove { text-align: left; border-bottom: 0; padding-bottom: 0; }
	.woocommerce table.shop_table_responsive tr td.product-remove::before { display: none; }
	.woocommerce .cart_totals table.shop_table_responsive tr th { display: none; }
	.woocommerce .cart_totals table.shop_table_responsive tr td { display: block; text-align: right; padding: .8rem 0; }
	.woocommerce .cart_totals table.shop_table_responsive tr td::before { float: left; font-weight: 500; }
	/* de verzendregel bevat een lijst: label erboven, niet ernaast (specifieker dan de regel hierboven) */
	.woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td { text-align: left; }
	.woocommerce .cart_totals table.shop_table_responsive tr.woocommerce-shipping-totals td::before { display: block; float: none; margin-bottom: .4rem; }
}

@media (max-width: 600px) {
	.dhc-prose .wp-block-media-text { grid-template-columns: minmax(0, 1fr); }
	.dhc-prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
	.dhc-winkelbalk { flex-direction: column; align-items: stretch; }
	/* bestelscherm: prijs en totaal onder de naam, aantal ernaast */
	.dhc-bestel__tabel thead { display: none; }
	.dhc-bestel__tabel tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; padding: .9rem 0; border-bottom: 1px solid var(--dhc-lijn); }
	.dhc-bestel__tabel td { display: block; border: 0; padding: 0 !important; }
	.dhc-bestel__reep { grid-column: 1 / -1; }
	.dhc-bestel__aantal { grid-row: 2; grid-column: 2; }
	.dhc-bestel__prijs { grid-row: 2; grid-column: 1; align-self: center; }
	.dhc-bestel__totaal { grid-column: 1 / -1; text-align: right; min-width: 0; }
	.woocommerce .woocommerce-ordering select { width: 100%; }
	/* bundelregels onder elkaar: beeld links, tekst rechts, aantal eronder */
	.woocommerce div.product table.bundled_products thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.woocommerce div.product table.bundled_products, .woocommerce div.product table.bundled_products tbody { display: block; }
	.woocommerce div.product table.bundled_products tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .35rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--dhc-lijn); }
	/* min-width: 0, anders rekt de fotocel op tot de intrinsieke breedte van de thumbnail */
	.woocommerce div.product table.bundled_products td { display: block; border: 0; padding: 0 !important; width: auto; min-width: 0; }
	.woocommerce div.product .bundled_item_images_col { grid-row: 1 / 3; }
	.woocommerce div.product .bundled_item_qty_col { grid-column: 2; }
}

@media (max-width: 480px) {
	/* 120px logo + vier iconen + ruimte paste niet op 320px: de header liep over */
	.dhc-hdr__in { gap: .5rem; }
	.dhc-hdr__logo { min-width: 0; }
	.dhc-hdr__logo img { width: 92px; }
	.dhc-icons { gap: 0; margin-left: auto; }
	.dhc-ico { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.dhc-band__t { animation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}