/*
Theme Name: Voedingsweetjes
Theme URI: https://voedingsweetjes.nl
Author: Voedingsweetjes
Author URI: https://voedingsweetjes.nl
Description: Block theme voor voedingsweetjes.nl. Mobile first, gericht op de app, de afvalchallenge, het Voedingsschema en de mailinglijst.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: voedingsweetjes
*/

/* ==========================================================================
   Basis
   Waarden en herkomst staan in DESIGN-SYSTEM.md.
   ========================================================================== */

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

/* Sommige oude pagina's zetten in hun content een eigen <style> op body. */
body.wp-theme-voedingsweetjes {
	margin: 0;
	padding: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	text-wrap: balance;
	overflow-wrap: break-word;
}

p, li {
	text-wrap: pretty;
}

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

/* Links in lopende tekst: onderstreept met wat ruimte, dikker bij hover. */
:where(p, li, td, figcaption) a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

:where(p, li, td, figcaption) a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* Zichtbare focusring, alleen bij toetsenbord. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==========================================================================
   Typografie: kop met licht en zwaar deel, handgetekende onderstreping
   ========================================================================== */

.vw-kop-duo {
	font-weight: 600;
}

.vw-kop-duo__licht {
	display: block;
	font-weight: 300;
}

.vw-swoosh {
	position: relative;
	display: inline-block;
	padding-bottom: 0.12em;
	background: url(assets/images/swoosh.svg) no-repeat 0 100% / 100% 0.28em;
}

.vw-label {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.vw-label a {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.vw-nummer {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Knoppen
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	touch-action: manipulation;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: scale(0.98);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-donker > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

/* Pijl-link: onderstreepte tekst met een pijl, zoals "Get started →". */
.wp-block-button.is-style-pijl > .wp-block-button__link {
	min-height: 44px;
	gap: 0.5rem;
	border-radius: 0;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
}

.wp-block-button.is-style-pijl > .wp-block-button__link::after {
	content: "\2192";
	text-decoration: none;
	display: inline-block;
	transition: transform var(--wp--custom--transition);
}

.wp-block-button.is-style-pijl > .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--primary-dark);
	text-decoration-thickness: 2px;
}

.wp-block-button.is-style-pijl > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-buttons {
	gap: 0.75rem 1.5rem;
}

/* ==========================================================================
   Paneel: afgerond lichtgroen blok met wat ruimte tot de schermrand
   ========================================================================== */

.vw-paneel {
	margin: var(--wp--custom--panel-gap) var(--wp--custom--panel-gap) 0;
	border-radius: var(--wp--custom--radius--lg);
	padding-bottom: var(--wp--preset--spacing--50);
}

.vw-paneel--top {
	padding-bottom: var(--wp--preset--spacing--50);
}

.vw-paginakop {
	padding-top: var(--wp--preset--spacing--40);
}

.vw-paginakop > * + * {
	margin-top: var(--wp--preset--spacing--20);
}

.vw-meta {
	gap: 0.25rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.vw-meta > * {
	margin: 0;
}

.vw-meta .wp-block-post-author-name::before {
	content: "Door ";
}

/* ==========================================================================
   Header: logo, megamenu, zoeken, app-knop.
   Op mobiel: logo, zoeken, app-knop en menuknop altijd zichtbaar.
   ========================================================================== */

.vw-header {
	position: relative;
	min-height: 72px;
	gap: 0.5rem;
	justify-content: flex-start;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.vw-logo {
	margin: 0;
	flex-shrink: 0;
}

.vw-logo a {
	display: block;
}

.vw-logo img {
	display: block;
	width: auto;
	height: 44px;
	aspect-ratio: 841 / 590;
}

.vw-header > .vw-header__zoek {
	order: 2;
	margin-left: auto;
}

.vw-header > .vw-header__nav {
	order: 4;
}

/* Heel smalle telefoons: alles moet op één regel blijven passen. */
@media (max-width: 359.98px) {
	.vw-header {
		gap: 0.25rem;
	}

	.vw-logo img {
		height: 38px;
	}
}

/* Zoeken: alleen een icoon; een klik klapt het zoekveld over de header uit. */
.vw-header__zoek {
	margin: 0;
}

.vw-header__zoek .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
	background: transparent;
}

.vw-header__zoek .wp-block-search__button {
	width: 44px;
	height: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.vw-header__zoek .wp-block-search__button:hover {
	background-color: rgba(42, 46, 37, 0.06);
}

.vw-header__zoek .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	min-width: 24px;
	fill: currentColor;
}

.vw-header__zoek:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	position: absolute;
	z-index: 40;
	top: 50%;
	left: 0;
	right: 0;
	width: auto !important;
	transform: translateY(-50%);
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lg);
}

.vw-header__zoek .wp-block-search__input {
	min-height: 44px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-light);
	font-size: max(16px, 1rem);
}

.vw-header__zoek.wp-block-search__searchfield-hidden .wp-block-search__input {
	padding: 0;
}

/* Menuknop: vierkant in merkgroen, zoals de gele knop in de referentie. */
.vw-header__nav .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.vw-header__nav .wp-block-navigation__responsive-container-open svg {
	width: 26px;
	height: 26px;
}

/* WordPress toont het volle menu al vanaf 600px; dat past pas vanaf 1024px. */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.vw-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.vw-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ==========================================================================
   Megamenu (desktop, vanaf 1024px)
   Inhoud: Weergave > Editor > Navigatie > Hoofdmenu. Zie docs/zelf-beheren.md.
   - Gewoon item: icoon (class vw-icoon-...), titel en beschrijving.
   - Submenu in een submenu: kolom met kopje (class vw-menu-groep).
   - Item met class vw-menu-alles: "alles bekijken"-regel onderaan.
   ========================================================================== */

@media (min-width: 1024px) {
	.vw-header {
		min-height: 96px;
		gap: 1.25rem;
	}

	.vw-logo img {
		height: 56px;
	}

	.vw-header > .vw-header__nav {
		order: 2;
		margin-left: auto;
	}

	.vw-header > .vw-header__zoek {
		order: 3;
		margin-left: 0;
	}

	.vw-header__nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-block: 0.5rem;
		text-decoration: none;
		box-sizing: border-box;
	}

	/* Ook op desktop tikdoelen van 44px (touchscreens en laptops met aanraakscherm): de items in het paneel en het
	   pijltje dat het submenu opent. */
	.vw-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		min-height: 44px;
		box-sizing: border-box;
	}

	.vw-header__nav .wp-block-navigation__container > .has-child > .wp-block-navigation-submenu__toggle {
		width: 24px;
		min-height: 44px;
		padding: 0;
	}

	.vw-header__nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation-item__content,
	.vw-header__nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation-item__content {
		text-decoration: underline;
		text-decoration-color: var(--wp--preset--color--primary);
		text-decoration-thickness: 3px;
		text-underline-offset: 0.45em;
	}

	/* Het paneel. */
	.vw-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 0.75rem);
		left: -1.25rem;
		display: grid;
		grid-template-columns: minmax(17rem, 1fr);
		align-content: start;
		gap: 0.125rem 1.5rem;
		min-width: 20rem;
		padding: 1rem;
		border: 0;
		border-radius: var(--wp--custom--radius--lg);
		background-color: var(--wp--preset--color--white);
		box-shadow: var(--wp--preset--shadow--lg);
	}

	/* Brug over de ruimte tussen menu en paneel, zodat hover niet wegvalt. */
	.vw-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.75rem;
		height: 0.75rem;
	}

	/* De laatste twee panelen (Boeken, Over Leroy) rechts uitlijnen, anders steken ze buiten het scherm. */
	.vw-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child:nth-last-child(-n+2) > .wp-block-navigation__submenu-container {
		left: auto;
		right: -1.25rem;
	}

	/* Paneel met een groep (Leesvoer, Gratis): één kolom met kopje, de items en "alles"-regel eronder. */
	.vw-header__nav.wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container:has(> .vw-menu-groep) {
		grid-template-columns: minmax(18rem, 1fr);
		min-width: 20rem;
	}

	.vw-header__nav .wp-block-navigation__submenu-container > .wp-block-navigation-link:not(.vw-menu-alles) {
		grid-column: 1;
	}

	.vw-header__nav.wp-block-navigation .wp-block-navigation__submenu-container > .vw-menu-groep {
		grid-column: 1;
		flex-direction: column;
		align-items: stretch;
		padding-top: 0.25rem;
	}


	.vw-header__nav .wp-block-navigation__submenu-container > .vw-menu-alles {
		grid-column: 1 / -1;
		margin-top: 0.5rem;
		padding-top: 0.5rem;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	/* Items in het paneel. */
	.vw-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		width: 100%;
	}

	.vw-header__nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.125rem 0.875rem;
		align-items: start;
		padding: 0.625rem 0.75rem;
		border-radius: var(--wp--custom--radius--md);
		white-space: normal;
		text-decoration: none;
		color: var(--wp--preset--color--contrast);
		transition: background-color var(--wp--custom--transition);
	}

	.vw-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.vw-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--primary-light);
	}

	.vw-header__nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > [class*="vw-icoon-"] > .wp-block-navigation-item__content {
		grid-template-columns: 24px 1fr;
	}

	.vw-header__nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content > span {
		grid-column: -2;
	}

	.vw-header__nav .wp-block-navigation__submenu-container [class*="vw-icoon-"] > .wp-block-navigation-item__content::before {
		content: "";
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 24px;
		height: 24px;
		margin-top: 0.125rem;
		background-color: var(--wp--preset--color--primary-dark);
		-webkit-mask: var(--vw-icoon) no-repeat center / contain;
		mask: var(--vw-icoon) no-repeat center / contain;
	}

	.vw-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		font-weight: 600;
	}

	.vw-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
		display: block;
		font-size: 0.875rem;
		font-weight: 400;
		line-height: 1.4;
		color: var(--wp--preset--color--text-muted);
	}

	/* Groep: kopje met losse links eronder, altijd zichtbaar binnen het paneel. */
	.vw-header__nav .vw-menu-groep > .wp-block-navigation-item__content {
		padding-block: 0.25rem;
		font-family: var(--wp--preset--font-family--oswald);
		font-size: 0.8125rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--wp--preset--color--text-muted);
	}

	.vw-header__nav .vw-menu-groep > .wp-block-navigation-item__content:hover {
		background: transparent;
		color: var(--wp--preset--color--contrast);
	}

	.vw-header__nav .vw-menu-groep > .wp-block-navigation-item__content .wp-block-navigation-item__label {
		font-weight: 500;
	}

	.vw-header__nav .vw-menu-groep > .wp-block-navigation-submenu__toggle {
		display: none;
	}

	.vw-header__nav.wp-block-navigation .has-child.vw-menu-groep > .wp-block-navigation__submenu-container {
		position: static;
		display: flex;
		flex-direction: column;
		visibility: visible;
		opacity: 1;
		width: auto;
		height: auto;
		min-width: 0;
		overflow: visible;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.vw-header__nav.wp-block-navigation .has-child.vw-menu-groep .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		display: block;
		padding-block: 0.4rem;
	}

	.vw-header__nav .vw-menu-groep .wp-block-navigation__submenu-container .wp-block-navigation-item__label::after,
	.vw-header__nav .vw-menu-alles .wp-block-navigation-item__label::after {
		content: " \2192";
	}

	.vw-header__nav .vw-menu-alles .wp-block-navigation-item__label {
		font-weight: 500;
		color: var(--wp--preset--color--text-muted);
	}

	/* Items in een groep met een icoon (Gratis): icoon ervoor, geen pijl. */
	.vw-header__nav.wp-block-navigation .has-child.vw-menu-groep .wp-block-navigation__submenu-container > [class*="vw-icoon-"] > .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-block: 0.5rem;
	}

	.vw-header__nav .vw-menu-groep .wp-block-navigation__submenu-container > [class*="vw-icoon-"] .wp-block-navigation-item__label::after {
		content: none;
	}

	.vw-header__nav .vw-menu-groep .wp-block-navigation__submenu-container > [class*="vw-icoon-"] > .wp-block-navigation-item__content::before {
		flex-shrink: 0;
		grid-row: auto;
		margin-top: 0;
	}
}

.vw-mobiel-nav .vw-menu-groep .wp-block-navigation__submenu-container > [class*="vw-icoon-"] .wp-block-navigation-item__label::after {
	content: none;
}

/* ==========================================================================
   Mobiel menu (template-part "Mobiel menu", te bewerken in WordPress)
   ========================================================================== */

.vw-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0.75rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

.vw-mobiel-menu {
	width: 100%;
	gap: 1.5rem;
}

.vw-mobiel-menu__top {
	min-height: 72px;
}

.vw-mobiel-menu__top .vw-logo img {
	height: 44px;
}

.wp-block-navigation-overlay-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.wp-block-navigation-overlay-close svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* Groepen die openklappen: een accordeon. */
.vw-mobiel-nav,
.vw-mobiel-nav .wp-block-navigation__container {
	width: 100%;
	gap: 0;
	align-items: stretch;
}

.vw-mobiel-nav .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
	width: 100%;
	flex-direction: column;
	align-items: stretch;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-mobiel-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 60px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.vw-mobiel-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
	position: absolute;
	top: 18px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0;
	pointer-events: none;
	transition: transform var(--wp--custom--transition);
}

.vw-mobiel-nav .wp-block-navigation__submenu-icon svg {
	width: 16px;
	height: 16px;
	stroke-width: 2;
}

.vw-mobiel-nav [aria-expanded="true"] .wp-block-navigation__submenu-icon,
.vw-mobiel-nav [aria-expanded="true"] + .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

.vw-mobiel-nav.wp-block-navigation .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.vw-mobiel-nav.wp-block-navigation .has-child [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	padding-bottom: 0.75rem;
}

.vw-mobiel-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 44px;
	padding: 0.25rem 0;
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.vw-mobiel-nav .wp-block-navigation-item__description {
	display: none;
}

.vw-mobiel-nav [class*="vw-icoon-"] > .wp-block-navigation-item__content::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

/* Groepen binnen een groep: kopje met links eronder, altijd open. */
.vw-mobiel-nav .vw-menu-groep > .wp-block-navigation-item__content {
	min-height: 0;
	padding-top: 0.75rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	pointer-events: none;
}

.vw-mobiel-nav .vw-menu-groep .wp-block-navigation__submenu-icon {
	display: none;
}

.vw-mobiel-nav.wp-block-navigation .has-child.vw-menu-groep > .wp-block-navigation__submenu-container {
	visibility: visible;
	opacity: 1;
	width: auto;
	height: auto;
	overflow: visible;
}

.vw-mobiel-nav .vw-menu-groep {
	flex-direction: column;
	align-items: stretch;
}

.vw-mobiel-nav .vw-menu-alles .wp-block-navigation-item__label::after {
	content: " \2192";
}

.vw-mobiel-menu__onder {
	gap: 0.75rem;
	margin-top: auto;
}

/* ==========================================================================
   Homepage (de inhoud staat in de pagina zelf; dit is alleen de vorm)
   ========================================================================== */

.vw-front {
	position: relative;
}

/* De header staat in de kop (template-onderdeel Kop), niet meer in de hero. */
.vw-front__inhoud > .vw-hero-paneel:first-child {
	margin-top: var(--wp--custom--panel-gap);
	padding-top: var(--wp--preset--spacing--40);
}

.vw-front__inhoud > * {
	margin-block-start: 0;
}

.vw-front__inhoud > .vw-paneel:not(:first-child) {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
}

/* Hero: foto met groene vorm erachter, tekst ernaast (desktop) of eronder (mobiel). */
.vw-hero {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--40);
}

@media (min-width: 782px) {
	.vw-hero {
		flex-direction: row-reverse;
	}
}

.vw-hero__foto {
	position: relative;
	max-width: 440px;
	margin: 0 auto;
}

.vw-hero__foto::before {
	content: "";
	position: absolute;
	inset: 10% -5% -4% 12%;
	border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
	background-color: var(--wp--preset--color--primary);
	transform: rotate(-6deg);
}

.vw-hero__foto img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--wp--custom--radius--lg);
}

.vw-hero__tekst h1 {
	margin-top: 0;
}

.vw-hero__intro {
	max-width: 36ch;
}

/* De intro onder een hero-kop (homepage, /spreker/, /app/ ...) een slag kleiner dan "groot" (feedback Leroy 19 oktober 2026). */
.vw-hero__intro.has-large-font-size {
	/* WordPress zet .has-large-font-size met !important via de preset-variabele; daarom de variabele zelf verkleinen. */
	--wp--preset--font-size--large: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
	line-height: 1.55;
}

/* Pagina's met het titelpaneel: de eerste sectie erna niet nog eens de sectieruimte erbovenop (dubbele witruimte). */
.vw-content > .vw-sectie:first-child {
	padding-top: 0;
}

@media (max-width: 781.98px) {
	.vw-hero__foto {
		max-width: 280px;
	}

	.vw-hero__tekst {
		text-align: center;
	}

	.vw-hero__intro {
		margin-left: auto;
		margin-right: auto;
	}

	.vw-hero__knoppen {
		justify-content: center;
	}
}

/* Labelpil, zoals "GRATIS STARTEN" bij Lot Beukers. */
.vw-pil {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, white);
	color: var(--wp--preset--color--primary-darker);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.has-text-align-center > .vw-pil,
.vw-pil.has-text-align-center {
	align-self: center;
}

/* Telefoons: drie afbeeldingen in een waaier met een frame in CSS.
   Blokstijl "Zonder frame" voor eigen mockups die al een telefoon bevatten. */
.vw-mockups {
	gap: 0;
	padding-block: 1rem 1.5rem;
}

.vw-mockups > .wp-block-image {
	flex: 0 0 auto;
	width: 36%;
	max-width: 210px;
	margin: 0;
}

.vw-mockups > .wp-block-image + .wp-block-image {
	margin-left: -7%;
}

.vw-telefoon img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 19.5;
	object-fit: cover;
	object-position: top;
	border: 6px solid var(--wp--preset--color--contrast);
	border-radius: 30px;
	background-color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--lg);
}

.vw-mockups > .wp-block-image:nth-child(1) {
	transform: rotate(-7deg) translateY(6%);
}

.vw-mockups > .wp-block-image:nth-child(2) {
	position: relative;
	z-index: 1;
	transform: scale(1.06);
}

.vw-mockups > .wp-block-image:nth-child(3) {
	transform: rotate(7deg) translateY(6%);
}

@media (max-width: 599.98px) {
	.vw-mockups > .wp-block-image:nth-child(1) {
		transform: rotate(-4deg) translateY(4%);
	}

	.vw-mockups > .wp-block-image:nth-child(3) {
		transform: rotate(4deg) translateY(4%);
	}
}

.wp-block-image.is-style-zonder-frame img {
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Secties en ritme. */
.vw-sectie {
	padding-top: var(--wp--preset--spacing--60);
}

.vw-sectie--smal {
	padding-top: var(--wp--preset--spacing--50);
}

.vw-sectie > .vw-kop-duo,
.vw-sectiekop {
	margin-bottom: var(--wp--preset--spacing--40);
}

.vw-sectiekop {
	gap: 1rem 2rem;
}

.vw-sectiekop > .vw-kop-duo {
	margin: 0;
}

.vw-main > .vw-paneel {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
}

/* Fotokaarten (doelkaarten met foto bovenaan, label, titel, tekst en link). */
.vw-doelen {
	gap: var(--wp--preset--spacing--30);
}

.vw-fotokaart {
	height: 100%;
	gap: 0.75rem;
}

.vw-fotokaart > * {
	margin: 0;
}

.vw-fotokaart__foto {
	width: 100%;
	margin-bottom: 0.25rem !important;
}

.vw-fotokaart__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 25%;
	border-radius: var(--wp--custom--radius--md);
}

.vw-fotokaart .wp-block-buttons {
	margin-top: auto;
}

.vw-over__foto img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: var(--wp--custom--radius--lg);
}

.vw-tools {
	gap: var(--wp--preset--spacing--30);
}

/* Tweede kaart in dezelfde sectie (etiketten lezen): wat ruimte boven. */
.vw-tools + .vw-tools {
	margin-top: var(--wp--preset--spacing--30);
}

.vw-tools__tekst > * {
	margin: 0;
}

.vw-tools__tekst > * + * {
	margin-top: 0.5rem;
}

.vw-boek-kaart__cover {
	max-width: 260px;
	margin-inline: auto;
}

@media (max-width: 781.98px) {
	.vw-boek-kaart__cover {
		max-width: 180px;
	}
}

.vw-boek-kaart__cover img {
	display: block;
	width: 100%;
	height: auto;
}

.vw-boek-kaart .vw-pil + * {
	margin-top: 0.75rem;
}

/* ==========================================================================
   Berichtkaarten en rasters
   ========================================================================== */

.vw-postgrid {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-post-template.vw-postgrid {
	padding: 0;
	margin: 0;
	list-style: none;
}

.vw-postkaart {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-postkaart__beeld {
	margin: 0;
}

/* Artikel zonder uitgelichte afbeelding: merkvlak met logo, zodat het raster rustig blijft. */
.vw-postkaart:not(:has(.vw-postkaart__beeld))::before {
	content: "";
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--primary) url(assets/images/logo.svg) no-repeat center / auto 38%;
}

.vw-postkaart__beeld img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.2, 0, 0, 1);
}

.vw-postkaart:hover .vw-postkaart__beeld img {
	transform: scale(var(--vw-beweging-zoom));
}

.vw-postkaart__beeld a {
	display: block;
	overflow: hidden;
}

.vw-postkaart__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	gap: 0.5rem;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.vw-postkaart__body > * {
	margin: 0;
}

.vw-postkaart__body .wp-block-post-title,
.vw-postkaart__body h3 {
	line-height: 1.15;
}

.vw-postkaart__body .wp-block-post-title a,
.vw-postkaart__body h3 a {
	color: inherit;
	text-decoration: none;
}

.vw-postkaart__body .wp-block-post-title a:hover,
.vw-postkaart__body h3 a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.vw-postkaart .wp-block-read-more {
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-underline-offset: 0.25em;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.vw-postkaart .wp-block-read-more::after {
	content: " \2192";
}

.vw-paginering {
	margin-top: var(--wp--preset--spacing--50);
	gap: 0.5rem;
	font-weight: 600;
}

.vw-paginering a,
.vw-paginering .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.vw-paginering .current {
	background-color: var(--wp--preset--color--primary);
}

.vw-paginering a:hover {
	background-color: var(--wp--preset--color--primary-light);
}

/* ==========================================================================
   Pagina- en blogcontent (ook klassieke HTML zonder blokken)
   ========================================================================== */

.vw-main {
	padding-bottom: var(--wp--preset--spacing--20);
}

.vw-uitgelicht {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: 0;
}

.vw-uitgelicht img {
	border-radius: var(--wp--custom--radius--lg);
}

.vw-content {
	padding-top: var(--wp--preset--spacing--50);
}

.vw-content :where(h2, h3, h4) {
	margin-top: 2.25em;
	margin-bottom: 0.5em;
}

.vw-content :where(h2) {
	font-size: var(--wp--preset--font-size--x-large);
}

.vw-content :where(p, li, td) {
	overflow-wrap: break-word;
}

/* Lange URL's als linktekst mogen overal afbreken. */
.vw-content a {
	overflow-wrap: anywhere;
}

.vw-content :where(ul, ol) {
	padding-left: 1.25em;
}

.vw-content :where(li) + :where(li) {
	margin-top: 0.4em;
}

.vw-content :where(li)::marker {
	color: var(--wp--preset--color--primary-dark);
}

.vw-content img {
	border-radius: var(--wp--custom--radius--md);
}

.vw-content :where(figure, .wp-caption) {
	max-width: 100%;
}

.vw-content :where(figcaption, .wp-caption-text) {
	margin-top: 0.5em;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.vw-content blockquote:not(.wp-block-quote) {
	margin: 1.5em 0;
	padding-left: 1.25rem;
	border-left: 4px solid var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
}

/* Tabellen: horizontaal scrollen binnen de tabel, nooit de hele pagina. */
.vw-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

/* Eigen tabellen (NEVO, vergelijkingen in .vw-tabel) zijn op 390px al leesbaar en hoeven niet te scrollen:
   als gewone tabel, over de hele kolombreedte. */
.vw-content .vw-nevo__tabel,
.vw-content .vw-tabel table {
	display: table;
	width: 100%;
}

.vw-content :where(th, td) {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.vw-content th {
	font-weight: 600;
	background-color: var(--wp--preset--color--primary-light);
}

.vw-content :where(iframe, embed, video) {
	max-width: 100%;
}

.vw-content iframe[src*="eenvandaag"],
.vw-content iframe[src*="youtube"],
.vw-content iframe[src*="vimeo"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--md);
}

.vw-content iframe[src*="substack"] {
	width: 100%;
	border-radius: var(--wp--custom--radius--md);
}

.vw-content hr {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 2.5em 0;
}

/* Woo-winkelwagen en afrekenen hebben de brede maat nodig. */
.woocommerce-cart .vw-content > *,
.woocommerce-checkout .vw-content > *,
.woocommerce-account .vw-content > * {
	max-width: var(--wp--style--global--wide-size);
}

/* ==========================================================================
   Formulieren (Formspree, BMI-calculator, zoeken, WooCommerce)
   ========================================================================== */

:where(.vw-content, .vw-paginakop, .wp-block-search) :where(
	input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
	input[type="search"], input[type="url"], input[type="password"], select, textarea
) {
	width: 100%;
	max-width: 100%;
	min-height: 56px;
	box-sizing: border-box;
	padding: 0.875rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: max(16px, 1rem);
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

:where(.vw-content) textarea {
	min-height: 160px;
	border-radius: var(--wp--custom--radius--lg);
	resize: vertical;
}

:where(.vw-content, .vw-paginakop, .wp-block-search) :where(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--white);
	outline: none;
}

:where(.vw-content) :where(input, select, textarea)::placeholder {
	color: var(--wp--preset--color--text-muted);
}

:where(.vw-content) label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
}

:where(.vw-content) :where(input[type="submit"], button[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.875rem 1.625rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition);
}

:where(.vw-content) :where(input[type="submit"], button[type="submit"]):hover {
	background-color: #8FB672;
}

/* Klassieke formulieren met <label><br><input>: label direct boven het veld. */
:where(.vw-content) form label + br {
	display: none;
}

:where(.vw-content) form > :where(div, p) + :where(div, p) {
	margin-top: 1.25rem;
}

/* Veelgestelde vragen met <details>, als lichte balken. */
.vw-content details {
	margin-top: 0.75rem;
	padding: 0 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-content summary {
	display: flex;
	align-items: center;
	min-height: 56px;
	cursor: pointer;
	list-style-position: inside;
}

.vw-content details[open] {
	padding-bottom: 1rem;
}

.vw-zoeken .wp-block-search__inside-wrapper {
	gap: 0.5rem;
	border: 0;
	padding: 0;
}

.vw-zoeken .wp-block-search__input {
	background-color: var(--wp--preset--color--white);
}

.vw-zoeken .wp-block-search__button {
	margin: 0;
}

/* ==========================================================================
   Nieuwsbrief en footer
   ========================================================================== */

/* Staat de nieuwsbrief al in de inhoud van de pagina, dan blijft de kaart in de footer leeg: verbergen. */
.vw-nieuwsbrief-sectie:not(:has(.vw-nb)) {
	display: none;
}

.vw-nieuwsbrief-sectie {
	margin-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	background: linear-gradient(to bottom, transparent 0 35%, var(--wp--preset--color--primary-light) 35% 100%);
	border-radius: 0 0 var(--wp--custom--radius--lg) var(--wp--custom--radius--lg);
	margin-left: var(--wp--custom--panel-gap);
	margin-right: var(--wp--custom--panel-gap);
}

.vw-nieuwsbrief .vw-kop-duo {
	margin: 0;
}

@media (max-width: 781.98px) {
	.vw-nieuwsbrief.is-style-kaart {
		padding: 24px !important;
	}

	.vw-nieuwsbrief-sectie {
		margin-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--30);
	}
}

.vw-nieuwsbrief .has-large-font-size {
	margin-top: 0;
}

/* Blok Nieuwsbrief (Brevo): kop, sociaal bewijs, zin, voornaam + e-mail, knop, voetnoot.
   Mobiel onder elkaar; vanaf 782px in de kaart: tekst links, formulier rechts, velden naast elkaar. */
.vw-nb {
	display: grid;
	gap: 1.25rem;
	scroll-margin-top: 2rem;
}

.vw-nb__intro > * {
	margin: 0;
}

.vw-nb__intro > * + * {
	margin-top: 0.5rem;
}

.vw-nb__kop {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

.vw-nb__bewijs {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 600;
}

.vw-nb__zin {
	color: var(--wp--preset--color--contrast);
}

.vw-nb__form {
	display: grid;
	gap: 0.75rem;
}

.vw-nb__velden {
	display: grid;
	gap: 0.75rem;
}

.vw-nb__veld input,
.vw-cf__veld input,
.vw-cf__veld textarea {
	width: 100%;
	height: 52px;
	min-height: 52px; /* Wint van de algemene formulierregel (56px) binnen .vw-content. */
	box-sizing: border-box;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px; /* Minimaal 16px: anders zoomt iOS in bij het typen. */
	line-height: 1.2;
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.vw-nb__veld input::placeholder,
.vw-cf__veld input::placeholder,
.vw-cf__veld textarea::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

.vw-nb__veld input:focus,
.vw-cf__veld input:focus,
.vw-cf__veld textarea:focus {
	border-color: var(--wp--preset--color--primary-dark);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary-dark);
	outline: none;
}

.vw-nb__veld input[aria-invalid="true"],
.vw-cf__veld input[aria-invalid="true"],
.vw-cf__veld textarea[aria-invalid="true"] {
	border-color: #B3261E;
	box-shadow: 0 0 0 1px #B3261E;
}

.vw-nb__knop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 52px;
	border-radius: var(--wp--custom--radius--pill);
}

.vw-nb__pijl {
	transition: transform var(--wp--custom--transition);
}

.vw-nb__knop:hover .vw-nb__pijl {
	transform: translateX(3px);
}

.vw-nb__knop[aria-busy="true"] {
	opacity: 0.6;
	cursor: progress;
}

.vw-nb__voetnoot {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 13px;
	line-height: 1.45;
}

.vw-nb__voetnoot a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vw-nb__melding {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
	font-weight: 600;
}

/* Staat na versturen: "Check je mail" in hetzelfde blok. */
.vw-nb__klaar {
	display: grid;
	justify-items: start;
	gap: 0.5rem;
}

.vw-nb__klaar[hidden],
.vw-nb__intro[hidden],
.vw-nb__form[hidden] {
	display: none;
}

.vw-nb.is-verstuurd,
.vw-nb:has(> .vw-nb__klaar:not([hidden])) {
	grid-template-columns: 1fr;
}

.vw-nb__klaar > * {
	margin: 0;
}

.vw-nb__klaar-icoon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 0.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-light);
}

.vw-nb__klaar-icoon::before {
	content: "";
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

.vw-nb__klaar-kop {
	font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
}

.vw-nb__klaar-kop:focus {
	outline: none;
}

.vw-nb__klaar-noot {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-nb__melding.is-fout {
	background-color: #FBEAEA;
	color: #8C1D18;
}

/* Blok Contactformulier: zelfde velden als de nieuwsbrief, onder elkaar; het bericht is een tekstvak. */
.vw-cf {
	scroll-margin-top: 2rem;
}

.vw-cf__form {
	display: grid;
	gap: 0.75rem;
}

.vw-cf__veld textarea {
	display: block;
	height: auto;
	min-height: 160px;
	padding: 0.875rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	line-height: 1.5;
	resize: vertical;
}

@media (min-width: 600px) {
	.vw-nb__velden {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}
}

@media (min-width: 782px) {
	.vw-nb--kaart {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		align-items: center;
		column-gap: var(--wp--preset--spacing--50);
	}
}

.vw-footer {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
}

.vw-footer .vw-logo img {
	height: 52px;
}

.vw-footer__brand > * + * {
	margin-top: 1rem;
}

.vw-footer__menus {
	gap: var(--wp--preset--spacing--30);
}

.vw-footer__title {
	margin: 0 0 0.25rem;
	font-size: 1rem;
	letter-spacing: 0.06em;
}

.vw-footer__links,
.vw-footer__legal {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vw-footer__links a,
.vw-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--text-muted);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.vw-footer__links a:hover,
.vw-footer__legal a:hover {
	color: var(--wp--preset--color--contrast);
}

.vw-footer__socials {
	gap: 0.5rem;
}

.vw-footer__socials .wp-social-link {
	transition: transform var(--wp--custom--transition);
}

.vw-footer__socials .wp-social-link a {
	padding: 10px;
}

.vw-footer__socials .wp-social-link svg {
	width: 24px;
	height: 24px;
}

.vw-footer__socials .wp-social-link:hover {
	transform: translateY(-2px);
}

.vw-footer__bottom {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
	row-gap: 0;
}

.vw-footer__legal {
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.25rem;
}

.vw-footer__bottom > * {
	margin: 0;
}

.vw-footer__disclaimer,
.vw-footer__copyright {
	font-size: 13px;
	line-height: 1.5;
}

.vw-footer__regel {
	margin-top: 0.75rem !important;
	gap: 0.25rem 2rem;
	align-items: center;
}

.vw-footer__copyright {
	flex: 1 1 28rem;
	margin: 0;
}

.vw-footer__legal {
	font-size: 13px;
}

/* Mobiel (eerst ontworpen op 390px): compact, maximaal 1,5 schermhoogte inclusief nieuwsbriefkaart.
   Logo en socials op één rij, linkgroepen in drie kolommen, disclaimer klein onderaan. */
@media (max-width: 781.98px) {
	.vw-footer {
		padding-top: var(--wp--preset--spacing--40);
		padding-bottom: var(--wp--preset--spacing--20);
	}

	.vw-footer__main {
		gap: 1.25rem !important;
	}

	.vw-footer__brand {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1rem;
	}

	.vw-footer__brand > * + * {
		margin-top: 0;
	}

	.vw-footer .vw-logo img {
		height: 44px;
	}

	/* Tagline onder logo en socials, over de volle breedte. */
	.vw-footer__brand > p {
		order: 3;
		flex-basis: 100%;
		font-size: var(--wp--preset--font-size--small);
	}

	.vw-footer__socials {
		gap: 0.375rem !important;
	}

	.vw-footer__socials .wp-social-link a {
		padding: 10px;
	}

	.vw-footer__menus {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 0.75rem !important;
	}

	/* Vier kolommen (met Kennisbank): twee bij twee, anders past "Voedingsstoffen" niet. */
	.vw-footer__menus:has(> :nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		row-gap: 1.25rem !important;
	}

	.vw-footer__title {
		font-size: 0.875rem;
	}

	.vw-footer__links a {
		min-width: 44px;
		font-size: 15px;
	}

	.vw-footer__bottom {
		margin-top: var(--wp--preset--spacing--30);
	}

	.vw-footer__legal {
		column-gap: 1rem;
	}
}

@media (min-width: 782px) {
	.vw-footer__links a {
		min-width: 44px;
	}
}

/* ==========================================================================
   Blog: artikel en zijbalk. Smal één kolom; vanaf 1024px een zijbalk van 300px (sticky).
   ========================================================================== */

.vw-artikel-raster {
	display: grid;
	justify-content: center;
}

.vw-artikel {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	min-width: 0;
	margin-inline: auto;
}

.vw-zijbalk {
	display: none;
}

@media (min-width: 1024px) {
	.vw-artikel-raster {
		grid-template-columns: minmax(0, var(--wp--style--global--content-size)) 300px;
		column-gap: var(--wp--preset--spacing--50);
		align-items: start;
	}

	.vw-artikel {
		margin: 0;
	}

	.vw-zijbalk {
		position: sticky;
		top: calc(24px + var(--vw-kop-zichtbaar, 0px));
		transition: top var(--wp--custom--transition);
		display: block;
		margin-top: var(--wp--preset--spacing--50);
	}

	.vw-alleen-smal {
		display: none !important;
	}
}

/* ==========================================================================
   App-CTA: één inhoud (gesynchroniseerd patroon "App-CTA"), drie formaten.
   Groot: homepage en /app/ (mockup max. 480px desktop, 320px mobiel).
   Compact: max. 160px hoog. Zijbalk: smalle staande kaart. Nooit meer dan één per scherm.
   ========================================================================== */

.vw-appcta-plek {
	--vw-appcta-bg: #64724F;
	--vw-appcta-accent: #D6E8C4;
	margin-block: 0;
}

.vw-appcta {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--vw-appcta-bg);
	color: var(--wp--preset--color--white);
}

.vw-appcta > *,
.vw-appcta__tekst > * {
	margin: 0 !important;
}

.vw-appcta__beeld {
	margin: 0;
}

.vw-appcta__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vw-appcta__kop {
	color: var(--wp--preset--color--white);
	font-weight: 600;
	line-height: 1.05;
	text-wrap: balance;
}

.vw-appcta__accent {
	color: var(--vw-appcta-accent);
}

/* Compact en zijbalk: kleine tekst, dus het accent in primary light (4,7:1 op het groene paneel; het lichtgroen haalt
   daar maar 4:1). Het accent blijft zichtbaar als onderstreping. */
.vw-appcta-plek--compact .vw-appcta__accent,
.vw-appcta-plek--zijbalk .vw-appcta__accent {
	color: var(--wp--preset--color--primary-light);
	text-decoration: underline 2px var(--vw-appcta-accent);
	text-underline-offset: 0.2em;
}

.vw-appcta__intro,
.vw-appcta__kort {
	color: var(--wp--preset--color--primary-light);
}

.vw-appcta__stores {
	gap: 10px 16px !important;
}

/* Acties bij de app: knop naar de onboarding en een niet-klikbare hint "Beschikbaar voor iOS en Android".
   Geen downloadlinks (zonder account zie je in de app alleen een inlogscherm). */
/* Afbreken mag altijd: een lange knoptekst duwt de iconen naar de volgende regel, nooit buiten de kaart. */
.vw-app-acties {
	flex-wrap: wrap !important;
}

/* In smalle plekken (compact, zijbalk) mag de knoptekst over twee regels, zodat de knop in de kaart blijft. */
.vw-appcta-plek--compact .vw-app-knop .wp-block-button__link,
.vw-appcta-plek--zijbalk .vw-app-knop .wp-block-button__link {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

.vw-app-acties > * {
	margin: 0 !important;
}

.vw-app-knop .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	white-space: nowrap;
}

.vw-app-knop .wp-block-button__link::after {
	content: "\2192";
	margin-left: 8px;
}

.vw-app-platform {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
}

.vw-app-platform::before {
	content: "";
	flex-shrink: 0;
	width: 40px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--vw-icoon-platforms) no-repeat center / contain;
	mask: var(--vw-icoon-platforms) no-repeat center / contain;
}

.vw-appcta .vw-app-platform {
	color: var(--wp--preset--color--primary-light);
}

/* Compact op de telefoon: de kaart is maximaal 160px hoog en de knop vult de breedte, dus de regel "Beschikbaar
   voor iOS en Android" is daar alleen voor schermlezers. Vanaf 782px staat hij zichtbaar onder de knop. */
@media (max-width: 781.98px) {
	.vw-appcta-plek--compact .vw-app-platform {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.vw-appcta-plek--compact .vw-app-knop .wp-block-button__link {
	min-height: 44px;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

@media (min-width: 782px) {
	.vw-appcta-plek--compact .vw-app-acties {
		flex-direction: column;
		align-items: flex-start;
	}

	.vw-appcta-plek--compact .vw-app-platform {
		gap: 8px;
		font-size: 0.8125rem;
	}
}

.vw-appcta__score {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--primary-light);
	font-size: 0.9375rem;
	font-weight: 500;
}

.vw-appcta__score::before {
	content: "\2605\2605\2605\2605\2605" / "";
	/* Eén kleur, zoals alle iconen (DESIGN-SYSTEM §15): de tekstkleur op het donkere paneel, 4,6 van 5 gevuld. */
	background: linear-gradient(90deg, var(--wp--preset--color--primary-light) 92%, rgba(243, 244, 241, 0.35) 0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: 0.08em;
}

/* Groot. Mobiel: tekst boven, mockup eronder (max. 320px). */
.vw-appcta-plek--groot {
	margin: var(--wp--preset--spacing--60) var(--wp--custom--panel-gap) 0;
}

.vw-appcta-plek--groot .vw-appcta {
	grid-template-areas: "tekst" "beeld";
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--wp--style--root--padding-left));
	margin-inline: auto;
}

.vw-appcta-plek--groot .vw-appcta__tekst {
	grid-area: tekst;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 32px 20px 0;
}

.vw-appcta-plek--groot .vw-appcta__kop {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}

.vw-appcta-plek--groot .vw-appcta__beeld {
	grid-area: beeld;
	height: 320px;
	padding: 20px 20px 0;
}

.vw-appcta-plek--groot .vw-appcta__kort {
	display: none;
}

@media (min-width: 782px) {
	.vw-appcta-plek--groot .vw-appcta {
		grid-template-areas: "tekst beeld";
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		align-items: center;
	}

	.vw-appcta-plek--groot .vw-appcta__tekst {
		gap: 1.25rem;
		padding: 56px 0 56px clamp(32px, 5vw, 64px);
	}

	.vw-appcta-plek--groot .vw-appcta__beeld {
		height: 480px;
		padding: 32px 32px 0;
		align-self: end;
	}
}

/* Compact: max. 160px hoog. Mobiel: mockup links naast kop en zin, knoppen eronder over de volle breedte. */
.vw-appcta-plek--compact {
	padding: var(--wp--preset--spacing--50) var(--wp--style--root--padding-left) 0;
}

.vw-appcta-plek--compact .vw-appcta,
.vw-appcta-plek--zijbalk .vw-appcta {
	max-width: 880px;
	margin-inline: auto;
}

.vw-appcta-plek--compact .vw-appcta {
	grid-template-columns: 76px minmax(0, 1fr);
	grid-template-areas: "beeld kop" "beeld kort" "stores stores";
	gap: 4px 12px;
	max-height: 160px;
	padding: 12px 14px;
	box-sizing: border-box;
}

.vw-appcta-plek--compact .vw-appcta__tekst {
	display: contents;
}

.vw-appcta-plek--compact .vw-appcta__beeld {
	grid-area: beeld;
	height: 84px;
}

.vw-appcta-plek--compact .vw-appcta__kop {
	grid-area: kop;
	align-self: end;
	font-size: 1.0625rem;
	line-height: 1.15;
}

.vw-appcta-plek--compact .vw-appcta__kort {
	grid-area: kort;
	align-self: start;
	font-size: 0.875rem;
	line-height: 1.35;
}

.vw-appcta-plek--compact .vw-appcta__stores {
	grid-area: stores;
	flex-wrap: wrap !important;
	margin-top: 4px !important;
}

.vw-appcta-plek--compact .vw-appcta__pil,
.vw-appcta-plek--compact .vw-appcta__intro,
.vw-appcta-plek--compact .vw-appcta__score {
	display: none;
}

@media (min-width: 782px) {
	.vw-appcta-plek--compact .vw-appcta {
		grid-template-columns: 120px minmax(0, 1fr) auto;
		grid-template-areas: "beeld kop stores" "beeld kort stores";
		column-gap: 24px;
		padding: 12px 24px 12px 16px;
	}

	.vw-appcta-plek--compact .vw-appcta__beeld {
		height: 136px;
	}

	.vw-appcta-plek--compact .vw-appcta__kop {
		font-size: 1.5rem;
	}

	.vw-appcta-plek--compact .vw-appcta__kort {
		font-size: 1rem;
	}

	.vw-appcta-plek--compact .vw-appcta__stores {
		align-self: center;
		margin-top: 0 !important;
	}
}

/* Zijbalk: smalle staande kaart (blog vanaf 1024px). */
.vw-appcta-plek--zijbalk .vw-appcta {
	gap: 12px;
	padding: 20px;
}

.vw-appcta-plek--zijbalk .vw-appcta__beeld {
	height: 220px;
}

.vw-appcta-plek--zijbalk .vw-appcta__tekst {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vw-appcta-plek--zijbalk .vw-appcta__kop {
	font-size: 1.5rem;
}

.vw-appcta-plek--zijbalk .vw-appcta__stores {
	flex-direction: column;
	align-items: flex-start;
}

.vw-appcta-plek--zijbalk .vw-appcta__pil,
.vw-appcta-plek--zijbalk .vw-appcta__intro {
	display: none;
}

/* Macrokleuren (Ons advies): eiwit, koolhydraten, vet. Ook voor kleurenblinden te onderscheiden. */
:root {
	--vw-macro-eiwit: #64724F;
	--vw-macro-koolhydraten: #C08A2E;
	--vw-macro-vet: #3F6C8F;
}

/* ==========================================================================
   De kop: header (wit) met daaronder de doelbalk (primary light), samen vast bovenin.
   Gedrag (assets/js/kop.js): naar beneden schuift de header weg en blijft de doelbalk staan;
   omhoog komt de header geleidelijk terug (helemaal na ongeveer 90px). Alleen transform.
   ========================================================================== */

.vw-kop {
	position: sticky;
	z-index: 60;
	top: 0;
	margin: 0 !important;
	/* Geen will-change: dat maakt de kop het referentiepunt voor het vaste mobiele menu. */
}

.admin-bar .vw-kop {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Mobiel menu of zoekvenster open: geen transform op de kop, anders klopt de vaste positie van het menu niet. */
.vw-kop.is-rust {
	transform: none !important;
}

.vw-kop > * {
	margin: 0 !important;
}

.vw-kop header.vw-site-header {
	padding: 12px var(--wp--style--root--padding-left);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--white);
}

.vw-kop header.vw-site-header > .vw-header {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.vw-doelbalk-vast-plek {
	margin: 0 !important;
}

/* ==========================================================================
   Doelbalk: één component voor de kop en voor in de pagina (blok Doelbalk, calculators, boeken).
   Mobiel: label en vraag, eronder dropdown en knop naast elkaar. Vanaf 782px alles op één regel; vanaf 1200px
   met pillen in plaats van de dropdown. Alleen de dropdown stuurt het doel mee.
   ========================================================================== */

.vw-doelbalk {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 14px var(--wp--style--root--padding-left) 16px;
	background-color: var(--wp--preset--color--primary-light);
}

.vw-doelbalk--blok {
	margin-top: 1.5rem;
	padding: clamp(1.25rem, 4vw, 1.75rem);
	border-radius: var(--wp--custom--radius--lg);
}

.vw-doelbalk--kop {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-doelbalk__binnen {
	display: grid;
	gap: 10px;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.vw-doelbalk__tekst > * {
	margin: 0;
}

.vw-doelbalk__label {
	color: var(--wp--preset--color--primary-darker);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.vw-doelbalk__vraag {
	margin-top: 2px !important;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}

.vw-doelbalk__rij {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.vw-doelbalk__select {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.vw-doelbalk__select select {
	width: 100%;
	height: 48px;
	padding: 0 44px 0 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px; /* Minimaal 16px: anders zoomt iOS in. */
	font-weight: 500;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.vw-doelbalk__select select:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

/* Eigen pijltje. */
.vw-doelbalk__select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 16px;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: var(--vw-icoon-keuzepijl) no-repeat center / contain;
	mask: var(--vw-icoon-keuzepijl) no-repeat center / contain;
	transform: translateY(-50%);
	pointer-events: none;
}

.vw-doelbalk__pillen {
	display: none;
}

.vw-doelbalk__knop {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 20px;
	border-radius: var(--wp--custom--radius--pill);
	white-space: nowrap;
}

.vw-doelbalk__pijl {
	transition: transform var(--wp--custom--transition);
}

.vw-doelbalk__knop:hover .vw-doelbalk__pijl {
	transform: translateX(3px);
}

@media (min-width: 782px) {
	.vw-doelbalk--kop {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.vw-doelbalk__binnen {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: 32px;
	}

	.vw-doelbalk__vraag {
		font-size: 1.5rem;
	}

	/* In de pagina is de vraag vaak langer: vraag boven, keuzes en knop eronder. */
	.vw-doelbalk--blok .vw-doelbalk__binnen {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 14px;
	}


	.vw-doelbalk__rij {
		justify-content: flex-end;
		gap: 12px;
	}

	.vw-doelbalk__select {
		flex: 0 1 260px;
	}

	.vw-doelbalk--blok .vw-doelbalk__rij {
		justify-content: flex-start;
	}
}

/* Pillen pas vanaf 1200px: daaronder passen ze niet naast de vraag op één regel. */
@media (min-width: 1200px) {
	.vw-doelbalk__select {
		display: none;
	}

	.vw-doelbalk__pillen {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		border: 0;
	}

	.vw-doelbalk__pil {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 0 16px;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--pill);
		background-color: var(--wp--preset--color--white);
		font-weight: 600;
		cursor: pointer;
		transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
	}

	.vw-doelbalk__pil:hover {
		border-color: var(--wp--preset--color--primary-dark);
	}

	.vw-doelbalk__pil input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.vw-doelbalk__pil::before {
		content: "";
		width: 22px;
		height: 22px;
		background-color: var(--wp--preset--color--primary-dark);
		-webkit-mask: var(--vw-icoon) no-repeat center / contain;
		mask: var(--vw-icoon) no-repeat center / contain;
	}

	/* Vinkje bij de keuze, rechts in de pil. */
	.vw-doelbalk__vink {
		display: none;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: var(--wp--preset--color--primary-dark);
	}

	.vw-doelbalk__vink::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--wp--preset--color--white);
		-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / 13px;
		mask: var(--vw-icoon-vinkje) no-repeat center / 13px;
	}

	.vw-doelbalk__pil:has(input:checked) {
		border-color: var(--wp--preset--color--primary-dark);
		box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-dark);
	}

	.vw-doelbalk__pil:has(input:checked) .vw-doelbalk__vink {
		display: block;
	}

	.vw-doelbalk__pil:has(input:focus-visible) {
		outline: 2px solid var(--wp--preset--color--primary-dark);
		outline-offset: 2px;
	}
}

/* ==========================================================================
   Voedingsschema-funnel (blok Voedingsschema-funnel, sjabloon "Funnel") en "Ons advies".
   Mobiel eerst: één kolom, velden 52px, tikdoelen 44px. Advies op desktop: paneel links.
   ========================================================================== */

/* Focusmodus: geen header, menu, footer of doelbalk. De bovenbalk zit in het blok. */
.vw-funnel-main {
	margin: 0 !important;
	padding: 0;
}

.vw-funnel {
	--vw-funnel-breed: 560px;
	min-height: 100dvh;
	margin: 0 !important;
	padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.vw-funnel.is-advies,
.vw-funnel:not(.is-vraag) {
	padding-bottom: var(--wp--preset--spacing--50);
}

.vw-funnel__stap[hidden],
.vw-funnel [hidden] {
	display: none !important;
}

/* Bovenbalk: terug, logo, stoppen. Daaronder de voortgang. */
.vw-funnel__balk {
	position: sticky;
	z-index: 40;
	top: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--white);
}

.admin-bar .vw-funnel__balk {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.vw-funnel__balk-rij {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 8px 12px;
}

.vw-funnel__logo {
	justify-self: center;
	display: flex;
	align-items: center;
	min-height: 44px;
}

.vw-funnel__logo img {
	display: block;
	width: auto;
	height: 36px;
}

.vw-funnel__icoonknop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}

.vw-funnel__icoonknop::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--vw-knop-icoon) no-repeat center / contain;
	mask: var(--vw-knop-icoon) no-repeat center / contain;
}

.vw-funnel__icoonknop--terug {
	--vw-knop-icoon: var(--vw-icoon-terug);
}

.vw-funnel__icoonknop--sluiten {
	--vw-knop-icoon: var(--vw-icoon-sluiten);
}

.vw-funnel__icoonknop:hover {
	background-color: var(--wp--preset--color--primary-light);
}

.vw-funnel__icoonknop:focus-visible,
.vw-funnel__logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-funnel__voortgang {
	max-width: var(--vw-funnel-breed);
	margin-inline: auto;
	padding: 0 var(--wp--style--root--padding-left) 10px;
}

.vw-funnel__voortgang-balk {
	height: 6px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-funnel__voortgang-balk span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background-color: var(--wp--preset--color--primary-dark);
	transition: width 300ms cubic-bezier(0.2, 0, 0, 1);
}

.vw-funnel__stapnr {
	margin: 6px 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 13px;
	font-weight: 600;
}

/* Stappen: één kolom, compact, zodat elke stap op één telefoonscherm past. */
.vw-funnel__form {
	max-width: var(--vw-funnel-breed);
	margin-inline: auto;
	padding: 20px var(--wp--style--root--padding-left) 0;
}

.vw-funnel.is-advies .vw-funnel__form {
	max-width: var(--wp--style--global--wide-size);
}

.vw-funnel__stap {
	display: grid;
	gap: 18px;
}

.vw-funnel__stap > * {
	margin: 0;
}

.vw-funnel__titel {
	margin: 0;
	font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
	line-height: 1.1;
}

.vw-funnel__titel:focus,
.vw-funnel__intro:focus {
	outline: none;
}

.vw-funnel__intro {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 1rem;
}

.vw-funnel__veld {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vw-funnel__legenda,
.vw-funnel__veld > label:not(.vw-funnel__kaart),
.vw-advies__zelf > legend {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-weight: 600;
}

.vw-funnel input[type="text"],
.vw-funnel input[type="email"] {
	width: 100%;
	height: 52px;
	box-sizing: border-box;
	padding: 0 1.125rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 16px; /* Minimaal 16px: anders zoomt iOS in. */
}

.vw-funnel input:focus {
	border-color: var(--wp--preset--color--primary-dark);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary-dark);
	outline: none;
}

.vw-funnel [aria-invalid="true"] {
	border-color: #B3261E !important;
	box-shadow: 0 0 0 1px #B3261E !important;
}

.vw-funnel__invoer {
	position: relative;
	display: block;
}

.vw-funnel__eenheid {
	position: absolute;
	top: 50%;
	right: 1.125rem;
	transform: translateY(-50%);
	color: var(--wp--preset--color--text-muted);
	pointer-events: none;
}

.vw-funnel__fout {
	margin: 6px 0 0;
	color: #B3261E;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vw-funnel__hint {
	margin: 6px 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-funnel__leeftijd .vw-funnel__invoer {
	max-width: 220px;
}

/* Keuzekaarten: hele kaart tikbaar, icoon links, vinkje rechts bij de keuze. */
.vw-funnel__kaarten {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.vw-funnel__kaarten > legend,
.vw-funnel__kaarten > .vw-funnel__fout {
	grid-column: 1 / -1;
}

.vw-funnel__kaarten--twee,
.vw-funnel__kaarten--compact {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vw-funnel__kaart {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin: 0;
	padding: 12px 14px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.vw-funnel__kaart::before {
	content: "";
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

.vw-funnel__kaart input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vw-funnel__kaart-tekst {
	display: grid;
	flex: 1 1 auto;
	gap: 2px;
	min-width: 0;
}

.vw-funnel__kaart-tekst strong {
	font-weight: 700;
	line-height: 1.25;
}

.vw-funnel__kaart-tekst small {
	color: var(--wp--preset--color--text-muted);
	font-size: 13px;
	line-height: 1.3;
}

.vw-funnel__vink {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 50%;
}

.vw-funnel__kaart:hover {
	border-color: var(--wp--preset--color--primary);
}

.vw-funnel__kaart:has(input:checked) {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-light);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-dark);
}

.vw-funnel__kaart:has(input:checked) .vw-funnel__vink {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-dark);
}

.vw-funnel__kaart:has(input:checked) .vw-funnel__vink::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / 14px;
	mask: var(--vw-icoon-vinkje) no-repeat center / 14px;
}

.vw-funnel__kaart:has(input:focus-visible),
.vw-advies__pil:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

/* Twee kolommen (werk, sport, vrije tijd, geslacht): icoon boven de tekst, vinkje rechtsboven. */
.vw-funnel__kaarten--twee .vw-funnel__kaart,
.vw-funnel__kaarten--compact .vw-funnel__kaart {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 0;
	padding: 12px;
}

.vw-funnel__kaarten--twee .vw-funnel__kaart {
	flex-direction: row;
	align-items: center;
	min-height: 56px;
}

.vw-funnel__kaarten--compact .vw-funnel__kaart::before {
	width: 24px;
	height: 24px;
}

.vw-funnel__kaarten--compact .vw-funnel__vink {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
}

/* Meter: groot getal met min en plus, slider eronder (duim 44px). */
.vw-funnel__meter-rij {
	display: grid;
	grid-template-columns: 48px 1fr 48px;
	align-items: center;
	gap: 8px;
}

.vw-funnel__stapknop {
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.vw-funnel__stapknop:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

.vw-funnel__stapknop:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-funnel__meter-getal {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.vw-funnel .vw-funnel__meter-getal input {
	width: 4.2ch;
	height: 56px;
	padding: 0;
	border: 0;
	border-bottom: 2px dashed var(--wp--preset--color--border);
	border-radius: 0;
	background: none;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 2.5rem;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.vw-funnel .vw-funnel__meter-getal input:focus {
	border-bottom-color: var(--wp--preset--color--primary-dark);
	box-shadow: none;
}

.vw-funnel__meter-eenheid {
	color: var(--wp--preset--color--text-muted);
	font-weight: 600;
}

/* Korte meter (uren): label links, teller rechts op één regel. */
.vw-funnel__meter--kort {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
}

.vw-funnel .vw-funnel__meter--kort > .vw-funnel__legenda {
	margin: 0;
}

.vw-funnel__meter--kort > .vw-funnel__fout {
	grid-column: 1 / -1;
}

.vw-funnel__meter--kort .vw-funnel__meter-rij {
	grid-template-columns: 44px auto 44px;
	justify-content: end;
}

.vw-funnel__meter--kort .vw-funnel__stapknop {
	width: 44px;
	height: 44px;
}

.vw-funnel__meter--kort .vw-funnel__meter-getal input {
	width: 3ch;
	height: 48px;
	font-size: 1.75rem;
}

/* Slider: dikke baan in primary dark tot de waarde, duim 44px. */
.vw-funnel__slider {
	--vw-vulling: 50%;
	width: 100%;
	height: 44px;
	margin: 4px 0 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	touch-action: pan-y;
}

.vw-funnel__slider::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary-dark) var(--vw-vulling), var(--wp--preset--color--border) var(--vw-vulling));
}

.vw-funnel__slider::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary-dark) var(--vw-vulling), var(--wp--preset--color--border) var(--vw-vulling));
}

.vw-funnel__slider::-webkit-slider-thumb {
	width: 44px;
	height: 44px;
	margin-top: -18px;
	border: 3px solid var(--wp--preset--color--primary-dark);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--sm);
	-webkit-appearance: none;
	appearance: none;
}

.vw-funnel__slider::-moz-range-thumb {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 3px solid var(--wp--preset--color--primary-dark);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
}

.vw-funnel__slider:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 4px;
}

/* Tempo als advies van Leroy: kleine ronde portretfoto met "Mijn advies", daaronder de stand en het label. */
.vw-funnel__advies-leroy {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.25rem 0 0.75rem;
}

.vw-funnel__advies-leroy img {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

.vw-funnel__advies-leroy p {
	display: grid;
	margin: 0;
}

.vw-funnel__advies-leroy strong {
	font-weight: 600;
}

.vw-funnel__advies-leroy span {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-funnel__tempo-stand {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;
}

.vw-funnel__tempo-stand strong {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	font-weight: 600;
}

.vw-funnel__tempo-label {
	padding: 2px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-darker);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vw-funnel__tempo-label.is-advies {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.vw-funnel .vw-funnel__tempo-uitleg {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Kleine reviewkaart in de onboarding (stap 2 en 4): sterren, één zin en de voornaam. */
.vw-funnel-review {
	display: grid;
	gap: 0.25rem;
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-funnel-review__sterren {
	margin: 0;
}

.vw-funnel-review__tekst {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.45;
}

.vw-funnel-review__tekst p {
	margin: 0;
}

.vw-funnel-review__tekst p::before {
	content: "\201C";
}

.vw-funnel-review__tekst p::after {
	content: "\201D";
}

.vw-funnel-review__naam {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.vw-funnel .vw-funnel__toestemming > label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.vw-funnel__toestemming input {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--primary-dark);
}

/* Lage schermen (iPhone SE, Instagram-browser met de balk onderin): alles iets compacter,
   zodat elke stap op één scherm past. */
@media (max-height: 720px) {
	.vw-funnel__balk-rij {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.vw-funnel__form {
		padding-top: 14px;
	}

	.vw-funnel__stap {
		gap: 12px;
	}

	.vw-funnel__titel {
		font-size: 1.5rem;
	}

	.vw-funnel__legenda,
	.vw-funnel__veld > label:not(.vw-funnel__kaart) {
		margin-bottom: 6px;
	}

	.vw-funnel__kaarten {
		gap: 6px;
	}

	.vw-funnel__kaarten--compact .vw-funnel__kaart {
		gap: 4px;
		padding: 9px 10px;
	}

	.vw-funnel__kaarten--compact .vw-funnel__kaart::before {
		width: 22px;
		height: 22px;
	}

	.vw-funnel__toestemming span,
	.vw-funnel__hint {
		font-size: 14px;
		line-height: 1.4;
	}

	.vw-funnel__onder {
		padding-top: 8px;
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
	}

	.vw-funnel__volgende {
		min-height: 52px;
	}

	.vw-funnel__advies-leroy {
		margin: 0 0 8px;
	}

	.vw-funnel__advies-leroy img {
		width: 44px;
		height: 44px;
	}

	.vw-funnel__tempo-stand strong {
		font-size: 1.25rem;
	}
}

/* Stap 4 is de langste vraag: op lagere schermen geen review, zodat de vraag zonder scrollen past. */
@media (max-height: 820px) {
	.vw-funnel__stap[data-stap="4"] .vw-funnel-review {
		display: none;
	}
}

/* Vaste knop "Volgende" onderin, over de volle breedte; pas actief als de stap compleet is. */
.vw-funnel__onder {
	position: fixed;
	z-index: 40;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 12px var(--wp--style--root--padding-left) calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--white);
}

.vw-funnel__volgende {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: var(--vw-funnel-breed);
	min-height: 56px;
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--pill);
}

.vw-funnel__volgende:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Stopdialoog in de pagina. */
.vw-funnel__dialoog {
	width: min(420px, calc(100vw - 32px));
	padding: 24px;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--lg);
}

.vw-funnel__dialoog::backdrop {
	background-color: rgba(42, 46, 37, 0.5);
}

.vw-funnel__dialoog > * {
	margin: 0;
}

.vw-funnel__dialoog > * + * {
	margin-top: 12px;
}

.vw-funnel__dialoog-kop {
	font-size: 1.5rem;
}

.vw-funnel__dialoog-knoppen {
	display: grid;
	gap: 8px;
	margin-top: 20px !important;
}

.vw-funnel__dialoog-knoppen .wp-element-button {
	width: 100%;
	min-height: 48px;
}

/* Stoppen is de tweede keuze: omlijnd, geen vulling. */
.vw-funnel .vw-funnel__dialoog-knoppen .vw-funnel__stoppen {
	border: 1.5px solid var(--wp--preset--color--contrast);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.vw-funnel .vw-funnel__dialoog-knoppen .vw-funnel__stoppen:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

/* Berekenen: drie regels die afvinken. */
.vw-funnel__vinkjes {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-funnel__vinkjes li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	opacity: 0.35;
	animation: vw-afvinken 300ms ease-out forwards;
}

.vw-funnel__vinkjes li::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / contain;
	mask: var(--vw-icoon-vinkje) no-repeat center / contain;
}

.vw-funnel__vinkjes li:nth-child(1) { animation-delay: 500ms; }
.vw-funnel__vinkjes li:nth-child(2) { animation-delay: 1200ms; }
.vw-funnel__vinkjes li:nth-child(3) { animation-delay: 1900ms; }

@keyframes vw-afvinken {
	to { opacity: 1; }
}

/* Kies je plan: voordelen, plankaarten, bedenktijd en reviews boven de vaste knop "Nu bestellen". */
.vw-funnel.is-plan {
	padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* De knop "Nu bestellen" is een link: zelfde maat als de knop "Volgende". */
a.vw-funnel__volgende {
	box-sizing: border-box;
	text-decoration: none;
}

/* Wat je krijgt: het productbeeld. Op de telefoon liggend boven de plannen (maximaal 180px hoog en altijd zo dat de
   jaarkaart in beeld blijft; op lage schermen niet), vanaf 600px vierkant naast de voordelen. */
.vw-plan__beeld {
	display: block;
	border-radius: var(--wp--custom--radius--md);
}

.vw-plan__beeld--naast {
	display: none;
	width: 100%;
	height: auto;
}

.vw-plan__beeld--liggend {
	width: auto;
	max-width: 100%;
	height: auto;
	/* Maximaal 180px, en nooit zo hoog dat de jaarkaart onder "Nu bestellen" verdwijnt (gemeten: de rest van de stap
	   tot en met de jaarkaart en de vaste knop is ongeveer 685px). */
	max-height: min(180px, calc(100dvh - 700px));
	margin-inline: auto;
}

/* Lage schermen (zoals de iPhone SE): geen ruimte voor beeld en jaarkaart samen, dus geen beeld. */
@media (max-height: 819px) {
	.vw-plan__beeld--liggend {
		display: none;
	}
}

@media (min-width: 600px) {
	.vw-plan__wat--beeld {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 200px;
		gap: 24px;
		align-items: center;
	}

	.vw-plan__beeld--naast {
		display: block;
	}

	.vw-plan__beeld--liggend {
		display: none;
	}
}

.vw-plan__voordelen {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-plan__voordelen li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	line-height: 1.4;
}

.vw-plan__voordelen li::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / contain;
	mask: var(--vw-icoon-vinkje) no-repeat center / contain;
}

/* Plankaarten: keuzerondjes als kaart (de hele kaart is het tikvlak, pijltjestoetsen wisselen). Prijs per maand groot
   in Oswald, daaronder het totaal en de besparing tegenover per maand. Jaar staat aan en heeft het label "Meest
   gekozen". De gekozen kaart krijgt dezelfde stijl als de keuzekaarten in de vragen. Op elke breedte onder elkaar:
   de funnelkolom is maximaal 560px, naast elkaar braken prijs en label af. Geen doorgestreepte prijzen. */
.vw-plan__kop {
	margin: 0;
}

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

.vw-plan__kaart {
	position: relative;
	display: grid;
	align-content: start;
	gap: 4px;
	min-height: 44px;
	padding: 14px 52px 14px 16px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Het rondje zelf is onzichtbaar maar ligt over de hele kaart: tikken, klikken en het toetsenbord werken gewoon. */
.vw-plan__kaart input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vw-plan__vink {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 22px;
	height: 22px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
	pointer-events: none;
}

.vw-plan__kaart:hover {
	border-color: var(--wp--preset--color--primary);
}

.vw-plan__kaart:has(input:checked) {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-light);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-dark);
}

.vw-plan__kaart:has(input:checked) .vw-plan__vink {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-dark);
}

.vw-plan__kaart:has(input:checked) .vw-plan__vink::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / 14px;
	mask: var(--vw-icoon-vinkje) no-repeat center / 14px;
}

.vw-plan__kaart:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.vw-plan__kaart {
		transition: none;
	}
}

.vw-plan__naam {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 1.0625rem;
	font-weight: 700;
}

.vw-plan__label {
	padding: 2px 10px;
	white-space: nowrap;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 600;
}

.vw-plan__prijs {
	color: var(--wp--preset--color--text-muted);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.vw-plan__prijs b {
	margin-right: 4px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.1;
}

.vw-plan__totaal {
	color: var(--wp--preset--color--text-muted);
	font-size: 14px;
}

.vw-plan__besparing {
	justify-self: start;
	margin-top: 4px !important;
	padding: 2px 10px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--primary-darker);
	font-size: 13px;
	font-weight: 700;
}

.vw-plan__kiezen {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-plan__cadeau {
	margin: 0;
	padding: 12px 16px;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 14px;
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.45;
}

.vw-plan__cadeau::before {
	content: "Cadeau";
	display: block;
	margin-bottom: 2px;
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vw-plan__zeker {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Bonus onder de plankaarten (zelfde blok als in de checkout). */
.vw-plan__bonus {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.vw-plan__bonus b {
	display: block;
	margin-bottom: 2px;
}

.vw-plan__bonus-icoon {
	position: relative;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

/* Thumbnail van de videocursus (16:9), als die in de mediabibliotheek staat. */
.vw-plan__bonus-beeld {
	flex: none;
	width: 112px;
	height: 63px;
	border-radius: var(--wp--custom--radius--sm);
	object-fit: cover;
}

/* Play-driehoek. */
.vw-plan__bonus-icoon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 52%;
	width: 12px;
	height: 14px;
	background-color: var(--wp--preset--color--contrast);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translate(-50%, -50%);
}

/* Voorbeelddag (stap na de voorkeuren): het beeld (op de telefoon maximaal 360px hoog, zodat "Naar je plan" in beeld
   blijft), de PDF-knop eronder, en eventueel een zin of dagenlijst daaronder. Eén kolom, gecentreerd. */
.vw-voorbeeld__inhoud {
	display: grid;
	gap: 12px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.vw-voorbeeld__intro > * {
	margin: -0.25rem 0 1rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.vw-voorbeeld__intro [data-kcal] {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Het beeld met een klein label "Voorbeeld" linksboven. */
.vw-voorbeeld__beeld {
	position: relative;
	width: fit-content;
	margin-inline: auto;
}

.vw-voorbeeld__label {
	position: absolute;
	z-index: 1;
	top: 10px;
	left: 10px;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 2px 8px rgb(31 35 24 / 0.12);
}

.vw-voorbeeld__beeld figure {
	margin: 0;
}

.vw-voorbeeld__beeld img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(360px, calc(100dvh - 420px));
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--md);
}

.vw-voorbeeld__knop .wp-block-buttons {
	justify-content: center;
	margin: 0;
}

.vw-voorbeeld__knop .wp-block-button__link {
	min-height: 44px;
}

.vw-voorbeeld__week > * {
	margin: 0 0 12px;
}

.vw-voorbeeld__week ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-voorbeeld__week li {
	padding: 10px 14px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.vw-voorbeeld__week li strong {
	display: block;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.vw-voorbeeld__leeg {
	margin: 0;
	padding: 24px 16px;
	border: 1.5px dashed var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

@media (min-width: 782px) {
	.vw-voorbeeld__beeld img {
		max-height: min(480px, calc(100dvh - 360px));
	}
}

/* Reviews direct boven de knop: het moment van twijfel. */
.vw-plan__reviews {
	display: grid;
	gap: 0.5rem;
	padding: 1rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-plan__reviews .vw-plan__score {
	margin: 0;
	font-weight: 600;
}

.vw-plan__reviews .vw-funnel-review {
	margin: 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: none;
}

/* Ons advies. */
.vw-advies {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.vw-advies__paneel {
	display: none;
}

.vw-advies__inhoud {
	display: grid;
	gap: 1.25rem;
	max-width: 640px;
	min-width: 0;
}

.vw-advies__inhoud > * {
	margin: 0;
}

.vw-advies__waarschuwing {
	display: grid;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid #B3261E;
	border-radius: var(--wp--custom--radius--md);
	background-color: #FBEAEA;
	color: #8C1D18;
	font-weight: 600;
}

.vw-advies__waarschuwing p {
	margin: 0;
}

.vw-advies__rustiger {
	justify-self: start;
	min-height: 44px;
	border: 1.5px solid #8C1D18 !important;
	background-color: var(--wp--preset--color--white) !important;
	color: #8C1D18 !important;
}

.vw-advies__ring {
	position: relative;
	width: min(240px, 70vw);
	margin-inline: auto;
}

.vw-advies__ring svg {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-90deg);
}

.vw-advies__ring circle {
	fill: none;
	stroke-width: 14;
}

.vw-advies__ring-bodem {
	stroke: var(--wp--preset--color--primary-light);
}

.vw-advies__segment {
	transition: stroke-dasharray 400ms cubic-bezier(0.2, 0, 0, 1), stroke-dashoffset 400ms cubic-bezier(0.2, 0, 0, 1);
}

.vw-advies__segment--eiwit { stroke: var(--vw-macro-eiwit); }
.vw-advies__segment--koolhydraten { stroke: var(--vw-macro-koolhydraten); }
.vw-advies__segment--vet { stroke: var(--vw-macro-vet); }

.vw-advies__ring-midden {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	margin: 0;
	text-align: center;
}

.vw-advies__ring-midden strong {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(2.25rem, 1.8rem + 2vw, 3rem);
	font-weight: 600;
	line-height: 1;
}

.vw-advies__ring-midden span {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-advies__kaarten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-advies__kaart {
	display: grid;
	gap: 0.125rem;
	padding: 0.75rem;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
	text-align: center;
}

.vw-advies__macro--eiwit { --vw-macro: var(--vw-macro-eiwit); }
.vw-advies__macro--koolhydraten { --vw-macro: var(--vw-macro-koolhydraten); }
.vw-advies__macro--vet { --vw-macro: var(--vw-macro-vet); }

.vw-advies__naam {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Smalle telefoon: kleurstip boven de naam, zodat "Koolhydraten" niet wordt afgekapt. */
@media (max-width: 479.98px) {
	.vw-advies__kaart {
		padding: 0.75rem 0.375rem;
	}

	.vw-advies__naam {
		flex-direction: column;
		gap: 4px;
	}
}

/* Kleurstip in de macrokleur, zoals in de ring. */
.vw-advies__naam::before {
	content: "";
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--vw-macro);
}

.vw-advies__kaart strong {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
}

.vw-advies__procent {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Vierde kaart: vezels, over de volle breedte, zonder berekening. */
.vw-advies__kaart.vw-advies__vezels {
	display: flex;
	grid-column: 1 / -1;
	align-items: flex-start;
	gap: 0.75rem;
	text-align: left;
}

.vw-advies__vezels-icoon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

.vw-advies__vezels-tekst {
	display: grid;
	gap: 0.25rem;
}

.vw-advies__vezels-kop {
	font-weight: 600;
}

.vw-advies__kaart .vw-advies__vezels-kop strong {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

.vw-advies__vezels-tekst small {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/* Mijn uitleg bij Eiwitrijk (alleen bij afvallen). */
.vw-advies__eiwit-advies {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.vw-advies__varianten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.vw-advies__pil {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.vw-advies__pil input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vw-advies__varianten-kop {
	width: 100%;
	margin: 0 0 8px;
	padding: 0;
	font-weight: 600;
}

/* Gekozen verdeling: rand primary dark, lichte achtergrond en een vinkje. */
.vw-advies__pil:has(input:checked) {
	gap: 6px;
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-light);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-dark);
}

.vw-advies__pil:has(input:checked)::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / contain;
	mask: var(--vw-icoon-vinkje) no-repeat center / contain;
}

.vw-advies__zelf {
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
}

.vw-advies__zelf-velden {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

.vw-advies__zelf-velden label {
	display: grid;
	gap: 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vw-advies__zelf-velden input {
	padding-right: 2rem !important;
}

.vw-advies__zelf-velden .vw-funnel__eenheid {
	right: 0.75rem;
}

.vw-advies__info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-advies__info span {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

.vw-advies__knop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 420px;
	min-height: 56px;
	margin-inline: auto !important;
	border-radius: var(--wp--custom--radius--pill);
	font-size: 1.0625rem;
}

@media (min-width: 600px) {
	.vw-advies__inhoud > .vw-funnel__titel,
	.vw-advies__inhoud > .vw-funnel__intro {
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.vw-advies {
		grid-template-columns: 360px minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--50);
	}

	.vw-advies__paneel {
		position: sticky;
		top: calc(24px + var(--vw-kop-zichtbaar, 0px));
		display: grid;
		gap: 1.25rem;
		padding: 32px;
		border-radius: var(--wp--custom--radius--lg);
		background-color: var(--wp--preset--color--primary-light);
	}

	.vw-advies__paneel-titel {
		margin: 0;
		font-family: var(--wp--preset--font-family--oswald);
		font-size: var(--wp--preset--font-size--x-large);
		font-weight: 600;
		line-height: 1.1;
		text-transform: uppercase;
	}

	.vw-advies__voedingsschema {
		display: grid;
		gap: 0.5rem;
		padding: 20px;
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--white);
		box-shadow: var(--wp--preset--shadow--md);
	}

	.vw-advies__voedingsschema > * {
		margin: 0;
	}

	.vw-advies__voedingsschema-label {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--small);
		font-weight: 600;
	}

	/* Rijen met icoon: ons advies (kcal) en de macro's. */
	.vw-advies__voedingsschema-rij {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.vw-advies__voedingsschema-label + .vw-advies__voedingsschema-rij {
		padding-top: 4px;
		border-top: 0;
	}

	.vw-advies__voedingsschema-rij::before {
		content: "";
		flex-shrink: 0;
		width: 24px;
		height: 24px;
		margin-top: 2px;
		background-color: var(--wp--preset--color--primary-dark);
		-webkit-mask: var(--vw-icoon) no-repeat center / contain;
		mask: var(--vw-icoon) no-repeat center / contain;
	}

	.vw-advies__voedingsschema-rij p {
		display: grid;
		gap: 2px;
		margin: 0;
		font-weight: 700;
		line-height: 1.35;
	}

	.vw-advies__heel {
		white-space: nowrap;
	}

	.vw-advies__voedingsschema-rij small {
		color: var(--wp--preset--color--text-muted);
		font-size: 13px;
		font-weight: 400;
	}
}

/* ==========================================================================
   Calculators (blok "Calculator") en doelbalk
   ========================================================================== */

.vw-calc {
	padding: clamp(1.25rem, 4vw, 2.5rem);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--lg);
}

.vw-calc__titel {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--x-large);
}

.vw-calc__form {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 600px) {
	.vw-calc__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.vw-calc__keuzes,
	.vw-calc__veld--breed,
	.vw-calc__knop {
		grid-column: 1 / -1;
	}
}

.vw-calc__veld {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.vw-calc__veld > label,
.vw-calc__veld > legend {
	display: block;
	margin-bottom: 0.375rem;
	padding: 0;
	font-weight: 600;
}

.vw-calc__invoer {
	position: relative;
}

.vw-calc input[type="text"],
.vw-calc select {
	width: 100%;
	min-height: 56px;
	box-sizing: border-box;
	padding: 0.875rem 3.5rem 0.875rem 1.25rem;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: max(16px, 1.0625rem);
}

.vw-calc select {
	padding-right: 1.25rem;
}

.vw-calc input[type="text"]:focus,
.vw-calc select:focus {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--white);
	outline: none;
}

.vw-calc [aria-invalid="true"] input[type="text"],
.vw-calc input[aria-invalid="true"] {
	border-color: #B3261E;
}

.vw-calc__eenheid {
	position: absolute;
	top: 50%;
	right: 1.25rem;
	transform: translateY(-50%);
	color: var(--wp--preset--color--text-muted);
	pointer-events: none;
}

.vw-calc__hint {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.vw-calc__fout {
	margin: 0.375rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: #B3261E;
}

/* Keuzes als knoppen (geslacht, werk, doel). */
.vw-calc__opties {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	gap: 0.5rem;
}

.vw-calc__optie {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0.5rem 1rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.vw-calc__optie input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.vw-calc__optie:hover {
	border-color: var(--wp--preset--color--primary);
}

.vw-calc__optie:has(input:checked) {
	border-color: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-calc__optie:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-calc__knop {
	width: 100%;
}

@media (min-width: 600px) {
	.vw-calc__knop {
		width: auto;
		justify-self: start;
	}
}

/* Uitslag. */
.vw-calc__uitslag {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	scroll-margin-top: 1rem;
}

.vw-calc__uitslag:focus {
	outline: none;
}

.vw-calc__uitslag-label {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--text-muted);
}

.vw-calc__getal {
	margin: 0.25rem 0 1rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1.05;
	color: var(--wp--preset--color--contrast);
}

.vw-calc__details > p,
.vw-calc__uitleg > p {
	margin: 0.5rem 0 0;
}

.vw-calc__waarschuwing {
	padding: 0.75rem 1rem;
	border-left: 4px solid #B3261E;
	border-radius: var(--wp--custom--radius--sm);
	background-color: #FBEDEC;
	font-weight: 600;
}

.vw-calc__let-op {
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* BMI-schaal: lichtgroen gezond, daarbuiten neutraal, vanaf obesitas donkerder. */
.vw-calc__schaal {
	position: relative;
	height: 12px;
	margin: 0.5rem 0 1.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background: linear-gradient(
		to right,
		var(--wp--preset--color--border) 0 var(--vw-gezond-van),
		var(--wp--preset--color--primary) var(--vw-gezond-van) var(--vw-gezond-tot),
		#E8D9B5 var(--vw-gezond-tot) var(--vw-obesitas),
		#D9B99B var(--vw-obesitas) 100%
	);
}

.vw-calc__schaal-punt {
	position: absolute;
	top: 50%;
	width: 22px;
	height: 22px;
	border: 4px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background-color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--sm);
	transform: translate(-50%, -50%);
}

/* ==========================================================================
   Boekenpagina's (/boeken/ en de boekpagina's). Sjabloon "Landingspagina".
   ========================================================================== */

/* Hero: schuine 3D-cover met een groene vorm erachter. */
.vw-boekhero {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--40);
}

.vw-boekcover {
	position: relative;
	isolation: isolate;
	max-width: 360px;
	margin: 0 auto;
}

.vw-boekcover::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 12% 4% 6% 8%;
	border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
	transform: rotate(-8deg);
}

.vw-boekcover img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(-4deg);
	transition: transform var(--wp--custom--transition);
}

.vw-boekhero .vw-boekcover:hover img {
	transform: rotate(-2deg) translateY(-4px);
}

.vw-boekcover--klein {
	max-width: 200px;
}

.vw-boekhero__tekst > * {
	margin-block: 0;
}

.vw-boekhero__tekst > * + * {
	margin-top: 1rem;
}

.vw-boekhero__titel {
	font-size: var(--wp--preset--font-size--display);
}

.vw-boekhero__belofte {
	max-width: 36ch;
}

@media (max-width: 781.98px) {
	.vw-boekhero .vw-boekcover {
		max-width: 230px;
	}

	.vw-boekhero__tekst {
		text-align: center;
	}

	.vw-boekhero__tekst .vw-pil,
	.vw-boekhero__belofte {
		margin-inline: auto;
	}

	.vw-boekhero__knoppen {
		justify-content: center;
	}
}

/* Sterrenbadge, prijs en kleine regels onder de knop. */
.vw-sterren {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* Vijf sterren, gevuld tot de score: class vw-sterren--45 is 4,5 sterren (40 tot 50). */
.vw-sterren::before {
	content: "\2605\2605\2605\2605\2605" / "";
	background: linear-gradient(90deg, var(--wp--preset--color--primary-dark) var(--vw-score, 100%), var(--wp--preset--color--border) 0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.125rem;
	letter-spacing: 0.1em;
	line-height: 1;
}
.vw-sterren--40 { --vw-score: 80%; }
.vw-sterren--41 { --vw-score: 82%; }
.vw-sterren--42 { --vw-score: 84%; }
.vw-sterren--43 { --vw-score: 86%; }
.vw-sterren--44 { --vw-score: 88%; }
.vw-sterren--45 { --vw-score: 90%; }
.vw-sterren--46 { --vw-score: 92%; }
.vw-sterren--47 { --vw-score: 94%; }
.vw-sterren--48 { --vw-score: 96%; }
.vw-sterren--49 { --vw-score: 98%; }


.vw-prijs {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.1;
}

.vw-boekhero__tekst .vw-prijs__noot,
.vw-boek-noot {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-boekhero__tekst .vw-prijs__noot {
	margin-top: 0.25rem;
}

/* Feitenstrip (blok Boekgegevens). */
.vw-feiten__lijst {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
}

@media (min-width: 782px) {
	.vw-feiten__lijst {
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
}

.vw-feiten__item {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: start;
}

.vw-feiten__item::before {
	content: "";
	grid-row: 1 / span 2;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

.vw-feiten__item dt {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vw-feiten__item dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* Op de telefoon: een oneven laatste item (meestal het ISBN) over de volle breedte. */
@media (max-width: 781.98px) {
	.vw-feiten__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

/* Herkenbare vraag. */
.vw-boek-vraag {
	text-align: center;
}

.vw-boek-vraag__kop {
	max-width: 22ch;
	margin-inline: auto;
	text-wrap: balance;
}

/* Wat je leert. */
.vw-leerkaarten {
	gap: var(--wp--preset--spacing--30);
}

.vw-leerkaart {
	height: 100%;
	gap: 0.75rem;
}

.vw-leerkaart > * {
	margin: 0;
}

/* Icoon bovenaan; kies het icoon met de class vw-icoon-<naam> op de kaart. */
.vw-leerkaart[class*="vw-icoon-"]::before {
	content: "";
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	margin-bottom: 0.25rem;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

/* ==========================================================================
   Paginasecties (inc/pagina-blokken.php): hero met mockup, stappen, prijskaarten.
   ========================================================================== */

/* Hero met mockup of vrijstaand beeld: geen uitsnede en geen afgeronde hoeken. */
.vw-hero__foto--vrij img {
	aspect-ratio: auto;
	object-fit: contain;
	border-radius: 0;
}

.vw-hero__stores {
	margin-top: 1.25rem;
}

@media (max-width: 781.98px) {
	.vw-hero__stores,
	.vw-hero__tekst .vw-sterren {
		justify-content: center;
	}
}

/* Genummerde stappen: het nummer komt uit een CSS-teller, dus volgorde aanpassen kan zonder hernummeren. */
.vw-stappen {
	gap: var(--wp--preset--spacing--30);
	counter-reset: vw-stap;
}

.vw-stap {
	height: 100%;
	counter-increment: vw-stap;
}

.vw-stap::before {
	content: counter(vw-stap);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.75rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.25rem;
	font-weight: 700;
}

.vw-stap > * {
	margin: 0;
}

.vw-stap > * + * {
	margin-top: 0.5rem;
}

/* Telefoon: nummer links naast de tekst, zoals de icoonkaarten. */
@media (max-width: 599.98px) {
	.vw-stappen {
		gap: 12px;
	}

	.vw-stap {
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 4px;
		padding: 18px !important;
	}

	.vw-stap::before {
		grid-row: 1 / span 2;
		margin: 0;
	}

	.vw-stap > * + * {
		margin-top: 0;
	}
}

/* Prijskaarten: naast elkaar vanaf ongeveer 600px, de uitgelichte kaart met een donkergroene rand.
   auto-fit: twee kaarten vullen samen de breedte, zonder lege kolom ernaast. */
.vw-prijskaarten {
	gap: var(--wp--preset--spacing--30);
}

.vw-prijskaarten.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

/* Productbeeld boven de prijskaarten (op /app/): gecentreerd, niet breder dan nodig. */
.wp-block-image.vw-productbeeld {
	max-width: 520px;
	margin-inline: auto !important;
}

.wp-block-image.vw-productbeeld img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
}

/* Precies vier icoonkaarten: op desktop 2 x 2 in plaats van 3 + 1. */
@media (min-width: 782px) {
	.vw-leerkaarten.is-layout-grid:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vw-prijskaart {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
}

.vw-prijskaart > * {
	margin: 0;
}

.vw-prijskaart--uitgelicht {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary-dark);
}

.vw-prijskaart__prijs {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.vw-prijskaart__per {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 400;
}

.vw-prijskaart__noot {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-prijskaart__knoppen {
	margin-top: auto !important;
	padding-top: 0.75rem;
}

.vw-prijskaart__knoppen .wp-block-button,
.vw-prijskaart__knoppen .wp-block-button__link {
	width: 100%;
}

.vw-prijskaart__knoppen .wp-block-button__link {
	min-height: 48px;
	justify-content: center;
	text-align: center;
}

/* Besparing tegenover per maand betalen (eerlijke ankerprijs, geen doorgestreepte prijs). */
.vw-prijskaart__besparing {
	justify-self: start;
	width: fit-content;
	margin: 0.25rem 0 0 !important;
	padding: 2px 12px;
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--primary-darker);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Eén knop onder de kaarten: de looptijd kies je bij het afrekenen. */
.vw-prijskaarten__knop {
	justify-content: center;
	margin-top: var(--wp--preset--spacing--40) !important;
}

.vw-prijskaarten__onder {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

/* Ankerprijs: de normale prijs doorgestreept vóór de actieprijs. */
.vw-prijskaart__was {
	margin-right: 0.35rem;
	color: var(--wp--preset--color--text-muted);
	font-size: 1.25rem;
	font-weight: 400;
	text-decoration-thickness: 2px;
}

/* Reviews. De uitgelichte review (gesynchroniseerd patroon "Review uitgelicht") is een grote witte kaart
   met een groot aanhalingsteken; de gewone reviews zijn lichte kaarten naast elkaar. */
.vw-reviews {
	gap: var(--wp--preset--spacing--30);
}

.vw-reviews.is-layout-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.vw-review {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	height: 100%;
}

.vw-review > * {
	margin: 0;
}

.vw-review__tekst {
	flex-grow: 1;
}

.vw-review__wie {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-review__wie strong {
	color: var(--wp--preset--color--contrast);
}

.vw-review--uitgelicht {
	position: relative;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--primary), var(--wp--preset--shadow--md);
}

.vw-review--uitgelicht::before {
	content: "\201C";
	position: absolute;
	top: 0.25rem;
	right: 1.25rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 6rem;
	line-height: 1;
	pointer-events: none;
}

.vw-review--uitgelicht .vw-review__tekst {
	font-weight: 600;
	line-height: 1.45;
}

.vw-review--uitgelicht .vw-sterren::before {
	font-size: 1.5rem;
}

/* Inkijkje: pagina's naast elkaar, swipen op de telefoon. */
.vw-inkijk__hint {
	color: var(--wp--preset--color--text-muted);
}

.wp-block-gallery.has-nested-images.vw-inkijk {
	flex-wrap: nowrap;
	gap: 1rem;
	padding-bottom: 0.75rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--wp--preset--color--primary) transparent;
}

.wp-block-gallery.has-nested-images.vw-inkijk figure.wp-block-image:not(#individual-image) {
	flex: 0 0 66%;
	width: auto;
	margin: 0;
	scroll-snap-align: start;
}

@media (min-width: 600px) {
	.wp-block-gallery.has-nested-images.vw-inkijk figure.wp-block-image:not(#individual-image) {
		flex-basis: 36%;
	}
}

@media (min-width: 1024px) {
	.wp-block-gallery.has-nested-images.vw-inkijk figure.wp-block-image:not(#individual-image) {
		flex-basis: 22%;
	}
}

.wp-block-gallery.has-nested-images.vw-inkijk figure.wp-block-image img {
	/* Vaste vorm, hele pagina zichtbaar: boeken met een andere paginaverhouding worden niet bijgesneden. */
	aspect-ratio: 0.72;
	height: auto;
	object-fit: contain;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--white);
}

/* Lezersquotes. */
.vw-lezersquotes {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-quote.vw-lezersquote {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	margin: 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary-light);
}

.wp-block-quote.vw-lezersquote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

.wp-block-quote.vw-lezersquote cite {
	margin-top: auto;
	font-style: normal;
	font-weight: 600;
}

/* Waarom ik dit boek schreef. */
.vw-boek-waarom .vw-over__foto img {
	aspect-ratio: 4 / 5;
	object-position: 50% 20%;
}

@media (max-width: 781.98px) {
	.vw-boek-waarom .vw-over__foto {
		max-width: 320px;
		margin-inline: auto;
	}
}

.vw-handtekening {
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 500;
	text-transform: uppercase;
}

/* Veelgestelde vragen. */
.vw-faq > .wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-faq > .wp-block-details:first-child {
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-faq summary {
	position: relative;
	display: block;
	min-height: 44px;
	padding: 1.125rem 2.5rem 1.125rem 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.vw-faq summary::-webkit-details-marker {
	display: none;
}

.vw-faq summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-darker);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform var(--wp--custom--transition);
}

.vw-faq details[open] summary::after {
	transform: rotate(45deg);
}

.vw-faq summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-faq details > :not(summary) {
	margin-top: 0;
	padding-bottom: 1.25rem;
}

/* Herhaalde koopknop. */
.vw-boek-koop > .wp-block-columns > .wp-block-column > * {
	margin-block: 0;
}

.vw-boek-koop > .wp-block-columns > .wp-block-column > * + * {
	margin-top: 1rem;
}

@media (max-width: 781.98px) {
	.vw-boek-koop {
		text-align: center;
	}

	.vw-boek-koop .wp-block-buttons {
		justify-content: center;
	}
}

/* Boekenoverzicht: kop en grote kaarten. */
.vw-boeken-kop > * {
	margin-block: 0;
}

.vw-boeken-kop > * + * {
	margin-top: 1rem;
}

.vw-boeken-intro {
	max-width: 40ch;
}

.vw-boekenkaart + .vw-boekenkaart {
	margin-top: var(--wp--preset--spacing--40);
}

.vw-boekenkaart .wp-block-column > * {
	margin-block: 0;
}

.vw-boekenkaart .wp-block-column > * + * {
	margin-top: 1rem;
}

.vw-boekenkaart .vw-boekcover {
	max-width: 300px;
}

@media (max-width: 781.98px) {
	.vw-boekenkaart .vw-boekcover {
		max-width: 220px;
	}
}

.vw-vinkjes {
	padding: 0;
	list-style: none;
}

.vw-vinkjes li {
	position: relative;
	padding-left: 2rem;
}

.vw-vinkjes li + li {
	margin-top: 0.5rem;
}

.vw-vinkjes li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 22px;
	height: 22px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / contain;
	mask: var(--vw-icoon-vinkje) no-repeat center / contain;
}

/* Koopbalk: vast onderin op de telefoon, verborgen op grotere schermen. */
.vw-koopbalk {
	display: none !important;
}

@media (max-width: 781.98px) {
	.vw-koopbalk {
		position: fixed;
		z-index: 40;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex !important;
		align-items: center;
		gap: 1rem;
		margin: 0 !important;
		padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom));
		border-top: 1px solid var(--wp--preset--color--border);
		background-color: var(--wp--preset--color--white);
		box-shadow: 0 -8px 24px rgba(42, 46, 37, 0.08);
		transition: transform var(--wp--custom--transition);
	}

	.vw-koopbalk.is-verborgen {
		transform: translateY(110%);
	}

	.vw-koopbalk > * {
		margin: 0 !important;
	}

	.vw-koopbalk__prijs {
		font-family: var(--wp--preset--font-family--oswald);
		font-size: var(--wp--preset--font-size--large);
		font-weight: 600;
		line-height: 1.15;
	}

	.vw-koopbalk__info {
		min-width: 0;
	}

	.vw-koopbalk__info > * {
		margin: 0;
	}

	.vw-koopbalk__noot {
		color: var(--wp--preset--color--text-muted);
		font-size: var(--wp--preset--font-size--x-small);
		line-height: 1.35;
	}

	.vw-koopbalk .wp-block-buttons {
		flex-shrink: 0;
	}

	/* Ruimte zodat de balk de footer niet afdekt. */
	body:has(.vw-koopbalk) .vw-site-footer {
		padding-bottom: 88px;
	}
}

/* ==========================================================================
   Mobile-first audit (390px): tikdoelen van minimaal 44px en compactere secties.
   ========================================================================== */

/* Links in koppen (oude blogs): groter tikvlak zonder de opmaak te verschuiven. */
.vw-content :where(h2, h3, h4) a {
	display: inline-block;
	padding-block: 13px;
	margin-block: -13px;
}

/* Lightbox-knop van WordPress: groter tikdoel. */
.wp-lightbox-container button.lightbox-trigger {
	width: 44px;
	height: 44px;
}

/* Kaarttitels: groter tikvlak zonder de opmaak te verschuiven; de hele kaart is klikbaar. */
.vw-postkaart {
	position: relative;
}

.vw-postkaart__body .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vw-postkaart__body .wp-block-post-title a {
	display: block;
	padding-block: 10px;
	margin-block: -10px;
}

@media (max-width: 599.98px) {
	/* "Lees ook", "Populair" en de 404-suggesties: een compacte lijst in plaats van grote kaarten. */
	.vw-meer .vw-postkaart,
	.vw-sectie .vw-postgrid .vw-postkaart {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		align-items: center;
		height: auto;
	}

	.vw-meer .vw-postkaart__beeld img,
	.vw-sectie .vw-postgrid .vw-postkaart__beeld img,
	.vw-meer .vw-postkaart:not(:has(.vw-postkaart__beeld))::before,
	.vw-sectie .vw-postgrid .vw-postkaart:not(:has(.vw-postkaart__beeld))::before {
		aspect-ratio: 1;
		height: 100%;
	}

	.vw-meer .vw-postkaart__body,
	.vw-sectie .vw-postgrid .vw-postkaart__body {
		padding: 12px 14px;
		gap: 0.25rem;
	}

	.vw-meer .vw-postkaart .wp-block-post-title,
	.vw-sectie .vw-postgrid .vw-postkaart .wp-block-post-title {
		font-size: 1.0625rem !important;
	}

	.vw-meer .vw-postkaart .wp-block-read-more,
	.vw-sectie .vw-postgrid .vw-postkaart .wp-block-read-more {
		display: none;
	}

	.vw-meer .vw-postgrid,
	.vw-sectie .vw-postgrid {
		gap: 12px;
	}

	/* Doelkaarten: foto klein links, tekst rechts. */
	.vw-fotokaart {
		display: grid !important;
		grid-template-columns: 88px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 6px;
		align-content: start;
		padding: 16px !important;
	}

	.vw-fotokaart > * {
		grid-column: 2;
	}

	.vw-fotokaart > .vw-fotokaart__foto {
		grid-column: 1;
		grid-row: 1 / span 4;
		margin: 0 !important;
	}

	.vw-fotokaart__foto img {
		aspect-ratio: 1;
		border-radius: var(--wp--custom--radius--sm);
	}

	.vw-fotokaart .wp-block-heading {
		font-size: 1.25rem !important;
	}

	.vw-doelen {
		gap: 12px !important;
	}

	/* Boekpagina: kleinere cover in de hero, portret vierkant, leerkaarten met het icoon naast de tekst. */
	.vw-boekhero .vw-boekcover {
		max-width: 180px;
	}

	.vw-boek-waarom .vw-over__foto {
		max-width: 220px;
	}

	.vw-boek-waarom .vw-over__foto img {
		aspect-ratio: 1;
	}

	.vw-leerkaart {
		display: grid !important;
		grid-template-columns: 32px minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 4px;
		padding: 18px !important;
	}

	.vw-leerkaart[class*="vw-icoon-"]::before {
		grid-row: 1 / span 2;
		margin: 0;
	}

	.vw-leerkaarten {
		gap: 12px;
	}
}

/* ==========================================================================
   Gratis tools: toolkaarten en het blok "Leer etiketten lezen"
   ========================================================================== */

.vw-toolkaarten {
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 768px) {
	.vw-toolkaarten.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Icoon in een wit rondje (kies het met vw-icoon-<naam>). De hele kaart is tikbaar: de link van de knop
   ligt over de kaart heen. */
.vw-toolkaart {
	position: relative;
	height: 100%;
	gap: 0.75rem;
	transition: transform var(--vw-beweging-kort) var(--vw-beweging-curve), box-shadow var(--vw-beweging-kort) var(--vw-beweging-curve);
}

.vw-toolkaart > * {
	margin: 0;
}

.vw-toolkaart[class*="vw-icoon-"]::before {
	content: "";
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	-webkit-mask: none;
	mask: none;
}

.vw-toolkaart[class*="vw-icoon-"]::after {
	content: "";
	position: absolute;
	/* Midden in het witte rondje: de padding van Kaart licht plus 14px. */
	top: calc(clamp(1.5rem, 4vw, 2.5rem) + 14px);
	left: calc(clamp(1.5rem, 4vw, 2.5rem) + 14px);
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
	pointer-events: none;
}

.vw-toolkaart .wp-block-buttons {
	margin-top: auto;
}

.vw-toolkaart .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.vw-toolkaart:has(.wp-block-button__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.vw-toolkaart:hover {
		box-shadow: var(--wp--preset--shadow--md);
		transform: translateY(-3px);
	}
}

/* Groter blok "Leer etiketten lezen": lijnicoon in een wit rondje, net als de toolkaarten. */
.vw-etiketblok {
	--vw-icoon: url(assets/icons/etiket.svg);
	position: relative;
	display: grid;
	gap: 0.75rem;
	align-items: center;
}

.vw-etiketblok > * {
	margin: 0;
}

.vw-etiketblok::before {
	content: "";
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
}

/* Het icoon midden in het rondje: de padding van Kaart licht plus 14px. */
.vw-etiketblok::after {
	content: "";
	position: absolute;
	top: calc(clamp(1.5rem, 4vw, 2.5rem) + 14px);
	left: calc(clamp(1.5rem, 4vw, 2.5rem) + 14px);
	width: 28px;
	height: 28px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
	pointer-events: none;
}

@media (min-width: 768px) {
	.vw-etiketblok {
		grid-template-columns: 56px 1fr;
		column-gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.vw-etiketblok::before {
		grid-row: 1 / span 4;
	}
}

/* ==========================================================================
   Interactief etiket (blok "Etiket")
   ========================================================================== */

.vw-etiket {
	--vw-etiket-rand: #2A2E25;
	margin-block: var(--wp--preset--spacing--40);
}

.vw-etiket__hint {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-etiket:not(.is-interactief) .vw-etiket__hint,
.vw-etiket:not(.is-interactief) .vw-etiket__punt,
.vw-etiket:not(.is-interactief) .vw-etiket__uitleg {
	display: none;
}

.vw-etiket__raam {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.vw-etiket__pak {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

@media (min-width: 768px) {
	.vw-etiket__pak {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.vw-etiket__raam {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}

	.vw-etiket__pak {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1280px) {
	.vw-etiket__pak {
		grid-template-columns: 2fr 3fr;
	}
}

/* Voorkant: een verpakking in primary, met merk, naam, claims en de Nutri-Score. */
.vw-etiket__voor {
	display: grid;
	gap: 0.75rem;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.vw-etiket__voor p {
	margin: 0;
}

.vw-etiket__merk {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vw-etiket__naam {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
}

.vw-etiket__gewicht {
	justify-self: end;
	font-weight: 600;
}

.vw-etiket__claims {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.vw-etiket__claim {
	padding: 4px 12px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	font-weight: 700;
}

.vw-etiket__claims small {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--x-small);
}

.vw-etiket__nutri-schaal {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
}

.vw-etiket__nutri-schaal span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 30px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 600;
}

.vw-etiket__nutri-schaal span:nth-child(1) { background: #2F7A4A; border-radius: 6px 0 0 6px; }
.vw-etiket__nutri-schaal span:nth-child(2) { background: #73A646; }
.vw-etiket__nutri-schaal span:nth-child(3) { background: #E1BC3A; color: var(--wp--preset--color--contrast); }
.vw-etiket__nutri-schaal span:nth-child(4) { background: #D9822B; }
.vw-etiket__nutri-schaal span:nth-child(5) { background: #C4502A; border-radius: 0 6px 6px 0; }

.vw-etiket__nutri-schaal span.is-score {
	width: 38px;
	height: 40px;
	margin: -5px 0;
	border-radius: 8px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--white);
	font-size: 1.25rem;
}

/* Achterkant: een wit etiket zoals in de winkel, met de tabel. */
.vw-etiket__achter {
	display: grid;
	gap: 0.75rem;
	padding: 1rem;
	border: 2px solid var(--vw-etiket-rand);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.vw-etiket__achter p {
	margin: 0;
}

.vw-etiket__kopje {
	font-weight: 700;
}

.vw-etiket__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.vw-etiket__tabel caption {
	padding: 0 0 6px;
	font-weight: 700;
	text-align: left;
}

.vw-etiket__tabel th,
.vw-etiket__tabel td {
	height: 44px;
	padding: 4px 6px;
	border-top: 1px solid var(--vw-etiket-rand);
	text-align: right;
	vertical-align: middle;
}

.vw-etiket__tabel thead th {
	border-top: 0;
	border-bottom: 3px solid var(--vw-etiket-rand);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.vw-etiket__tabel thead th {
		white-space: nowrap;
	}
}

.vw-etiket__tabel th[scope="row"] {
	font-weight: 600;
	text-align: left;
}

.vw-etiket__tabel td {
	white-space: nowrap;
}

.vw-etiket__tabel th[scope="row"].is-sub {
	padding-left: 1rem;
	font-weight: 400;
}

.vw-etiket__tabel :is(th, td):first-child {
	padding-left: 0;
	text-align: left;
}

/* Onderdelen met een nummer: rand en lichte achtergrond als ze gekozen zijn. */
.vw-etiket__deel {
	position: relative;
	border-radius: 8px;
	transition: background-color var(--vw-beweging-kort) ease, box-shadow var(--vw-beweging-kort) ease;
}

div.vw-etiket__deel {
	padding: 6px 44px 6px 6px;
	margin: -6px;
}

.vw-etiket__deel.is-actief:not(thead, tr) {
	background: var(--wp--preset--color--primary-light);
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary-dark);
}

.vw-etiket__voor .vw-etiket__deel.is-actief {
	background: rgba(255, 255, 255, 0.45);
}

:is(thead, tr).vw-etiket__deel.is-actief > * {
	background: var(--wp--preset--color--primary-light);
	box-shadow: inset 0 2px 0 var(--wp--preset--color--primary-dark), inset 0 -2px 0 var(--wp--preset--color--primary-dark);
}

/* Genummerde knop: 28px zichtbaar, 44px tikvlak. */
.vw-etiket__punt {
	position: relative;
	display: inline-grid;
	flex-shrink: 0;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0 8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-dark);
	box-shadow: 0 0 0 2px var(--wp--preset--color--white);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
	touch-action: manipulation;
}

.vw-etiket__punt::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
}

div.vw-etiket__deel > .vw-etiket__punt {
	position: absolute;
	top: 6px;
	right: 6px;
	margin: 0;
}

.vw-etiket__punt.is-actief {
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--contrast);
}

.vw-etiket__punt:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.vw-etiket__punt:hover {
		background: var(--wp--preset--color--primary-darker);
	}
}

/* Uitlegvlak: mobiel vast onderin (schuift omhoog), vanaf 1024px plakkend naast het etiket. */
.vw-etiket__uitleg {
	padding: 1.25rem;
	background: var(--wp--preset--color--white);
}

.vw-etiket__uitleg p {
	margin: 0 0 0.75rem;
}

.vw-etiket__uitleg-balk {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.vw-etiket__uitleg-nr {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.vw-etiket__uitleg .vw-etiket__uitleg-nr {
	margin: 0;
}

.vw-etiket__uitleg-kop {
	margin: 0.25rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.vw-etiket__uitleg-kop:focus {
	outline: none;
}

.vw-etiket__uitleg-tekst {
	font-size: 1rem;
	line-height: 1.6;
}

.vw-etiket__uitleg-tekst > :last-child {
	margin-bottom: 0;
}

.vw-etiket__uitleg-nav {
	display: flex;
	gap: 0.5rem;
	margin-top: 1rem;
}

.vw-etiket__stap {
	flex: 1;
	min-height: 44px;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.vw-etiket__stap:focus-visible,
.vw-etiket__sluit:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-etiket__sluit {
	width: 44px;
	height: 44px;
	margin: -10px -10px -10px 0;
	padding: 0;
	border: 0;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: var(--vw-icoon-sluiten) no-repeat center / 22px;
	mask: var(--vw-icoon-sluiten) no-repeat center / 22px;
	cursor: pointer;
}

@media (max-width: 1023.98px) {
	.vw-etiket__uitleg {
		position: fixed;
		z-index: 80;
		right: 0;
		bottom: 0;
		left: 0;
		max-height: 45vh;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 32px rgba(42, 46, 37, 0.18);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform var(--vw-beweging-kort) var(--vw-beweging-curve), visibility 0s linear var(--vw-beweging-kort);
	}

	.vw-etiket__uitleg.is-open {
		transform: none;
		visibility: visible;
		transition: transform var(--vw-beweging-kort) var(--vw-beweging-curve), visibility 0s;
	}

	.vw-etiket__uitleg-leeg {
		display: none;
	}
}

@media (min-width: 1024px) {
	.vw-etiket__uitleg {
		position: sticky;
		top: calc(var(--vw-kop-hoogte, 140px) + 1rem);
		border-radius: var(--wp--custom--radius--lg);
		background: var(--wp--preset--color--primary-light);
	}

	.vw-etiket__sluit {
		background-color: var(--wp--preset--color--text-muted);
	}
}

/* De uitleg als uitklappers onder het etiket (ook zonder JS leesbaar). */
.vw-etiket-uitleggen {
	margin-top: var(--wp--preset--spacing--30);
}

/* Checklist voor in de supermarkt: vinkjes in plaats van bolletjes. */
.vw-checklist {
	padding: 0;
	list-style: none;
}

.vw-checklist li {
	position: relative;
	margin: 0 0 0.75rem;
	padding-left: 2.25rem;
}

.vw-checklist li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-dark);
	-webkit-mask: radial-gradient(circle, #000 70%, transparent 71%);
	mask: radial-gradient(circle, #000 70%, transparent 71%);
}

.vw-checklist li::after {
	content: "";
	position: absolute;
	top: calc(0.1em + 5px);
	left: 5px;
	width: 14px;
	height: 14px;
	background: var(--wp--preset--color--white);
	-webkit-mask: var(--vw-icoon-vinkje) no-repeat center / contain;
	mask: var(--vw-icoon-vinkje) no-repeat center / contain;
}

/* ==========================================================================
   Beweging: secties schuiven rustig in beeld (assets/js/beweging.js) en foto's worden iets groter
   bij hover. Alleen transform en opacity. Niets bij "minder beweging" (dan draait het script niet).
   ========================================================================== */

:root {
	--vw-beweging-duur: 400ms;
	--vw-beweging-kort: 250ms;
	--vw-beweging-afstand: 12px;
	--vw-beweging-curve: cubic-bezier(0.2, 0, 0, 1);
	--vw-beweging-zoom: 1.04;
}

@media (min-width: 768px) {
	:root {
		--vw-beweging-duur: 600ms;
		--vw-beweging-afstand: 24px;
	}
}

.vw-onthul,
.vw-onthul .vw-onthul-kind {
	opacity: 0;
	transform: translate3d(0, var(--vw-beweging-afstand), 0);
	transition: opacity var(--vw-beweging-duur) var(--vw-beweging-curve), transform var(--vw-beweging-duur) var(--vw-beweging-curve);
}

.vw-onthul .vw-onthul-kind {
	transition-delay: var(--vw-vertraging, 0ms);
}

.vw-onthul.is-zichtbaar,
.vw-onthul.is-zichtbaar .vw-onthul-kind {
	opacity: 1;
	transform: none;
}

/* Foto's iets groter bij hover, alleen met een muis. De figure snijdt af, met dezelfde afronding. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	:is(.vw-hero__foto:not(.vw-hero__foto--vrij), .vw-fotokaart__foto, .vw-over__foto, .vw-uitgelicht, .vw-content .wp-block-image:not(.is-style-zonder-frame)) {
		overflow: hidden;
		border-radius: var(--wp--custom--radius--md);
	}

	:is(.vw-hero__foto:not(.vw-hero__foto--vrij), .vw-over__foto, .vw-uitgelicht) {
		border-radius: var(--wp--custom--radius--lg);
	}

	:is(.vw-hero__foto:not(.vw-hero__foto--vrij), .vw-fotokaart__foto, .vw-over__foto, .vw-uitgelicht, .vw-content .wp-block-image:not(.is-style-zonder-frame)) img {
		transition: transform 500ms var(--vw-beweging-curve);
	}

	:is(.vw-hero__foto:not(.vw-hero__foto--vrij), .vw-fotokaart__foto, .vw-over__foto, .vw-uitgelicht, .vw-content .wp-block-image:not(.is-style-zonder-frame)):hover img,
	.vw-fotokaart:hover .vw-fotokaart__foto img {
		transform: scale(var(--vw-beweging-zoom));
	}
}

/* ==========================================================================
   Na betaling (sjabloon "Na betaling", /welkom/): focusmodus met alleen het logo,
   één smalle kolom, de stappen onder elkaar met het nummer links. Mobiel eerst.
   ========================================================================== */

.vw-focusbalk {
	display: flex;
	justify-content: center;
	padding: 8px var(--wp--style--root--padding-left);
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--white);
}

.vw-focusbalk .vw-logo {
	margin: 0;
}

.vw-focusbalk .vw-logo a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.vw-focusbalk .vw-logo img {
	display: block;
	width: auto;
	height: 36px;
}

.vw-na-betaling {
	--wp--style--global--content-size: 640px;
	--wp--style--global--wide-size: 640px;
	margin: 0 !important;
	padding-bottom: var(--wp--preset--spacing--60);
}

.vw-na-betaling .vw-sectie {
	padding-top: var(--wp--preset--spacing--50);
}

.vw-na-betaling .vw-welkom__intro {
	padding-top: var(--wp--preset--spacing--40);
}

/* De pil is fit-content met margin 0: in de smalle kolom links uitlijnen met de rest. */
.vw-na-betaling .vw-welkom__intro > .vw-pil {
	margin-left: max(0px, calc((100% - 640px) / 2)) !important;
}

.vw-na-betaling .vw-welkom__intro > .vw-kop-duo {
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.vw-na-betaling .vw-kop-duo__licht {
	display: inline;
}

/* De warme zin van Leroy: klein portret links, tekst rechts. */
.vw-welkom__leroy {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin-top: var(--wp--preset--spacing--30);
}

.vw-welkom__leroy:not(:has(.vw-welkom__portret)) {
	grid-template-columns: minmax(0, 1fr);
}

.vw-welkom__portret {
	margin: 0;
}

.vw-welkom__portret img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.vw-welkom__tekst > * {
	margin: 0;
}

.vw-welkom__naam {
	margin-top: 0.25rem !important;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

/* Welkomstvideo en YouTube in blogs: 16:9, eigen startknop; de speler van YouTube komt pas na een tik. */
.vw-video-embed > .vw-video {
	margin-top: 0;
}

.vw-video {
	margin: var(--wp--preset--spacing--40) 0 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	aspect-ratio: 16 / 9;
	background-color: var(--wp--preset--color--primary-light);
}

.vw-video__start {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	padding: 1rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	cursor: pointer;
	touch-action: manipulation;
}

.vw-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vw-video__start.has-poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0) 60%);
}

.vw-video__knop {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	transition: transform var(--wp--custom--transition);
}

.vw-video__start:hover .vw-video__knop {
	transform: scale(1.05);
}

.vw-video__start:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: -3px;
}

.vw-video__label {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vw-video__noot {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.vw-video__start.has-poster .vw-video__label {
	color: var(--wp--preset--color--white);
}

.vw-video__speler,
.vw-video__eigen {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background-color: #000;
}

/* Stappen: altijd onder elkaar, het nummer links naast de tekst. */
.vw-welkom__stappen {
	display: grid;
	gap: 12px;
}

.vw-welkom__stappen > .vw-stap {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 4px;
	height: auto;
	margin: 0;
	padding: 18px !important;
}

.vw-welkom__stappen > .vw-stap::before {
	grid-row: 1 / span 2;
	margin: 0;
}

.vw-welkom__stappen > .vw-stap > * {
	grid-column: 2;
}

.vw-welkom__stappen > .vw-stap > * + * {
	margin-top: 0;
}

.vw-welkom__stappen > .vw-stap > .wp-block-heading {
	align-self: center;
	min-height: 40px;
	display: flex;
	align-items: center;
}

/* Storebadges (dezelfde als in de app-banner op de homepage): 48px hoog, naast elkaar, tikdoel 48px. */
.vw-welkom__stores {
	gap: 12px;
	margin-top: 0.75rem !important;
}

.vw-badge {
	margin: 0;
}

.vw-badge a {
	display: block;
	border-radius: 8px;
}

.vw-badge img {
	display: block;
	width: auto;
	height: 48px;
}

.vw-badge a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

/* Zo werkt de app: de uitlegvideo en de handleiding. */
.vw-welkom__app > .vw-kop-duo {
	margin-bottom: 0.5rem;
}

.vw-welkom__app > * + * {
	margin-top: 1rem;
}

/* Blok "PDF bekijken": op de telefoon twee knoppen onder elkaar; vanaf 782px een voorbeeld erboven (view.js). */
.vw-pdf__knoppen {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vw-pdf__knoppen .wp-element-button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: 48px;
	text-align: center;
}

.vw-pdf__download {
	border: 1.5px solid var(--wp--preset--color--contrast);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.vw-pdf__download:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.vw-pdf__grootte {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.vw-pdf__voorbeeld {
	display: block;
	width: 100%;
	height: 640px;
	margin-bottom: 12px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
}

@media (min-width: 600px) {
	.vw-pdf__knoppen {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Thumbnail van de videocursus in de bonuskaart. */
.vw-welkom__bonus-beeld {
	margin: 0 0 1rem !important;
}

.vw-welkom__bonus-beeld img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--radius--md);
	object-fit: cover;
}

.vw-welkom__bonus > * {
	margin: 0;
}

.vw-welkom__bonus > * + * {
	margin-top: 0.75rem;
}

.vw-welkom__vragen p {
	line-height: 2;
	overflow-wrap: anywhere;
}

/* ==========================================================================
   Voedingsdatabank (NEVO): /calorieen/ (blok Calorie-zoeker) en de productpagina's (blok Voedingswaarde).
   Mobiel eerst. Macrokleuren zoals de macroring van de onboarding (--vw-macro-*).
   ========================================================================== */

.vw-zoeker-hero {
	padding: 28px 22px;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-zoeker-hero > .vw-kop-duo {
	margin: 10px 0 8px;
}

.vw-zoeker-hero > p:not(.vw-pil) {
	max-width: 34rem;
	margin: 0 0 18px;
}

.vw-zoeker__form,
.vw-zoeker__anker {
	position: relative;
}

.vw-zoeker__veld {
	position: relative;
}

.vw-zoeker__veld svg {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 22px;
	height: 22px;
	color: var(--wp--preset--color--primary-dark);
	transform: translateY(-50%);
	pointer-events: none;
}

.vw-zoeker__veld input {
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	padding: 0 16px 0 50px;
	border: 2px solid var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	font: inherit;
	font-size: max(16px, 1.0625rem);
	scroll-margin-top: 90px;
}

.vw-zoeker__veld input:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Suggesties (combobox). */
.vw-zoeker__suggesties {
	position: absolute;
	z-index: 60;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	max-height: min(70vh, 560px);
	margin: 0;
	padding: 6px;
	overflow-y: auto;
	list-style: none;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 20px;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 18px 40px rgb(31 35 24 / 0.14);
	text-align: left;
}

.vw-zoeker__suggesties[hidden] {
	display: none;
}

.vw-zoeker__suggesties--header {
	right: auto;
	left: auto;
	width: min(92vw, 420px);
	inset-inline-end: 0;
}

.vw-zoeker__optie {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px 12px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 14px;
	cursor: pointer;
}

.vw-zoeker__optie:hover,
.vw-zoeker__optie[aria-selected="true"] {
	background-color: var(--wp--preset--color--primary-light);
}

.vw-zoeker__optie[aria-selected="true"] {
	outline: 2px solid var(--wp--preset--color--primary);
}

.vw-zoeker__naam {
	font-weight: 600;
	line-height: 1.3;
}

.vw-zoeker__naam mark {
	background: none;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline 2px var(--wp--preset--color--primary);
	text-underline-offset: 3px;
}

.vw-zoeker__groep {
	margin-left: 6px;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.vw-zoeker__kcal {
	grid-row: 1 / span 2;
	grid-column: 2;
	align-self: center;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.vw-zoeker__kcal small {
	display: block;
	margin-top: 2px;
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.75rem;
	font-weight: 400;
}

.vw-zoeker__macros {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.vw-zoeker__macros span + span::before {
	content: " · ";
	color: var(--wp--preset--color--text-muted);
}

.vw-zoeker__portie {
	grid-column: 1 / -1;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.8125rem;
}

/* Kennisbank-treffer (stof, klacht, e-nummer) bovenaan de header-zoeker: één regel, scheidingslijn naar de producten. */
.vw-zoeker__optie--kennisbank {
	display: flex;
	align-items: center;
}

.vw-zoeker__optie--kennisbank + .vw-zoeker__optie:not(.vw-zoeker__optie--kennisbank) {
	margin-top: 4px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-zoeker__optie--artikelen {
	display: flex;
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--border);
	border-radius: 0 0 14px 14px;
}

.vw-zoeker__leeg,
.vw-zoeker__voet {
	padding: 10px 14px 6px;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.8125rem;
}

.vw-zoeker__voet {
	margin-top: 4px;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-zoeker__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.vw-zoeker__chips a,
.vw-zoeker__groepen a,
.vw-nevo__tools a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background-color: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
}

.vw-zoeker__chips a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--wp--custom--radius--pill);
	font-weight: 500;
}

.vw-zoeker__groepen,
.vw-nevo__tools {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 28px;
}

.vw-zoeker__groepen a,
.vw-nevo__tools a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 56px;
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--md);
	font-weight: 600;
	line-height: 1.3;
}

.vw-zoeker__groepen small,
.vw-nevo__tools small {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

.vw-zoeker__chips a:hover,
.vw-zoeker__groepen a:hover,
.vw-nevo__tools a:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

.vw-zoeker__alle {
	margin-top: 10px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--white);
}

.vw-zoeker__alle summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.vw-zoeker__alle summary::-webkit-details-marker {
	display: none;
}

.vw-zoeker__alle[open] summary span {
	transform: rotate(45deg);
}

.vw-zoeker__alle .vw-zoeker__groepen {
	margin: 0;
	padding: 0 10px 10px;
}

.vw-zoeker__uitkomst {
	margin-top: 24px;
}

.vw-zoeker__lijst {
	display: grid;
	gap: 6px;
	margin: 12px 0;
	padding: 0;
	list-style: none;
}

.vw-zoeker__lijst a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 8px 14px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 14px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vw-zoeker__lijst b {
	flex: none;
	font-family: var(--wp--preset--font-family--oswald);
	font-weight: 600;
}

.vw-zoeker__lijst small {
	color: var(--wp--preset--color--text-muted);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 400;
}

/* Productpagina. */
.vw-calorie {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
	padding: 24px var(--wp--style--root--padding-left) 48px;
}

.vw-nevo {
	--vw-nevo-rand: var(--wp--preset--color--border);
	display: grid;
	gap: 28px;
}

.vw-nevo__kruimel {
	margin: 0 0 -16px;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.875rem;
}

.vw-nevo__kruimel a {
	display: inline-block;
	padding-block: 12px;
	color: inherit;
}

.vw-nevo__kop > * {
	margin: 0;
}

.vw-nevo__kop .vw-kop-duo {
	margin: 8px 0 10px;
}

.vw-nevo__antwoord {
	font-size: 1.125rem;
}

.vw-nevo__artikel {
	margin-top: 14px !important;
}

/* Naar het bestaande artikel: een secundaire knop (outline), de hoofdknop blijft "Ga verder" in de doelbalk. */
.vw-nevo__artikel .wp-block-button__link {
	gap: 0.4em;
	min-height: 48px;
	border: 1.5px solid var(--wp--preset--color--contrast);
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
}

.vw-nevo__artikel .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.vw-nevo__kaart {
	padding: 22px 20px;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-nevo__label {
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.vw-nevo__portie {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 18px;
}

/* Hoeveelheid kiezen: slider, exact getal en snelknoppen. Alleen met JavaScript (zonder: alles op 100 g). */
.vw-nevo__schuif {
	display: none;
}

.vw-nevo.is-js .vw-nevo__schuif {
	display: block;
}

.vw-nevo.is-js .vw-nevo__portie {
	display: flex;
}

.vw-nevo__schuif-rij {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.vw-nevo__schuif input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px; /* Tikvlak; de balk zelf is 6px. */
	margin: 0;
	background: transparent;
	accent-color: var(--wp--preset--color--primary-dark);
	cursor: pointer;
	touch-action: pan-y;
	-webkit-appearance: none;
	appearance: none;
}

.vw-nevo__schuif input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: var(--vw-nevo-rand);
}

.vw-nevo__schuif input[type="range"]::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: var(--vw-nevo-rand);
}

.vw-nevo__schuif input[type="range"]::-webkit-slider-thumb {
	width: 28px;
	height: 28px;
	margin-top: -11px;
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--sm);
	-webkit-appearance: none;
	appearance: none;
}

.vw-nevo__schuif input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid var(--wp--preset--color--white);
	border-radius: 50%;
	background: var(--wp--preset--color--primary-dark);
	box-shadow: var(--wp--preset--shadow--sm);
}

.vw-nevo__schuif input[type="range"]:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
	border-radius: 8px;
}

.vw-nevo__schuif .vw-nevo__eigen-gram {
	flex: 0 0 auto;
	cursor: auto;
}

.vw-nevo__schuif .vw-nevo__eigen-gram input {
	height: 44px; /* Tikdoel. */
}

.vw-nevo__portie button,
.vw-nevo__eigen-gram {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--vw-nevo-rand);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	touch-action: manipulation;
}

.vw-nevo__portie button span {
	color: inherit;
	opacity: 0.75;
	font-weight: 400;
}

.vw-nevo__portie button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.vw-nevo__portie button:focus-visible,
.vw-nevo__eigen-gram input:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-nevo__eigen-gram input {
	width: 72px;
	height: 40px;
	padding: 0 6px;
	border: 1.5px solid var(--vw-nevo-rand);
	border-radius: 8px;
	font: inherit;
	font-size: 16px;
	text-align: right;
}

.vw-nevo__kcal {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	line-height: 0.9;
}

.vw-nevo__kcal b {
	font-size: 5rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.vw-nevo__kcal span {
	font-size: 1.5rem;
	font-weight: 500;
	text-transform: uppercase;
}

.vw-nevo__kcal-sub {
	margin: 6px 0 18px;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
}

.vw-nevo__macrobalk {
	display: flex;
	height: 14px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
}

.vw-nevo__macrobalk i {
	display: block;
}

.vw-nevo__m-koolhydraten { background-color: var(--vw-macro-koolhydraten, #C08A2E); }
.vw-nevo__m-eiwit { background-color: var(--vw-macro-eiwit, #64724F); }
.vw-nevo__m-vet { background-color: var(--vw-macro-vet, #3F6C8F); }

.vw-nevo__macros {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.vw-nevo__macros li {
	padding: 10px;
	border-radius: 14px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--text-muted);
	font-size: 0.8125rem;
}

.vw-nevo__macros i {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 3px;
	vertical-align: middle;
}

.vw-nevo__macros b {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.375rem;
	font-weight: 600;
}

.vw-nevo__sectie > h2 {
	margin: 0 0 12px;
}

.vw-nevo__tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

.vw-nevo__tabel th,
.vw-nevo__tabel td {
	padding: 11px 6px;
	border-bottom: 1px solid var(--vw-nevo-rand);
	font-weight: 400;
	text-align: right;
}

.vw-nevo__tabel th[scope="row"] {
	text-align: left;
}

.vw-nevo__tabel thead th {
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.vw-nevo__tabel[data-zelfde] tr > :nth-child(3) {
	display: none;
}

.vw-nevo__tabel .sub th {
	padding-left: 18px;
	color: var(--wp--preset--color--text-muted);
}

.vw-nevo__tabel .vet th,
.vw-nevo__tabel .vet td {
	font-weight: 700;
}

.vw-nevo__tabel caption {
	padding: 14px 6px 4px;
	font-weight: 700;
	text-align: left;
}

.vw-nevo__tabel caption span {
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
}

.vw-nevo__meer {
	margin-top: 10px;
	border: 1.5px solid var(--vw-nevo-rand);
	border-radius: 14px;
}

.vw-nevo__meer summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 14px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.vw-nevo__meer summary::-webkit-details-marker {
	display: none;
}

.vw-nevo__meer[open] summary span {
	transform: rotate(45deg);
}

.vw-nevo__meer .vw-nevo__tabel {
	padding: 0 8px 8px;
}

.vw-nevo__noot {
	margin: -4px 0 12px;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.875rem;
}

.vw-nevo__vergelijk {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-nevo__vergelijk a,
.vw-nevo__vergelijk div {
	display: grid;
	grid-template-columns: minmax(7rem, 40%) minmax(0, 1fr) 3rem;
	gap: 10px;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vw-nevo__vergelijk .naam {
	line-height: 1.25;
}

.vw-nevo__vergelijk a .naam {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-underline-offset: 3px;
}

.vw-nevo__vergelijk .balk {
	height: 12px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary);
}

.vw-nevo__vergelijk .is-deze {
	font-weight: 700;
}

.vw-nevo__vergelijk .is-deze .balk {
	background-color: var(--wp--preset--color--contrast);
}

.vw-nevo__vergelijk .getal {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.vw-nevo__eigen {
	display: inline-block;
	padding: 2px 8px;
	border: 1px dashed var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.75rem;
	white-space: nowrap;
}

/* Het advies (inhoud van de caloriepagina): op de telefoon foto naast de kop, tekst over de volle breedte. */
.vw-nevo-advies {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 4px 14px;
	align-items: center;
	padding: 20px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--white);
}

.vw-nevo-advies > * {
	grid-column: 1 / -1;
	margin: 0;
}

.vw-nevo-advies > .vw-nevo-advies__foto {
	grid-column: 1;
}

.vw-nevo-advies > .vw-nevo-advies__foto + .vw-nevo-advies__kop {
	grid-column: 2;
}

.vw-nevo-advies__foto img {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.vw-nevo-advies__kop {
	font-size: var(--wp--preset--font-size--large);
}

.vw-nevo-advies > p {
	margin-top: 8px;
}

.vw-nevo__bron {
	padding: 14px 16px;
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--text-muted);
	font-size: 0.8125rem;
}

.vw-nevo__bron p {
	margin: 0 0 4px;
}

.vw-nevo--ingebed .vw-nevo__kop .vw-kop-duo {
	font-size: var(--wp--preset--font-size--x-large) !important;
}

@media (min-width: 1024px) {
	.vw-calorie {
		padding-top: 40px;
	}

	.vw-nevo:not(.vw-nevo--ingebed) {
		grid-template-columns: minmax(0, 1fr) 400px;
		column-gap: 56px;
		align-items: start;
	}

	.vw-nevo:not(.vw-nevo--ingebed) > * {
		grid-column: 1;
	}

	.vw-nevo:not(.vw-nevo--ingebed) > .vw-nevo__kaart {
		position: sticky;
		top: 24px;
		grid-column: 2;
		grid-row: 2 / span 8;
	}

	.vw-nevo__kcal b {
		font-size: 6rem;
	}

	.vw-zoeker-hero {
		padding: 56px 64px;
	}

	.vw-zoeker-hero .vw-zoeker__form {
		max-width: 640px;
	}

	.vw-zoeker__groepen,
	.vw-nevo__tools {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Minder beweging
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.wp-element-button:active,
	.wp-block-button__link:active,
	.vw-postkaart:hover .vw-postkaart__beeld img {
		transform: none;
	}
}

/* Menu: label "Nieuw" (class vw-menu-nieuw) en een uitgelicht item (vw-menu-uitgelicht). Desktop-megamenu en mobiel menu.
   Het label is een pil in primary light met tekst in primary dark, altijd op één regel. Het uitgelichte item krijgt een
   rand in primary (geen vlak: dan zou het label wegvallen). */
.wp-block-navigation .vw-menu-nieuw .wp-block-navigation-item__label::after {
	content: "Nieuw";
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	vertical-align: 1px;
	white-space: nowrap;
}

.wp-block-navigation .vw-menu-uitgelicht > .wp-block-navigation-item__content {
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--primary);
}

@media (min-width: 1024px) {
	.vw-header__nav .wp-block-navigation__submenu-container > .vw-menu-uitgelicht {
		margin-bottom: 0.5rem;
	}
}

/* E-book (gids etiketten lezen): de omslag naast het aanmeldformulier, op de telefoon kleiner erboven. */
.vw-ebook__omslag img {
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	margin-inline: auto;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
}

@media (max-width: 781.98px) {
	.vw-ebook__omslag img {
		max-width: 180px;
	}
}

/* ==========================================================================
   Onboarding: voorkeuren (dieet, allergieën, wat je niet lust, variatie).
   Vier korte schermen; alle keuzes zijn ID's van de Voedingsweetjes app (VYTAL).
   ========================================================================== */

.vw-voorkeur__teller {
	margin: 0 0 6px;
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.875rem;
	font-weight: 600;
}

.vw-voorkeur__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 6px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

/* Compacter dan bij Ons advies: 25 allergieën op zo min mogelijk rijen, nog steeds 44px hoog. */
.vw-voorkeur__pillen .vw-advies__pil {
	justify-content: center;
	min-width: 44px;
	padding: 0 12px;
	font-size: 0.875rem;
}

/* "Volgende" blijft in beeld als een scherm langer is dan het venster (zoals de vaste knop bij de vragen). */
.vw-voorkeur > .vw-advies__knop {
	position: sticky;
	bottom: max(12px, env(safe-area-inset-bottom));
	z-index: 5;
	box-shadow: 0 0 0 12px var(--wp--preset--color--white);
}

.vw-voorkeur__melding {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 4px solid var(--wp--preset--color--primary-dark);
	border-radius: 8px;
	background-color: var(--wp--preset--color--primary-light);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.vw-voorkeur__weetje {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	background-color: var(--wp--preset--color--primary-light);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.vw-voorkeur__later,
.vw-voorkeur__tip {
	margin: 0 0 16px;
	color: var(--wp--preset--color--text-muted);
	font-size: 0.875rem;
}

.vw-voorkeur__tip {
	margin-top: -4px;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

/* Wat je niet lust: zoekveld met suggesties (combobox) en gekozen producten als labels. */
.vw-lusten {
	margin: 0 0 16px;
}

.vw-lusten__label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
}

.vw-lusten__zoek {
	position: relative;
}

.vw-lusten__invoer {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	font: inherit;
	font-size: 1rem;
}

.vw-lusten__invoer:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-lusten__lijst {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	right: 0;
	left: 0;
	max-height: 288px;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	list-style: none;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 12px 32px rgb(0 0 0 / 12%);
}

.vw-lusten__optie,
.vw-lusten__leeg {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 6px 12px;
	border-radius: 10px;
	line-height: 1.3;
}

.vw-lusten__optie {
	cursor: pointer;
}

.vw-lusten__optie:hover,
.vw-lusten__optie[aria-selected="true"] {
	background-color: var(--wp--preset--color--primary-light);
}

.vw-lusten__leeg {
	color: var(--wp--preset--color--text-muted);
}

.vw-lusten__gekozen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.vw-lusten__gekozen .vw-lusten__label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	margin: 0;
	padding: 0 4px 0 14px;
	border: 1.5px solid var(--wp--preset--color--primary-dark);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--primary-light);
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Het kruisje: 20px zichtbaar, tikvlak 44px (de pil is ook 44px hoog). */
.vw-lusten__weg {
	position: relative;
	width: 44px;
	height: 44px;
	margin: -1.5px -4px -1.5px -6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.vw-lusten__weg::before {
	content: "";
	position: absolute;
	inset: 12px;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon-sluiten) no-repeat center / contain;
	mask: var(--vw-icoon-sluiten) no-repeat center / contain;
}

.vw-lusten__weg:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 0;
}

/* Tabellen in pagina's (zo werkt het, gratis tools): leesbaar op 390px, geen eigen scrollbalk nodig. */
.vw-tabel table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.45;
}

.vw-tabel th,
.vw-tabel td {
	padding: 10px 12px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.vw-tabel thead th {
	background-color: var(--wp--preset--color--primary-light);
	font-weight: 600;
}

/* Precies vijf stappen: op desktop op één rij, zodat de laatste niet alleen op een tweede rij staat. */
@media (min-width: 1024px) {
	.vw-stappen.vw-stappen:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* ==========================================================================
   Kennisbank: voedingsstoffen en klachten (docs/plan-voedingsstoffen.md, DESIGN-SYSTEM.md §16).
   Mobile first: eerst 390px, vanaf 782px ruimer. Linkkleur via het token --wp--preset--color--link.
   ========================================================================== */

/* Links op donkere vlakken blijven wit: geen tint van de linkkleur haalt daar 4,5:1. */
.vw-appcta a:not(.wp-element-button),
.has-contrast-background-color a:not(.wp-element-button),
.has-primary-dark-background-color a:not(.wp-element-button) {
	color: #fff;
}

/* Kop van een stof- of klachtpagina. */
.vw-kb-kop .yoast-breadcrumbs,
.vw-kb-kop .wp-block-yoast-seo-breadcrumbs,
.wp-block-post-content .yoast-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.vw-kb-kop .yoast-breadcrumbs a,
.wp-block-post-content .yoast-breadcrumbs a {
	display: inline-block;
	padding: 0.75rem 0.25rem; /* Tikvlak van minimaal 44px zonder de regel hoger te maken. */
	margin: -0.75rem -0.25rem;
	color: var(--wp--preset--color--text-muted);
	text-decoration: none;
}

.vw-kb-kop .yoast-breadcrumbs a:hover,
.wp-block-post-content .yoast-breadcrumbs a:hover {
	text-decoration: underline;
}

.vw-kb-kop .wp-block-post-terms a {
	text-decoration: none;
	color: inherit;
}

.vw-kb-intro {
	max-width: 42rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-kb-auteur {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

/* Portret van de homepage (staand, 2:3): ingezoomd op het hoofd, dat op ongeveer 27% van de hoogte staat. */
.vw-kb-auteur__foto {
	position: relative;
	width: 40px;
	height: 40px;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-light);
}

.vw-kb-auteur__foto img {
	position: absolute;
	top: -18px;
	left: -30px;
	width: 100px;
	max-width: none;
	height: 150px;
}

.vw-kb-auteur a {
	color: inherit;
	font-weight: 500;
}

.vw-kb-kop .vw-disclaimer {
	margin-top: var(--wp--preset--spacing--30);
}

/* In het kort: lichte kaart met vinkjes. */
.vw-kb-kort {
	padding: 1.25rem 1.25rem 0.5rem;
	border-radius: var(--wp--custom--radius--lg);
}

.vw-kb-kort > h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.vw-kb-kort .vw-checklist li {
	margin-bottom: 0.625rem;
}

/* Inhoudsopgave: rustig, in de tekstletter. Onder 1200px één ingeklapte regel tussen twee lijnen; vanaf 1200px een
   vaste kolom links naast de tekst die meeloopt bij het scrollen, met het huidige onderdeel gemarkeerd. */
.vw-content .vw-toc details,
.vw-toc details {
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

.vw-toc {
	margin: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.9375rem;
}

.vw-content .vw-toc summary,
.vw-toc__kop {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0;
	cursor: pointer;
	list-style: none;
}

.vw-toc__kop::-webkit-details-marker {
	display: none;
}

.vw-toc__label {
	font-weight: 600;
}

.vw-toc__aantal {
	color: var(--wp--preset--color--text-muted);
}

.vw-toc__pijl {
	width: 1.25rem;
	height: 1.25rem;
	margin-left: auto;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: var(--vw-icoon-keuzepijl) no-repeat center / contain;
	mask: var(--vw-icoon-keuzepijl) no-repeat center / contain;
	transition: transform var(--wp--custom--transition);
}

.vw-toc__details[open] .vw-toc__pijl {
	transform: rotate(180deg);
}

.vw-toc__lijst {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	border-left: 2px solid var(--wp--preset--color--border);
}

.vw-toc__lijst li {
	margin: 0;
	padding: 0;
}

.vw-toc__lijst a {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin-left: -2px;
	padding: 0.4rem 0 0.4rem 1rem;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.4;
	text-decoration: none;
	transition: color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.vw-toc__lijst a:hover {
	color: var(--wp--preset--color--contrast);
}

.vw-toc__lijst a[aria-current="true"] {
	border-left-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

@media (min-width: 1200px) {
	/* Kolom links naast de tekst: zweeft in de marge, neemt geen ruimte in de tekst in. Alleen in de kennisbank
	   (brede tekstkolom); in een blog (smalle kolom met zijbalk) blijft de inhoudsopgave gewoon in de tekst staan. */
	.vw-kb-content > .vw-toc {
		float: left;
		position: sticky;
		top: calc(var(--vw-kop-zichtbaar, 0px) + 1.5rem);
		width: 15rem;
		/* !important: de constrained layout van WordPress zet de marges van blokken in de tekstkolom vast op auto. */
		margin: 0 0 0 calc(-15rem - 3.5rem) !important;
		border: 0;
		font-size: 0.875rem;
	}

	.vw-kb-content > .vw-toc .vw-toc__kop {
		min-height: 0;
		margin-bottom: 0.5rem;
		pointer-events: none;
		cursor: default;
	}

	.vw-kb-content > .vw-toc .vw-toc__aantal,
	.vw-kb-content > .vw-toc .vw-toc__pijl {
		display: none;
	}

	.vw-kb-content > .vw-toc .vw-toc__label {
		font-size: 0.8125rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--wp--preset--color--text-muted);
	}

	.vw-kb-content > .vw-toc .vw-toc__lijst a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0.25rem 0 0.25rem 0.875rem;
	}
}

/* Referentiewaarden: tabel met twee kolommen, past op 390px zonder scrollen. */
.vw-ref {
	margin: var(--wp--preset--spacing--30) 0;
}

.vw-ref__soort {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
}

.vw-ref__eenheid,
.vw-ref__geen,
.vw-ref__opmerking,
.vw-ref__bron {
	color: var(--wp--preset--color--text-muted);
	font-size: 0.9375rem;
}

.vw-ref .vw-ref__tabel {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.vw-ref__tabel th,
.vw-ref__tabel td {
	padding: 0.625rem 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.vw-ref__tabel thead th {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
	border-bottom-color: var(--wp--preset--color--contrast);
}

.vw-ref__tabel tbody th,
.vw-ref__tabel thead th:first-child {
	font-weight: 500;
	width: 50%;
}

.vw-ref__tabel td {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.vw-ref__tabel td small {
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.vw-ref__noot {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.vw-ref__kop {
	margin: 1.25rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--medium);
}

.vw-ref__bron {
	margin-top: 0.75rem;
	font-size: 0.8125rem;
}

.vw-ref__link {
	margin: 0.5rem 0 0;
}

/* Top-lijst: naam, waarde en een balk per product. */
.vw-top {
	margin: var(--wp--preset--spacing--30) 0;
}

.vw-top__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: vw-top;
}

.vw-top__item {
	position: relative;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	grid-template-areas:
		"nr naam waarde"
		"nr balk balk"
		"nr detail detail";
	column-gap: 0.5rem;
	row-gap: 0.25rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: vw-top;
}

.vw-top__item::before {
	content: counter(vw-top);
	grid-area: nr;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-muted);
	line-height: 1.5;
}

.vw-top__naam {
	grid-area: naam;
	font-weight: 500;
	text-decoration: none;
	align-self: center;
}

.vw-top__naam::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vw-top__naam:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.vw-top__waarde {
	grid-area: waarde;
	align-self: center;
	font-variant-numeric: tabular-nums;
	font-size: 0.9375rem;
	white-space: nowrap;
}

.vw-top__waarde small {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-top__balk {
	grid-area: balk;
	display: block;
	height: 8px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-light);
	overflow: hidden;
}

.vw-top__balk::before {
	content: "";
	display: block;
	width: var(--vw-balk, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
}

.vw-top__detail {
	grid-area: detail;
	display: flex;
	flex-wrap: wrap;
	gap: 0.125rem 0.875rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-top__berekend::after {
	content: " (berekend)";
	opacity: 0.8;
}

.vw-top__kruiden,
.vw-top__bron {
	margin: 0.875rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-muted);
}

/* Uitlegterm: stippellijn plus i-icoon; het paneel verschijnt na een tik. */
.vw-term {
	position: relative;
	display: inline;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--wp--preset--color--link);
}

button.vw-term {
	/* Als knop (soort norm in de tabellen): tikvlak van 44px zonder de regel hoger te maken. */
	padding: 0.625rem 0;
	margin: -0.625rem 0;
	line-height: inherit;
	cursor: pointer;
	text-decoration: underline dotted;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.vw-term__i {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.2em;
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: var(--vw-icoon-info) no-repeat center / contain;
	mask: var(--vw-icoon-info) no-repeat center / contain;
}

.vw-term__i::before {
	/* Tikvlak van minimaal 44px om het icoon, zonder de tekst te verschuiven. */
	content: "";
	position: absolute;
	inset: -0.75rem -1rem;
}

.vw-term-paneel {
	position: fixed;
	inset: auto 0 0;
	z-index: 1100;
	padding: 1.25rem 3.25rem 1.25rem 1.25rem;
	padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0;
	box-shadow: var(--wp--preset--shadow--lg);
	animation: vw-term-op var(--wp--custom--transition);
}

.vw-term-paneel[hidden] {
	display: none;
}

@keyframes vw-term-op {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vw-term-paneel {
		animation: none;
	}
}

.vw-term-paneel__kop {
	margin: 0 0 0.375rem;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.125rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.vw-term-paneel__tekst {
	margin: 0;
	font-size: 0.9375rem;
}

.vw-term-paneel__acties {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
}

.vw-term-paneel__acties a[hidden] {
	display: none;
}

.vw-term-paneel__sluiten {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.vw-term-paneel__sluiten::before {
	content: "";
	position: absolute;
	inset: 12px;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: var(--vw-icoon-sluiten) no-repeat center / contain;
	mask: var(--vw-icoon-sluiten) no-repeat center / contain;
}

.vw-term-paneel__sluiten:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 0;
}

/* Disclaimer: het zachte paneel met een lijnicoon. */
.vw-disclaimer {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--30) 0;
	padding: 1rem 1.125rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary-light);
	font-size: 0.9375rem;
}

.vw-disclaimer__icoon {
	width: 1.75rem;
	height: 1.75rem;
	background-color: var(--wp--preset--color--primary-dark);
	-webkit-mask: var(--vw-icoon) no-repeat center / contain;
	mask: var(--vw-icoon) no-repeat center / contain;
}

.vw-disclaimer__tekst > :first-child {
	margin-top: 0;
}

.vw-disclaimer__tekst > :last-child {
	margin-bottom: 0;
}

.vw-disclaimer--kort {
	font-size: 0.875rem;
}

/* Lijst van pagina's (gerelateerd en het overzicht): titel, korte uitleg, pijl. */
.vw-kb-lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-kb-lijst li + li {
	margin-top: 0.5rem;
}

.vw-kb-lijst li[hidden] {
	display: none;
}

.vw-kb-lijst a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	grid-template-areas:
		"titel pijl"
		"uitleg pijl";
	align-items: center;
	column-gap: 0.75rem;
	min-height: 56px;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.vw-kb-lijst a:hover {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-light);
}

.vw-kb-lijst__titel {
	grid-area: titel;
	font-weight: 500;
}

.vw-kb-lijst__uitleg {
	grid-area: uitleg;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

/* Zoekpagina: treffers uit de kennisbank boven de blogs. */
.vw-kb-treffers {
	margin-bottom: var(--wp--preset--spacing--50);
}

.vw-kb-treffers__kop {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.vw-kb-treffers .vw-kb-lijst__uitleg {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vw-kb-lijst__pijl {
	grid-area: pijl;
	color: var(--wp--preset--color--primary-dark);
	font-size: 1.25rem;
	line-height: 1;
}

.vw-gerelateerd__sectie + .vw-gerelateerd__sectie {
	margin-top: var(--wp--preset--spacing--40);
}

.vw-gerelateerd__sectie > h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
	font-size: var(--wp--preset--font-size--large);
}

.vw-kb-onder {
	margin-top: var(--wp--preset--spacing--50);
}

.vw-kb-onder > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.vw-bronnen__lijst {
	padding-left: 1.25rem;
	font-size: 0.9375rem;
}

.vw-bronnen__lijst li + li {
	margin-top: 0.375rem;
}

.vw-bronnen__meta {
	color: var(--wp--preset--color--text-muted);
}

/* Overzicht: zoekveld, filterpillen en de groepen. */
.vw-kb-overzicht__form {
	margin-bottom: 0.75rem;
}

.vw-kb-overzicht__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

.vw-kb-overzicht__filter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: background-color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.vw-kb-overzicht__filter a:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

.vw-kb-overzicht__filter a[aria-current="true"] {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.vw-kb-overzicht__groep + .vw-kb-overzicht__groep {
	margin-top: var(--wp--preset--spacing--50);
}

.vw-kb-overzicht__groep[hidden] {
	display: none;
}

.vw-kb-overzicht__groep > h2 {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.vw-kb-overzicht__leeg {
	color: var(--wp--preset--color--text-muted);
}

/* Uitlegblokken op de hoofdpagina: drie lichte kaarten. */
.vw-kb-uitleg {
	display: grid;
	gap: 1rem;
}

.vw-kb-uitleg > .wp-block-group {
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
}

.vw-kb-uitleg h3 {
	margin: 0 0 0.5rem;
}

.vw-kb-uitleg p {
	margin: 0;
	font-size: 0.9375rem;
}

@media (min-width: 782px) {
	.vw-ref__tabel tbody th {
		width: 40%;
	}

	.vw-top__item {
		grid-template-columns: 2rem minmax(0, 1fr) 8rem;
		grid-template-areas:
			"nr naam waarde"
			"nr balk balk"
			"nr detail detail";
	}

	.vw-top__waarde {
		text-align: right;
	}

	.vw-term-paneel {
		/* Vanaf 782px onder de term, meebewegend met de pagina (absolute: --vw-term-top is gemeten vanaf de bovenkant
		   van de pagina, niet van het scherm). */
		position: absolute;
		inset: auto;
		top: var(--vw-term-top, 0);
		left: var(--vw-term-left, 0);
		width: 320px;
		padding-bottom: 1.25rem;
		border-radius: var(--wp--custom--radius--md);
	}

	.vw-kb-lijst {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.vw-kb-lijst li + li {
		margin-top: 0;
	}

	.vw-kb-uitleg {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vw-kb-overzicht__groep + .vw-kb-overzicht__groep {
		margin-top: var(--wp--preset--spacing--50);
	}
}

/* ------------------------------------------------------------------------------------------------ Hoeveel heb ik nodig? */
.vw-hoeveel__form {
	display: grid;
	gap: 1rem;
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary-light);
}

.vw-hoeveel__voor {
	margin: 0;
	padding: 0;
	border: 0;
}

.vw-hoeveel__voor legend,
.vw-hoeveel__veld label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.vw-hoeveel__veld small {
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.vw-hoeveel__pillen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.vw-hoeveel__pil {
	position: relative;
}

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

.vw-hoeveel__pil span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vw-hoeveel__pil input:checked + span {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

.vw-hoeveel__pil input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-hoeveel__velden {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: end;
	gap: 0.75rem;
}

.vw-hoeveel__veld {
	margin: 0;
}

.vw-hoeveel__invoer {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.vw-hoeveel__invoer input {
	width: 100%;
	min-width: 0;
	height: 52px;
	padding: 0 0.875rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--white);
	font-size: 1rem;
}

.vw-hoeveel__knop {
	justify-self: start;
	min-height: 44px;
}

.vw-hoeveel__resultaat {
	margin-top: var(--wp--preset--spacing--50);
}

.vw-hoeveel[aria-busy="true"] .vw-hoeveel__resultaat {
	opacity: 0.5;
	transition: opacity 0.15s;
}

.vw-hoeveel__voorwie {
	margin: 0 0 1rem;
}

.vw-hoeveel__resultaat > .vw-hoeveel__noot {
	margin: -0.5rem 0 1rem;
}

.vw-hoeveel__groep + .vw-hoeveel__groep {
	margin-top: var(--wp--preset--spacing--50);
}

.vw-hoeveel__lijst {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-hoeveel__rij {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.25rem 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-hoeveel__naam {
	font-weight: 600;
}

.vw-hoeveel__waarde {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.vw-hoeveel__reken {
	display: block;
	font-size: 0.875rem;
	color: var(--wp--preset--color--primary-dark);
}

.vw-hoeveel__meer,
.vw-hoeveel__noot {
	grid-column: 1 / -1;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-hoeveel__grens::before {
	content: " · ";
}

.vw-hoeveel__bron {
	margin-top: var(--wp--preset--spacing--50);
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

@media (min-width: 782px) {
	.vw-hoeveel__form {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: end;
		padding: 1.5rem;
	}

	.vw-hoeveel__voor {
		grid-column: 1 / -1;
	}

	.vw-hoeveel__velden {
		grid-column: 1 / 3;
	}
}

/* ------------------------------------------------------------------------------------------------ E-nummers */
.vw-enummer-feiten {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
}

.vw-enummer-feiten__lijst {
	margin: 0;
}

.vw-enummer-feiten__rij {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.5rem 0;
}

.vw-enummer-feiten__rij + .vw-enummer-feiten__rij {
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-enummer-feiten dt {
	font-weight: 600;
}

.vw-enummer-feiten dd {
	margin: 0;
}

.vw-enummer-feiten__status {
	display: inline-block;
	padding: 0.125rem 0.625rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
}

.vw-enummer-feiten__status--ja {
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-dark);
}

.vw-enummer-feiten__status--nee {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.vw-enummer-feiten__uitleg,
.vw-enummer-feiten__bron {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-enummer-feiten__eu {
	margin: 0.75rem 0 0;
}

.vw-enummer-feiten__eu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.vw-enummer-verwant,
.vw-winkelmandje-cta {
	margin-block: var(--wp--preset--spacing--50);
}

.vw-enummer-verwant__alle a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (max-width: 481px) {
	.vw-enummer-feiten__rij {
		grid-template-columns: 1fr;
		gap: 0.125rem;
	}
}

/* Lange lijsten (alle e-nummers): compacter, zodat de lijst op de telefoon niet eindeloos wordt. */
.vw-kb-lijst--compact li + li {
	margin-top: 0.25rem;
}

.vw-kb-lijst--compact a {
	min-height: 48px;
	padding: 0.5rem 0.875rem;
}

.vw-kb-lijst--compact .vw-kb-lijst__uitleg {
	font-size: 0.8125rem;
}

@media (min-width: 782px) {
	.vw-kb-lijst--compact {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.vw-kb-lijst--compact li + li {
		margin-top: 0;
	}
}

/* E-nummers: melding op een verboden nummer, de stand van de bronnen, uitleg per herkomstgroep, opvallende link. */
.vw-enummer-melding {
	margin: 1.25rem 0 0;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
}

.vw-enummer-melding a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

.vw-enummer-stand {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-kb-overzicht__uitleg {
	margin: -0.25rem 0 0.75rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-enummer-uitgelicht a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 0.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	text-decoration: none;
}

.vw-enummer-uitgelicht a:hover,
.vw-enummer-uitgelicht a:focus-visible {
	background: var(--wp--preset--color--primary-darker);
	color: var(--wp--preset--color--white);
}

/* E-nummers: inklapbare groepen (<details>). Kop: naam, bereik, aantal en een pijl; minimaal 56px, hele kop tikbaar. */
.vw-kb-groep {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	scroll-margin-top: 0.5rem; /* De plakkende kop zit al in de scroll-padding van html. */
}

.vw-kb-overzicht__groep.vw-kb-groep + .vw-kb-overzicht__groep.vw-kb-groep {
	margin-top: 0.5rem;
}

.vw-kb-groep__kop {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 56px;
	padding: 0.625rem 1rem;
	cursor: pointer;
	list-style: none;
	touch-action: manipulation;
}

.vw-kb-groep__kop::-webkit-details-marker {
	display: none;
}

.vw-kb-groep__kop::after {
	content: "";
	flex: 0 0 auto;
	width: 0.6rem;
	height: 0.6rem;
	margin-right: 0.25rem;
	border-right: 2px solid var(--wp--preset--color--primary-dark);
	border-bottom: 2px solid var(--wp--preset--color--primary-dark);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--wp--custom--transition);
}

.vw-kb-groep[open] > .vw-kb-groep__kop::after {
	transform: rotate(-135deg) translateY(-2px);
}

.vw-kb-groep__kop:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--md);
}

.vw-kb-groep__titel {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.vw-kb-groep__titel h2 {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}

.vw-kb-groep__meta {
	margin-top: 0.125rem;
}

.vw-kb-groep__bereik,
.vw-kb-groep__aantal {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
	font-variant-numeric: tabular-nums;
}

.vw-kb-groep__aantal {
	white-space: nowrap;
}

/* Sprongen naar een groep: op de telefoon twee kolommen, zodat ze niet acht regels innemen. */
@media (max-width: 781.98px) {
	.vw-kb-overzicht__sprong {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.vw-kb-overzicht__sprong a {
		justify-content: center;
		padding: 0.375rem 0.625rem;
		font-size: 0.8125rem;
		text-align: center;
		line-height: 1.2;
	}
}

.vw-kb-groep__inhoud {
	padding: 0 0.75rem 0.75rem;
}

/* Herkomstfilter in een opengeklapte groep: twee knoppen, aan = gevuld. */
.vw-kb-herkomst {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
}

.vw-kb-herkomst[hidden] {
	display: none;
}

.vw-kb-herkomst button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 44px;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	touch-action: manipulation;
}

.vw-kb-herkomst button[aria-pressed="true"] {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-light);
}

.vw-kb-herkomst button[aria-pressed="true"]::before {
	content: "";
	width: 0.5rem;
	height: 0.85rem;
	margin-top: -2px;
	border-right: 2px solid var(--wp--preset--color--primary-dark);
	border-bottom: 2px solid var(--wp--preset--color--primary-dark);
	transform: rotate(45deg);
}

.vw-kb-herkomst button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-kb-herkomst button.is-geweigerd {
	animation: vw-weiger 0.3s;
}

@keyframes vw-weiger {
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.vw-kb-herkomst button.is-geweigerd {
		animation: none;
	}
}

/* Artikelkaarten: één link per kaart (de titel, met een tikvlak over de hele kaart). "Lees verder" is alleen een
   visuele hint, geen tweede link; de alternatieve tekst "" houdt hem buiten de toegankelijke naam. */
.vw-postgrid > li {
	list-style: none;
}

.vw-postgrid > li::marker {
	content: none;
}

.vw-postkaart__body::after {
	content: "Lees verder \2192" / "";
	margin-top: auto;
	padding-top: 0.5rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.vw-postkaart:focus-within {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
}

.vw-postkaart__body .wp-block-post-title a:focus-visible {
	outline: none; /* De hele kaart krijgt de focusrand. */
}

.vw-postkaart__datum {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

@media (max-width: 599.98px) {
	.vw-meer .vw-postkaart__body::after,
	.vw-sectie .vw-postgrid .vw-postkaart__body::after {
		content: none;
	}
}

/* Kennisbank-kaarten: rij naar de andere overzichtspagina's; één link per kaart, hele kaart tikbaar. */
.vw-kb-kaarten {
	margin-block: var(--wp--preset--spacing--50);
}

.vw-kb-kaarten__kop {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--large);
}

.vw-kb-kaarten__lijst {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-kb-kaart {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	grid-template-areas:
		"titel pijl"
		"tekst pijl";
	align-items: center;
	column-gap: 0.75rem;
	min-height: 56px;
	padding: 1rem 1.25rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary-light);
	transition: background-color var(--wp--custom--transition);
}

.vw-kb-kaart:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, var(--wp--preset--color--primary-light));
}

.vw-kb-kaart:focus-within {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-kb-kaart__titel {
	grid-area: titel;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}

.vw-kb-kaart__titel a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vw-kb-kaart__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.vw-kb-kaart__titel a:focus-visible {
	outline: none;
}

.vw-kb-kaart__concept {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: none;
	color: var(--wp--preset--color--text-muted);
}

.vw-kb-kaart__tekst {
	grid-area: tekst;
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-kb-kaart__pijl {
	grid-area: pijl;
	color: var(--wp--preset--color--primary-dark);
	font-size: 1.25rem;
}

@media (min-width: 782px) {
	.vw-kb-kaarten__lijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tussenkoppen in een groep (stoffen: Koolhydraten, Vetten, Vetoplosbaar ...). */
.vw-kb-subgroep + .vw-kb-subgroep {
	margin-top: 1rem;
}

.vw-kb-subgroep__kop {
	margin: 0.25rem 0 0.5rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

/* Zoek-dropdown in een overzicht: de uitleg op één regel, zodat de treffers compact blijven. */
.vw-kb-dropdown .vw-zoeker__naam {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.vw-kb-dropdown .vw-zoeker__groep {
	margin-left: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Hoeveel heb ik nodig: vervolgvraag alleen bij vrouw (werkt ook zonder JavaScript), printknop. */
.vw-hoeveel__situatie {
	margin: 0;
	padding: 0;
	border: 0;
}

.vw-hoeveel__situatie legend {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.vw-hoeveel__situatie legend small {
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

.vw-hoeveel__form:has(input[name="voor"][value="man"]:checked) .vw-hoeveel__situatie {
	display: none;
}

.vw-hoeveel__acties {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.vw-hoeveel__acties .vw-hoeveel__voorwie {
	margin: 0;
}

.vw-hoeveel__print {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.vw-hoeveel__print[hidden] {
	display: none;
}

.vw-hoeveel__print:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-hoeveel__printkop {
	display: none;
}

@media (min-width: 782px) {
	.vw-hoeveel__situatie {
		grid-column: 1 / -1;
	}
}

/* Printweergave van het advies: alleen titel, voor wie, de lijst, bronnen en de disclaimer. */
@media print {
	/* Alles weg behalve het advies en de elementen eromheen (die het advies bevatten). */
	body:has(.vw-hoeveel__resultaat) *:not(:has(.vw-hoeveel__resultaat)):not(.vw-hoeveel__resultaat):not(.vw-hoeveel__resultaat *) {
		display: none !important;
	}

	body:has(.vw-hoeveel__resultaat) * {
		margin-top: 0 !important;
		padding-top: 0 !important;
		box-shadow: none !important;
	}

	.vw-hoeveel__resultaat {
		margin: 0;
		font-size: 11pt;
	}

	.vw-hoeveel__rij {
		grid-template-columns: 11rem minmax(0, 1fr);
	}

	.vw-hoeveel__waarde {
		text-align: left;
	}

	.vw-hoeveel__print {
		display: none !important;
	}

	.vw-hoeveel__printkop {
		display: block;
		margin: 0 0 0.75rem;
		font-size: 9pt;
		color: #444;
	}

	.vw-hoeveel__rij {
		break-inside: avoid;
		padding: 0.25rem 0;
	}

	.vw-hoeveel__groep h2 {
		margin: 0.75rem 0 0.25rem;
		font-size: 13pt;
	}

	.vw-hoeveel__naam a {
		color: inherit;
		text-decoration: none;
	}
}

/* Oude kaart die nog een eigen "Lees verder"-link heeft (inhoud in de database): dan geen tweede hint. */
.vw-postkaart__body:has(.wp-block-read-more)::after {
	content: none;
}

/* ==========================================================================
   Over Leroy: verhaal, "In de media" (blok Media-item, inc/media.php) en de lijst "Verder".
   Rustig en leesbaar op 390px: weinig labels, geen hoofdletters buiten koppen, zinsopbouw in de meta.
   ========================================================================== */

/* Foto midden in het verhaal: liggend, volle tekstbreedte. */
.vw-verhaal__foto {
	margin-block: 1.75rem;
}

.vw-verhaal__foto img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

/* Opening van Over Leroy: eigen opmaak, niet de hero van de homepage. Kleine ronde foto (dezelfde als op de
   homepage) naast de naam, daaronder één zin en de socials. Op de tekstbreedte, gelijk met het verhaal eronder. */
.vw-sectie.vw-overkop {
	padding-top: var(--wp--preset--spacing--40);
}

.vw-overkop__kop {
	gap: 1rem;
}

.vw-overkop__kop > * {
	margin: 0;
}

.vw-overkop .vw-overkop__foto {
	flex: 0 0 auto;
	width: 88px;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
}

.vw-overkop .vw-overkop__foto img {
	display: block;
	width: 88px;
	height: 88px;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: 50% 18%;
	border-radius: 50%;
}

.vw-overkop__naam.wp-block-heading {
	font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
	font-weight: 600;
	line-height: 0.95;
}

.vw-overkop__intro {
	margin-top: 1.25rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

.vw-overkop__volg {
	margin-top: 1.25rem;
	margin-bottom: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-overkop__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin-top: 0;
	padding: 0;
	list-style: none;
}

.vw-overkop__socials li {
	margin: 0;
}

.vw-overkop__socials a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--primary);
}

.vw-overkop__socials a:hover {
	text-decoration-color: currentColor;
}

@media (min-width: 782px) {
	.vw-overkop__kop {
		gap: 1.5rem;
	}

	.vw-overkop .vw-overkop__foto,
	.vw-overkop .vw-overkop__foto img {
		width: 132px;
		height: 132px;
	}
}

/* Videofragment (blok): speelse groene kaart met afspeelknop; de video van de zender laadt pas na een tik. */
.vw-fragment {
	margin: 1.75rem 0 0;
}

.vw-fragment__speler {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	transform: rotate(-0.6deg);
}

.vw-fragment__programma {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.vw-fragment__citaat {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
}

/* De meta deelt de onderste regel met de ronde afspeelknop. */
.vw-fragment__meta {
	display: flex;
	align-items: center;
	min-height: 60px;
	margin-top: 0.25rem;
	padding-right: 5rem;
	font-size: var(--wp--preset--font-size--small);
}

.vw-fragment__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

.vw-fragment.is-js .vw-fragment__link {
	display: none;
}

/* De knop beslaat de hele kaart; de ronde afspeelknop staat rechtsboven. */
.vw-fragment__start {
	position: absolute;
	inset: 0;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	cursor: pointer;
}

.vw-fragment__start:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.vw-fragment__play {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	transition: transform var(--wp--custom--transition);
}

.vw-fragment__play::before {
	content: "";
	margin-left: 4px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent var(--wp--preset--color--white);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.vw-fragment__start:hover .vw-fragment__play {
		transform: scale(1.08);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vw-fragment__speler {
		transform: none;
	}
}

.vw-fragment__speler.is-speelt {
	display: block;
	padding: 0;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--contrast);
	transform: none;
}

.vw-fragment__speler.is-speelt iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vw-fragment__noot {
	margin-top: 0.75rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-fragment__noot[hidden] {
	display: none;
}

/* In de media: een gewone zin met links en één uitklaplijst. */
.vw-media-item {
	position: relative;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vw-media-item--kaart,
.vw-media-item--uitgelicht {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-sizing: border-box;
	padding: 1.25rem 3rem 1.25rem 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
}

a.vw-media-item:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-media-item__kop {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.vw-media-item__medium {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.15;
	text-transform: uppercase;
}

.vw-media-item__programma,
.vw-media-item__meta {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-media-item__tekst {
	line-height: 1.55;
}

.vw-media-item__meta {
	margin-top: auto;
}

.vw-media-item__pijl {
	position: absolute;
	top: 1.125rem;
	right: 1.25rem;
	color: var(--wp--preset--color--primary-darker);
	font-size: 1.25rem;
	transition: transform var(--wp--custom--transition);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	a.vw-media-item:hover .vw-media-item__pijl {
		transform: translateX(3px);
	}
}

a.vw-media-item:hover .vw-media-item__medium {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Uitgelicht: donkergroen, grotere naam en tekst. */
.vw-media-item--uitgelicht {
	padding: 1.5rem 3rem 1.5rem 1.5rem;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
}

.vw-media-item--uitgelicht .vw-media-item__programma,
.vw-media-item--uitgelicht .vw-media-item__meta,
.vw-media-item--uitgelicht .vw-media-item__pijl {
	color: var(--wp--preset--color--white);
}

.vw-media-item--uitgelicht .vw-media-item__medium {
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.vw-media-item--uitgelicht .vw-media-item__tekst {
	max-width: 48ch;
	font-size: var(--wp--preset--font-size--medium);
}

@media (min-width: 900px) {
	.vw-media-item--uitgelicht {
		padding: 2rem 4rem 2rem 2rem;
	}

	.vw-media-item--uitgelicht .vw-media-item__tekst {
		font-size: 1.25rem;
	}
}

.vw-media-item--uit {
	opacity: 0.5;
}

/* De rest: uitklaplijst met rustige regels. */
.vw-media__alles.wp-block-details {
	margin-top: 1.5rem;
	padding: 0 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary-light);
}

.vw-media__alles summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	padding-right: 2.5rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.vw-media__alles summary::-webkit-details-marker {
	display: none;
}

.vw-media__alles summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-darker);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform var(--wp--custom--transition);
}

.vw-media__alles[open] summary::after {
	transform: rotate(45deg);
}

.vw-media__alles summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-media__lijst {
	margin: 0;
	padding-bottom: 0.5rem;
}

.vw-media__lijst > * {
	margin: 0;
}

.vw-media-item--regel {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 2rem 1rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-media-item--regel .vw-media-item__kop {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
}

.vw-media-item--regel .vw-media-item__medium {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.0625rem;
	font-weight: 600;
	text-transform: none;
}

.vw-media-item--regel .vw-media-item__pijl {
	top: 50%;
	right: 0;
	margin-top: -0.75rem;
}

/* Verder met Voedingsweetjes: een lijst met links, geen kaarten. */
.vw-verder {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-verder li {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-verder a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	min-height: 56px;
	padding: 1rem 2.5rem 1rem 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.vw-verder a::after {
	content: "\2192";
	position: absolute;
	top: 50%;
	right: 0.25rem;
	margin-top: -0.75rem;
	color: var(--wp--preset--color--primary-darker);
	font-size: 1.25rem;
	line-height: 1.5rem;
	transition: transform var(--wp--custom--transition);
}

.vw-verder strong {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.vw-verder span {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-verder a:hover strong {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.vw-verder a:hover::after {
		transform: translateX(3px);
	}
}

.vw-verder a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

/* Media en samenwerken. */
.vw-samenwerken > * {
	max-width: var(--wp--style--global--content-size);
}

/* ==========================================================================
   Link in bio (/links/): mobiel eerst, één kolom, grote knoppen. Geen header en footer van de site.
   ========================================================================== */
.vw-bio {
	min-height: 100dvh;
	padding: 1.5rem 1rem 2rem;
	/* Groene band achter logo en foto; de foto ligt over de rand. Naam en tekst staan op licht (goed leesbaar). */
	background:
		linear-gradient(var(--wp--preset--color--primary), var(--wp--preset--color--primary)) top / 100% 170px no-repeat,
		var(--wp--preset--color--primary-light);
}

.vw-bio__inhoud,
.vw-bio__voet {
	max-width: 30rem;
	margin-inline: auto;
}

.vw-bio__inhoud > * + * {
	margin-top: 0.75rem;
}

.vw-bio__kop {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.25rem;
	text-align: center;
}

.vw-bio__logo {
	display: inline-flex;
	padding: 0.5rem;
}

.vw-bio__logo img {
	width: 96px;
	height: auto;
}

.vw-bio__foto {
	width: 128px;
	height: 128px;
	margin-top: 0.75rem;
	border: 4px solid var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: var(--wp--preset--shadow--md);
	object-fit: cover;
	object-position: 50% 20%;
}

.vw-bio__naam {
	margin: 0.75rem 0 0;
	font-size: clamp(1.75rem, 7vw, 2.25rem);
	line-height: 1.05;
}

.vw-bio__ondertitel {
	margin: 0.375rem 0 0;
	color: var(--wp--preset--color--text-muted);
}

.vw-bio .wp-block-social-links {
	justify-content: center;
	margin-bottom: 1rem;
}

.vw-bio .wp-block-social-links .wp-social-link a {
	padding: 10px;
}

.vw-bio__knop {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	align-items: center;
	column-gap: 0.75rem;
	min-height: 64px;
	padding: 0.875rem 1.25rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	box-shadow: var(--wp--preset--shadow--sm);
	transition: transform var(--wp--custom--transition), border-color var(--wp--custom--transition);
	touch-action: manipulation;
}

.vw-bio__knop:hover {
	border-color: var(--wp--preset--color--primary-dark);
	transform: translateY(-1px);
}

.vw-bio__knop:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 3px;
}

.vw-bio__knoptekst {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.vw-bio__knoponder {
	grid-column: 1;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-bio__pijl {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary-dark);
}

/* De belangrijkste actie: donkergroen, groter, met een accent. */
.vw-bio__knop:has(.vw-bio__knoponder) .vw-bio__pijl {
	grid-row: 1 / span 2;
}

.vw-bio__knop--primair {
	min-height: 80px;
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--md);
}

.vw-bio__knop--primair .vw-bio__knoptekst {
	font-size: 1.375rem;
}

.vw-bio__knop--primair .vw-bio__knoponder {
	color: #e4ecd9;
}

.vw-bio__knop--primair .vw-bio__pijl {
	color: var(--wp--preset--color--primary);
}

.vw-bio__knop--uit {
	opacity: 0.45;
}

.vw-bio__voet {
	margin-top: 2rem;
	text-align: center;
}

.vw-bio__knop--klein {
	text-align: left;
	min-height: 52px;
	background: transparent;
	box-shadow: none;
}

.vw-bio__knop--klein .vw-bio__knoptekst {
	font-size: 1rem;
}

.vw-bio__website {
	margin: 1rem 0 0;
}

.vw-bio__website a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--text-muted);
}

@media (prefers-reduced-motion: reduce) {
	.vw-bio__knop:hover {
		transform: none;
	}
}

@media (min-width: 782px) {
	.vw-bio {
		padding-top: 3rem;
	}
}

/* Nieuwsbrief op /links/: compacte kaart tussen de knoppen, velden onder elkaar. */
.vw-bio__nieuwsbrief .wp-block-voedingsweetjes-nieuwsbrief,
.vw-bio__nieuwsbrief .vw-nb {
	margin: 0;
	padding: 1.25rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--sm);
}

.vw-bio__nieuwsbrief .vw-nb--kaart {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

.vw-bio__nieuwsbrief .vw-nb__kop {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.1;
}

.vw-bio__nieuwsbrief .vw-nb__bewijs,
.vw-bio__nieuwsbrief .vw-nb__zin {
	margin: 0.375rem 0 0;
	font-size: 0.9375rem;
}

.vw-bio__nieuwsbrief .vw-nb__velden {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	margin-top: 0.875rem;
}

.vw-bio__nieuwsbrief .vw-nb__knop {
	width: 100%;
	margin-top: 0.5rem;
}

.vw-bio__nieuwsbrief .vw-nb__voetnoot {
	font-size: 0.8125rem;
}

.vw-bio .wp-block-social-links:last-child {
	margin-top: 1.5rem;
	margin-bottom: 0;
}

/* ==========================================================================
   /app/: rondleiding door de app (scripts/setup/app-pagina.php). Per stap een echte telefoon: donker frame met het
   volledige scherm, dat onderaan wegloopt in de achtergrond (zoals screenshots in de App Store). Op de telefoon het
   toestel groot boven de tekst; vanaf 782px naast elkaar, om en om links en rechts. Een tik op het scherm vergroot het.
   ========================================================================== */

.vw-rondleiding__intro {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-rondleiding {
	margin-top: 1.5rem;
	counter-reset: vw-rondstap;
}

.vw-rondstap {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding-block: 2rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	counter-increment: vw-rondstap;
}

.vw-rondstap:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Het toestel: donker frame, ronde hoeken, zachte schaduw; onderaan loopt het weg. */
.vw-rondstap .vw-rondstap__scherm {
	justify-self: center;
	width: min(236px, 66vw);
	margin: 0;
	padding: 7px 7px 0;
	border-radius: 38px 38px 0 0;
	background: #1d1f1a;
	box-shadow: 0 18px 40px -18px rgba(42, 46, 37, 0.45);
	-webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.vw-rondstap .vw-rondstap__scherm img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 14;
	object-fit: cover;
	object-position: top;
	border-radius: 31px 31px 0 0;
}

.vw-rondstap__tekst > * {
	margin: 0;
}

.vw-rondstap__tekst > * + * {
	margin-top: 0.5rem;
}

.vw-rondstap__titel.wp-block-heading {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
}

.vw-rondstap__titel::before {
	content: counter(vw-rondstap) ".";
	margin-right: 0.375rem;
	color: var(--wp--preset--color--primary-darker);
	font-variant-numeric: tabular-nums;
}

.vw-rondleiding__noot {
	margin-top: 1.25rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 782px) {
	.vw-rondstap {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: 3rem;
		align-items: center;
		padding-block: 2.5rem 0;
	}

	/* Om en om: bij de even stappen staat het toestel rechts. */
	.vw-rondstap:nth-child(even) {
		grid-template-columns: minmax(0, 1fr) 280px;
	}

	.vw-rondstap:nth-child(even) .vw-rondstap__scherm {
		order: 2;
	}

	.vw-rondstap .vw-rondstap__scherm {
		align-self: end;
		width: 280px;
		padding: 9px 9px 0;
		border-radius: 46px 46px 0 0;
	}

	.vw-rondstap .vw-rondstap__scherm img {
		border-radius: 37px 37px 0 0;
	}

	.vw-rondstap__tekst {
		padding-bottom: 2.5rem;
	}

	.vw-rondstap__titel.wp-block-heading {
		font-size: 1.5rem;
	}
}

/* Zo krijg je je voedingsschema: een gewone genummerde lijst. */
.vw-zo {
	margin-top: 1.25rem;
	padding-left: 1.25rem;
}

.vw-zo li + li {
	margin-top: 0.75rem;
}

.vw-zo li::marker {
	color: var(--wp--preset--color--primary-darker);
	font-weight: 600;
}

/* Kies je plan op /app/: één opvallende stap naar de onboarding, geen prijskaarten. Lichtgroen vlak met een donkere
   knop (anders dan de donkergroene App-CTA onderaan), met "Al vanaf ... per maand" uit de prijsinstellingen. */
.vw-appplan {
	padding: 1.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.vw-appplan__kolommen.wp-block-columns {
	margin: 0;
}

.vw-appplan__tekst > * {
	margin: 0;
}

.vw-appplan__tekst > * + * {
	margin-top: 0.75rem;
}

.vw-appplan__kop.wp-block-heading {
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.vw-appplan__intro {
	font-size: var(--wp--preset--font-size--medium);
}

.vw-vanaf {
	margin-top: 1rem !important;
	font-size: var(--wp--preset--font-size--large);
}

.vw-vanaf strong {
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 2.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vw-appplan .vw-app-acties {
	margin-top: 1.25rem !important;
}

.vw-appplan .vw-app-knop .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.vw-appplan .vw-app-knop .wp-block-button__link:hover,
.vw-appplan .vw-app-knop .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-darker);
	color: var(--wp--preset--color--white);
}

.vw-appplan .vw-app-platform {
	color: var(--wp--preset--color--contrast);
}

.vw-appplan__onder {
	margin-top: 1.25rem !important;
	font-size: var(--wp--preset--font-size--small);
}

.vw-appplan__beeld {
	margin: 0;
}

.vw-appplan__beeld img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--md);
}

/* Op de telefoon het beeld boven de tekst, klein gehouden zodat de knop snel in beeld is. */
@media (max-width: 781.98px) {
	.vw-appplan__kolommen.wp-block-columns {
		flex-direction: column-reverse;
	}

	.vw-appplan__beeld img {
		max-height: 220px;
		object-fit: cover;
	}
}

@media (min-width: 782px) {
	.vw-appplan {
		padding: 3rem;
	}

	.vw-appplan__kolommen.wp-block-columns {
		gap: 3rem;
	}
}

/* ==========================================================================
   /challenge/ (scripts/setup/challenge-pagina.php): rustige lijsten in plaats van kaarten, zoals op Over Leroy.
   ========================================================================== */

.vw-ch-intro {
	margin-top: 0.5rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-ch-komend,
.vw-ch-weken,
.vw-ch-krijg {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-ch-komend li,
.vw-ch-weken li,
.vw-ch-krijg li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-ch-komend strong,
.vw-ch-weken strong,
.vw-ch-krijg strong {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.vw-ch-komend span,
.vw-ch-weken span,
.vw-ch-krijg span {
	color: var(--wp--preset--color--text-muted);
}

/* Komende challenges: de eerstvolgende valt op met een lijn in primary. */
.vw-ch-komend li:first-child {
	padding-left: 1rem;
	border-left: 4px solid var(--wp--preset--color--primary);
}

/* Ervaringen: citaten onder elkaar, groot en rustig. */
.vw-ch-citaat.wp-block-quote {
	margin: 1.5rem 0 0;
	padding: 0 0 0 1.25rem;
	border-left: 3px solid var(--wp--preset--color--primary);
}

.vw-ch-citaat p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
}

.vw-ch-citaat cite {
	display: block;
	margin-top: 0.5rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
}

/* Wachtlijst: anker voor de knop in de hero, niet onder de vaste header. */
.vw-ch-wachtlijst {
	scroll-margin-top: 0.5rem;
}

/* Challenge-wachtlijst (blok): kaart met knop; met JavaScript het formulier in een pop-up in vijf stappen. */
/* Verborgen is verborgen, ook voor knoppen met een eigen display. */
.vw-cw [hidden],
.vw-cw__dialoog [hidden] {
	display: none !important;
}

.vw-cw {
	scroll-margin-top: 0.5rem;
}

.vw-cw__kaart {
	padding: 1.75rem 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

.vw-cw__kaart > * {
	margin: 0;
}

.vw-cw__kaart > * + * {
	margin-top: 0.75rem;
}

.vw-cw__kop.wp-block-heading {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--x-large);
}

.vw-cw__open,
.vw-cw__verstuur,
.vw-cw__volgende {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 52px;
}

.vw-cw__open {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--white);
}

.vw-cw__open:hover,
.vw-cw__open:focus-visible {
	background-color: var(--wp--preset--color--primary-darker);
	color: var(--wp--preset--color--white);
}

/* Zonder JavaScript staat het formulier onder de kaart. */
.vw-cw__houder {
	margin-top: 1.5rem;
}

.vw-cw__stap {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
}

.vw-cw__vraag {
	margin-bottom: 0.75rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.vw-cw__hint {
	margin: -0.25rem 0 0.75rem;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-cw__keuze {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 56px;
	margin-top: 0.5rem;
	padding: 0.625rem 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	cursor: pointer;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.vw-cw__keuze:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

.vw-cw__keuze:has(input:checked) {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-light);
}

.vw-cw__keuze:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-cw__keuze input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary-dark);
}

.vw-cw__keuzetekst {
	display: flex;
	flex-direction: column;
}

.vw-cw__keuzetekst strong {
	font-weight: 600;
	line-height: 1.3;
}

.vw-cw__keuzetekst small {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-cw__velden {
	display: grid;
	gap: 0.5rem;
}

.vw-cw__velden input {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 1.25rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	font-size: 1rem;
}

.vw-cw__velden .vw-cw__hint {
	margin: 0 0 0 1.25rem;
}

.vw-cw__toestemming {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	min-height: 44px;
	margin-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.vw-cw__toestemming input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0.125rem 0 0;
	accent-color: var(--wp--preset--color--primary-dark);
}

.vw-cw__verstuur {
	width: 100%;
	margin-top: 1rem;
}

.vw-cw__voetnoot {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--x-small);
}

.vw-cw__melding {
	margin: 0.75rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.vw-cw__melding.is-fout {
	color: #a12d1c;
	font-weight: 600;
}

.vw-cw__klaar {
	padding: 1rem 0;
	text-align: center;
}

.vw-cw__klaarkop {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}

/* Met JavaScript: het formulier in de pop-up. */
.vw-cw.is-js .vw-cw__houder {
	display: none;
}

.vw-cw__dialoog {
	box-sizing: border-box;
	width: calc(100% - 1.5rem);
	max-width: 520px;
	max-height: calc(100dvh - 1.5rem);
	margin: auto;
	padding: 1.25rem 1.25rem 1rem;
	overflow: auto;
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--lg);
}

.vw-cw__dialoog::backdrop {
	background: rgba(42, 46, 37, 0.55);
}

.vw-cw__dialoog .vw-cw__houder {
	display: block;
	margin: 0;
}

.vw-cw__sluit {
	position: sticky;
	top: 0;
	float: right;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: -0.5rem -0.5rem 0 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.vw-cw__sluit:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-cw__voortgang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.75rem;
	margin: 0.75rem 3.5rem 1.25rem 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-cw__balk {
	flex: 1 1 8rem;
	height: 6px;
	overflow: hidden;
	border-radius: 3px;
	background: var(--wp--preset--color--primary-light);
}

.vw-cw__balk > span {
	display: block;
	height: 100%;
	background: var(--wp--preset--color--primary-dark);
	transition: width var(--wp--custom--transition);
}

.vw-cw__dialoog .vw-cw__stap {
	margin-bottom: 0;
}

.vw-cw__knoppen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.vw-cw__terug,
.vw-cw__overslaan {
	min-height: 44px;
	padding: 0 0.75rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.vw-cw__volgende {
	margin-left: auto;
}

.vw-cw__knoppen.is-laatste .vw-cw__overslaan {
	display: none;
}

/* ==========================================================================
   /challenge/: navigatie op de pagina en "Van ... naar ...".
   ========================================================================== */

.vw-ch-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vw-ch-nav li {
	margin: 0;
}

.vw-ch-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--primary);
}

.vw-ch-nav a:hover {
	text-decoration-color: currentColor;
}

.vw-ch-nav-label {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-ch-anker {
	scroll-margin-top: 1rem;
}

.vw-ch-vannaar {
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.vw-ch-vannaar li {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 1rem 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.vw-ch-vannaar li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.vw-ch-van {
	color: var(--wp--preset--color--text-muted);
}

.vw-ch-naar {
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.3;
}

.vw-ch-naar::before {
	content: "\2192\00a0";
	color: var(--wp--preset--color--primary-darker);
}

@media (min-width: 782px) {
	.vw-ch-vannaar li {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 2rem;
		align-items: center;
	}

	.vw-cw__kaart {
		padding: 2.5rem;
	}
}

.vw-ch-knop {
	margin-top: 1.5rem;
}

/* Challenge-check (blok): "Waar loop jij op vast?" met tikbare keuzes; een tik opent de wachtlijst. */
.vw-ch-check {
	padding: 1.5rem 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--md);
	text-align: left;
}

.vw-ch-check__kop {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
}

.vw-ch-check__zin {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.vw-ch-check__keuzes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.vw-ch-check__keuzes li {
	margin: 0;
}

.vw-ch-check__keuze {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.vw-ch-check__keuze:hover,
.vw-ch-check__keuze:focus-visible {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary);
}

.vw-ch-check__keuze:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

/* Hero van de challenge: tekst en de check, geen portret. In de code staat de tekst eerst (op de telefoon bovenaan);
   de gewone hero draait de kolommen op desktop om, hier niet: tekst links, check rechts. */
.vw-ch-hero__check {
	align-self: center;
}

@media (min-width: 782px) {
	.wp-block-columns.vw-ch-hero {
		flex-direction: row;
	}
}

@media (max-width: 781.98px) {
	.vw-ch-hero .vw-ch-hero__check {
		margin-top: 0.5rem;
	}
}

/* De vijf weken als tijdlijn: genummerde bolletjes met een lijn ertussen. */
.vw-ch-weken {
	border-bottom: 0;
	counter-reset: vw-week;
}

.vw-ch-weken li {
	position: relative;
	padding: 0 0 1.5rem 3.5rem;
	border-top: 0;
	counter-increment: vw-week;
}

.vw-ch-weken li::before {
	content: counter(vw-week);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.25rem;
	font-weight: 600;
}

.vw-ch-weken li::after {
	content: "";
	position: absolute;
	top: 44px;
	bottom: 4px;
	left: 19px;
	width: 2px;
	background: var(--wp--preset--color--border);
}

.vw-ch-weken li:last-child {
	padding-bottom: 0;
}

.vw-ch-weken li:last-child::after {
	display: none;
}

.vw-ch-weken li strong {
	padding-top: 0.5rem;
}

/* Wat je krijgt: een telefoon met het voedingsschema (tik = groot). Op de telefoon gecentreerd boven de lijst,
   vanaf 782px rechts ernaast (de lijst wordt dan een eigen blok naast de telefoon). */
.wp-block-image.vw-ch-telefoon {
	width: 160px;
	margin: 1.25rem auto 0 !important;
	padding: 5px 5px 0;
	border-radius: 28px 28px 0 0;
	background: #1d1f1a;
	-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.wp-block-image.vw-ch-telefoon img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 14;
	object-fit: cover;
	object-position: top;
	border-radius: 23px 23px 0 0;
}

@media (min-width: 782px) {
	.wp-block-image.vw-ch-telefoon {
		float: right;
		width: 200px;
		margin: 1.25rem 0 1rem 2rem !important;
	}

	.vw-ch-krijg-sectie .vw-ch-krijg {
		display: flow-root;
	}

	.vw-ch-krijg-sectie .vw-ch-knop {
		clear: both;
	}
}

/* Wie begeleidt je: foto klein naast de tekst. */
.vw-ch-wie__foto {
	margin: 0;
}

.vw-ch-wie__foto img {
	width: 100%;
	max-width: 280px;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
}

.vw-ch-wie__tekst > * + * {
	margin-top: 0.75rem;
}

@media (max-width: 781.98px) {
	.vw-ch-wie__foto img {
		max-width: 180px;
	}
}

/* ==========================================================================
   Caloriepagina, paginamodel (docs/seo-concurrentie.md, onderdeel 5): auteursregel in de kop, "In het kort",
   links naar stofpagina's in de tabel, en de veelgestelde vragen.
   ========================================================================== */

.vw-nevo__kop .vw-kb-auteur {
	margin-top: 0.75rem;
}

.vw-nevo__kort {
	padding: 1.25rem;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--primary-light);
}

.vw-nevo__kort > h2 {
	margin: 0 0 0.5rem;
}

.vw-nevo__kort .vw-checklist {
	margin: 0;
}

.vw-nevo__kort li + li {
	margin-top: 0.375rem;
}

.vw-nevo__tabel th a {
	color: inherit;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.vw-nevo__tabel th a:hover {
	color: var(--wp--preset--color--link);
	text-decoration-color: currentColor;
}

.vw-nevo__faq .vw-faq > .wp-block-details {
	margin: 0;
}

/* De pil "Eigen aanvulling" mag afbreken als de tekst langer is (anders steekt hij buiten het scherm op 390px). */
.vw-nevo-advies .vw-nevo__eigen {
	white-space: normal;
}

/* Kruimelpad: korte woorden ("Kaas", "Fruit") krijgen genoeg tikruimte (minimaal 44px breed en hoog). */
.vw-nevo__kruimel a {
	display: inline-block;
	min-width: 2.75rem;
	padding: 0.75rem 0.25rem;
	margin: -0.75rem -0.25rem;
	text-align: center;
}

/* ==========================================================================
   Zoekbalk op de homepage (blok Zoekbalk): één groot veld, suggesties eronder; Veel gezocht en Uitgelicht bij een klik.
   ========================================================================== */
.vw-zoekbalk {
	max-width: 34rem;
	margin: var(--wp--preset--spacing--40) 0 0;
}

.vw-hero__tekst .vw-zoekbalk {
	width: 100%;
}

.vw-zoekbalk .vw-zoeker__veld input {
	font-size: 1.0625rem;
}

.vw-zoekbalk .vw-zoeker__veld input::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

/* De knop is er voor wie zonder JavaScript zoekt en voor schermlezers; Enter doet hetzelfde. */
.vw-zoekbalk__knop {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.vw-zoekbalk__knop:focus-visible {
	position: static;
	width: auto;
	height: auto;
	margin-top: 0.5rem;
	clip: auto;
	clip-path: none;
}

/* Kopjes in de suggesties ("Veel gezocht", "Uitgelicht"). */
.vw-zoeker__kop {
	padding: 10px 12px 4px;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-muted);
}

.vw-zoeker__kop + .vw-zoeker__optie--kennisbank {
	margin-top: 0;
	border-top: 0;
}

/* ==========================================================================
   Megamenu 19 oktober 2026: uitgelicht item (Voedingsschema op maat onder Afvallen) en klikbare groepskoppen
   (Kennisbank, Blog onder Weetjes).
   ========================================================================== */
@media (min-width: 1024px) {
	.vw-header__nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .vw-menu-uitgelicht > .wp-block-navigation-item__content {
		margin-bottom: 0.25rem;
		background-color: var(--wp--preset--color--primary-light);
		box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
	}

	.vw-header__nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .vw-menu-uitgelicht > .wp-block-navigation-item__content:hover {
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, white);
	}

	.vw-header__nav .vw-menu-uitgelicht .wp-block-navigation-item__label {
		color: var(--wp--preset--color--primary-darker);
	}

	/* Groepskop als link: donkere tekst met pijl, onderstreept bij hover. */
	.vw-header__nav .vw-menu-groep--link > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
	}

	.vw-header__nav .vw-menu-groep--link > .wp-block-navigation-item__content .wp-block-navigation-item__label::after {
		content: " \2192";
	}

	.vw-header__nav .vw-menu-groep--link > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}
}

.vw-mobiel-nav .vw-menu-uitgelicht > .wp-block-navigation-item__content {
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--primary-light);
}

/* Categoriefilter boven de blog (blok Blog-filter): pillen, de huidige gevuld. */
.vw-blogfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.vw-blogfilter a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.4rem 1rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.vw-blogfilter a:hover {
	border-color: var(--wp--preset--color--primary-dark);
}

.vw-blogfilter a[aria-current="page"] {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.vw-blogfilter small {
	margin-left: 0.35rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.8125rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--text-muted);
}

.vw-blogfilter a[aria-current="page"] small {
	color: inherit;
}

/* Kennisbank-kaarten met icoon (19 oktober 2026): uitnodigender op het overzicht /kennisbank/ en onderaan de hubs. */
.vw-kb-kaart {
	grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
	grid-template-areas:
		"icoon titel pijl"
		"icoon tekst pijl";
	column-gap: 1rem;
	padding: 1.25rem 1.25rem 1.25rem 1rem;
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--border);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.vw-kb-kaart:hover,
.vw-kb-kaart:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 10px 24px rgb(31 35 24 / 0.08);
	transform: translateY(-2px);
}

.vw-kb-kaart__icoon {
	grid-area: icoon;
	align-self: start;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary-light);
	position: relative;
}

.vw-kb-kaart__icoon::before {
	content: "";
	position: absolute;
	inset: 0.75rem;
	background-color: var(--wp--preset--color--primary-darker);
	mask: var(--vw-icoon) center / contain no-repeat;
	-webkit-mask: var(--vw-icoon) center / contain no-repeat;
}

.vw-kb-kaart__titel {
	font-size: var(--wp--preset--font-size--large);
}

.vw-kb-kaart__pijl {
	color: var(--wp--preset--color--primary-darker);
	font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.vw-kb-kaart {
		transition: none;
	}

	.vw-kb-kaart:hover,
	.vw-kb-kaart:focus-within {
		transform: none;
	}
}

/* Hulp bij de app (/app/hulp/ en de artikelen eronder). */
.vw-apphulp__beeld {
	max-width: 22rem;
	margin: var(--wp--preset--spacing--30) 0;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.vw-apphulp__beeld img {
	display: block;
	width: 100%;
	height: auto;
}

.vw-stappen {
	padding-left: 1.5rem;
}

.vw-stappen li {
	margin-bottom: 0.5rem;
}

.vw-apphulp__tip {
	margin: var(--wp--preset--spacing--30) 0;
	padding: 1rem 1.25rem;
}

.vw-apphulp__verwant {
	padding-left: 1.25rem;
}

.vw-apphulp__voet {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-muted);
}

.vw-apphulp-kort .vw-kb-lijst {
	margin: 0;
}

/* Intro in het titelpaneel (support, contact): leesbreedte, iets kleiner dan "groot". */
.vw-paginakop__intro.has-large-font-size {
	--wp--preset--font-size--large: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
	max-width: 60ch;
	line-height: 1.55;
}

/* ==========================================================================
   Typografische schaal (besluit Leroy 19 oktober 2026): vier maten voor de hele site, los van de klassen die de
   editor of een patroon op een kop zet. H1 = paginakop, H2 = sectiekop, H3 = kaart- of tussenkop, tekst = medium.
   De klassen has-*-font-size komen van WordPress met !important, daarom hier ook !important.
   ========================================================================== */
:where(.vw-paneel, .vw-main, .vw-front, .vw-landing, .vw-kb-main, .vw-zoeker-hero) h1 {
	font-size: var(--wp--preset--font-size--xx-large) !important;
	line-height: 1.06;
}

:where(.vw-paneel, .vw-main, .vw-front, .vw-landing, .vw-kb-main) h2:not(.vw-appcta__kop):not(.vw-footer__title):not(.vw-postkaart h2):not(.vw-kb-groep__titel h2):not(.wp-block-post-title) {
	font-size: var(--wp--preset--font-size--x-large) !important;
	line-height: 1.12;
}

:where(.vw-paneel, .vw-main, .vw-front, .vw-landing, .vw-kb-main) :is(h3, .vw-postkaart h2, .vw-kb-groep__titel h2, .wp-block-post-title:is(h2, h3)) {
	font-size: var(--wp--preset--font-size--large) !important;
	line-height: 1.2;
}

/* Lopende tekst: de intro's die "groot" hadden, worden medium-plus; gewone alinea's blijven medium. */
:where(.vw-main, .vw-front, .vw-landing, .vw-kb-main, .vw-paneel) p.has-large-font-size {
	--wp--preset--font-size--large: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
	line-height: 1.55;
}

/* Intro op de kennisbankhubs: links uitgelijnd met de rest (de constrained layout centreerde de smallere alinea). */
.vw-content > .vw-kb-intro,
.vw-kb-content > .vw-kb-intro {
	margin-inline: 0 !important;
}


/* Uitsnede per foto: zet in het afbeeldingsblok onder Geavanceerd > Extra CSS-klasse een van deze klassen.
   vw-focus-0 toont de bovenkant van de foto, vw-focus-50 het midden, vw-focus-100 de onderkant. Werkt bij elke
   bijgesneden foto (fotokaarten, Over, hero). vw-beeld-heel toont een beeld in zijn geheel (voor een mockup met een
   transparante achtergrond), zonder bij te snijden. */
figure.wp-block-image.vw-focus-0 img { object-position: 50% 0%; }
figure.wp-block-image.vw-focus-5 img { object-position: 50% 5%; }
figure.wp-block-image.vw-focus-10 img { object-position: 50% 10%; }
figure.wp-block-image.vw-focus-15 img { object-position: 50% 15%; }
figure.wp-block-image.vw-focus-20 img { object-position: 50% 20%; }
figure.wp-block-image.vw-focus-25 img { object-position: 50% 25%; }
figure.wp-block-image.vw-focus-30 img { object-position: 50% 30%; }
figure.wp-block-image.vw-focus-35 img { object-position: 50% 35%; }
figure.wp-block-image.vw-focus-40 img { object-position: 50% 40%; }
figure.wp-block-image.vw-focus-45 img { object-position: 50% 45%; }
figure.wp-block-image.vw-focus-50 img { object-position: 50% 50%; }
figure.wp-block-image.vw-focus-55 img { object-position: 50% 55%; }
figure.wp-block-image.vw-focus-60 img { object-position: 50% 60%; }
figure.wp-block-image.vw-focus-65 img { object-position: 50% 65%; }
figure.wp-block-image.vw-focus-70 img { object-position: 50% 70%; }
figure.wp-block-image.vw-focus-75 img { object-position: 50% 75%; }
figure.wp-block-image.vw-focus-80 img { object-position: 50% 80%; }
figure.wp-block-image.vw-focus-85 img { object-position: 50% 85%; }
figure.wp-block-image.vw-focus-90 img { object-position: 50% 90%; }
figure.wp-block-image.vw-focus-95 img { object-position: 50% 95%; }
figure.wp-block-image.vw-focus-100 img { object-position: 50% 100%; }
figure.wp-block-image.vw-beeld-heel img { object-fit: contain; }

/* Auteursregel: de naam opent het paneel (zoals een uitlegterm), met een portret erin. Zelfde uitsnede als de kleine
   foto in de regel, maar groter (64px). */
.vw-kb-auteur .vw-term {
	color: inherit;
	font-weight: 500;
}

.vw-term-paneel--foto {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	column-gap: 1rem;
	align-items: start;
}

.vw-term-paneel--foto > :not(.vw-term-paneel__foto, .vw-term-paneel__sluiten) {
	grid-column: 2;
}

.vw-term-paneel__foto {
	position: relative;
	grid-row: 1 / span 3;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-light);
}

.vw-term-paneel__foto[hidden] {
	display: none;
}

.vw-term-paneel__foto img {
	position: absolute;
	top: -29px;
	left: -48px;
	width: 160px;
	max-width: none;
	height: 240px;
}

/* Auteursregel onder de titel van een blog: wat lucht. */
.vw-paginakop .vw-kb-auteur {
	margin-top: var(--wp--preset--spacing--20);
}

/* ==========================================================================
   Voorbeeldschema op maat: pop-up met vijf korte vragen (blok voorbeeldschema, inc/voorbeeldschema.php).
   Mobiel: het hele scherm. Vanaf 600px: een kaart in het midden. Tikvlakken 44px, velden 52px, tekst 16px.
   ========================================================================== */
.vw-vs {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
}

.vw-vs::backdrop {
	background: rgb(30 33 25 / 55%);
}

.vw-vs__form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 100%;
	padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

.vw-vs__kop {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: center;
}

.vw-vs__stap {
	grid-column: 2;
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.vw-vs__terug,
.vw-vs__sluiten {
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.vw-vs__terug {
	grid-column: 1;
}

.vw-vs__sluiten {
	grid-column: 3;
}

.vw-vs__terug::before,
.vw-vs__sluiten::before {
	content: "";
	position: absolute;
	inset: 12px;
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: var(--vw-icoon-terug) no-repeat center / contain;
	mask: var(--vw-icoon-terug) no-repeat center / contain;
}

.vw-vs__sluiten::before {
	-webkit-mask-image: var(--vw-icoon-sluiten);
	mask-image: var(--vw-icoon-sluiten);
}

.vw-vs__terug:focus-visible,
.vw-vs__sluiten:focus-visible,
.vw-vs__keuze:has(input:focus-visible) {
	outline: 3px solid var(--wp--preset--color--primary-dark);
	outline-offset: 2px;
}

.vw-vs__balk {
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-light);
	overflow: hidden;
}

.vw-vs__balk span {
	display: block;
	height: 100%;
	width: 20%;
	border-radius: inherit;
	background: var(--wp--preset--color--primary);
	transition: width var(--wp--custom--transition);
}

.vw-vs__titel {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
}

.vw-vs__scherm {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.vw-vs__scherm[hidden] {
	display: none;
}

.vw-vs__scherm legend {
	margin-bottom: 0.25rem;
	padding: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.vw-vs__rij {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.vw-vs__keuze {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0.75rem 1rem;
	border: 2px solid var(--wp--preset--color--primary-light);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	cursor: pointer;
}

.vw-vs__keuze input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.vw-vs__keuze span {
	display: grid;
	gap: 0.125rem;
	font-size: 1rem;
}

.vw-vs__keuze small {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-muted);
}

.vw-vs__keuze:has(input:checked) {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--primary-light);
}

.vw-vs__veld {
	position: relative;
	display: grid;
	gap: 0.375rem;
	font-weight: 500;
}

.vw-vs__veld input {
	height: 52px;
	padding: 0 3.25rem 0 1rem;
	border: 1px solid var(--wp--preset--color--border, #cfd3c8);
	border-radius: var(--wp--custom--radius--md);
	font: inherit;
	font-size: 16px;
	font-weight: 400;
}

.vw-vs__veld input[type="text"],
.vw-vs__veld input[type="email"] {
	padding-right: 1rem;
}

.vw-vs__eenheid {
	position: absolute;
	right: 1rem;
	bottom: 15px;
	color: var(--wp--preset--color--text-muted);
	font-weight: 400;
}

.vw-vs__vink {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 0.625rem;
	align-items: start;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.vw-vs__vink input {
	width: 22px;
	height: 22px;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--primary-dark);
}

.vw-vs__fout {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	background: #fdecea;
	color: #8a1c13;
	font-size: var(--wp--preset--font-size--small);
}

.vw-vs__acties {
	margin-top: auto;
}

.vw-vs__acties[hidden] {
	display: none;
}

.vw-vs__knop {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	text-align: center;
}

.vw-vs__klaar {
	align-content: start;
	outline: none;
}

.vw-vs__klaar-kop {
	margin: 0;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}

.vw-vs__eigen {
	padding: 0.75rem 1rem;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--primary-light);
}

@media (min-width: 600px) {
	.vw-vs {
		width: min(520px, calc(100% - 2rem));
		height: fit-content; /* Niet "auto": een modale dialog rekt dan uit tot de hele hoogte. */
		max-height: calc(100dvh - 4rem);
		margin: auto;
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--preset--shadow--lg);
	}

	.vw-vs__form {
		min-height: 0;
		padding: 1rem 1.5rem 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vw-vs__balk span {
		transition: none;
	}
}