/* Layout single product */
.ob-product-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
	padding: 40px 0 0;
}
@media (max-width: 740px) {
	.ob-product-top {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	/* Volgorde op mobiel: categorie+titel, dan de foto, dan de rest van de
	   infotekst. .ob-product-top__info wordt "onzichtbaar" als grid-item
	   zodat zijn kinderen (__kop en __body) los herschikt kunnen worden. */
	.ob-product-top__info {
		display: contents;
	}
	.ob-product-top__kop {
		order: 1;
	}
	.ob-product-top__media {
		order: 2;
	}
	.ob-product-top__body {
		order: 3;
	}
}

/* Foto in witte box met dubbele rand (frame-in-frame, zoals de kaarten) */
.ob-product-top__media {
	position: relative;
	background: #fff;
	padding: 30px;
	border: 1px solid #e3504a; /* buitenrand */
}
.ob-product-top__media::before {
	content: "";
	position: absolute;
	inset: clamp(6px, 0.8vw, 10px); /* ruimte tussen buiten- en binnenrand */
	border: 1px solid #e3504a; /* binnenrand */
	pointer-events: none;
}
/* Klikbare foto: zelfde hover-gedrag als de kaarten (omhoog + schaduw),
   binnenste rand kleurt donkerrood. */
.ob-product-top__media.is-klikbaar {
	top: 0;
	transition: top 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ob-product-top__media.is-klikbaar::before {
	transition: border-color 0.15s ease-in-out;
}
.ob-product-top__media.is-klikbaar:hover,
.ob-product-top__media.is-klikbaar:focus-within {
	top: -8px;
	box-shadow: 0 8px 8px -2px rgba(227, 80, 74, 0.25);
}
.ob-product-top__media.is-klikbaar:hover::before,
.ob-product-top__media.is-klikbaar:focus-within::before {
	border-color: #e3504a;
}
.ob-product-foto-link {
	display: block;
	cursor: zoom-in;
}

.ob-product-top__media .ob-badges {
	position: absolute;
	top: 30px;
	left: 30px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	/* .ob-badge-categorie/.ob-badge-nieuw lezen deze var via CSS-inheritance. */
	--ob-badge-groot-maat: clamp(49px, 6vw, 65px);
}
.ob-product-foto {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Infotekst gecentreerd, juiste kleur (#3, #5) */
.ob-product-top__info {
	text-align: center;
	color: #631f1c;
}
.ob-product-top__info h1 {
	margin: 0.2em 0 0.3em;
}
.ob-categorie-label,
a.ob-categorie-label {
	display: inline-block;
	color: #e3504a;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
	text-decoration: underline;
}
a.ob-categorie-label:hover {
	color: #631f1c;
}
.ob-intro,
.ob-verpakking,
.artnummer {
	color: #631f1c;
}
.ob-intro {
	font-size: 21px;
	line-height: 1.6;
}
.artnummer {
	font-size: 13px;
}

/* Download + knop: los, gecentreerd, onder de tweekoloms-sectie (#10) */
.ob-product-cta {
	text-align: center;
	padding: 26px 0 0;
	color: #631f1c;
}
.ob-download {
	color: #631f1c;
	margin-bottom: 18px;
	text-align: left;
}
/* Mobiel: download-regel gecentreerd en dichter op de tweekoloms-sectie,
   met daaronder de proefpakket-knop. */
@media (max-width: 740px) {
	.ob-product-cta {
		padding-top: 6px;
	}
	.ob-download {
		text-align: center;
		margin-top: 0;
	}
	/* Verpakking / artnr+EAN / download dichter op elkaar.
	   De ruimte komt van Salient's `p { padding-bottom: var(--nectar-paragraph-bottom-spacing, 1.5em) }`,
	   niet van marges — dus die padding nullen en de afstand met margin regelen. */
	.ob-single-product .ob-verpakking,
	.ob-single-product .artnummer,
	.ob-single-product .ob-download {
		padding-bottom: 0 !important;
		margin-top: 0 !important;
	}
	.ob-single-product .ob-verpakking,
	.ob-single-product .artnummer {
		margin-bottom: 4px !important;
	}
	.ob-single-product .ob-download {
		margin-bottom: 10px !important;
	}
}
.ob-download a {
	color: #e3504a;
}

/* Proefpakket-knop: zelfde opbouw/styling als de knop in de beste-sectie.
   Staat alleen op mobiel; op desktop zit die knop al in de header. */
.ob-single-product .ob-product-knop {
	display: none;
	padding: 5px; /* rode "rand" tussen buitenkant en binnenrand */
	background: #e3504a;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 0.15s ease-in-out;
	margin-top: 20px;
}
.ob-single-product .ob-product-knop span {
	display: block;
	padding: 5px 20px;
	border: 1px solid #fff;
	background: #e3504a;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ob-single-product .ob-product-knop:hover {
	background: #631f1c;
	box-shadow: none;
}
.ob-single-product .ob-product-knop:hover span {
	background: #631f1c;
	border-color: #fff;
	color: #fff;
}
@media (max-width: 740px) {
	.ob-single-product .ob-product-knop {
		display: inline-block;
	}
}

/* Meer ruimte tussen de secties (#8) */
.ob-specificaties,
.ob-smaakcombinaties,
.ob-inspiratie {
	margin-top: 70px;
}

/* Specificaties: twee kolommen — bereiding/bewaren links, allergenen rechts (#6) */
.ob-specificaties {
	text-align: left;
}
.ob-specificaties__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
@media (max-width: 740px) {
	.ob-specificaties__cols {
		grid-template-columns: 1fr;
		gap: 0;
	}
}
.ob-specificaties__col {
	column-count: 1 !important;
	columns: auto !important;
}
.ob-specificaties h4 {
	margin-bottom: 0.2em;
}
.ob-specificaties p {
	color: #631f1c;
}
.ob-disclaimer {
	font-size: 13px;
}

/* Smaakcombinaties: 2 kolommen, sauzen links / kruiden rechts (los per groep
   toe te voegen in de backend). Zelfde grid-patroon als .ob-specificaties__cols. */
.ob-smaakcombinaties {
	text-align: left;
}
.ob-smaakcombinaties__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
@media (max-width: 740px) {
	.ob-smaakcombinaties__cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}
.ob-smaakcombinaties__col h3 {
	margin: 0 0 12px;
}

/* Smaakcombinaties: kadertjes zonder bullets (#7) */
.ob-smaakcombinaties__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.ob-smaakcombinaties__list li {
	list-style: none !important;
	border: 1px solid #e3504a;
	padding: 10px 18px;
	color: #631f1c;
}
.ob-smaakcombinaties__list li::before,
.ob-smaakcombinaties__list li::marker {
	content: none !important;
	display: none;
}

/* Dieet-badges: witte pills met gekleurde rand + tekst per type */
.ob-badges .badge {
	display: inline-flex;
	align-items: center;
	background: #fff;
	color: #8cc63f; /* fallback/vega */
	border: 2px solid currentColor;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 6px 14px;
}
.ob-badges .badge-vega {
	color: #8cc63f;
}
.ob-badges .badge-lactosevrij {
	color: #5b9bd5;
}
/* Standaard: volledige tekst tonen, korte letter verbergen */
.ob-badges .badge-full {
	display: inline;
}
.ob-badges .badge-short {
	display: none;
}
/* Lagere resoluties (t/m 1200px): cirkel met alleen de letter (V / L) */
@media (max-width: 1200px) {
	.ob-badges .badge {
		width: 34px;
		height: 34px;
		padding: 0;
		justify-content: center;
		border-radius: 50%;
		font-size: 14px;
	}
	.ob-badges .badge-full {
		display: none;
	}
	.ob-badges .badge-short {
		display: inline;
	}
}
.ob-grid {
	display: grid;
	gap: clamp(16px, 2vw, 30px);
	margin-top: 20px;
	margin-bottom: 40px;
}
/* 3 koloms desktop → sneller naar 2 → 1 koloms mobiel */
.ob-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
	.ob-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.ob-grid--3 {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr; /* mobiel: alle kaarten even hoog */
	}
}
/* 2 koloms → 1 koloms mobiel */
.ob-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
	.ob-grid--2 {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr; /* mobiel: alle kaarten even hoog */
	}
}
/* ==========================================================================
   Gerecht detail — kop+intro, foto met overlappende productkaart, ingrediënten
   + bereidingswijze, byline, delen/made-to-create, "Bekijk ook"
   ========================================================================== */

/* Kop: kicker + titel + intro, gecentreerd boven de foto */
.ob-gerecht-intro {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(30px, 5vw, 0px) 20px clamp(20px, 3vw, 36px);
	text-align: center;
}
.ob-gerecht-kicker {
	margin: 0 0 6px;
	color: #e3504a;
	font-weight: 500;
	letter-spacing: 0.02em;
	margin-bottom: -30px;
}
.ob-gerecht-title {
	color: #e3504a;
	margin: 0 0 16px;
	font-size: clamp(32px, 7vw, 72px);
}
.ob-gerecht-intro__tekst {
	margin: 0;
	color: #631f1c;
	line-height: 1.6;
	font-size: clamp(16px, 2.4vw, 22px);
	margin-top: 6%;
}

/* Foto: afgeronde hoeken, referentiepunt voor de overlappende productkaart */
.ob-single-gerecht .ob-gerecht-header {
	position: relative;
	margin-bottom: clamp(40px, 6vw, 70px);
}
.ob-gerecht-header img.ob-gerecht-headerfoto {
	width: 100%;
	height: 45vh;
	min-height: 300px;
	object-fit: cover;
	display: block;
	border-radius: clamp(14px, 1.6vw, 20px);
}

/* Compacte, horizontale productkaart die over de foto valt (rechtsonder) */
.ob-product-overlay {
	position: absolute;
	right: clamp(16px, 2.5vw, 34px);
	bottom: clamp(16px, 2.5vw, 34px);
	z-index: 2;
	display: flex;
	align-items: stretch;
	width: clamp(220px, 26vw, 340px);
	background: #fff;
	padding: clamp(5px, 0.6vw, 7px); /* ruimte tussen buiten- en binnenrand */
	border: 1px solid #e3504a; /* buitenrand, scherpe hoeken */
	overflow: visible;
	text-decoration: none;
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ob-product-overlay:hover {
	transform: translateY(-8px);
	box-shadow: 0 14px 16px -6px rgba(227, 80, 74, 0.3);
}
.ob-product-overlay::before {
	content: "";
	position: absolute;
	inset: clamp(5px, 0.6vw, 7px);
	border: 1px solid #e3504a; /* binnenrand, zelfde dubbele-randopbouw als de productkaarten */
	pointer-events: none;
	
}
.ob-product-overlay__media {
	flex: none;
	width: clamp(64px, 9vw, 96px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-right: 1px solid #e3504a; /* scheidingslijn tussen foto en tekst */
}
.ob-product-overlay__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* volledige foto tonen, niet croppen */
}
.ob-product-overlay__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	padding: 10px clamp(14px, 1.6vw, 20px);
	min-width: 0;
}
.ob-product-overlay__label {
	color: #631f1c;
	font-size: clamp(12px, 1vw, 14px);
}
/* Productgroep ("Mini-croquette") tussen het label en de smaaknaam */
.ob-product-overlay__groep {
	color: #631f1c;
	font-size: clamp(12px, 1vw, 14px);
	font-weight: 600;
}
.ob-product-overlay__naam {
	color: #e3504a;
	font-family: 'Playfair Display', serif;
	font-weight: 600;
	font-size: clamp(16px, 1.6vw, 21px);
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ob-product-overlay__icon {
	position: absolute;
	top: clamp(8px, 0.8vw, 10px);
	right: clamp(8px, 0.8vw, 10px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(22px, 2.4vw, 28px);
	height: clamp(22px, 2.4vw, 28px);
	border-radius: 50%;
	background: #e3504a;
	color: #fff;
	transition: background-color 0.15s ease-in-out;
}
.ob-product-overlay__icon svg {
	width: 55%;
	height: 55%;
}
.ob-product-overlay:hover .ob-product-overlay__icon {
	background: #631f1c;
}
@media (max-width: 480px) {
	.ob-product-overlay {
		left: 16px;
		right: 16px;
		bottom: 16px;
		width: auto;
	}
	.ob-product-overlay__naam {
		white-space: normal;
	}
}
/* Desktop: kaart 1/3 groter (mobiel/tablet ongewijzigd) */
@media (min-width: 901px) {
	.ob-product-overlay {
		width: 453px;
	}
	.ob-product-overlay__media {
		width: 128px;
	}
	.ob-product-overlay__tekst {
		padding: 13px 27px;
	}
	.ob-product-overlay__label {
		font-size: 19px;
	}
	.ob-product-overlay__naam {
		font-size: 28px;
	}
	.ob-product-overlay__icon {
		top: 18px;
		right: 18px;
		width: 32px;
		height: 32px;
	}
}

/* Tweekoloms: ingrediënten | bereidingswijze */
.ob-gerecht-layout {
	display: grid;
	grid-template-columns: clamp(220px, 30%, 340px) 1fr;
	gap: clamp(24px, 3.5vw, 60px);
	align-items: start;
	padding: 0 0 clamp(40px, 6vw, 70px);
}
/* Zonder ingrediënten én zonder gekoppeld product vervalt de zijkolom; de
   bereidingswijze (incl. byline en deelknoppen) loopt dan over de volle breedte. */
.ob-gerecht-layout--vol {
	grid-template-columns: 1fr;
}
@media (max-width: 900px) {
	.ob-gerecht-layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.ob-gerecht-ingredienten.is-leeg {
		display: none; /* mobiel geen lege kolom reserveren */
	}
}

/* Ingrediënten: dubbele rand (frame-in-frame) op wit, zoals de productkaarten
   (.ob-card / .ob-card__inner). Zonder ingrediënten blijft de kolom
   (onzichtbaar) bestaan zodat de tekst niet verspringt. */
.ob-gerecht-ingredienten {
	position: sticky;
	top: 120px;
	background: #fff;
	padding: clamp(6px, 0.9vw, 10px); /* ruimte tussen buiten- en binnenrand */
	border: 1px solid #e3504a; /* buitenrand */
	color: #631f1c;
}
.ob-gerecht-ingredienten.is-leeg {
	background: none;
	padding: 0;
	border: none;
	min-height: 1px;
}
/* Kolom met de productkaart i.p.v. ingrediënten: de kaart heeft zijn eigen
   dubbele rand, dus het kader van de ingrediëntenlijst moet hier weg. */
.ob-gerecht-ingredienten--kaart {
	background: none;
	padding: 0;
	border: none;
}
.ob-gerecht-ingredienten--kaart .ob-card {
	width: 100%;
}
.ob-gerecht-ingredienten__inner {
	border: 1px solid #e3504a; /* binnenrand */
}
.ob-gerecht-ingredienten__titel {
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid #e3504a;
	font-family: 'Playfair Display', serif;
	text-transform: lowercase;
	font-size: 22px;
	color: #e3504a;
}
.ob-gerecht-ingredienten__lijst {
	list-style: none !important;
	margin: 0;
	padding: 16px 24px 22px;
}
.ob-gerecht-ingredienten__lijst li {
	position: relative;
	list-style: none !important;
	padding: 6px 0 6px 20px !important;
	margin: 0;
	line-height: 1.4;
}
.ob-gerecht-ingredienten__lijst li::before {
	content: "" !important;
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #e3504a;
}
@media (max-width: 900px) {
	.ob-gerecht-ingredienten {
		position: static;
	}
}

.ob-gerecht-content {
	min-width: 0; /* laat de tekstkolom krimpen in de grid */
}
.ob-gerecht-content__titel {
	margin: 0 0 16px;
	color: #e3504a;
}
.ob-gerecht-text {
	color: #631f1c;
}
.ob-gerecht-text p {
	line-height: 1.6;
}

/* Byline: "Een recept van [naam] – [restaurant] →" */
.ob-gerecht-byline {
	margin: 24px 0 0;
	color: #631f1c;
}
.ob-gerecht-byline a {
	color: #631f1c;
	text-decoration: none;
}
.ob-gerecht-byline a:hover {
	color: #e3504a;
}

/* Footer: delen (links) + made-to-create-knop (rechts) */
.ob-gerecht-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(227, 80, 74, 0.3);
}
.ob-gerecht-share {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ob-gerecht-share__label {
	color: #631f1c;
	font-weight: 500;
	margin-right: 4px;
}
.ob-gerecht-share__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: #e3504a;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}
.ob-gerecht-share__btn svg {
	width: 55%;
	height: 55%;
}
/* Instagram-icoon is een dunne camera-omtrek i.p.v. een dicht logo, en
   oogt daardoor bij gelijke afmeting kleiner/lichter dan Facebook/LinkedIn. */
.ob-gerecht-share__btn--copy svg {
	width: 68%;
	height: 68%;
}
.ob-gerecht-share__btn:hover {
	background: #631f1c;
	color: white;
}
.ob-gerecht-share__btn--copy::after {
	content: "Link gekopieerd";
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	white-space: nowrap;
	background: #631f1c;
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.ob-gerecht-share__btn--copy.is-copied::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* "Made to create"-knop: exact dezelfde opbouw/styling als .ob-beste__button
   (rode buitenrand, witte binnenrand, rode vulling), dus altijd hetzelfde
   ongeacht het gerecht. Icoon zit ín de span, zodat hij binnen de witte
   binnenrand valt en de tekstkleur (wit) erft. */
.ob-gerecht-madetocreate {
	display: inline-block;
	padding: 5px; /* rode "rand" tussen buitenkant en binnenrand */
	background: #e3504a;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}
.ob-gerecht-madetocreate:hover {
	background: #631f1c;
}
.ob-gerecht-madetocreate span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 20px;
	border: 1px solid #fff;
	background: #e3504a;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ob-gerecht-madetocreate:hover span {
	background: #631f1c;
	border-color: #fff;
	color: #fff;
}
.ob-gerecht-madetocreate svg {
	width: 18px;
	height: 18px;
	flex: none;
	color: #fff;
}

/* "Bekijk ook": gecentreerde grid met andere gerechtkaarten */
.ob-gerecht-bekijkook {
	padding: clamp(40px, 6vw, 80px) 0;
}
.ob-gerecht-bekijkook__titel {
	text-align: center;
	color: #e3504a;
	margin: 0 0 clamp(24px, 3vw, 40px);
}
.ob-gerecht-bekijkook__grid {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* Kaarten — dubbele rand (frame-in-frame), schaalbaar */
.ob-card {
	/* Maten van het chevron-rondje en het kader als variabelen, want ze worden op
	   vier plekken gebruikt: het rondje zelf, de badges ernaast (zelfde hoogte en
	   inspringing, zodat de middens uitlijnen), het kaderrandje, en de CTA-tekst
	   die ruimte vrijhoudt zodat de titel niet tegen het rondje aan loopt.
	   cqw (= % van de kaartbreedte via container-type hieronder) i.p.v. vw, want
	   vw volgt het venster, niet de kaart — bij 3/2/1-koloms grids wordt een
	   kaart soms breder terwijl het venster smaller wordt (en andersom). */
	container-type: inline-size;
	--ob-card-rand: clamp(6px, 3cqw, 10px);
	--ob-card-icoon-inspring: clamp(20px, 9.5cqw, 34px);
	--ob-card-icoon-maat: clamp(30px, 12cqw, 42px);
	/* Categorie- en "Nieuw"-badge zijn 15px groter dan het chevron-rondje. */
	--ob-badge-groot-maat: calc(var(--ob-card-icoon-maat) + 15px);
	position: relative;
	display: flex;
	flex-direction: column;
	top: 0;
	background: #fff;
	padding: var(--ob-card-rand); /* ruimte tussen buiten- en binnenrand */
	text-decoration: none;
	color: inherit;
	border: 1px solid #e3504a; /* buitenrand */
	transition: top 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.ob-card:hover {
	top: -8px;
	box-shadow: 0 8px 8px -2px rgba(227, 80, 74, 0.25);
}
.ob-card[hidden] {
	display: none;
}

/* Binnenrand (frame) rond de inhoud */
.ob-card__inner {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	border: 1px solid #e3504a;
}

/* Chevron-rondje: absoluut rechtsboven, crème met dunne rode chevron */
.ob-card__icon {
	position: absolute;
	top: var(--ob-card-icoon-inspring);
	right: var(--ob-card-icoon-inspring);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ob-card-icoon-maat);
	height: var(--ob-card-icoon-maat);
	border-radius: 50%;
	background: #f4ebe0;
	color: #e3504a;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ob-card__chevron {
	display: block;
	width: 62%;
	height: 62%;
}
.ob-card:hover .ob-card__icon {
	background: #e3504a;
	color: #fff;
}

/* Media: foto met padding (inset van binnenrand); onderlijn over volle breedte */
.ob-card__media {
	position: relative;
	z-index: 1;
	/* meer ruimte boven de foto -> langwerpiger kaart; minder eronder zodat
	   de boog+titel dichter tegen de foto aan staan (~40px omhoog). */
	padding: clamp(34px, 5vw, 64px) clamp(14px, 1.8vw, 24px) clamp(0px, 1vw, 20px);
}
/* Badges links op kaartniveau, op dezelfde hoogte + verticaal gecentreerd als het
   chevron-rondje rechts (zelfde top en hoogte => centers lijnen uit). Kinderen
   die groter zijn dan deze hoogte (categorie/nieuw) blijven door align-items:
   center gewoon verticaal gecentreerd, ze mogen prima over de randen heen. */
.ob-card > .ob-badges {
	position: absolute;
	top: var(--ob-card-icoon-inspring);
	left: var(--ob-card-icoon-inspring);
	height: var(--ob-card-icoon-maat);
	z-index: 3;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
/* Categorie-badge (Vlees/Vega/Kaas/Schaaldieren): vierkant SVG-icoon. */
.ob-badge-categorie {
	display: block;
	flex: none;
	width: var(--ob-badge-groot-maat);
	height: var(--ob-badge-groot-maat);
	line-height: 0;
}
.ob-badge-categorie svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* Als link (naar het overzicht van die soort): rustig vergroten bij hover. */
a.ob-badge-categorie {
	transition: transform 0.25s ease;
}
a.ob-badge-categorie:hover,
a.ob-badge-categorie:focus-visible {
	transform: scale(1.15);
}
/* Productkaart: dekkende link naar het product; de badges (z-index 3) liggen
   erboven en blijven dus zelf klikbaar. */
.ob-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}
/* Kopje per productgroep op een soort-overzicht ([omabobs_producten soort="…"]) */
/* Geen eigen marge erboven: de 40px onder het vorige grid is de tussenruimte,
   en het eerste kopje sluit zo direct aan op de paginatitel. */
.ob-producten__groep {
	margin: 0;
	text-align: center;
	color: #e3504a;
}
/* "Nieuw"-rondje: los aan te vinken per product, zelfde maat als de
   categorie-badge, dunne rode rand, tekst in dezelfde kleur. */
.ob-badge-nieuw {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	/* Altijd rond: border-box zodat padding en rand binnen de maat vallen, en
	   de zijpadding relatief aan het rondje zelf. Een %-padding rekent met de
	   breedte van de ouder, waardoor het rondje op sommige schermbreedtes
	   breder dan hoog (ovaal) werd. */
	box-sizing: border-box;
	width: var(--ob-badge-groot-maat);
	height: var(--ob-badge-groot-maat);
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid #e3504a;
	background: #fff;
	color: #e3504a;
	font-family: 'Playfair Display', serif;
	font-size: calc(var(--ob-badge-groot-maat) * 0.24);
	line-height: 1;
	text-align: center;
	padding: 0 calc(var(--ob-badge-groot-maat) * 0.06); /* voorkomt dat "Nieuw" de rand raakt */
}
.ob-card__img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important; /* natuurlijke verhouding van de afbeelding */
	margin-bottom: 0 !important; /* overschrijft thema's .row .col img */
}
.ob-card__media--cover .ob-card__img {
	object-fit: cover;
}
/* Gerechtenkaart: vierkante foto flush tegen de binnenrand, geen onderlijn
   (de titel krijgt zijn eigen rode balk, zie verderop). */
.ob-card--gerecht .ob-card__media {
	padding: 0;
}
.ob-card--gerecht .ob-card__img {
	border-radius: 0;
	aspect-ratio: 1 / 1;
}
/* Transparante tussenruimte tussen buiten- en binnenrand i.p.v. wit */
.ob-card--gerecht {
	background: transparent;
}
/* Titel als rode balk met witte tekst, direct onder de vierkante foto */
.ob-card--gerecht .ob-card__title,
.ob-card--gerecht h3.ob-card__title {
	background: #e3504a;
	color: #f4ebe0;
	padding: clamp(16px, 2vw, 26px) clamp(16px, 2vw, 24px);
		text-align: left !important;

}
.ob-card__title,
.ob-card h3.ob-card__title {
	position: relative;
	margin: 0 !important; /* overschrijft thema's .row .col h3 margin-bottom */
	padding: clamp(12px, 1.5vw, 30px) !important;
	padding-top: clamp(6px, 14.4vw, 54px) !important; /* ruimte voor het ovale lijntje */
	text-align: center;
	/* !important: overschrijft Salient's heading-font (Zilla Slab) op h3 */
	font-family: 'Playfair Display', serif !important;
	text-transform: none !important;
	/* Schaalt mee met de viewport (2vw), met een vloer/plafond; zo past de
	   naam bij voorkeur op 1 regel en krimpt hij netjes mee op kleinere schermen. */
	font-size: clamp(16px, 2vw, 30px);
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Boog boven de titel: eigen SVG-path i.p.v. een CSS-ellipsrand, voor een
   exacte, consistente curve (niet op de gerechtenkaart, die heeft de rode
   titelbalk). Markup staat in card-categorie.php / card-product.php. */
.ob-card__arc {
	position: absolute;
	top: clamp(2px, 0.8vw, 3px);
	left: 0;
	width: 100%; /* raakt de binnenrand links en rechts */
	height: clamp(70px, 4vw, 48px); /* ronder boogje, compacter dan voorheen */
	overflow: visible;
	pointer-events: none;
}

/* Gerechtenkaart: gebogen bovenrand van de rode titelbalk, zelfde vorm als de
   boog bovenin collage 2 (ellips met rx 186%, bolling = 0.0368 \00d7 ry).
   De balk wordt met een negatieve marge over de onderkant van de foto getrokken
   en daar met een mask weer weggeknipt: aan de zijkanten blijft het rood staan,
   in het midden verdwijnt het over --diepte, waardoor de foto daar doorloopt en
   de scheidingslijn foto/rood een vloeiende boog wordt.
   De maten staan in cqw (= % van de kaartbreedte), zodat de curve op elke
   kaartgrootte dezelfde verhouding houdt. */
.ob-card--gerecht .ob-card__inner {
	container-type: inline-size;
}
.ob-card--gerecht .ob-card__title,
.ob-card--gerecht h3.ob-card__title {
	--ob-kaartboog-diepte: 5cqw;
	/* ry waarbij de bolling precies --diepte is: diepte / 0.0368 */
	--ob-kaartboog-ry: calc(var(--ob-kaartboog-diepte) * 27.17);
	position: relative;
	z-index: 2; /* over de foto heen (media heeft z-index 1) */
	margin-top: calc(-1 * var(--ob-kaartboog-diepte)) !important;
	-webkit-mask-image: radial-gradient(
		ellipse 186cqw var(--ob-kaartboog-ry)
		at 50% calc(var(--ob-kaartboog-diepte) - var(--ob-kaartboog-ry)),
		transparent 99.5%, #000 100%
	);
	mask-image: radial-gradient(
		ellipse 186cqw var(--ob-kaartboog-ry)
		at 50% calc(var(--ob-kaartboog-diepte) - var(--ob-kaartboog-ry)),
		transparent 99.5%, #000 100%
	);
}
.ob-card__tekst {
	text-align: center;
	margin: 0;
	padding: 0 clamp(12px, 1.5vw, 20px) clamp(12px, 1.5vw, 20px);
}

/* Berichtenkaart — crème kaart met rode serif-titel, volle-breedte lijn,
   datum + pijlknop onderaan (hergebruikt de dubbele rand van .ob-card) */
.ob-bericht {
	background: #f4ebe0;
}
.ob-bericht__title {
	margin: 0;
	color: #e3504a;
	text-transform: none !important; /* geen uppercase; thema-serif-font behouden */
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	padding: clamp(15px, 1.8vw, 10px) clamp(18px, 2vw, 15px);
	border-bottom: 1px solid #e3504a; /* volle-breedte lijn tegen de binnenrand */
}
.ob-bericht__body {
	flex: 1 1 auto;
	color: #631f1c;
	line-height: 1.6;
	padding: clamp(0px, 1.8vw, 0px) clamp(18px, 2vw, 15px);
}
.ob-bericht__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ob-bericht__date {
	color: #631f1c;
	font-size: 15px;
	margin-left: 18px;
}
.ob-bericht__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(38px, 3.4vw, 36px);
	height: clamp(38px, 3.4vw, 36px);
	background: #e3504a;
	color: #fff;
	transition: background-color 0.15s ease-in-out;
}
.ob-bericht__arrow svg {
	display: block;
	width: 55%;
	height: 55%;
}
.ob-bericht:hover .ob-bericht__arrow {
	background: #631f1c;
}

/* Global sections onder product/gerecht: binnenste nectar-container altijd
   100% van de outer .container (Salient doet dit standaard alleen <=999px,
   waardoor de rijen boven 1000px anders over de volle breedte vielen) */
.ob-global-sections .nectar-global-section > .container {
	max-width: 100%;
}
/* Afsluitend roze vlak onder product en gerecht, zoals op de gewone pagina's:
   de laatste global section (proefpakket + Let's connect) staat op roze dat
   doorloopt tot de footer. Bovenin dezelfde crème golf als Salient's
   "curve"-shape-divider op die pagina's (zelfde pad, 200px hoog, 180° gedraaid).
   Het vlak begint op de bovenrand van de sectie; het rode proefpakketvlak staat
   daar zelf al 64px onder, net als op de homepage. */
.ob-global-sections > .nectar-global-section:last-of-type {
	position: relative;
	z-index: 0; /* eigen stacking context: de vlakken blijven achter de inhoud */
	padding-bottom: 100px;
}
.ob-global-sections > .nectar-global-section:last-of-type::before,
.ob-global-sections > .nectar-global-section:last-of-type::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 50%;
	width: 100vw;
}
.ob-global-sections > .nectar-global-section:last-of-type::before {
	bottom: 0;
	transform: translateX(-50%);
	background: #f1cec8;
}
.ob-global-sections > .nectar-global-section:last-of-type::after {
	top: -1px; /* 1px overlap: anders schemert er een roze haarlijn boven de golf */
	height: clamp(100px, 14.3vw, 200px);
	transform: translateX(-50%) rotate(180deg);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23f4ebe0' d='M0 0c0 0 200 50 500 50s500-50 500-50v101h-1000v-100z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Filterknoppen */
.ob-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}
/* .ob-card zet zelf display:flex, wat de UA-regel [hidden]{display:none}
   anders overstemt — expliciet nodig zodat de filter-JS echt verbergt. */
.ob-gerechten-overzicht .ob-card[hidden] {
	display: none !important;
}
.ob-filter__btn {
	border: 1px solid #e3504a;
	background: transparent;
	color: #e3504a;
	border-radius: 999px;
	padding: 14px 24px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
		font-size: 16px !important;

}
.ob-filter__btn:hover,
.ob-filter__btn.is-active {
	background: #e3504a;
	color: #fff;
}

/* ===== Slider ===== */
/* De slider blijft op zijn plaatsingsbreedte (binnen de container). Alleen het
   patroon achter de slide is full-bleed via ::before. */
.ob-slider {
	position: relative;
	padding: clamp(28px, 5vw, 70px) 0;
}
.ob-slider::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background-color: #f4ebe0;
	/* border boven en onder het achtergrondpatroon */
	border-top: 1px solid #f0beb9;
	border-bottom: 1px solid #f0beb9;
	/* repeterend ruitpatroon (dunne rode diagonalen) */
	background-image:
		repeating-linear-gradient(45deg, rgba(227, 80, 74, 0.16) 0, rgba(227, 80, 74, 0.16) 1px, transparent 1px, transparent 46px),
		repeating-linear-gradient(-45deg, rgba(227, 80, 74, 0.16) 0, rgba(227, 80, 74, 0.16) 1px, transparent 1px, transparent 46px);
}
/* inhoud boven het patroon */
.ob-slider__viewport,
.ob-slider__dots {
	position: relative;
	z-index: 1;
}
.ob-slider__viewport {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y; /* horizontaal = slepen; verticaal scrollen blijft werken */
}
.ob-slider__viewport.is-dragging {
	cursor: grabbing;
}
.ob-slider__track {
	user-select: none;
}
.ob-slide__img {
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none; /* voorkomt dat het beeld de sleepbeweging onderschept */
}
.ob-slider__track {
	display: flex;
	transition: transform 0.5s ease;
}
.ob-slide {
	flex: 0 0 100%;
	min-width: 100%;
	display: flex; /* laat het frame uitrekken tot de (gelijke) slidehoogte */
}

/* Dubbele rand rond de slide */
.ob-slide__frame {
	flex: 1 1 auto;
	display: flex;
	width: 100%;
	background: #f4ebe0;
	border: 1px solid #e3504a;
	padding: clamp(5px, 0.7vw, 9px);
}
.ob-slide__inner {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
	border: 1px solid #e3504a;
	min-height: clamp(320px, 40vw, 560px);
}
/* Tablet: gestapeld zoals mobiel (zie verderop), maar met een bredere
   beeldverhouding zodat de foto niet de halve slide opeist. */
@media (max-width: 1100px) and (min-width: 741px) {
	.ob-slide .ob-slide__media {
		aspect-ratio: 2 / 1;
	}
}

/* Linker paneel: crème met beeld.
   Het beeld staat absoluut en telt NIET mee voor de hoogte; zo bepaalt alleen
   de tekstkolom + min-height de slidehoogte en verspringt de slider niet meer
   bij afbeeldingen met een andere verhouding. */
.ob-slide__media {
	position: relative;
	overflow: hidden;
	background: #f4ebe0;
}
/* Standaard: kleine afbeelding (bijv. een logo) gecentreerd, niet bijgesneden.
   Blijft absoluut, dus telt niet mee voor de slidehoogte.
   Selectors bewust met .ob-slide__media ervoor: Salient zet
   `.main-content img { height:auto; max-width:100% }`, en die wint anders. */
.ob-slide__media .ob-slide__img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 2 * clamp(24px, 4vw, 70px));
	max-width: 360px;
	height: auto;
	max-height: calc(100% - 2 * clamp(24px, 4vw, 70px));
	object-fit: contain;
}

/* Variant "vullend" (vinkje in de backend): beeld vult het hele mediavlak,
   bijgesneden. Blijft absoluut, dus de slidehoogte verandert er niet door. */
.ob-slide__media.ob-slide__media--vullend .ob-slide__img {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: none;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: center center;
}

/* Rechter paneel: donkerrood met tekst */
.ob-slide__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #631f1c;
	color: #fff;
	padding: clamp(28px, 4vw, 64px);
	/* diepte van de golf; de vorm eromheen schaalt mee met de paneelhoogte */
	--ob-golf-diepte: clamp(36px, 4.5vw, 72px);
}
/* De golf: het paneel zelf blijft een rechthoek, de bolling is een los
   stuk rood dat óver de foto uitsteekt. Zo kan de tekst er nooit onder
   verdwijnen en hoeft de foto niet onder het paneel door te lopen, hoe
   hoog of breed de slide ook wordt.
   Ellips met ry 130% van de hoogte en rx 13.01 x de diepte (zelfde rekensom
   als het paginaovaal): leftmost op de middenlijn, en op boven- en
   onderrand precies --ob-golf-diepte naar rechts, dus sluitend op het paneel.
   1px overlap met het paneel tegen een naad bij afronding. */
.ob-slide__content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(1px - var(--ob-golf-diepte));
	width: var(--ob-golf-diepte);
	background: inherit;
	clip-path: ellipse(calc(var(--ob-golf-diepte) * 13.01) 130% at calc(var(--ob-golf-diepte) * 13.01) 50%);
	pointer-events: none;
}
/* Gestapeld (mobiel/tablet): dezelfde bolling, een kwartslag gedraaid,
   bovenop het paneel over de onderkant van de foto. */
@media (max-width: 1100px) {
	.ob-slide__content {
		--ob-golf-diepte: clamp(22px, 4.5vw, 44px);
		padding-left: clamp(20px, 7vw, 40px);
		padding-right: clamp(20px, 7vw, 40px);
	}
	.ob-slide__content::before {
		top: calc(1px - var(--ob-golf-diepte));
		bottom: auto;
		left: 0;
		width: 100%;
		height: var(--ob-golf-diepte);
		clip-path: ellipse(130% calc(var(--ob-golf-diepte) * 13.01) at 50% calc(var(--ob-golf-diepte) * 13.01));
	}
}
.ob-slide__title {
	margin: 0 0 0.5em;
	color: #fff;
	text-transform: none !important; /* geen uppercase; thema-serif behouden */
	font-size: clamp(26px, 3vw, 46px);
	line-height: 1.1;
}
.ob-slide__text {
	color: #fff;
	line-height: 1.6;
}
.ob-slide__text > :last-child {
	margin-bottom: 0;
}
/* Optionele knop onder de tekst: crème buitenkant, rode binnenrand + tekst */
.ob-slide__button {
	display: inline-block;
	align-self: flex-start; /* niet full-width in de flex-kolom */
	margin-top: clamp(20px, 2.5vw, 32px);
	padding: 5px; /* crème "rand" tussen buitenkant en binnenrand */
	background: #f4ebe0;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;

}
.ob-slide__button:hover {
	background: #e3504a; /* buitenrand op hover felrood -> geen lichte rand meer */
}
.ob-slide__button span {
	display: block;
	padding: 5px 20px;
	border: 1px solid #e3504a;
	color: #e3504a;
	font-weight: 700;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
		max-height: 42px;
			font-weight: 500;
	font-size: 17px;
}
.ob-slide__button:hover span {
	background: #e3504a; /* felrood */
	border-color: #fff; /* witte rand */
	color: #fff; /* witte tekst */
}

/* Contactlijst in een slide: een opsommingslijst met telefoonlinks, per regel
   "<strong>Naam</strong> Regio <a href="tel:+31…">06 …</a>". Naam boven, de
   losse regiotekst valt vanzelf in de vrije cel eronder, nummer rechts.
   Is de tekstkolom smal (mobiel, tablet), dan alleen een ronde belknop. */
.ob-slide__text {
	container-type: inline-size;
}
.ob-slide__text ul:has(a[href^="tel:"]) {
	list-style: none;
	margin: clamp(16px, 2vw, 24px) 0 0;
	padding: 0;
	border-top: 1px solid rgba(244, 235, 224, 0.2);
}
.ob-slide__text ul:has(a[href^="tel:"]) > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 16px;
	align-items: center;
	margin: 0;
	padding: 9px 0;
	list-style: none;
	border-bottom: 1px solid rgba(244, 235, 224, 0.2);
	color: #dcbfb9; /* regio */
	font-size: 13px;
	line-height: 1.35;
}
.ob-slide__text ul:has(a[href^="tel:"]) > li > :is(strong, b) {
	grid-column: 1;
	grid-row: 1;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}
.ob-slide__text ul:has(a[href^="tel:"]) > li > a[href^="tel:"] {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	gap: 8px;
	color: #f4ebe0;
	font-size: 14px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}
.ob-slide__text ul:has(a[href^="tel:"]) > li > a[href^="tel:"]:hover {
	text-decoration: underline;
}
.ob-slide__text ul:has(a[href^="tel:"]) > li > a[href^="tel:"]::before {
	content: "";
	flex: none;
	width: 28px;
	height: 28px;
	border: 1px solid #e3504a;
	border-radius: 50%;
	/* telefoonicoon (Feather, MIT) */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e3504a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* Smalle tekstkolom: het nummer verdwijnt (blijft wel de linknaam voor
   schermlezers), de belknop wordt groter als tikdoel. */
@container (max-width: 400px) {
	.ob-slide__text ul:has(a[href^="tel:"]) > li > a[href^="tel:"] {
		font-size: 0;
		gap: 0;
	}
	.ob-slide__text ul:has(a[href^="tel:"]) > li > a[href^="tel:"]::before {
		width: 40px;
		height: 40px;
		background-size: 18px;
	}
}

/* "Nieuw"-rondje op een slide: rechtsboven op de foto, iets groter dan op de
   productkaarten. Rechts ruim genoeg ingesprongen om vrij te blijven van de
   golf van het rode paneel (die steekt tot ~72px over de foto). */
.ob-slide__media .ob-badge-nieuw {
	--ob-badge-groot-maat: clamp(64px, 7vw, 92px);
	position: absolute;
	z-index: 2;
	top: clamp(16px, 2.5vw, 32px);
	right: clamp(24px, 6vw, 88px);
}

/* Dots-navigatie */
.ob-slider__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: clamp(18px, 2vw, 30px);
}
.ob-slider__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #631f1c;
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}
.ob-slider__dot.is-active {
	width: 26px;
	background: #e3504a;
}

/* Mobiel en tablet: beeld boven, tekst onder (naast elkaar werd het op tablet te krap) */
@media (max-width: 1100px) {
	.ob-slide__inner {
		grid-template-columns: 1fr;
		/* mediavlak vast (auto = 3/2-hoogte), tekst vangt de resthoogte op zodat
		   de extra ruimte van gelijke slidehoogtes niet het beeldkader oprekt */
		grid-template-rows: auto 1fr;
		min-height: 0;
	}
	/* 1 kolom: het beeld staat absoluut, dus geef het mediavlak zelf een vaste
	   verhouding zodat de beeldhoogte overal gelijk is. */
	.ob-slide__media {
		aspect-ratio: 3 / 2;
	}
	/* Tekstinhoud bovenaan uitlijnen i.p.v. verticaal gecentreerd */
	.ob-slide__content {
		justify-content: flex-start;
	}
	.ob-slide__media .ob-slide__img {
		width: calc(100% - 2 * clamp(20px, 7vw, 40px));
		max-height: calc(100% - 2 * clamp(20px, 7vw, 40px));
	}
}

/* ===== Collage-sectie (rode ovaal op crème, fotocollage met quotes) ===== */
.ob-collage,
.ob-collage2 {
	/* Achtergrond- en tekstkleur van de collage. Standaard rood met crème/wit;
	   per collage te kiezen in OmaBobs > Instellingen > Collages (zet ze dan
	   inline op de sectie, zie OmaBobs_Collage::stijl()). */
	--ob-collage-bg: #e3504a;
	--ob-collage-tekst: #f4ebe0;
	--ob-collage-titel: #fff;
}
.ob-collage {
	position: relative;}
/* full-bleed rode "ingezoomde ovaal": boven én onder een vlakke, geleidelijke
   boog — het zichtbare deel is het middenstuk van een ellips die veel breder
   is dan het scherm (rx 130%). */
.ob-collage::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	top: clamp(50px, 8vw, 150px);
	bottom: 300px; /* ovaal eindigt halverwege de categoriekaarten */
	background: var(--ob-collage-bg);
	clip-path: ellipse(130% 50% at 50% 50%);
}
/* canvas met de verhouding van het ontwerp; alles absoluut geplaatst */
.ob-collage__canvas {
	position: relative;
	z-index: 1;
	aspect-ratio: 1218 / 1000;
}
blockquote.ob-collage__quote {
	border: none !important; /* geen thema-blockquote-lijn */
	border-left: 0 !important;
	background: none !important;
}
.ob-collage__quote::before,
.ob-collage__quote::after {
	content: none !important;
}
.ob-collage__quote {
	position: absolute;
	z-index: 1;
	left: 11%;
	top: 23%;
	width: 31%; /* iets breder */
	margin: 0;
	border: none;
	padding: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(16px, 1.9vw, 30px);
	line-height: 1.5;
	color: var(--ob-collage-tekst);
}
.ob-collage__img {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	border-radius: clamp(10px, 1.4vw, 10px);
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.ob-collage__img img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin-bottom: 0 !important; /* overschrijft thema's .row .col img */
	object-fit: cover;
	object-position: center center;
}
.ob-collage__img--groot {
	left: 51%;
	top: 4%;
	width: 34%;
	aspect-ratio: 1 / 1.02;
}
.ob-collage__img--cirkel {
	left: 71%;
	top: 23%;
	width: 25%; /* groter, zelfde middelpunt */
	aspect-ratio: 1 / 1;
	border-radius: 0;
	overflow: visible;
	box-shadow: none; /* geen rechthoekige wrap-shadow; schaduw komt van de PNG zelf */
}
.ob-collage__img--cirkel img {
	object-fit: contain; /* transparante bord-PNG is zelf al rond */
	/* drop-shadow volgt de alfarand van de ronde plaat i.p.v. de rechthoekige wrap */
	filter: drop-shadow(0px 10px 12px rgba(0, 0, 0, 0.3));
}
.ob-collage__img--links {
	left: 6.5%;
	top: 45%;
	width: 34.5%;
	aspect-ratio: 1.46 / 1;
}
.ob-collage__img--klein {
	left: 29%;
	top: 76%;
	width: 19%;
	aspect-ratio: 1.24 / 1;
}
/* Parallax: alleen een render-hint; de verplaatsing zet de JS (desktop-only) */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
	.ob-collage__img {
		will-change: transform;
	}
}

.ob-collage__watermerk {
	position: absolute;
	left: 60%;
	top: 65%;
	transform: translate(-50%, -50%); /* precies in het midden */
	width: 34%;
	height: auto;
	z-index: 0; /* achter alle content, wel over de rode bg */
}
.ob-collage__watermerk img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply; /* toon-op-toon donkerder op het rood */
	opacity: 1;
}
.ob-collage__tekst {
	position: absolute;
	z-index: 1;
	left: 57%;
	top: 66%;
	width: 33%; /* iets breder */
	color: var(--ob-collage-titel);
}
.ob-collage__tekst p {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(16px, 1.9vw, 30px);
	line-height: 1.5;
	color: var(--ob-collage-tekst);
}
.ob-collage__contact {
	border-top: 1px solid color-mix(in srgb, var(--ob-collage-tekst) 60%, transparent);
	padding-top: clamp(12px, 1.4vw, 22px);
}
.ob-collage__contact a {
	display: block;
	color: var(--ob-collage-tekst);
	text-decoration: none;
	font-size: clamp(13px, 1.1vw, 18px);
	line-height: 1.7;
}
.ob-collage__contact a:hover {
	text-decoration: underline;
}

/* Categorieën onderin de rode ovaal */
.ob-collage__categorieen {
	position: relative;
	z-index: 1;
	padding-top: clamp(30px, 4vw, 70px);
}
.ob-collage__cat-titel {
	margin-bottom: 40px !important;
	text-align: center;
	color: var(--ob-collage-titel);
}

/* Mobiel/tablet: gestapeld */
@media (max-width: 900px) {
	.ob-collage {
		padding-bottom: 0px;
	}
	.ob-collage::before {
		top: 90px;
		bottom: 200px;
		clip-path: ellipse(160% 50% at 50% 50%);
	}
	.ob-collage__canvas {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.ob-collage__img--groot,
	.ob-collage__img--cirkel,
	.ob-collage__img--links,
	.ob-collage__img--klein,
	.ob-collage__quote,
	.ob-collage__tekst {
		position: static;
		width: 100%;
	}
	.ob-collage__img--groot {
		order: 1;
	}
	.ob-collage__quote {
		order: 2;
	}
	.ob-collage__img--links {
		order: 3;
	}
	.ob-collage__tekst {
		order: 4;
	}
	.ob-collage__img--klein {
		display: none; /* burger-foto op mobiel weg */
	}
	.ob-collage__img--cirkel {
		display: block;
		position: relative;
		left: auto; /* reset desktop-offset, anders niet gecentreerd */
		top: auto;
		order: 1; /* direct na de grote foto (zelfde order, DOM-volgorde) */
		width: 68%;
		/* 50% van de eigen hoogte over de onderkant van de foto (gap gecompenseerd) */
		margin: calc(-35% - 24px) auto 0;
		z-index: 2;
	}
	.ob-collage__watermerk {
		display: none;
	}
	.ob-collage__quote,
	.ob-collage__tekst p {
		font-size: 19px;
	}
}

/* ==========================================================================
   "Slechts het beste" — croquette op getekend bord met labels + stippellijnen
   ========================================================================== */
.ob-beste {
	background: #f4ebe0;
	padding: 0;
}
.ob-beste__titel {
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	color: #631f1c;
	text-align: center;
}

/* Stage: vaste verhouding (referentie 2000x873) zodat labels + lijnen kloppen */
.ob-beste__stage {
	position: relative;
	aspect-ratio: 2000 / 873;
}

/* Bord + croquette gecentreerd in de stage.
   Hogere specificiteit + resets om Salient's `.row .col img` (margin-bottom,
   auto-width) binnen deze sectie te overrulen. */
.ob-beste__figuur {
	position: absolute;
	inset: 0;
}
.ob-beste .ob-beste__figuur img {
	margin: 0;
	max-width: none;
}
.ob-beste .ob-beste__plaat {
	position: absolute;
	left: 50%;
	top: 56%;
	transform: translate(-50%, -50%);
	width: 56%;
	height: auto;
}
.ob-beste .ob-beste__product {
	position: absolute;
	left: 50%;
	top: 37%;
	transform: translate(-50%, -50%);
	width: 38% !important;
	height: auto;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.12));
}

/* Knop onder de croquette; hoge z-index zodat hij over het beeld/bord valt.
   Zelfde opbouw als de slider-knop, maar felrode basis i.p.v. crème. */
.ob-beste__button {
	position: absolute;
	left: 50%;
	top: 71%;
	transform: translate(-50%, -50%);
	z-index: 3;
	display: inline-block;
	padding: 5px; /* rode "rand" tussen buitenkant en binnenrand */
	background: #e3504a;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}
.ob-beste__button:hover {
	background: #631f1c;
}
.ob-beste__button span {
	display: block;
	padding: 5px 20px;
	border: 1px solid #fff;
	background: #e3504a;
	color: #fff;
	font-weight: 500;
	font-size: 17px;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ob-beste__button:hover span {
	background: #631f1c;
	border-color: #fff;
	color: #fff;
}

/* Stippellijnen-overlay */
.ob-beste__lijnen {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.ob-beste__lijnen line {
	stroke: #e3504a;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 0.1 8; /* kleinere, dichter opeenstaande ronde stippen */
	vector-effect: non-scaling-stroke;
}

/* USP-icoon: alleen in de mobiele lijst, verborgen bij de desktop-callouts.
   Scoped + !important om Salient's `.full-width-section img` / `.row .col img`
   te overrulen (die zetten het beeld anders weer op display:block/auto-grootte). */
.ob-beste .ob-beste__icoon {
	display: none !important;
}

/* Labels */
.ob-beste__label {
	position: absolute;
	margin: 0;
	color: #e3504a;
	font-size: clamp(16px, 1.7vw, 18px);
	font-weight: 500;
	line-height: 1.3;
}
.ob-beste__label--1 { /* linksboven, uitgelijnd naar rechts richting product */
	right: 74%;
	top: 22%;
	text-align: right;
}
.ob-beste__label--2 { /* rechtsboven */
	left: 74%;
	top: 27%;
	text-align: left;
}
.ob-beste__label--3 { /* linksonder */
	right: 71%;
	top: 71%;
	text-align: right;
}

/* Tablet en kleiner: geen callout-diagram (dat vraagt brede ruimte naast het
   bord); beeld gecentreerd, labels eronder gestapeld als compacte lijst. */
@media (max-width: 1024px) {
	.ob-beste__stage {
		aspect-ratio: auto;
		margin-bottom: 6%;
	}
	
	.ob-beste__figuur {
		position: relative;
		inset: auto;
		/* iets hoger dan 5/2, zodat de vergrote plaat/croquette er verticaal in past */
		aspect-ratio: 11 / 5;
	}
	/* Beide beelden met dezelfde factor (1.18) vergroot, dus onderlinge
	   verhouding blijft gelijk; ze staan gecentreerd en mogen zijdelings
	   iets buiten de figuur vallen. */
	.ob-beste .ob-beste__plaat {
		width: 118%;
	}
	.ob-beste .ob-beste__product {
		width: 71%;
		top: 42%;
	}
	.ob-beste__lijnen {
		display: none;
	}
	.ob-beste .ob-beste__label {
		position: static;
		display: flex;
		align-items: center;
		gap: 12px;
		width: fit-content;
		text-align: left !important;
		/* !important: overrule Salient's p-marges (anders geen zichtbaar verschil) */
		margin: -25px auto 0 !important;
	}
	.ob-beste .ob-beste__label span {
		margin: 0;
	}
	.ob-beste__label br {
		display: none;
	}
	.ob-beste .ob-beste__icoon {
		display: block !important;
		flex: none;
		width: 30px !important;
		max-width: none;
		height: 40px !important;
		/* `.row .col img{margin-bottom:15px}` van Salient wint anders en maakt de rijen hoger */
		margin-bottom: 0 !important;
	}
		.ob-beste .ob-beste__icoon {
		margin-top: 10px;
	}
	.ob-beste__button {
		position: static;
		transform: none;
		display: block;
		width: fit-content;
		margin: 24px auto 0;
	}
}



/* ===== Lightbox (productfoto vergroot) ===== */
.ob-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgb(0 0 0 / 32%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out, visibility 0.2s;
}
.ob-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.ob-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	background: #fff;
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.45);
	cursor: zoom-out;
}
.ob-lightbox__close {
	position: absolute;
	top: clamp(22px, 3vw, 38px);
	right: clamp(22px, 3vw, 38px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #f4ebe0;
	color: #e3504a;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.ob-lightbox__close:hover {
	background: #631f1c;
	color: #fff;
}
body.ob-lightbox-open {
	overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.ob-lightbox {
		transition: none;
	}
}

/* ==========================================================================
   "Let's connect" — pil met tekst + ronde social-iconen
   ========================================================================== */
.ob-connect {
	display: inline-flex;
	align-items: center;
	gap: clamp(16px, 2.5vw, 32px);
	border: 1px solid #e3504a;
	border-radius: 999px;
	padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.4vw, 14px) clamp(6px, 0.8vw, 10px) clamp(20px, 2.5vw, 32px);
}
.ob-connect__tekst {
	color: #e3504a;
	font-weight: 500;
	font-size: clamp(16px, 1.6vw, 20px);
	white-space: nowrap;
}
.ob-connect__icons {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1vw, 14px);
}
.ob-connect__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(38px, 4.2vw, 52px);
	height: clamp(38px, 4.2vw, 52px);
	border-radius: 50%;
	background: #e3504a;
	color: #f4ebe0;
	transition: background-color 0.15s ease-in-out;
}
.ob-connect__icon:hover {
	background: #631f1c;
	color: white;
}
.ob-connect__icon svg {
	width: 45%;
	height: 45%;
}

/* Mobiel: pil mag over de volle breedte wrappen i.p.v. overlopen */
@media (max-width: 480px) {
	.ob-connect {
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		padding: 14px 18px;
	}
	.ob-connect__icons {
		flex-wrap: wrap;
		justify-content: center;
	}
}
/* Mobiel: evenveel ruimte boven en onder "Let's connect" (12%). De rij zelf
   heeft inline 3% erboven; eronder kwam de ruimte uit een vaste 100px (de lege
   roze rij op pagina's, de sectie-padding onder product/gerecht) en dat is op
   een smal scherm verhoudingsgewijs veel. Hier komt alles uit de rij zelf. */
@media (max-width: 690px) {
	.inner_row:has(.ob-connect) {
		padding-top: 9% !important; /* + 3% marge onder het rode proefpakketvlak = 12% */
		padding-bottom: 12% !important;
	}
	.wpb_row:not(.inner_row):has(.ob-connect) {
		margin-bottom: 0 !important;
	}
	/* de lege roze rij direct onder de proefpakket-rij */
	.wpb_row.has-global-section:has(.ob-connect) + .wpb_row,
	.wpb_row.has-global-section:has(.ob-connect) + .wpb_row .inner_row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	.ob-global-sections > .nectar-global-section:last-of-type {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   Scroll-kaarten ("Tether"-effect): elke kaart schuift van onderen over de
   vorige heen tijdens het scrollen, de sectie pint (blijft vast) zolang er
   kaarten te doorlopen zijn. Desktop-only; op mobiel/tablet (< 900px) een
   normale, gestapelde weergave zonder scroll-hijack (JS schakelt dit uit,
   zie omabobs-front.js).
   ========================================================================== */
.ob-stack {
	position: relative;
	--ob-stack-card-height: min(900px, 100vh);
	height: calc(var(--ob-stack-count, 1) * var(--ob-stack-card-height));
}
.ob-stack__pin {
	position: sticky;
	top: 0;
	height: var(--ob-stack-card-height);
	overflow: hidden;
}
.ob-stack__card {
	margin-top: 12%;
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(30px, 5vw, 80px);
	padding: clamp(30px, 5vw, 70px) clamp(24px, 5vw, 90px);
	background: #fff;
	border: 1px solid #e3504a;
	will-change: transform;
}
.ob-stack__tekst {
	color: #631f1c;
}
.ob-stack__lijn {
	display: block;
	width: 60px;
	height: 1px;
	background: #e3504a;
	margin-bottom: 18px;
}
.ob-stack__nummer {
	display: block;
	color: #e3504a;
	font-weight: 500;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
}
.ob-stack__titel {
	margin: 0 0 18px;
	color: #e3504a;
	font-size: clamp(28px, 3.2vw, 44px);
}
.ob-stack__body {
	margin: 0;
	line-height: 1.7;
	font-size: clamp(15px, 1.2vw, 17px);
}
/* Foto in dezelfde dubbele-randopbouw (frame-in-frame) als de productkaarten */
.ob-stack__media {
	position: relative;
	background: #fff;
	padding: clamp(14px, 1.6vw, 24px);
	border: 1px solid #e3504a;
}
.ob-stack__media::before {
	content: "";
	position: absolute;
	inset: clamp(6px, 0.8vw, 10px);
	border: 1px solid #e3504a;
	pointer-events: none;
}
.ob-stack__media-inner {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.ob-stack__img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin-bottom: 0 !important;
	object-fit: cover;
}
/* Mobiel/tablet: geen pin/scroll-hijack, gewoon onder elkaar (JS zet geen
   transforms meer, dus de kaarten hebben hier normale document-flow nodig). */
@media (max-width: 900px) {
	.ob-stack {
		height: auto;
	}
	.ob-stack__pin {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
	}
	.ob-stack__card {
		position: relative;
		inset: auto;
		grid-template-columns: 1fr;
		margin-bottom: 24px;
		transform: none !important;
	}
}

/* ==========================================================================
   Collage-sectie v2 — variant van .ob-collage: ovaal boven de content is
   omgedraaid (concaaf i.p.v. bol), "Proef 't nu" is een ronde CTA-button
   over het grote bord heen, en het grote bord draait heel subtiel.
   De originele .ob-collage-stijlen hierboven blijven ongewijzigd.
   ========================================================================== */
.ob-collage2 {
	position: relative;
	/* De cr\00e8me boog bovenin is een uitsnede uit een hele grote ovaal (net als
	   collage 1), maar zonder het hoge lege vlak: de ellips staat via een
	   negatieve clip-path-oorsprong grotendeels b\00f3ven het vlak, zodat alleen de
	   curve zelf ruimte inneemt.
	   --diepte = hoe diep de boog in het midden doorbuigt
	   --rand   = hoeveel cr\00e8me er aan de zijkanten overblijft
	   --ruimte = afstand tussen de boog en de eerste content */
	--ob-c2-arc-diepte: clamp(64px, 7.7vw, 134px);
	--ob-c2-arc-rand: clamp(20px, 2.4vw, 40px);
	--ob-c2-arc: calc(var(--ob-c2-arc-rand) + var(--ob-c2-arc-diepte));
	/* --rx = horizontale straal van de ellips, als percentage van de sectiebreedte.
	   Kleiner = kleiner "rondje" = sterker gekromde boog; de zoom blijft (je ziet
	   nog steeds alleen het middenstuk van de ellips, niet de uiteinden).
	   --ryf hoort bij --rx en zorgt dat de bolling exact --diepte blijft:
	   ryf = 1 / (1 - sqrt(1 - (0.5/rx)^2)). Bij rx 130%: 1/0.0769 = 13.01.
	   (Ter referentie: rx 186% -> ryf 27.17, rx 110% -> ryf 9.15, rx 100% -> ryf 7.46.) */
	--ob-c2-arc-rx: 130%;
	--ob-c2-arc-ryf: 13.01;
	--ob-c2-arc-ry: calc(var(--ob-c2-arc-diepte) * var(--ob-c2-arc-ryf));
	--ob-c2-arc-ruimte: 120px;
	/* afstand tussen het grote bord en de onderste tekst */
	--ob-c2-tekst-boven: 120px;
	/* afstand tussen de onderste tekst en de titel van de categorie\00ebn */
	--ob-c2-tekst-ruimte: 120px;
	padding-top: calc(var(--ob-c2-arc) + var(--ob-c2-arc-ruimte));
}
/* Het rode vlak is een rechthoek zonder curve; de bolling onderin komt van de
   ::after hieronder. Eerder zat die curve op dit vlak zelf via ry 100%, waardoor
   de diepte meeschaalde met de sectiehoogte en dus niet gelijk was aan de boog
   bovenin — precies het verschil in bolling dat zichtbaar was. */
.ob-collage2::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	top: 0;
	bottom: calc(150px + var(--ob-c2-arc-diepte));
	background: var(--ob-collage-bg);
}
/* De rode bolling onderin, als los vlak onder de rechthoek. Zelfde ellips en
   zelfde --ob-c2-arc-ry als de boog bovenin, alleen met het middelpunt b\00f3ven
   het vlak i.p.v. eronder — dus dezelfde bolling, de andere kant op.
   Middelpunt op (diepte - ry): onderrand in het midden op diepte, aan de
   zijkanten op 0, en dus een bolling van precies --ob-c2-arc-diepte. */
.ob-collage2::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	bottom: 150px; /* loopt door tot halverwege de categoriekaarten */
	height: var(--ob-c2-arc-diepte);
	background: var(--ob-collage-bg);
	clip-path: ellipse(var(--ob-c2-arc-rx) var(--ob-c2-arc-ry) at 50% calc(var(--ob-c2-arc-diepte) - var(--ob-c2-arc-ry)));
}
/* Bovenin de omgedraaide boog: een cr\00e8me ovaal \00f3ver het rood heen, met de
   bolling naar beneden. Zelfde --ob-c2-arc-rx als het rood, dus dezelfde
   "ingezoomde ovaal"-curve als onderin; het middelpunt ligt ver b\00f3ven het vlak
   zodat alleen de curve zelf hoogte inneemt en het cr\00e8me aan de zijkanten
   gewoon doorloopt. */
.ob-collage2__top-arc {
	position: absolute;
	z-index: 0;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	width: 100vw;
	height: var(--ob-c2-arc);
	background: #f4ebe0;
	clip-path: ellipse(var(--ob-c2-arc-rx) var(--ob-c2-arc-ry) at 50% calc(var(--ob-c2-arc) - var(--ob-c2-arc-ry)));
}
/* Hoger canvas dan collage 1: de beelden zijn hier op vaste px-maten gezet
   (810 / 480 / 280 bij 1100px container), dus de compositie is verticaal
   evenredig meegeschaald zodat de tekst onderin vrij van het bord blijft. */
.ob-collage2__canvas {
	position: relative;
	z-index: 1;
	/* referentiekader voor de cqw-eenheden van de CTA-tekst */
	container-type: inline-size;
	aspect-ratio: 1 / 1.32;
	/* De onderste 24.36% van het canvas is leeg (de laagste elementen — bord en
	   CTA — eindigen op ~75.6%). Die restruimte wordt hier weggesneden zodat de
	   tekst eronder op een exacte afstand van het bord staat.
	   24.36% van de hoogte = 24.36 \00d7 1.32 = 32.2% van de breedte. */
	margin-bottom: -32.2%;
}
blockquote.ob-collage2__quote {
	border: none !important;
	border-left: 0 !important;
	background: none !important;
}
.ob-collage2__quote::before,
.ob-collage2__quote::after {
	content: none !important;
}
.ob-collage2__quote {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0; /* bovenkant tekst = bovenkant foto linksboven */
	width: min(600px, 92%);
	margin: 0 auto;
	border: none;
	padding: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(16px, 1.9vw, 30px);
	line-height: 1.5;
	color: var(--ob-collage-tekst);
	text-align: center;
}
.ob-collage2__img {
	position: absolute;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.ob-collage2__img img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin-bottom: 0 !important;
	object-fit: cover;
	object-position: center center;
}
.ob-collage2__img--klein {
	left: -2%;
	top: 0; /* bovenkant foto = bovenkant tekst */
	width: 25.5%; /* 280px bij 1100px containerbreedte op desktop */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}
.ob-collage2__img--groot {
	left: 13.2%; /* gecentreerd: (100% - 73.6%) / 2 */
	top: 18.56%;
	width: 73.6%; /* 810px bij 1100px containerbreedte op desktop */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	transform-origin: 50% 50%;
	z-index: 1;
}
.ob-collage2__img--cirkel {
	left: 62%;
	top: 9.88%;
	width: 43.6%; /* 480px bij 1100px containerbreedte op desktop */
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	z-index: 2; /* ligt over de foto in het midden heen */
}
/* Het grote bord draait mee met de scrollpositie. De rotatie zelf zet de JS
   (omabobs-front.js) als inline transform; hier staat alleen de render-hint.
   Bewust geen CSS-animatie: die zou de inline transform overrulen. */
@media (prefers-reduced-motion: no-preference) {
	.ob-collage2__img--groot {
		will-change: transform;
	}
}

/* ronde "Proef 't nu"-button over het grote bord heen; alles in Oma Bobs rood */
.ob-collage2__cta {
	position: absolute;
	z-index: 3;
	left: 58.6%;
	top: 56.47%;
	width: 25.3%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: #fff;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: clamp(2px, 0.4vw, 6px);
	padding: clamp(8px, 1.5vw, 20px);
}
/* Tekst in de CTA schaalt mee met de cirkel zelf (cqw = % van de canvasbreedte)
   in plaats van met de viewport. Tussen ~900 en 1300px blijft de container van
   het thema namelijk even breed terwijl de viewport wel krimpt — met vw werd de
   tekst daar onnodig klein t.o.v. de even grote cirkel. */
.ob-collage2__cta-titel {
	font-family: 'Playfair Display', serif;
	font-size: clamp(15px, 2.18cqw, 28px);
	color: #e3504a;
}
.ob-collage2__cta-lijn {
	display: block;
	width: 60%;
	height: 1px;
	background: rgba(227, 80, 74, 0.3);
	margin: clamp(4px, 0.6vw, 10px) 0;
}
.ob-collage2__cta a {
	display: block;
	color: #e3504a;
	text-decoration: none;
	font-size: clamp(10px, 1.16cqw, 18px);
	line-height: 1.6;
}
.ob-collage2__cta a:hover {
	text-decoration: underline;
}
/* Variant 3 (Made-pagina): zelfde rondje op dezelfde plek, maar met een foto
   i.p.v. de witte CTA. Geen padding, zodat de foto het hele rondje vult. */
.ob-collage2__cta--foto {
	padding: 0;
	overflow: hidden;
	background: #f4ebe0;
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.ob-collage2__cta--foto img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin-bottom: 0 !important;
	object-fit: cover;
	object-position: center center;
}

.ob-collage2__watermerk {
	position: absolute;
	z-index: 0;
	left: -3.6%;
	top: 59.46%;
	width: 31%;
	height: auto;
}
.ob-collage2__watermerk img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
	opacity: 1;
}

/* Staat buiten het canvas in de normale flow, zodat de afstanden erboven
   (tot het bord) en eronder (tot de categorie\00ebn) allebei exact vastliggen en
   niet meebewegen met het aantal tekstregels of de schermbreedte. */
.ob-collage2__tekst {
	position: relative;
	z-index: 1;
	width: min(660px, 92%);
	margin: var(--ob-c2-tekst-boven) auto 0;
	text-align: center;
}
.ob-collage2__tekst p {
	margin: 0;
	font-family: 'Playfair Display', serif;
	font-size: clamp(18px, 1.9vw, 30px);
	line-height: 1.5;
	color: var(--ob-collage-tekst);
}

/* Categorie\00ebn onderin */
.ob-collage2__categorieen {
	position: relative;
	z-index: 1;
	padding-top: var(--ob-c2-tekst-ruimte);
}
.ob-collage2__cat-titel {
	margin-top: 0 !important; /* anders telt de h2-marge van het thema er bovenop */
	margin-bottom: 40px !important;
	text-align: center;
	color: var(--ob-collage-titel);
}

/* Mobiel/tablet: gestapeld */
@media (max-width: 900px) {
	.ob-collage2 {
		--ob-c2-arc-diepte: clamp(29px, 5.8vw, 54px);
		--ob-c2-arc-rand: clamp(12px, 2.4vw, 24px);
		--ob-c2-arc-ruimte: 50px;
		--ob-c2-tekst-boven: 60px;
		--ob-c2-tekst-ruimte: 60px;
		padding-bottom: 0px;
		/* De sectie zelf loopt hier over de volle schermbreedte, ook als hij in de
		   .container van het thema staat. Daardoor knipt overflow: hidden op de
		   schermrand af i.p.v. op de containerrand — nodig omdat het bord breder
		   is dan het scherm — terwijl de rode 100vw-vlakken er precies in passen
		   en dus niet worden afgesneden. De .container binnenin houdt de tekst
		   gewoon op leesbreedte. */
		width: 100vw;
		margin-left: calc(50% - 50vw);
		overflow: hidden;
	}
	.ob-collage2::before {
		bottom: calc(120px + var(--ob-c2-arc-diepte));
	}
	.ob-collage2::after {
		bottom: 120px;
	}
	.ob-collage2__watermerk {
		display: none;
	}
	.ob-collage2__canvas {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column;
		gap: 24px;
		margin-bottom: 0; /* gestapeld is er geen lege canvasruimte om weg te snijden */
	}
	.ob-collage2__img--klein,
	.ob-collage2__img--groot,
	.ob-collage2__quote {
		position: static;
		width: 100%;
	}
	.ob-collage2__img--klein {
		order: 1;
		width: 60%;
		margin: 0 auto;
	}
	.ob-collage2__quote {
		order: 2;
		font-size: 19px;
	}
	.ob-collage2__img--cirkel {
		display: none; /* tweede foto vervalt in de gestapelde weergave */
	}
	/* breder dan de container, zodat het bord links en rechts buiten beeld
	   loopt en daar wordt afgesneden */
	.ob-collage2__img--groot {
		order: 4;
		width: 130%;
		margin-left: -15%;
	}
	.ob-collage2__cta {
		position: relative;
		z-index: 2;
		left: auto;
		top: auto;
		width: 80%;
		/* zelfde relatieve overlap over het (nu 130% brede) bord als voorheen */
		margin: calc(-20% - 24px) auto 0;
		order: 5;
	}
	.ob-collage2__tekst {
		width: 92%;
		font-size: 19px;
	}

	.ob-collage2__cta-titel {
		font-size: 32px;
	}
	.ob-collage2__cta a {
		font-size: 16px;
	}
}

/* Collage 3 (Made-pagina) heeft geen tekst en geen categorieën onder het bord.
   De rode vlakken liepen normaal door tot halverwege de categoriekaarten
   (bottom: 150px / 120px); hier eindigen ze onderaan de sectie, met evenveel
   rood onder het bord als bij collage 2 tussen bord en tekst. */
.ob-collage2.ob-collage2--v3 {
	padding-bottom: calc(var(--ob-c2-tekst-boven) + var(--ob-c2-arc-diepte));
}
.ob-collage2.ob-collage2--v3::before {
	bottom: var(--ob-c2-arc-diepte);
}
.ob-collage2.ob-collage2--v3::after {
	bottom: 0;
}
/* Desktop: collage 3 heeft geen quote, dus de ruimte die collage 2 daarvoor
   vrijhoudt (boven het grote bord) was hier een leeg rood vlak. De foto's
   schuiven daarom omhoog: minder ruimte onder de boog, en bord, cirkel en
   rondje ~10.5% van de canvashoogte hoger. De laagste elementen eindigen nu op
   ~65.2% i.p.v. 75.6%, dus er wordt meer lege onderkant weggesneden:
   34.8% van de hoogte = 34.8 x 1.32 = 46% van de breedte. */
@media (min-width: 901px) {
	.ob-collage2.ob-collage2--v3 {
		--ob-c2-arc-ruimte: 40px;
	}
	.ob-collage2--v3 .ob-collage2__canvas {
		margin-bottom: -46%;
	}
	.ob-collage2--v3 .ob-collage2__img--groot {
		top: 8%;
	}
	.ob-collage2--v3 .ob-collage2__img--cirkel {
		top: 0;
	}
	.ob-collage2--v3 .ob-collage2__cta {
		top: 46%;
	}
	.ob-collage2--v3 .ob-collage2__watermerk {
		top: 49%;
	}
}
@media (max-width: 900px) {
	.ob-collage2.ob-collage2--v3 {
		padding-bottom: calc(60px + var(--ob-c2-arc-diepte));
	}
}

/* ==========================================================================
   Paginasjabloon "Pagina met ovaal bovenaan" — een roze vlak over de volle
   breedte bovenaan de pagina, met onderin dezelfde bolling als bovenaan de
   collage-sectie v2. Het vlak loopt achter de (vaste) Salient-header door;
   de content erin bouw je zelf in WPBakery.
   ========================================================================== */
body.ob-heeft-paginaovaal {
	/* hoogte tot waar de bolling begint; per pagina te overschrijven met het
	   meta-veld "Hoogte van het gekleurde vlak" (inline op .ob-paginaovaal) */
	--ob-ovaal-hoogte: clamp(420px, 46vw, 760px);
	/* hoe diep de bolling in het midden doorbuigt — zelfde schaal als collage 2 */
	--ob-ovaal-diepte: clamp(64px, 7.7vw, 134px);
	/* --rx en --ryf werken hetzelfde als bij collage 2: kleinere rx = kleiner
	   "rondje" = sterker gekromde boog, met behoud van de zoom.
	   ryf = 1 / (1 - sqrt(1 - (0.5/rx)^2)); bij rx 130% is dat 13.01. */
	--ob-ovaal-rx: 130%;
	--ob-ovaal-ryf: 13.01;
	--ob-ovaal-ry: calc(var(--ob-ovaal-diepte) * var(--ob-ovaal-ryf));
}
/* Het vlak staat als laatste in de DOM (wp_footer), maar wordt absoluut
   gepositioneerd t.o.v. <body> (Salient geeft die position:relative), dus
   top:0 is de bovenkant van de pagina. De wrapper hieronder tilt alle content
   erboven; zonder die z-index zou dit vlak eroverheen liggen. */
.ob-paginaovaal {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	/* het roze loopt door tot voorbij het diepste punt van de boog; de ::after
	   hieronder snijdt de bolling er weer uit */
	height: calc(var(--ob-ovaal-hoogte) + var(--ob-ovaal-diepte));
	background: #f1cec8;
	pointer-events: none;
}
/* De bolling, met dezelfde truc als .ob-collage2__top-arc: een crème ellips
   óver het roze heen in plaats van een uitsnede uit het roze zelf. Een ellips
   vult altijd een bolle vorm, dus een onderrand die in het midden omhóóg buigt
   kan alleen door het tegenovergestelde weg te dekken.
   Middelpunt op ry (dus onder het blok): het crème reikt in het midden tot
   bovenin het blok en aan de zijkanten tot 0, waardoor het roze in het midden
   precies --ob-ovaal-diepte hoger eindigt dan aan de rand. */
.ob-paginaovaal::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--ob-ovaal-diepte);
	background: #f4ebe0;
	clip-path: ellipse(var(--ob-ovaal-rx) var(--ob-ovaal-ry) at 50% var(--ob-ovaal-ry));
}
/* Gerecht met foto: geen vlak op vaste hoogte vanaf de
   paginatop, maar een ovaal dat aan de foto hangt, zodat de bolling altijd
   halverwege de foto uitkomt, hoe lang titel en intro ook zijn. ::before is het
   roze (loopt omhoog tot voorbij de paginatop; wat erboven uitsteekt valt weg),
   ::after de crème bolling eroverheen. z-index -1 legt beide achter de foto,
   binnen de stacking context van .container-wrap. */
.ob-gerecht-header::before,
.ob-gerecht-header::after {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 50%;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	pointer-events: none;
}
.ob-gerecht-header::before {
	height: 5000px;
	background: #f1cec8;
}
.ob-gerecht-header::after {
	height: var(--ob-ovaal-diepte);
	background: #f4ebe0;
	clip-path: ellipse(var(--ob-ovaal-rx) var(--ob-ovaal-ry) at 50% var(--ob-ovaal-ry));
}
body.ob-heeft-paginaovaal #ajax-content-wrap {
	position: relative;
	z-index: 1;
}
/* Salient legt drie dekkende vlakken over de volle breedte: #header-space (de
   opvuller onder de vaste header, background #fff), #page-header-wrap en
   .container-wrap (background #f8f8f8 met z-index:10). Die dekken het roze
   volledig af. Op dit sjabloon worden ze doorzichtig en levert <body> de
   paginakleur, zodat het roze vlak zichtbaar is en er onder de bolling
   gewoon cr\00e8me staat. */
body.ob-heeft-paginaovaal {
	background-color: #f4ebe0;
}
body.ob-heeft-paginaovaal #header-space,
body.ob-heeft-paginaovaal #page-header-wrap,
body.ob-heeft-paginaovaal .container-wrap {
	background-color: transparent;
}
/* De header krijgt de kleur van het ovaal in plaats van transparant te worden.
   Transparant maken vraagt een scroll-signaal (anders schuift de content bij het
   scrollen doorzichtig onder de vaste header door), en de classes die Salient
   daarvoor gebruikt — .detached, .small-nav — worden alleen gezet als de
   bijbehorende thema-opties aan staan. Deze aanpak hangt van niets af: bovenaan
   loopt de header naadloos over in het ovaal, en na scrollen blijft het een
   dekkende balk. Het !important is nodig omdat Salient's eigen
   `body[data-transparent-nav="1"][data-header-color=light] #header-outer`
   dezelfde specificiteit heeft; wie wint zou anders van de laadvolgorde afhangen. */
body.ob-heeft-paginaovaal #header-outer {
	background-color: #f1cec8 !important;
}
body.ob-heeft-paginaovaal #header-outer #top,
body.ob-heeft-paginaovaal #header-secondary-outer {
	background-color: transparent !important;
}

@media only screen and (max-width: 690px) {
	body.ob-heeft-paginaovaal {
		--ob-ovaal-hoogte: 420px;
		--ob-ovaal-diepte: 51px;
	}
}

/* ==========================================================================
   Made/Create-CTA's — [omabobs_cta]. Twee brede kaarten naast elkaar met een
   foto links waarvan de rechterrand naar buiten bolt, en tekst rechts.
   Het dubbele kader, de hover en het chevron-rondje komen uit .ob-card
   hierboven; hier staat alleen wat afwijkt.
   ========================================================================== */
.ob-cta-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 22px);
	/* samen tweederde van de contentbreedte, gecentreerd */
	max-width: 66.6667%;
	margin-inline: auto;
	/* De boog is dezelfde ellips als bij collage 2, een kwartslag gedraaid: daar
	   loopt de curve over de breedte van de sectie, hier over de hoogte van de
	   foto. Die hoogte is dus de spanwijdte, en alle maten hangen eraan vast —
	   daardoor gedraagt de boog zich bij schalen precies als bij collage 2.

	   --hoogte     spanwijdte van de boog; ook de hoogte van de kaart, zodat de
	                twee niet uit elkaar kunnen lopen.
	   --ry         straal langs de spanwijdte, 130% net als --ob-c2-arc-rx. Dit
	                bepaalt de gradatie: hoeveel van de ellips je ziet, en dus hoe
	                de kromming over de curve verdeeld is.
	   --verhouding diepte gedeeld door spanwijdte. Collage 2 heeft
	                --ob-c2-arc-diepte: clamp(64px, 7.7vw, 134px) over 100vw, dus
	                7,7%. Hier hetzelfde getal, nu over de fotohoogte.
	   --rxf        1 / (1 - sqrt(1 - (0.5/1.30)^2)) = 13.01, dezelfde constante
	                als --ob-c2-arc-ryf; hoort bij --ry 130% en zet de diepte om
	                naar de loodrechte straal.

	   Wil je hem boller zonder de gradatie of het schaalgedrag te veranderen, dan
	   is --verhouding de enige knop. --ry aanpassen verandert de gradatie zelf,
	   en dan moet --rxf mee volgens de tabel bij --ob-c2-arc-rx.

	   De max(..., 55%) is een ondergrens, geen smaakkeuze. De linkergrens van de
	   ellips ligt op breedte - 1,9231 x rx; wordt dat groter dan 0, dan valt de
	   rand in de foto en zie je witruimte links plus een gebogen linkerrand. Dat
	   gebeurt bij rx < 0,52 x breedte. Omdat rx aan de hoogte hangt en de breedte
	   daar los van kan groeien, treedt het op zodra de foto ruim 1,9x breder dan
	   hoog wordt - in de gestapelde weergave dus. De ondergrens houdt de ellips
	   daar breed genoeg. Bij de gewone tweekoloms-opmaak is de collage-waarde
	   groter en verandert er niets. */
	--ob-cta-hoogte: clamp(90px, 62cqw, 115px);
	--ob-cta-ry: 130%;
	--ob-cta-verhouding: 0.077;
	--ob-cta-rxf: 13.01;
	--ob-cta-rx: max(calc(var(--ob-cta-hoogte) * var(--ob-cta-verhouding) * var(--ob-cta-rxf)), 55%);
}
/* Overschrijft de kolomrichting van .ob-card__inner: foto links, tekst rechts.
   De kaart is nu smal, dus titel en tekst schalen mee met de kaartbreedte
   (cqw) in plaats van met het venster. */
.ob-cta {
	container-type: inline-size;
	/* De CTA-kaart is laag en breed; de inspringing van de productkaart (tot 34px)
	   duwt het rondje daar bijna tegen de onderrand. Kleiner, en verticaal
	   gecentreerd in plaats van een vaste afstand vanaf boven. */
	--ob-card-icoon-inspring: clamp(14px, 1.8vw, 24px);
}
.ob-cta .ob-card__icon {
	top: 50%;
	transform: translateY(-50%);
}
.ob-cta__inner {
	flex-direction: row;
	align-items: stretch;
	min-height: var(--ob-cta-hoogte);
}
.ob-cta__media {
	position: relative;
	flex: 0 0 42%;
	background: #e3504a;
	overflow: hidden;
	/* Middelpunt op --rx links van de rechterrand: op halve hoogte reikt de
	   ellips tot precies de rechterrand, boven- en onderaan tot de bolling daar
	   vandaan. Dat verschil is de kromming. */
	clip-path: ellipse(var(--ob-cta-rx) var(--ob-cta-ry) at calc(100% - var(--ob-cta-rx)) 50%);
}
/* De foto vult het hele zwarte vlak. Absoluut positioneren i.p.v. height:100%,
   want een procentuele hoogte hangt af van een definitieve hoogte op de ouder;
   met inset:0 speelt dat geen rol.
   Drie classes in de selector is nodig, niet cosmetisch: de CTA staat in een
   WPBakery-kolom en Salient heeft `.row .col img{margin-bottom:15px;height:auto}`
   met specificiteit (0,2,1). Een selector met twee classes verliest of komt op
   gelijkspel uit, waarna de laadvolgorde beslist.
   Op `img` in plaats van `.ob-cta__img`, zodat een themafilter dat de class
   herschrijft het niet stukmaakt. */
.ob-cta-duo .ob-cta .ob-cta__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}
.ob-cta__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: clamp(4px, 2cqw, 10px);
	padding: clamp(10px, 5cqw, 22px) clamp(10px, 6cqw, 26px);
	/* Rechts de ruimte van het rondje vrijhouden, zodat de titel er nooit tegenaan
	   loopt. Het rondje staat t.o.v. .ob-card, dit blok t.o.v. .ob-card__inner —
	   vandaar dat het kaderrandje er weer af moet. */
	padding-right: calc(var(--ob-card-icoon-inspring) + var(--ob-card-icoon-maat) - var(--ob-card-rand) + 8px);
	/* Eigen container: titel en ondertitel schalen met de ruimte die na die
	   uitsparing overblijft, niet met de hele kaartbreedte. Anders groeit de
	   tekst door terwijl de beschikbare plek juist krimpt. */
	container-type: inline-size;
}
/* 26cqw: "Create" is het langste woord en is in Playfair ongeveer 3,1x de
   lettergrootte breed, dus 26% van de beschikbare breedte past met marge. */
.ob-cta__titel {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(16px, 26cqw, 32px);
	line-height: 1;
	color: #e3504a;
}
.ob-cta__sub {
	font-size: clamp(11px, 11cqw, 16px);
	line-height: 1.25;
	color: #631f1c;
}

/* Onder 1000px is de halve breedte te smal voor twee kaarten naast elkaar. */
@media only screen and (max-width: 999px) {
	.ob-cta-duo {
		max-width: 100%;
		/* Alleen de spanwijdte wijzigt; de boog volgt vanzelf. */
		--ob-cta-hoogte: clamp(60px, 62cqw, 100px);
	}
	.ob-cta__titel {
		font-size: clamp(16px, 26cqw, 24px);
	}
}
@media only screen and (max-width: 690px) {
	.ob-cta-duo {
		grid-template-columns: minmax(0, 1fr);
		max-width: 100%;
	}
}

/* ==========================================================================
   Create-grid ([omabobs_tegels]): tegels in 3 verspringende kolommen. Beheer
   via OmaBobs > Create-grid. Blijft binnen de breedte van de kolom waarin hij
   staat (fullwidth of niet regel je in WPBakery).
   ========================================================================== */
.ob-tegels {
	--ob-tegel-gap: clamp(24px, 3.2vw, 48px);
	display: flex;
	align-items: flex-start;
	gap: var(--ob-tegel-gap);
	margin: 0 0 40px;
}
.ob-tegels__kolom {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ob-tegel-gap);
}
/* Verspringing zoals in het ontwerp: midden het laagst, rechts ertussenin.
   Percentage van de breedte, dus schaalt mee met het raster. */
.ob-tegels__kolom:nth-child(2) {
	padding-top: 10%;
}
.ob-tegels__kolom:nth-child(3) {
	padding-top: 5%;
}

/* Tegel: zelfde kadertje als de productfoto (dunne rode rand, witte rand
   eromheen); een tegel met link gaat bij hover omhoog zoals de kaarten. */
.ob-tegel {
	display: block;
}
.ob-tegel__kader {
	position: relative;
	display: block;
	top: 0;
	background: #fff;
	border: 1px solid #e3504a;
	padding: clamp(6px, 0.8vw, 10px);
	text-decoration: none;
	transition: top 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* !important: Salient zet `.row .col img { margin-bottom: 15px }`, en die won
   hier (hogere specificiteit) -> extra ruimte onder de foto in het kader. */
.ob-tegel .ob-tegel__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 !important;
}
a.ob-tegel__kader:hover,
a.ob-tegel__kader:focus-visible {
	top: -8px;
	box-shadow: 0 8px 8px -2px rgba(227, 80, 74, 0.25);
}

/* Rond rood icoontje met wit pijltje: deze tegel is klikbaar. */
.ob-tegel__icoon {
	position: absolute;
	top: clamp(14px, 1.8vw, 24px);
	right: clamp(14px, 1.8vw, 24px);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(30px, 3vw, 40px);
	height: clamp(30px, 3vw, 40px);
	border-radius: 50%;
	background: #e3504a;
	color: #fff;
	transition: background-color 0.15s ease-in-out;
}
.ob-tegel__icoon svg {
	display: block;
	width: 60%;
	height: 60%;
}
a.ob-tegel__kader:hover .ob-tegel__icoon {
	background: #631f1c;
}

/* Onderschrift: gewone bodytekst; alleen links erin zijn onderstreept. */
.ob-tegel__onderschrift {
	margin-top: 10px;
}
.ob-tegel__onderschrift p {
	margin: 0;
	padding: 0;
}
.ob-tegel__onderschrift a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Inladen: tegels schuiven zacht omhoog en faden in zodra ze in beeld komen
   (klasse via omabobs-front.js). Zonder JS of met "minder beweging" staan ze
   gewoon direct in beeld. */
@media (prefers-reduced-motion: no-preference) {
	.ob-tegels.is-animeerbaar .ob-tegel {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.6s ease, transform 0.6s ease;
	}
	.ob-tegels.is-animeerbaar .ob-tegel.is-zichtbaar {
		opacity: 1;
		transform: none;
	}
}

/* Tablet: 2 kolommen, mobiel: 1 kolom. De kolom-divs vallen weg zodat de
   tegels weer in hun gewone volgorde staan (order komt inline uit de PHP). */
@media (max-width: 900px) {
	.ob-tegels {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.ob-tegels__kolom {
		display: contents;
	}
	/* Ook hier verspringen: de rechterkolom zakt wat. Via top (telt niet mee
	   voor de rijhoogte, dus geen gaten links), de ruimte die dat onderaan kost
	   vangt de padding-bottom op. */
	.ob-tegels {
		--ob-tegel-verspring: clamp(40px, 9vw, 80px);
		padding-bottom: var(--ob-tegel-verspring);
	}
	.ob-tegel--rechts {
		position: relative;
		top: var(--ob-tegel-verspring);
	}
}
@media (max-width: 560px) {
	.ob-tegels {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: 0;
	}
	.ob-tegel--rechts {
		top: 0;
	}
}

/* ==========================================================================
   Veelgestelde vragen — [omabobs_faq]. Rustige lijst: geen vlakken of kaders,
   alleen een dunne lijn tussen de vragen. Uitklappen via <details>.
   ========================================================================== */
.ob-faq {
	max-width: 820px;
	margin: 0 auto;
	border-top: 1px solid rgba(227, 80, 74, 0.35);
}
.ob-faq__item {
	border-bottom: 1px solid rgba(227, 80, 74, 0.35);
}
.ob-faq__vraag {
	position: relative;
	display: block; /* haalt het standaard driehoekje weg */
	padding: 18px 44px 18px 0;
	cursor: pointer;
	color: #631f1c;
	transition: color 0.15s ease-in-out;
}
.ob-faq__vraag::-webkit-details-marker {
	display: none;
}
.ob-faq__vraag:hover {
	color: #e3504a;
}
/* De vraag is een <h2> voor zoekmachines, maar oogt als gewone tekst. */
.ob-faq .ob-faq__titel {
	margin: 0;
	font-family: inherit;
	font-size: clamp(16px, 1.4vw, 19px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}
/* Pijltje rechts: wijst omlaag, en omhoog als de vraag open staat. */
.ob-faq__vraag::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid #e3504a;
	border-bottom: 2px solid #e3504a;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}
.ob-faq__item[open] > .ob-faq__vraag::after {
	margin-top: -2px;
	transform: rotate(-135deg);
}
.ob-faq__antwoord {
	padding: 0 44px 20px 0;
	color: #631f1c;
	line-height: 1.6;
}
.ob-faq__antwoord p {
	padding-bottom: 0;
	margin: 0 0 10px;
}
.ob-faq__antwoord > :last-child {
	margin-bottom: 0;
}
.ob-faq__antwoord a {
	color: #e3504a;
	text-decoration: underline;
}

/* Nieuwsbericht-detail: categorie boven de titel voorlopig niet tonen. */
.single-post .featured-media-under-header__cat-wrap {
	display: none;
}