/*
 * Vergelijker - main.css
 * Mobile-first. Kleuren en font komen uit config.tokens (inline <style id="vg-tokens"> in <head>).
 * De :where(:root)-blok hieronder is alleen een terugval met specificiteit 0: de tokens uit de config winnen altijd.
 * Contrast: --vg-accent (#d9673f) haalt op wit maar 3,5:1, dus tekst en knoppen gebruiken --vg-accent-donker (5,2:1).
 * 0.36.0: tokens zonder terugval hier (een site zet ze in config tokens; zonder token geldt de waarde na de komma in var(),
 * de uitkomst van pantoffelwinkel): font-kop en kop-gewicht (koppen en tekstlogo), kopbalk en kopbalk-rand (header),
 * menu-grootte, menu-gewicht en menu-streep (underline = streep van 2px onder het actieve menu-item), tekst-2 (hero-intro),
 * ring (focusring van het zoekvak), hero-gloed, mark, beeldtegel en beeld-blend (vak achter productfoto's; multiply laat
 * een witte fotoachtergrond opgaan in de tegel), footer-bg, footer-tekst, footer-meta en footer-accent.
 * 0.39.0: logo-tld (".nl" in het woordmerk; terugval accent-donker), usp-bg en usp-tekst (USP-balk), en radius/radius-s
 * staan nu in het terugvalblok, zodat tokens.radius van een site wint.
 */

/* ---------- Tokens (terugval) ---------- */
:where(:root) {
	--vg-bg: #fbf6ef;
	--vg-tekst: #2b2118;
	--vg-kop: #1f1a17;
	--vg-accent: #d9673f;
	--vg-accent-donker: #b04f2b;
	--vg-groen: #3f8f5a;
	--vg-kaart: #fff;
	--vg-rand: #eadfd2;
	--vg-rand-hover: #dccbb8; /* rand van kaarten bij hover (productkaart, gidskaart); per site: tokens.rand-hover */
	--vg-meta: #7a6a5c;
	--vg-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	/* 0.39.0: hoeken als terugval hier (specificiteit 0), zodat tokens.radius en tokens.radius-s van een site winnen. */
	--vg-radius: 12px;
	--vg-radius-s: 8px;
}

:root {
	--vg-gutter: 16px;
	--vg-schaduw: 0 1px 2px rgba(43, 33, 24, .06), 0 4px 14px rgba(43, 33, 24, .06);
	--vg-schaduw-hover: 0 2px 4px rgba(43, 33, 24, .08), 0 10px 24px rgba(43, 33, 24, .1);
	--vg-focus: 0 0 0 3px var(--vg-bg), 0 0 0 5px var(--vg-accent-donker);
	--vg-groen-tekst: #2f6e45;
	--vg-zacht: #f4ebe0;
	--vg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a6a5c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--vg-filtericoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath d='M1 4h16M1 12h16' fill='none' stroke='%231f1a17' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='4' r='2.6' fill='%23fff' stroke='%231f1a17' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23fff' stroke='%231f1a17' stroke-width='1.8'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--vg-groen-tekst: color-mix(in srgb, var(--vg-groen) 76%, #000);
		--vg-zacht: color-mix(in srgb, var(--vg-rand) 45%, var(--vg-bg));
	}
}

/* ---------- Font ---------- */
@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Variable.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DM Sans';
	src: url('../fonts/DMSans-Italic-Variable.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: italic;
	font-display: swap;
}

/* ---------- Reset (licht) ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 16px;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--vg-bg);
	color: var(--vg-tekst);
	font-family: var(--vg-font);
	font-size: 1rem;
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
	margin: 0;
}

img, svg, video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

/* Productafbeelding en placeholder-SVG: de width/height-attributen (300) geven alleen de verhouding
   tegen CLS; de getoonde maat komt uit de CSS. Beeldvakken (.vg-card__img, .vg-product__media) zetten 100%. */
.vg-img {
	max-width: 100%;
	height: auto;
}

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

button {
	cursor: pointer;
}

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

[hidden] {
	display: none !important;
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4,
.vg-h1, .vg-h2 {
	color: var(--vg-kop);
	font-family: var(--vg-font-kop, var(--vg-font));
	font-weight: var(--vg-kop-gewicht, 700);
	line-height: 1.15;
	letter-spacing: -.015em;
	text-wrap: balance;
}

h1, .vg-h1 {
	font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
	letter-spacing: -.025em;
}

h2, .vg-h2 {
	font-size: clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
}

h3 {
	font-size: 1.125rem;
	line-height: 1.25;
}

p, li {
	text-wrap: pretty;
}

a {
	color: var(--vg-accent-donker);
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

a:hover {
	color: var(--vg-kop);
}

strong, b {
	font-weight: 700;
}

small {
	font-size: .875rem;
}

/* Lopende tekst uit de editor of term-description */
.vg-prose > * + *,
.vg-intro > * + * {
	margin-top: .9em;
}

.vg-prose h2,
.vg-intro h2 {
	margin-top: 1.6em;
}

.vg-prose h3,
.vg-intro h3 {
	margin-top: 1.3em;
}

.vg-prose ul,
.vg-prose ol,
.vg-intro ul,
.vg-intro ol {
	padding-left: 1.25em;
}

.vg-prose li + li,
.vg-intro li + li {
	margin-top: .3em;
}

.vg-prose table,
.vg-intro table {
	font-size: .9375rem;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	overflow: hidden;
}

.vg-prose th,
.vg-prose td,
.vg-intro th,
.vg-intro td {
	padding: .55rem .75rem;
	text-align: left;
	border-bottom: 1px solid var(--vg-rand);
	vertical-align: top;
}

.vg-prose th,
.vg-intro th {
	font-weight: 700;
	color: var(--vg-kop);
	background: var(--vg-zacht);
}

.vg-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ---------- Toegankelijkheid ---------- */
.screen-reader-text,
.vg-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vg-skip {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: .6rem 1rem;
	background: var(--vg-kop);
	color: #fff;
	border-radius: var(--vg-radius-s);
	font-weight: 700;
	text-decoration: none;
}

.vg-skip:focus {
	top: 12px;
	color: #fff;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--vg-accent-donker);
	outline-offset: 2px;
	border-radius: 4px;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: none;
	box-shadow: var(--vg-focus);
}

/* ---------- Layout ---------- */
.vg-container {
	width: 100%;
	max-width: calc(1200px + 2 * var(--vg-gutter));
	margin-inline: auto;
	padding-inline: var(--vg-gutter);
}

.vg-section {
	padding-block: 28px;
}

.vg-section + .vg-section {
	padding-top: 8px;
}

.vg-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin-bottom: 16px;
}

.vg-section__head a {
	font-weight: 600;
	font-size: .9375rem;
}

.vg-main {
	display: block;
	min-height: 50vh;
}

@media (min-width: 700px) {
	.vg-section {
		padding-block: 40px;
	}
}

/* ---------- Header ---------- */
.vg-header {
	background: var(--vg-kopbalk, var(--vg-kaart));
	border-bottom: 1px solid var(--vg-kopbalk-rand, var(--vg-rand));
	position: relative;
	z-index: 20;
}

.vg-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding-block: 10px;
	min-height: 60px;
}

.vg-logo,
.vg-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
	color: var(--vg-kop);
	font-family: var(--vg-font-kop, var(--vg-font));
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -.03em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.vg-logo:hover,
.vg-header__logo:hover {
	color: var(--vg-kop);
}

.vg-logo span,
.vg-logo__tld {
	color: var(--vg-logo-tld, var(--vg-accent-donker));
}

.vg-logo img,
.vg-logo svg {
	height: 32px;
	width: auto;
}

/* Woordmerk als inline SVG (inc/huisstijl.php, 0.25.0): de viewBox is twee keer de kaphoogte, dus 32px hoog = kaphoogte
   16px. Paden staan op currentColor; de naam volgt de linkkleur, .nl en de pompon op de i krijgen de accentkleuren. */
.vg-logo--beeld {
	font-size: 0;
	line-height: 0;
}

.vg-logo .vg-logo__svg {
	display: block;
	height: 28px;
	width: auto;
}

.vg-logo__tld {
	color: var(--vg-logo-tld, var(--vg-accent-donker));
}

.vg-logo__dot {
	color: var(--vg-accent);
}

@media (min-width: 700px) {
	.vg-header__logo .vg-logo__svg {
		height: 32px;
	}
}

/* ---------- Navigatie ---------- */
/* Mobiel: de toggle staat rechts van het logo, het menu klapt als paneel onder de header uit
   (absoluut t.o.v. .vg-header, dus geen verschuiving van de pagina). */
.vg-nav {
	order: 2;
}

.vg-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	background: transparent;
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-weight: 600;
	font-size: .9375rem;
}

.vg-header__inner > .vg-nav__toggle {
	order: 2;
}

.vg-nav__toggle:hover {
	border-color: var(--vg-meta);
}

.vg-nav__icon,
.vg-nav__toggle::before {
	display: block;
	width: 18px;
	height: 12px;
	background:
		linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
}

.vg-nav__toggle::before {
	content: '';
}

.vg-nav__toggle:has(.vg-nav__icon)::before {
	content: none;
}

.vg-nav__toggle[aria-expanded="true"]::before {
	background:
		linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px));
	width: 14px;
	height: 14px;
}

.vg-nav ul,
.vg-nav__list {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	list-style: none;
	margin: 0;
	padding: 4px var(--vg-gutter) 8px;
	background: var(--vg-kaart);
	border-bottom: 1px solid var(--vg-rand);
	box-shadow: 0 12px 24px rgba(43, 33, 24, .1);
}

.vg-nav.is-open ul,
.vg-nav.is-open .vg-nav__list {
	display: block;
}

.vg-nav li + li {
	border-top: 1px solid var(--vg-rand);
}

.vg-nav a,
.vg-nav__link {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 4px;
	color: var(--vg-kop);
	font-weight: var(--vg-menu-gewicht, 600);
	text-decoration: none;
}

.vg-nav a:hover,
.vg-nav a[aria-current="page"],
.vg-nav .is-active > a {
	color: var(--vg-accent-donker);
}

/* 0.36.0: token menu-streep = underline geeft het actieve item een streep van 2px (sloffenwinkel); zonder token geen streep. */
.vg-nav a[aria-current="page"],
.vg-nav .is-active > a {
	text-decoration-line: var(--vg-menu-streep, none);
	text-decoration-thickness: 2px;
	text-underline-offset: .45em;
}

@media (min-width: 900px) {
	.vg-header__inner {
		flex-wrap: nowrap;
		min-height: 68px;
	}

	.vg-nav {
		order: 0;
		flex: 0 0 auto; /* 0.33.1: de balk krimpt niet (anders sloeg de lijst om, ook al op 950 px); het zoekvak krimpt. */
	}

	.vg-nav__toggle,
	.vg-header__inner > .vg-nav__toggle {
		display: none;
	}

	.vg-nav ul,
	.vg-nav__list,
	.vg-nav.is-open ul,
	.vg-nav.is-open .vg-nav__list {
		display: flex;
		flex-wrap: nowrap; /* 0.33.1: was wrap. */
		gap: 2px;
		position: static;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.vg-nav li + li {
		border-top: 0;
	}

	.vg-nav a,
	.vg-nav__link {
		min-height: 40px;
		padding: 0 10px;
		border-radius: var(--vg-radius-s);
		font-size: var(--vg-menu-grootte, .9375rem);
		white-space: nowrap;
	}

	.vg-nav a:hover {
		background: var(--vg-zacht);
	}
}

/* 0.27.0 (UX-review bevinding 8): tussen 900 en 1023 px brak de balk in twee regels. Daar alleen de hoofditems in de
   balk; de items met alleen_breed (vg-nav__item--breed, config menu) via de menuknop, die dan het hele menu als paneel
   onder de header opent, zoals op mobiel. De knop staat na de items en vóór het zoekvak; het logo neemt de vrije ruimte
   (margin-right: auto), dus de knop blijft op zijn plek als het paneel opengaat. 0.33.1: de band loopt tot 1199 px, want
   met het zevende item (Aanbiedingen) past de balk pas vanaf ± 1.210 px op één regel (gemeten: logo 212, zeven items 692,
   zoekvak 275); de lijst slaat sinds 0.33.1 nooit meer om (nowrap, de nav krimpt niet), het zoekvak krimpt. */
@media (min-width: 900px) and (max-width: 1199.98px) {
	.vg-nav__toggle,
	.vg-header__inner > .vg-nav__toggle {
		display: inline-flex;
		order: 1;
	}

	.vg-header .vg-header__inner > .vg-search {
		order: 2; /* Specifieker dan de regel van het zoekvak vanaf 900 px verderop (order 0). */
	}

	.vg-nav:not(.is-open) .vg-nav__item--breed {
		display: none;
	}

	.vg-nav.is-open ul,
	.vg-nav.is-open .vg-nav__list {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: 4px var(--vg-gutter) 8px;
		background: var(--vg-kaart);
		border-bottom: 1px solid var(--vg-rand);
		box-shadow: 0 12px 24px rgba(43, 33, 24, .1);
	}

	.vg-nav.is-open li + li {
		border-top: 1px solid var(--vg-rand);
	}

	.vg-nav.is-open a,
	.vg-nav.is-open .vg-nav__link {
		min-height: 46px;
		padding: 0 4px;
		border-radius: 0;
	}
}

/* ---------- Zoekvak ---------- */
.vg-search {
	display: flex;
	width: 100%;
	max-width: 520px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	overflow: hidden;
}

.vg-header .vg-search {
	order: 4;
	flex-basis: 100%;
	max-width: none;
}

.vg-search:focus-within {
	border-color: var(--vg-accent-donker);
	box-shadow: 0 0 0 3px var(--vg-ring, rgba(176, 79, 43, .18));
}

.vg-search input,
.vg-search__input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	padding: 0 16px;
	background: transparent;
	border: 0;
	font-size: 1rem;
}

.vg-search input::placeholder {
	color: var(--vg-meta);
	opacity: 1;
}

.vg-search input:focus-visible {
	outline: none;
	box-shadow: none;
}

.vg-search input::-webkit-search-cancel-button {
	cursor: pointer;
}

.vg-search button,
.vg-search__btn {
	flex: none;
	min-height: 44px;
	padding: 0 18px;
	background: var(--vg-accent-donker);
	border: 0;
	color: #fff;
	font-weight: 700;
}

.vg-search button:hover {
	background: var(--vg-kop);
}

.vg-search button:focus-visible {
	box-shadow: inset 0 0 0 3px var(--vg-kaart);
	outline: 3px solid var(--vg-accent-donker);
	outline-offset: -3px;
}

@media (min-width: 900px) {
	.vg-header .vg-search {
		order: 0;
		flex: 0 1 280px;
		min-width: 150px; /* 0.33.1: krimpt tot hier (invoer met min-width 0 en de knop). */
	}
}

/* ---------- Knoppen ---------- */
.vg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 18px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.vg-btn:hover {
	border-color: var(--vg-meta);
	color: var(--vg-kop);
}

.vg-btn--accent {
	background: var(--vg-accent-donker);
	border-color: var(--vg-accent-donker);
	color: #fff;
}

.vg-btn--accent:hover {
	background: var(--vg-kop);
	border-color: var(--vg-kop);
	color: #fff;
}

.vg-btn--accent:active {
	transform: translateY(1px);
}

.vg-btn--blok {
	display: flex;
	width: 100%;
}

.vg-btn--klein {
	min-height: 36px;
	padding: 6px 12px;
	font-size: .875rem;
}

.vg-btn[aria-disabled="true"],
.vg-btn:disabled {
	background: var(--vg-zacht);
	border-color: var(--vg-rand);
	color: var(--vg-meta);
	cursor: not-allowed;
}

.vg-btn__pijl {
	transition: transform .15s ease;
}

.vg-btn:hover .vg-btn__pijl {
	transform: translateX(3px);
}

/* ---------- Hero ---------- */
.vg-hero {
	padding-block: 32px 24px;
	background:
		radial-gradient(120% 90% at 100% 0%, var(--vg-hero-gloed, rgba(217, 103, 63, .12)), transparent 60%),
		var(--vg-bg);
	border-bottom: 1px solid var(--vg-rand);
}

/* 0.27.0 (UX-review bevinding 4): op mobiel een kleinere kop (was vijf regels op 375 px), vanaf 800 px zoals voorheen */
.vg-hero h1,
.vg-hero .vg-h1 {
	max-width: 20ch;
	font-size: clamp(1.9rem, 7vw, 2.4rem);
}

.vg-hero p,
.vg-hero__lead {
	max-width: 56ch;
	margin-top: 12px;
	font-size: 1.0625rem;
	color: var(--vg-tekst-2, var(--vg-tekst));
}

/* 0.25.5 (Sjoerd 25-09: meer lucht op mobiel): ruimte tussen de lead en het zoekvak */
.vg-hero .vg-search {
	margin-top: 28px;
}

/* 0.27.0 (UX-review bevindingen 3 en 4): onder 800 px geen tweede zoekvak (dat in de header blijft) en van de intro alleen
   de eerste twee zinnen (front-page.php splitst de tekst in -kort en -rest) */
.vg-hero .vg-search--hero,
.vg-hero__lead-rest {
	display: none;
}

@media (min-width: 800px) {
	.vg-hero h1,
	.vg-hero .vg-h1 {
		font-size: clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
	}

	.vg-hero .vg-search--hero {
		display: flex;
	}

	.vg-hero__lead-rest {
		display: inline;
	}
}

.vg-hero__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-top: 16px;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	color: var(--vg-meta);
}

.vg-hero__feiten strong {
	color: var(--vg-kop);
}

@media (min-width: 700px) {
	.vg-hero {
		padding-block: 56px 44px;
	}
}

/* Hero-beeld (B8): inline SVG, kleuren uit de tokens, vaste maat (CLS 0), puur decoratief.
   Mobiel klein rechtsboven naast de titel (float), vanaf 700px een eigen kolom. */
.vg-hero__beeld {
	float: right;
	width: 88px;
	aspect-ratio: 4 / 3;
	margin: 4px 0 8px 12px;
	color: var(--vg-accent-donker);
}

.vg-hero__svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero-foto (0.25.1): de krans van productfoto's; vanaf 800 px de rechterkolom. 0.27.0 (UX-review bevinding 4): onder
   800 px boven de kop over de volle breedte, hoogstens 220 px hoog; de hoogte ligt vóór het laden vast (breedte 100 %
   en de verhouding uit width/height van de <img>, begrensd door max-height; contain houdt de krans heel), dus geen CLS. */
.vg-hero__beeld--foto {
	float: none;
	width: 100%;
	max-width: none;
	aspect-ratio: auto;
	margin: 0 0 16px;
}

.vg-hero__foto {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: contain;
}

.vg-hero__vlak {
	fill: var(--vg-accent);
	fill-opacity: .1;
}

.vg-hero__schaduw {
	fill: var(--vg-rand);
}

.vg-hero__slof {
	fill: var(--vg-accent);
	color: var(--vg-accent-donker);
}

.vg-hero__slof--achter {
	fill: var(--vg-rand);
	color: var(--vg-meta);
}

.vg-hero__voering {
	fill: var(--vg-kaart);
	stroke: var(--vg-rand);
	stroke-width: 2;
}

.vg-hero__steek {
	fill: none;
	stroke: var(--vg-kaart);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 6 7;
}

.vg-hero__warm {
	stroke: var(--vg-accent);
	stroke-width: 3;
	stroke-dasharray: none;
	opacity: .55;
}

@media (min-width: 800px) {
	.vg-hero--beeld .vg-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(200px, 28vw, 340px);
		align-items: center;
		column-gap: 40px;
	}

	.vg-hero--beeld .vg-hero__beeld {
		float: none;
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		margin: 0;
	}

	.vg-hero--beeld .vg-hero__beeld--foto {
		max-width: none;
		align-self: center;
	}

	.vg-hero__foto {
		max-height: none;
	}

	.vg-hero--beeld .vg-hero__tekst {
		grid-column: 1;
		grid-row: 1;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vg-hero__warm {
		animation: vg-warm 3.2s ease-in-out infinite alternate;
	}
}

@keyframes vg-warm {
	to {
		opacity: .2;
	}
}

/* ---------- Home: sectiekoppen (0.25.5, meer lucht tussen de kop en de kaarten) ---------- */
.vg-home .vg-section > .vg-container > .vg-h2 {
	margin-bottom: 16px;
}

@media (min-width: 700px) {
	.vg-home .vg-section > .vg-container > .vg-h2,
	.vg-home .vg-section__head {
		margin-bottom: 20px;
	}
}

/* ---------- Zo werkt het (0.25.5): drie stappen in één strook, mobiel onder elkaar, vanaf 700px naast elkaar ----------
   Icoon (inline SVG uit assets/img/stap-*.svg) in de accentkleur op een zacht rondje; zonder icoon schuift de tekst op. */
.vg-stappen {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 2px 16px;
	list-style: none;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

.vg-stap {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	padding: 14px 0;
}

.vg-stap + .vg-stap {
	border-top: 1px solid var(--vg-rand);
}

.vg-stap__icoon {
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: 14px;
	border-radius: 50%;
	background: var(--vg-zacht);
	color: var(--vg-accent);
}

.vg-stap__icoon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vg-stap__titel,
.vg-stap__tekst {
	grid-column: 2;
}

.vg-stap__titel {
	padding-top: 1px;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.vg-stap__tekst {
	margin-top: 2px;
	color: var(--vg-meta);
	font-size: .9375rem;
	line-height: 1.45;
}

.vg-uitleg__meer {
	margin-top: 14px;
}

@media (min-width: 700px) {
	.vg-stappen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 6px 0;
	}

	.vg-stap {
		padding: 14px 22px;
	}

	.vg-stap + .vg-stap {
		border-top: 0;
		border-left: 1px solid var(--vg-rand);
	}
}

/* ---------- Ingangen (3 kaarten) ---------- */
.vg-ingangen > ul,
.vg-ingangen__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-ingangen a,
.vg-ingang {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 18px 44px 18px 18px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	box-shadow: var(--vg-schaduw);
	color: var(--vg-tekst);
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.vg-ingangen a::after,
.vg-ingang::after {
	content: '\2192';
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--vg-accent-donker);
	font-weight: 700;
	font-size: 1.25rem;
	transition: transform .2s ease;
}

.vg-ingangen a:hover,
.vg-ingang:hover {
	border-color: var(--vg-accent);
	box-shadow: var(--vg-schaduw-hover);
	color: var(--vg-tekst);
}

.vg-ingangen a:hover::after {
	transform: translate(3px, -50%);
}

.vg-ingangen strong,
.vg-ingang__titel {
	color: var(--vg-kop);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.015em;
}

.vg-ingangen span,
.vg-ingang__tekst {
	font-size: .9375rem;
	color: var(--vg-meta);
}

/* Aantal onderaan de kaart, met lucht boven (0.25.5) */
.vg-ingang__aantal {
	margin-top: auto;
	padding-top: 4px;
}

@media (min-width: 700px) {
	.vg-ingangen > ul,
	.vg-ingangen__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.vg-ingangen a,
	.vg-ingang {
		padding: 24px 48px 24px 22px;
	}
}

/* ---------- Themablokken ---------- */
.vg-themas > ul,
.vg-themas__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-themas a,
.vg-thema {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px;
	background: var(--vg-zacht);
	border: 1px solid transparent;
	border-radius: var(--vg-radius);
	color: var(--vg-tekst);
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}

.vg-themas a:hover,
.vg-thema:hover {
	background: var(--vg-kaart);
	border-color: var(--vg-rand);
	color: var(--vg-tekst);
}

.vg-themas strong,
.vg-thema__titel {
	color: var(--vg-kop);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.25;
}

.vg-themas span,
.vg-thema__tekst {
	font-size: .875rem;
	line-height: 1.45;
	color: var(--vg-meta);
}

/* "82 pantoffels" onderaan de tegel, met lucht onder de omschrijving (0.25.5); tegels in een rij lijnen zo uit */
.vg-thema__aantal {
	margin-top: auto;
	padding-top: 8px;
}

@media (min-width: 700px) {
	.vg-themas > ul,
	.vg-themas__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}

	.vg-themas a,
	.vg-thema {
		padding: 18px;
	}
}

/* Themablok met sublinks (bijv. Budget: dames, heren, kinderen): volle breedte, hele kaart klikbaar
   via de titel-link, sublinks als chips met hun eigen aantal erboven. */
.vg-themas__breed {
	grid-column: 1 / -1;
}

.vg-thema--subs {
	position: relative;
}

.vg-themas .vg-thema__link {
	display: inline;
	height: auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.vg-themas .vg-thema__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--vg-radius);
}

.vg-thema__subs {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.vg-themas .vg-thema__subs a {
	display: inline-block;
	height: auto;
	padding: 6px 14px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	color: var(--vg-kop);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
}

.vg-themas .vg-thema__subs .vg-thema__subaantal {
	margin-left: 4px;
	font-size: .8125rem;
	font-weight: 400;
}

.vg-themas .vg-thema__subs a:hover {
	border-color: var(--vg-accent);
	color: var(--vg-accent-donker);
}

/* ---------- Merkenrij ---------- */
.vg-merken > ul,
.vg-merken__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-merken a,
.vg-merk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	color: var(--vg-kop);
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
}

.vg-merken a:hover,
.vg-merk:hover {
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

.vg-merken small,
.vg-merk__aantal {
	color: var(--vg-meta);
	font-weight: 400;
	font-size: .8125rem;
}

/* Merkenpagina als lijst (config merken.weergave "lijst", 0.38.10; sloffenwinkel): letterblokken in kolommen, merken als rustige tekstregels met het aantal
   rechts; de pilvorm van .vg-merken a geldt hier niet. */
.vg-merken-pagina--lijst .vg-merken {
	display: block;
	columns: 230px;
	column-gap: 32px;
	margin-top: 24px;
}

/* Kolommen als krantenkolommen (0.38.4): een lange letter rekt geen rij op; een letterblok breekt niet over twee kolommen. */
.vg-merken-pagina--lijst .vg-merken__groep {
	break-inside: avoid;
	margin-bottom: 12px;
}

.vg-merken-pagina--lijst .vg-merken__groep:first-child .vg-h2 {
	margin-top: 0;
}

.vg-merken-pagina--lijst .vg-merken__groep .vg-h2 {
	margin: 16px 0 6px;
	padding-bottom: 4px;
	border-bottom: 2px solid var(--vg-accent);
	color: var(--vg-accent);
	font-size: 1.25rem;
}

.vg-merken-pagina--lijst .vg-merken__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-merken-pagina--lijst .vg-merken__lijst li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--vg-rand);
}

.vg-merken-pagina--lijst .vg-merken__lijst a {
	display: inline;
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-weight: 500;
	color: var(--vg-kop);
	text-decoration: none;
}

.vg-merken-pagina--lijst .vg-merken__lijst a:hover,
.vg-merken-pagina--lijst .vg-merken__lijst a:focus-visible {
	color: var(--vg-accent-donker, var(--vg-accent));
	text-decoration: underline;
}

.vg-merken-pagina--lijst .vg-merken__aantal {
	flex: none;
	color: var(--vg-meta);
	font-size: .8125rem;
}

.vg-merken-pagina--lijst .vg-merken__letters {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 8px 0;
	background: var(--vg-bg, var(--vg-pagina, #fff));
}

/* 0.39.48 (Sjoerd 03-10): een sprong naar een letter valt niet meer onder de sticky letterbalk; op mobiel is de balk één
   veegbare regel (was drie regels), zodat hij weinig ruimte inneemt. */
.vg-merken-pagina--lijst .vg-merken__groep {
	scroll-margin-top: 76px;
}

@media (max-width: 699px) {
	.vg-merken-pagina--lijst .vg-merken__letters .vg-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vg-merken-pagina--lijst .vg-merken__letters .vg-chips::-webkit-scrollbar {
		display: none;
	}

	.vg-merken-pagina--lijst .vg-merken__letters .vg-chip {
		flex: none;
	}
}

/* Merkenpagina: alfabetische kolommen */
.vg-merken--index > ul,
.vg-merken--index .vg-merken__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.vg-merken--index a {
	justify-content: space-between;
	border-radius: var(--vg-radius-s);
}

@media (min-width: 700px) {
	.vg-merken--index > ul,
	.vg-merken--index .vg-merken__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.vg-merken--index > ul,
	.vg-merken--index .vg-merken__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Breadcrumbs ---------- */
.vg-breadcrumbs {
	margin-bottom: 14px;
	font-size: .875rem;
	color: var(--vg-meta);
}

.vg-breadcrumbs ol,
.vg-breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.vg-breadcrumbs li + li::before {
	content: '/';
	margin: 0 8px;
	color: var(--vg-meta);
	opacity: .6;
}

.vg-breadcrumbs a {
	color: var(--vg-meta);
	text-decoration: none;
	padding-block: 6px;
}

.vg-breadcrumbs a:hover {
	color: var(--vg-accent-donker);
	text-decoration: underline;
}

.vg-breadcrumbs [aria-current] {
	color: var(--vg-tekst);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 32ch;
}

/* ---------- Intro-blok (categorie) ---------- */
.vg-intro {
	max-width: 72ch;
	margin-top: 12px;
	font-size: 1.0625rem;
}

.vg-intro p:first-child {
	font-size: 1.0625rem;
}

.vg-intro p.vg-intro__meer {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-top: .5em;
	font-size: .9375rem;
	font-weight: 600;
}

/* Mobiel inkorten (review B4): lange eerste alinea op vier regels, "Lees verder" klapt uit. CSS-only met een
   visueel verborgen maar focusbare checkbox; de hele tekst blijft in de HTML. Vanaf 700px niets afgekapt. */
.vg-intro__vink {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
}

.vg-intro > .vg-intro__vink + p {
	margin-top: 0;
}

.vg-intro--kort > .vg-intro__vink:not(:checked) + p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
}

.vg-intro__lees {
	color: var(--vg-accent-donker);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.vg-intro__lees:hover {
	text-decoration: underline;
}

.vg-intro__vink:focus-visible ~ .vg-intro__meer .vg-intro__lees {
	border-radius: 4px;
	box-shadow: var(--vg-focus);
}

.vg-intro__lees-minder,
.vg-intro__vink:checked ~ .vg-intro__meer .vg-intro__lees-meer {
	display: none;
}

.vg-intro__vink:checked ~ .vg-intro__meer .vg-intro__lees-minder {
	display: inline;
}

@media (min-width: 700px) {
	.vg-intro__vink,
	.vg-intro__lees {
		display: none;
	}

	.vg-intro--kort > .vg-intro__vink:not(:checked) + p {
		display: block;
		overflow: visible;
	}
}

.vg-intro__meer a {
	text-decoration: none;
}

.vg-intro__meer a:hover,
.vg-intro__meer a:focus-visible {
	text-decoration: underline;
}

.vg-intro--meer {
	max-width: 72ch;
	margin-top: 40px;
	font-size: 1rem;
}

.vg-feiten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 14px;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	color: var(--vg-meta);
}

.vg-feiten li {
	display: inline-flex;
	gap: 4px;
}

.vg-feiten strong {
	color: var(--vg-kop);
	font-weight: 600;
}

/* Metaregel onder de H1: aantal en laatst bijgewerkt */
.vg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 12px 0 0;
	font-size: .9375rem;
	color: var(--vg-meta);
}

.vg-updated {
	font-size: .875rem;
	color: var(--vg-meta);
}

/* Auteurregel (B7a): onder categorietekst en productbeschrijving */
.vg-byline {
	margin: 16px 0 0;
	font-size: .875rem;
	color: var(--vg-meta);
}

.vg-byline a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vg-byline a:hover,
.vg-byline a:focus-visible {
	color: var(--vg-accent-donker);
}

.vg-product__byline {
	margin-top: 24px;
}

/* Contactzin op de over-ons-pagina (alleen met config contact.url; sinds 0.20.0 geen contactregel in de footer) */
.vg-contact {
	margin: 12px 0 0;
}

.vg-contact a {
	overflow-wrap: anywhere;
}

/* Over-ons: auteurblok */
.vg-over__auteur {
	margin-top: 28px;
	padding: 16px 18px;
	border: 1px solid var(--vg-rand);
	border-radius: 12px;
	background: var(--vg-kaart);
}

.vg-over__auteur > h2 {
	margin-top: 0;
}

/* Chips (subcategorieen, alternatieven, productcategorieen, merkletters) */
.vg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	color: var(--vg-kop);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.vg-chip:hover {
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

/* Subcategorieen: op mobiel een horizontaal scrollbare rij */
.vg-subcats {
	margin-top: 18px;
}

.vg-subcats .vg-chips {
	flex-wrap: nowrap;
	margin: 0 calc(-1 * var(--vg-gutter));
	padding: 0 var(--vg-gutter) 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.vg-subcats .vg-chips::-webkit-scrollbar {
	display: none;
}

@media (min-width: 700px) {
	.vg-subcats .vg-chips {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

/* ---------- Toolbar + sorteren ---------- */
.vg-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 20px 0 14px;
}

.vg-toolbar__count,
.vg-count {
	font-size: .9375rem;
	color: var(--vg-meta);
}

.vg-toolbar__count strong,
.vg-count strong {
	color: var(--vg-kop);
}

.vg-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9375rem;
}

.vg-sort label {
	color: var(--vg-meta);
	white-space: nowrap;
}

.vg-sort select {
	min-height: 42px;
	padding: 0 40px 0 12px;
	background: var(--vg-chevron) no-repeat right 14px center, var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-weight: 600;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.vg-sort select:hover {
	border-color: var(--vg-meta);
}

.vg-sort select:focus-visible {
	outline: none;
	box-shadow: var(--vg-focus);
}

/* Zonder JS blijft de verzendknop zichtbaar; met JS navigeert de select zelf */
.vg-js .vg-sort button,
.vg-js .vg-sort [type="submit"] {
	display: none;
}

/* ---------- Filters (categoriepagina's) ---------- */
/* Eigen dropdowns: details.vg-fd per filter, opties zijn links. Mobiel: knoppen onder elkaar en het
   paneel als blok onder de knop; vanaf 700px één rij met zwevende panelen. */
.vg-filters {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 12px;
}

.vg-fd {
	position: relative;
	min-width: 0;
}

.vg-fd__knop {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px 0 12px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-size: .9375rem;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.vg-fd__knop::-webkit-details-marker {
	display: none;
}

.vg-fd__knop:hover,
.vg-fd[open] > .vg-fd__knop {
	border-color: var(--vg-meta);
}

/* Gekozen filter: accentrand, zodat in één oogopslag zichtbaar is wat er actief is */
.vg-fd.is-actief > .vg-fd__knop {
	border-color: var(--vg-accent-donker);
}

.vg-fd__label {
	flex: none;
}

.vg-fd.is-actief .vg-fd__label {
	color: var(--vg-meta);
	font-weight: 500;
}

.vg-fd.is-actief .vg-fd__label::after {
	content: ":";
}

.vg-fd__waarde {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vg-fd__chevron {
	flex: none;
	width: 12px;
	height: 8px;
	margin-left: auto;
	background: var(--vg-chevron) no-repeat center / 12px 8px;
	transition: transform .15s ease;
}

.vg-fd[open] .vg-fd__chevron {
	transform: rotate(180deg);
}

.vg-fd__panel {
	margin-top: 6px;
	max-height: 60vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	box-shadow: var(--vg-schaduw);
}

.vg-fd__lijst {
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

.vg-fd__optie {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 8px 12px;
	color: var(--vg-kop);
	font-size: .9375rem;
	line-height: 1.3;
	text-decoration: none;
}

.vg-fd__optie:hover {
	background: var(--vg-zacht);
	color: var(--vg-kop);
}

/* Binnen een scrollend paneel: focusring aan de binnenkant, anders valt hij weg */
.vg-fd__optie:focus-visible {
	border-radius: 0;
	box-shadow: inset 0 0 0 2px var(--vg-accent-donker);
}

.vg-fd__naam {
	min-width: 0;
	overflow-wrap: anywhere;
}

.vg-fd__aantal {
	margin-left: auto;
	padding-left: 8px;
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}

/* Gekozen optie: vet in accentkleur met een kruisje (de link haalt het filter weg) */
.vg-fd__optie[aria-current="true"] {
	background: var(--vg-zacht);
	color: var(--vg-accent-donker);
	font-weight: 700;
}

.vg-fd__optie[aria-current="true"]::after {
	content: "\00d7";
	content: "\00d7" / "";
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

.vg-fd__optie[aria-current="true"] .vg-swatch {
	box-shadow: 0 0 0 2px var(--vg-kaart), 0 0 0 3.5px var(--vg-accent-donker);
}

/* Zoekveld in lange panelen (data-zoek): staat met hidden in de HTML, main.js toont het. Sticky bovenin het
   scrollende paneel; de ring in kaartkleur dekt de opties af die eronder door scrollen. Font 1rem: geen
   inzoomen op iOS bij focus. */
.vg-fd__zoek {
	position: sticky;
	top: 6px;
	z-index: 1;
	display: block;
	width: calc(100% - 12px);
	min-height: 40px;
	margin: 6px 6px 0;
	padding: 0 12px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	box-shadow: 0 0 0 6px var(--vg-kaart);
	color: var(--vg-kop);
	font-size: 1rem;
	-webkit-appearance: none;
	appearance: none;
}

.vg-fd__zoek::placeholder {
	color: var(--vg-meta);
	opacity: 1;
}

.vg-fd__zoek::-webkit-search-cancel-button {
	cursor: pointer;
}

.vg-fd__zoek:focus-visible {
	outline: none;
	border-color: var(--vg-accent-donker);
	border-radius: var(--vg-radius-s);
	box-shadow: var(--vg-focus), 0 0 0 6px var(--vg-kaart);
}

/* Met getoond zoekveld: een optie die via Tab focus krijgt niet onder het veld laten schuiven */
.vg-js .vg-fd[data-zoek] .vg-fd__panel {
	scroll-padding-top: 58px;
}

/* "Geen resultaten voor …": leeg (hoogte 0) tot main.js de tekst zet; role="status" meldt hem aan schermlezers */
.vg-fd__leeg {
	margin: 0;
	color: var(--vg-meta);
	font-size: .9375rem;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.vg-fd__leeg:not(:empty) {
	padding: 4px 12px 12px;
}

@media (min-width: 700px) {
	.vg-filters {
		flex-direction: row;
	}

	.vg-fd {
		flex: 1 1 0;
		max-width: 240px;
	}

	.vg-fd__panel {
		position: absolute;
		top: calc(100% + 6px);
		left: 0;
		z-index: 30;
		width: max(100%, 260px);
		max-height: 320px;
		margin: 0;
		box-shadow: var(--vg-schaduw-hover);
	}

	/* Laatste filter rechts uitlijnen, zodat het paneel niet buiten beeld valt (de prijschips erna zijn een div) */
	.vg-fd:last-of-type:not(:first-of-type) .vg-fd__panel {
		left: auto;
		right: 0;
	}
}

/* Prijsfilter (0.25.4): chips "Tot € …" met aantal; op mobiel onderaan het filterpaneel, vanaf 700px een eigen regel
   onder de dropdowns. De gekozen chip in accentkleur met een kruisje: de link haalt het filter weg. */
.vg-fp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	padding-top: 4px;
}

.vg-fp__label {
	color: var(--vg-meta);
	font-size: .875rem;
	font-weight: 600;
}

.vg-fp__chip {
	gap: 6px;
}

.vg-fp__aantal {
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 400;
}

.vg-fp__chip[aria-current="true"] {
	background: var(--vg-zacht);
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

.vg-fp__chip[aria-current="true"]::after {
	content: "\00d7";
	content: "\00d7" / "";
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

@media (min-width: 700px) {
	.vg-filters {
		flex-wrap: wrap;
	}

	.vg-fp {
		flex: 1 0 100%;
		padding-top: 0;
	}
}

/* Mobiele filterknop (B4): onder 700px staat het filterblok achter één knop "Filters (n)". CSS-only:
   een visueel verborgen maar focusbare checkbox met een label als knop; :checked toont het blok als paneel.
   Vanaf 700px verdwijnen checkbox en knop en staat het blok als rij zoals altijd. */
.vg-filterblok {
	margin: 0 0 12px;
}

.vg-filterknop__vink {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	opacity: 0;
}

.vg-filterknop {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px 0 12px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.vg-filterknop:hover,
.vg-filterknop__vink:checked + .vg-filterknop {
	border-color: var(--vg-meta);
}

.vg-filterknop--actief,
.vg-filterknop__vink:checked + .vg-filterknop--actief {
	border-color: var(--vg-accent-donker);
}

.vg-filterknop__vink:focus-visible + .vg-filterknop {
	box-shadow: var(--vg-focus);
}

.vg-filterknop__icoon {
	flex: none;
	width: 18px;
	height: 16px;
	background: var(--vg-filtericoon) no-repeat center / 18px 16px;
}

.vg-filterknop__aantal {
	color: var(--vg-accent-donker);
}

.vg-filterknop__vink:checked + .vg-filterknop .vg-fd__chevron {
	transform: rotate(180deg);
}

.vg-filterblok > .vg-filters {
	display: none;
	margin: 8px 0 0;
}

.vg-filterknop__vink:checked ~ .vg-filters {
	display: flex;
}

@media (min-width: 700px) {
	.vg-filterknop__vink,
	.vg-filterknop {
		display: none;
	}

	.vg-filterblok > .vg-filters {
		display: flex;
		margin: 0;
	}
}

/* Filters binnen de toolbar (review B4, eerste product boven de vouw): .vg-filterblok doet niet mee in de
   opmaak, zodat knop, paneel en actieve-filterchips flex-items van .vg-toolbar zijn. Volgorde: kop, filterknop,
   Sorteren (rechts), dan paneel en chips elk over de volle breedte. Op mobiel staat de kop op een eigen regel en
   het label "Sorteren" alleen voor schermlezers; past de knop toch niet naast de keuzelijst, dan loopt die door. */
.vg-toolbar > .vg-filterblok {
	display: contents;
}

.vg-toolbar .vg-filterknop {
	order: 1;
}

.vg-toolbar > .vg-sort {
	order: 2;
	margin-left: auto;
}

.vg-toolbar .vg-filterblok > .vg-filters {
	order: 3;
	flex: 1 0 100%;
	margin: 0;
}

.vg-toolbar > .vg-filters__actief {
	order: 4;
	flex: 1 0 100%;
	margin: 0;
}

.vg-toolbar > .vg-h2 {
	flex: 1 0 100%;
}

.vg-toolbar .vg-sort label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* Categorie op mobiel: minder witruimte boven de kop. Vanaf 700px weer de gewone sectiepadding. Geen
   affiliate-melding meer op categoriepagina's (0.19.0): die staat alleen op de productpagina. */
.vg-categorie__producten {
	display: flex;
	flex-direction: column;
	padding-top: 0;
}

@media (min-width: 700px) {
	.vg-toolbar > .vg-h2 {
		flex: 0 1 auto;
	}

	.vg-toolbar .vg-sort label {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}

	.vg-categorie__producten {
		display: block;
		padding-top: 28px;
	}
}

/* Kleurstaal (vg_swatch_html): achtergrond uit --vg-swatch, rand bij lichte kleuren */
.vg-swatch {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vg-swatch, #cfc8c0);
	vertical-align: middle;
}

.vg-swatch--rand {
	border: 1px solid rgba(43, 33, 24, .25);
}

.vg-swatch--onbekend::after {
	content: "?";
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
}

.vg-fd__knop .vg-swatch,
.vg-chip .vg-swatch {
	width: 18px;
	height: 18px;
}

.vg-chip .vg-swatch {
	margin-left: -6px;
}

/* Actieve filters: chips (stijl van .vg-chip) met kruisje, plus "Wis filters" */
.vg-filters__actief {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 12px;
}

.vg-chip--filter {
	gap: 8px;
	border-color: var(--vg-accent-donker);
}

.vg-chip__x {
	color: var(--vg-meta);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
}

.vg-chip--filter:hover .vg-chip__x {
	color: inherit;
}

.vg-filters__wis {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	color: var(--vg-accent-donker);
	font-size: .875rem;
	font-weight: 600;
}

/* Gefilterd aantal boven het grid */
.vg-categorie__producten .vg-count {
	margin: 0 0 12px;
}

/* ---------- Productgrid ---------- */
.vg-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-grid > li {
	display: flex;
	min-width: 0;
}

.vg-grid > li > .vg-card {
	flex: 1;
}

@media (min-width: 700px) {
	.vg-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1000px) {
	.vg-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 20px;
	}
}

/* ---------- Productkaart ---------- */
.vg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	overflow: hidden;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.vg-card:hover {
	border-color: var(--vg-rand-hover);
	box-shadow: var(--vg-schaduw-hover);
}

.vg-card:focus-within {
	box-shadow: var(--vg-focus);
}

/* Beeldvak 4:3: brede winkelfoto's vullen het vak, de kaart wordt korter dan bij 1:1.
   De afbeelding staat absoluut in het vak (inset 0, 100% x 100%, contain, kleine padding): zo is de
   hoogte altijd die van het 4:3-vak, ook als flex-item, en tellen de 300x300-attributen alleen voor CLS. */
.vg-card__img {
	--vg-img-pad: 6px;
	position: relative;
	display: block;
	flex: none;
	aspect-ratio: 4 / 3;
	background: var(--vg-beeldtegel, #fff);
	color: var(--vg-meta);
	overflow: hidden;
}

.vg-card__img img,
.vg-card__img svg,
.vg-card__img .vg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	padding: var(--vg-img-pad);
	object-fit: contain;
	object-position: center;
	mix-blend-mode: var(--vg-beeld-blend, normal);
	transition: transform .3s ease;
}

.vg-card:hover .vg-card__img img {
	transform: scale(1.03);
}

.vg-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 4px;
	padding: 10px 12px 12px;
	border-top: 1px solid var(--vg-rand);
	container-type: inline-size;
}

.vg-card__brand {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vg-meta);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vg-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.vg-card__link:hover .vg-card__title,
.vg-card__link:focus-visible .vg-card__title {
	color: var(--vg-accent-donker);
}

/* Titel: 0.27.0 (UX-review bevinding 5) onder 600 px drie regels, zodat de kleur achteraan zichtbaar blijft ("UGG Tasman
   Pantoffels - Dames - Dusted Cocoa"), daarboven twee. min-height blijft twee regels: de kaarten van één rij zijn even
   hoog (grid stretch, .vg-card__meta met margin-top auto), een derde regel maakt alleen die rij iets hoger. */
.vg-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: calc(2 * 1.3em);
	color: var(--vg-kop);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

@media (min-width: 600px) {
	.vg-card__title {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
}

.vg-card__title a {
	color: inherit;
	text-decoration: none;
}

/* De hele kaart klikbaar via de titel-link, zonder geneste links */
.vg-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vg-card__title a:focus-visible {
	box-shadow: none;
}

.vg-card:hover .vg-card__title a {
	color: var(--vg-accent-donker);
}

.vg-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 5px;
	margin-top: auto;
	padding-top: 6px;
}

.vg-card__price {
	color: var(--vg-accent-donker);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vg-card__price--onbekend {
	color: var(--vg-meta);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
	white-space: normal;
}

/* "vanaf" klein, het bedrag groot (B9) */
.vg-card__price--vanaf {
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: 0;
}

.vg-card__bedrag {
	color: var(--vg-accent-donker);
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.vg-card__price del,
.vg-card__price s {
	margin-left: 4px;
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 400;
}

.vg-card__shop {
	flex: 1 0 100%;
	order: 2;
	min-width: 0;
	font-size: .8125rem;
	color: var(--vg-meta);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Verzendregel (0.25.5): "+ € 5,50 verzending" of "gratis verzending", alleen bij bekende kosten (geen lege regel).
   Smalle kaart direct onder de prijs (order), brede kaart onder "prijs · bij winkel". */
.vg-card__verzending {
	flex: 1 0 100%;
	order: 1;
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Smalle kaart: winkel op een eigen regel, zonder punt; brede kaart: één regel "prijs · bij winkel" (de winkel met
   basis 0, zodat hij nooit naar een eigen regel springt maar met een ellips inkort; de verzendregel eronder) */
.vg-card__sep {
	display: none;
}

@container (min-width: 260px) {
	.vg-card__meta {
		flex-wrap: wrap;
	}

	.vg-card__price {
		flex: none;
	}

	.vg-card__shop {
		flex: 1 1 0%;
		order: 0;
	}

	.vg-card__verzending {
		order: 1;
	}

	.vg-card__sep {
		display: inline;
	}

	.vg-card__price--onbekend + .vg-card__shop .vg-card__sep {
		display: none;
	}
}

.vg-card__cta {
	position: relative;
	z-index: 2;
	margin-top: 8px;
}

.vg-card .vg-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	pointer-events: none;
}

/* Niet leverbaar: gedempt, maar leesbaar */
.vg-card--uit .vg-card__img img {
	opacity: .55;
	filter: grayscale(.6);
}

.vg-card--uit .vg-card__price,
.vg-card--uit .vg-card__bedrag {
	color: var(--vg-meta);
}

@media (min-width: 700px) {
	.vg-card__img {
		--vg-img-pad: 10px;
	}

	.vg-card__body {
		padding: 12px 14px 14px;
	}

	.vg-card__title {
		font-size: 1rem;
	}

	.vg-card__price,
	.vg-card__bedrag {
		font-size: 1.25rem;
	}

	.vg-card__price--vanaf {
		font-size: .875rem;
	}
}

/* ---------- Badges ---------- */
.vg-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	color: var(--vg-kop);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.vg-badge--uit {
	background: var(--vg-zacht);
	border-color: var(--vg-rand);
	color: var(--vg-meta);
	font-weight: 600;
}

.vg-badge--op-voorraad,
.vg-badge--laagste {
	color: var(--vg-groen-tekst);
}

.vg-badge--op-voorraad::before,
.vg-badge--laagste::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vg-groen);
}

/* ---------- Affiliate-melding (alleen productpagina: onder de koopknop en onder "Ook verkrijgbaar bij") ---------- */
.vg-disclosure {
	max-width: 80ch;
	margin: 12px 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--vg-meta);
}

.vg-disclosure a {
	color: inherit;
}

/* ---------- Paginering ---------- */
.vg-pagination {
	margin-top: 28px;
}

.vg-pagination ul,
.vg-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-pagination a,
.vg-pagination span,
.vg-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-weight: 600;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.vg-pagination li > span,
.vg-pagination li > a {
	width: 100%;
}

.vg-pagination a:hover {
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

.vg-pagination .current,
.vg-pagination [aria-current="page"] {
	background: var(--vg-kop);
	border-color: var(--vg-kop);
	color: #fff;
}

.vg-pagination .dots {
	background: transparent;
	border-color: transparent;
	min-width: 24px;
	padding: 0;
}

/* ---------- Productpagina ---------- */
.vg-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.vg-product__media {
	position: relative;
	aspect-ratio: 1 / 1;
	padding: 20px;
	background: var(--vg-beeldtegel, #fff);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	color: var(--vg-meta);
	overflow: hidden;
}

.vg-product__media img,
.vg-product__media svg,
.vg-product__media .vg-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: var(--vg-beeld-blend, normal);
}

.vg-product__media .vg-badge {
	position: absolute;
	top: 12px;
	left: 12px;
}

/* Koopblok als kaart (0.33.2): prijs, verzending, maten, knop en de meta-regel als één geheel, in de stijl van de andere
   witte vlakken van de pagina (foto, winkeltabel, vergelijkbare modellen); de affiliate-melding staat eronder, buiten de kaart */
.vg-product__buy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

@media (min-width: 480px) {
	.vg-product__buy {
		padding: 20px;
	}
}

.vg-product__brand {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vg-meta);
}

.vg-product__brand a {
	color: inherit;
	text-decoration: none;
}

.vg-product__brand a:hover {
	color: var(--vg-accent-donker);
	text-decoration: underline;
}

.vg-product h1,
.vg-product__title {
	font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
}

.vg-product__offer,
.vg-offer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	box-shadow: var(--vg-schaduw);
}

.vg-product__price,
.vg-offer__price {
	color: var(--vg-accent-donker);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.vg-product__price--vanaf {
	color: var(--vg-meta);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.vg-product__bedrag {
	color: var(--vg-accent-donker);
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.vg-product__price del,
.vg-offer__price del {
	margin-left: 8px;
	color: var(--vg-meta);
	font-size: 1rem;
	font-weight: 400;
}

.vg-product__shop,
.vg-offer__shop {
	font-size: .9375rem;
	color: var(--vg-meta);
}

/* Verzendregel van de eigen winkel onder de prijs (0.25.5): "€ 15,61 incl. € 5,50 verzending" of "gratis verzending";
   dichter bij de prijs dan de gap van het koopblok */
.vg-product__verzending {
	margin-top: -6px;
	color: var(--vg-meta);
	font-size: .9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Hint van een verzendregel onder de verzendregel (0.27.0, Bol): "gratis verzending vanaf € 25 per bestelling"; klein,
   één regel, dicht onder de verzendregel */
.vg-product__verzendhint {
	margin-top: -8px;
	color: var(--vg-meta);
	font-size: .8125rem;
	line-height: 1.35;
}

.vg-product__shop strong,
.vg-offer__shop strong {
	color: var(--vg-kop);
}

/* Maten op voorraad (0.33.2, was één tekstregel "Maten bij {winkel}: …"): kopje, dan elke maat als label (vg_maten_lijst());
   zacht vlak zonder rand en zonder hover, want het zijn geen knoppen: de maat kies je bij de winkel */
.vg-product__maten {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 2px;
}

.vg-product__maten-kop {
	color: var(--vg-kop);
	font-size: .875rem;
	font-weight: 700;
}

.vg-maten {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-maten li {
	min-width: 44px;
	padding: 5px 10px;
	background: var(--vg-zacht);
	border-radius: var(--vg-radius-s);
	color: var(--vg-kop);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.vg-maten .vg-maten__meer {
	background: transparent;
	color: var(--vg-meta);
}

.vg-product__maten-noot {
	color: var(--vg-meta);
	font-size: .8125rem;
}

/* Eén kleine regel onder de knop (0.33.2): "Levertijd 1-3 dagen · Prijs gezien op 27 september 2026" */
.vg-product__meta {
	margin-top: -2px;
	color: var(--vg-meta);
	font-size: .8125rem;
	line-height: 1.5;
}

.vg-product__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: .875rem;
	color: var(--vg-meta);
}

.vg-product__uit {
	padding: 12px 14px;
	background: var(--vg-zacht);
	border-radius: var(--vg-radius-s);
	font-size: .9375rem;
	color: var(--vg-tekst);
}

.vg-product__desc {
	max-width: 70ch;
}

.vg-product__desc > * + * {
	margin-top: .8em;
}

.vg-product .vg-disclosure {
	margin-top: 0;
}

/* Kenmerken als tabel (th = kenmerk, td = waarde) */
.vg-specs {
	width: 100%;
	table-layout: fixed;
	margin: 0;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: .9375rem;
}

.vg-specs th,
.vg-specs td {
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid var(--vg-rand);
	overflow-wrap: anywhere;
}

.vg-specs th {
	width: 38%;
	color: var(--vg-meta);
	font-weight: 600;
	background: var(--vg-zacht);
}

.vg-specs td {
	color: var(--vg-kop);
}

.vg-specs tr:first-child th,
.vg-specs tr:first-child td {
	border-top: 0;
}

/* Ritme in de infokolom: titel, koopblok, winkels (of de melding), kleuren, vergelijkbare modellen, kenmerken */
.vg-product__info {
	min-width: 0;
}

.vg-product__info > * + * {
	margin-top: 20px;
}

.vg-product__info > .vg-h2 {
	margin-top: 28px;
}

.vg-product__info > .vg-h2 + * {
	margin-top: 12px;
}

/* Affiliate-melding (0.33.2) direct onder de koopkaart als er geen winkeltabel is; anders onder de tabel */
.vg-product__info > .vg-disclosure--koop {
	margin-top: 10px;
}

.vg-winkels > .vg-disclosure {
	margin-top: 8px;
}

/* Andere kleuren: chips met rond thumbnail en kleurnaam; huidige kleur met aria-current */
.vg-kleuren__titel,
.vg-winkels__titel {
	margin-bottom: 10px;
	font-size: 1.0625rem;
	letter-spacing: 0;
}

.vg-kleuren__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-kleur {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 4px 14px 4px 4px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	color: var(--vg-kop);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}

.vg-kleur--tekst {
	padding-left: 14px;
}

.vg-kleur__thumb {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 2px;
	background: #fff;
	border: 1px solid var(--vg-rand);
	border-radius: 50%;
	object-fit: contain;
}

.vg-kleur:hover {
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

.vg-kleur:focus-visible {
	box-shadow: var(--vg-focus);
}

.vg-kleur[aria-current] {
	background: var(--vg-zacht);
	border-color: var(--vg-kop);
	box-shadow: inset 0 0 0 1px var(--vg-kop);
	color: var(--vg-kop);
	font-weight: 700;
}

.vg-kleur[aria-current]:focus-visible {
	box-shadow: inset 0 0 0 1px var(--vg-kop), var(--vg-focus);
}

/* Ook verkrijgbaar bij: compacte prijstabel, knop rechts */
.vg-winkels__wrap {
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

.vg-winkels__tabel {
	font-size: .9375rem;
}

.vg-winkels__tabel th,
.vg-winkels__tabel td {
	padding: 8px 12px;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid var(--vg-rand);
}

.vg-winkels__tabel thead th {
	border-top: 0;
	background: var(--vg-zacht);
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 600;
}

.vg-winkels__tabel tbody th {
	color: var(--vg-kop);
	font-weight: 700;
}

.vg-winkels__prijs {
	color: var(--vg-accent-donker);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vg-winkels__prijs--onbekend {
	color: var(--vg-meta);
	font-size: .875rem;
	font-weight: 600;
	white-space: normal;
}

/* Verzendregel onder de prijs (0.23.0): "+ € 5,50 verzending", "gratis verzending" of "excl. verzendkosten" */
.vg-winkels__verzending {
	display: block;
	margin-top: 2px;
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 600;
	white-space: normal;
}

/* Hint van een verzendregel (0.27.0, Bol): "gratis verzending vanaf € 25 per bestelling", klein onder de verzendregel */
.vg-winkels__hint {
	display: block;
	margin-top: 1px;
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 400;
	white-space: normal;
}

/* Maten van die winkel onder de verzendregel (0.26.1): "Maten: 36, 37, 38", klein; niet bij Bol. 0.33.2: elke maat een span
   die niet afbreekt (vg_maten_html()), dus nooit "31-" op de ene en "32" op de volgende regel */
.vg-winkels__maten {
	display: block;
	margin-top: 2px;
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 400;
	white-space: normal;
}

.vg-winkels__maten span {
	white-space: nowrap;
}

.vg-winkels__actie {
	text-align: right;
}

.vg-winkels__actie .vg-btn {
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

.vg-winkels__actie .vg-btn:hover {
	background: var(--vg-accent-donker);
	border-color: var(--vg-accent-donker);
	color: #fff;
}

@media (min-width: 480px) {
	.vg-winkels__tabel th,
	.vg-winkels__tabel td {
		padding: 10px 14px;
	}

	.vg-winkels__actie .vg-btn {
		white-space: nowrap;
	}
}

/* Smalle winkeltabel (0.33.2; mobiel en de rechterkolom tussen 800 en ± 1.000 px): de tabel liep daar buiten beeld (knoppen
   half zichtbaar, maten over vier regels). Onder 30rem kolombreedte is elke rij een blok: winkel links en de knop rechts op
   de eerste regel, daaronder prijs en verzending op één regel en de maten over de hele breedte. De kopregel blijft voor
   schermlezers; de role-attributen in single-product.php houden het een tabel. Container query: de kolom telt, niet het venster. */
.vg-winkels {
	container: vg-winkels / inline-size;
}

@container vg-winkels (max-width: 29.99rem) {
	.vg-winkels__tabel,
	.vg-winkels__tabel tbody {
		display: block;
	}

	.vg-winkels__tabel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.vg-winkels__tabel tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 12px;
		padding: 12px 14px;
		border-top: 1px solid var(--vg-rand);
	}

	.vg-winkels__tabel tbody tr:first-child {
		border-top: 0;
	}

	.vg-winkels__tabel tbody th,
	.vg-winkels__tabel tbody td {
		display: block;
		padding: 0;
		border-top: 0;
	}

	.vg-winkels__tabel .vg-winkels__prijs {
		grid-column: 1 / -1;
		white-space: normal;
	}

	.vg-winkels__tabel .vg-winkels__actie {
		grid-column: 2;
		grid-row: 1;
	}

	.vg-winkels__bedrag {
		margin-right: 8px;
		white-space: nowrap;
	}

	.vg-winkels__verzending {
		display: inline;
		margin-top: 0;
	}
}

/* Eén winkel (B3): vergelijkbare modellen op de plek van de winkeltabel, zelfde kaartvorm; elke rij
   één link naar de eigen productpagina (geen affiliate-link) */
.vg-vergelijk__titel {
	margin-bottom: 10px;
	font-size: 1.0625rem;
	letter-spacing: 0;
}

.vg-vergelijk__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	overflow: hidden;
}

.vg-vergelijk__lijst > li + li {
	border-top: 1px solid var(--vg-rand);
}

.vg-vergelijk__item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	color: var(--vg-tekst);
	text-decoration: none;
	transition: background-color .15s ease;
}

.vg-vergelijk__item:hover {
	background: var(--vg-zacht);
}

.vg-vergelijk__item:focus-visible {
	position: relative;
	box-shadow: inset 0 0 0 2px var(--vg-accent-donker);
	outline: 0;
}

.vg-vergelijk__img {
	display: block;
	width: 56px;
	height: 56px;
	padding: 3px;
	background: #fff;
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	color: var(--vg-meta);
}

.vg-vergelijk__img .vg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.vg-vergelijk__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vg-vergelijk__merk {
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.vg-vergelijk__naam {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	color: var(--vg-kop);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
}

.vg-vergelijk__item:hover .vg-vergelijk__naam {
	color: var(--vg-accent-donker);
}

.vg-vergelijk__prijs {
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vg-vergelijk__kosten,
.vg-vergelijk__bedrag {
	color: var(--vg-accent-donker);
	font-size: 1rem;
	font-weight: 800;
}

.vg-vergelijk__kosten--vanaf {
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 600;
}

.vg-vergelijk__meer {
	margin: 10px 0 0;
	font-size: .9375rem;
	font-weight: 600;
}

@media (min-width: 480px) {
	.vg-vergelijk__item {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 14px;
		padding: 10px 14px;
	}

	.vg-vergelijk__img {
		width: 64px;
		height: 64px;
	}
}

@media (min-width: 800px) {
	/* Twee kolommen (0.25.9, Sjoerd 25-09 21:40 "veel lege ruimte tussen foto en tekst"): links beeld, direct daaronder de
	   beschrijving en de categorieën; rechts het koopblok met winkels en kenmerken over de hele hoogte. De derde rij is 1fr,
	   zodat de extra hoogte van de rechterkolom onderaan links terechtkomt en niet als gat tussen beeld en beschrijving.
	   Niet sticky (0.25.7). Bronvolgorde blijft beeld → koopblok → beschrijving, dus mobiel ongewijzigd. */
	.vg-product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		gap: 40px;
	}

	.vg-product__media {
		padding: 32px;
		grid-column: 1;
		grid-row: 1;
	}

	.vg-product__info {
		grid-column: 2;
		grid-row: 1 / span 3;
	}

	.vg-product__description,
	.vg-product__byline {
		grid-column: 1;
		grid-row: 2;
		padding-top: 0;
	}

	.vg-product__cats {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
		padding-top: 0;
	}

	.vg-product__offer,
	.vg-offer {
		padding: 20px;
	}

	.vg-product__offer .vg-btn--accent,
	.vg-offer .vg-btn--accent {
		align-self: flex-start;
		min-width: 260px;
	}
}

/* ---------- Footer ---------- */
.vg-footer {
	margin-top: 48px;
	padding-block: 32px 24px;
	background: var(--vg-footer-bg, var(--vg-kop));
	color: var(--vg-footer-tekst, #e9dfd4);
	font-size: .9375rem;
}

.vg-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.vg-footer h2,
.vg-footer h3,
.vg-footer__titel {
	margin-bottom: 10px;
	color: #fff;
	font-size: 1rem;
	letter-spacing: 0;
}

.vg-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-footer li + li {
	margin-top: 4px;
}

.vg-footer a {
	display: inline-block;
	padding-block: 4px;
	color: #fff;
	text-decoration: none;
}

.vg-footer a:hover {
	text-decoration: underline;
	color: #fff;
}

.vg-footer a:focus-visible {
	box-shadow: 0 0 0 3px var(--vg-footer-bg, var(--vg-kop)), 0 0 0 5px #fff;
}

.vg-footer__meta {
	color: var(--vg-footer-meta, #cfc2b4);
}

.vg-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .8125rem;
	color: var(--vg-footer-meta, #cfc2b4);
}

.vg-footer .vg-logo {
	color: #fff;
	margin-bottom: 10px;
}

.vg-footer .vg-logo span {
	color: var(--vg-footer-accent, #f0a283);
}

.vg-footer .vg-logo--beeld {
	color: #fff;
	margin-bottom: 0;
}

.vg-footer .vg-logo__tld,
.vg-footer .vg-logo__dot {
	color: var(--vg-footer-accent, #f0a283);
}

.vg-footer .vg-logo .vg-logo__svg {
	height: 26px;
}

@media (min-width: 700px) {
	.vg-footer {
		margin-top: 64px;
		padding-block: 48px 28px;
	}

	.vg-footer__cols {
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 32px;
	}

	/* Extra kolommen uit config footer.kolommen (B12): twee rijen van twee tot er ruimte is. */
	.vg-footer__cols--extra {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1000px) {
	.vg-footer__cols--extra {
		grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
	}
}

/* ---------- 404 en zoeken ---------- */
.vg-leeg,
.vg-404 {
	max-width: 620px;
	padding-block: 24px;
}

.vg-leeg > * + *,
.vg-404 > * + * {
	margin-top: 14px;
}

.vg-404__code {
	color: var(--vg-accent-donker);
	font-size: clamp(3.5rem, 2.5rem + 5vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.04em;
}

.vg-404 .vg-search,
.vg-leeg .vg-search {
	margin-top: 20px;
}

/* 0.52.36: alternatieven op een lege categorie (template-parts/categorie-alternatief.php) */
.vg-alternatief {
	padding-block: 8px 32px;
}

.vg-alternatief > * + * {
	margin-top: 16px;
}

.vg-alternatief .vg-antwoord {
	max-width: 68ch;
}

/* 0.53.3: verwijzing naar een winkel die we niet kunnen tonen (template-parts/merk-extern.php). */
.vg-extern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-left: 4px solid var(--vg-accent-donker);
	border-radius: var(--vg-radius-s);
	max-width: 68ch;
}

.vg-extern__tekst {
	flex: 1 1 260px;
	margin: 0;
}

.vg-extern__knop {
	flex: 0 0 auto;
}

/* 0.53.0: lege merkpagina met alternatieven (template-parts/merk-alternatieven.php); pillen, kaarten en chips zijn de bestaande. */
.vg-alternatieven > * + * {
	margin-top: 14px;
}

.vg-alternatieven > .vg-h2 {
	margin-top: 28px;
}

.vg-alternatieven__sub {
	color: var(--vg-meta);
	font-size: .9375rem;
}

.vg-alternatieven .vg-chip {
	white-space: normal;
}

.vg-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
	padding: 0;
	list-style: none;
}

.vg-links a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 999px;
	color: var(--vg-kop);
	font-weight: 600;
	font-size: .9375rem;
	text-decoration: none;
}

.vg-links a:hover {
	border-color: var(--vg-accent-donker);
	color: var(--vg-accent-donker);
}

.vg-search-head {
	margin-bottom: 16px;
}

.vg-search-head .vg-search {
	margin-top: 14px;
}

mark,
.vg-mark {
	background: var(--vg-mark, rgba(217, 103, 63, .18));
	color: inherit;
	padding: 0 2px;
	border-radius: 2px;
}

/* ---------- Koopgidsen (B23): gids (/{slug}/), overzicht /advies/ en blok "Lees de gids" ---------- */
/* Tekst op leesbreedte; de voorbeelden (productgrid) en de gidsenkaarten gebruiken de volle breedte. */
.vg-gids__kop,
.vg-toc,
.vg-gids__tekst,
.vg-gids__verder,
.vg-samenvatting,
.vg-gidsen__kop {
	max-width: 760px;
}

.vg-gids__kop .vg-byline {
	margin-top: 10px;
}

/* 0.34.1: uitgelichte afbeelding van een gids (16:9 uit _scripts/uitgelicht) onder de intro, op tekstbreedte. */
.vg-gids__beeld {
	max-width: 760px;
	margin: 18px 0 0;
}

.vg-gids__beeld img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

/* Antwoord-eerst-alinea onder de H1 */
.vg-antwoord {
	max-width: 72ch;
	margin-top: 14px;
	color: var(--vg-kop);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.vg-antwoord > * + * {
	margin-top: .8em;
}

/* Inhoudsopgave */
.vg-toc {
	margin-top: 24px;
	padding: 14px 18px 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

.vg-toc__titel {
	margin-bottom: 6px;
	color: var(--vg-kop);
	font-weight: 700;
}

.vg-toc__lijst {
	padding-left: 1.4em;
}

.vg-toc__lijst li + li {
	margin-top: 4px;
}

.vg-toc__lijst a {
	text-decoration: none;
}

.vg-toc__lijst a:hover,
.vg-toc__lijst a:focus-visible {
	text-decoration: underline;
}

/* Vergelijkingstabel (in .vg-prose): op smalle schermen horizontaal scrollen in .vg-table-wrap */
.vg-gids__tekst {
	margin-top: 28px;
}

.vg-gids__tabel table {
	min-width: 560px;
}

.vg-gids__tabel caption {
	padding-bottom: 8px;
	caption-side: top;
	text-align: left;
	color: var(--vg-kop);
	font-weight: 700;
}

.vg-gids__tabel tbody th {
	background: none;
}

/* Voorbeelden uit ons aanbod: productkaarten met de toelichting uit de gids */
.vg-gids__voorbeelden .vg-grid {
	margin-top: 16px;
}

.vg-card__notitie {
	color: var(--vg-tekst);
	font-size: .8125rem;
	line-height: 1.45;
}

/* Verder kijken */
.vg-gids__verder {
	margin-top: 32px;
}

.vg-gids__voorbeelden + .vg-gids__verder {
	margin-top: 0;
}

.vg-gids__verder .vg-chips {
	margin-top: 12px;
}

/* Samenvatting: citeerbaar blok onderaan */
.vg-samenvatting {
	margin-top: 32px;
	padding: 16px 18px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-left: 4px solid var(--vg-accent);
	border-radius: var(--vg-radius-s);
}

.vg-samenvatting > * + * {
	margin-top: 10px;
}

.vg-samenvatting ul {
	padding-left: 1.25em;
}

.vg-samenvatting li + li {
	margin-top: 6px;
}

/* Overzicht /advies/: kaarten, de hele kaart klikbaar via de titel-link */
.vg-gidsen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 24px;
	padding: 0;
	list-style: none;
}

.vg-gidsen > li {
	display: flex;
	min-width: 0;
}

.vg-gidskaart {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.vg-gidskaart:hover {
	border-color: var(--vg-rand-hover);
	box-shadow: var(--vg-schaduw-hover);
}

.vg-gidskaart:focus-within {
	box-shadow: var(--vg-focus);
}

/* 0.34.1: beeld bovenin de gidskaart, tot de randen van de kaart. */
.vg-gidskaart__beeld {
	display: block;
	width: calc(100% + 36px);
	max-width: none; /* 0.35.4: de algemene img-regel (max-width: 100%) hield het beeld 36 px te smal (advies-sessie 27-09). */
	height: auto;
	aspect-ratio: 16 / 9;
	margin: -16px -18px 4px;
	object-fit: cover;
	border-bottom: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius) var(--vg-radius) 0 0;
}

.vg-gidskaart__titel {
	font-size: 1.125rem;
	line-height: 1.3;
}

.vg-gidskaart__titel a {
	color: var(--vg-kop);
	text-decoration: none;
}

.vg-gidskaart__titel a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.vg-gidskaart__titel a:focus-visible {
	box-shadow: none;
}

.vg-gidskaart:hover .vg-gidskaart__titel a {
	color: var(--vg-accent-donker);
}

.vg-gidskaart__tekst {
	font-size: .9375rem;
}

.vg-gidskaart__datum {
	margin-top: auto;
	color: var(--vg-meta);
	font-size: .8125rem;
}

/* Categoriepagina: blok "Lees de gids" onder het grid, boven de categorietekst */
.vg-gidslink-wrap {
	padding-bottom: 16px;
}

.vg-gidslink {
	max-width: 72ch;
	padding: 12px 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-left: 4px solid var(--vg-accent);
	border-radius: var(--vg-radius-s);
}

.vg-gidslink__label {
	color: var(--vg-kop);
	font-weight: 700;
}

.vg-gidslink ul {
	margin-top: 4px;
	padding-left: 1.2em;
}

.vg-gidslink li + li {
	margin-top: 2px;
}

.vg-gidslink a {
	font-weight: 600;
}

@media (min-width: 700px) {
	.vg-antwoord {
		font-size: 1.125rem;
	}

	.vg-gidsen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}

@media (min-width: 1000px) {
	.vg-gidsen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------- Pagina (page.php) ---------- */
.vg-page {
	max-width: 760px;
}

.vg-page .vg-h1 {
	margin-bottom: 16px;
}

/* ---------- Mobiele koopbalk (0.27.0, UX-review bevinding 9) ----------
   Productpagina onder 800 px: vaste balk onderin met de prijs van de hoofdknop en dezelfde knop. Zonder JavaScript en
   vanaf 800 px verborgen; main.js zet .is-zichtbaar zodra de koopknop boven uit beeld is en haalt hem weg bij de footer.
   position: fixed en transform, dus geen verschuiving van de pagina (CLS 0); verborgen = visibility hidden (niet
   focusbaar); de onderrand houdt rekening met de veilige zone van telefoons zonder thuisknop. */
.vg-koopbalk {
	display: none;
}

@media (max-width: 799.98px) {
	.vg-js .vg-koopbalk {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		padding: 10px var(--vg-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--vg-kaart);
		border-top: 1px solid var(--vg-rand);
		box-shadow: 0 -8px 20px rgba(43, 33, 24, .12);
		visibility: hidden;
		transform: translateY(110%);
		transition: transform .2s ease, visibility 0s linear .2s;
	}

	.vg-js .vg-koopbalk.is-zichtbaar {
		visibility: visible;
		transform: none;
		transition: transform .2s ease, visibility 0s;
	}
}

.vg-koopbalk__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vg-koopbalk__prijs {
	min-width: 0;
	color: var(--vg-accent-donker);
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.vg-koopbalk__prijs--vanaf {
	color: var(--vg-meta);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: 0;
}

.vg-koopbalk__bedrag {
	color: var(--vg-accent-donker);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -.01em;
}

.vg-koopbalk__knop {
	flex: 0 1 auto;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.vg-js .vg-koopbalk,
	.vg-js .vg-koopbalk.is-zichtbaar {
		transition: none;
	}
}

/* ---------- Beweging ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.vg-card:hover .vg-card__img img,
	.vg-btn:hover .vg-btn__pijl,
	.vg-ingangen a:hover::after {
		transform: none;
	}
}

/* ---------- Print ---------- */
@media print {
	.vg-header,
	.vg-nav,
	.vg-search,
	.vg-sort,
	.vg-filterblok,
	.vg-filters,
	.vg-filters__actief,
	.vg-pagination,
	.vg-footer {
		display: none;
	}

	body {
		background: #fff;
	}
}

/* Chiprij van een themagroep: huidige pagina gemarkeerd (zelfde stijl als de huidige kleur) */
.vg-chip[aria-current] {
	background: var(--vg-zacht);
	border-color: var(--vg-kop);
	box-shadow: inset 0 0 0 1px var(--vg-kop);
	color: var(--vg-kop);
}

/* Vangnet cookiebalk (Complianz, 0.20.3): het sluit-icoon nooit groter dan 24px en een verborgen balk blijft
   verborgen, ook vóór de plugin-CSS geladen is (op een trage verbinding verscheen anders een schermvullend kruis). */
#cmplz-cookiebanner-container .cmplz-close svg{width:24px;height:24px}
#cmplz-cookiebanner-container .cmplz-hidden{display:none}

/* ---------- Contactformulier (fase 1.5, page-contact.php) ---------- */
.vg-contact-form {
	max-width: 40rem;
	margin: 1.5rem 0 2rem;
}

.vg-form__veld {
	margin: 0 0 1.1rem;
}

.vg-form__veld label {
	display: block;
	font-weight: 600;
	margin-bottom: .35rem;
}

.vg-form__veld input,
.vg-form__veld select,
.vg-form__veld textarea {
	width: 100%;
	padding: .7rem .8rem;
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius-s);
	background: var(--vg-bg);
	color: inherit;
	font: inherit;
	line-height: 1.4;
}

.vg-form__veld textarea {
	min-height: 10rem;
	resize: vertical;
}

.vg-form__veld input:focus,
.vg-form__veld select:focus,
.vg-form__veld textarea:focus {
	outline: none;
	border-color: var(--vg-accent-donker);
	box-shadow: var(--vg-focus);
}

.vg-form__hulp,
.vg-form__privacy {
	font-size: .9rem;
	margin: .35rem 0 0;
	opacity: .85;
}

.vg-form__privacy {
	margin: 0 0 1rem;
}

.vg-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vg-form__melding {
	margin: 1rem 0;
	padding: .9rem 1rem;
	border-radius: var(--vg-radius-s);
	border: 1px solid var(--vg-rand);
	background: var(--vg-zacht);
}

.vg-form__melding--ok {
	border-color: var(--vg-groen-tekst);
}

.vg-form__melding--fout {
	border-color: var(--vg-accent-donker);
}

/* ---------- Aanbiedingen (0.33.0, archive-aanbiedingen.php) ---------- */
/* Kaart: de regels onder prijs en winkel, over de volle breedte (ook op brede kaarten). 0.35.0: de regel "Eerder vanaf € X
   −Z%" (.vg-card__daling met de pil .vg-card__pct) is vervallen: het percentage staat als label op de foto en "eerder € X"
   naast het bedrag; "Sinds …" is de eerste regel onder de winkel. */
.vg-card__sinds,
.vg-card__maat {
	flex: 1 0 100%;
	order: 3;
	color: var(--vg-meta);
	font-size: .8125rem;
	line-height: 1.35;
}

.vg-card__sinds {
	margin-top: 4px;
}

.vg-card__maat {
	font-size: .75rem;
}

/* 0.35.0 (besluit Sjoerd 27-09, "naast elkaar, zonder streep"): op een sale- of dalingkaart het percentage als label op de
   foto (plek en vorm van .vg-card .vg-badge, groene pil met witte tekst, geen rood) en de voor-prijs ("van € 34,99" van de
   winkel, "eerder € 39,95" uit onze meting) als eigen flex-item direct na het bedrag: dezelfde baseline, gedempt, nooit
   doorgestreept. Past hij niet naast het bedrag (smalle kaart, twee kolommen op 375 px), dan gaat hij als geheel naar de
   regel eronder (nowrap binnen het item, flex-wrap in .vg-card__meta). De winkel staat op zo'n kaart ook op een brede kaart
   op een eigen regel; anders zou "bij {winkel}" naast bedrag en voor-prijs met een ellips inkorten. */
.vg-badge--korting {
	background: var(--vg-groen-tekst);
	border-color: var(--vg-groen-tekst);
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.vg-card__meta--voor .vg-card__price {
	margin-right: 3px;
}

/* 0.35.2 (variant A, Sjoerd 27-09): de oude prijs doorgestreept naast het bedrag, gedempt en dun; daaronder één gedempte regel
   (.vg-card__regel: verzending · winkel · sinds). De tekst "van € 34,99" staat alleen in het aria-label. */
.vg-card__meta--aanbieding .vg-card__price {
	margin-right: 4px;
}

.vg-card__voor {
	color: var(--vg-meta);
	font-size: .875rem;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	white-space: nowrap;
}

.vg-card__regel {
	flex: 1 0 100%;
	order: 2;
	margin-top: 4px;
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.35;
}

@container (min-width: 260px) {
	.vg-card__meta--voor .vg-card__shop {
		flex: 1 0 100%;
		order: 2;
	}

	.vg-card__meta--voor .vg-card__sep {
		display: none;
	}
}

/* 0.34.0: de saleregel van de winkel (0.35.0: "van-prijs volgens DGM Outlet", wie de van-prijs noemt; de van-prijs zelf
   staat naast het bedrag) en op een dalingkaart met ook_sale de chip "Ook in de sale"; zelfde maat en kleur als de
   dalingregels, geen rood. */
.vg-card__sale,
.vg-card__ookbij {
	flex: 1 0 100%;
	order: 3;
	color: var(--vg-meta);
	font-size: .8125rem;
	line-height: 1.35;
}

.vg-card__sale {
	margin-top: 4px;
}

.vg-card__chip {
	display: inline-block;
	margin-top: 4px;
	padding: 0 7px;
	border: 1px solid var(--vg-groen-tekst);
	border-radius: 999px;
	color: var(--vg-groen-tekst);
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.5;
}

/* Pagina (0.34.0): blok 1 "Echte prijsdalingen" en blok 2 "In de sale bij de winkel", elk met een kop (h3); het
   sale-blok met één korte alinea over de herkomst van de korting. */
.vg-aanb-blok + .vg-aanb-blok {
	margin-top: 28px;
}

.vg-aanb-blok__kop {
	margin: 0 0 12px;
}

.vg-aanb-blok__intro {
	max-width: 72ch;
	margin: -4px 0 14px;
	color: var(--vg-meta);
	font-size: .9375rem;
}

/* Pagina: regel onder de H1, testmelding, Black Friday-blok, merkchips, knop naar de merkcategorie, uitleg */
.vg-aanb-regel,
.vg-aanb-intro {
	max-width: 72ch;
	margin-top: 10px;
}

.vg-aanb-sim {
	margin: 12px 0 0;
	padding: 10px 14px;
	border: 1px dashed var(--vg-accent-donker);
	border-radius: var(--vg-radius-s);
	background: var(--vg-zacht);
	font-size: .875rem;
}

.vg-aanb-bf {
	margin-top: 20px;
	padding: 16px 18px;
	border: 2px solid var(--vg-accent-donker);
	border-radius: var(--vg-radius);
	background: var(--vg-kaart);
}

.vg-aanb-bf > * + * {
	margin-top: 8px;
}

.vg-aanb-bf__gids a {
	color: var(--vg-accent-donker);
	font-weight: 600;
}

.vg-aanb-merken__aantal {
	margin-left: 6px;
	color: var(--vg-meta);
	font-weight: 500;
}

.vg-aanb-meer {
	margin-top: 20px;
}

.vg-aanb-uitleg {
	max-width: 72ch;
}

.vg-aanb-uitleg .vg-intro {
	margin-top: 10px;
}

/* Home: Black Friday-tegel onder de hero (alleen in het venster) */
.vg-aanb-tegel__vak {
	padding: 18px 20px;
	border: 2px solid var(--vg-accent-donker);
	border-radius: var(--vg-radius);
	background: var(--vg-kaart);
	box-shadow: var(--vg-schaduw);
}

.vg-aanb-tegel__vak > * + * {
	margin-top: 8px;
}

.vg-aanb-tegel__actie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.vg-aanb-tegel__aantal {
	color: var(--vg-meta);
	font-size: .9375rem;
}

/* ======================================================================================================================
   0.37.0: eigen opbouw sloffenwinkel (richting A "de slofkiezer, advies eerst"). Alleen nieuwe klassen, dus pantoffelwinkel
   ziet er hetzelfde uit. Tokens met terugval: --vg-accent-tint (label, gekozen chip) en --vg-accent-tint-tekst (10,5 : 1 op
   de tint bij sloffenwinkel). Kiezer-opties, knoppen en behoefte-chips hebben een raakvlak van minstens 44 px.
   ====================================================================================================================== */

/* ---------- Kiezer (home) ---------- */
.vg-kiezer {
	padding: 28px 0 32px;
	background: var(--vg-kopbalk, var(--vg-kaart));
	border-bottom: 1px solid var(--vg-rand);
}

.vg-kiezer__boven {
	margin: 0 0 6px;
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vg-kiezer__titel {
	margin: 0;
}

.vg-kiezer__uitleg {
	max-width: 60ch;
	margin: 8px 0 0;
	color: var(--vg-tekst-2, var(--vg-tekst));
}

.vg-kiezer__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 18px 32px;
	margin-top: 22px;
}

.vg-kiezer__vraag {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vg-kiezer__legend {
	margin-bottom: 8px;
	padding: 0;
	color: var(--vg-kop);
	font-size: .9375rem;
	font-weight: 700;
}

.vg-kiezer__opties {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vg-kiezer__optie {
	position: relative;
	display: inline-flex;
}

.vg-kiezer__optie input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vg-kiezer__optie span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	background: var(--vg-bg);
	border: 1px solid var(--vg-rand-hover, var(--vg-rand));
	border-radius: 999px;
	color: var(--vg-kop);
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.vg-kiezer__optie input:hover + span {
	border-color: var(--vg-accent);
}

.vg-kiezer__optie input:checked + span {
	background: var(--vg-accent-tint, #f6e7df);
	border-color: var(--vg-accent);
	box-shadow: inset 0 0 0 1px var(--vg-accent);
	color: var(--vg-accent-tint-tekst, var(--vg-kop));
}

.vg-kiezer__optie input:focus-visible + span {
	box-shadow: var(--vg-focus);
}

.vg-kiezer__knop {
	min-height: 48px;
	padding-inline: 22px;
}

.vg-kiezer__knop:disabled {
	cursor: not-allowed;
	opacity: .6;
}

/* 0.37.1: gedimde keuze (geeft 0 met de andere keuzes; blijft kiesbaar), voorstel onder de knop en de melding op de
   categorie. Gedimd = meta-kleur (5,2 : 1 op de pagina) en een gestippelde rand, geen opacity. */
.vg-kiezer__optie--leeg span {
	border-style: dashed;
	color: var(--vg-meta);
	font-weight: 500;
}

.vg-kiezer__optie--leeg input:checked + span {
	color: var(--vg-accent-tint-tekst, var(--vg-kop));
}

.vg-kiezer__voorstel {
	flex-basis: 100%;
	margin: -6px 0 0;
	color: var(--vg-tekst-2, var(--vg-tekst));
}

.vg-kiezer__voorstel a {
	font-weight: 700;
}

.vg-kiezer-melding {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--vg-accent-tint, #f6e7df);
	border-left: 3px solid var(--vg-accent);
	border-radius: 6px;
	color: var(--vg-accent-tint-tekst, var(--vg-kop));
}

/* ---------- Pasvorm per merk (home) ---------- */
.vg-pasvorm-tabel {
	width: 100%;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-collapse: collapse;
	font-size: .9375rem;
}

.vg-pasvorm-tabel th,
.vg-pasvorm-tabel td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--vg-rand);
	text-align: left;
	vertical-align: top;
}

.vg-pasvorm-tabel thead th {
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vg-pasvorm-tabel tbody th {
	font-family: var(--vg-font-kop, var(--vg-font));
	font-weight: 600;
	white-space: nowrap;
}

/* 01-10 (Sjoerd: tabel op mobiel): onder 600 px een kaartje per rij: merk en "valt" bovenaan, model eronder, advies op
   volle breedte. De koprij blijft voor schermlezers (visueel verborgen); de tabelrollen blijven. */
@media (max-width: 599px) {
	.vg-pasvorm-home .vg-table-wrap {
		overflow: visible;
	}

	.vg-pasvorm-tabel,
	.vg-pasvorm-tabel tbody {
		display: block;
		border: 0;
		background: none;
	}

	.vg-pasvorm-tabel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.vg-pasvorm-tabel tbody tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 2px 12px;
		margin-bottom: 10px;
		padding: 12px 14px;
		background: var(--vg-kaart);
		border: 1px solid var(--vg-rand);
		border-radius: 8px;
	}

	.vg-pasvorm-tabel tbody th,
	.vg-pasvorm-tabel tbody td {
		padding: 0;
		border: 0;
	}

	.vg-pasvorm-tabel tbody th {
		grid-column: 1;
		grid-row: 1;
		white-space: normal;
	}

	.vg-pasvorm-tabel tbody td:nth-of-type(1) {
		grid-column: 1 / -1;
		grid-row: 2;
		color: var(--vg-meta);
		font-size: .875rem;
	}

	.vg-pasvorm-tabel tbody td:nth-of-type(2) {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		padding: 2px 8px;
		border-radius: 6px;
		background: var(--vg-accent-tint, var(--vg-rand));
		color: var(--vg-accent-tint-tekst, var(--vg-kop));
		font-size: .8125rem;
		font-weight: 600;
	}

	.vg-pasvorm-tabel tbody td:nth-of-type(3) {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 6px;
	}
}

/* ---------- Band (home) ---------- */
.vg-band {
	padding: 28px 0;
	background: var(--vg-accent);
	color: #fff;
}

.vg-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 24px;
}

.vg-band__kop {
	margin: 0;
	color: #fff;
	font-size: 1.5rem;
}

.vg-band__regel {
	margin: 4px 0 0;
	color: #fff;
}

.vg-band__regel a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.vg-band__regel a:hover {
	text-decoration-thickness: 2px;
}

.vg-band__knop {
	background: #fff;
	border-color: #fff;
	color: var(--vg-accent);
}

.vg-band__knop:hover {
	background: var(--vg-bg);
	color: var(--vg-accent);
}

.vg-band__knop:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* ---------- Genummerde lijst (home) ---------- */
.vg-lijst__items {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vg-rand);
}

.vg-lijst__link {
	display: grid;
	grid-template-areas: "nr tekst pijl" "nr vanaf pijl";
	grid-template-columns: 2.6rem 1fr auto;
	align-items: center;
	gap: 2px 14px;
	min-height: 44px;
	padding: 14px 0;
	border-bottom: 1px solid var(--vg-rand);
	color: inherit;
	text-decoration: none;
}

.vg-lijst__nr {
	grid-area: nr;
	color: var(--vg-accent);
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
}

.vg-lijst__tekst {
	grid-area: tekst;
	min-width: 0;
}

.vg-lijst__titel {
	display: block;
	color: var(--vg-kop);
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1.125rem;
	font-weight: 600;
}

.vg-lijst__uitleg {
	display: block;
	color: var(--vg-meta);
	font-size: .875rem;
}

.vg-lijst__vanaf {
	grid-area: vanaf;
	color: var(--vg-tekst);
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
}

.vg-lijst__pijl {
	grid-area: pijl;
	color: var(--vg-accent);
	font-size: 1.25rem;
}

.vg-lijst__link:hover .vg-lijst__titel {
	text-decoration: underline;
}

@media (min-width: 700px) {
	.vg-lijst__link {
		grid-template-areas: "nr tekst vanaf pijl";
		grid-template-columns: 3rem 1fr auto auto;
	}
}

/* ---------- Merkenindex A-Z (home) ---------- */
.vg-merkindex__kolommen {
	columns: 2 10rem;
	column-gap: 24px;
}

.vg-merkindex__groep {
	margin-bottom: 14px;
	break-inside: avoid;
}

.vg-merkindex__letter {
	margin: 0 0 2px;
	color: var(--vg-accent);
	font-size: 1.125rem;
}

.vg-merkindex__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-merkindex__lijst a {
	display: inline-block;
	padding: 4px 0;
	color: var(--vg-tekst);
	text-decoration: none;
}

.vg-merkindex__lijst a:hover {
	color: var(--vg-accent);
	text-decoration: underline;
}

@media (min-width: 700px) {
	.vg-merkindex__kolommen {
		columns: 4 10rem;
	}
}

@media (min-width: 1000px) {
	.vg-merkindex__kolommen {
		columns: 6 9rem;
	}
}

/* ---------- Tekstregel onderaan (home) ---------- */
.vg-regel__tekst {
	margin: 0;
	color: var(--vg-meta);
	font-size: .9375rem;
	text-align: center;
}

/* ---------- Behoefte-chips (categorie) ---------- */
.vg-toolbar > .vg-behoefte {
	flex: 1 0 100%;
	min-width: 0; /* 0.38.13: anders rekt een scrollende chiprij de pagina op */
}

.vg-behoefte__rij {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 8px;
}

.vg-behoefte__label {
	min-width: 8.5em;
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 700;
}

.vg-chip--behoefte {
	min-height: 44px;
}

/* 0.38.13: op mobiel elke groep één horizontaal scrollende rij; 0.38.18 (lange vraag "Wat vind je belangrijk bij het kiezen
   van sloffen?"): het label erboven, alleen de chips vegen (de rij loopt door tot de schermrand, de volgende chip half zichtbaar). */
@media (max-width: 599px) {
	.vg-behoefte__rij {
		display: block;
		margin-bottom: 10px;
	}

	.vg-behoefte__label {
		display: block;
		min-width: 0;
		margin-bottom: 4px;
	}

	.vg-behoefte__rij .vg-chips {
		flex-wrap: nowrap;
		margin-right: -16px;
		padding-right: 16px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.vg-behoefte__rij .vg-chips::-webkit-scrollbar {
		display: none;
	}

	.vg-behoefte__rij .vg-chips li {
		flex: none;
	}
}

.vg-chip--behoefte[aria-current] {
	background: var(--vg-accent-tint, var(--vg-zacht));
	border-color: var(--vg-accent);
	box-shadow: inset 0 0 0 1px var(--vg-accent);
	color: var(--vg-accent-tint-tekst, var(--vg-kop));
}

/* ---------- Kaart: label en vinkjes ---------- */
.vg-card__label {
	align-self: flex-start;
	margin: 2px 0 0;
	padding: 2px 8px;
	background: var(--vg-accent-tint, #f6e7df);
	border-radius: 999px;
	color: var(--vg-accent-tint-tekst, var(--vg-kop));
	font-size: .75rem;
	font-weight: 700;
}

.vg-card__vink {
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--vg-meta);
	font-size: .75rem;
}

.vg-card__vink li::before {
	content: "\2713\00a0";
	color: var(--vg-accent);
	font-weight: 700;
}

/* ---------- Productpagina: Past deze slof bij jou? ---------- */
.vg-past {
	margin: 12px 0 16px;
	padding: 14px 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

.vg-past__kop {
	margin: 0 0 8px;
	font-size: 1.0625rem;
}

.vg-past__lijst {
	display: grid;
	gap: 8px;
	margin: 0;
}

.vg-past__rij {
	display: grid;
	grid-template-columns: 6.5em 1fr;
	gap: 10px;
}

.vg-past__rij dt {
	color: var(--vg-kop);
	font-size: .875rem;
	font-weight: 700;
}

.vg-past__rij dd {
	margin: 0;
	font-size: .9375rem;
}

.vg-past__noot {
	display: block;
	color: var(--vg-meta);
	font-size: .8125rem;
}

/* ---------- Productpagina: Vergelijk met ---------- */
/* Ruimte tussen de kop en de kaarten (0.38.4, Sjoerd 01-10: stonden er tegenaan) bij "Vergelijk met" en de vergelijkbare producten onderaan. */
.vg-vgl > .vg-h2 + *,
.vg-related > .vg-h2 + * {
	margin-top: 16px;
}

.vg-vgl__lijst {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-vgl__item {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
}

.vg-vgl__soort {
	color: var(--vg-accent-tint-tekst, var(--vg-meta));
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vg-vgl__titel {
	color: var(--vg-kop);
	font-weight: 600;
}

.vg-vgl__prijs {
	font-weight: 700;
}

.vg-vgl__reden {
	color: var(--vg-meta);
	font-size: .875rem;
}

@media (min-width: 700px) {
	.vg-vgl__lijst {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Pasvormpagina ---------- */
.vg-pasvorm-merk {
	margin-top: 28px;
	scroll-margin-top: 80px;
}

.vg-pasvorm-merk__geldt {
	margin: 4px 0 10px;
	color: var(--vg-meta);
	font-size: .875rem;
}

.vg-pasvorm-merk__datum {
	display: block;
	color: var(--vg-meta);
	font-size: .8125rem;
}

/* ---------- Home: soorten met een icoon (0.38.11, template-parts/home/soorten.php; 0.38.12 iconen 4:3) ---------- */
.vg-soorten__lijst {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.vg-soorten__tegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 12px 8px 14px;
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: 12px;
	color: var(--vg-kop);
	text-align: center;
	text-decoration: none;
}

.vg-soorten__icoon {
	width: 60px;
	height: 45px;
	margin-bottom: 4px;
}

.vg-soorten__naam {
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.25;
}

.vg-soorten__vanaf {
	color: var(--vg-meta);
	font-size: .8125rem;
}

.vg-soorten__tegel:hover,
.vg-soorten__tegel:focus-visible {
	border-color: var(--vg-accent-donker, var(--vg-accent));
}

.vg-soorten__tegel:hover .vg-soorten__naam {
	text-decoration: underline;
}

@media (min-width: 700px) {
	.vg-soorten__lijst {
		grid-template-columns: repeat(5, 1fr);
		gap: 12px;
	}

	.vg-soorten__icoon {
		width: 72px;
		height: 54px;
	}
}

/* ======================================================================================================================
   Home C "de woonwinkel" (0.39.20, sloffenwinkel): winkelkop met USP-balk, hero met foto, soorten met productfoto,
   pasvormcheck, populair, warm thuis met foto en merkenband. Alleen nieuwe klassen (pantoffelwinkel gebruikt ze niet);
   tokens inkt, zand, zand-2, zand-licht, cognac, cognac-tekst, fit-normaal en fit-groot uit config/sloffenwinkel.php met
   de waarde van sloffenwinkel als terugval. Rechte hoeken, geen schaduwkaarten, contrast door kleurbanden.
   ==================================================================================================================== */

/* ---------- USP-balk en winkelkop ---------- */
/* 0.46.2 (merge enkellaarsjes): .vg-usp en .vg-usp__lijst bestaan ook in opbouw G (enkellaarsjes, eigen regels verderop);
   daarom hier onder :where(body:not(.vg-opbouw-g)) en daar onder :where(.vg-opbouw-g) (specificiteit ongewijzigd), zodat geen
   van beide regels op de andere site lekt. */
:where(body:not(.vg-opbouw-g)) .vg-usp {
	background: var(--vg-inkt, #1e2c3d);
	color: #f6f0e6;
	font-size: .8125rem;
	font-weight: 500;
}

:where(body:not(.vg-opbouw-g)) .vg-usp__lijst {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 30px;
	margin: 0;
	padding: 0 var(--vg-gutter);
	list-style: none;
}

:where(body:not(.vg-opbouw-g)) .vg-usp__lijst li + li::before {
	content: '\00b7';
	margin: 0 14px;
	opacity: .7;
}

.vg-usp__breed {
	display: none;
}

.vg-header--winkel {
	border-bottom-color: var(--vg-zand-2, #e4d8c2);
}

.vg-kop {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "logo knop" "zoek zoek";
	align-items: center;
	gap: 10px 16px;
	padding-block: 12px;
}

.vg-kop__logo {
	grid-area: logo;
	min-width: 0;
}

.vg-kop__zoek {
	grid-area: zoek;
	display: flex;
	min-width: 0;
}

.vg-kop__zoekveld {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	padding: 0 14px;
	background: #fff;
	border: 2px solid #cdc3b2;
	border-radius: 0;
	color: var(--vg-tekst);
}

.vg-kop__zoekveld:focus-visible {
	outline: 2px solid var(--vg-inkt, #1e2c3d);
	outline-offset: 2px;
}

.vg-kop__zoekknop {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 18px;
	background: var(--vg-inkt, #1e2c3d);
	border: 0;
	border-radius: 0;
	color: #fff;
	font-weight: 700;
}

.vg-kop__link {
	display: none;
}

.vg-header--winkel .vg-kop__menuknop {
	grid-area: knop;
	order: 0;
	min-width: 44px;
	padding: 0 8px;
	border: 0;
	border-radius: 0;
	justify-content: center;
}

.vg-kop__nav {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--vg-bg);
	border-bottom: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-kop__nav.is-open {
	display: block;
}

.vg-kop__menu {
	margin: 0;
	padding: 4px var(--vg-gutter) 8px;
	list-style: none;
}

.vg-kop__menu li + li {
	border-top: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-kop__menu a {
	display: flex;
	align-items: center;
	min-height: 46px;
	color: var(--vg-tekst);
	font-weight: 600;
	text-decoration: none;
}

.vg-kop__menu a:hover,
.vg-kop__menu a[aria-current] {
	color: var(--vg-tekst);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .45em;
}

.vg-kop__item--accent a {
	color: var(--vg-cognac, #a85c2e);
}

@media (min-width: 700px) {
	:where(body:not(.vg-opbouw-g)) .vg-usp__lijst {
		min-height: 38px;
	}

	.vg-usp__breed {
		display: list-item;
	}
}

@media (min-width: 900px) {
	.vg-kop {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo zoek link" "nav nav nav";
		gap: 6px 40px;
		padding-block: 18px 0;
	}

	.vg-kop__zoek {
		justify-self: center;
		width: 100%;
		max-width: 620px;
	}

	.vg-kop__zoekveld,
	.vg-kop__zoekknop {
		min-height: 48px;
	}

	.vg-kop__link {
		grid-area: link;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		color: var(--vg-tekst);
		font-weight: 700;
		font-size: .9375rem;
		text-decoration: none;
	}

	.vg-kop__link:hover,
	.vg-kop__link[aria-current] {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: .45em;
	}

	.vg-header--winkel .vg-kop__menuknop {
		display: none;
	}

	.vg-kop__nav,
	.vg-kop__nav.is-open {
		grid-area: nav;
		display: block;
		position: static;
		background: none;
		border: 0;
	}

	.vg-kop__menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0 34px;
		padding: 0;
	}

	.vg-kop__menu li + li {
		border-top: 0;
	}

	.vg-kop__menu a {
		min-height: 48px;
		font-size: .9375rem;
		white-space: nowrap;
	}

	.vg-kop__item--smal {
		display: none;
	}
}

/* ---------- 0.52.14 Winkelkop opgefrist (sloffenwinkel; Sjoerd 06-10) ----------
   Advies & gidsen rechts in de menurij (met icoon en scheidingslijn) in plaats van los rechtsboven; zoekbalk smaller en rechts
   uitgelijnd met dat item; het zoekpaneel krijgt een eigen breedte (de drie kolommen modellen blijven staan) en is hoger;
   logo groter; menu met haarlijn en een inktstreep onder het actieve item. Alleen .vg-header--winkel. */
.vg-kop__zoekknop::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .5em;
	vertical-align: -.14em;
	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='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%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='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vg-header--winkel .vg-kop__zoekveld {
	border-width: 1px;
}

@media (min-width: 900px) {
	.vg-header--winkel {
		border-bottom-width: 1px;
	}

	.vg-header--winkel .vg-header__logo .vg-logo__svg {
		height: 38px;
	}

	.vg-kop {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "logo zoek" "nav nav";
		padding-block: 18px 0;
	}

	.vg-kop__zoek {
		justify-self: end;
		max-width: 560px;
	}

	.vg-kop__link {
		display: none;
	}

	.vg-kop__nav {
		border-top: 1px solid var(--vg-zand-2, #e4d8c2);
		margin-top: 12px;
	}

	.vg-kop__menu a {
		position: relative;
	}

	.vg-kop__menu a:hover,
	.vg-kop__menu a[aria-current] {
		text-decoration: none;
	}

	.vg-kop__menu a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 3px;
		background: var(--vg-inkt, #1e2c3d);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .18s ease-out;
	}

	.vg-kop__menu a:hover::after,
	.vg-kop__menu a[aria-current]::after {
		transform: scaleX(1);
	}

	.vg-kop__item--smal {
		display: list-item;
		margin-left: auto;
		padding-left: 28px;
		border-left: 1px solid var(--vg-zand-2, #e4d8c2);
	}

	.vg-kop__item--smal a::before {
		content: "";
		width: 1.1em;
		height: 1.1em;
		margin-right: .5em;
		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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H20v15H6.5A2.5 2.5 0 0 0 4 20.5z'/%3E%3Cpath d='M4 20.5A2.5 2.5 0 0 0 6.5 23H20v-5'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	/* Het zoekpaneel los van de breedte van de balk: rechts uitgelijnd met de balk, 760 px breed (drie kolommen modellen). */
	.vg-header--winkel .vg-zs {
		width: min(760px, calc(100vw - 2 * var(--vg-gutter)));
		right: 0;
		left: auto;
		max-height: min(80vh, 760px);
	}
}

/* ---------- Hero met foto (sectie held) ---------- */
.vg-held {
	position: relative;
	display: flex;
	width: 100%; /* 0.39.24: zonder vaste breedte maakte min-height + aspect-ratio de hero breder dan het scherm (± 1000-1200 px). */
	align-items: flex-end;
	aspect-ratio: 4 / 5;
	min-height: 440px;
	max-height: 92vh;
	overflow: hidden;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
}

.vg-held__beeld,
.vg-held__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vg-held__img {
	object-fit: cover;
	object-position: 60% 50%;
}

.vg-held::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(16, 22, 30, .88) 0, rgba(16, 22, 30, .6) 38%, rgba(16, 22, 30, 0) 72%);
}

.vg-held__inhoud {
	position: relative;
	z-index: 1;
	padding-block: 32px 28px;
}

.vg-held__label,
.vg-held__zin {
	display: none;
}

.vg-held .vg-held__kop {
	max-width: 13em;
	margin: 0 0 20px;
	color: #fff;
	font-size: clamp(2.375rem, 1.2rem + 4.6vw, 5.5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.02em;
}

.vg-held__kop-2 {
	display: block;
	font-weight: 400;
}

.vg-held__knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.vg-held__knop {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid #fff;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.vg-held__knop:hover {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

.vg-held__knop--vol,
.vg-held__knop--vol:hover {
	background: #fff;
	color: var(--vg-inkt, #1e2c3d);
}

.vg-held__af {
	margin: 16px 0 0;
	font-size: .875rem;
	font-weight: 700;
}

.vg-held__af a {
	color: var(--vg-zand-licht, #e6cdaa);
	text-decoration: none;
}

.vg-held__af a:hover {
	color: #fff;
	text-decoration: underline;
}

@media (min-width: 701px) {
	.vg-held {
		align-items: center;
		aspect-ratio: 9 / 4;
		min-height: 520px;
		max-height: 760px;
	}

	.vg-held__img {
		object-position: 70% 50%;
	}

	.vg-held::after {
		background: linear-gradient(to right, rgba(16, 22, 30, .86) 0, rgba(16, 22, 30, .62) 34%, rgba(16, 22, 30, 0) 66%);
	}

	.vg-held__inhoud {
		padding-block: 48px;
	}

	.vg-held__label {
		display: block;
		margin: 0 0 14px;
		color: var(--vg-zand-licht, #e6cdaa);
		font-size: .875rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
	}

	.vg-held__zin {
		display: block;
		max-width: 26em;
		margin: 0 0 28px;
		color: #ece6da;
		font-family: var(--vg-font-kop, var(--vg-font));
		font-size: 1.25rem;
		line-height: 1.4;
	}

	.vg-held__knop {
		min-height: 52px;
		padding: 0 26px;
	}

	.vg-held__af {
		margin-top: 24px;
		font-size: .9375rem;
	}
}

/* ---------- Kopregel van een sectie: H2 links, link of chips rechts ---------- */
.vg-kopregel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
	margin-bottom: 22px;
}

.vg-kopregel .vg-kopregel__kop {
	margin: 0;
	font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);
	font-weight: 600;
	line-height: 1.1;
}

.vg-kopregel__link {
	color: var(--vg-inkt, #1e2c3d);
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
}

.vg-kopregel__link:hover {
	text-decoration: underline;
}

.vg-home .vg-sfoto,
.vg-home .vg-pop {
	padding-block: 44px;
}

@media (min-width: 700px) {
	.vg-home .vg-sfoto,
	.vg-home .vg-pop {
		padding-block: 72px;
	}
}

/* ---------- Soorten met productfoto (sectie soorten_foto) ---------- */
.vg-sfoto__lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-sfoto__tegel {
	display: block;
	color: var(--vg-tekst);
	text-decoration: none;
}

.vg-sfoto__beeld,
.vg-pop__beeld {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--vg-zand, #ede4d3);
}

.vg-sfoto__beeld .vg-img,
.vg-pop__beeld .vg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 9%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.vg-sfoto__naam {
	display: block;
	margin-top: 12px;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.2;
}

.vg-sfoto__tegel:hover .vg-sfoto__naam {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.vg-sfoto__vanaf {
	display: block;
	margin-top: 2px;
	color: var(--vg-meta);
	font-size: .875rem;
}

.vg-sfoto__meer {
	margin: 28px 0 0;
	color: var(--vg-meta);
	font-size: .9375rem;
}

.vg-sfoto__meer a {
	color: var(--vg-tekst);
	font-weight: 600;
}

@media (min-width: 700px) {
	.vg-sfoto__lijst {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 28px 20px;
	}
}

@media (min-width: 1000px) {
	.vg-sfoto__lijst {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

/* ---------- Pasvormcheck (sectie pasvormcheck) ---------- */
.vg-pcheck {
	display: grid;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
}

.vg-pcheck__beeld {
	display: none;
}

.vg-pcheck__paneel {
	padding: 36px var(--vg-gutter) 40px;
}

.vg-pcheck__label,
.vg-bandf__label {
	margin: 0 0 10px;
	color: var(--vg-zand-licht, #e6cdaa);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vg-pcheck .vg-pcheck__kop {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 3.25rem);
	font-weight: 600;
	line-height: 1.1;
}

.vg-pcheck__zin {
	max-width: 32em;
	margin: 0 0 22px;
	color: #d2d8e2;
}

.vg-pcheck__kies {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-bottom: 22px;
}

.vg-pcheck__select {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0 40px 0 14px;
	background: #fff var(--vg-chevron) no-repeat right 14px center;
	border: 0;
	border-radius: 0;
	color: var(--vg-tekst);
	font-weight: 700;
	appearance: none;
}

.vg-pcheck__select:focus-visible {
	outline: 2px solid var(--vg-zand-licht, #e6cdaa);
	outline-offset: 2px;
}

.vg-pcheck__uitkomst {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 10px 14px;
	background: #6e6556;
	color: #fff;
	font-weight: 700;
}

.vg-pcheck__uitkomst--klein {
	background: var(--vg-cognac, #a85c2e);
}

.vg-pcheck__uitkomst--normaal {
	background: var(--vg-fit-normaal, #566e4a);
}

.vg-pcheck__uitkomst--groot {
	background: #3c5476;
}

.vg-pcheck__tabel {
	margin: 0;
}

.vg-pcheck__tabel tr {
	border-top: 1px solid #3c4c60;
}

.vg-pcheck__tabel th,
.vg-pcheck__tabel td {
	padding: 9px 12px 9px 0;
	text-align: left;
	vertical-align: baseline;
}

.vg-pcheck__tabel th {
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1.125rem;
	font-weight: 600;
}

.vg-pcheck__tabel th a,
.vg-pcheck__link a {
	color: #fff;
	text-decoration: none;
}

.vg-pcheck__tabel th a:hover,
.vg-pcheck__link a:hover {
	color: #fff;
	text-decoration: underline;
}

.vg-pcheck__model {
	display: block;
	color: #aab6c6;
	font-family: var(--vg-font);
	font-size: .8125rem;
	font-weight: 500;
}

.vg-pcheck__valt {
	color: #e6e8ec;
	white-space: nowrap;
}

.vg-pcheck__stip {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	border-radius: 50%;
	background: #8a93a0;
}

.vg-pcheck__stip--klein {
	background: #d9824c;
}

.vg-pcheck__stip--normaal {
	background: #8fb07e;
}

.vg-pcheck__stip--groot {
	background: #9db4d3;
}

.vg-pcheck__advies {
	display: none;
	color: #aab6c6;
	font-size: .9375rem;
}

.vg-pcheck__tabel tr:nth-child(n+4) {
	display: none;
}

.vg-pcheck__link {
	margin: 18px 0 0;
	font-weight: 700;
}

@media (min-width: 700px) {
	.vg-pcheck__advies {
		display: table-cell;
	}

	.vg-pcheck__tabel tr:nth-child(n+4) {
		display: table-row;
	}

	.vg-pcheck__kies {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (min-width: 900px) {
	.vg-pcheck {
		grid-template-columns: 1fr 1fr;
	}

	.vg-pcheck__beeld {
		display: block;
		position: relative;
		min-height: 100%;
	}

	.vg-pcheck__beeld {
		overflow: hidden;
	}

	/* 0.39.21: het beeld (0.92:1) vult het vlak precies; onderkant en woordmerk blijven staan, geen lichte streep. */
	.vg-pcheck__img {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		object-position: left bottom; /* 0.39.24: woordmerk linksonder valt nooit weg */
	}

	.vg-pcheck__paneel {
		max-width: 640px;
		padding: 72px 64px 72px 72px;
	}
}

.vg-pcheck--zonder-beeld {
	grid-template-columns: 1fr;
}

/* ---------- Pasvormlabel op een productfoto (template-parts/pasvorm-label.php) ---------- */
.vg-fit {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px 4px;
	background: #fff;
	color: var(--vg-tekst);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
}

.vg-fit::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vg-cognac, #a85c2e);
}

.vg-fit--normaal::before {
	background: var(--vg-fit-normaal, #566e4a);
}

.vg-fit--groot::before {
	background: var(--vg-fit-groot, #1e2c3d);
}

.vg-fit--wisselend::before {
	background: var(--vg-meta, #6e6556);
}

/* 0.39.32: materiaallabel op de productfoto (vervangt het pasvormlabel op kaarten). */
.vg-mat {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 9px 2px 5px;
	background: #fff;
	color: var(--vg-tekst);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
}

.vg-mat__icoon {
	width: 24px;
	height: auto;
	mix-blend-mode: normal;
}

/* ---------- Populair deze week (sectie populair) ---------- */
.vg-pop__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-pop__chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid #c8bca8;
	color: var(--vg-tekst);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}

a.vg-pop__chip:hover {
	border-color: var(--vg-tekst);
	color: var(--vg-tekst);
}

.vg-pop__chip--aan {
	background: var(--vg-tekst);
	border-color: var(--vg-tekst);
	color: #fff;
}

.vg-pop__rij {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 44%;
	gap: 12px;
	margin: 0 calc(-1 * var(--vg-gutter));
	padding: 0 var(--vg-gutter) 6px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--vg-gutter);
	scrollbar-width: thin;
}

.vg-pop__kaart {
	position: relative;
	min-width: 0;
	scroll-snap-align: start;
}

.vg-pop__beeld {
	aspect-ratio: 10 / 11;
	background: var(--vg-beeldtegel, #f3eee5);
}

.vg-pop__merk {
	margin: 12px 0 2px;
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.vg-pop .vg-pop__model {
	margin: 0 0 6px;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.2;
}

.vg-pop__link {
	color: var(--vg-tekst);
	text-decoration: none;
}

.vg-pop__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vg-pop__kaart:hover .vg-pop__link {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.vg-pop__link:focus-visible {
	outline: none;
}

.vg-pop__link:focus-visible::after {
	outline: 2px solid var(--vg-inkt, #1e2c3d);
	outline-offset: 3px;
}

.vg-pop__prijs {
	margin: 0;
	font-size: 1.0625rem;
}

.vg-pop__prijs strong {
	font-weight: 700;
}

.vg-pop__bedrag {
	font-weight: 700;
}

.vg-pop__winkels {
	margin-left: 6px;
	color: var(--vg-meta);
	font-size: .8125rem;
}

@media (min-width: 700px) {
	.vg-pop__rij {
		grid-auto-columns: 30%;
		gap: 20px;
	}
}

@media (min-width: 1000px) {
	.vg-pop__rij {
		grid-auto-flow: row;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 24px;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
}

/* ---------- Warm thuis met foto (sectie band_foto) ---------- */
.vg-bandf {
	display: grid;
	background: var(--vg-zand, #ede4d3);
}

.vg-bandf__beeld {
	position: relative;
	aspect-ratio: 820 / 441;
	overflow: hidden;
}

.vg-bandf__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vg-bandf__paneel {
	padding: 32px var(--vg-gutter) 40px;
}

.vg-bandf .vg-bandf__label {
	color: var(--vg-cognac-tekst, #944f26);
}

.vg-bandf .vg-bandf__kop {
	margin: 0 0 12px;
	font-size: clamp(1.875rem, 1.4rem + 1.8vw, 3.125rem);
	font-weight: 600;
	line-height: 1.12;
}

.vg-bandf__kop-2 {
	display: block;
	font-weight: 400;
}

.vg-bandf__zin {
	max-width: 30em;
	margin: 0 0 22px;
	color: var(--vg-meta);
}

.vg-bandf__knop {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.vg-bandf__knop:hover {
	background: #2c3f57;
	color: #fff;
}

@media (min-width: 900px) {
	.vg-bandf {
		grid-template-columns: 820fr 620fr;
	}

	.vg-bandf--zonder-beeld {
		grid-template-columns: 1fr;
	}

	.vg-bandf__beeld {
		aspect-ratio: auto;
		min-height: 440px;
	}

	.vg-bandf__paneel {
		align-self: center;
		padding: 64px 72px;
	}
}

/* ---------- Merkenband (sectie merken_band) ---------- */
.vg-mband {
	position: relative;
	overflow: hidden;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
}

.vg-mband__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vg-mband::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(18, 24, 33, .64);
}

.vg-mband__inhoud {
	position: relative;
	z-index: 2;
	padding-block: 44px;
}

.vg-mband .vg-mband__kop {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 600;
}

.vg-mband__lijst {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 32px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.vg-mband__lijst a {
	color: #f0e8da;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem);
	font-weight: 400;
	text-decoration: none;
}

.vg-mband__lijst a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.vg-mband__link {
	margin: 0;
	font-weight: 700;
	font-size: .9375rem;
}

.vg-mband__link a {
	color: var(--vg-zand-licht, #e6cdaa);
	text-decoration: none;
}

.vg-mband__link a:hover {
	color: #fff;
	text-decoration: underline;
}

@media (min-width: 700px) {
	.vg-mband__inhoud {
		padding-block: 60px;
	}

	.vg-mband__lijst {
		gap: 8px 48px;
	}
}

/* ======================================================================================================================
   Pagina's C (0.39.30, sloffenwinkel): categorie, product, kaarten en iconen in de taal van home C. Nieuwe klassen
   (vg-wk, vg-tegel, vg-past--paneel, …) of regels onder .vg-site-sloffenwinkel: pantoffelwinkel ziet hier niets van.
   Rechte hoeken sitebreed (radius-tokens 0 en de vaste radii hieronder); alleen stippen en ronde iconen blijven rond.
   ==================================================================================================================== */
.vg-site-sloffenwinkel {
	--vg-radius: 0;
	--vg-radius-s: 0;
	--vg-schaduw: none;
	--vg-schaduw-hover: none;
}

.vg-site-sloffenwinkel :focus-visible,
.vg-site-sloffenwinkel .vg-search,
.vg-site-sloffenwinkel .vg-themas .vg-thema__subs a,
.vg-site-sloffenwinkel .vg-merk,
.vg-site-sloffenwinkel .vg-intro__vink:focus-visible ~ .vg-intro__meer .vg-intro__lees,
.vg-site-sloffenwinkel .vg-over__auteur,
.vg-site-sloffenwinkel .vg-chip,
.vg-site-sloffenwinkel .vg-swatch,
.vg-site-sloffenwinkel .vg-badge,
.vg-site-sloffenwinkel .vg-kleur,
.vg-site-sloffenwinkel .vg-kleur__thumb,
.vg-site-sloffenwinkel .vg-links a,
.vg-site-sloffenwinkel .vg-mark,
.vg-site-sloffenwinkel .vg-card__chip,
.vg-site-sloffenwinkel .vg-kiezer__optie span,
.vg-site-sloffenwinkel .vg-kiezer-melding,
.vg-site-sloffenwinkel .vg-pasvorm-tabel tbody tr,
.vg-site-sloffenwinkel .vg-pasvorm-tabel tbody td:nth-of-type(2),
.vg-site-sloffenwinkel .vg-card__label,
.vg-site-sloffenwinkel .vg-merken a,
.vg-site-sloffenwinkel mark,
.vg-site-sloffenwinkel .vg-soorten__tegel {
	border-radius: 0;
}

/* ---------- Iconen (inc/iconen.php) ---------- */
.vg-icoon,
.vg-tegel__icoon,
.vg-wk__soort,
.vg-wk__eigicoon,
.vg-specs__icoon,
.vg-kop__icoon,
.vg-vgl__icoon {
	display: inline-block;
	flex: none;
	max-width: none;
	height: auto;
}

/* ---------- Categoriekop: grote serif, geen witte vlakken ---------- */
.vg-site-sloffenwinkel .vg-categorie__kop .vg-h1 {
	font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -.01em;
}

.vg-site-sloffenwinkel .vg-intro table {
	background: transparent;
}

/* ---------- Icoontegels: behoefte, voor wie, open of dicht, warm thuis ---------- */
.vg-behoefte--tegels .vg-behoefte__rij {
	display: block;
	margin-bottom: 16px;
}

.vg-behoefte--tegels .vg-behoefte__label {
	display: block;
	min-width: 0;
	margin-bottom: 8px;
}

.vg-tegels {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--vg-gutter));
	padding: 0 var(--vg-gutter) 4px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.vg-tegels::-webkit-scrollbar {
	display: none;
}

.vg-tegels > li {
	flex: none;
	scroll-snap-align: start;
}

.vg-tegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 104px;
	min-height: 88px;
	height: 100%;
	padding: 10px 14px;
	border: 1px solid var(--vg-zand-2, #e4d8c2);
	color: var(--vg-tekst);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}

.vg-tegel:hover {
	background: var(--vg-beeldtegel, #f3eee5);
	border-color: var(--vg-inkt, #1e2c3d);
	color: var(--vg-tekst);
}

.vg-tegel[aria-current] {
	background: var(--vg-inkt, #1e2c3d);
	border-color: var(--vg-inkt, #1e2c3d);
	color: #fff;
}

.vg-tegel__icoon {
	width: 40px;
	height: 30px;
}

.vg-tegel[aria-current] .vg-tegel__icoon {
	filter: brightness(0) invert(1);
}

.vg-cattegels {
	margin-top: 18px;
}

@media (min-width: 700px) {
	.vg-tegels {
		flex-wrap: wrap;
		margin-inline: 0;
		padding-inline: 0;
		overflow: visible;
	}
}

/* ---------- Filters en sorteren: rechthoekig, 1 px zand-2, geen pillen ---------- */
.vg-site-sloffenwinkel .vg-sort select,
.vg-site-sloffenwinkel .vg-fd__knop,
.vg-site-sloffenwinkel .vg-filterknop,
.vg-site-sloffenwinkel .vg-chip {
	background-color: transparent;
	border-color: var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-sort select:hover,
.vg-site-sloffenwinkel .vg-fd__knop:hover,
.vg-site-sloffenwinkel .vg-filterknop:hover,
.vg-site-sloffenwinkel .vg-chip:hover {
	border-color: var(--vg-inkt, #1e2c3d);
	color: var(--vg-tekst);
}

.vg-site-sloffenwinkel .vg-chip[aria-current],
.vg-site-sloffenwinkel .vg-fp__chip[aria-current="true"] {
	background: var(--vg-inkt, #1e2c3d);
	border-color: var(--vg-inkt, #1e2c3d);
	box-shadow: none;
	color: #fff;
}

.vg-site-sloffenwinkel .vg-fd__panel {
	border-color: var(--vg-zand-2, #e4d8c2);
}

/* ---------- Productkaart (template-parts/product-card-winkel.php): zandvlak 10:11, geen rand, geen schaduw ---------- */
.vg-site-sloffenwinkel .vg-grid {
	gap: 28px 12px;
}

.vg-grid > li > .vg-wk {
	flex: 1;
}

.vg-wk {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vg-wk__beeld {
	position: relative;
	display: block;
	aspect-ratio: 10 / 11;
	overflow: hidden;
	background: var(--vg-beeldtegel, #f3eee5);
	transition: background-color .15s ease;
}

.vg-wk:hover .vg-wk__beeld {
	background: var(--vg-zand, #ede4d3);
}

.vg-wk__beeld .vg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	padding: 9%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.vg-wk__beeld .vg-img--leeg {
	visibility: hidden;
}

.vg-wk__soort {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 96px;
	transform: translate(-50%, -50%);
	opacity: .6;
}

.vg-wk__beeld--leeg .vg-wk__soort,
.vg-img--leeg ~ .vg-wk__soort {
	display: block;
}

.vg-wk__uit {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	padding: 3px 9px 4px;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
}

.vg-wk--uit .vg-wk__beeld .vg-img {
	opacity: .5;
}

.vg-wk__merk {
	margin: 12px 0 2px;
	color: var(--vg-meta);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.vg-wk .vg-wk__titel {
	display: -webkit-box;
	margin: 0 0 6px;
	overflow: hidden;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.vg-wk__link {
	color: var(--vg-tekst);
	text-decoration: none;
}

.vg-wk__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.vg-wk:hover .vg-wk__link {
	text-decoration: underline;
	text-underline-offset: .18em;
}

.vg-wk__link:focus-visible {
	outline: none;
}

.vg-wk__link:focus-visible::after {
	outline: 2px solid var(--vg-inkt, #1e2c3d);
	outline-offset: 3px;
}

.vg-wk__notitie,
.vg-wk__eig,
.vg-wk__meta {
	margin: 0 0 6px;
	color: var(--vg-meta);
	font-size: .8125rem;
	line-height: 1.35;
}

.vg-wk__eig {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vg-wk__eigicoon {
	width: 24px;
	height: 18px;
}

.vg-wk__onder {
	margin-top: auto;
}

.vg-wk__prijs {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vg-wk__prijs--onbekend {
	color: var(--vg-meta);
	font-size: .9375rem;
	font-weight: 600;
}

.vg-wk__meta {
	margin: 2px 0 0;
}

@media (min-width: 700px) {
	.vg-site-sloffenwinkel .vg-grid {
		gap: 32px 20px;
	}

	.vg-wk .vg-wk__titel {
		font-size: 1.0625rem;
	}
}

@media (min-width: 1000px) {
	.vg-site-sloffenwinkel .vg-grid {
		gap: 36px 24px;
	}
}

/* ---------- Productpagina: beeld, koopblok, maten, kleuren ---------- */
.vg-site-sloffenwinkel .vg-product__media {
	border: 0;
	padding: 0; /* 0.47.10: foto vult het vlak */
	--vg-beeld-blend: multiply;
}

/* 0.47.11: mobiel een lager fotovlak (4:3), zodat prijs en knop eerder in beeld zijn. */
@media (max-width: 699px) {
	.vg-site-sloffenwinkel .vg-product__media {
		aspect-ratio: 4 / 3;
	}
}

/* 0.47.10: compacte pasvormregel onder de titel (product-past-regel.php) */
.vg-pasregel {
	display: block;
	margin: 8px 0 18px;
	color: var(--vg-tekst);
	font-size: .9375rem;
	line-height: 1.5;
}

.vg-pasregel__stip {
	display: inline-block;
	margin-right: 7px;
	vertical-align: .05em;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--vg-cognac, #a85c2e);
}

.vg-pasregel__stip--normaal {
	background: var(--vg-fit-normaal, #566e4a);
}

.vg-pasregel__stip--groot {
	background: var(--vg-fit-groot, #1e2c3d);
}

.vg-pasregel__stip--wisselend {
	background: var(--vg-meta, #6e6556);
}

.vg-pasregel__noot {
	color: var(--vg-meta);
	font-size: .8125rem;
}

.vg-site-sloffenwinkel .vg-product__buy {
	background: var(--vg-beeldtegel, #f3eee5);
	border: 0;
}

.vg-site-sloffenwinkel .vg-product__price,
.vg-site-sloffenwinkel .vg-product__bedrag {
	color: var(--vg-tekst);
	font-size: 2.25rem;
}

.vg-site-sloffenwinkel .vg-product__price--vanaf {
	color: var(--vg-meta);
	font-size: 1rem;
}

.vg-site-sloffenwinkel .vg-maten li {
	min-width: 48px;
	padding: 8px 10px;
	background: transparent;
	border: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-maten .vg-maten__meer {
	border-color: transparent;
}

.vg-site-sloffenwinkel .vg-kleur {
	padding-right: 12px;
	background: transparent;
	border-color: var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-kleur:hover {
	border-color: var(--vg-inkt, #1e2c3d);
	color: var(--vg-tekst);
}

.vg-site-sloffenwinkel .vg-kleur__thumb {
	background: var(--vg-beeldtegel, #f3eee5);
	border: 0;
}

.vg-site-sloffenwinkel .vg-kleur[aria-current] {
	background: var(--vg-beeldtegel, #f3eee5);
	border-color: var(--vg-inkt, #1e2c3d);
	box-shadow: inset 0 0 0 1px var(--vg-inkt, #1e2c3d);
}

/* ---------- Kenmerken: alleen horizontale lijnen, labels in de meta-kleur ---------- */
.vg-site-sloffenwinkel .vg-specs {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-specs th,
.vg-site-sloffenwinkel .vg-specs td,
.vg-site-sloffenwinkel .vg-specs tr:first-child th,
.vg-site-sloffenwinkel .vg-specs tr:first-child td {
	border-top: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-specs th {
	padding-left: 0;
	background: transparent;
	font-weight: 500;
}

.vg-specs__icoon {
	width: 28px;
	height: 21px;
	margin-right: 8px;
	vertical-align: -5px;
}

/* ---------- Categorieën onder de productpagina: één regel links met middenpunten ---------- */
.vg-site-sloffenwinkel .vg-product__cats .vg-chips {
	display: block;
	line-height: 1.9;
}

.vg-site-sloffenwinkel .vg-product__cats .vg-chips li {
	display: inline;
}

.vg-site-sloffenwinkel .vg-product__cats .vg-chips li + li::before {
	content: '\00b7';
	margin: 0 .55em;
	color: var(--vg-meta);
}

.vg-site-sloffenwinkel .vg-product__cats .vg-chip {
	display: inline;
	min-height: 0;
	padding: 0;
	border: 0;
	color: var(--vg-inkt, #1e2c3d);
	font-size: .9375rem;
	text-decoration: underline;
	text-decoration-color: var(--vg-zand-2, #e4d8c2);
	text-underline-offset: .22em;
	white-space: normal;
}

.vg-site-sloffenwinkel .vg-product__cats .vg-chip:hover {
	text-decoration-color: currentColor;
}

/* De oude kaart (alleen nog de aanbiedingenkaarten): plat, zonder rand */
.vg-site-sloffenwinkel .vg-card {
	background: transparent;
	border: 0;
}

/* ---------- Vergelijkbare (compacte lijst) en Vergelijk met ---------- */
.vg-site-sloffenwinkel .vg-vergelijk__lijst {
	background: transparent;
	border: 0;
	border-block: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-vergelijk__lijst > li + li {
	border-top-color: var(--vg-zand-2, #e4d8c2);
}

.vg-site-sloffenwinkel .vg-vergelijk__item {
	padding-inline: 0;
}

.vg-site-sloffenwinkel .vg-vergelijk__item:hover {
	background: transparent;
}

.vg-site-sloffenwinkel .vg-vergelijk__img {
	padding: 4px;
	background: var(--vg-beeldtegel, #f3eee5);
	border: 0;
}

.vg-site-sloffenwinkel .vg-vergelijk__img .vg-img {
	mix-blend-mode: multiply;
}

/* 0.39.31: "Vergelijk met" met beeld werd bij drie kolommen te smal (titel over vijf regels). */
@media (min-width: 700px) {
	.vg-site-sloffenwinkel .vg-vgl__lijst {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}

.vg-site-sloffenwinkel .vg-vgl__item {
	padding: 12px 0 0;
	background: transparent;
	border: 0;
	border-top: 2px solid var(--vg-inkt, #1e2c3d);
}

.vg-vgl__item--beeld {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	align-content: start;
	gap: 4px 14px;
}

.vg-vgl__item--beeld > :not(.vg-vgl__beeld) {
	grid-column: 2;
}

.vg-vgl__beeld {
	position: relative;
	display: block;
	grid-row: 1 / span 4;
	width: 72px;
	aspect-ratio: 10 / 11;
	overflow: hidden;
	background: var(--vg-beeldtegel, #f3eee5);
}

.vg-vgl__beeld .vg-img,
.vg-vgl__icoon {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.vg-vgl__icoon {
	padding: 14px 8px;
	opacity: .6;
}

/* ---------- Past deze slof bij jou?: paneel (pasvorm bekend) of zandvlak ---------- */
.vg-past--paneel,
.vg-past--zand {
	margin: 16px 0 20px;
	padding: 22px 20px 20px;
	border: 0;
}

.vg-past--paneel {
	background: var(--vg-inkt, #1e2c3d);
	color: #f6f0e6;
}

.vg-past--zand {
	background: var(--vg-beeldtegel, #f3eee5);
}

.vg-past__label {
	margin: 0 0 4px;
	color: var(--vg-footer-accent, #a9bfda);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vg-past--paneel .vg-past__kop {
	margin: 0 0 14px;
	color: #fff;
	font-size: 1.1875rem;
	font-weight: 600;
}

.vg-past__oordeel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #fff;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 600;
	line-height: 1.05;
}

.vg-past__oordeel::before {
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #d9935f;
}

.vg-past__oordeel--normaal::before {
	background: #9fbf8c;
}

.vg-past__oordeel--groot::before {
	background: var(--vg-footer-accent, #a9bfda);
}

.vg-past__oordeel--wisselend::before {
	background: #d6cfc2;
}

.vg-past__toelichting,
.vg-past__geldt {
	margin: 6px 0 0;
	color: #d6cfc2;
	font-size: .9375rem;
}

.vg-past__geldt {
	font-size: .8125rem;
}

.vg-past__advies {
	display: inline-block;
	margin: 14px 0 0;
	padding: 10px 14px;
	background: var(--vg-cognac, #a85c2e);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.vg-past--paneel .vg-past__lijst {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .2);
}

.vg-past--paneel .vg-past__rij dt {
	color: var(--vg-footer-accent, #a9bfda);
	font-weight: 600;
}

.vg-past--paneel .vg-past__rij dd {
	color: #fff;
}

.vg-past--paneel .vg-past__noot {
	color: #d6cfc2;
}

.vg-past--zand .vg-past__rij dt {
	color: var(--vg-meta);
	font-weight: 600;
}

/* ---------- Menu: doelgroepicoon alleen in het mobiele paneel ---------- */
.vg-kop__icoon {
	width: 32px;
	height: 24px;
	margin-right: 12px;
}

@media (min-width: 900px) {
	.vg-kop__icoon {
		display: none;
	}
}

/* ======================================================================================================================
   Categorie D (0.39.40, sloffenwinkel; template-parts/categorie-d.php, categorie-filterbalk.php, categorie-d-tegel.php).
   Alleen nieuwe klassen (vg-catd, vg-catkop, vg-strook, vg-fb, vg-dtegel): pantoffelwinkel ziet hier niets van.
   Hoogtes boven de vouw (acceptatie, uit deze regels): desktop kop 260 (min-height) + strook 113 (20+72+20+1) + balk 65
   (10+44+10+1; breekt de rij om tussen 1000 en ± 1250 px, dan + 52) = 438-490 px. Mobiel 390: kop met foto 72 + 26 + kruimelpad
   28 + H1 40 + zin (4 regels) 90 = 256, strook 101 (10+56+4+20+10+1), balk 59 (8+42+8+1) = 416 px; zonder foto 344 px.
   ==================================================================================================================== */
.vg-catd {
	padding: 0;
}

/* ---------- Kop: zandvlak, kruimelpad, H1, één zin; rechts fotostrook of collage ---------- */
.vg-catkop {
	position: relative;
	overflow: hidden;
	background: var(--vg-zand, #ede4d3);
}

.vg-catkop__in {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	padding-block: 12px 14px;
}

.vg-catkop__tekst {
	flex: 1 1 auto;
	min-width: 0;
}

.vg-catkop .vg-breadcrumbs {
	margin-bottom: 4px;
	font-size: .8125rem;
}

.vg-catkop .vg-breadcrumbs a {
	padding-block: 2px;
}

.vg-site-sloffenwinkel .vg-catkop__h1 {
	margin: 0 0 6px;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -.01em;
}

.vg-catkop__zin {
	max-width: 62ch;
	margin: 0;
	color: var(--vg-meta);
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1rem;
	line-height: 1.4;
}

.vg-catkop__meer {
	display: inline-block;
	margin-left: 4px;
	color: var(--vg-inkt, #1e2c3d);
	font-family: var(--vg-font);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.vg-catkop__meer:hover {
	text-decoration: underline;
}

/* Fotostrook: mobiel een lage strook boven de titel, vanaf 700px de rechterhelft van de kop. */
.vg-catkop__foto {
	display: none; /* 0.39.43: op mobiel geen kopfoto (Sjoerd 03-10: vult te veel ruimte); vanaf 700px zie de mediaregel */
}

.vg-catkop__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center; /* 0.39.41: mobiel het midden (de uitsnede is al op de sloffen gericht) */
}

/* Collage: drie vrijstaande producten op het zand (multiply), licht overlappend; alleen vanaf 900px. */
.vg-catkop__collage {
	display: none;
	flex: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vg-catkop__stuk {
	display: block;
	width: 200px;
	height: 200px;
}

.vg-catkop__stuk .vg-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* 0.55.10: termbeeld (_vg_beeld_4x3, inc/term-beelden.php) in plaats van de collage; net als de collage alleen vanaf 900px
   (onder 900px laadt de <source> een leeg pixelbeeld). */
.vg-catkop__beeld {
	display: none;
	flex: none;
}

.vg-catkop__beeldimg {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* ---------- Soortenstrook: tegels 96x72 met packshot en woord, veegbaar ---------- */
.vg-strook {
	border-bottom: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-strook__lijst {
	display: flex;
	gap: 8px;
	margin-block: 0;
	padding-block: 10px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

@media (max-width: 699px) {
	.vg-strook__lijst {
		padding-inline: var(--vg-gutter, 16px); /* 0.39.42: mobiel niet tegen de schermrand */
		scroll-padding-inline: var(--vg-gutter, 16px);
	}
}

.vg-strook__lijst::-webkit-scrollbar {
	display: none;
}

.vg-strook__lijst > li {
	flex: 0 0 calc((100% - 24px) / 4);
	scroll-snap-align: start;
}

.vg-strook__tegel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--vg-tekst);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
}

.vg-strook__beeld {
	display: block;
	height: 56px;
	background: var(--vg-beeldtegel, #f3eee5);
}

.vg-strook__beeld .vg-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 4px 6px 6px;
	object-fit: contain;
	object-position: center bottom; /* 0.39.41: alle sloffen op dezelfde grondlijn (Sjoerd 03-10) */
	mix-blend-mode: multiply;
}

.vg-strook__woord {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vg-strook__tegel:hover .vg-strook__woord {
	text-decoration: underline;
}

.vg-catd__tegels:not(:empty) {
	padding-block: 12px 0;
}

/* ---------- Eén filterbalk (sticky): mobiel "Filters (n)" + Sorteren, vanaf 1000px één rij knoppen ---------- */
.vg-fb {
	position: sticky;
	top: 0;
	z-index: 15;
	background: var(--vg-kaart, #fff);
	border-bottom: 1px solid var(--vg-zand-2, #e4d8c2);
}

.vg-fb__in {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-block: 8px;
}

.vg-fb__vink {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.vg-fb__mobiel {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 42px;
	padding: 0 14px;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
}

.vg-fb__vink:focus-visible + .vg-fb__mobiel {
	outline: 2px solid var(--vg-inkt, #1e2c3d);
	outline-offset: 2px;
}

.vg-fb__groepen,
.vg-fb__aantal,
.vg-fb__punt,
.vg-fb__sort label {
	display: none;
}

.vg-fb__rechts {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: .9375rem;
}

.vg-fb__sort,
.vg-fb__sort select {
	width: 100%;
}

.vg-fb__sort select {
	min-height: 42px;
}

/* Paneel over het hele scherm (checkbox-patroon, werkt zonder JS). */
.vg-fb__vink:checked ~ .vg-fb__groepen {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 16px 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--vg-kaart, #fff);
}

.vg-fb__paneelkop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 12px 0 4px;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1.375rem;
	font-weight: 600;
}

.vg-fb__sluit {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.vg-fb__groepen .vg-fd {
	flex: none;
	max-width: none;
}

.vg-fb__vink:checked ~ .vg-fb__groepen .vg-fd__panel {
	position: static;
	width: auto;
	max-height: none;
	margin-top: 6px;
	box-shadow: none;
}

.vg-fb__toon {
	position: sticky;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: auto;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.vg-fb__sub {
	margin: 0;
	padding: 10px 12px 0;
	color: var(--vg-meta);
	font-size: .8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.vg-fb__icoon {
	width: 28px;
	height: 21px;
}

.vg-fb .vg-filters__actief {
	padding-bottom: 8px;
}

html.vg-fb-open {
	overflow: hidden;
}

/* ---------- Raster en de redactionele tegel (over twee kolommen) ---------- */
.vg-catd__raster {
	padding-block: 20px 8px;
}

.vg-catd__bijgewerkt {
	margin: 16px 0 0;
}

.vg-dtegel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	grid-column: span 2;
	min-width: 0;
	min-height: 240px;
	overflow: hidden;
}

.vg-dtegel--vraag {
	justify-content: center;
	gap: 10px;
	padding: 28px 24px;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
}

.vg-dtegel__icoon {
	width: 72px;
	height: 54px;
	filter: brightness(0) invert(.93) sepia(.25);
}

.vg-dtegel__label {
	margin: 0;
	color: var(--vg-zand, #ede4d3);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vg-dtegel__kop {
	margin: 0;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.15;
}

.vg-dtegel__tekst {
	max-width: 60ch;
	margin: 0;
	color: rgba(255, 255, 255, .85);
	line-height: 1.5;
}

.vg-dtegel__link {
	margin-top: 8px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.vg-dtegel__link:hover,
.vg-dtegel__link:focus-visible {
	color: #fff; /* 0.49.9: anders wint a:hover (var(--vg-kop), donker op de donkere vraagtegel) */
	text-decoration: underline;
}

.vg-dtegel--foto {
	min-height: 280px;
	color: #fff;
}

.vg-dtegel__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.vg-dtegel__vlak {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px 24px;
	background: rgba(22, 30, 42, .82);
}

.vg-catd__tekst {
	padding-bottom: 28px;
}

/* 0.49.18 (Sjoerd 05-10: "twee producten die onderaan bungelen"): de tegel is een band over de hele rij; dense vult een rij
 * die vóór de band niet vol was (3 kolommen), zodat elke rij vol blijft. */
.vg-catd__raster .vg-grid { grid-auto-flow: row dense; }
.vg-dtegel { grid-column: 1 / -1; min-height: 0; }
.vg-dtegel--vraag { gap: 14px; padding: 24px 20px; }
.vg-dtegel__vraagdeel, .vg-dtegel__antwoorddeel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vg-dtegel__tekst a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.vg-dtegel__tekst a:hover, .vg-dtegel__tekst a:focus-visible { color: var(--vg-zand, #ede4d3); }
.vg-dtegel--foto { min-height: 300px; }
.vg-dtegel--foto .vg-dtegel__vlak { max-width: 560px; }
@media (min-width: 700px) {
	.vg-dtegel--vraag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 40px; padding: 36px 40px; }
	.vg-dtegel--foto { min-height: 320px; }
	.vg-dtegel--foto .vg-dtegel__vlak { margin: 0 0 24px 24px; }
}

/* ---------- Vanaf 700px: kop 260 px met de foto rechts, strook 96x72 met het woord ernaast ---------- */
@media (min-width: 700px) {
	.vg-catkop__in {
		min-height: 260px;
		padding-block: 24px;
	}

	.vg-catkop .vg-breadcrumbs {
		margin-bottom: 10px;
		font-size: .875rem;
	}

	.vg-catkop__zin {
		font-size: 1.25rem;
	}

	.vg-catkop__meer {
		display: block;
		margin: 8px 0 0;
	}

	.vg-catkop--foto .vg-catkop__foto {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 40%;
		height: auto;
	}

	.vg-catkop--foto .vg-catkop__tekst {
		max-width: 58%;
	}

	.vg-strook__lijst {
		gap: 20px;
		padding-block: 20px;
	}

	.vg-strook__lijst > li {
		flex: none;
	}

	.vg-strook__tegel {
		flex-direction: row;
		align-items: center;
		gap: 12px;
		font-size: .9375rem;
	}

	.vg-strook__beeld {
		flex: none;
		width: 96px;
		height: 72px;
	}

	.vg-dtegel--foto {
		min-height: 360px;
	}

	.vg-dtegel--vraag {
		padding: 40px;
	}
}

@media (min-width: 900px) {
	.vg-catkop__collage {
		display: flex;
		align-self: flex-end;
	}

	.vg-catkop__beeld {
		display: block;
		width: clamp(300px, 30vw, 400px);
		margin-block: 12px;
	}

	.vg-catkop__collage > li + li {
		margin-left: -28px;
	}

	.vg-catkop__collage > li:nth-child(2) {
		margin-bottom: 20px;
	}
}

/* ---------- Vanaf 1000px: één rij knoppen, aantal en Sorteren rechts ---------- */
@media (min-width: 1000px) {
	.vg-fb__in {
		flex-wrap: wrap;
		gap: 8px 16px;
		padding-block: 10px;
	}

	.vg-fb .vg-fd__knop {
		padding: 0 12px;
		gap: 6px;
	}

	.vg-fb__vink,
	.vg-fb__mobiel,
	.vg-fb__paneelkop,
	.vg-fb__toon {
		display: none;
	}

	.vg-fb__groepen,
	.vg-fb__vink:checked ~ .vg-fb__groepen {
		position: static;
		z-index: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1 1 auto;
		gap: 8px;
		padding: 0;
		overflow: visible;
		background: none;
	}

	.vg-fb__groepen .vg-fd {
		flex: none;
	}

	.vg-fb__rechts {
		flex: none;
		margin-left: auto;
	}

	.vg-fb__aantal,
	.vg-fb__punt {
		display: inline;
		color: var(--vg-tekst);
		white-space: nowrap;
	}

	.vg-fb__sort,
	.vg-fb__sort select {
		width: auto;
	}

	.vg-fb__sort label {
		display: inline;
	}

	.vg-fb__sort select {
		min-height: 44px;
	}

	.vg-fb__groepen .vg-fd:nth-last-of-type(-n+2) .vg-fd__panel {
		left: auto;
		right: 0;
	}

	.vg-fb__vink:checked ~ .vg-fb__groepen .vg-fd__panel {
		position: absolute;
		width: max(100%, 260px);
		max-height: 320px;
		margin: 0;
	}
}

/* ---------- Home: tekstdeel als tegels en de citaatband (0.39.40, mockup E; template-parts/home/tekst-tegels.php) ---------- */
.vg-tt__lede {
	max-width: 70ch;
	margin: 0 0 28px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.vg-tt__label {
	margin: 0 0 6px;
	color: var(--vg-cognac, #a85c2e);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.vg-tt__titel {
	margin: 0 0 24px;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem);
	line-height: 1.1;
}

.vg-tt__tegels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.vg-tt__tegel {
	display: flex;
	gap: 20px;
	padding: 24px 20px;
	background: var(--vg-zand, #ede4d3);
}

.vg-tt__icoon {
	width: 56px;
	height: 42px;
}

.vg-tt__inhoud {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 70ch;
}

.vg-tt__vraag {
	margin: 0 0 10px;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: 1.375rem;
	line-height: 1.2;
}

.vg-tt__inhoud p {
	margin: 0 0 10px;
	line-height: 1.6;
}

.vg-tt__meer summary {
	color: var(--vg-meta);
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.vg-tt__meer[open] summary {
	margin-bottom: 8px;
}

.vg-tt__links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin-top: auto !important;
	padding-top: 12px;
}

.vg-tt__links a {
	color: var(--vg-inkt, #1e2c3d);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}

.vg-tt__links a:hover {
	text-decoration: underline;
}

.vg-citaat {
	margin-top: 12px;
	background: var(--vg-inkt, #1e2c3d);
	color: #fff;
}

.vg-citaat__in {
	position: relative;
	margin-block: 0;
	padding-block: 48px;
	padding-left: calc(var(--vg-gutter) + 56px);
}

.vg-citaat__in::before {
	content: "\201C";
	content: "\201C" / "";
	position: absolute;
	top: 30px;
	left: var(--vg-gutter);
	color: var(--vg-cognac, #a85c2e);
	font-family: var(--vg-font-kop, Georgia, serif);
	font-size: 5.5rem;
	line-height: 1;
}

.vg-citaat__tekst {
	max-width: 34em;
	margin: 0;
	font-family: var(--vg-font-kop, var(--vg-font));
	font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
	line-height: 1.3;
}

.vg-citaat__tekst p {
	margin: 0;
}

.vg-citaat__wie {
	margin-top: 16px;
	color: var(--vg-zand, #ede4d3);
	font-size: .9375rem;
	font-weight: 600;
}

.vg-site-sloffenwinkel .vg-merkindex__groep {
	margin-bottom: 8px;
}

.vg-site-sloffenwinkel .vg-merkindex__lijst a {
	padding: 1px 0;
	line-height: 1.4;
}

@media (min-width: 900px) {
	.vg-tt__tegels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px;
	}

	.vg-tt__tegel {
		padding: 32px;
	}

	.vg-tt__icoon {
		width: 72px;
		height: 54px;
	}

	.vg-citaat__in {
		padding-block: 64px;
		padding-left: calc(var(--vg-gutter) + 90px);
	}
}


/* ---------- USP-balk (0.39.0, huisstijl G; alleen met config teksten.usp) ---------- */
/* Zwarte regel boven de kopbalk, witte tekst van 12 px. Mobiel alleen het eerste punt, vanaf 700 px alle drie. */
:where(.vg-opbouw-g) .vg-usp {
	background: var(--vg-usp-bg, #141414);
	color: var(--vg-usp-tekst, #fff);
	font-size: .75rem;
	line-height: 1.4;
}

:where(.vg-opbouw-g) .vg-usp__lijst {
	display: flex;
	justify-content: center;
	gap: 8px 32px;
	margin: 0 auto;
	padding-block: 7px;
	list-style: none;
}

.vg-usp__punt:not(:first-child) {
	display: none;
}

@media (min-width: 700px) {
	.vg-usp__punt:not(:first-child) {
		display: block;
	}
}

/* ---------- Kenmerk met icoon (0.39.0, vg_kenmerk_icoon(); nog niet in de templates) ---------- */
.vg-kenmerk {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vg-kenmerk__icoon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* ---------- Opbouw G (0.40.0, enkellaarsjes; inc/opbouw-g.php, g/*.php, template-parts/g/) ---------- */
/* Alles onder .vg-g (de main van de G-sjablonen) of .vg-opbouw-g (body); pantoffelwinkel en sloffenwinkel gebruiken deze
   klassen niet. Cijfers in IBM Plex Mono (token font-cijfer), zand voor het gekozen vak en de laagste prijs, bruine toets. */
.vg-cijfer {
	font-family: var(--vg-font-cijfer, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
}

.vg-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.vg-i-k { fill: var(--vg-tekst, #141414); }
.vg-i-t { fill: var(--vg-toets, #9C6B3C); }

/* Kopbalk: naam, brede zoekbalk; menu op een eigen regel; Afgeprijsd in rood. */
.vg-opbouw-g .vg-nav__link[href$="-sale/"] { color: var(--vg-afgeprijsd, #B0242C); }

@media (min-width: 900px) {
	.vg-opbouw-g .vg-header__inner {
		flex-wrap: wrap;
		gap: 8px 30px;
		padding-block: 14px 0;
	}

	.vg-opbouw-g .vg-header__naam { order: 0; }
	.vg-opbouw-g .vg-search--header { order: 1; flex: 1 1 auto; max-width: none; }
	.vg-opbouw-g .vg-nav { order: 2; flex: 1 0 100%; margin-inline: -10px; padding-bottom: 6px; }
}

/* Hakmeter. */
.vg-meter {
	--vg-meter-h: 112px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.vg-meter__liniaal {
	display: grid;
	grid-template-columns: repeat(5, minmax(96px, 1fr));
	height: var(--vg-meter-h);
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 2px solid var(--vg-tekst, #141414);
}

.vg-meter__vak {
	position: relative;
	border-left: 1px solid #D6D6D6;
}

.vg-meter__inhoud {
	display: block;
	height: 100%;
	padding: 8px 12px;
	color: var(--vg-tekst, #141414);
	text-decoration: none;
}

a.vg-meter__inhoud:hover { background: var(--vg-zand, #F4EFE8); }

.vg-meter__naam {
	display: block;
	font-size: .9375rem;
	line-height: 1.2;
}

.vg-meter__getal {
	display: block;
	font-family: var(--vg-font-cijfer, monospace);
	font-size: .75rem;
	color: var(--vg-meta, #666);
}

.vg-meter__vak.is-gekozen {
	background: var(--vg-zand, #F4EFE8);
	border-left-color: var(--vg-tekst, #141414);
}

.vg-meter__vak.is-gekozen .vg-meter__naam {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.vg-meter__vak.is-leeg .vg-meter__naam,
.vg-meter__vak.is-leeg .vg-meter__getal { color: #999; }

/* Staafje rechts in het vak, hoogte = hakhoogte (geen aantal): plat laag, hoog smal en hoog, slee als wig. */
.vg-meter__staaf {
	position: absolute;
	right: 14px;
	bottom: 0;
	width: 24px;
	height: 9%;
	background: var(--vg-toets, #9C6B3C);
}

.vg-meter__vak--laag .vg-meter__staaf { height: 27%; }
.vg-meter__vak--middel .vg-meter__staaf { height: 48%; }
.vg-meter__vak--hoog .vg-meter__staaf { height: 71%; width: 10px; }
.vg-meter__vak--slee .vg-meter__staaf { height: 36%; width: 58px; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 70%); }
.vg-meter__vak.is-gekozen .vg-meter__staaf { background: var(--vg-tekst, #141414); }

.vg-meter__ticks {
	display: grid;
	grid-template-columns: repeat(5, minmax(96px, 1fr));
	padding-top: 4px;
	font-family: var(--vg-font-cijfer, monospace);
	font-size: .6875rem;
	color: var(--vg-meta, #666);
}

.vg-meter__ticks span { margin-left: -3px; }

.vg-meter--klein { --vg-meter-h: 72px; }
.vg-meter--klein .vg-meter__liniaal { grid-template-columns: repeat(5, minmax(64px, 1fr)); }
.vg-meter--klein .vg-meter__inhoud { padding: 6px 8px; }
.vg-meter--klein .vg-meter__naam { font-size: .8125rem; }
.vg-meter--klein .vg-meter__staaf { right: 8px; width: 16px; }
.vg-meter--klein .vg-meter__vak--hoog .vg-meter__staaf { width: 8px; }
.vg-meter--klein .vg-meter__vak--slee .vg-meter__staaf { width: 36px; }

/* Speld: rode lijn op de hoogte van dit product, in tienden van het vak. */
.vg-meter__speld {
	position: absolute;
	top: -8px;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--vg-afgeprijsd, #B0242C);
}

.vg-meter__speldlabel {
	position: absolute;
	top: -18px;
	left: 4px;
	font-size: .6875rem;
	font-weight: 600;
	color: var(--vg-afgeprijsd, #B0242C);
	white-space: nowrap;
}
.vg-meter__speld--1 { left: 10%; }
.vg-meter__speld--2 { left: 20%; }
.vg-meter__speld--3 { left: 30%; }
.vg-meter__speld--4 { left: 40%; }
.vg-meter__speld--5 { left: 50%; }
.vg-meter__speld--6 { left: 60%; }
.vg-meter__speld--7 { left: 70%; }
.vg-meter__speld--8 { left: 80%; }
.vg-meter__speld--9 { left: 90%; }

/* Secties, raster en kaart. */
.vg-g { padding-bottom: 40px; }
.vg-gsec { padding-block: 22px 6px; }
.vg-gsec__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.vg-gsec__kop .vg-h2 { margin: 0; font-size: 1.1875rem; }
.vg-gsec__kop a { font-size: .8125rem; color: var(--vg-tekst, #141414); }

.vg-graster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 12px;
}

@media (min-width: 700px) { .vg-graster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; } }
@media (min-width: 1100px) { .vg-graster { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vg-graster--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.vg-gkaart__link { display: block; color: var(--vg-tekst, #141414); text-decoration: none; }
.vg-gkaart__foto { display: block; aspect-ratio: 1; background: var(--vg-fotovlak, #F6F6F4); }
.vg-gkaart__foto img, .vg-gkaart__foto svg { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vg-gkaart__titel { margin: 10px 0 6px; font-size: .8125rem; font-weight: 400; line-height: 1.35; }
.vg-gkaart__merk { display: block; font-weight: 700; }
.vg-gkaart__model { display: block; color: var(--vg-tekst-2, #555); }
.vg-gkaart__prijs { display: block; font-size: .9375rem; font-weight: 700; }
.vg-gkaart__prijs small { font-size: .75rem; font-weight: 400; color: var(--vg-meta, #666); }
/* 0.45.2: oude prijs doorgestreept voor de nieuwe (kaart en productpagina). */
.vg-gkaart__oud { margin: 0 6px 0 4px; font-family: var(--vg-font, inherit); font-size: .8125rem; font-weight: 400; color: var(--vg-meta, #666); } /* 0.45.3: na de nieuwe prijs, gewone letter. */
.vg-gkaart__bedrag--sale, .vg-prijs--sale { color: var(--vg-afgeprijsd, #B0242C); }
.vg-gkoop__oud { margin-right: 4px; font-family: var(--vg-font, inherit); font-size: 1rem; font-weight: 400; color: var(--vg-meta, #666); }
.vg-gkoop__prijs .vg-badge--korting { vertical-align: middle; margin-left: 8px; font-size: .8125rem; }
.vg-gkaart__labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vg-gkaart__link:hover .vg-gkaart__model { text-decoration: underline; }
.vg-gkaart--uit { opacity: .7; }

.vg-g .vg-kenmerk { gap: 4px; padding: 2px 6px; background: var(--vg-kenmerk, #F1F1EF); border-radius: 3px; font-size: .6875rem; line-height: 1.5; }
.vg-g .vg-kenmerk__icoon { width: 16px; height: 16px; }

/* Home. */
.vg-ghome__meter { display: grid; gap: 14px; padding-block: 18px; border-bottom: 1px solid var(--vg-rand, #E5E5E5); }
.vg-ghome__intro .vg-h1 { margin: 0 0 8px; font-size: 1.375rem; line-height: 1.15; }
.vg-ghome__kicker { display: block; font-size: .8125rem; font-weight: 600; color: var(--vg-tekst-2, #555); letter-spacing: 0; }
.vg-ghome__intro p { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--vg-tekst-2, #555); }
.vg-ghome__veeg { margin-top: 6px !important; font-size: .75rem !important; }

@media (min-width: 900px) {
	.vg-ghome__meter { grid-template-columns: 250px 1fr; gap: 32px; padding-block: 22px; }
	.vg-ghome__intro .vg-h1 { font-size: 1.625rem; }
	.vg-ghome__veeg { display: none; }
}

/* Categorie. */
.vg-gcat__kop { display: grid; gap: 18px; padding-block: 6px 18px; border-bottom: 1px solid var(--vg-rand, #E5E5E5); align-items: end; }
.vg-gcat__kop .vg-h1 { margin: 4px 0 8px; }
.vg-gcat__intro .vg-intro, .vg-gcat__intro p { max-width: 640px; }
.vg-gcat__meterkop { margin: 0 0 18px; font-size: .8125rem; font-weight: 600; }
.vg-gfeiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; border: 1px solid var(--vg-rand, #E5E5E5); }
.vg-gfeiten > div { padding: 10px 12px; border-right: 1px solid var(--vg-rand, #E5E5E5); }
.vg-gfeiten > div:last-child { border-right: 0; }
.vg-gfeiten dt { font-size: 1.0625rem; font-weight: 700; }
.vg-gfeiten dd { margin: 0; font-size: .75rem; color: var(--vg-meta, #666); }

@media (min-width: 900px) {
	.vg-gcat__kop { grid-template-columns: 1fr 360px; gap: 32px; }
	.vg-gcat--hub .vg-gcat__kop, .vg-gcat--merk .vg-gcat__kop { grid-template-columns: 1fr 480px; }
}

.vg-gstijlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .vg-gstijlen { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.vg-gstijlen a { display: block; color: var(--vg-tekst, #141414); text-decoration: none; font-size: .875rem; font-weight: 600; }
.vg-gstijlen__foto { display: block; aspect-ratio: 1; margin-bottom: 6px; background: var(--vg-fotovlak, #F6F6F4); }
.vg-gstijlen__foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vg-gstijlen .vg-kenmerk { background: none; padding: 0; font-size: .875rem; }
.vg-gstijlen__n { display: block; font-size: .75rem; font-weight: 400; color: var(--vg-meta, #666); }

.vg-gkleuren { display: flex; gap: 14px 18px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; }
.vg-gkleuren a { display: block; width: 66px; color: var(--vg-tekst, #141414); text-align: center; font-size: .75rem; text-decoration: none; }
.vg-gkleuren__bol, .vg-gfilter__bol { display: block; width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 50%; background: var(--vg-swatch, #ccc); border: 1px solid rgba(0, 0, 0, .12); }

.vg-gchips .vg-chip.is-actief, .vg-chip.is-actief { background: var(--vg-tekst, #141414); border-color: var(--vg-tekst, #141414); color: #fff; }
.vg-g .vg-chip { border-radius: var(--vg-radius-chip, 20px); font-weight: 500; gap: 6px; }

.vg-gcat__body { display: grid; gap: 20px; padding-top: 20px; }
@media (min-width: 900px) { .vg-gcat__body { grid-template-columns: 230px minmax(0, 1fr); gap: 26px; } }
/* 0.49.3: zonder filterkolom (alleen de lijst, bijv. een merk met 1 product) neemt de lijst de volle breedte; anders viel hij in de kolom van 230 px (Sjoerd 04-10, Elena Iachi). */
@media (min-width: 900px) { .vg-gcat__body > .vg-gcat__lijst:only-child { grid-column: 1 / -1; } }

.vg-gfilters__open { position: absolute; opacity: 0; pointer-events: none; }
.vg-gfilters__knop { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--vg-tekst, #141414); border-radius: var(--vg-radius-chip, 20px); font-size: .875rem; font-weight: 600; cursor: pointer; }
.vg-gfilters__open:focus-visible + .vg-gfilters__knop { outline: 2px solid var(--vg-tekst, #141414); outline-offset: 2px; }
.vg-gfilters__paneel { display: none; margin-top: 12px; }
.vg-gfilters__open:checked ~ .vg-gfilters__paneel { display: block; }
@media (min-width: 900px) {
	.vg-gfilters__knop { display: none; }
	.vg-gfilters__paneel { display: block; margin-top: 0; }
}
.vg-gfilters__groep { padding-top: 12px; border-top: 1px solid var(--vg-rand, #E5E5E5); margin-bottom: 12px; }
.vg-gfilters__groep:first-child { border-top: 0; padding-top: 0; }
.vg-gfilters__kop { margin: 0 0 6px; font-size: .875rem; font-weight: 700; line-height: 1.3; } /* 0.46.0: <p>, geen h2 meer. */
.vg-gfilters ul { margin: 0; padding: 0; list-style: none; }
.vg-gfilter { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--vg-tekst, #141414); font-size: .8125rem; text-decoration: none; }
.vg-gfilter:hover .vg-gfilter__label, .vg-gfilter:hover .vg-kenmerk__label { text-decoration: underline; }
.vg-gfilter__vak { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--vg-tekst, #141414); border-radius: 3px; }
.vg-gfilter.is-actief .vg-gfilter__vak { background: var(--vg-tekst, #141414); }
.vg-gfilter.is-actief { font-weight: 700; }
.vg-gfilter__bol { width: 18px; height: 18px; margin: 0; flex: none; }
.vg-gfilter.is-actief .vg-gfilter__bol { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--vg-tekst, #141414); }
.vg-gfilter .vg-kenmerk { background: none; padding: 0; font-size: .8125rem; }
.vg-gfilter .vg-kenmerk__icoon { width: 20px; height: 20px; }
.vg-gfilter__n { margin-left: auto; font-size: .75rem; color: #888; }

/* Toolbar, wissel Raster/Tabel, prijstabel. */
.vg-gtoolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.vg-gtoolbar .vg-h2 { margin: 0; font-size: 1.0625rem; }
.vg-gtoolbar__rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.vg-gwissel { display: inline-flex; margin: 0; font-size: .8125rem; }
.vg-gwissel__knop { padding: 6px 12px; border: 1px solid #ccc; color: var(--vg-tekst, #141414); text-decoration: none; }
.vg-gwissel__knop:first-child { border-radius: 20px 0 0 20px; }
.vg-gwissel__knop:last-child { border-radius: 0 20px 20px 0; border-left: 0; }
.vg-gwissel__knop.is-actief { background: var(--vg-tekst, #141414); border-color: var(--vg-tekst, #141414); color: #fff; }

.vg-gtabel, .vg-gprijzen { width: 100%; border-collapse: collapse; font-size: .875rem; }
.vg-gtabel th, .vg-gtabel td, .vg-gprijzen th, .vg-gprijzen td { padding: 10px 8px; border-bottom: 1px solid var(--vg-rand, #E5E5E5); text-align: left; vertical-align: middle; }
.vg-gtabel thead th, .vg-gprijzen thead th { padding-block: 9px; border-bottom: 1.5px solid var(--vg-tekst, #141414); font-size: .75rem; font-weight: 600; color: var(--vg-tekst-2, #555); }
.vg-gtabel tbody th { font-weight: 400; }
.vg-gtabel tbody th a { color: var(--vg-tekst, #141414); text-decoration: none; }
.vg-gtabel tbody th span { display: block; font-size: .75rem; color: var(--vg-tekst-2, #555); }
.vg-gtabel__foto { width: 84px; }
.vg-gtabel__foto img, .vg-gtabel__foto svg { width: 68px; height: 68px; object-fit: contain; background: var(--vg-fotovlak, #F6F6F4); mix-blend-mode: multiply; }
.vg-laagste { font-weight: 700; background: var(--vg-zand, #F4EFE8); box-shadow: inset 3px 0 0 var(--vg-toets, #9C6B3C); }
.vg-gnoot { margin: 8px 0 0; font-size: .75rem; color: var(--vg-meta, #666); }

.vg-gknop { display: inline-block; padding: 9px 14px; border: 1.5px solid var(--vg-tekst, #141414); border-radius: var(--vg-radius, 4px); background: var(--vg-tekst, #141414); color: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vg-gknop:hover { color: #fff; opacity: .88; }
.vg-gknop--rand { background: #fff; color: var(--vg-tekst, #141414); }
.vg-gknop--rand:hover { color: var(--vg-tekst, #141414); background: var(--vg-zand, #F4EFE8); opacity: 1; }
.vg-gknop--klein { padding: 6px 10px; font-size: .75rem; }

/* Productpagina. */
.vg-gproduct__top { display: grid; gap: 16px; padding-block: 12px 24px; }
@media (min-width: 900px) { .vg-gproduct__top { grid-template-columns: minmax(0, 1fr) 470px; gap: 28px; } }
.vg-gproduct__media { background: var(--vg-fotovlak, #F6F6F4); aspect-ratio: 1; max-height: 560px; }
.vg-gproduct__media img, .vg-gproduct__media svg { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vg-gproduct__merk { margin: 0; font-size: .875rem; font-weight: 700; }
.vg-gproduct__merk a { color: var(--vg-tekst, #141414); }
.vg-gproduct__titel { margin: 6px 0; font-size: 1.375rem; line-height: 1.15; }
@media (min-width: 900px) { .vg-gproduct__titel { font-size: 1.875rem; } }
.vg-gproduct__kort { margin: 0 0 16px; font-size: .875rem; color: var(--vg-tekst-2, #555); }
.vg-gproduct__prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 12px; }
.vg-gproduct__prijs b { font-size: 1.75rem; }
.vg-gproduct__prijs span { font-size: .8125rem; color: var(--vg-tekst-2, #555); }
.vg-gprijzen__maten { font-size: .75rem; }
.vg-gproduct__kleuren { margin-top: 14px; }

.vg-gspec { display: grid; gap: 24px; padding: 26px 0; border-block: 1px solid var(--vg-rand, #E5E5E5); }
@media (min-width: 900px) { .vg-gspec { grid-template-columns: 1fr 1fr; gap: 32px; } }
.vg-gspec .vg-h2 { margin: 0 0 12px; font-size: 1.1875rem; }
.vg-gspec .vg-meter { --vg-meter-h: 64px; padding-top: 28px; }
.vg-gkv { display: grid; grid-template-columns: 150px 1fr; margin: 0; font-size: .875rem; align-self: start; }
.vg-gkv dt, .vg-gkv dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--vg-rand, #E5E5E5); }
.vg-gkv dt { color: var(--vg-tekst-2, #555); }

.vg-gtekst { display: grid; gap: 24px; padding-block: 24px 6px; }
@media (min-width: 900px) { .vg-gtekst { grid-template-columns: 1fr 1fr; gap: 32px; } }
.vg-gtekst .vg-h2 { margin: 0 0 8px; font-size: 1.1875rem; }
.vg-glinks { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.vg-glinks li { padding: 6px 0; border-bottom: 1px solid var(--vg-rand, #E5E5E5); }
.vg-glinks a { color: var(--vg-tekst, #141414); }

/* Merken A-Z. */
.vg-gmerken__blok { margin: 10px 0 4px; font-size: .75rem; font-weight: 500; color: var(--vg-meta, #666); }
.vg-gmerken__lijst { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.vg-gmerken__lijst a { color: var(--vg-tekst, #141414); }

/* ---------- 0.41.0 (enkellaarsjes, opbouw G): merk × kleur, "Per merk", Verwant, kortingslabel, mobiele filterknop, maat ---------- */
.vg-gmkleuren .vg-gkleuren { padding-top: 2px; }
.vg-gpermerk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vg-gpermerk__kop { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--vg-tekst-2, #555); }
.vg-gpermerk .vg-chips { min-width: 0; }
/* Verwant: mobiel onder de lijst als rij links, desktop bovenaan de filterkolom (zelfde rasterkolom, eigen rij). */
.vg-gverwant { min-width: 0; padding-top: 14px; border-top: 1px solid var(--vg-rand, #E5E5E5); }
.vg-gverwant__kop { margin: 0 0 8px; font-size: .875rem; }
.vg-gverwant ul { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.vg-gverwant a { color: var(--vg-tekst, #141414); }
@media (min-width: 900px) {
	.vg-gcat__body--verwant { grid-template-rows: auto minmax(0, 1fr); }
	.vg-gcat__body--verwant .vg-gverwant { grid-column: 1; grid-row: 1; align-self: start; padding-top: 0; border-top: 0; }
	.vg-gcat__body--verwant .vg-gfilters { grid-column: 1; grid-row: 2; }
	.vg-gcat__body--verwant .vg-gcat__lijst { grid-column: 2; grid-row: 1 / span 2; }
	.vg-gverwant ul { display: block; }
	.vg-gverwant li { padding: 4px 0; }
}
/* Kortingslabel op de kaart van G: het label van de aanbiedingen (.vg-badge--korting), hoekig zoals G, op de foto. */
.vg-gkaart__foto { position: relative; }
.vg-gkaart__korting { position: absolute; top: 8px; left: 8px; z-index: 1; border-radius: var(--vg-radius-s, 4px); background: var(--vg-groen, #2E7D4F); border-color: var(--vg-groen, #2E7D4F); pointer-events: none; }
/* Mobiel filterpaneel: bovenin het aantal, onderaan een vaste knop "Toon N enkellaarsjes" (label van de checkbox: sluit het paneel). */
.vg-gfilters__aantal { margin: 0 0 10px; font-size: .8125rem; color: var(--vg-tekst-2, #555); }
.vg-gfilters__toon { position: sticky; bottom: 0; z-index: 2; display: block; margin-top: 12px; padding: 12px 16px; border-radius: var(--vg-radius-s, 4px); background: var(--vg-tekst, #141414); color: #fff; font-size: .9375rem; font-weight: 600; text-align: center; cursor: pointer; box-shadow: 0 -8px 12px #fff; }
@media (min-width: 900px) { .vg-gfilters__aantal, .vg-gfilters__toon { display: none; } }
/* Maatfilter: de maten als raster van vakjes met het aantal eronder. */
.vg-gfilters__noot { margin: 0 0 8px; font-size: .75rem; color: var(--vg-meta, #666); }
.vg-gfilters__groep--maat ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); gap: 6px; }
.vg-gfilters__groep--maat .vg-gfilter { flex-direction: column; justify-content: center; gap: 0; min-width: 0; padding: 6px 2px; border: 1px solid var(--vg-rand, #E5E5E5); border-radius: var(--vg-radius-s, 4px); text-align: center; }
.vg-gfilters__groep--maat .vg-gfilter.is-actief { border-color: var(--vg-tekst, #141414); background: var(--vg-tekst, #141414); color: #fff; }
.vg-gfilters__groep--maat .vg-gfilter.is-actief .vg-gfilter__n { color: #fff; }
.vg-gfilters__groep--maat .vg-gfilter__n { margin: 0; font-size: .6875rem; }
/* Hakmeter zonder horizontale uitloop (0.41.0, H; Sjoerd 02-10 "uitloop in het design" op mobiel). Oorzaak: de rasterkolommen
   eromheen (kop van de categorie, home, product) groeiden mee met de minimale breedte van de meter (5 × 96 px); nu krimpen
   alle griditems (min-width: 0) en past de meter zelf in de breedte: vijf kolommen minmax(0, 1fr), korte naam, kleinere
   cijfers, staafjes in procenten, het speldlabel rechts uitgelijnd in de rechterhelft. */
.vg-gcat__kop > *, .vg-ghome__meter > *, .vg-gproduct__top > *, .vg-gspec > *, .vg-gtekst > *, .vg-gcat__body > * { min-width: 0; }
.vg-meter__kort { display: none; }
.vg-meter__vak, .vg-meter__inhoud { min-width: 0; }
.vg-meter__speld--5 .vg-meter__speldlabel, .vg-meter__speld--6 .vg-meter__speldlabel, .vg-meter__speld--7 .vg-meter__speldlabel,
.vg-meter__speld--8 .vg-meter__speldlabel, .vg-meter__speld--9 .vg-meter__speldlabel, .vg-meter__vak--hoog .vg-meter__speldlabel { left: auto; right: 4px; }
@media (max-width: 599.98px) {
	.vg-gcat__kop { grid-template-columns: minmax(0, 1fr); }
	.vg-meter__liniaal, .vg-meter__ticks, .vg-meter--klein .vg-meter__liniaal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.vg-meter__inhoud, .vg-meter--klein .vg-meter__inhoud { padding: 6px 4px; }
	.vg-meter__naam, .vg-meter--klein .vg-meter__naam { font-size: .75rem; overflow-wrap: anywhere; }
	.vg-meter__lang { display: none; }
	.vg-meter__kort { display: inline; }
	.vg-meter__getal { font-size: .625rem; overflow-wrap: anywhere; }
	.vg-meter__staaf, .vg-meter--klein .vg-meter__staaf { right: 4px; width: 28%; max-width: 24px; }
	.vg-meter__vak--hoog .vg-meter__staaf, .vg-meter--klein .vg-meter__vak--hoog .vg-meter__staaf { width: 12%; max-width: 10px; }
	.vg-meter__vak--slee .vg-meter__staaf, .vg-meter--klein .vg-meter__vak--slee .vg-meter__staaf { width: 62%; max-width: 58px; }
	.vg-meter__ticks { font-size: .625rem; }
	.vg-meter__speldlabel { font-size: .625rem; }
	.vg-ghome__veeg { display: none; }
	.vg-gfeiten > div { padding: 8px; }
	.vg-gfeiten dt { font-size: .875rem; overflow-wrap: anywhere; }
	.vg-gfeiten dd { overflow-wrap: anywhere; }
}

/* ---------- 0.42.0 (enkellaarsjes, opbouw G): productpagina v2 en "Combineer met" (g/single-product.php, inc/product-g.php) ----------
   Prijzen in de gewone sans met vaste cijferbreedte (nooit monospace, nooit afbreken); één zware knop (bruin, de hoofdknop), de
   knoppen in de winkelrijen licht; maatkiezer met aria-pressed; "Combineer met" over de volle breedte op zand (box-shadow en
   clip-path: geen horizontale uitloop zoals 100vw zou geven), mobiel horizontaal scrollbaar met scroll-snap. Alleen klassen van G. */
.vg-prijs { font-family: inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-gproduct--v2 .vg-gproduct__top { padding-block: 8px 28px; }
@media (min-width: 900px) { .vg-gproduct--v2 .vg-gproduct__top { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 40px; } }
.vg-gproduct__foto { background: var(--vg-fotovlak, #F6F6F4); aspect-ratio: 1; max-height: 560px; }
.vg-gproduct__foto img, .vg-gproduct__foto svg { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vg-gproduct--v2 .vg-gproduct__media { background: none; aspect-ratio: auto; max-height: none; }
.vg-gfotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.vg-gfotos__knop { display: block; aspect-ratio: 1; background: var(--vg-fotovlak, #F6F6F4); border: 1px solid transparent; border-radius: var(--vg-radius-s, 4px); }
.vg-gfotos__knop.is-gekozen { border-color: var(--vg-toets, #9C6B3C); }
.vg-gfotos__knop img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vg-gproduct--v2 .vg-gproduct__merk a { text-decoration: underline; text-underline-offset: 3px; }
.vg-gproduct--v2 .vg-gproduct__titel { margin: 4px 0 14px; }

/* Hakmeter klein met de hakregel ernaast (vanaf 600 px) of eronder. */
/* Nazorg 0.42.0: compacte meter (vier oplopende staafjes 6 px breed, labels eronder), de hakregel rechts ernaast. */
.vg-ghak { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin: 0 0 14px; }
.vg-gmini { display: flex; align-items: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vg-gmini__vak { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.vg-gmini__staaf { display: block; width: 6px; height: 5px; background: var(--vg-rand-hover, #D6D6D6); }
.vg-gmini__staaf--2 { height: 9px; }
.vg-gmini__staaf--3 { height: 13px; }
.vg-gmini__staaf--4 { height: 17px; }
.vg-gmini__vak.is-actief .vg-gmini__staaf { background: var(--vg-toets, #9C6B3C); }
.vg-gmini__label { font-size: .6875rem; line-height: 1; color: var(--vg-meta, #666); }
.vg-gmini__vak.is-actief .vg-gmini__label { color: var(--vg-toets, #9C6B3C); font-weight: 600; }
.vg-ghak__tekst { margin: 0; font-size: .8125rem; line-height: 1.3; color: var(--vg-tekst-2, #555); }

/* Kenmerklabels: kleurstaal + kleur, materiaal, stijl, eigenschap. */
.vg-glabels { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 16px; padding: 0; list-style: none; }
.vg-glabels .vg-kenmerk { gap: 6px; padding: 0; background: none; font-size: .8125rem; }
.vg-glabels .vg-kenmerk__icoon { width: 20px; height: 20px; }
.vg-glabels__staal { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--vg-swatch, #ccc); border: 1px solid rgba(0, 0, 0, .18); }

/* Maatkiezer. */
.vg-gmaten { margin: 0 0 14px; }
.vg-gmaten__kop { margin: 0 0 8px; font-size: .8125rem; font-weight: 600; }
.vg-gmaten__lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); gap: 6px; }
.vg-gmaat { min-width: 0; height: 40px; padding: 0 2px; border: 1px solid var(--vg-rand-hover, #D6D6D6); border-radius: var(--vg-radius-s, 4px); background: #fff; color: var(--vg-tekst, #141414); font: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.vg-gmaat:hover { border-color: var(--vg-tekst, #141414); }
.vg-gmaat[aria-pressed="true"] { border-color: var(--vg-toets, #9C6B3C); background: var(--vg-toets, #9C6B3C); color: #fff; font-weight: 700; }
.vg-gmaat.is-uit, .vg-gmaat:disabled { border-color: var(--vg-rand, #E5E5E5); color: #9A9A9A; cursor: not-allowed; }
.vg-gmaat:focus-visible { outline: 2px solid var(--vg-tekst, #141414); outline-offset: 2px; }

/* Prijs, status, hoofdknop. */
.vg-gkoop__prijs { margin: 0; line-height: 1.1; }
.vg-gkoop__prijs .vg-prijs { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
.vg-gkoop__status { min-height: 1.4em; margin: 4px 0 12px; font-size: .8125rem; color: var(--vg-tekst-2, #555); }
.vg-gkoop__status.is-ok::before { content: "\2713\00a0"; color: var(--vg-groen, #2E7D4F); font-weight: 700; }
.vg-gknop--hoofd, .vg-gknop--balk { display: flex; justify-content: center; gap: 6px; border-color: var(--vg-toets, #9C6B3C); background: var(--vg-toets, #9C6B3C); color: #fff; font-weight: 700; white-space: normal; text-align: center; }
.vg-gknop--hoofd { width: 100%; padding: 14px 16px; font-size: 1rem; }
.vg-gknop--hoofd:hover, .vg-gknop--balk:hover { background: #855A31; border-color: #855A31; color: #fff; opacity: 1; }
.vg-gkoop .vg-gnoot { text-align: center; }

/* Vergelijk winkels: per rij winkel, prijs (met "Laagste prijs" erboven), één extra gegeven en een lichte knop. */
.vg-gwinkels { margin-top: 22px; padding: 14px 14px 10px; background: var(--vg-zand, #F4EFE8); border-radius: var(--vg-radius, 4px); container-type: inline-size; }
.vg-gwinkels__kop { margin: 0 0 6px; font-size: 1rem; }
.vg-gwinkels__lijst { margin: 0; padding: 0; list-style: none; }
.vg-gwinkel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid rgba(20, 20, 20, .1); font-size: .875rem; }
.vg-gwinkel:first-child { border-top: 0; }
.vg-gwinkel__naam { font-weight: 600; overflow-wrap: anywhere; }
.vg-gwinkel__prijs { text-align: right; font-weight: 600; }
.vg-gwinkel__label { display: block; width: max-content; margin: 0 0 2px auto; padding: 1px 6px; border-radius: 3px; background: var(--vg-toets, #9C6B3C); color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.5; }
.vg-gwinkel__label[hidden] { display: none; }
.vg-gwinkel__extra { font-size: .75rem; color: var(--vg-tekst-2, #555); }
.vg-gknop--licht { padding: 7px 12px; border: 1px solid var(--vg-rand-hover, #D6D6D6); background: #fff; color: var(--vg-tekst, #141414); font-size: .8125rem; font-weight: 600; }
.vg-gknop--licht:hover { border-color: var(--vg-tekst, #141414); background: #fff; color: var(--vg-tekst, #141414); opacity: 1; }
.vg-gwinkel.is-uit { color: #8A8A8A; }
.vg-gwinkel.is-uit .vg-gwinkel__extra { color: #8A8A8A; text-decoration: line-through; }
.vg-gwinkel.is-uit .vg-gknop--licht { color: #8A8A8A; background: transparent; }
@container (max-width: 22rem) {
	.vg-gwinkel { grid-template-columns: minmax(0, 1fr) auto auto; }
	.vg-gwinkel__extra { grid-column: 1 / -1; grid-row: 2; }
}
.vg-gwinkels .vg-disclosure { margin: 8px 0 0; font-size: .75rem; }
.vg-gproduct--v2 .vg-gproduct__kleuren { margin-top: 16px; }

/* Combineer met: zandvlak over de volle breedte. */
.vg-gcombi { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; padding: 22px 0 24px; background: var(--vg-zand, #F4EFE8); box-shadow: 0 0 0 100vmax var(--vg-zand, #F4EFE8); clip-path: inset(0 -100vmax); }
.vg-gcombi__kop { margin: 0; font-size: 1.1875rem; }
.vg-gcombi__lijst { display: flex; gap: 10px; margin: 0 calc(-1 * var(--vg-gutter, 16px)); padding: 2px var(--vg-gutter, 16px) 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vg-gutter, 16px); overscroll-behavior-x: contain; }
.vg-gcombi__kaart { display: flex; flex: 0 0 min(42%, 170px); flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; background: #fff; border-radius: var(--vg-radius, 4px); text-align: center; scroll-snap-align: start; }
.vg-gcombi__beeld { display: block; width: 72px; height: 72px; color: var(--vg-swatch, #8A7F72); }
.vg-gcombi__icoon { display: block; width: 72px; height: 72px; }
.vg-gcombi__kaart--licht .vg-gcombi__icoon { filter: drop-shadow(0 0 .6px rgba(20, 20, 20, .55)) drop-shadow(0 0 .6px rgba(20, 20, 20, .35)); }
.vg-gcombi__boven { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vg-toets, #9C6B3C); }
.vg-gcombi__naam { font-size: .875rem; font-weight: 600; line-height: 1.25; }
.vg-gcombi__kleur { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--vg-tekst-2, #555); }
.vg-gcombi__staal { width: 12px; height: 12px; border-radius: 50%; background: var(--vg-swatch, #ccc); border: 1px solid rgba(0, 0, 0, .2); }
.vg-gcombi__staal--print { background: repeating-linear-gradient(45deg, #8A7F72 0 2px, #EDE6D6 2px 4px); }
.vg-gcombi__tip { display: flex; align-items: flex-start; gap: 8px; order: -1; margin: 0; font-size: .875rem; color: var(--vg-tekst, #141414); }
.vg-gcombi__kop { order: -2; }
.vg-gcombi__quote { flex: none; margin-top: 1px; fill: var(--vg-toets, #9C6B3C); }
@media (min-width: 700px) {
	.vg-gcombi__lijst { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 220px); margin: 0; padding: 0; overflow: visible; }
	.vg-gcombi__tip { order: 1; }
}

/* Over dit enkellaarsje: tekst met auteurregel, rechts de kenmerkentabel; mobiel ingeklapt na ± 4 regels (main.js). */
.vg-gover { display: grid; gap: 20px; padding-block: 26px 8px; }
@media (min-width: 900px) { .vg-gover { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; } }
.vg-gover > * { min-width: 0; }
.vg-gover .vg-h2 { margin: 0 0 8px; font-size: 1.1875rem; }
.vg-gover__inhoud p { margin: 0 0 .8em; }
.vg-gover__meer { display: inline-block; margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--vg-tekst, #141414); font: inherit; font-size: .875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vg-gover__meer[hidden] { display: none; }
@media (max-width: 699.98px) {
	.vg-js .vg-gover__inhoud.is-kort { max-height: 6.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
}
.vg-gover__kv { align-self: start; grid-template-columns: 110px minmax(0, 1fr); }
.vg-gover__kv a { color: var(--vg-tekst, #141414); }
.vg-gover__feiten { align-self: start; }
/* 0.42.0 E: "beoordeeld op de productfoto" onder de kenmerkentabel, rustig in secundaire tekst. */
.vg-gfotobasis { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: .75rem; line-height: 1.45; color: var(--vg-tekst-2, #555); }
.vg-gfotobasis__icoon { flex: none; margin-top: 1px; fill: currentColor; }

/* Ook met …: vier kaarten. */
.vg-graster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .vg-graster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Mobiele koopbalk van G: prijs en de bruine knop. */
.vg-gkoopbalk .vg-koopbalk__prijs .vg-prijs { font-size: 1.25rem; font-weight: 700; color: var(--vg-tekst, #141414); }
.vg-gknop--balk { padding: 11px 14px; font-size: .9375rem; }
@media (max-width: 799.98px) { .vg-gproduct--v2 { padding-bottom: 72px; } }

/* 0.43.0 B: tekstblok onder het raster van de home (vraag als H2, één alinea), rustig en smal voor de leesbaarheid. */
.vg-ghome__tekst { padding-block: 34px 18px; }
.vg-ghome__tekst > * { max-width: 68ch; }
.vg-ghome__tekst .vg-h2 { margin: 26px 0 8px; font-size: 1.1875rem; line-height: 1.3; }
.vg-ghome__tekst .vg-h2:first-child { margin-top: 0; }
.vg-ghome__tekst p { margin: 0; line-height: 1.65; color: var(--vg-tekst-2, #555); }
.vg-ghome__tekst p.vg-antwoord { margin: 0; color: var(--vg-tekst, #141414); }

/* 0.43.0 D: kruimelpad van G onder 700 px als één regel "‹ {ouder}"; daarboven het volledige pad. */
.vg-breadcrumbs__terug { display: none; }
@media (max-width: 699.98px) {
	.vg-breadcrumbs--terug ol { display: none; }
	.vg-breadcrumbs--terug .vg-breadcrumbs__terug { display: inline-block; max-width: 100%; padding-block: 6px; overflow: hidden; color: var(--vg-tekst, #141414); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
	.vg-breadcrumbs__terug span { margin-right: 2px; font-size: 1.125rem; line-height: 1; }
}

/* 0.44.0: productpagina G, "Waar draag je ze bij?" onder de tekst van "Over dit enkellaarsje" (_vg_draagtekst). */
.vg-gover__draagkop { margin: 14px 0 6px; font-size: 1rem; font-weight: 600; line-height: 1.3; scroll-margin-top: 80px; }
.vg-gover__draag { margin: 0 0 .8em; max-width: 68ch; }

/* ---------- 0.44.2 (enkellaarsjes, opbouw G): lange filtergroepen, zoekveld, filterscherm mobiel, gekozen filters ---------- */
/* Inklappen alleen met JS (main.js §8 zet .vg-gfilters__extra en .is-ingeklapt); zonder JS staan alle opties er. */
.vg-gfilters__lijst.is-ingeklapt:not(.is-zoekend) > .vg-gfilters__extra { display: none; }
.vg-gfilters__meer { display: inline-block; margin: 6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--vg-tekst, #141414); font: inherit; font-size: .8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vg-gfilters__meer[hidden] { display: none; }
.vg-gfilters__meer:focus-visible, .vg-gfilters__kopknop:focus-visible, .vg-gsheet__sluit:focus-visible, .vg-gbalk__filters:focus-visible { outline: 2px solid var(--vg-tekst, #141414); outline-offset: 2px; }
.vg-gfilters__zoekvak { margin: 0 0 8px; }
.vg-gfilters__zoek { display: block; width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--vg-rand, #E5E5E5); border-radius: var(--vg-radius-s, 4px); background: #fff; color: var(--vg-tekst, #141414); font: inherit; font-size: 1rem; }
.vg-gfilters__zoek:focus { outline: 2px solid var(--vg-tekst, #141414); outline-offset: 0; border-color: var(--vg-tekst, #141414); }
.vg-gfilters__leeg { margin: 0; font-size: .8125rem; color: var(--vg-meta, #666); }
.vg-gfilters__leeg:empty { display: none; }
/* Aantal gekozen in de kop en de kop van het filterscherm: alleen in het filterscherm. */
.vg-gfilters__gekozen, .vg-gsheet__kop { display: none; }

/* Gekozen filters als chips boven de lijst (ook desktop en zonder JS). */
.vg-gactief { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: -4px 0 14px; padding: 0; list-style: none; }
.vg-gactief__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--vg-tekst, #141414); border-radius: var(--vg-radius-chip, 20px); color: var(--vg-tekst, #141414); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.vg-gactief__chip span { font-size: 1rem; line-height: 1; }
.vg-gactief__chip:hover { background: var(--vg-tekst, #141414); color: #fff; }
.vg-gactief__wis { padding: 4px 2px; color: var(--vg-tekst, #141414); font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }

/* Plakkende balk Filters · Sorteren: alleen met JS onder 900 px; het oude knopje en het sorteermenu in de toolbar wijken. */
.vg-gbalk { display: none; }
@media (max-width: 899px) {
	.vg-js .vg-gbalk { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--vg-gutter, 16px)) 12px; padding: 8px var(--vg-gutter, 16px); background: var(--vg-bg, #fff); border-bottom: 1px solid var(--vg-rand, #E5E5E5); }
	.vg-js .vg-gfilters__knop, .vg-js .vg-gtoolbar .vg-sort { display: none; }
	.vg-js .vg-gfilters { margin-bottom: -20px; } /* de lege kolom geeft geen extra rasterruimte */
	.vg-gbalk__filters { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--vg-tekst, #141414); border-radius: var(--vg-radius-chip, 20px); background: var(--vg-tekst, #141414); color: #fff; font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
	.vg-gbalk__sort { flex: 1 1 0; min-width: 0; gap: 0; }
	.vg-gbalk__sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.vg-gbalk__sort select { width: 100%; min-height: 42px; border-color: var(--vg-tekst, #141414); border-radius: var(--vg-radius-chip, 20px); color: var(--vg-tekst, #141414); font-size: .875rem; text-overflow: ellipsis; }

	/* Filterscherm: het paneel als dialoog over het hele scherm, van onder ingeschoven; de pagina erachter scrolt niet. */
	.vg-gsheet-open, .vg-gsheet-open body { overflow: hidden; }
	.vg-js .vg-gfilters__open:checked ~ .vg-gfilters__paneel { position: fixed; inset: 0; z-index: 1000; display: block; margin: 0; padding: 0 16px; overflow-y: auto; overscroll-behavior: contain; background: var(--vg-bg, #fff); animation: vg-gsheet-in .22s ease-out; }
	.vg-js .vg-gsheet__kop { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; margin: 0 -16px 8px; padding: 8px 8px 8px 16px; background: var(--vg-bg, #fff); border-bottom: 1px solid var(--vg-rand, #E5E5E5); }
	.vg-gsheet__titel { margin: 0 auto 0 0; font-size: 1.0625rem; font-weight: 700; }
	.vg-gsheet__wis { color: var(--vg-tekst, #141414); font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
	.vg-gsheet__sluit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--vg-tekst, #141414); font-size: 1.75rem; line-height: 1; cursor: pointer; }
	.vg-js .vg-gfilters__open:checked ~ .vg-gfilters__paneel .vg-gfilters__toon { margin: 12px -16px 0; border-radius: 0; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }

	/* Accordeon (kopknop van main.js): dicht = alleen de kop. */
	.vg-js .vg-gfilters__gekozen { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--vg-tekst, #141414); color: #fff; font-size: .6875rem; font-weight: 700; }
	.vg-gfilters__kopknop { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
	.vg-gfilters__kopknop::after { content: ""; width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-135deg) translate(-2px, -2px); }
	.vg-gfilters__kopknop[aria-expanded="false"]::after { transform: rotate(45deg) translate(-2px, -2px); }
	.vg-gfilters__groep.is-dicht > .vg-gfilters__inhoud { display: none; }
	.vg-js .vg-gfilters__groep:has(.vg-gfilters__kopknop) { margin-bottom: 0; padding-top: 0; }
	.vg-js .vg-gfilters__groep:has(.vg-gfilters__kopknop) .vg-gfilters__kop { margin: 0; }
	.vg-js .vg-gfilters__groep:not(.is-dicht) > .vg-gfilters__inhoud { padding-bottom: 12px; }
	.vg-js .vg-gfilters__paneel .vg-gfilter { min-height: 40px; }
	.vg-js .vg-gfilters__groep--maat .vg-gfilter { min-height: 0; }
}
@keyframes vg-gsheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vg-js .vg-gfilters__open:checked ~ .vg-gfilters__paneel { animation: none; } }

/* ---------- 0.45.0: home van G als etalage van een modeblad (g/front-page.php, inc/home-g.php) en outfitpagina's ---------- */
/* Alleen klassen onder .vg-etalage (de main van de home van G), .vg-outfits, .vg-goutfit, .vg-gcombi__link en .vg-opbouw-g;
   pantoffelwinkel en sloffenwinkel gebruiken ze niet. Koppen in de serif (token font-serif), cijfers in Plex Mono, banden
   wit → zand → inkt → wit. Beweging alleen CSS en stil bij prefers-reduced-motion. */
.vg-etalage { --vg-e-serif: var(--vg-font-serif, Georgia, 'Times New Roman', serif); overflow-x: clip; }
html:has(.vg-etalage) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.vg-etalage) { scroll-behavior: auto; } }

/* Kopbalk van G: "Menu" lichter, zonder kader (alleen icoon en woord). */
.vg-opbouw-g .vg-nav__toggle { border-color: transparent; padding-inline: 6px; }
.vg-opbouw-g .vg-nav__toggle:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }

/* Omslag: foto over de volle breedte, tekst op de grijze achtergrond van de foto (donkere tekst: contrast 7:1), liniaal eronder. */
.vg-omslag { position: relative; background: #A0A2A6; color: var(--vg-tekst, #141414); }
.vg-omslag--zonder { background: var(--vg-zand, #F4EFE8); padding-bottom: 8px; }
.vg-omslag__foto, .vg-omslag__foto img { display: block; width: 100%; }
.vg-omslag__foto img { height: auto; aspect-ratio: 3 / 5; object-fit: cover; object-position: center bottom; }
.vg-omslag__tekst { position: absolute; inset: 0 0 auto; padding: 22px var(--vg-gutter, 16px) 0; max-width: 32rem; }
.vg-omslag--zonder .vg-omslag__tekst { position: static; padding-bottom: 20px; }
.vg-omslag__label { margin: 0 0 10px; font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.vg-omslag__kop { margin: 0; font-family: var(--vg-e-serif); font-size: clamp(2.625rem, 11.5vw, 3.25rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.vg-omslag__kop em { font-style: italic; }
.vg-omslag__sub { max-width: 30ch; margin: 12px 0 0; font-size: .9375rem; line-height: 1.4; }
.vg-omslag__knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }

/* Knoppen van de etalage. */
.vg-eknop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--vg-tekst, #141414); border-radius: var(--vg-radius-chip, 20px); color: var(--vg-tekst, #141414); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.vg-eknop--inkt { background: var(--vg-tekst, #141414); color: #fff; }
.vg-eknop--inkt:hover { background: #000; color: #fff; }
.vg-eknop--rand { background: rgba(255, 255, 255, .55); }
.vg-eknop--rand:hover { background: #fff; color: var(--vg-tekst, #141414); }
.vg-eknop--rand .vg-cijfer { color: var(--vg-afgeprijsd, #B0242C); font-weight: 500; }
.vg-eknop--breed { width: 100%; min-height: 52px; border-radius: var(--vg-radius, 4px); }
.vg-eknop--breed:hover { background: var(--vg-tekst, #141414); color: #fff; }
.vg-eknop:focus-visible, .vg-hakken__tegel:focus-visible, .vg-stijlrij__link:focus-visible, .vg-outfits__link:focus-visible, .vg-gids-g__link:focus-visible, .vg-salerij__alle:focus-visible { outline: 2px solid var(--vg-toets, #9C6B3C); outline-offset: 3px; }

/* Liniaal 0-10 cm: tikjes vanaf de bovenrand, cijfers op de grenzen van de hakmeter (0, 2, 4, 7, 10). */
.vg-liniaal { position: relative; height: 34px; padding-inline: var(--vg-gutter, 16px); background: var(--vg-bg, #fff); border-top: 2px solid var(--vg-tekst, #141414); }
.vg-liniaal__tikken { display: block; width: 100%; height: 12px; stroke: var(--vg-tekst, #141414); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.vg-liniaal__tikken line { vector-effect: non-scaling-stroke; }
.vg-liniaal__cijfers { position: relative; height: 16px; margin-top: 2px; font-family: var(--vg-font-cijfer, ui-monospace, monospace); font-size: .6875rem; }
.vg-liniaal__cm { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.vg-liniaal__cm--0 { left: 0; transform: none; }
.vg-liniaal__cm--2 { left: 20%; }
.vg-liniaal__cm--4 { left: 40%; }
.vg-liniaal__cm--7 { left: 70%; }
.vg-liniaal__cm--10 { left: 100%; transform: translateX(-100%); }

/* Banden en hun genummerde kop ("01 — Hak" in Plex Mono met een dunne lijn, de titel groot in de serif). */
/* 0.46.2 (merge): .vg-band en .vg-band__kop bestaan ook bij sloffenwinkel (band op de home); deze twee regels daarom alleen
   onder opbouw G, met :where() zodat de specificiteit op enkellaarsjes gelijk blijft. */
:where(.vg-opbouw-g) .vg-band { padding-block: 44px; }
/* 0.45.1: de oude .vg-band (sloffenwinkel, regel ± 4431) geeft accentkleur + witte tekst; de nieuwe banden zetten beide zelf. */
.vg-band--wit { background: var(--vg-bg, #fff); color: var(--vg-tekst, #141414); }
.vg-band--zand { background: var(--vg-zand, #F4EFE8); color: var(--vg-tekst, #141414); }
.vg-band--inkt { background: var(--vg-tekst, #141414); color: #fff; }
:where(.vg-opbouw-g) .vg-band__kop { display: grid; gap: 8px; margin-bottom: 20px; }
.vg-band__nr { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.vg-band__nr span { letter-spacing: 0; }
.vg-band__nr::after { content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: .35; }
.vg-band__nr span::after { content: " —"; }
.vg-band__titel { margin: 0; font-family: var(--vg-e-serif); font-size: clamp(2.25rem, 9vw, 3.5rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.vg-band__uitleg { max-width: 46ch; margin: 4px 0 0; color: var(--vg-tekst-2, #555); line-height: 1.5; }
.vg-band__meer { margin: 22px 0 0; }
.vg-band__link { color: inherit; font-weight: 600; text-underline-offset: 4px; }

/* Veegrij (stijl, aanbiedingen): scroll-snap op mobiel, binnen de container op desktop. */
.vg-veeg { display: flex; gap: 12px; max-width: calc(1200px + 2 * var(--vg-gutter, 16px)); margin: 0 auto; padding: 0 var(--vg-gutter, 16px) 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vg-gutter, 16px); scrollbar-width: thin; list-style: none; }
.vg-veeg > li { flex: 0 0 auto; scroll-snap-align: start; }

/* 01 Hak: vier staande tegels op een liniaal, even hoog als hun hak (plat laag, hoog hoog); veegbaar op mobiel. */
/* 0.45.3 (hakblok, Sjoerd 03-10): de laars is de held. Even hoge zandvlakken, de laars groot met de zool op de baseline (een
   dunne effen lijn, geen tweede liniaal); de trap zit in de maatlijn naast de hak (Plex Mono, bruin). Naam in de serif en
   "38 enkellaarsjes →" eronder; mobiel een veegrij met tegels van ± 70 %. Het icoon (48 × 46,2) heeft 2,2 eenheden lucht onder
   de zool: margin-bottom trekt die eraf. */
.vg-hakken { --vg-laars-w: 104px; --vg-maat: #7E5530; display: flex; gap: 12px; margin: 0 calc(-1 * var(--vg-gutter, 16px)); padding: 0 var(--vg-gutter, 16px) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vg-gutter, 16px); scrollbar-width: thin; list-style: none; }
.vg-hakken__item { flex: 0 0 70%; scroll-snap-align: start; }
.vg-hakken__tegel { display: flex; flex-direction: column; gap: 6px; height: 100%; color: var(--vg-tekst, #141414); text-decoration: none; }
.vg-hakken__vlak { display: flex; align-items: flex-end; justify-content: center; height: 150px; margin-bottom: 8px; background: var(--vg-zand, #F4EFE8); border-bottom: 1px solid var(--vg-tekst, #141414); border-radius: var(--vg-radius, 4px) var(--vg-radius, 4px) 0 0; transition: background-color .15s; }
.vg-hakken__tegel:hover .vg-hakken__vlak { background: #EBE3D7; }
.vg-hakken__laars { position: relative; display: block; width: var(--vg-laars-w); margin-left: 44px; line-height: 0; }
.vg-hakken__icoon { display: block; width: var(--vg-laars-w); height: calc(var(--vg-laars-w) * 46.2 / 48); margin-bottom: calc(var(--vg-laars-w) * -2.2 / 48); }
.vg-hakken__maat { position: absolute; bottom: 0; left: -8px; height: var(--vg-hak-l, 10px); border-left: 1px solid var(--vg-maat); }
.vg-hakken__maat::before, .vg-hakken__maat::after { content: ""; position: absolute; left: -4px; width: 7px; border-top: 1px solid var(--vg-maat); }
.vg-hakken__maat::before { top: 0; }
.vg-hakken__maat::after { bottom: 0; }
.vg-hakken__cm { position: absolute; top: -.5em; right: 8px; font-size: .6875rem; line-height: 1; white-space: nowrap; color: var(--vg-maat); }
.vg-hakken__item--1 { --vg-hak-l: 6px; }
.vg-hakken__item--2 { --vg-hak-l: 14px; }
.vg-hakken__item--3 { --vg-hak-l: 24px; }
.vg-hakken__item--4 { --vg-hak-l: 36px; }
.vg-hakken__naam { font-family: var(--vg-e-serif); font-size: 2rem; line-height: 1; }
.vg-hakken__n { display: flex; align-items: baseline; gap: 8px; font-size: .875rem; }
.vg-hakken__pijl { font-size: 1.125rem; line-height: 1; transition: transform .15s; }
.vg-hakken__tegel:hover .vg-hakken__pijl { transform: translateX(3px); }
.vg-hakken__vorm { display: grid; gap: 10px; margin-top: 26px; }
.vg-hakken__vormkop { margin: 0; font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-tekst-2, #555); }
.vg-hakken__chip { display: inline-flex; align-items: center; gap: 6px; }
.vg-hakken__chipicoon { width: 22px; height: 21px; flex: none; }
.vg-hakken__vorm .vg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

/* 02 Stijl: productfoto vrijstaand op zand, de stijlnaam groot in de serif eronder. */
.vg-stijlrij__item { width: min(62vw, 260px); }
.vg-stijlrij__link { display: grid; gap: 6px; color: var(--vg-tekst, #141414); text-decoration: none; }
.vg-stijlrij__foto { display: block; aspect-ratio: 1; overflow: hidden; background: var(--vg-zand, #F4EFE8); border-radius: var(--vg-radius, 4px); }
.vg-stijlrij__foto img { display: block; width: 100%; height: 100%; padding: 10%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; }
.vg-stijlrij__link:hover .vg-stijlrij__foto img { transform: scale(1.04); }
.vg-stijlrij__naam { font-family: var(--vg-e-serif); font-size: 1.875rem; line-height: 1.05; }
.vg-stijlrij__n { font-size: .8125rem; color: var(--vg-tekst-2, #555); }

/* 03 Outfit: kledingtegels (ook op de hub van de outfitpagina's); mobiel 2 kolommen, de eerste dubbel breed. */
.vg-outfits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.vg-outfits__tegel--eerste { grid-column: span 2; }
.vg-outfits__link { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; height: 100%; padding: 12px 14px; overflow: hidden; background: #fff; border-radius: var(--vg-radius, 4px); color: var(--vg-tekst, #141414); text-decoration: none; transition: box-shadow .15s; }
.vg-outfits__link:hover { box-shadow: 0 0 0 1px var(--vg-tekst, #141414); }
.vg-outfits__icoon { grid-row: span 2; display: block; width: 52px; height: 52px; color: var(--vg-tekst, #141414); }
.vg-outfits__icoon img { display: block; width: 100%; height: 100%; }
.vg-outfits__naam { align-self: end; font-family: var(--vg-e-serif); font-size: 1.375rem; line-height: 1.05; }
.vg-outfits__n { align-self: start; font-size: .75rem; color: var(--vg-tekst-2, #555); }
/* 0.45.2: mobiel gestapeld (icoon, naam, aantal onder elkaar); naast elkaar kapte "485 enkellaarsjes" af op 375 px. */
@media (max-width: 599px) {
	.vg-outfits__link { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; row-gap: 6px; }
	.vg-outfits__icoon { grid-row: auto; width: 40px; height: 40px; }
	.vg-outfits__naam, .vg-outfits__n { align-self: auto; }
}
.vg-outfits__tegel--eerste .vg-outfits__naam { font-size: 1.75rem; }
.vg-outfits--beeld .vg-outfits__tegel--eerste .vg-outfits__link { grid-template-columns: 1fr; grid-template-rows: auto; align-content: end; min-height: 260px; padding: 18px; background: #141414; color: #fff; }
.vg-outfits__beeld { position: absolute; inset: 0; display: block; overflow: hidden; }
/* Het uitgelichte gidsbeeld heeft onderaan een label en het woordmerk: 120 % hoog vanaf de bovenkant valt die strook weg. */
.vg-outfits__beeld img { display: block; width: 100%; height: 120%; object-fit: cover; object-position: center top; }
.vg-outfits__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 60%); }
.vg-outfits--beeld .vg-outfits__tegel--eerste .vg-outfits__icoon { display: none; }
.vg-outfits--beeld .vg-outfits__tegel--eerste .vg-outfits__naam, .vg-outfits--beeld .vg-outfits__tegel--eerste .vg-outfits__n { position: relative; color: #fff; }

/* Populair: vaste fotoverhouding, packshots en sfeerfoto's binnen het vlak (contain). */
.vg-etalage .vg-gkaart__foto img { width: 100%; height: 100%; object-fit: contain; }

/* 04 Afgeprijsd: zwarte band, witte kaarten in een veegrij, laatste kaart "Alle aanbiedingen". */
.vg-band--inkt .vg-band__uitleg { color: #D9D9D9; }
.vg-salerij__item { width: min(46vw, 220px); }
.vg-salerij .vg-gkaart { height: 100%; padding: 0 0 10px; background: #fff; border-radius: var(--vg-radius, 4px); overflow: hidden; color: var(--vg-tekst, #141414); }
.vg-salerij .vg-gkaart__link { color: inherit; }
.vg-salerij .vg-gkaart__titel, .vg-salerij .vg-gkaart__prijs, .vg-salerij .vg-gkaart__labels { padding-inline: 10px; }
.vg-salerij__alle { display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 220px; padding: 16px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--vg-radius, 4px); color: #fff; font-family: var(--vg-e-serif); font-size: 1.875rem; line-height: 1.05; text-decoration: none; }
.vg-salerij__alle .vg-cijfer { font-size: .875rem; }
.vg-salerij__alle:hover { background: #fff; color: var(--vg-tekst, #141414); }

/* 05 Gidsen: redactionele kaarten, de eerste groot. */
.vg-gids-g { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.vg-gids-g__link { display: grid; gap: 8px; color: var(--vg-tekst, #141414); text-decoration: none; }
.vg-gids-g__beeld { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--vg-zand, #F4EFE8); border-radius: var(--vg-radius, 4px); }
.vg-gids-g__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vg-gids-g__link:hover .vg-gids-g__beeld img { transform: scale(1.03); }
.vg-gids-g__label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vg-toets, #9C6B3C); }
.vg-gids-g__titel { font-family: var(--vg-e-serif); font-size: 1.625rem; line-height: 1.1; text-wrap: balance; }
.vg-gids-g__item--groot .vg-gids-g__titel { font-size: 2.125rem; }
.vg-gids-g__item--tekst .vg-gids-g__link { padding: 18px; background: var(--vg-zand, #F4EFE8); border-radius: var(--vg-radius, 4px); }
.vg-gids-g__link:hover .vg-gids-g__titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Merken: trage marquee in de serif (pauze bij hover of focus; stil bij reduced motion, dan veegbaar). */
.vg-marquee { display: flex; overflow: hidden; padding-block: 6px; border-block: 1px solid var(--vg-rand, #E5E5E5); }
.vg-marquee__rij { display: flex; flex: 0 0 auto; gap: 2.5rem; margin: 0; padding: 10px 2.5rem 10px 0; list-style: none; animation: vg-marquee 70s linear infinite; }
.vg-marquee:hover .vg-marquee__rij, .vg-marquee:focus-within .vg-marquee__rij { animation-play-state: paused; }
.vg-marquee a { color: var(--vg-tekst, #141414); font-family: var(--vg-e-serif); font-size: 2rem; line-height: 1.1; text-decoration: none; white-space: nowrap; }
.vg-marquee a:hover { color: var(--vg-toets, #9C6B3C); }
@keyframes vg-marquee { to { transform: translateX(-100%); } }
/* 0.46.1: veegrij is het containing block van absolute kinderen (screen-reader-text in de kaarten ontsnapte en rekte de pagina op tot ± 1.750 px; iOS Safari zoomde de hele pagina uit, Sjoerd 03-10). */
.vg-veeg { position: relative; }
@media (prefers-reduced-motion: reduce) {
	.vg-marquee { overflow-x: auto; }
	.vg-marquee__rij { animation: none; }
	.vg-marquee__rij[aria-hidden="true"] { display: none; }
	.vg-hakken__vlak, .vg-hakken__pijl, .vg-stijlrij__foto img, .vg-gids-g__beeld img, .vg-outfits__link { transition: none; }
}

/* Vragen als <details>: de vraag (H2) in de summary met een plus/min; het antwoord blijft in de HTML. */
.vg-vragen__binnen { max-width: calc(68ch + 2 * var(--vg-gutter, 16px)); }
.vg-vragen .vg-band__nr { margin-bottom: 8px; }
.vg-vraag { border-bottom: 1px solid var(--vg-rand, #E5E5E5); }
.vg-vraag__summary { display: flex; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer; list-style: none; }
.vg-vraag__summary::-webkit-details-marker { display: none; }
.vg-vraag__summary::after { content: "+"; flex: 0 0 auto; margin-left: auto; font-family: var(--vg-font-cijfer, ui-monospace, monospace); font-size: 1.25rem; line-height: 1; }
.vg-vraag[open] > .vg-vraag__summary::after { content: "–"; }
.vg-vraag__kop { margin: 0; font-family: var(--vg-e-serif); font-size: 1.5rem; font-weight: 400; line-height: 1.15; }
.vg-vraag__antwoord { margin: 0 0 18px; color: var(--vg-tekst-2, #555); line-height: 1.65; }
.vg-vraag__antwoord.vg-antwoord { color: var(--vg-tekst, #141414); }
.vg-vragen__vertrouwen { margin: 22px 0 0; font-size: .8125rem; color: var(--vg-tekst-2, #555); }

/* Productpagina: kaart van Combineer met als link naar de outfitpagina (de hele kaart, tekst ongewijzigd). */
.vg-gcombi__kaart--link { position: relative; transition: box-shadow .15s; }
.vg-gcombi__kaart--link:hover { box-shadow: 0 0 0 1px var(--vg-tekst, #141414); }
.vg-gcombi__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vg-gcombi__link:focus-visible { outline: 2px solid var(--vg-toets, #9C6B3C); outline-offset: 2px; }

/* Outfitpagina: modelchips in een veegbare rij. */
.vg-goutfit .vg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }

@media (min-width: 700px) {
	/* Omslag liggend (2:1, hoogstens 78 % van het scherm): de vrouw links, de tekst rechts op de grijze achtergrond. */
	.vg-omslag__foto img { aspect-ratio: 2 / 1; max-height: 78vh; object-position: left center; }
	.vg-omslag__tekst { inset: 50% max(var(--vg-gutter, 16px), calc((100vw - 1200px) / 2)) auto auto; width: min(42%, 34rem); max-width: none; padding: 0; transform: translateY(-55%); }
	.vg-omslag--zonder .vg-omslag__tekst { width: auto; transform: none; padding: 40px var(--vg-gutter, 16px); }
	.vg-omslag__kop { font-size: clamp(2.75rem, 5.4vw, 4.75rem); }
	.vg-omslag__sub { font-size: 1.0625rem; }
	.vg-liniaal { padding-inline: max(var(--vg-gutter, 16px), calc((100vw - 1200px) / 2)); }

	.vg-band { padding-block: 72px; }
	.vg-band__kop { margin-bottom: 28px; }
	.vg-hakken { --vg-laars-w: 168px; margin: 0; padding-inline: 0; overflow: visible; gap: 16px; }
	.vg-hakken__item { flex: 1 1 0; }
	.vg-hakken__vlak { height: 216px; }
	.vg-hakken__laars { margin-left: 60px; }
	.vg-hakken__cm { font-size: .75rem; }
	.vg-hakken__item--1 { --vg-hak-l: 8px; }
	.vg-hakken__item--2 { --vg-hak-l: 22px; }
	.vg-hakken__item--3 { --vg-hak-l: 38px; }
	.vg-hakken__item--4 { --vg-hak-l: 56px; }
	.vg-hakken__naam { font-size: 2.75rem; }
	.vg-hakken__vorm { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }

	.vg-outfits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.vg-outfits__tegel--eerste { grid-column: span 1; }
	.vg-outfits--beeld .vg-outfits__tegel--eerste { grid-column: span 2; grid-row: span 2; }
	.vg-outfits__link { padding: 16px 18px; }
	.vg-outfits__icoon { width: 64px; height: 64px; }

	.vg-gids-g { grid-template-columns: 1.6fr 1fr; gap: 28px; }
	.vg-gids-g__item--groot { grid-row: span 2; }
	.vg-gids-g__item--groot .vg-gids-g__titel { font-size: 2.75rem; }
	.vg-eknop--breed { width: auto; min-width: 320px; }
	.vg-band__meer { text-align: center; }
	.vg-marquee a { font-size: 2.75rem; }
	.vg-vraag__kop { font-size: 1.75rem; }
}

@media (min-width: 1000px) {
	.vg-outfits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.vg-stijlrij__item { width: calc((min(100vw, 1200px + 2 * var(--vg-gutter, 16px)) - 2 * var(--vg-gutter, 16px) - 48px) / 5); }
	.vg-salerij__item { width: 210px; }
	/* Asymmetrie: de aanbiedingen steken over de onderrand van de zwarte band. */
	.vg-band--inkt { padding-bottom: 0; }
	.vg-band--inkt .vg-salerij { margin-bottom: -44px; position: relative; }
	.vg-band--inkt + .vg-band { padding-top: 116px; }
}

/* ---------- 0.45.3: outfitfiguren naast de intro en het lengteblok (inc/outfit.php) ---------- */
/* Figuren: inkt op zand, decoratief; vaste hoogte (width/height in de <img>), dus geen CLS. Mobiel boven de introtekst
   (onder de H1), desktop rechts naast de tekst (float); de hub als rij van vijf onder de H1. */
.vg-gfiguren { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 4px 0 12px; padding: 12px 16px 0; background: var(--vg-zand, #F4EFE8); border-radius: var(--vg-radius, 4px); }
.vg-gfiguren img { display: block; height: 128px; width: auto; }
.vg-gfiguren--rij { gap: 8px; }
.vg-gfiguren--rij img { height: 104px; }
@media (min-width: 700px) {
	.vg-gcat__intro--figuren { display: flow-root; }
	.vg-gfiguren:not(.vg-gfiguren--rij) { float: right; margin: 0 0 12px 24px; padding: 16px 20px 0; }
	.vg-gfiguren:not(.vg-gfiguren--rij) img { height: 176px; }
	.vg-gfiguren--rij { justify-content: flex-start; gap: 18px; padding: 14px 24px 0; }
	.vg-gfiguren--rij img { height: 140px; }
}

/* Lengteblok: drie (hub zes) figuren met bijschrift; mobiel veegbaar, vanaf 700 px drie kolommen. */
.vg-lengtes { padding-block: 26px 8px; }
.vg-lengtes__kop { margin: 0 0 14px; font-size: 1.1875rem; }
.vg-lengtes__lijst { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.vg-lengtes__lijst > li { scroll-snap-align: start; }
.vg-lengtes__item { margin: 0; }
.vg-lengtes__beeld { display: flex; justify-content: center; align-items: flex-end; height: 172px; padding-top: 12px; background: var(--vg-zand, #F4EFE8); border-radius: var(--vg-radius, 4px); }
.vg-lengtes__beeld img { display: block; height: 160px; width: auto; }
.vg-lengtes figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.5; color: var(--vg-tekst-2, #555); }
.vg-lengtes__naam { display: block; margin-bottom: 2px; font-family: var(--vg-font-cijfer, ui-monospace, monospace); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-tekst, #141414); }
.vg-prose .vg-lengtes { margin-block: 8px 20px; padding-top: 6px; }
.vg-prose .vg-lengtes__lijst { padding-left: 0; }
.vg-prose .vg-lengtes__lijst > li { margin: 0; }
@media (min-width: 700px) {
	.vg-lengtes__lijst { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; }
	.vg-lengtes__beeld { height: 212px; }
	.vg-lengtes__beeld img { height: 200px; }
}

/* 0.45.3 (home, Sjoerd 03-10): geen bandnummers meer boven de H2; de outfituitleg donker en op desktop op één regel; de grote
   outfittegel met het schone beeld (zonder label en woordmerk) en een raster zonder gaten: 2 × 2 groot links, rechts 2 × 2 en
   daaronder een rij van vier (negen tegels), dense vult een gat bij een ander aantal. */
.vg-band--zand .vg-band__uitleg { color: var(--vg-tekst-2, #555); }
.vg-outfits { grid-auto-flow: row dense; }
.vg-outfits__beeld .vg-outfits__img--schoon { height: 100%; object-position: 40% 70%; }
@media (min-width: 1000px) {
	.vg-band--zand .vg-band__uitleg { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 0.45.3 (omslag desktop, Sjoerd 03-10: hoofd afgekapt, laars onder de ondertitel): vanaf 1000 px een raster met de eigen
   uitsnede (omslag-desktop-*.webp: figuur helemaal in beeld, rechts uitgevloeid naar #989A9E) op volle hoogte links en de tekst
   in een eigen kolom ernaast, die de laars dus nooit raakt; de liniaal over de hele breedte eronder. */
@media (min-width: 1000px) {
	.vg-omslag:not(.vg-omslag--zonder) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; background: #989A9E; }
	.vg-omslag:not(.vg-omslag--zonder) .vg-omslag__foto { grid-column: 1; grid-row: 1; width: auto; }
	.vg-omslag:not(.vg-omslag--zonder) .vg-omslag__foto img { width: auto; height: clamp(500px, 76vh, 760px); max-height: none; aspect-ratio: auto; object-fit: contain; }
	.vg-omslag:not(.vg-omslag--zonder) .vg-omslag__tekst { position: static; grid-column: 2; grid-row: 1; justify-self: start; width: auto; max-width: 36rem; padding: 32px var(--vg-gutter, 16px) 32px 24px; transform: none; }
	.vg-omslag:not(.vg-omslag--zonder) .vg-omslag__kop { font-size: clamp(2.75rem, 4.2vw, 4.5rem); }
	.vg-omslag:not(.vg-omslag--zonder) .vg-liniaal { grid-column: 1 / -1; grid-row: 2; }
}

/* 0.45.6: vierkante omslag (config home.g.omslag.vorm = vierkant). Mobiel: tekst boven de foto op de randkleur; desktop: tekst
   links, foto rechts op volle hoogte. Specificiteit 0,2,0 en achteraan, zodat het de staande variant (0.45.3) overschrijft. */
.vg-omslag.vg-omslag--vierkant { display: flex; flex-direction: column; background: var(--vg-omslag-bg, #DCE0E8); }
.vg-omslag.vg-omslag--vierkant .vg-omslag__tekst { position: static; order: 1; max-width: none; padding: 24px var(--vg-gutter, 16px) 20px; transform: none; }
.vg-omslag.vg-omslag--vierkant .vg-omslag__foto { order: 2; }
.vg-omslag.vg-omslag--vierkant .vg-omslag__foto img { width: 100%; height: auto; aspect-ratio: 1; max-height: none; object-fit: cover; }
.vg-omslag.vg-omslag--vierkant .vg-liniaal { order: 3; }
@media (min-width: 1000px) {
	.vg-omslag.vg-omslag--vierkant { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.vg-omslag.vg-omslag--vierkant .vg-omslag__tekst { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 40rem; padding: 40px 56px 40px max(var(--vg-gutter, 16px), calc((100vw - 1200px) / 2)); }
	.vg-omslag.vg-omslag--vierkant .vg-omslag__foto { grid-column: 2; grid-row: 1; width: auto; }
	.vg-omslag.vg-omslag--vierkant .vg-omslag__foto img { width: auto; height: clamp(460px, 70vh, 680px); }
	/* 0.45.7 (Sjoerd 03-10: "vrij harde overgang"): linkerrand zacht laten overlopen in de achtergrond. */
	.vg-omslag.vg-omslag--vierkant .vg-omslag__foto img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
	.vg-omslag.vg-omslag--vierkant .vg-omslag__tekst { padding-right: 24px; }
	.vg-omslag.vg-omslag--vierkant .vg-omslag__foto { margin-left: -3vw; }
	.vg-omslag.vg-omslag--vierkant .vg-liniaal { grid-column: 1 / -1; grid-row: 2; }
}

/* 0.45.8 (homecheck Sjoerd 03-10): kop op de zwarte band wit; twee witte banden na elkaar geen dubbele witruimte; geen horizontaal
   scrollen door de cookiebanner; cm-labels niet kleiner dan 12 px. */
.vg-band--inkt .vg-band__titel, .vg-band--inkt h2 { color: #fff; }
.vg-band--wit + .vg-band--wit { padding-top: 0; }
html, body { overflow-x: clip; }
.cmplz-cookiebanner { max-width: 100vw; }
.vg-hakken__cm { font-size: .75rem; }

/* ---------- 0.46.0: productpagina van G in de stijl van de home (bouwopdracht 0.46.0; g/single-product.php) ----------
   Alleen klassen van de productpagina van G (.vg-gproduct--v2, .vg-gpsec, .vg-gp-h2, .vg-gcombi, .vg-gmini, .vg-glabels, .vg-gook).
   Koppen in de serif van de home; secties met één witruimte (desktop 72, mobiel 44), twee witte na elkaar zonder dubbele ruimte. */
.vg-gproduct--v2 { --vg-gp-ruimte: 44px; --vg-gp-serif: var(--vg-font-serif, Georgia, 'Times New Roman', serif); }
@media (min-width: 900px) { .vg-gproduct--v2 { --vg-gp-ruimte: 72px; } }
.vg-gproduct--v2 .vg-gpsec { margin: 0; padding-block: var(--vg-gp-ruimte); }
.vg-gproduct--v2 .vg-gproduct__top.vg-gpsec { padding-top: 8px; }
.vg-gproduct--v2 .vg-gpsec--wit + .vg-gpsec--wit { padding-top: 0; }
.vg-gproduct--v2 .vg-gook.vg-gpsec { padding-bottom: 0; } /* Daarna nog de ondermarge van de main (40) en de footer (48). */

/* Koppen: H1 en H2 in de serif, gewicht 400 zoals op de home. */
.vg-gproduct--v2 .vg-gproduct__titel { margin: 4px 0 16px; font-family: var(--vg-gp-serif); font-size: clamp(2rem, 8.5vw, 2.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 900px) { .vg-gproduct--v2 .vg-gproduct__titel { font-size: clamp(2.5rem, 3.4vw, 3rem); } }
.vg-gproduct--v2 .vg-gp-h2 { margin: 0 0 14px; font-family: var(--vg-gp-serif); font-size: clamp(1.75rem, 6.5vw, 2.125rem); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.vg-gproduct--v2 .vg-gwinkels__kop.vg-gp-h2 { margin-bottom: 6px; font-size: 1.75rem; }
.vg-gproduct--v2 .vg-gsec__kop .vg-gp-h2 { margin: 0; font-size: clamp(1.75rem, 6.5vw, 2.125rem); }
.vg-gproduct--v2 .vg-gsec__kop { align-items: baseline; margin-bottom: 18px; }

/* Productfoto: fotovlak met gelijke marge rondom, beeld contain; desktop plakt de foto naast de koopkolom. */
.vg-gproduct--v2 .vg-gproduct__foto { max-height: none; padding: 7%; border-radius: var(--vg-radius, 4px); overflow: hidden; }
.vg-gproduct--v2 .vg-gproduct__foto img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
/* 0.56.6: iOS Safari loste height:100% in dit vak niet op en toonde de foto op natuurlijke 4:5-verhouding, onderaan afgesneden; absoluut in het vierkant is eenduidig. */
.vg-gproduct--v2 .vg-gproduct__foto { position: relative; }
@media (min-width: 900px) { .vg-gproduct--v2 .vg-gproduct__media { position: sticky; top: 16px; align-self: start; } }

/* Hakmeter: de laarsjes van het hakblok, de eigen hoogte in de toetskleur, de rest lichtgrijs; de hakregel ernaast. De kleur gaat
   via de tokens die .vg-i-k en .vg-i-t lezen (custom properties erven door <use> heen). */
.vg-gproduct--v2 .vg-ghak { flex-wrap: nowrap; align-items: center; gap: 14px; margin: 0 0 16px; }
.vg-gproduct--v2 .vg-gmini { flex: none; align-items: flex-end; gap: 4px; }
.vg-gproduct--v2 .vg-gmini__vak { display: block; }
.vg-gmini__vak.is-actief { --vg-gmini: var(--vg-toets, #9C6B3C); }
.vg-gmini__laars { display: block; width: 34px; height: 33px; --vg-tekst: var(--vg-gmini, #CFCAC2); --vg-toets: var(--vg-gmini, #CFCAC2); }
.vg-gproduct--v2 .vg-ghak__tekst { font-size: .9375rem; font-weight: 600; color: var(--vg-tekst, #141414); }
.vg-gproduct--v2 .vg-ghak__tekst .vg-nowrap { white-space: nowrap; }

/* Kenmerkchips: gelijke hoogte, één regel als het past. */
.vg-gproduct--v2 .vg-glabels { gap: 8px; align-items: center; }
.vg-gproduct--v2 .vg-glabels > li { display: flex; }
.vg-gproduct--v2 .vg-glabels .vg-kenmerk { box-sizing: border-box; height: 34px; padding: 0 12px; gap: 6px; border: 1px solid var(--vg-rand, #E5E5E5); border-radius: 17px; background: #fff; font-size: .8125rem; line-height: 1; white-space: nowrap; }
.vg-gproduct--v2 .vg-glabels .vg-kenmerk__icoon { width: 20px; height: 20px; }

/* Waar draag je ze bij?: zand over de volle breedte (box-shadow + clip-path van 0.42.0), mobiel tekst boven drie tegels en het
   bovenstuk als brede regel na een dunne lijn; desktop links de tekst, rechts de tegels die de breedte vullen. */
.vg-gproduct--v2 .vg-gcombi { display: grid; gap: 22px; }
.vg-gproduct--v2 .vg-gcombi__kop { order: 0; }
.vg-gcombi__tekst > :last-child { margin-bottom: 0; }
.vg-gcombi__draag { margin: 0; max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--vg-tekst, #141414); }
.vg-gproduct--v2 .vg-gcombi__lijst { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
.vg-gproduct--v2 .vg-gcombi__kaart { flex: none; justify-content: flex-start; gap: 6px; min-width: 0; padding: 14px 8px 12px; }
.vg-gproduct--v2 .vg-gcombi__beeld, .vg-gproduct--v2 .vg-gcombi__icoon { width: 64px; height: 64px; }
.vg-gproduct--v2 .vg-gcombi__naam { overflow-wrap: anywhere; }
.vg-gproduct--v2 .vg-gcombi__kaart--boven { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 14px; row-gap: 2px; margin-top: 11px; padding: 10px 14px; text-align: left; }
.vg-gproduct--v2 .vg-gcombi__kaart--boven::before { content: ""; position: absolute; top: -11px; left: 0; right: 0; border-top: 1px solid rgba(20, 20, 20, .25); }
.vg-gproduct--v2 .vg-gcombi__kaart--boven .vg-gcombi__beeld { grid-row: span 2; }
.vg-gproduct--v2 .vg-gcombi__kaart--boven .vg-gcombi__naam { align-self: end; }
.vg-gproduct--v2 .vg-gcombi__kaart--boven .vg-gcombi__kleur { align-self: start; }
@media (min-width: 900px) {
	.vg-gproduct--v2 .vg-gcombi { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 56px; }
	.vg-gproduct--v2 .vg-gcombi__lijst { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
	.vg-gproduct--v2 .vg-gcombi__kaart { padding: 22px 12px 18px; }
	.vg-gproduct--v2 .vg-gcombi__beeld, .vg-gproduct--v2 .vg-gcombi__icoon { width: 96px; height: 96px; }
	.vg-gproduct--v2 .vg-gcombi__naam { font-size: .9375rem; }
	/* Bovenstuk: een eigen kolom na een verticale lijn, als gewone tegel. */
	.vg-gproduct--v2 .vg-gcombi__kaart--boven { grid-column: auto; display: flex; margin: 0 0 0 15px; padding: 22px 12px 18px; text-align: center; }
	.vg-gproduct--v2 .vg-gcombi__kaart--boven::before { top: 8%; bottom: 8%; left: -15px; right: auto; border-top: 0; border-left: 1px solid rgba(20, 20, 20, .25); }
}

/* Over: kenmerkentabel naast de tekst (ongewijzigd), kop in de serif. */
.vg-gproduct--v2 .vg-gover .vg-gp-h2 { margin-bottom: 14px; }

/* Ook met …: kaarten van de home; mobiel een veegrij (± 2,3 kaarten in beeld), vanaf 700 px vier kolommen. */
@media (max-width: 699.98px) {
	.vg-gproduct--v2 .vg-gook__rij { position: relative; display: flex; gap: 12px; margin: 0 calc(-1 * var(--vg-gutter, 16px)); padding: 0 var(--vg-gutter, 16px) 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vg-gutter, 16px); scrollbar-width: thin; }
	.vg-gproduct--v2 .vg-gook__rij > * { flex: 0 0 42%; min-width: 0; scroll-snap-align: start; }
}

/* ---------- 0.47.0: categoriepagina van G in de stijl van de home (bouwopdracht 0.47.0; g/taxonomy-product_cat.php) ----------
   Alleen klassen onder .vg-gcat--v2 (de main van de categorie van G), .vg-hakreeks en .vg-outfits--band. Koppen in de serif van
   home en productpagina; secties met één witruimte (mobiel 44, desktop 72), wit na wit zonder extra bovenruimte. */
.vg-gcat--v2 { --vg-gc-ruimte: 44px; --vg-gc-serif: var(--vg-font-serif, Georgia, 'Times New Roman', serif); --vg-e-serif: var(--vg-gc-serif); }
@media (min-width: 900px) { .vg-gcat--v2 { --vg-gc-ruimte: 72px; } }

/* Koppen: H1 en de inhoudelijke H2's (aantal boven het raster, op stijl/kleur, merken, band, lengteblok, tekst) in de serif. */
.vg-gcat--v2 .vg-gcat__kop .vg-h1 { margin: 4px 0 12px; font-family: var(--vg-gc-serif); font-size: clamp(2rem, 8.5vw, 2.5rem); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 900px) { .vg-gcat--v2 .vg-gcat__kop .vg-h1 { font-size: clamp(2.5rem, 3.4vw, 3rem); } }
.vg-gcat--v2 .vg-h2, .vg-gcat--v2 .vg-lengtes__kop, .vg-gcat--v2 .vg-intro--onder h2 { font-family: var(--vg-gc-serif); font-size: clamp(1.75rem, 6.5vw, 2.125rem); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.vg-gcat--v2 .vg-gtoolbar .vg-h2 { font-size: clamp(1.625rem, 6vw, 2rem); }
.vg-gcat--v2 .vg-gsec__kop .vg-h2 { margin: 0; }

/* Intro: "Lees verder" op een eigen regel; "Meer over kiezen" mobiel pas onder de uitgeklapte tekst, desktop altijd. */
.vg-gcat--v2 .vg-intro p.vg-intro__meer { margin-top: .4em; }
.vg-intro__anker { margin: .4em 0 0; font-size: .9375rem; font-weight: 600; }
.vg-intro__anker a { text-decoration: none; }
.vg-intro__anker a:hover, .vg-intro__anker a:focus-visible { text-decoration: underline; }
@media (max-width: 699.98px) { .vg-intro--kort > .vg-intro__vink:not(:checked) ~ .vg-intro__anker { display: none; } }
.vg-gcat--v2 .vg-gcat__datum { margin-top: 10px; font-size: .8125rem; }

/* Hakreeks: vijf vakken met het laarsje, de naam en het aantal; gekozen vak in de toetskleur op zand, leeg vak grijs.
   De kleur gaat via --vg-hr-kleur naar de tokens die .vg-i-k en .vg-i-t lezen (erven door <use> heen). Mobiel één veegbare rij. */
.vg-hakreeks { display: flex; gap: 6px; margin: 0; padding: 0 0 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
.vg-hakreeks::-webkit-scrollbar { display: none; }
.vg-hakreeks__vak { --vg-hr-kleur: var(--vg-tekst, #141414); flex: 1 0 60px; min-width: 60px; scroll-snap-align: start; }
.vg-hakreeks__vak.is-gekozen { --vg-hr-kleur: var(--vg-toets, #9C6B3C); }
.vg-hakreeks__vak.is-leeg { --vg-hr-kleur: #CFCAC2; }
.vg-hakreeks__inhoud { display: flex; flex-direction: column; align-items: center; gap: 2px; box-sizing: border-box; height: 100%; max-height: 96px; padding: 10px 4px 8px; border-radius: var(--vg-radius, 4px); background: var(--vg-fotovlak, #F6F6F4); color: var(--vg-tekst, #141414); text-align: center; text-decoration: none; }
a.vg-hakreeks__inhoud:hover, a.vg-hakreeks__inhoud:focus-visible { box-shadow: inset 0 0 0 1px var(--vg-tekst, #141414); color: var(--vg-tekst, #141414); }
.vg-hakreeks__vak.is-gekozen .vg-hakreeks__inhoud { background: var(--vg-zand, #F4EFE8); box-shadow: inset 0 -3px 0 var(--vg-toets, #9C6B3C); }
.vg-hakreeks__laars { display: block; flex: none; width: 40px; height: 38px; margin-bottom: 4px; --vg-tekst: var(--vg-hr-kleur); --vg-toets: var(--vg-hr-kleur); }
.vg-hakreeks__naam { font-size: .8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.vg-hakreeks__n { font-size: .75rem; line-height: 1.2; color: var(--vg-tekst-2, #555); }
.vg-hakreeks__vak.is-leeg .vg-hakreeks__naam, .vg-hakreeks__vak.is-leeg .vg-hakreeks__n { color: var(--vg-meta, #666); }
.vg-gcat--v2 .vg-gcat__meter { align-self: end; }
.vg-gcat--v2 .vg-gcat__meterkop { margin-bottom: 10px; }

/* Kaarten: fotovlak met gelijke marge (7 %), beeld contain, vaste verhouding; prijs en oude prijs op één regel, "bij n winkels"
   op een eigen regel. */
.vg-gcat--v2 .vg-gkaart__foto { box-sizing: border-box; padding: 7%; overflow: hidden; border-radius: var(--vg-radius, 4px); }
.vg-gcat--v2 .vg-gkaart__foto img { width: 100%; height: 100%; object-fit: contain; }
.vg-gcat--v2 .vg-gkaart__bedrag, .vg-gcat--v2 .vg-gkaart__oud { white-space: nowrap; }
.vg-gcat--v2 .vg-gkaart__prijs small { display: block; margin-top: 2px; white-space: nowrap; }

/* Secties: één witruimte; de lijst en een witte sectie erna delen hun ruimte, de zandband heeft hem binnen. */
.vg-gcat--v2 .vg-gcat__body { padding-bottom: var(--vg-gc-ruimte); }
.vg-gcat--v2 .vg-gcsec, .vg-gcat--v2 > .vg-lengtes { margin: 0; padding-block: var(--vg-gc-ruimte); }
.vg-gcat--v2 .vg-gcat__body + .vg-gcsec--wit, .vg-gcat--v2 .vg-gcat__body + .vg-lengtes, .vg-gcat--v2 .vg-gcsec--wit + .vg-gcsec--wit,
.vg-gcat--v2 .vg-gcsec--wit + .vg-lengtes, .vg-gcat--v2 .vg-lengtes + .vg-gcsec--wit { padding-top: 0; }
.vg-gcat--v2 > :last-child { padding-bottom: 0; } /* Daarna de ondermarge van de main (40) en de footer. */

/* Band "Waar draag je ze bij?": zand over de volle breedte (box-shadow + clip-path, geen 100vw), tegels van de home. */
.vg-gcband { background: var(--vg-zand, #F4EFE8); box-shadow: 0 0 0 100vmax var(--vg-zand, #F4EFE8); clip-path: inset(0 -100vmax); }
.vg-gcband__kop { margin: 0 0 20px; }
.vg-outfits--band .vg-outfits__tegel--eerste { grid-column: span 1; }
.vg-outfits--band .vg-outfits__tegel--eerste .vg-outfits__naam { font-size: 1.375rem; } /* 0.47.0: alle tegels van de band even groot */
@media (max-width: 699.98px) { .vg-outfits--band > li:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 700px) { .vg-outfits--band { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
	.vg-outfits--band { display: flex; gap: 12px; }
	.vg-outfits--band > li { flex: 1 1 0; min-width: 0; }
	.vg-outfits--band .vg-outfits__link { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; row-gap: 8px; }
	.vg-outfits--band .vg-outfits__icoon { grid-row: auto; width: 56px; height: 56px; }
	.vg-outfits--band .vg-outfits__naam, .vg-outfits--band .vg-outfits__n { align-self: auto; }
}

/* Tekst onderaan: links de tekst (max 68ch, eerste alinea onder elke H2 als antwoord), rechts Verwant en de gidslink (sticky). */
.vg-gctekst__hoofd { min-width: 0; }
.vg-gctekst__hoofd > * { max-width: 68ch; }
.vg-gcat--v2 .vg-intro--onder { margin: 0; padding: 0; font-size: 1rem; }
.vg-gcat--v2 .vg-intro--onder > :first-child { margin-top: 0; }
.vg-gcat--v2 .vg-intro--onder h2 { margin: 1.4em 0 .35em; }
.vg-gcat--v2 .vg-intro--onder h3 { font-size: 1.125rem; }
.vg-gcat--v2 .vg-intro--onder p { line-height: 1.65; color: var(--vg-tekst-2, #555); }
.vg-gcat--v2 .vg-intro--onder p.vg-antwoord { max-width: none; margin-top: 0; font-size: 1.0625rem; color: var(--vg-tekst, #141414); }
.vg-gctekst .vg-gidslink-wrap { padding: 0 0 24px; }
.vg-gctekst__zij { display: grid; gap: 20px; align-content: start; min-width: 0; margin-top: 32px; }
.vg-gctekst__zij .vg-gidslink-wrap { padding: 0; }
.vg-gctekst__zij .vg-gverwant ul { display: block; }
.vg-gctekst__zij .vg-gverwant li { padding: 4px 0; }
@media (min-width: 900px) {
	.vg-gctekst--zij { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
	.vg-gctekst__zij { position: sticky; top: 16px; margin-top: 0; }
}

/* ---------- 0.49.0: extra blokken op een categorie (config categorie_extra; inc/categorie-extra.php) ----------
 * Dierenkiezer: fototegels per dier in plaats van de chiprij; mobiel een veegrij (de lijst blijft hoog op de pagina), vanaf
 * 700 px een raster. Ouder en kind: per dier twee kaarten naast elkaar op een zacht vlak. Dierentabel: HTML-tabel in een kaart. */
.vg-dierkiezer { margin: 4px 0 20px; }
.vg-dierkiezer__kop { margin: 0 0 10px; font-size: 1.125rem; }
.vg-dierkiezer__lijst {
	display: flex;
	gap: 8px;
	margin: 0 calc(-1 * var(--vg-gutter));
	padding: 2px var(--vg-gutter) 8px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--vg-gutter);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.vg-dierkiezer__lijst > li { flex: 0 0 104px; scroll-snap-align: start; }
.vg-dierkiezer__tegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	height: 100%;
	padding: 6px 6px 10px;
	text-align: center;
	text-decoration: none;
	color: var(--vg-kop);
	background: var(--vg-kaart);
	border: 1px solid var(--vg-rand);
	border-radius: var(--vg-radius);
	transition: box-shadow .2s ease, border-color .2s ease;
}
.vg-dierkiezer__tegel:hover { border-color: var(--vg-rand-hover); box-shadow: var(--vg-schaduw-hover); }
.vg-dierkiezer__beeld { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 4px; overflow: hidden; border-radius: var(--vg-radius-s); background: #fff; }
.vg-dierkiezer__beeld img, .vg-dierkiezer__beeld svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.vg-dierkiezer__naam { font-weight: 700; line-height: 1.25; }
.vg-dierkiezer__meta { font-size: .78rem; line-height: 1.3; color: var(--vg-meta); }
/* 0.49.6 (Sjoerd 04-10: "altijd maximaal één rij … scrollen naar rechts of sliden"): ook vanaf 700 px één rij die scrolt, met pijlknoppen
 * (main.js §11, alleen bij overloop; zonder JS gewoon scrollen). */
.vg-dierkiezer { position: relative; }
.vg-schuif__knop { display: none; }
@media (min-width: 700px) {
	.vg-dierkiezer__lijst { gap: 10px; margin: 0; padding: 2px 0 8px; scroll-padding-inline: 0; }
	.vg-dierkiezer__lijst > li { flex-basis: 132px; }
	.vg-schuif__knop:not([hidden]) {
		display: flex; align-items: center; justify-content: center; position: absolute; top: calc(50% + 10px); z-index: 2;
		width: 40px; height: 40px; margin-top: -20px; padding: 0; font-size: 1.25rem; line-height: 1; color: var(--vg-kop);
		background: var(--vg-kaart); border: 1px solid var(--vg-rand); border-radius: 50%; box-shadow: var(--vg-schaduw); cursor: pointer;
	}
	.vg-schuif__knop:hover { border-color: var(--vg-rand-hover); box-shadow: var(--vg-schaduw-hover); }
	.vg-schuif__knop--vorige { left: -12px; }
	.vg-schuif__knop--volgende { right: -12px; }
}

.vg-ouderkind__intro { max-width: 68ch; margin: 0 0 16px; color: var(--vg-meta); }
.vg-ouderkind__lijst { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.vg-ouderkind__paar { min-width: 0; padding: 12px 12px 14px; background: var(--vg-zacht); border-radius: var(--vg-radius); }
.vg-ouderkind__dier { margin: 0 0 10px; font-size: 1.125rem; }
.vg-grid.vg-ouderkind__kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vg-ouderkind__kaart { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vg-ouderkind__kaart > .vg-card { flex: 1; }
.vg-ouderkind__wie { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vg-meta); }
.vg-ouderkind__meer { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--vg-accent-donker); }
@media (min-width: 900px) {
	.vg-ouderkind__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

/* 0.49.11 modelkiezer en "hem en haar" (Shepherd op sloffenwinkel, template-parts/categorie-extra-modellen.php en -paren.php) */
.vg-dierkiezer--modellen { margin-top: 12px; }
.vg-dierkiezer__groep { position: relative; }
.vg-dierkiezer__groep + .vg-dierkiezer__groep { margin-top: 10px; }
.vg-dierkiezer__groepkop { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-meta); }
.vg-dierkiezer__soort { font-size: .8rem; line-height: 1.3; color: var(--vg-tekst); }
.vg-dierkiezer--modellen .vg-dierkiezer__tegel { padding-bottom: 8px; }
/* 0.49.14 (Sjoerd 05-10: "die schuifbalk onzichtbaar … niet zo lelijk standaard balk"): geen balk; desktop pijlknoppen, mobiel vegen
 * (de afgesneden tegel aan de rand laat zien dat er meer is). Geldt voor elke rij met data-schuif. */
.vg-dierkiezer__lijst[data-schuif] { scrollbar-width: none; }
.vg-dierkiezer__lijst[data-schuif]::-webkit-scrollbar { display: none; }
/* 0.50.3 (Sjoerd 05-10: "ik kan dit zelf nog niet sliden"): de soortenstrook van opbouw D krijgt dezelfde pijlknoppen (main.js §11);
 * de knoppen hangen in de volle breedte van de nav, dus naast de container van 1200 px in plaats van aan de schermrand. */
.vg-strook { position: relative; }
.vg-strook__lijst { scroll-padding-inline: var(--vg-gutter, 16px); } /* anders snapt de eerste tegel op 16 px en lijkt de rij al verschoven */
@media (min-width: 700px) {
	.vg-strook > .vg-schuif__knop:not([hidden]) { top: 50%; }
	.vg-strook > .vg-schuif__knop--vorige { left: max(4px, calc((100% - 1200px) / 2 - 20px)); }
	.vg-strook > .vg-schuif__knop--volgende { right: max(4px, calc((100% - 1200px) / 2 - 20px)); }
}
.vg-dierkiezer--modellen .vg-dierkiezer__beeld { aspect-ratio: 4 / 3; }
.vg-ouderkind__wie a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 700px) {
	.vg-dierkiezer--modellen .vg-dierkiezer__lijst > li { flex-basis: 148px; }
}

.vg-dierentabel .vg-table-wrap { background: var(--vg-kaart); border: 1px solid var(--vg-rand); border-radius: var(--vg-radius); }
.vg-dierentabel__tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vg-dierentabel__tabel th, .vg-dierentabel__tabel td { padding: .55rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vg-rand); }
.vg-dierentabel__tabel tbody tr:last-child > * { border-bottom: 0; }
.vg-dierentabel__tabel thead th { font-size: .85rem; white-space: nowrap; color: var(--vg-kop); background: var(--vg-zacht); }
.vg-dierentabel__tabel tbody th { font-weight: 700; white-space: nowrap; }
.vg-dierentabel__tabel tbody th a { color: var(--vg-accent-donker); }
.vg-dierentabel__tabel .vg-dierentabel__getal { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 599.98px) {
	.vg-dierentabel__tabel { font-size: .875rem; }
	.vg-dierentabel__tabel th, .vg-dierentabel__tabel td { padding: .5rem .55rem; }
}

/* 0.49.8: live prijsregel in de kop (config categorie_extra.<slug>.prijsregel). */
.vg-prijsregel { margin: 4px 0 0; font-weight: 600; color: var(--vg-kop); }

/* ---------- 0.51.0 Zoeksuggesties (config zoeken.suggesties; inc/zoek-suggesties.php, main.js §12) ----------
   Paneel onder het zoekvak (alleen met JS) en het blok "merk, categorieën, gidsen" op de zoekpagina. */
.vg-zs-form { position: relative; }
.vg-search.vg-zs-form { overflow: visible; }
.vg-search.vg-zs-form .vg-search__input { border-radius: 999px 0 0 999px; }
.vg-search.vg-zs-form .vg-search__btn { border-radius: 0 999px 999px 0; }
.vg-zs {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
	max-height: min(var(--vg-zs-max, 72vh), 640px); overflow-y: auto; overscroll-behavior: contain;
	padding: 6px 0 0; text-align: left; color: var(--vg-tekst);
	background: var(--vg-kaart, #fff); border: 1px solid var(--vg-rand); box-shadow: 0 16px 32px rgba(30, 44, 61, .16);
}
.vg-zs[hidden] { display: none; }
/* 0.52.1: een smal zoekvak (kop van pantoffelwinkel vanaf 900 px: 150-280 px, de hero) krijgt een paneel van minstens 420 px; in de
 * kop vanaf de rechterrand, want daar staat het vak rechts. Een breed vak (sloffenwinkel, enkellaarsjes) houdt precies zijn breedte. */
@media (min-width: 900px) {
	.vg-zs { width: max(100%, 420px); }
	.vg-header .vg-zs { left: auto; }
}
.vg-zs__groep { padding: 6px 0 4px; }
.vg-zs__groep + .vg-zs__groep { border-top: 1px solid var(--vg-rand); }
.vg-zs__kop { margin: 0; padding: 4px 14px 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vg-meta); }
.vg-zs__lijst { margin: 0; padding: 0; list-style: none; }
.vg-zs a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; color: inherit; text-decoration: none; }
.vg-zs a:hover, .vg-zs a:focus-visible { background: var(--vg-zacht, #f3eee5); outline: none; }
.vg-zs mark { padding: 0; background: none; color: inherit; font-weight: 700; }
.vg-zs__tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vg-zs__naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.vg-zs__meta, .vg-zs__prijs { font-size: .8125rem; line-height: 1.3; color: var(--vg-meta); }
.vg-zs__prijs { color: var(--vg-tekst); font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-zs__merk .vg-zs__naam { font-weight: 700; font-size: 1.0625rem; }
.vg-zs__product .vg-zs__naam { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.vg-zs__pijl { flex: none; color: var(--vg-meta); }
.vg-zs__beeld { flex: none; display: block; width: 48px; height: 48px; background: var(--vg-beeldtegel, #f3eee5); }
.vg-zs__beeld img { display: block; width: 100%; height: 100%; padding: 3px; object-fit: contain; mix-blend-mode: multiply; }
.vg-zs__lijst--chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 6px; }
.vg-zs__lijst--chips a { min-height: 32px; padding: 4px 10px; font-size: .875rem; border: 1px solid var(--vg-rand); }
/* Modellen als raster (geen schuifrij: op desktop zonder balk niet te verschuiven), drie per rij. */
.vg-zs__lijst--modellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 0 8px; }
.vg-zs__model { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; }
.vg-zs__model .vg-zs__beeld { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.vg-zs__model .vg-zs__naam { font-size: .875rem; font-weight: 700; }
.vg-zs__model .vg-zs__meta { white-space: nowrap; }
/* 0.52.5: kleurrondjes (merk × kleur) in het kale paneel. */
.vg-zs__lijst--kleuren { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 8px; }
.vg-zs a.vg-zs__kleur { justify-content: center; width: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
.vg-zs__bol { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--vg-swatch, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.vg-zs__alle { position: sticky; bottom: 0; justify-content: center; margin-top: 4px; font-weight: 700; background: var(--vg-kaart, #fff); border-top: 1px solid var(--vg-rand); }
.vg-zs__alle:hover, .vg-zs__alle:focus-visible { background: var(--vg-zacht, #f3eee5); }

/* Zoekpagina: het tweede zoekvak alleen waar de kop er geen toont (sloffenwinkel: altijd zichtbaar). */
.vg-site-sloffenwinkel .vg-search-head--zs .vg-search--pagina { display: none; }
.vg-zsb { display: grid; gap: 14px; margin: 0 0 24px; }
.vg-zsb__merk {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 14px 16px;
	color: var(--vg-tekst); text-decoration: none; background: var(--vg-kaart, #fff); border: 1px solid var(--vg-rand);
}
.vg-zsb__merk:hover { border-color: var(--vg-inkt, #1e2c3d); }
.vg-zsb__label { grid-column: 1; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vg-meta); }
.vg-zsb__naam { grid-column: 1; font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
.vg-zsb__meta { grid-column: 1; font-size: .875rem; color: var(--vg-meta); }
.vg-zsb__naar { grid-column: 2; grid-row: 1 / span 3; font-weight: 700; white-space: nowrap; }
.vg-zsb__kop { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vg-meta); }
.vg-zsb__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vg-zsb__gidsen { margin: 0; padding: 0 0 0 18px; }
.vg-zsb__gidsen a { color: var(--vg-tekst); }
@media (max-width: 599.98px) {
	.vg-zsb__merk { grid-template-columns: 1fr; }
	.vg-zsb__naar { grid-column: 1; grid-row: auto; margin-top: 6px; }
}

/* 0.52.21 Foto van het model in de modellentabel (config categorie_extra.<slug>.tabel_foto): foto links van de naam. */
.vg-dierentabel__tabel th[scope="row"] { white-space: nowrap; }
.vg-dierentabel__foto {
	display: inline-block;
	width: 56px;
	height: 56px;
	margin-right: 12px;
	vertical-align: middle;
	background: var(--vg-zand, #f1ede4);
}
.vg-dierentabel__foto img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* 0.52.22 Modelkiezer: "voor wie" op de tegel als de rijen samengevoegd zijn (config kiezer_een_rij / kiezer_max_rijen). */
.vg-dierkiezer__voor {
	display: block;
	margin-top: 2px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vg-meta, #6a6251);
}

/* 0.52.25 Modelfoto's gelijktrekken (Sjoerd 06-10): witte achtergrond onder de tabelfoto (geen zandkleurige randen om staande foto's of transparante PNG's)
   en een lichte contrastverhoging, zodat een iets grijze fotoachtergrond wit wordt. */
.vg-dierentabel__foto { background: #fff; }
.vg-dierentabel__foto img,
.vg-dierkiezer--modellen .vg-dierkiezer__beeld img { filter: contrast(1.1); }

/* 0.56.7: winkelfoto's met een lichtgrijze achtergrond (Van Arendonk #F8F8F8, Plytix #F6F6F6) niet multiplyen: dat maakte de foto ~3% donkerder dan het fotovlak en gaf een zichtbaar kader. Wit blijft multiply. */
img.vg-img[src*="vanarendonk.nl"], img.vg-img[src*="plytix.com"] { mix-blend-mode: normal; }