/* ==========================================================================
   Van Ham Chocolaterie — opmaak
   Kleuren en lettertypes komen uit de bestaande huisstijl. Het goud #bf8a40 is
   de meest gebruikte kleur in de stylesheet van de huidige site (56 keer);
   Cormorant en Montserrat staan daar ook al. Het turquoise komt uit de eigen
   bannerafbeelding van de klant (module_banner/Banner Relatiegeschenken 3.jpg)
   en is dus ook huisstijl, geen vondst van het concept.
   ========================================================================== */

:root {
	/* #bf8a40 is de huisstijlkleur van de klant (56 keer in zijn eigen
	   stylesheet). Als vlak, rand of icoon blijft hij; als ondergrond voor witte
	   tekst haalt hij maar 3,03:1 waar WCAG AA 4,5:1 vraagt. Daarom een tweede,
	   donkerder goud voor alles waar tekst overheen gaat. Zelfde familie,
	   wel leesbaar. Gemeten waarden staan erachter. */
	--goud:         #bf8a40;  /* decoratief: randen, iconen, accenten */
	--goud-knop:    #94682b;  /* wit erop: 4,91:1 */
	--goud-donker:  #7d5722;  /* zweefstand, wit erop: 6,44:1 */
	--goud-tekst:   #845c25;  /* op room 5,51:1, op roomdiep 4,94:1 */
	--goud-licht:   #e8d5b5;
	/* Gemeten uit de eigen bannerafbeelding van de klant, niet gegokt: de
	   gloed loopt van #a5d6db in het midden naar #4fb8bc aan de randen. */
	--turquoise:      #6cc0c5;
	--turquoise-hart: #a5d6db;
	--turquoise-rand: #4fb2b7;
	--inkt:         #241c15;
	--inkt-zacht:   #5b5048;
	--room:         #faf6f0;
	--room-diep:    #f2e9dd;
	--wit:          #ffffff;
	--lijn:         #e6dccd;
	--groen:        #2f7d4f;
	--rood:         #b3341f;

	--kop: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
	--tekst: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--sier: 'Norican', 'Cormorant Garamond', cursive;

	--breedte: 1180px;
	--radius: 10px;
	--schaduw: 0 2px 10px rgba(36, 28, 21, .06);
	--schaduw-op: 0 10px 28px rgba(36, 28, 21, .13);
}

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

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

body {
	margin: 0;
	background: var(--room);
	color: var(--inkt);
	font-family: var(--tekst);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--goud-tekst); text-decoration: none; }
a:hover { color: var(--inkt); }

h1, h2, h3, h4 {
	font-family: var(--kop);
	font-weight: 600;
	line-height: 1.15;
	color: var(--inkt);
	margin: 0 0 .5em;
	letter-spacing: -.005em;
}
/* De verhouding tussen h1 en h2 was 1,08 (43,2 tegen 40 px): daarmee heeft een
   pagina geen rangorde meer en leest alles als even belangrijk. Nu 1,5. */
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1em; }

/* Alleen zichtbaar voor schermlezers — en voor wie met tab navigeert. */
.vh-alleen-lezers {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vh-overslaan {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--inkt); color: var(--wit); padding: .8rem 1.2rem;
}
.vh-overslaan:focus { left: .5rem; top: .5rem; color: var(--wit); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--goud);
	outline-offset: 2px;
	border-radius: 3px;
}

.vh-breed { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }

/* --- Bovenschrift boven een kop: klein, goud, gespatieerd ------------------ */
.vh-bovenschrift {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--goud-tekst);
	margin: 0 0 .5rem;
}

/* --- Knoppen -------------------------------------------------------------- */
.vh-knop,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--goud-knop);
	color: var(--wit);
	font-family: var(--tekst);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.2;
	padding: .85rem 1.6rem;
	border: 1px solid var(--goud-knop);
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	text-align: center;
}
.vh-knop:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--goud-donker);
	border-color: var(--goud-donker);
	color: var(--wit);
}
.vh-knop--rand,
.woocommerce a.button.vh-knop--rand {
	background: transparent;
	color: var(--inkt);
	border-color: var(--goud);
}
.vh-knop--rand:hover,
.woocommerce a.button.vh-knop--rand:hover {
	background: var(--goud);
	color: var(--wit);
}
.vh-knop--wit { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.vh-knop--wit:hover { background: var(--room-diep); border-color: var(--room-diep); color: var(--inkt); }

.vh-tekstlink {
	display: inline-flex; align-items: center; gap: .4rem;
	font-size: .82rem; font-weight: 600; color: var(--goud-tekst);
}
.vh-tekstlink::after { content: "\2192"; transition: transform .15s ease; }
.vh-tekstlink:hover::after { transform: translateX(3px); }

/* --- Meldingsbalk: dit is een concept ------------------------------------- */
/* De melding moet blijven staan — de prijzen liggen niet vast — maar hij hoeft
   niet drie regels van een telefoonscherm te vullen. Op 390 px kostte hij 110 px
   van 844 px, op elke pagina. Nu een voetnoot in plaats van een waarschuwingsbord. */
.vh-conceptbalk {
	background: var(--inkt);
	color: #f3e9da;
	font-size: .72rem;
	line-height: 1.4;
	text-align: center;
	padding: .35rem 1rem;
}
.vh-conceptbalk strong { color: var(--goud-licht); font-weight: 600; }
.vh-conceptbalk a { color: var(--goud-licht); text-decoration: underline; }

/* --- Kop ------------------------------------------------------------------ */
.vh-kop { background: var(--wit); border-bottom: 1px solid var(--lijn); position: relative; z-index: 40; }
.vh-kop__balk {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	padding: .9rem 0;
}
.vh-kop__links { display: flex; align-items: center; gap: .4rem; }
/* De hamburger hoort alleen op smalle schermen. Op desktop staat het hele menu
   er al onder; twee ingangen naar dezelfde links is er een te veel.
   .vh-kop ervoor is nodig: .vh-icoonknop staat verderop in dit bestand en zet
   display terug op inline-flex. Bij gelijke specificiteit wint de laatste regel,
   en dan blijft de knop staan. */
.vh-kop [data-menuknop] { display: none; }
.vh-kop__rechts { display: flex; align-items: center; justify-content: flex-end; gap: .15rem; }
.vh-logo { display: inline-flex; justify-content: center; }
.vh-logo img, .vh-logo svg { height: 52px; width: auto; }
.vh-logo__tekst {
	font-family: var(--kop); font-size: 1.35rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--inkt); line-height: 1.1; text-align: center;
}
.vh-logo__tekst span { display: block; font-size: .62rem; letter-spacing: .3em; color: var(--goud); }

.vh-icoonknop {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px; border: 0; background: transparent;
	color: var(--inkt); cursor: pointer; border-radius: 6px; position: relative;
}
.vh-icoonknop:hover { background: var(--room-diep); color: var(--inkt); }
.vh-icoonknop svg { width: 21px; height: 21px; }
.vh-teller {
	position: absolute; top: 4px; right: 3px;
	min-width: 17px; height: 17px; padding: 0 4px;
	/* wit op #bf8a40 haalt 3,03:1; op --goud-knop 4,91:1 */
	background: var(--goud-knop); color: var(--wit);
	font-size: .62rem; font-weight: 700; line-height: 17px;
	text-align: center; border-radius: 9px;
}

/* --- Hoofdmenu ------------------------------------------------------------ */
.vh-menu { border-top: 1px solid var(--lijn); background: var(--wit); }
.vh-menu ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; }
.vh-menu li { position: relative; }
.vh-menu a {
	display: block; padding: .85rem 1.15rem;
	font-size: .8rem; font-weight: 500; letter-spacing: .04em;
	color: var(--inkt);
}
.vh-menu a:hover, .vh-menu .current-menu-item > a { color: var(--goud-donker); }
.vh-menu .sub-menu {
	display: none; position: absolute; top: 100%; left: 0; min-width: 210px;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	box-shadow: var(--schaduw-op); padding: .4rem 0; flex-direction: column; z-index: 50;
}
.vh-menu li:hover > .sub-menu, .vh-menu li:focus-within > .sub-menu { display: flex; }
.vh-menu .sub-menu a { padding: .55rem 1.1rem; font-size: .8rem; }

/* Mobiel menu */
.vh-mobielmenu {
	display: none; border-top: 1px solid var(--lijn); background: var(--wit);
	padding: .5rem 0 1rem;
}
.vh-mobielmenu.is-open { display: block; }
.vh-mobielmenu ul { list-style: none; margin: 0; padding: 0; }
.vh-mobielmenu .sub-menu { padding-left: 1rem; }
.vh-mobielmenu a {
	display: block; padding: .6rem 1.25rem; color: var(--inkt);
	font-size: .9rem; border-bottom: 1px solid var(--room-diep);
}

/* --- Hero ----------------------------------------------------------------- */
.vh-hero {
	background: var(--turquoise-rand);
	background: radial-gradient(ellipse 70% 90% at 50% 45%,
		var(--turquoise-hart) 0%, var(--turquoise) 46%, var(--turquoise-rand) 100%);
	position: relative;
	overflow: hidden;
}
.vh-hero__binnen {
	display: grid;
	grid-template-columns: 1fr minmax(0, 1.25fr) 1fr;
	align-items: center;
	gap: 1rem;
	min-height: 340px;
	padding: 2rem 0;
}
/* De koptekst is hier donkerbruin en niet wit, en dat is geen smaakkwestie.
   Wit op dit turquoise haalt 2,50:1 op het lichtste punt van het verloop, terwijl
   WCAG 3:1 vraagt voor grote tekst en 4,5:1 voor de regel eronder. Wit kán hier
   dus niet, tenzij de kleur van de klant verdwijnt.
   De klant lost het in zijn eigen banner al zo op: daar staat
   "DIRECT NAAR ONZE CHOCOLADE GESCHENKEN" in donkerbruin (#342c17 gemeten).
   Diezelfde inkt is nu voor allebei gebruikt: 10,58:1 op het lichtste punt,
   6,74:1 op het donkerste. De turquoise van de klant blijft ongewijzigd. */
.vh-hero__midden { text-align: center; color: var(--inkt); padding: 1rem .5rem; }
.vh-hero__midden h1 {
	color: var(--inkt);
	font-style: italic;
	/* Was 500 en daarmee lichter dan de h2's eronder — de belangrijkste zin op de
	   site woog het minst. */
	font-weight: 600;
	font-size: clamp(2.1rem, 4.6vw, 3.4rem);
	margin-bottom: 1rem;
	text-wrap: balance;
}
.vh-hero__onder {
	font-size: .74rem; font-weight: 700; letter-spacing: .13em;
	text-transform: uppercase; margin-bottom: 1.2rem; color: var(--inkt);
}
/* De twee herobeelden zijn uitsneden uit de banner van de klant, met de turquoise
   eruit gesleuteld zodat het verloop erdoorheen valt. Ze zijn 418 en 411 px breed;
   groter tonen maakt ze wazig, dus daar ligt de grens. */
.vh-hero__beeld { display: flex; align-items: center; }
.vh-hero__beeld img { width: 100%; max-width: 415px; height: auto; }
.vh-hero__beeld--links { justify-content: flex-end; }
.vh-hero__beeld--rechts { justify-content: flex-start; }
.vh-hero__beeld--links img { border-radius: 0 var(--radius) var(--radius) 0; }
.vh-hero__beeld--rechts img { border-radius: var(--radius) 0 0 var(--radius); }

/* --- USP-balk ------------------------------------------------------------- */
.vh-usp { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.vh-usp__lijst {
	display: grid; grid-template-columns: repeat(4, 1fr);
	list-style: none; margin: 0; padding: 0;
}
.vh-usp__lijst li {
	display: flex; align-items: center; gap: .6rem;
	padding: .95rem 1rem;
	font-size: .76rem; font-weight: 500; color: var(--inkt-zacht);
	border-left: 1px solid var(--lijn);
}
.vh-usp__lijst li:first-child { border-left: 0; }
.vh-usp__lijst svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--goud-tekst); }

/* --- Secties -------------------------------------------------------------- */
.vh-sectie { padding: 3.2rem 0; }
.vh-sectie--room { background: var(--room-diep); }
.vh-sectie--wit { background: var(--wit); }
.vh-sectie__kop { margin-bottom: 1.6rem; }
.vh-sectie__kop h2 { margin: 0; }

/* --- Categoriekaarten ----------------------------------------------------- */
.vh-raster { display: grid; gap: 1.1rem; }
.vh-raster--4 { grid-template-columns: repeat(4, 1fr); }
.vh-raster--5 { grid-template-columns: repeat(5, 1fr); }

.vh-kaart {
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease;
}
.vh-kaart:hover { box-shadow: var(--schaduw-op); transform: translateY(-2px); }
.vh-kaart__beeld { aspect-ratio: 3 / 2; background: var(--wit); overflow: hidden; }
.vh-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vh-kaart__tekst { padding: .85rem 1rem 1rem; }
.vh-kaart__tekst h3 { font-family: var(--tekst); font-size: .92rem; font-weight: 600; margin: 0 0 .3rem; }

/* --- Productkaarten ------------------------------------------------------- */
.vh-product {
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column; height: 100%;
}
/* 3:2 en niet 1:1. Alle productfoto's van de klant zijn 3:2; in een vierkant
   vak gooide object-fit:cover een derde van de breedte weg — bij de kokers viel
   het deksel eraf. Nu wordt er niets meer weggesneden. */
.vh-product__beeld { aspect-ratio: 3 / 2; background: var(--wit); overflow: hidden; }
.vh-product__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vh-product__tekst { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; gap: .3rem; }
.vh-product__naam { font-family: var(--tekst); font-size: .88rem; font-weight: 600; margin: 0; line-height: 1.35; }
.vh-product__naam a { color: var(--inkt); }
.vh-product__prijs { font-size: 1rem; font-weight: 700; color: var(--inkt); }
.vh-product__prijs del { color: var(--inkt-zacht); font-weight: 400; margin-right: .35rem; }
.vh-voorraad { font-size: .72rem; font-weight: 600; color: var(--groen); }
.vh-voorraad--nee { color: var(--rood); }

/* De knop kon niet krimpen (min-width:auto is de standaard voor een flex-item)
   en stak daardoor 9,7 px door de kaartrand. Nu krijgt hij een eigen regel. */
.vh-product__acties { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .7rem; }

/* Aantalkiezer: min, getal, plus */
.vh-aantal {
	display: inline-flex; align-items: center;
	border: 1px solid var(--lijn); border-radius: 6px; overflow: hidden;
	background: var(--wit); flex: 0 0 auto;
}
.vh-aantal button {
	width: 30px; height: 38px; border: 0; background: transparent;
	font-size: 1rem; line-height: 1; color: var(--inkt); cursor: pointer;
}
.vh-aantal button:hover { background: var(--room-diep); }
.vh-aantal input {
	width: 34px; height: 38px; border: 0; text-align: center;
	font-family: var(--tekst); font-size: .85rem; font-weight: 600;
	background: transparent; color: var(--inkt); -moz-appearance: textfield;
}
.vh-aantal input::-webkit-outer-spin-button,
.vh-aantal input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vh-product__acties .vh-knop { flex: 1 1 100%; min-width: 0; padding: .7rem .6rem; font-size: .78rem; }

/* --- Bevestiging na toevoegen aan de winkelwagen -------------------------- */
.vh-melding {
	display: none;
	align-items: center; gap: .6rem;
	background: var(--goud-knop); color: var(--wit);
	border-radius: 6px; padding: .6rem .9rem;
	font-size: .78rem; font-weight: 600;
	box-shadow: var(--schaduw-op);
}
.vh-melding.is-zichtbaar { display: flex; }
.vh-melding__sluit { margin-left: auto; background: transparent; border: 0; color: var(--wit); cursor: pointer; font-size: 1rem; line-height: 1; }

/* --- Personalisatieblok --------------------------------------------------- */
.vh-persoonlijk { background: var(--room-diep); }
.vh-persoonlijk__binnen {
	display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: center;
	padding: 3.2rem 0;
}
.vh-stappen { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.vh-stappen li { display: flex; align-items: flex-start; gap: .6rem; font-size: .87rem; }
.vh-stappen svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--goud-tekst); margin-top: .18rem; }

.vh-kaartje {
	background: var(--wit); border: 1px solid var(--lijn);
	border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--schaduw);
}
.vh-kaartje__kop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.vh-kaartje__kop span { font-size: .84rem; font-weight: 600; }
.vh-kaartje textarea {
	width: 100%; min-height: 96px; resize: vertical;
	border: 1px solid var(--lijn); border-radius: 6px; padding: .6rem .7rem;
	font-family: var(--tekst); font-size: .82rem; color: var(--inkt); background: var(--room);
}
.vh-kaartje__hulp { font-size: .72rem; color: var(--inkt-zacht); margin: .45rem 0 0; }

/* Schuifje aan/uit */
.vh-schuif { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 42px; }
.vh-schuif input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vh-schuif__spoor {
	position: absolute; inset: 0; background: var(--lijn); border-radius: 12px;
	transition: background .15s ease; pointer-events: none;
}
.vh-schuif__spoor::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
	background: var(--wit); border-radius: 50%; transition: transform .15s ease;
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.vh-schuif input:checked + .vh-schuif__spoor { background: var(--goud); }
.vh-schuif input:checked + .vh-schuif__spoor::after { transform: translateX(18px); }
.vh-schuif input:focus-visible + .vh-schuif__spoor { outline: 3px solid var(--goud); outline-offset: 2px; }

/* --- Atelier- en zakelijk blok -------------------------------------------- */
.vh-tweeluik { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: center; }
.vh-tweeluik--om { grid-template-columns: 1.2fr 1fr; }
.vh-tweeluik img { border-radius: var(--radius); width: 100%; }
.vh-tweeluik__tekst p { color: var(--inkt-zacht); font-size: .9rem; }
.vh-adres { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--inkt-zacht); margin-top: 1rem; }
.vh-adres svg { width: 16px; height: 16px; color: var(--goud-tekst); flex: 0 0 16px; }
.vh-knoprij { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }

/* --- Bestelstappen -------------------------------------------------------- */
.vh-bestelbalk { background: var(--wit); border-top: 1px solid var(--lijn); padding: 2.2rem 0; }
.vh-bestelbalk h2 { text-align: center; font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 1.4rem; }
.vh-bestelstappen {
	display: grid; grid-template-columns: repeat(4, 1fr);
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden;
}
.vh-bestelstappen li {
	display: flex; align-items: center; gap: .65rem;
	padding: 1rem 1.1rem; font-size: .8rem; border-left: 1px solid var(--lijn);
}
.vh-bestelstappen li:first-child { border-left: 0; }
.vh-bestelstappen b {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; flex: 0 0 26px;
	border: 1px solid var(--goud-tekst); color: var(--goud-tekst);
	border-radius: 50%; font-size: .78rem; font-weight: 700;
}

/* --- Voet ----------------------------------------------------------------- */
.vh-voet { background: var(--inkt); color: #cfc4b6; padding: 3rem 0 1.5rem; font-size: .82rem; }
.vh-voet h3 { color: var(--wit); font-family: var(--tekst); font-size: .78rem; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8rem; }
.vh-voet a { color: #cfc4b6; }
.vh-voet a:hover { color: var(--goud-licht); }
.vh-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.vh-voet__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.vh-voet__onder {
	margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.13);
	display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
	font-size: .74rem; color: #9d9187;
}
.vh-voet__tijden { display: grid; grid-template-columns: auto auto; gap: .2rem .9rem; font-size: .78rem; }

/* --- WooCommerce: winkel, product, wagen, afrekenen ----------------------- */
/* De standaardmelding van WooCommerce is felgroen met een vinkje dat over de
   eerste letter van de tekst valt ("loemetjes is toegevoegd"). Dat is het eerste
   wat een bezoeker ziet na zijn eerste klik. */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--wit);
	border: 1px solid var(--lijn);
	border-left: 3px solid var(--goud-knop);
	border-radius: var(--radius); box-shadow: var(--schaduw);
	color: var(--inkt);
	padding: 1rem 1.2rem; margin: 0 0 1.4rem; list-style: none; font-size: .86rem;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-error { border-left-color: var(--rood); }

.vh-paginakop { background: var(--wit); border-bottom: 1px solid var(--lijn); padding: 2rem 0 1.6rem; }
.vh-paginakop h1 { margin: 0; }
.vh-paginakop p { color: var(--inkt-zacht); margin: .4rem 0 0; max-width: 60ch; font-size: .9rem; }
.vh-kruimels { font-size: .74rem; color: var(--inkt-zacht); margin-bottom: .5rem; }
.vh-kruimels a { color: var(--inkt-zacht); }
.vh-kruimels a:hover { color: var(--goud-donker); }

.woocommerce ul.products {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
	margin: 0; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto; margin: 0; float: none; }

.vh-winkel { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; padding: 2.4rem 0 3.2rem; }
.vh-filters { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.1rem; position: sticky; top: 1rem; }
.vh-filters h2 { font-family: var(--tekst); font-size: .74rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--goud-tekst); margin: 0 0 .6rem; }
.vh-filters ul { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .3rem; }
.vh-filters a { font-size: .84rem; color: var(--inkt); }
.vh-filters a:hover, .vh-filters .is-actief a { color: var(--goud-donker); font-weight: 600; }

.vh-winkelbalk { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.vh-winkelbalk__aantal { font-size: .8rem; color: var(--inkt-zacht); }
.woocommerce .woocommerce-ordering select {
	font-family: var(--tekst); font-size: .82rem; padding: .5rem .7rem;
	border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); color: var(--inkt);
}

/* Productpagina */
.vh-productpagina { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 2.4rem 0 3rem; align-items: start; }
.vh-galerij__groot { border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden; background: var(--wit); }
.vh-galerij__groot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vh-galerij__klein { display: flex; gap: .55rem; margin-top: .55rem; flex-wrap: wrap; }
.vh-galerij__klein button {
	width: 76px; padding: 0; border: 1px solid var(--lijn); border-radius: 6px;
	overflow: hidden; background: var(--wit); cursor: pointer;
}
.vh-galerij__klein button[aria-current="true"] { border-color: var(--goud); }
.vh-galerij__klein img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

.vh-productinfo h1 { margin-bottom: .3rem; }
.vh-productinfo .vh-prijs { font-size: 1.55rem; font-weight: 700; margin: .2rem 0 .1rem; }
.vh-productinfo__omschrijving { color: var(--inkt-zacht); font-size: .9rem; margin: 1rem 0; }
.vh-toevoegrij { display: flex; gap: .7rem; align-items: stretch; margin: 1.2rem 0; flex-wrap: wrap; }
.vh-toevoegrij .vh-knop { flex: 1; min-width: 200px; }
.vh-kenmerken { list-style: none; margin: 1.2rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--lijn); display: grid; gap: .45rem; }
.vh-kenmerken li { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--inkt-zacht); }
.vh-kenmerken svg { width: 16px; height: 16px; color: var(--goud-tekst); flex: 0 0 16px; }

/* Wagen en afrekenen */
.woocommerce table.shop_table {
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: .86rem;
}
.woocommerce table.shop_table th { font-family: var(--tekst); font-size: .74rem; letter-spacing: .08em;
	text-transform: uppercase; color: var(--inkt-zacht); font-weight: 700; }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--lijn); }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3 { font-size: 1.25rem; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	font-family: var(--tekst); font-size: .86rem; padding: .65rem .75rem; height: auto;
	border: 1px solid var(--lijn); border-radius: 6px; background: var(--wit); color: var(--inkt);
}
.woocommerce form .form-row label { font-size: .78rem; font-weight: 600; }
.woocommerce-checkout #payment { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--lijn); }
.woocommerce-checkout #payment div.payment_box { background: var(--room-diep); font-size: .82rem; }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--room-diep); }

.vh-inhoud { padding: 2.4rem 0 3.2rem; }
.vh-inhoud--smal { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.vh-inhoud h2 { margin-top: 1.8rem; }
.vh-inhoud ul, .vh-inhoud ol { padding-left: 1.2rem; }
.vh-inhoud li { margin-bottom: .35rem; }

/* Levervoorwaarden die de klant zelf noemt, in beeld waar ze ertoe doen. */
.vh-let-op {
	background: var(--wit); border: 1px solid var(--goud-licht); border-left: 3px solid var(--goud);
	border-radius: 6px; padding: .9rem 1.1rem; margin: 1.2rem 0; font-size: .82rem;
}
.vh-let-op strong { display: block; margin-bottom: .25rem; }
.vh-let-op ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* --- Meebewegen ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.vh-raster--4 { grid-template-columns: repeat(2, 1fr); }
	.vh-raster--5 { grid-template-columns: repeat(3, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
	.vh-winkel { grid-template-columns: 1fr; }
	.vh-filters { position: static; }
	.vh-usp__lijst { grid-template-columns: repeat(2, 1fr); }
	.vh-usp__lijst li:nth-child(3) { border-left: 0; }
	.vh-usp__lijst li { border-top: 1px solid var(--lijn); }
	.vh-usp__lijst li:nth-child(-n+2) { border-top: 0; }
	.vh-voet__raster { grid-template-columns: repeat(2, 1fr); }
	.vh-bestelstappen { grid-template-columns: repeat(2, 1fr); }
	.vh-bestelstappen li:nth-child(3) { border-left: 0; }
	.vh-bestelstappen li:nth-child(n+3) { border-top: 1px solid var(--lijn); }
}

@media (max-width: 860px) {
	.vh-menu { display: none; }
	.vh-kop [data-menuknop] { display: inline-flex; }
	.vh-hero__binnen { grid-template-columns: 1fr; min-height: 0; }
	/* Op 768 px werd de hero 1140 px hoog: twee losse uitsneden onder elkaar, de
	   bonbondoos afgesneden door de rechterrand, en pas na 1150 px scrollen iets
	   anders dan de kop. Eén beeld onder de kop is genoeg. */
	.vh-hero__beeld--links { order: 2; max-width: 300px; margin-inline: auto; }
	.vh-hero__beeld--rechts { display: none; }
	.vh-hero__midden { order: 1; }
	.vh-hero__beeld--links img, .vh-hero__beeld--rechts img { border-radius: var(--radius); }
	.vh-persoonlijk__binnen, .vh-tweeluik, .vh-tweeluik--om { grid-template-columns: 1fr; gap: 1.6rem; }
	.vh-productpagina { grid-template-columns: 1fr; gap: 1.6rem; }
	.vh-kop__balk { padding: .7rem 0; }
	.vh-logo img, .vh-logo svg { height: 38px; }
}

@media (max-width: 620px) {
	.vh-raster--4, .vh-raster--5 { grid-template-columns: repeat(2, 1fr); }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.vh-sectie { padding: 2.2rem 0; }
	.vh-voet__raster { grid-template-columns: 1fr; }
	.vh-product__acties { flex-wrap: wrap; }
	.vh-product__acties .vh-knop { min-width: 100%; }
	.vh-bestelstappen { grid-template-columns: 1fr; }
	.vh-bestelstappen li { border-left: 0; border-top: 1px solid var(--lijn); }
	.vh-bestelstappen li:first-child { border-top: 0; }
	.vh-usp__lijst { grid-template-columns: 1fr; }
	.vh-usp__lijst li { border-left: 0; border-top: 1px solid var(--lijn); }
	.vh-usp__lijst li:first-child { border-top: 0; }
}

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

/* --- Ingredienten en allergenen ------------------------------------------ */
.vh-declaratie {
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	padding: 1.4rem 1.6rem; margin: 0 0 3rem;
}
.vh-declaratie h2 { font-size: 1.25rem; margin-bottom: .7rem; }
.vh-allergenen {
	background: var(--room-diep); border-left: 3px solid var(--goud-tekst);
	border-radius: 6px; padding: .7rem .9rem; font-size: .86rem; margin: 0 0 .9rem;
}
.vh-allergenen strong { color: var(--inkt); }
.vh-uitklap summary {
	cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--goud-tekst);
	padding: .35rem 0; list-style-position: outside;
}
.vh-uitklap summary:hover { color: var(--inkt); }
.vh-ingredienten {
	font-size: .78rem; line-height: 1.7; color: var(--inkt-zacht);
	margin: .5rem 0 0; word-break: break-word;
}
.vh-declaratie__nota {
	font-size: .76rem; color: var(--inkt-zacht); margin: .9rem 0 0;
	padding-top: .8rem; border-top: 1px solid var(--lijn);
}

/* --- Conceptbalk blijft in beeld ----------------------------------------- */
/* Hij stond bovenaan een pagina van 4200 px, terwijl de eerste prijs pas rond
   2100 px verschijnt. Wie doorscrolt zag de melding dus nooit bij een bedrag.
   Nu blijft hij plakken. */
.vh-conceptbalk { position: sticky; top: 0; z-index: 60; }
/* Als de melding meeloopt, moet de kop dat ook — anders scrolt de winkelwagen
   uit beeld terwijl de disclaimer blijft hangen, en dat leest als zeuren. */
.vh-kop { position: sticky; top: 26px; z-index: 55; }
@media (max-width: 620px) { .vh-kop { position: static; } }

/* --- Zoekformulier -------------------------------------------------------- */
.vh-zoekform { display: flex; gap: .5rem; margin: 0; }
.vh-zoekform input[type="search"] {
	flex: 1; min-width: 0;
	font-family: var(--tekst); font-size: .88rem;
	padding: .7rem .8rem; color: var(--inkt); background: var(--wit);
	border: 1px solid var(--lijn); border-radius: 6px;
}
.vh-zoekform .vh-knop { flex: 0 0 auto; }
.vh-mobielmenu__zoek { padding: .9rem 1.25rem 0; }

/* --- Waar de stijlen van WooCommerce mijn eigen kaarten overrulen ---------
   Sinds de WooCommerce-stylesheets weer meelopen (zie functions.php) winnen een
   paar van hun regels op specificiteit. Dat is de prijs voor alles wat ze wél
   goed doen. Hieronder staat wat er terug moet, met genoeg gewicht om te winnen.
   Elke regel hier is een gemeten botsing, geen voorzorg. */

/* Hun `li.product a img{height:auto;margin:0 0 1em}` (0,3,4) versloeg mijn
   `.vh-product__beeld img` (0,1,1). Gevolg: de productfoto vulde zijn vierkant
   niet meer en er stond een strook room onder elke kaart. */
.woocommerce ul.products li.product a.vh-product__beeld img,
ul.products li.vh-product a.vh-product__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* Zelfde verhaal voor de categorie- en momentkaarten op de homepage. */
.vh-kaart .vh-kaart__beeld img,
.woocommerce .vh-kaart .vh-kaart__beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

/* WooCommerce geeft li.product een eigen breedte en float voor zijn eigen
   rasters; dit thema gebruikt grid. */
.woocommerce ul.products li.product.vh-product {
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	clear: none;
}

/* --- Winkelpagina: iets ruimere zijbalk en drie kolommen ------------------
   Vier kolommen naast een zijbalk gaf kaarten van ~200 px. Drie kolommen geeft
   de foto's en de knop de ruimte die ze nodig hebben. */
.vh-winkel { grid-template-columns: 250px 1fr; }
.vh-winkel .woocommerce ul.products,
.vh-winkel ul.products { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1120px) {
	.vh-winkel .woocommerce ul.products,
	.vh-winkel ul.products { grid-template-columns: repeat(2, 1fr); }
}

/* --- Zijbalk: korte verwijzing in plaats van de hele lijst ---------------- */
.vh-filters .vh-let-op { padding: .8rem .9rem; font-size: .78rem; }
.vh-filters .vh-let-op ul { padding-left: 1rem; }


/* --- Winkelwagen ----------------------------------------------------------
   Onbewerkte WooCommerce: op 1440 stond de tabel in een kolom van 760 px met de
   totalen ver naar rechts en een gat van 400 bij 400 px ertussen, met een
   productminiatuur van 32 px. Dit is de winkelwagen van een chocolatier; de
   foto van wat je koopt mag je zien. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 2rem;
	align-items: start;
}
.woocommerce-cart .cart-collaterals { width: auto; float: none; }
.woocommerce-cart .cart-collaterals .cart_totals { width: auto; float: none; }
.woocommerce-cart table.cart img {
	width: 72px; height: 72px; object-fit: cover; border-radius: 6px;
}
/* Een uitgegrijsde gouden knop leest als kapot in plaats van als "nog niets
   gewijzigd". */
.woocommerce button[disabled], .woocommerce input[disabled] {
	background: var(--room-diep);
	border-color: var(--lijn);
	color: var(--inkt-zacht);
	opacity: 1;
	cursor: default;
}
@media (max-width: 900px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
}

/* --- "Past hier ook bij": twee kaarten in een raster van vier is een half
   lege rij. Het raster volgt nu het aantal. --------------------------------- */
.vh-verwant { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* --- Het schuifje in de uit-stand -----------------------------------------
   Een witte knop op een bijna-witte baan leest als uitgeschakeld in plaats van
   als uit. Als bedieningselement moet hij 3:1 halen tegen zijn omgeving. */
.vh-schuif__spoor {
	background: var(--lijn);
	border: 1px solid var(--inkt-zacht);
}
.vh-schuif input:checked + .vh-schuif__spoor { border-color: var(--goud-knop); }

/* --- Mobiel menu: rangorde en minder scrollen ----------------------------- */
.vh-mobielmenu > .vh-breed > nav > ul > li > a {
	font-weight: 600;
	color: var(--goud-tekst);
}
.vh-mobielmenu a { padding: .5rem 1.25rem; }
.vh-mobielmenu .sub-menu a { font-size: .85rem; color: var(--inkt); font-weight: 400; }

/* --- De sorteerkeuze was het enige onbewerkte browserelement op de pagina --- */
.woocommerce .woocommerce-ordering select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.1rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23241c15' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
}

/* --- Formulieren van het thema zelf --------------------------------------- */
.vh-formulier { margin: 1.6rem 0 0; }
.vh-formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.vh-formulier p { margin: 0 0 1rem; }
.vh-formulier label {
	display: block; font-size: .78rem; font-weight: 600;
	color: var(--inkt); margin-bottom: .3rem;
}
.vh-formulier input[type="text"],
.vh-formulier input[type="email"],
.vh-formulier input[type="tel"],
.vh-formulier textarea {
	width: 100%;
	font-family: var(--tekst); font-size: .88rem;
	padding: .7rem .8rem; color: var(--inkt); background: var(--wit);
	border: 1px solid var(--lijn); border-radius: 6px;
}
.vh-formulier textarea { resize: vertical; min-height: 110px; }
.vh-formulier__nota { font-size: .76rem; color: var(--inkt-zacht); }
/* Valstrik tegen geautomatiseerde inzendingen: onzichtbaar voor mensen, maar
   niet met display:none — dat slaan sommige scripts juist over. */
.vh-valstrik { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 620px) { .vh-formulier__rij { grid-template-columns: 1fr; } }

/* --- Tabellen in gewone inhoudspagina's ----------------------------------- */
.vh-inhoud table {
	width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem;
	background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
	overflow: hidden; font-size: .88rem;
}
.vh-inhoud th, .vh-inhoud td {
	text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--lijn);
}
.vh-inhoud tr:last-child th, .vh-inhoud tr:last-child td { border-bottom: 0; }
.vh-inhoud td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }