/*
 * Melius Pro – globale stijlen (thema).
 * Voor- en achterkant (editor-styles). Alleen theme.json-variabelen en de vaste breekpunten 400 · 600 · 900 · 1120 px.
 * Blokken (plugin meliuspro-core) rekenen op deze klassen en regels en definiëren ze niet opnieuw (CONTRACT §7).
 * Plan: §2.2 (scroll-margin), §3.1 (header), §4.1–4.2 (tokens en globale regels), §4.4 (tabellen).
 */

/* ------------------------------------------------------------------ */
/* 1. Variabelen                                                       */
/* ------------------------------------------------------------------ */

:root {
	/* Hoogte van de sticky hoofdbalk. De header-JS overschrijft dit (inline op <html>); zonder JS geldt deze waarde. */
	--mp-header-h: 77px;
}

/* Tussen 601 en 1120 px loopt het hoofdmenu over een tweede rij (ontwerp): hogere terugvalwaarde zonder JS. */
@media (min-width: 600px) and (max-width: 1120px) {
	:root {
		--mp-header-h: 125px;
	}
}

/* ------------------------------------------------------------------ */
/* 2. Basis                                                            */
/* ------------------------------------------------------------------ */

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

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

body {
	overflow-wrap: break-word;
}

/* Browsermarges weg (ontwerp: margin 0). Specificiteit 0, dus de layout-afstanden van WordPress en blokken gaan voor. */
:where(h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol) {
	margin-block: 0;
}

:where(figure, blockquote) {
	margin: 0;
}

:where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(button, input, select, textarea) {
	font: inherit;
}

/* Koppen: afbreken en balanceren (plan §4.2). */
h1,
h2,
h3,
dt,
dd,
th,
td {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 16 6 6;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* Kop na tekst in een gewone inhoudskolom krijgt wat meer lucht. */
:where(.is-layout-flow, .is-layout-constrained) > :is(h2, h3, h4):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--30);
}

:where(a) {
	text-underline-offset: 3px;
}

/* Telefoonnummers nooit afbreken. */
a[href^="tel:"] {
	white-space: nowrap;
}

/* Lijsten in de inhoud (core/list). */
:where(.wp-block-list) > li + li,
:where(.wp-block-list) li > :where(ul, ol) {
	margin-top: 8px;
}

/* Scheidingslijn (core/separator). */
hr.wp-block-separator {
	border-top-width: 1px;
}

/* ------------------------------------------------------------------ */
/* 3. Focus (plan §4.2)                                                */
/* ------------------------------------------------------------------ */

:focus-visible {
	outline: 3px solid var(--wp--preset--color--primair);
	outline-offset: 3px;
}

/* Afgeronde focusring op tekstlinks en samenvattingen; knoppen, velden en scrollvlakken houden hun eigen vorm. */
:where(a, summary):focus-visible {
	border-radius: 6px;
}

.is-dark :focus-visible {
	outline-color: var(--wp--preset--color--wit);
}

/* Wit paneel in de donkere servicebalk (taalkeuze) en andere lichte vlakken in een donker vlak. */
#taalkeuze :focus-visible,
.is-dark .is-licht :focus-visible {
	outline-color: var(--wp--preset--color--primair);
}

/* ------------------------------------------------------------------ */
/* 4. Hulpklassen                                                      */
/* ------------------------------------------------------------------ */

/* Visueel verborgen, wel voorgelezen. */
.mp-sr,
.screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Skiplink "Naar de inhoud": eerste element, zichtbaar bij focus. */
a.mp-skiplink {
	position: fixed;
	top: -120px;
	left: 16px;
	z-index: 1000;
	padding: 12px 18px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--wit);
	font-weight: 700;
	text-decoration: none;
}

a.mp-skiplink:focus,
a.mp-skiplink:focus-visible {
	top: calc(12px + var(--wp-admin--admin-bar--height, 0px));
	color: var(--wp--preset--color--wit);
}

/* Container: max. 1240 px (incl. zijmarge), gecentreerd. --content: 720 px. */
.mp-container {
	width: 100%;
	max-width: var(--wp--custom--breedte--breed);
	margin-inline: auto;
	padding-inline: var(--wp--custom--zijmarge);
}

.mp-container--content {
	max-width: var(--wp--custom--breedte--content);
}

.mp-eyebrow {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal);
}

.mp-lead {
	font-size: clamp(18px, 1.5vw, 20px);
	line-height: 1.6;
	color: var(--wp--preset--color--tekst-zacht);
}

/* Oranje open punt (alleen staging, plan §1.4). */
.is-open-punt {
	padding: 1px 6px;
	border-radius: 6px;
	background-color: var(--wp--preset--color--kruis-vlak);
	background-color: color-mix(in srgb, var(--wp--preset--color--open-punt) 14%, var(--wp--preset--color--wit));
	color: var(--wp--preset--color--open-punt);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Alleen bij afdrukken zichtbaar (print.css). */
.mp-alleen-print {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* 5. Donkere vlakken (.is-dark)                                       */
/* ------------------------------------------------------------------ */

:where(.is-dark) {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--wit);
}

.is-dark :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--wit);
}

.is-dark a:where(:not(.wp-element-button, .wp-block-button__link, .mp-knop, .is-licht a, #taalkeuze a)) {
	color: var(--wp--preset--color--wit);
	text-decoration: underline;
}

.is-dark a:where(:not(.wp-element-button, .wp-block-button__link, .mp-knop, .is-licht a, #taalkeuze a)):hover {
	color: var(--wp--preset--color--wit);
	text-decoration-thickness: 2px;
}

.is-dark .mp-eyebrow {
	color: var(--wp--preset--color--servicebalk-tekst);
}

.is-dark .mp-lead {
	color: var(--wp--preset--color--lijn-donker);
}

/* Licht vlak binnen een donker vlak. */
.is-dark .is-licht {
	color: var(--wp--preset--color--tekst);
}

.is-dark .is-licht :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--navy);
}

/* ------------------------------------------------------------------ */
/* 6. Knoppen (pil, plan §4.2)                                         */
/* .mp-knop (+ --primair / --secundair / --licht / --klein)            */
/* core/button: standaard = primair, stijl "outline" = secundair.      */
/* ------------------------------------------------------------------ */

a.mp-knop,
button.mp-knop,
.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 10px 28px;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--pil);
	background-color: var(--wp--preset--color--primair);
	color: var(--wp--preset--color--wit);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--basis);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.mp-knop:hover,
button.mp-knop:hover,
.wp-block-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primair-donker);
	color: var(--wp--preset--color--wit);
}

/* Grote primaire knop: zachte schaduw (ontwerp). */
:is(a, button).mp-knop:not(.mp-knop--secundair, .mp-knop--licht, .mp-knop--klein),
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	box-shadow: var(--wp--custom--schaduw--knop);
}

:is(a, button).mp-knop--secundair,
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--navy);
}

:is(a, button).mp-knop--secundair:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--vlak);
	color: var(--wp--preset--color--navy);
}

/* Wit op donker. */
:is(a, button).mp-knop--licht,
.is-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	border-color: transparent;
	background-color: var(--wp--preset--color--wit);
	color: var(--wp--preset--color--navy);
	box-shadow: none;
}

:is(a, button).mp-knop--licht:hover,
.is-dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--vlak-blauw);
	color: var(--wp--preset--color--navy);
}

/* Omlijnd op donker. */
.is-dark :is(a, button).mp-knop--secundair,
.is-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.55);
	background-color: transparent;
	color: var(--wp--preset--color--wit);
}

.is-dark :is(a, button).mp-knop--secundair:hover,
.is-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--wit);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--wp--preset--color--wit);
}

:is(a, button).mp-knop--klein {
	min-height: 48px;
	padding: 10px 22px;
	font-size: var(--wp--preset--font-size--meta);
	box-shadow: none;
}

:is(a, button).mp-knop:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible {
	border-radius: var(--wp--custom--radius--pil);
}

:is(a, button).mp-knop:is([disabled], [aria-disabled="true"]) {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Knoppengroep: onder 600 px elke knop 100 % breed. */
.is-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 599.98px) {
	.is-knoppen > *,
	.wp-block-buttons > .wp-block-button {
		flex: 1 1 100%;
	}

	.is-knoppen > .mp-knop,
	.wp-block-buttons > .wp-block-button > .wp-block-button__link {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* 7. Opbouw van de templates                                          */
/* ------------------------------------------------------------------ */

/* Header, main en footer sluiten op elkaar aan. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* De header-template-part is alleen een omhulling: zo werkt position: sticky in mp/header over de hele pagina. */
.wp-site-blocks > .mp-kop {
	display: contents;
}

main.mp-main > * {
	margin-block: 0;
}

/* Home en productpagina: secties uit de inhoud sluiten op elkaar aan. */
main.mp-main > .wp-block-post-content > * {
	margin-block: 0;
}

/* Kopvlak (juridisch, kennis): kruimelpad, H1 en inleiding op een licht vlak. */
.mp-paginakop {
	--mp-h1: clamp(34px, 3.4vw, 48px);
	--mp-h1-regel: 1.08;
	background-color: var(--wp--preset--color--vlak);
}

.mp-paginakop__binnen {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 24px clamp(48px, 6vw, 72px);
}

.mp-paginakop__tekst {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 860px;
}

.mp-paginakop .mp-paginakop__binnen > *,
.mp-paginakop .mp-paginakop__tekst > * {
	margin-block: 0;
}

/* Productpagina: kruimelpad boven de product-hero, op hetzelfde vlak. */
.mp-kruimelbalk {
	padding-top: 24px;
	background-color: var(--wp--preset--color--vlak);
}

/* Tweekoloms (juridisch, kennisartikel): inhoudsopgave naast de tekst, sticky vanaf 900 px. */
.mp-tweekoloms {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding-block: clamp(48px, 6vw, 88px);
}

main .mp-tweekoloms > * {
	margin-block: 0;
}

@media (min-width: 900px) {
	.mp-tweekoloms {
		display: grid;
		grid-template-columns: minmax(240px, 300px) minmax(0, 720px);
		column-gap: 64px;
		align-items: start;
	}

	.mp-tweekoloms > :not(.wp-block-post-content) {
		grid-column: 1;
		position: sticky;
		top: calc(var(--mp-header-h) + 24px);
		max-height: calc(100vh - var(--mp-header-h) - 48px);
		overflow-y: auto;
	}

	.mp-tweekoloms > .wp-block-post-content {
		grid-column: 2;
		grid-row: 1;
	}

	/* Geen inhoudsopgave (geen secties met inToc): één kolom. */
	.mp-tweekoloms:not(:has(> :not(.wp-block-post-content))) {
		grid-template-columns: minmax(0, 720px);
	}

	.mp-tweekoloms:not(:has(> :not(.wp-block-post-content))) > .wp-block-post-content {
		grid-column: 1;
	}
}

/* Artikel- en juridische tekst: eigen tekstkleur en kleinere H2 (plan §4.1). Secties: blokken-1 (mp/sectie). */
.mp-tekst,
.mp-artikel-inhoud,
.mp-juridisch-inhoud {
	--mp-h2: clamp(23px, 2.2vw, 28px);
	--mp-h2-regel: 1.2;
	--mp-h2-spatie: -0.02em;
	min-width: 0;
	color: var(--wp--preset--color--tekst-lang);
	line-height: 1.65;
}

/* Kennis (hub): overzicht en CTA-kaart. */
.mp-kennisinhoud {
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 64px);
	padding-block: clamp(48px, 6vw, 88px);
}

main .mp-kennisinhoud > * {
	margin-block: 0;
}

/* Terugvaltemplates (page, index). */
.mp-pagina-inhoud {
	padding-block: clamp(48px, 6vw, 88px);
}

.mp-pagina-inhoud > .mp-tekst {
	max-width: var(--wp--custom--breedte--content);
}

.mp-lijst .wp-block-post-template {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ankerdoelen niet onder de sticky header (plan §2.2); productpagina: ook onder de sectienavigatie. */
[id] {
	scroll-margin-top: calc(var(--mp-header-h) + 16px);
}

.mp-main--product [id] {
	scroll-margin-top: calc(var(--mp-header-h) + var(--mp-sectienav-h, var(--mp-sectienav-terugval)) + 16px);
}

/* Ook de focus (Tab/Shift+Tab) niet onder de sticky balken laten verdwijnen (WCAG 2.4.11). */
html {
	scroll-padding-top: calc(var(--mp-header-h) + 16px);
}

html:has(.mp-main--product) {
	scroll-padding-top: calc(var(--mp-header-h) + var(--mp-sectienav-h, var(--mp-sectienav-terugval)) + 16px);
}

/* Hoogte van de sticky sectienavigatie zonder JS (JS meet de echte hoogte). Onder 600 px plakt hij niet. */
:root {
	--mp-sectienav-terugval: 0px;
}

@media (min-width: 600px) {
	:root {
		--mp-sectienav-terugval: 108px;
	}
}

@media (min-width: 1120px) {
	:root {
		--mp-sectienav-terugval: 56px;
	}
}

/* Windows-contrastmodus: geen mix-blend-mode, anders verdwijnen productfoto's op zwart. */
@media (forced-colors: active) {
	img {
		mix-blend-mode: normal !important;
	}
}

/* Kolommen (core/columns) stapelen bij het breekpunt van het ontwerp (900 px), niet pas bij 782 px. */
@media (max-width: 899.98px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* 8. Tabellen (plan §4.4)                                             */
/* ------------------------------------------------------------------ */

:where(table) {
	width: 100%;
	border-collapse: collapse;
}

:where(th, td, caption) {
	text-align: left;
	vertical-align: top;
}

/* Scrollvlak rond een tabel (role="region", tabindex="0"). */
.is-scroll {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.is-scroll:focus-visible {
	outline-offset: -3px;
}

/* core/table: kader zoals in het ontwerp. */
.wp-block-table {
	margin-inline: 0;
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--radius--m);
	background-color: var(--wp--preset--color--wit);
}

.wp-block-table:has(> .is-scroll) {
	overflow: hidden;
}

.wp-block-table table {
	border: 0;
}

.wp-block-table table thead,
.wp-block-table table tfoot {
	border: 0;
}

.wp-block-table table :is(th, td) {
	padding: 14px 18px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.wp-block-table table thead tr {
	background-color: var(--wp--preset--color--vlak);
}

.wp-block-table table thead th {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.wp-block-table table tbody th {
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

.wp-block-table table tr + tr,
.wp-block-table table thead + tbody > tr:first-child,
.wp-block-table table tfoot tr {
	border-top: 1px solid var(--wp--preset--color--lijn);
}

.wp-block-table .wp-element-caption {
	margin: 0;
	padding: 14px 18px;
	border-top: 1px solid var(--wp--preset--color--lijn);
	font-size: var(--wp--preset--font-size--klein);
	text-align: left;
}

/* .is-stapel: onder 600 px rij voor rij onder elkaar, met kolomkop als label (data-label, plan §4.4). */
@media (max-width: 599.98px) {
	.is-stapel table {
		min-width: 0 !important;
	}

	.is-stapel table,
	.is-stapel thead,
	.is-stapel tbody,
	.is-stapel tfoot,
	.is-stapel tr,
	.is-stapel th,
	.is-stapel td {
		display: block;
	}

	.is-stapel thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.is-stapel table tr {
		padding: 12px 18px;
	}

	.is-stapel table :is(tbody, tfoot) :is(th, td) {
		padding: 2px 0;
	}

	.is-stapel table tbody th {
		font-weight: 600;
		color: var(--wp--preset--color--navy);
	}

	.is-stapel td[data-label]::before {
		content: attr(data-label);
		content: attr(data-label) / "";
		display: block;
		margin-top: 6px;
		font-size: var(--wp--preset--font-size--klein);
		font-weight: 600;
		color: var(--wp--preset--color--tekst-meta);
	}
}

/* ------------------------------------------------------------------ */
/* 9. FAQ: core/details met plus-icoon (45° bij open)                  */
/* ------------------------------------------------------------------ */

.wp-block-details {
	padding: 2px 24px;
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: var(--wp--custom--radius--m);
	background-color: var(--wp--preset--color--wit);
}

.wp-block-details[open] {
	padding-bottom: 20px;
}

.wp-block-details + .wp-block-details {
	margin-block-start: 10px;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 18px;
	list-style: none;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
	transition: transform 0.2s ease;
}

.wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.wp-block-details > summary ~ * {
	color: var(--wp--preset--color--tekst-zacht);
}

.wp-block-details > summary + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ */
/* 10. Minder beweging en Windows-contrastmodus                        */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	:is(a, button).mp-knop,
	.wp-block-button .wp-block-button__link {
		border-color: ButtonText;
	}

	.wp-block-details > summary::after {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	.is-open-punt {
		border: 1px dashed;
	}
}

/* ------------------------------------------------------------------ */
/* 1.0.2: verbeteringen na de controle op groot scherm en mobiel       */
/* ------------------------------------------------------------------ */

/* Grote schermen (kantoor, 1680 px en breder): de inhoud mag breder worden. */
@media (min-width: 1680px) {
	:root,
	body {
		--wp--custom--breedte--breed: 1400px;
	}
}

@media (min-width: 2200px) {
	:root,
	body {
		--wp--custom--breedte--breed: 1560px;
	}
}

/* Vaste ruimte tussen kop, tekst, lijst, tabel en knoppen in kolommen en kaders
   (de flow-afstand van WordPress verliest het van de margin: 0 op koppen en alinea's). */
.wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-column > :is(h2, h3, .wp-block-heading) + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-column > * + :is(h2, h3, .wp-block-heading) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Smalle secties (inkoop, veelgestelde vragen) links uitlijnen met de rest van de pagina,
   niet als smalle kolom in het midden van een breed scherm. */
.wp-block-mp-sectie.is-breedte-content > .mp-sectie__binnen.mp-container--content {
	max-width: var(--wp--custom--breedte--breed);
}

.wp-block-mp-sectie.is-breedte-content > .mp-sectie__binnen.mp-container--content > * {
	width: 100%;
	max-width: calc(var(--wp--custom--breedte--content) + 160px);
}

/* Lange lijsten op brede schermen in twee kolommen (veelgestelde vragen, inkooplijst). */
@media (min-width: 1024px) {
	.wp-block-mp-sectie:has(> .mp-sectie__binnen > .wp-block-details + .wp-block-details) > .mp-sectie__binnen {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		max-width: var(--wp--custom--breedte--breed);
	}

	.wp-block-mp-sectie:has(> .mp-sectie__binnen > .wp-block-details + .wp-block-details) > .mp-sectie__binnen > * {
		max-width: none;
	}

	.wp-block-mp-sectie:has(> .mp-sectie__binnen > .wp-block-details + .wp-block-details) > .mp-sectie__binnen > :not(.wp-block-details) {
		grid-column: 1 / -1;
	}

	#inkoop .wp-block-list,
	#inkoop > .mp-sectie__binnen > ul {
		columns: 2;
		column-gap: var(--wp--preset--spacing--40);
	}

	#inkoop .wp-block-list > li,
	#inkoop > .mp-sectie__binnen > ul > li {
		break-inside: avoid;
	}
}

/* Vragen in twee kolommen: geen extra marge op de items (anders verspringen de rijen). */
@media (min-width: 1024px) {
	.wp-block-mp-sectie:has(> .mp-sectie__binnen > .wp-block-details + .wp-block-details) > .mp-sectie__binnen > .wp-block-details {
		margin: 0;
	}
}

/* Twee witte secties onder elkaar: niet twee keer de volle sectieruimte. */
.wp-block-mp-sectie.is-achtergrond-wit + .wp-block-mp-sectie.is-achtergrond-wit,
.wp-block-mp-sectie.is-achtergrond-vlak + .wp-block-mp-sectie.is-achtergrond-vlak {
	padding-top: 0;
}