/* ==========================================================================
   Nero Wijn — 1:1 port van het goedgekeurde Vercel-ontwerp (nerowijn-v1).
   Warm ivory, warm near-black, bordeaux uit het logo als accent.
   Oswald condensed voor koppen, Archivo voor body, IBM Plex Mono voor labels.
   ========================================================================== */

:root {
	--ivory: #F2EDE4;
	--inkt: #16110F;
	--bordeaux: #98002E;
	--bordeaux-diep: #6E0022;
	--blush: #E9C4B4;
	--zilver: #B0B7BC;
	--display: var(--wp--preset--font-family--display, "Arial Narrow", sans-serif);
	--body: var(--wp--preset--font-family--body, sans-serif);
	--mono: var(--wp--preset--font-family--mono, monospace);
	--vlot: cubic-bezier(0.16, 1, 0.3, 1);
	--kader: 80rem;
	/* Eén rondingsschaal voor de hele site. De WhatsApp-knop was al rond,
	   dus knoppen zijn pillen en vlakken krijgen dezelfde familie. */
	--rond-pill: 999px;
	--rond-kaart: 18px;
	--rond-beeld: 18px;
	--rond-klein: 10px;
}

/* scrollbar-gutter: de poort en het mobiele menu zetten overflow op hidden.
   Zonder gereserveerde goot verdwijnt de scrollbar op Windows en verspringt
   de hele pagina op het moment dat de poort opengaat. */
html { scroll-behavior: smooth; overflow-x: clip; scrollbar-gutter: stable; }
body {
	background: var(--ivory);
	color: var(--inkt);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
::selection { background: var(--bordeaux); color: var(--ivory); }
img { max-width: 100%; height: auto; }

/* Gutenberg zet standaard 24px marge tussen blokken; dat gaf een lichte strook
   boven de hero. Onze secties regelen hun eigen ruimte. */
.wp-site-blocks > *,
main > *,
main .entry-content > *,
main .wp-block-post-content > *,
main .wp-block-group > * { margin-block-start: 0; }

/* ------------------------------------------------------------------ basis
   Display = Bodoni Moda: de didone van het klassieke wijnetiket. Groot,
   hoog contrast, gemengde kapitalen. Labels in Inter Tight, geen mono. */
.kop, .nero-kop {
	font-family: var(--display);
	font-weight: 500;
	text-transform: none;
	/* 1.0 knipte staartletters af (de j van wijn); 1.08 met wat ademruimte */
	line-height: 1.08;
	letter-spacing: -.018em;
	padding-bottom: .06em;
}
.kop em, .nero-kop em { font-style: italic; font-weight: 500; }
.mono-label {
	font: 600 .82rem/1.5 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bordeaux);
}
.op-donker .mono-label { color: var(--blush); }

.kader,
.nero-sectie-in { max-width: var(--kader); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) {
	.kader,
	.nero-sectie-in { padding-inline: 2.5rem; }
}
.nero-sectie { padding-block: clamp(3rem, 6vw, 5rem); }

.nero-skip { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--inkt); color: var(--ivory); padding: .8rem 1.2rem; border-radius: 0 0 var(--rond-klein) 0; }
.nero-skip:focus { left: 0; }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 4px; }

/* Knoppen: eigen Nero-vorm. Rechthoekig, brede letterafstand, en bij hover
   loopt de golf uit het logo door de knop heen. */
.knop {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	overflow: hidden;
	isolation: isolate;
	font-family: var(--body);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .11em;
	font-size: .78rem;
	line-height: 1;
	padding: 1.15rem 1.9rem;
	border-radius: var(--rond-pill);
	text-decoration: none;
	cursor: pointer;
	border: 0;
	/* Op een <button> zet de browser zelf een lichte vulling. De vlakke
	   varianten dekken die af met ::before, de lijnvarianten niet, en daar
	   werd de tekst dus wit op wit. */
	background: transparent;
	transition: color .45s var(--vlot), transform .45s var(--vlot);
}
.knop:hover { transform: translateY(-2px); }
.knop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	transition: background .45s var(--vlot);
}
/* vulling die van onderaf omhoog schuift; rustig en altijd leesbaar */
.knop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bordeaux-diep, #6E0022);
	transform: translateY(101%);
	transition: transform .45s var(--vlot);
}
.knop:hover::after, .knop:focus-visible::after { transform: translateY(0); }
.knop .pijl {
	display: inline-block;
	transition: transform .45s var(--vlot);
}
.knop:hover .pijl { transform: translateX(5px); }

.knop-vol { color: #fff !important; }
.knop-vol::before { background: var(--bordeaux); }
.knop-lijn { color: var(--inkt) !important; box-shadow: inset 0 0 0 1.5px rgb(22 17 15 / .3); }
.knop-lijn:hover { color: #fff !important; }
.knop-lijnlicht { color: var(--ivory) !important; box-shadow: inset 0 0 0 1.5px rgb(242 237 228 / .38); }
.knop-lijnlicht:hover { color: #fff !important; }

.tekstlink {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--bordeaux);
	font: 600 .78rem/1 var(--body);
	letter-spacing: .11em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.15rem 1.5rem 1.15rem 0;
	transition: gap .35s var(--vlot), color .3s ease;
}
.tekstlink::after { content: "\2192"; transition: transform .35s var(--vlot); }
.tekstlink:hover::after { transform: translateX(4px); }
.tekstlink:hover { color: var(--bordeaux); }
.op-donker .tekstlink:hover { color: var(--blush); }

/* ------------------------------------------------------------------ header */
.nero-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	color: var(--ivory);
	background: transparent;
	transition: background .3s ease;
}
.nero-header.is-vast { background: rgb(22 17 15 / .95); }
.nero-header-in {
	max-width: var(--kader);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
}
@media (min-width: 768px) { .nero-header-in { padding-inline: 2.5rem; } }
.nero-logo { flex: 0 0 auto; display: flex; }
.nero-logo img { display: block; width: 96px; height: auto; }
.nero-nav { display: flex; align-items: center; gap: 2.25rem; }
.nero-nav > a:not(.knop) {
	font-family: var(--body);
	font-weight: 600;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .13em;
	color: var(--ivory);
	text-decoration: none;
	transition: color .3s ease;
}
.nero-nav > a:not(.knop):hover { color: var(--blush); }
.nero-nav > a.is-actief { text-decoration: underline; text-decoration-color: var(--bordeaux); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nero-nav .knop { padding: .7rem 1.25rem; }
.nero-menu-knop { display: none; }

@media (max-width: 860px) {
	.nero-menu-knop {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		width: 44px; height: 44px;
		background: transparent; border: 0; cursor: pointer;
	}
	.nero-menu-knop span { display: block; width: 28px; height: 2px; background: var(--ivory); transition: transform .3s ease; }
	.nero-menu-knop[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
	.nero-menu-knop[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
	.nero-nav {
		position: fixed;
		inset: 76px 0 0;
		background: var(--inkt);
		border-top: 1px solid rgb(242 237 228 / .15);
		flex-direction: column;
		align-items: stretch;
		gap: .25rem;
		padding: 2rem 1.5rem 0;
		transform: translateX(105%);
		transition: transform .4s var(--vlot);
	}
	.nero-nav.is-open { transform: none; }
	.nero-nav > a:not(.knop) {
		font-size: 2.25rem;
		padding: 1rem 0;
		border-bottom: 1px solid rgb(242 237 228 / .1);
	}
	.nero-nav > a:not(.knop) .nav-nr { font: 500 .75rem/1 var(--mono); color: var(--zilver); margin-right: 1rem; letter-spacing: .1em; }
	.nero-nav .knop { margin-top: 2rem; align-self: flex-start; padding: 1rem 1.5rem; font-size: 1.1rem; }
}
@media (min-width: 861px) { .nav-nr { display: none; } }

/* --------------------------------------------------------------------- hero */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100svh;
	min-height: 600px;
	overflow: clip;
	background: var(--inkt);
	color: var(--ivory);
}
.hero-beeld { position: absolute; inset: 0; will-change: transform; }
.hero-beeld img,
.hero-beeld video {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 70% center;
	filter: grayscale(1);
	animation: herozoom 2.4s var(--vlot) both;
}
.hero-beeld video {
	/* De video vult het hele beeld; het middelpunt van de actie zit centraal,
	   niet rechts zoals bij de staande foto. */
	object-position: center center;
	/* Zwart-wit hoort bij de hero zoals hij is opgeleverd. Wil je de sfeervideo
	   in kleur zonder aan het posterbeeld te komen: zet deze regel op none. */
	filter: grayscale(1);
}
@keyframes herozoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero-beeld::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgb(22 17 15 / .9), rgb(22 17 15 / .25) 50%, rgb(22 17 15 / .45));
}
.hero-in {
	position: relative;
	max-width: var(--kader);
	margin-inline: auto;
	width: 100%;
	padding: 0 1.5rem 4rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	will-change: transform, opacity;
}
@media (min-width: 768px) {
	.hero-in { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 0 2.5rem 5rem; }
}
.hero h1 {
	font-size: clamp(2.9rem, 7.4vw, 6.8rem);
	margin: 0;
	max-width: 50rem;
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1.02;
	color: var(--ivory);
}
.hero h1 .regel { display: block; overflow: visible; padding-bottom: .08em; }
.hero h1 .regel > span {
	display: block;
	transform: translateY(110%);
	animation: regelop 1.1s var(--vlot) forwards;
}
.hero h1 .regel:nth-child(1) > span { animation-delay: .15s; }
.hero h1 .regel:nth-child(2) > span { animation-delay: .26s; }
.hero h1 .regel:nth-child(3) > span { animation-delay: .37s; }
@keyframes regelop { to { transform: translateY(0); } }
.hero-zij { max-width: 20rem; animation: introzij .9s var(--vlot) .72s both; }
@media (min-width: 768px) { .hero-zij { padding-bottom: .75rem; } }
@keyframes introzij { from { opacity: 0; transform: translateY(20px); } }
.hero-zij p { font-size: 1rem; line-height: 1.65; color: rgb(242 237 228 / .85); margin: 0 0 1.5rem; }
.hero-zij .hero-acties { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.hero-pijllink { color: var(--ivory); text-decoration: none; font-size: .9rem; }
.hero-pijllink .lijntje {
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	padding-bottom: .25rem;
	transition: background-size .5s var(--vlot);
}
.hero-pijllink:hover { color: var(--blush); }
.hero-pijllink:hover .lijntje { background-size: 0% 1px; }
.hero-pijllink .pijl { display: inline-block; margin-left: .4rem; transition: transform .5s var(--vlot); }
.hero-pijllink:hover .pijl { transform: translateX(4px); }
.hero-scrollhint, .hero-scrollhint-uit { display: none !important; }
.hero-scrollhint-oud {
	position: absolute;
	bottom: 1.5rem; left: 50%;
	transform: translateX(-50%);
	display: none;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	animation: introzij 1s ease 1.3s both;
}
@media (min-width: 768px) { .hero-scrollhint, .hero-scrollhint-uit { display: none !important; }
.hero-scrollhint-oud { display: flex; } }
.hero-scrollhint span:first-child { font: 500 .6rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgb(242 237 228 / .6); }
.hero-scrollhint .streep { display: block; height: 2rem; width: 1px; background: rgb(242 237 228 / .6); animation: scrollhint 2.2s ease-in-out infinite; }
@keyframes scrollhint {
	0%, 100% { transform: scaleY(.3); transform-origin: top; }
	50% { transform: scaleY(1); transform-origin: top; }
}
.hero-credit {
	position: absolute;
	bottom: .75rem; right: 1rem;
	font: 500 .6rem/1 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(242 237 228 / .4);
}

/* --------------------------------------------------------------------- lint */
/* Feitenlint: groot en editorial in de didone, niet het kleine muizenlint. */
.lint {
	display: flex;
	overflow: hidden;
	max-width: 100%;
	margin-top: -1px;
	background: var(--inkt);
	color: var(--ivory);
	padding-block: 1.6rem;
}
.lint ul {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 3rem;
	padding: 0 3rem 0 0;
	margin: 0;
	list-style: none;
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.15rem, 2vw, 1.7rem);
	line-height: 1;
	letter-spacing: -.01em;
	animation: lintloop 52s linear infinite;
	white-space: nowrap;
}
.lint li { display: flex; flex-shrink: 0; align-items: center; gap: 3rem; }
.lint li:nth-child(even) span:first-child { font-style: italic; color: var(--blush); }
.lint .bol { width: 5px; height: 5px; border-radius: 50%; background: var(--bordeaux); flex: 0 0 auto; }
@keyframes lintloop { to { transform: translateX(-100%); } }

/* ------------------------------------------------------------- secties alg. */
.sectie { padding-block: 6rem; }
@media (min-width: 768px) { .sectie { padding-block: 8rem; } }
.sectie-kop-xl { font-size: clamp(3rem, 7vw, 4.5rem); color: var(--bordeaux); margin: 1rem 0 0; }
@media (min-width: 768px) { .sectie-kop-xl { font-size: clamp(3rem, 6vw, 4.5rem); } }
.op-donker { background: var(--inkt); color: var(--ivory); }

/* ------------------------------------------------------- wijnhuizen-slider */
.wijnhuizen-sectie { overflow: clip; background: var(--ivory); padding-block: 6rem; }
@media (min-width: 768px) { .wijnhuizen-sectie { padding-block: 8rem; } }
.wijnhuizen-sectie .slider-wrap { margin-top: 3.5rem; }
.slider-voetnoot { margin-top: 1.5rem; max-width: 28rem; font: 400 .75rem/1.7 var(--mono); color: rgb(22 17 15 / .6); }

.slider-wrap { position: relative; }
.slider-pijlen { position: absolute; top: -5rem; right: 1.5rem; display: flex; gap: .75rem; z-index: 20; }
@media (min-width: 768px) { .slider-pijlen { right: 2.5rem; } }
/* slider loopt van rand tot rand, kop en pijlen blijven in het kader */
.slider-wrap { margin-inline: calc(50% - 50vw); }
.slider-wrap .slider-pijlen { right: max(1.5rem, calc((100vw - 80rem) / 2 + 2.5rem)); }
.slider-wrap .slider-voortgang { margin-inline: max(1.5rem, calc((100vw - 80rem) / 2 + 2.5rem)); }
.slider-pijl {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1px solid rgb(22 17 15 / .3);
	background: transparent;
	color: var(--inkt);
	font-size: 1.1rem;
	cursor: pointer;
	transition: all .3s ease;
}
.slider-pijl:hover { transform: scale(1.05); border-color: var(--bordeaux); background: var(--bordeaux); color: var(--ivory); }
.slider-pijl:disabled { pointer-events: none; opacity: .25; }
.slider-fade { position: absolute; inset-block: 0; width: 2.5rem; z-index: 10; pointer-events: none; transition: opacity .3s ease; }
@media (min-width: 768px) { .slider-fade { width: 4rem; } }
.slider-fade-links { left: 0; background: linear-gradient(to right, var(--ivory), transparent); }
.slider-fade-rechts { right: 0; background: linear-gradient(to left, var(--ivory), transparent); }
.slider-fade.is-uit { opacity: 0; }

.slider {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 1rem;
	padding-inline: 1.5rem;
	scroll-padding-left: 1.5rem;
	scrollbar-width: none;
	cursor: grab;
}
.slider::-webkit-scrollbar { display: none; }
.slider.is-slepen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.slider.is-slepen .slide { pointer-events: none; }

/* Kaarten: fullbleed huisfoto met witte naam gecentreerd (referentie l'exception) */
.slide {
	position: relative;
	display: grid;
	place-items: center;
	flex: 0 0 15.5rem;
	aspect-ratio: 3 / 4.35;
	scroll-snap-align: start;
	overflow: clip;
	border-radius: var(--rond-kaart);
	background: var(--inkt);
	text-decoration: none;
	isolation: isolate;
}
@media (min-width: 768px) { .slide { flex-basis: 18.75rem; } }
.slide-foto {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 1.2s var(--vlot);
}
.slide:hover .slide-foto { transform: scale(1.06); }
.slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(120% 65% at 50% 50%, rgb(22 17 15 / .5), transparent 72%),
		linear-gradient(rgb(22 17 15 / .32), rgb(22 17 15 / .18) 45%, rgb(22 17 15 / .52));
	transition: opacity .6s ease;
}
.slide:hover::after { opacity: .85; }
.slide-naam {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: .55rem;
	padding: 1.25rem;
	text-align: center;
}
.slide-naam h3 {
	margin: 0;
	color: #fff;
	font-family: var(--display);
	font-weight: 500;
	text-transform: uppercase;
	font-size: clamp(1.3rem, 1.6vw, 1.65rem);
	line-height: 1.05;
	letter-spacing: .1em;
	text-shadow: 0 2px 18px rgb(22 17 15 / .5);
}
/* Logo van het huis, in wit. brightness(0) maakt het eerst helemaal zwart,
   invert(1) daarna helemaal wit: zo wordt elk logo dezelfde witte vorm, of het
   nu een kleurenlogo of een zwart logo is. */
.slide-logo {
	display: block;
	width: auto;
	max-width: 70%;
	max-height: 56px;
	object-fit: contain;
	filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgb(22 17 15 / .45));
}
.slide-naam span {
	font: 500 .6rem/1.5 var(--mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .8);
	text-wrap: balance;
}
.slide-naam .streepje {
	display: block;
	width: 46px; height: 1px;
	background: rgb(255 255 255 / .55);
	transform: scaleX(.56);
	transition: transform .6s var(--vlot);
}
.slide:hover .slide-naam .streepje { transform: scaleX(1); }

.slider-voortgang {
	display: flex; align-items: center; gap: 1rem;
	margin: 1.5rem 1.5rem 0;
}
@media (min-width: 768px) { .slider-voortgang { margin-inline: 2.5rem; } }
.slider-voortgang .baan { position: relative; height: 1px; flex: 1; background: rgb(22 17 15 / .15); }
.slider-voortgang .baan .vulling {
	position: absolute;
	top: -1px; left: 0;
	width: 100%; height: 3px;
	background: var(--bordeaux);
	transform: scaleX(.08);
	transform-origin: left center;
	transition: transform .2s ease-out;
}
.slider-voortgang .teller { font: 500 .75rem/1 var(--mono); letter-spacing: .14em; color: rgb(22 17 15 / .5); }

/* ----------------------------------------------------------------- verhaal */
.verhaal { position: relative; overflow-x: clip; background: var(--ivory); padding-bottom: 6rem; }
@media (min-width: 768px) { .verhaal { padding-bottom: 8rem; } }
.verhaal-grid { display: grid; }
@media (min-width: 768px) { .verhaal-grid { grid-template-columns: 6fr 4fr; } }
.verhaal-beeld { min-height: 18rem; }
@media (min-width: 768px) { .verhaal-beeld { min-height: 34rem; } }
.verhaal-beeld img { width: 100%; height: 100%; object-fit: cover; }
.verhaal-tekst { position: relative; }
.verhaal-cirkel {
	position: absolute;
	right: -4rem; top: 2rem;
	width: 16rem; height: 16rem;
	border-radius: 50%;
	border: 1px solid rgb(22 17 15 / .1);
	display: none;
}
@media (min-width: 768px) { .verhaal-cirkel { display: block; } }
.verhaal-tekst-in { position: relative; padding: 2.5rem 1.5rem 0; }
@media (min-width: 768px) {
	/* kop steekt over de foto; de ivoren plaat eronder houdt het contrast goed */
	.verhaal-tekst-in {
		margin-left: -7rem;
		padding: 3rem 2rem 3rem;
		background: var(--ivory);
		z-index: 2;
	}
}
.verhaal-tekst-in .sectie-kop-xl { margin-top: 0; }
.verhaal-alinea { margin-top: 2rem; max-width: 24rem; }
@media (min-width: 768px) { .verhaal-alinea { margin-left: 6rem; } }
.verhaal-alinea p { line-height: 1.65; color: rgb(22 17 15 / .85); margin: 0 0 2rem; }

/* ------------------------------------------------------------------ horeca */
.horeca { position: relative; }
.horeca-beeld { height: 70vh; min-height: 24rem; }
.horeca-beeld img { width: 100%; height: 100%; object-fit: cover; }
.horeca-paneel {
	position: relative;
	border-radius: var(--rond-kaart);
	z-index: 10;
	margin-top: -10rem;
	background: var(--ivory);
	padding: 2rem;
	display: grid;
	gap: 2.5rem;
	box-shadow: 0 30px 70px -50px rgb(22 17 15 / .6);
}
@media (min-width: 900px) {
	.horeca-paneel {
		margin-top: -16rem;
		padding: 3.5rem;
		grid-template-columns: 1fr 1.05fr;
		gap: 4rem;
		align-items: start;
	}
	.horeca-intro { align-self: center; }
}
.horeca-paneel h2 {
	font-size: clamp(2.25rem, 4.6vw, 3.5rem);
	color: var(--bordeaux);
	margin: 1rem 0 0;
	letter-spacing: -.02em;
	line-height: 1;
}
.horeca-paneel h2 em { font-style: italic; color: var(--inkt); }
.horeca-intro > p { margin: 1.5rem 0 0; line-height: 1.65; color: rgb(22 17 15 / .8); max-width: 34ch; }
.horeca-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(22 17 15 / .14); }
.horeca-lijst li { border-bottom: 1px solid rgb(22 17 15 / .14); }
.horeca-lijst a {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	padding: 1.1rem .8rem 1.1rem 0;
	text-decoration: none;
	color: var(--inkt);
	isolation: isolate;
}
.horeca-lijst a::before {
	content: "";
	position: absolute;
	inset: 0 -.8rem;
	z-index: -1;
	border-radius: var(--rond-klein);
	background: var(--blush);
	opacity: 0;
	transform: scaleX(.96);
	transform-origin: left center;
	transition: opacity .4s var(--vlot), transform .4s var(--vlot);
}
.horeca-lijst a:hover::before { opacity: .5; transform: scaleX(1); }
.horeca-lijst .nr {
	font: 600 .74rem/1 var(--body);
	letter-spacing: .1em;
	color: var(--bordeaux);
	flex: 0 0 auto;
}
.horeca-lijst .dienst {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.45rem;
	letter-spacing: -.01em;
	transition: transform .5s var(--vlot);
	flex: 1;
}
@media (min-width: 768px) { .horeca-lijst .dienst { font-size: 1.7rem; } }
.horeca-lijst a:hover .dienst { transform: translateX(8px); }
.horeca-lijst .lijstpijl { color: var(--bordeaux); opacity: 0; transform: translateX(-6px); transition: all .4s var(--vlot); }
.horeca-lijst a:hover .lijstpijl { opacity: 1; transform: translateX(0); }
.horeca-acties { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 640px) { .horeca-acties { flex-direction: row; align-items: center; } }

/* --------------------------------------------------------------- campagne */
.campagne { position: relative; overflow: clip; background: var(--ivory); padding-block: 7rem; }
@media (min-width: 768px) { .campagne { padding-block: 10rem; } }
.campagne-grid { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 768px) { .campagne-grid { grid-template-columns: 1fr 1fr; } }
.campagne-beeld { position: relative; display: flex; justify-content: center; }
.campagne-blush {
	position: absolute;
	left: 50%; top: 50%;
	width: 19rem; height: 19rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--blush);
}
@media (min-width: 768px) { .campagne-blush { width: 26rem; height: 26rem; } }
.campagne-rand {
	position: absolute;
	left: 50%; top: 50%;
	width: 24rem; height: 24rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1px solid rgb(22 17 15 / .15);
}
@media (min-width: 768px) { .campagne-rand { width: 33rem; height: 33rem; } }
.campagne-fles { position: relative; height: 26rem; width: auto; }
@media (min-width: 768px) { .campagne-fles { height: 36rem; } }
.campagne-info .sectie-kop-xl { color: var(--inkt); }
/* Eén regel boven de tekst voor wat deze fles bijzonder maakt. */
.campagne-noot {
	margin: .9rem 0 0;
	font: 500 .78rem/1.5 var(--mono);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bordeaux);
}
.campagne-info > div > p { margin: 1.5rem 0 0; max-width: 28rem; line-height: 1.65; color: rgb(22 17 15 / .85); }
.campagne-specs {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	max-width: 28rem;
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(22 17 15 / .1);
	font: 500 .75rem/1.6 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .7);
}
.campagne-specs div { margin: 0; }
.campagne-specs dd { margin: 0; }
/* specs als nette tweekolomslijst in plaats van losse woorden */
.campagne-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; text-transform: none; letter-spacing: 0; }
.campagne-specs dt {
	font: 600 .68rem/1.4 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bordeaux);
	margin-bottom: .15rem;
}
.campagne-specs dd { font-size: .98rem; color: rgb(22 17 15 / .85); }
.campagne-spijs { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgb(22 17 15 / .12); }
.campagne-spijs ul { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.campagne-spijs li {
	position: relative;
	padding-left: 1.4rem;
	color: rgb(22 17 15 / .8);
	line-height: 1.5;
}
.campagne-spijs li::before {
	content: "";
	position: absolute;
	left: 0; top: .55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--blush);
	box-shadow: 0 0 0 1px var(--bordeaux);
}
.video-wacht {
	position: absolute;
	z-index: 4;
	right: clamp(1rem, 3vw, 2.5rem);
	top: calc(76px + 1.2rem);
	max-width: 300px;
	font: 500 .7rem/1.6 var(--body);
	letter-spacing: .03em;
	color: rgb(255 255 255 / .72);
	background: rgb(22 17 15 / .45);
	border: 1px dashed rgb(255 255 255 / .38);
	border-radius: var(--rond-klein);
	padding: .6rem .85rem;
}
@media (max-width: 700px) { .video-wacht { left: 1.5rem; right: 1.5rem; max-width: none; } }
.campagne-acties { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 640px) { .campagne-acties { flex-direction: row; align-items: center; } }

/* -------------------------------------------------------------- proeverijen */
.proeverijen { overflow-x: clip; }
.proeverijen-grid { display: grid; }
@media (min-width: 1000px) { .proeverijen-grid { grid-template-columns: 5fr 6fr; } }
.proeverijen-tekst {
	position: relative;
	padding: 5rem 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@media (min-width: 1000px) {
	.proeverijen-tekst { padding: 7rem 3.5rem 7rem max(2.5rem, calc((100vw - 80rem) / 2 + 2.5rem)); }
}
.proeverijen-tekst h2 {
	position: relative; z-index: 10;
	font-size: clamp(2.4rem, 4vw, 3.4rem);
	line-height: 1.02;
	letter-spacing: -.025em;
	color: var(--ivory);
	margin: 1rem 0 0;
	max-width: 15ch;
}
.proeverijen-tekst h2 em { color: var(--blush); }
.proeverijen-tekst p { margin: 2rem 0 0; max-width: 24rem; line-height: 1.65; color: rgb(242 237 228 / .8); }
.proeverijen-tekst .knop { margin-top: 2.5rem; }
.proeverijen-beeld { min-height: 20rem; }
@media (min-width: 1000px) { .proeverijen-beeld { min-height: 38rem; } }
.proeverijen-beeld img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- kevin-ruud */
.duo { overflow-x: clip; background: var(--ivory); padding-block: 6rem; }
@media (min-width: 768px) { .duo { padding-block: 8rem; } }
.duo-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .duo-grid { grid-template-columns: 4fr 6fr; } }
.duo-tekst { position: relative; order: 2; }
@media (min-width: 768px) { .duo-tekst { order: 1; } }
.duo-cirkel {
	position: absolute;
	left: -2.5rem; top: -2.5rem;
	width: 10rem; height: 10rem;
	border-radius: 50%;
	border: 1px solid rgb(22 17 15 / .1);
}
.duo-tekst h2 {
	position: relative;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	color: var(--bordeaux);
	margin: 1rem 0 0;
	letter-spacing: -.025em;
	line-height: .98;
}
.duo-tekst h2 em { font-style: italic; color: var(--inkt); }
.duo-tekst p { position: relative; margin: 1.75rem 0 0; max-width: 30rem; line-height: 1.7; font-size: 1.08rem; color: rgb(22 17 15 / .85); }
.duo-tekst .knop { margin-top: 2.25rem; }
/* citaat als speels accent naast het portret */
.duo-citaat {
	position: relative;
	margin: 2.25rem 0 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--bordeaux);
	font-family: var(--display);
	font-style: italic;
	font-size: clamp(1.15rem, 1.8vw, 1.45rem);
	line-height: 1.35;
	color: var(--inkt);
	max-width: 26rem;
}
.duo-beeld { position: relative; order: 1; }
@media (min-width: 768px) { .duo-beeld { order: 2; margin-right: -6rem; } }
.duo-beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 85% top; }
.duo-beeld::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 32%;
	background: linear-gradient(transparent, rgb(22 17 15 / .55));
	pointer-events: none;
}
.duo-beeld figcaption {
	position: absolute;
	z-index: 1;
	bottom: 1rem; left: 1.25rem;
	font: 500 .74rem/1.4 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .9);
}

/* ----------------------------------------------------------------- ontdek */
.ontdek { background: var(--ivory); padding-bottom: 7rem; }
@media (min-width: 768px) { .ontdek { padding-bottom: 9rem; } }
.ontdek .sectie-kop-xl { max-width: 36rem; }
.ontdek-grid { display: grid; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 768px) {
	.ontdek-grid { grid-template-columns: repeat(3, 1fr); }
	.ontdek-grid > :nth-child(2) { margin-top: 4rem; }
	.ontdek-grid > :nth-child(3) { margin-top: 8rem; }
	/* Twee tegels naast elkaar (relatiegeschenken en private label). Ze vullen
	   samen de hele kolombreedte, anders blijft er rechts een derde leeg staan
	   waar eerst de derde tegel zat. */
	.ontdek-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
	.ontdek-grid-2 > :nth-child(2) { margin-top: 5rem; }
}
.ontdek-tegel {
	display: block;
	text-decoration: none;
	color: var(--inkt);
	transition: transform .6s var(--vlot);
}
.ontdek-tegel:hover { transform: translateY(-8px); }
.ontdek-tegel .beeld { position: relative; overflow: clip; isolation: isolate; border-radius: var(--rond-beeld); }
.ontdek-tegel .beeld.r34 { aspect-ratio: 3 / 4; }
.ontdek-tegel .beeld.r43 { aspect-ratio: 4 / 3; }
.ontdek-tegel .beeld.r1610 { aspect-ratio: 16 / 10; }
.ontdek-tegel .beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--vlot); }
.ontdek-tegel:hover .beeld img { transform: scale(1.06); }
/* bordeaux sluier die van onder inschuift */
.ontdek-tegel .beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent 35%, rgb(152 0 46 / .55));
	opacity: 0;
	transition: opacity .5s var(--vlot);
}
.ontdek-tegel:hover .beeld::after { opacity: 1; }
.ontdek-tegel .ontdek-nr {
	position: absolute;
	z-index: 1;
	top: 1rem; left: 1.1rem;
	font-family: var(--display);
	font-size: 1.1rem;
	color: rgb(255 255 255 / .85);
	text-shadow: 0 2px 12px rgb(22 17 15 / .5);
}
.ontdek-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.35rem; }
.ontdek-kop h3 { font-size: 1.75rem; margin: 0; letter-spacing: -.02em; }
@media (min-width: 768px) { .ontdek-kop h3 { font-size: 2.15rem; } }
.ontdek-kop .pijl { font-size: 1.25rem; color: var(--bordeaux); transition: transform .5s var(--vlot); }
.ontdek-tegel:hover .pijl { transform: translateX(8px); }
.ontdek-tegel > p { margin: .5rem 0 0; max-width: 22rem; font-size: .95rem; line-height: 1.65; color: rgb(22 17 15 / .7); }
/* streep die onder de titel doorloopt bij hover */
.ontdek-streep {
	display: block;
	height: 1px;
	margin-top: 1rem;
	background: var(--bordeaux);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--vlot);
}
.ontdek-tegel:hover .ontdek-streep { transform: scaleX(1); }

/* ------------------------------------------------------------------ footer
   Contactband: bellen is het doel, dus een echte uitnodiging in plaats van
   een los groot nummer. Donker, met de golf als scheiding. */
.conversieband {
	position: relative;
	background: var(--inkt);
	color: var(--ivory);
	padding-block: 5rem;
	overflow: clip;
}
@media (min-width: 768px) { .conversieband { padding-block: 7rem; } }
/* De golf uit het logo mag niet uitgerekt worden; met een vaste hoogte in
   procenten van de sectie gebeurde dat wel en werd het een willekeurige
   golflijn. Daarom bepaalt de breedte hier de hoogte: aspect-ratio is de
   verhouding van het SVG-bestand maal het aantal periodes in beeld, en
   background-size houdt dezelfde deling aan. Twee periodes over het scherm
   ligt het dichtst bij hoe de band om het woord NERO staat. */
.golfdeco {
	position: absolute;
	inset: auto 0 0;
	aspect-ratio: calc(1123.18 / 230 * 2);
	background: url('../img/golven.svg') bottom center / 50% auto repeat-x;
	opacity: .2;
	pointer-events: none;
}
.contact-grid {
	position: relative;
	display: grid;
	gap: 2.5rem;
	align-items: end;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.25fr 1fr; gap: 4rem; } }
.contact-grid h2 {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(2.4rem, 5.5vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	margin: 1rem 0 1.25rem;
	color: var(--ivory);
	max-width: 15ch;
}
.contact-grid h2 em { font-style: italic; color: var(--blush); }
.contact-grid > div > p { color: rgb(242 237 228 / .78); max-width: 42ch; margin: 0 0 2rem; line-height: 1.65; }
.contact-acties { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.bel-blok {
	display: block;
	text-decoration: none;
	border-top: 1px solid rgb(242 237 228 / .2);
	padding-top: 1.5rem;
}
.bel-blok .bel-label {
	display: block;
	font: 600 .78rem/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blush);
	margin-bottom: .9rem;
}
.bel-blok .bel-nummer {
	display: block;
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3.1rem);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--ivory);
	white-space: nowrap;
	transition: color .35s ease;
}
.bel-blok:hover .bel-nummer { color: var(--blush); }
.bel-blok .bel-sub { display: block; margin-top: .8rem; color: rgb(242 237 228 / .6); font-size: .9rem; }
.bel-blok .bel-nap { display: block; margin-top: 1.4rem; color: rgb(242 237 228 / .72); font-size: .92rem; line-height: 1.8; }
.bel-blok .bel-nap a, .contact-grid a.stil { color: inherit; }

.nero-footer { background: var(--inkt); color: var(--ivory); border-top: 1px solid rgb(242 237 228 / .12); }
.nero-footer-in {
	max-width: var(--kader);
	margin-inline: auto;
	display: grid;
	gap: 3rem;
	padding: 4rem 1.5rem 3rem;
}
@media (min-width: 900px) {
	.nero-footer-in { grid-template-columns: 1.6fr .9fr .9fr 1fr; padding: 5.5rem 2.5rem 3.5rem; gap: 3.5rem; }
}
.nero-footer-in img { width: 104px; height: auto; }
.footer-merkzin {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -.015em;
	margin: 1.6rem 0 1rem;
	max-width: 22ch;
	color: var(--ivory);
}
.footer-merkzin em { font-style: italic; color: var(--blush); }
.nero-footer-in .familie { max-width: 26rem; font-size: .92rem; line-height: 1.7; color: rgb(242 237 228 / .6); margin: 0; }
.footer-kolkop {
	font: 600 .74rem/1 var(--body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blush);
	margin: .4rem 0 1.3rem;
}
.footer-kol p, .footer-kol nav { font: 400 .95rem/2 var(--body); color: rgb(242 237 228 / .72); margin: 0; }
.footer-kol a {
	position: relative;
	color: rgb(242 237 228 / .82);
	text-decoration: none;
	display: inline-block;
	transition: color .3s ease;
}
.footer-kol nav a { display: block; }
.footer-kol a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 2px;
	height: 1px;
	background: var(--blush);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform .4s var(--vlot);
}
.footer-kol a:hover { color: var(--blush); }
.footer-kol a:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer-kol a.route { margin-top: .9rem; color: var(--blush); }
/* ------------------------------------------ scrollverhaal Kevin & Ruud
   Beeld blijft staan, de stappen scrollen erlangs en wisselen de foto. */
.verhaallijn-sectie { padding-block: clamp(3rem, 6vw, 6rem); }
.verhaallijn-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
	.verhaallijn-grid { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; }
	.verhaallijn-beeld { position: sticky; top: 8rem; }
}
.verhaallijn-beeld-in {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--rond-kaart);
	overflow: clip;
	background: var(--inkt);
}
.vh-foto {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition: opacity .8s var(--vlot), transform 1.4s var(--vlot);
}
.vh-foto.is-actief { opacity: 1; transform: scale(1); }
.vh-golf {
	position: absolute;
	inset: auto 0 0;
	aspect-ratio: calc(1123.18 / 230);
	background: url('../img/golf-nero.svg') bottom center / 100% auto no-repeat;
	opacity: .5;
	pointer-events: none;
}
.verhaallijn-tekst { display: grid; }
.vh-stap {
	padding-block: clamp(2.5rem, 8vh, 5rem);
	border-top: 1px solid rgb(22 17 15 / .12);
	opacity: .35;
	transition: opacity .6s var(--vlot);
}
.vh-stap:first-child { border-top: 0; }
.vh-stap.is-actief { opacity: 1; }
.vh-nr {
	display: block;
	font: 600 .74rem/1 var(--body);
	letter-spacing: .18em;
	color: var(--bordeaux);
	margin-bottom: 1rem;
}
.vh-stap h2 {
	padding-bottom: .06em;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	color: var(--inkt);
	margin: .4rem 0 1rem;
	letter-spacing: -.025em;
	line-height: 1.02;
}
.vh-stap h2 em { color: var(--bordeaux); }
.vh-stap p { color: rgb(22 17 15 / .8); line-height: 1.7; max-width: 46ch; margin: 0 0 1.2rem; }
@media (prefers-reduced-motion: reduce) {
	.vh-stap { opacity: 1; }
	.vh-foto { transition: none; }
}

/* --------------------------------------------------------- cijferrij */
/* Flex in plaats van een raster van vier vaste kolommen. Toen het vierde cijfer
   eruit ging (dat telde Kevin en Ruud als twee gezichten), bleef er een leeg vak
   staan waar dat cijfer had gestaan. Zo verdeelt de rij zich over het aantal
   cijfers dat er echt is: op mobiel twee per regel en de laatste over de volle
   breedte, op een groot scherm allemaal naast elkaar. */
.cijferrij {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background: rgb(22 17 15 / .14);
	border: 1px solid rgb(22 17 15 / .14);
	border-radius: var(--rond-kaart);
	overflow: clip;
}
/* zonder border-box telt de padding bij de 45% op en past er maar één per regel */
.cijfer { flex: 1 1 45%; box-sizing: border-box; }
@media (min-width: 800px) { .cijfer { flex: 1 1 0; } }
.cijfer {
	background: var(--ivory);
	padding: clamp(1.4rem, 3vw, 2.4rem) 1.25rem;
	text-align: center;
	display: grid;
	gap: .4rem;
	align-content: center;
}
.cijfer-n {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--bordeaux);
}
.cijfer-l { font-size: .88rem; line-height: 1.45; color: rgb(22 17 15 / .7); }

/* ------------------------------------------------------ SEO-landingen */
.seo-tekst { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .seo-tekst { grid-template-columns: repeat(3, 1fr); } }
.seo-blok h2 {
	font-size: clamp(1.4rem, 2.2vw, 1.85rem);
	color: var(--bordeaux);
	margin: 0 0 .8rem;
	letter-spacing: -.015em;
	max-width: 18ch;
}
.seo-blok p { margin: 0; line-height: 1.75; color: rgb(22 17 15 / .8); }
.seo-blok { position: relative; padding-top: 1.6rem; border-top: 2px solid rgb(152 0 46 / .25); }

/* ---------------------------------------------------- productpagina */
.pd-usps {
	list-style: none;
	margin: 2rem 0 0;
	padding: 1.4rem 0 0;
	border-top: 1px solid rgb(22 17 15 / .12);
	display: grid;
	gap: .9rem;
}
.pd-usps li { display: flex; align-items: center; gap: .8rem; font-size: .95rem; color: rgb(22 17 15 / .8); }
.pd-usps svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--bordeaux); }

/* Wijnhuisblok onder de wijn: beeld in plaats van een grijze kop */
.pd-meer-kop {
	position: relative;
	border-radius: var(--rond-kaart);
	overflow: clip;
	background: var(--inkt);
	color: var(--ivory);
	margin-bottom: 2rem;
	min-height: 260px;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}
.pd-meer-kop img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 1.2s var(--vlot);
}
.pd-meer-kop:hover img { transform: scale(1.04); }
.pd-meer-kop.heeft-foto::after {
	content: "";
	position: absolute; inset: 0;
	z-index: -1;
	background: linear-gradient(15deg, rgb(22 17 15 / .88) 15%, rgb(22 17 15 / .28) 65%);
}
.pd-meer-kop-in { padding: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: .5rem; justify-items: start; }
.pd-meer-kop-in h2 {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	line-height: 1;
	letter-spacing: -.025em;
	color: var(--ivory);
	margin: 0;
}
.pd-meer-kop-in p { margin: 0; color: rgb(242 237 228 / .78); font-size: .95rem; }
.pd-meer-kop-in .mono-label { color: var(--blush); margin: 0; }
.pd-meer-kop-in .knop { margin-top: .8rem; }

/* -------------------------------------------------------- filterbalk */
.filter-kop {
	display: block;
	font: 600 .68rem/1 var(--body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .5);
	margin-bottom: .7rem;
}
.nero-landen { margin-top: .4rem; }
.nero-landen-rij { display: flex; flex-wrap: wrap; gap: .45rem; }
.land-chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	border-radius: var(--rond-pill);
	background: #fff;
	box-shadow: inset 0 0 0 1px rgb(22 17 15 / .14);
	font: 500 .82rem/1 var(--body);
	color: var(--inkt);
	text-decoration: none;
	transition: box-shadow .3s ease, background .3s ease, transform .3s var(--vlot);
}
.land-chip i { font-style: normal; font-size: .92rem; line-height: 1; opacity: .9; }
.land-chip b { font-weight: 500; font-size: .72rem; color: rgb(22 17 15 / .45); }
.land-chip:hover { box-shadow: inset 0 0 0 1.5px var(--bordeaux); transform: translateY(-1px); }
.land-chip.is-actief { background: var(--inkt); color: #fff; box-shadow: none; }
.land-chip.is-actief b { color: rgb(255 255 255 / .6); }
.chip-land { display: inline-flex; align-items: center; gap: .3rem; }
.chip-land i { font-style: normal; font-size: .95rem; }

/* de chips van de categorie krijgen dezelfde pill-vorm */
.nero-chip { border-radius: var(--rond-pill); }

/* ---------------------------------------------------- sliderkop + knop */
.slider-kopregel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2.5rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	/* ruimte vrijhouden voor de pijlen die rechtsboven de slider zweven */
	padding-right: 0;
}
@media (min-width: 900px) { .slider-kopregel { padding-right: 8.5rem; } }
.slider-voet { margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
/* Links uitgelijnd op de kop erboven, niet gecentreerd: gecentreerd leest als
   een losse zin die niets met de slider te maken heeft (feedback 17-08-2026). */
.slider-voetnoot { margin: 0 0 1.2rem; max-width: 56ch; color: rgb(22 17 15 / .7); font-size: .95rem; }
/* op mobiel swipe je; de pijlen zouden alleen de knop in de weg zitten */
@media (max-width: 899px) {
	.slider-pijlen { display: none; }
	.slider-kopregel { gap: 1.2rem; }
}
.slider-kop {
	padding-bottom: .06em;
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	color: var(--bordeaux);
	margin: .6rem 0 0;
	letter-spacing: -.025em;
	line-height: 1;
	max-width: 20ch;
}
.slider-kopregel .knop { flex: 0 0 auto; }

/* ------------------------------------------------------------- whatsapp */
.knop-wa { color: #fff !important; }
.knop-wa::before { background: #1FA855; }
.knop-wa svg { width: 18px; height: 18px; flex: 0 0 auto; }
.knop-wa::after { background-image: none; background-color: #17803f; }

.wa-zwevend {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 95;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.1rem;
	border-radius: var(--rond-pill);
	background: #1FA855;
	color: #fff;
	text-decoration: none;
	font: 600 .82rem/1 var(--body);
	letter-spacing: .04em;
	box-shadow: 0 14px 30px -12px rgb(22 17 15 / .55);
	transition: transform .35s var(--vlot), background .35s ease;
}
.wa-zwevend svg { width: 22px; height: 22px; }
.wa-zwevend:hover { background: #17803f; transform: translateY(-3px); color: #fff; }
@media (max-width: 700px) {
	.wa-zwevend { right: 1rem; bottom: 1rem; padding: .9rem; }
	.wa-zwevend span { display: none; }
}

/* ------------------------------------------------ subpagina-onderdelen */
.verhaal-tweeluik { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .verhaal-tweeluik { grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; } }
.verhaal-tweeluik .sectie-kop-xl { margin-top: 0; position: sticky; top: 7rem; }
@media (max-width: 899px) { .verhaal-tweeluik .sectie-kop-xl { position: static; } }
.verhaal-lopend p { line-height: 1.75; color: rgb(22 17 15 / .82); margin: 0 0 1.4rem; font-size: 1.05rem; }

.diensten-kaarten { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .diensten-kaarten { grid-template-columns: 1fr 1fr; } }
.dienst-kaart {
	position: relative;
	border-radius: var(--rond-kaart);
	padding: 2rem 1.8rem;
	background: var(--wit, #fff);
	box-shadow: inset 0 0 0 1px rgb(22 17 15 / .1);
	transition: transform .5s var(--vlot), box-shadow .5s var(--vlot);
	overflow: hidden;
	isolation: isolate;
}
.dienst-kaart::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 3px;
	background: var(--bordeaux);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .5s var(--vlot);
}
.dienst-kaart:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px rgb(22 17 15 / .16), 0 24px 44px -30px rgb(22 17 15 / .5); }
.dienst-kaart:hover::after { transform: scaleX(1); }
.dienst-nr {
	display: block;
	font: 600 .74rem/1 var(--body);
	letter-spacing: .16em;
	color: var(--bordeaux);
	margin-bottom: 1.1rem;
}
.dienst-kaart h3 { font-size: 1.6rem; margin: 0 0 .7rem; letter-spacing: -.015em; }
.dienst-kaart p { margin: 0 0 1.2rem; color: rgb(22 17 15 / .72); line-height: 1.65; }

.hulp-band { background: var(--inkt); color: var(--ivory); padding-block: clamp(3rem, 6vw, 5rem); }
.hulp-in { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .hulp-in { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.hulp-in h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--ivory); margin: .8rem 0 1rem; letter-spacing: -.02em; }
.hulp-in p { color: rgb(242 237 228 / .78); margin: 0; max-width: 46ch; line-height: 1.65; }
.hulp-in .mono-label { color: var(--blush); }
.hulp-acties { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Kop compact: label en kop links, één regel uitleg rechts. De XL-kop nam hier
   bijna 200px, en dat is zonde boven een strook die zelf laag hoort te zijn. */
.socials-sectie { padding-block: clamp(3.25rem, 6vw, 5rem); }
.socials-kop {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .75rem 3rem;
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.socials-kop h2 { color: var(--ivory); margin: .5rem 0 0; max-width: 20ch; font-size: clamp(1.9rem, 3.4vw, 2.8rem); letter-spacing: -.02em; }
.socials-intro { margin: 0; max-width: 36ch; font-size: .95rem; line-height: 1.6; color: rgb(242 237 228 / .72); }

/* --------------------------------------------------------------- galerij
   Eén rail die van rand tot rand doorloopt en die je opzij scrollt, zoals de
   werkrail op lammersschilderwerken.nl. Als raster nam Instagram bijna een heel
   scherm in beslag (klantfeedback 13-08-2026); ook de rij van 13-08 was nog te
   hoog, omdat de kop XL was en de volg-link een apart blok eronder kreeg. Die
   volg-tegel is nu de laatste kaart in de rail, dus de sectie is ruim een derde
   lager. Tegels hebben een vaste breedte, zodat de laatste half zichtbaar blijft
   en het oog ziet dat er meer staat. */
.galerij {
	display: flex;
	/* Zonder dit rekt flex de tegels op tot de hoogste kaart en verliest de
	   verhouding 4:5 zijn werk. */
	align-items: flex-start;
	gap: .75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	/* De eerste tegel lijnt op met de kop erboven, de rij loopt door buiten het
	   kader. Vandaar dat dit blok buiten .kader staat in de pagina-opbouw. */
	padding-inline: 1.5rem;
	/* Zonder scroll-padding snapt de rail bij het laden meteen naar de eerste
	   tegel en scrolt de linkermarge weg; dan begint de rij tegen de rand. */
	scroll-padding-inline: 1.5rem;
	padding-bottom: .25rem;
}
@media (min-width: 768px) {
	.galerij {
		gap: 1rem;
		/* Gelijk aan de linkerrand van .kader. Die heeft content-box sizing, dus
		   de tekst begint op (100% - kader) / 2, niet op ... + de padding. */
		padding-inline: max(2.5rem, calc((100% - var(--kader)) / 2));
		scroll-padding-inline: max(2.5rem, calc((100% - var(--kader)) / 2));
	}
}
.galerij::-webkit-scrollbar { display: none; }
.galerij-item { flex: 0 0 11.5rem; scroll-snap-align: start; }
@media (min-width: 768px) { .galerij-item { flex-basis: 14rem; } }
@media (min-width: 1100px) { .galerij-item { flex-basis: 15rem; } }
.galerij-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--rond-beeld);
	/* 4:5, de maat waarin Instagram de posts zelf aanlevert: minder kroppen dan
	   het vierkant en toch een lage strook. */
	aspect-ratio: 4 / 5;
	text-decoration: none;
	background: rgb(22 17 15 / .1);
}
.galerij-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--vlot); }
.galerij-item:hover img { transform: scale(1.045); }
.galerij-caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 1.1rem;
	background: linear-gradient(180deg, transparent, rgb(22 17 15 / .82));
	color: #fff;
	font: 500 .8rem/1.45 var(--body);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s var(--vlot), transform .25s var(--vlot);
}
.galerij-item:hover .galerij-caption { opacity: 1; transform: translateY(0); }
.galerij-video {
	position: absolute;
	z-index: 2;
	top: .75rem; right: .75rem;
	display: grid; place-items: center;
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgb(22 17 15 / .55);
	color: #fff;
}
.galerij-video svg { width: 14px; height: 14px; }

/* Laatste kaart in de rail: volgen. Scheelt een apart blok onder de strook. */
.galerij-volg {
	/* padding en rand binnen de tegelmaat houden, anders is deze kaart breder
	   en hoger dan de posts ernaast */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: .5rem;
	padding: 1.15rem;
	background: rgb(242 237 228 / .05);
	border: 1px dashed rgb(242 237 228 / .3);
	transition: border-color .3s var(--vlot), background .3s var(--vlot);
}
.galerij-volg:hover { border-color: var(--blush); background: rgb(242 237 228 / .09); }
.galerij-volg .volg-merk { display: flex; align-items: center; gap: .5rem; color: var(--ivory); font: 600 1rem/1.2 var(--body); }
.galerij-volg .volg-merk svg { width: 20px; height: 20px; flex: 0 0 auto; }
.galerij-volg .volg-actie {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--blush);
	font: 600 .72rem/1 var(--body);
	letter-spacing: .1em;
	text-transform: uppercase;
}
.galerij-volg .volg-actie svg { width: 14px; height: 14px; transition: transform .35s var(--vlot); }
.galerij-volg:hover .volg-actie svg { transform: translateX(4px); }

/* zustermerken, socials en NIX18 in de footer */
.zustermerken { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.4rem; }
.zustermerken a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font: 600 .74rem/1 var(--body);
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--zilver);
	text-decoration: none;
	padding: .55rem .9rem;
	border-radius: var(--rond-pill);
	box-shadow: inset 0 0 0 1px rgb(242 237 228 / .22);
	transition: color .3s ease, box-shadow .3s ease;
}
.zustermerken a:hover { color: var(--blush); box-shadow: inset 0 0 0 1px var(--blush); }
.zustermerken .pijl { transition: transform .35s var(--vlot); }
.zustermerken a:hover .pijl { transform: translateX(3px); }

.socials { display: flex; gap: .7rem; }
.socials a {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	color: var(--zilver);
	box-shadow: inset 0 0 0 1px rgb(242 237 228 / .25);
	transition: color .3s ease, background .3s ease, transform .35s var(--vlot);
}
.socials a svg { width: 20px; height: 20px; }
.socials a:hover { color: #fff; background: var(--bordeaux); box-shadow: none; transform: translateY(-2px); }
.socials a::after { content: none; }

.nix18 { display: inline-flex; align-items: center; opacity: .85; transition: opacity .3s ease; }
.nix18:hover { opacity: 1; }
.nix18 img { width: 72px; height: auto; filter: brightness(0) invert(1); }

.nero-footer-onder { border-top: 1px solid rgb(242 237 228 / .1); }
.nero-footer-onder-in {
	max-width: var(--kader);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.5rem;
	font: 400 .82rem/1.6 var(--body);
	color: rgb(242 237 228 / .45);
}
@media (min-width: 768px) { .nero-footer-onder-in { flex-direction: row; justify-content: space-between; padding-inline: 2.5rem; } }
/* Juridische links: op een telefoon onder elkaar te veel regels, dus
   naast elkaar met een scheidingsstip ertussen. */
.footer-juridisch { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .75rem; }
.footer-juridisch a { color: rgb(242 237 228 / .55); text-decoration: none; }
.footer-juridisch a:hover { color: var(--ivory); text-decoration: underline; }
.footer-juridisch a + a::before {
	content: "";
	display: inline-block;
	width: 3px; height: 3px;
	margin-right: .75rem;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	vertical-align: middle;
}

/* ------------------------------------------------------ pagina-hero (sub)
   Elke subpagina opent met een eigen beeld-hero in plaats van een kale kop. */
.pagina-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(340px, 52svh, 520px);
	background: var(--inkt);
	color: var(--ivory);
	overflow: clip;
}
.pagina-hero-beeld { position: absolute; inset: 0; }
.pagina-hero-beeld img { width: 100%; height: 100%; object-fit: cover; }
.pagina-hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(10deg, rgb(22 17 15 / .88) 10%, rgb(22 17 15 / .3) 60%, rgb(22 17 15 / .5));
}
.pagina-hero-in {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--kader);
	margin-inline: auto;
	padding: 8rem 1.5rem 3rem;
}
@media (min-width: 768px) { .pagina-hero-in { padding: 9rem 2.5rem 3.5rem; } }
.pagina-hero h1 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.025em;
	font-size: clamp(2.6rem, 6vw, 5rem);
	color: var(--ivory);
	margin: .6rem 0 0;
	max-width: 18ch;
}
.pagina-hero h1 em { font-style: italic; color: var(--blush); }
.pagina-hero .pagina-intro {
	margin: 1.2rem 0 0;
	max-width: 52ch;
	color: rgb(242 237 228 / .82);
	font-size: 1.05rem;
	line-height: 1.65;
}
.pagina-hero .mono-label { color: var(--blush); }
.pagina-hero .nero-golf {
	position: absolute;
	inset: auto 0 -2px;
	z-index: 3;
	/* Vier periodes: dat houdt de golf laag genoeg om onder de introtekst te
	   blijven. Met twee periodes werd hij 147px hoog en liep hij er dwars
	   doorheen. */
	aspect-ratio: calc(1123.18 / 230 * 4);
	background: url('../img/golf-nero.svg') bottom center / 25% auto repeat-x;
	opacity: .22;
}

/* ------------------------------------------------------------ openingstijden */
.footer-open { margin-top: .8rem; color: rgb(242 237 228 / .55); }

.nero-openingstijden { margin: 2rem 0; }
.nero-openingstijden h2 {
	font: 400 1.25rem/1.3 var(--display);
	color: var(--inkt);
	margin: 0 0 .8rem;
}
.nero-openingstijden dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .35rem 1.5rem;
}
.nero-openingstijden dt { color: rgb(22 17 15 / .7); }
.nero-openingstijden dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;   /* tijden onder elkaar uitlijnen */
	color: var(--inkt);
}
.nero-openingstijden-noot {
	margin: 1rem 0 0;
	font-size: .9rem;
	color: rgb(22 17 15 / .6);
}
.nero-openingstijden-noot a { color: var(--bordeaux); }

/* --------------------------------------------------- links tussen plaatsen */
.plaats-links {
	margin-top: .9rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.plaats-links a {
	padding: .45rem 1rem;
	border: 1px solid rgb(22 17 15 / .16);
	border-radius: var(--rond-pill);
	font: 500 .88rem/1 var(--body);
	color: rgb(22 17 15 / .78);
	text-decoration: none;
	transition: border-color .2s, color .2s, background-color .2s;
}
.plaats-links a:hover {
	border-color: var(--bordeaux);
	background: var(--bordeaux);
	color: var(--ivory);
}

/* ------------------------------------------------------ juridische pagina's */
/* Geen foto achter de kop: privacy en voorwaarden hoeven geen sfeerbeeld,
   en een halve schermhoogte hero voor een tekstpagina kost alleen scrollen. */
.pagina-hero-plat { min-height: 0; }
.pagina-hero-plat .pagina-hero-in { padding-block: 7rem 3rem; }

.nero-juridisch {
	max-width: 46rem;   /* ~75 tekens per regel, dat leest het prettigst */
	font-size: 1.02rem;
	line-height: 1.7;
	color: rgb(22 17 15 / .84);
}
.nero-juridisch h2 {
	font: 400 clamp(1.25rem, 2.4vw, 1.6rem)/1.25 var(--display);
	color: var(--inkt);
	margin: 2.6rem 0 .7rem;
}
.nero-juridisch h2:first-child { margin-top: 0; }
.nero-juridisch p { margin: 0 0 1rem; }
.nero-juridisch a { color: var(--bordeaux); text-underline-offset: .18em; }
.nero-juridisch a:hover { text-decoration-thickness: 2px; }
.nero-jur-datum {
	margin-top: 2.8rem;
	padding-top: 1.2rem;
	border-top: 1px solid rgb(22 17 15 / .12);
	font-size: .86rem;
	color: rgb(22 17 15 / .55);
}

/* USP-band onder de pagina-hero */
.usp-band { border-bottom: 1px solid rgb(22 17 15 / .12); background: var(--ivory); }
.usp-band-in {
	max-width: var(--kader);
	margin-inline: auto;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
}
@media (min-width: 768px) { .usp-band-in { grid-template-columns: repeat(4, 1fr); padding-inline: 2.5rem; gap: 1.6rem; } }
.usp {
	display: flex;
	align-items: center;
	gap: .8rem;
	font: 500 .88rem/1.4 var(--body);
	color: rgb(22 17 15 / .8);
}
.usp svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--bordeaux); }

/* -------------------------------------------------- catalogus (assortiment) */
.nero-pagina-kop { padding: 9rem 0 .5rem; }
.nero-pagina-kop h1 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -.025em;
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	color: var(--bordeaux);
	margin: 0 0 1rem;
}
.nero-intro { max-width: 56ch; color: rgb(22 17 15 / .75); font-size: 1.02rem; }
.nero-assortiment { padding-block: clamp(2.5rem, 5vw, 4rem) 5rem; }
/* filterbalk blijft in beeld tijdens het bladeren */
.assortiment-layout { display: grid; gap: 2rem; }
.assortiment-layout.is-laden .assortiment-resultaten { opacity: .45; transition: opacity .2s ease; }
.assortiment-resultaten { transition: opacity .25s ease; }
/* Mobiel: filters zitten achter een knop, zodat je meteen wijnen ziet */
.filter-knop {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	align-self: start;
	padding: .8rem 1.3rem;
	border: 0;
	border-radius: var(--rond-pill);
	background: var(--inkt);
	color: #fff;
	font: 600 .8rem/1 var(--body);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}
.filter-knop svg { width: 17px; height: 17px; }
.filter-knop b {
	display: grid; place-items: center;
	min-width: 20px; height: 20px;
	border-radius: var(--rond-pill);
	background: var(--bordeaux);
	font-size: .7rem;
}
@media (min-width: 1000px) { .filter-knop { display: none; } }
@media (min-width: 1000px) {
	.assortiment-layout { grid-template-columns: 264px 1fr; gap: 3rem; align-items: start; }
	.nero-filters {
		position: sticky;
		top: 100px;
		/* Staat de kolom vol open, dan scrolt hij in zichzelf in plaats van
		   onder de onderkant van het scherm te verdwijnen. */
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}
.nero-filters {
	display: grid;
	gap: 1.6rem;
	align-content: start;
}
/* Mobiel zitten de filters achter de knop, zodat je meteen wijnen ziet. Deze
   regel staat bewust ná de basisregel hierboven: allebei even zwaar, dus de
   laatste wint. Eerder stond hij ervoor en bleef de kolom altijd openstaan. */
@media (max-width: 999px) {
	.nero-filters {
		display: none;
		padding: 1.25rem;
		background: #fff;
		border-radius: var(--rond-kaart);
		box-shadow: 0 20px 40px -30px rgb(22 17 15 / .5);
	}
	.nero-filters.is-open { display: grid; }
}

/* ------------------------------------------------- assortimentsfilters
   Opzet van lexception.nl/assortiment: per onderwerp een kaart die open- en
   dichtklapt, met aanvinkbare regels erin. Verschil met hen: deze kolom blijft
   staan tijdens het scrollen (wens 17-08-2026), want bij 594 wijnen wil je niet
   telkens terug naar boven. Het open- en dichtklappen gaat via <details>, dus
   het werkt ook zonder JavaScript, en elke regel is een gewone link. */
.filters-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.filters-titel {
	margin: 0;
	font: 400 1.5rem/1 var(--display);
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--inkt);
}
.filters-wissen {
	font: 500 .68rem/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bordeaux);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.filtergroep {
	border-radius: var(--rond-kaart);
	background: rgb(22 17 15 / .045);
	transition: background .25s ease;
}
.filtergroep[open] { background: #fff; box-shadow: 0 1px 3px rgb(22 17 15 / .07); }
.filtergroep summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .8rem 1rem;
	cursor: pointer;
	list-style: none;
	font: 400 1rem/1 var(--display);
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--bordeaux);
}
.filtergroep summary::-webkit-details-marker { display: none; }
.filtergroep summary svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--vlot); }
.filtergroep[open] summary svg { transform: rotate(180deg); }
.filtergroep-in {
	display: grid;
	gap: .05rem;
	padding: 0 .6rem .75rem;
	/* 206 wijnhuizen passen niet in een kolom; die lijst scrollt in zichzelf. */
	max-height: 17rem;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.filter-optie {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .38rem .4rem;
	border-radius: var(--rond-klein);
	text-decoration: none;
	font: 400 .85rem/1.35 var(--body);
	color: rgb(22 17 15 / .8);
	transition: background .2s ease, color .2s ease;
}
.filter-optie:hover { background: rgb(22 17 15 / .05); color: var(--inkt); }
.filter-optie .vinkje {
	flex: none;
	width: 15px; height: 15px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1.5px rgb(22 17 15 / .25);
	background: no-repeat center / 10px 10px;
}
.filter-optie.is-aan { color: var(--inkt); font-weight: 500; }
.filter-optie.is-aan .vinkje {
	background-color: var(--bordeaux);
	box-shadow: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 6.4l3.2 3.2L11 2.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.filter-naam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-optie b { margin-left: auto; font-weight: 500; font-size: .72rem; color: rgb(22 17 15 / .4); }
.filter-optie.is-aan b { color: rgb(22 17 15 / .55); }

.nero-filters .nero-zoekvorm { display: flex; gap: .4rem; }
.nero-filters .nero-zoekvorm input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	border-radius: var(--rond-klein);
	border: 1px solid rgb(22 17 15 / .18);
	background: #fff;
	padding: .58rem .8rem;
	font-size: .85rem;
}
.nero-filters .nero-zoekvorm button {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5rem;
	border: 0;
	border-radius: var(--rond-klein);
	background: var(--inkt);
	color: #fff;
	cursor: pointer;
}
.nero-filters .nero-zoekvorm button svg { width: 15px; height: 15px; }

/* Tekstvelden krijgen geen losse ring op afstand (de algemene focus-stijl is voor
   knoppen en links); ze kleuren zelf, net als het contactformulier. */
.nero-zoekvorm input:focus-visible, .nero-zoekvorm select:focus-visible, .nero-sorteer select:focus-visible {
	outline: none;
	border-color: var(--bordeaux);
	box-shadow: 0 0 0 3px rgb(152 0 46 / .12);
}

/* Sorteren staat rechtsboven de wijnen, zoals bij l'exception. */
.nero-sorteer { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-bottom: 1.3rem; }
.nero-sorteer label {
	font: 500 .66rem/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .5);
}
.nero-sorteer select {
	border-radius: var(--rond-klein);
	border: 1px solid rgb(22 17 15 / .18);
	background: #fff;
	padding: .5rem .7rem;
	font-size: .85rem;
}
.nero-teller {
	order: -1;
	margin: 0;
	padding: 0 0 .9rem .1rem;
	border-bottom: 1px solid rgb(22 17 15 / .14);
	font: 500 .8rem/1.4 var(--body);
	letter-spacing: 0;
	text-transform: none;
	color: rgb(22 17 15 / .6);
}
.nero-teller b { font-family: var(--display); font-size: 1.15rem; color: var(--inkt); }
.nero-teller { margin: 0; }

.nero-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.nero-chip {
	padding: .6rem 1rem;
	border: 1px solid rgb(22 17 15 / .3);
	font-family: var(--display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .82rem;
	color: var(--inkt);
	text-decoration: none;
	transition: all .3s ease;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}
.nero-chip:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.nero-chip.is-actief { background: var(--inkt); border-color: var(--inkt); color: var(--ivory); }
.nero-zoekvorm { display: flex; flex-wrap: wrap; gap: .6rem; }
.nero-zoekvorm input, .nero-zoekvorm select {
	padding: .75rem 1rem;
	border-radius: var(--rond-pill);
	border: 1px solid rgb(22 17 15 / .3);
	font: 400 .95rem var(--body);
	background: transparent;
}
.nero-zoekvorm input { flex: 1 1 240px; max-width: 380px; }
.nero-teller { color: rgb(22 17 15 / .6); margin: 0; font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nero-leeg { text-align: center; padding: 4rem 1rem; display: grid; gap: 1.2rem; justify-items: center; }

.nero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem; }
@media (min-width: 700px) { .nero-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.nero-card { display: flex; flex-direction: column; text-decoration: none; color: var(--inkt); }
.nero-card-media {
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: 1.4rem;
	position: relative;
	isolation: isolate;
	border-radius: var(--rond-kaart);
	/* de hover-cirkel en het "Bekijk wijn"-label moeten de ronding volgen */
	overflow: clip;
	background: rgb(22 17 15 / .04);
}
.nero-card-media::before {
	content: "";
	position: absolute;
	width: 66%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid rgb(22 17 15 / .15);
	z-index: -1;
	transition: transform .9s var(--vlot);
}
.nero-card:hover .nero-card-media::before { transform: scale(1.1); }
/* Absoluut geplaatst, om dezelfde reden als het silhouet hieronder: als de
   foto in de normale stroom staat duwt hij het vierkante beeldvlak open tot
   400px terwijl een kaart met silhouet op 311px blijft. Dat verschil van 89px
   liep door naar titel, tags en voorraadregel, waardoor kaarten naast elkaar
   niet meer uitlijnden. Nu bepaalt de aspect-ratio de hoogte en de foto past
   zich aan, niet andersom. */
.nero-card-media img {
	position: absolute;
	inset: 0;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .9s var(--vlot);
}
.nero-card:hover .nero-card-media img { transform: translateY(-6px) scale(1.03); }
.nero-card-bekijk {
	position: absolute;
	left: 50%; bottom: 1rem;
	transform: translate(-50%, 8px);
	z-index: 2;
	font: 600 .68rem/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--bordeaux);
	border-radius: var(--rond-pill);
	padding: .6rem 1rem;
	opacity: 0;
	transition: opacity .4s var(--vlot), transform .4s var(--vlot);
	white-space: nowrap;
}
.nero-card:hover .nero-card-bekijk { opacity: 1; transform: translate(-50%, 0); }
.nero-card-chips { display: flex; gap: .35rem; margin-top: .15rem; height: 1.6rem; overflow: hidden; }
.chip-leeg { display: block; }
.nero-card-chips span {
	font: 500 .66rem/1 var(--body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .62);
	padding: .32rem .5rem;
	border-radius: var(--rond-pill);
	/* "Witte wijn" brak binnen de pil over twee regels; die werd dan hoger dan
	   de vaste regelhoogte van de chiprij en liep onderaan uit de kaart. */
	white-space: nowrap;
	box-shadow: inset 0 0 0 1px rgb(22 17 15 / .14);
}
/* Twee kaarten naast elkaar op een telefoon: daar past een derde chip (het
   jaartal) niet meer bij en die werd door de overflow halverwege afgesneden.
   Liever helemaal weg dan half; land en soort zeggen op die maat genoeg. De
   twee die overblijven gaan een maatje kleiner, anders staat "Witte wijn"
   naast het land alsnog buiten de kaart. */
@media (max-width: 520px) {
	.nero-card-chips span:nth-child(n+3) { display: none; }
	.nero-card-chips span { font-size: .58rem; padding: .3rem .42rem; letter-spacing: .04em; }
}
/* Kaarten even hoog, met prijs en voorraad altijd op dezelfde lijn onderaan.
   Titels van twee regels duwen de rest dus niet meer scheef. */
.nero-grid { align-items: stretch; }
.nero-card { height: 100%; }
.nero-card-body {
	padding: 1rem 0 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
	flex: 1;
}
.nero-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	/* vaste hoogte: twee regels, zodat elke kaart hetzelfde raster houdt */
	height: 2.7em;
}
.nero-card-meta {
	margin-top: auto;
	padding-top: .7rem;
	border-top: 1px solid rgb(22 17 15 / .1);
	/* vaste hoogte en verticaal gecentreerd: prijs en voorraad staan in elke
	   kaart op exact dezelfde lijn, ook bij lange namen */
	min-height: 2.9rem;
	align-items: center;
}
.nero-card-house { font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bordeaux); }
.nero-card-title { font: 600 1rem/1.35 var(--body); margin: 0; }
.nero-card-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .3rem; }
.nero-card-price { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.nero-card-price .woocommerce-Price-amount { font-weight: 600; }

/* absoluut geplaatst, anders rekt de hoge SVG de vierkante kaart uit */
.nero-fles-svg {
	position: absolute;
	inset: 10%;
	margin: auto;
	max-height: 80%;
	max-width: 44%;
	width: auto;
	height: auto;
	opacity: .7;
}
.nero-pd-media .nero-fles-svg { position: relative; inset: auto; max-height: 420px; max-width: 55%; }
.nero-foto-volgt {
	position: absolute;
	bottom: .9rem;
	font: 500 .62rem/1 var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .55);
	background: var(--ivory);
	border-radius: var(--rond-pill);
	padding: .35rem .7rem;
}

.nero-stock { display: inline-flex; align-items: center; gap: .45rem; font: 500 .78rem/1 var(--body); color: rgb(22 17 15 / .65); white-space: nowrap; }
.nero-stock-dot { width: 9px; height: 9px; border-radius: 50%; background: #1E9E4F; box-shadow: 0 0 0 3px rgb(30 158 79 / .18); }
.nero-stock.is-out .nero-stock-dot { background: #C22A2A; box-shadow: 0 0 0 3px rgb(194 42 42 / .16); }

.nero-paginering { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.nero-paginering a, .nero-paginering span {
	min-width: 42px; min-height: 42px;
	display: inline-grid; place-items: center;
	border-radius: var(--rond-klein);
	border: 1px solid rgb(22 17 15 / .25);
	text-decoration: none;
	color: var(--inkt);
	font: 600 .9rem var(--body);
}
.nero-paginering a:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.nero-paginering .is-actief { background: var(--inkt); color: var(--ivory); border-color: var(--inkt); }

/* ------------------------------------------------------------ productdetail */
.nero-main-pd { padding-top: 76px; }
.nero-pd { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.nero-pd-media {
	overflow: hidden;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: var(--rond-kaart);
	background: rgb(22 17 15 / .04);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 3rem);
	position: sticky;
	top: 96px;
	align-self: start;
	min-height: 420px;
}
.nero-pd-media img {
	width: 100%;
	max-height: 560px;
	object-fit: contain;
	mix-blend-mode: normal;
}
.nero-pd-huis { color: var(--bordeaux) !important; text-decoration: none; }
.nero-pd-titel {
	font-family: var(--display);
	font-weight: 600;
	text-transform: uppercase;
	line-height: .98;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	margin: .2rem 0 1.1rem;
}
.nero-pd-status { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 1.4rem; }
.nero-pd-status .nero-stock { font-size: .95rem; }
.nero-pd-prijs { font-family: var(--display); font-weight: 600; font-size: 1.7rem; }
.nero-pd-desc { max-width: 58ch; color: rgb(22 17 15 / .8); }
.nero-specs { margin: 1.8rem 0; border-top: 1px solid rgb(22 17 15 / .12); }
.nero-spec { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgb(22 17 15 / .12); }
.nero-spec dt { font: 500 .72rem/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(22 17 15 / .6); }
.nero-spec dd { margin: 0; font-size: .98rem; }
.nero-pd-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.nero-pd-note { color: rgb(22 17 15 / .6); font-size: .88rem; margin-top: 1rem; }
.nero-pd-meer { padding-block: clamp(3rem, 6vw, 5rem); }
.nero-pd-meer h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--bordeaux); margin-bottom: 1.5rem; }
@media (max-width: 820px) {
	.nero-pd { grid-template-columns: 1fr; }
	.nero-pd-media { position: relative; top: 0; min-height: 0; aspect-ratio: 1; }
	.nero-pd-media img { max-height: 420px; }
}

/* ---------------------------------------------------------- wijnhuis-detail
   Eén opmaak voor alle 206 huizen. Blokken zonder content vallen in PHP weg,
   dus deze stijlen moeten ook kloppen als alleen de hero en de wijnen er zijn. */
.nero-wh-hero {
	position: relative;
	min-height: clamp(420px, 68svh, 660px);
	display: flex;
	align-items: flex-end;
	background: var(--inkt);
	color: var(--ivory);
	overflow: clip;
}
.nero-wh-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Twee lagen: donker naar onderen voor de tekst, en van links af zodat de
   kruimels en de kop leesbaar blijven op elke huisfoto. */
.nero-wh-waas {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgb(22 17 15 / .96), rgb(22 17 15 / .6) 45%, rgb(22 17 15 / .2)),
		linear-gradient(to right, rgb(22 17 15 / .8), rgb(22 17 15 / .1) 62%, rgb(22 17 15 / 0));
}
/* Zonder huisfoto blijft de hero staan: de golf uit het logo vult het vlak.
   Hier één periode over de volle breedte, want die is het hoogst en vult een
   leeg herovlak het best. De verhouding blijft die van het logo. */
.nero-wh-golf {
	position: absolute;
	inset: auto 0 0;
	aspect-ratio: calc(1123.18 / 230);
	background: url('../img/golven.svg') bottom center / 100% auto repeat-x;
	opacity: .16;
	pointer-events: none;
}
.nero-wh-hero.heeft-foto .nero-wh-golf { opacity: .07; }
.nero-wh-hero-in {
	position: relative;
	max-width: var(--kader);
	width: 100%;
	margin-inline: auto;
	padding: 7.5rem 1.5rem 3rem;
}
@media (min-width: 768px) { .nero-wh-hero-in { padding: 9rem 2.5rem 3.5rem; } }
.nero-kruimels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: 2rem;
	font: 500 .74rem/1 var(--body);
	letter-spacing: .06em;
	color: rgb(242 237 228 / .6);
}
.nero-kruimels a { color: inherit; text-decoration: none; }
.nero-kruimels a:hover { color: var(--blush); }
.nero-kruimels [aria-current] { color: rgb(242 237 228 / .95); }
.nero-wh-hero .mono-label { color: var(--blush); }
.nero-wh-titel {
	font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem);
	margin: .5rem 0 0;
	color: var(--ivory);
}
.nero-wh-plaats {
	margin: .9rem 0 0;
	font: 500 .78rem/1 var(--body);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgb(242 237 228 / .75);
}
.nero-wh-intro {
	margin: 1.6rem 0 0;
	max-width: 46ch;
	font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem);
	line-height: 1.6;
	color: rgb(242 237 228 / .88);
}
.nero-wh-acties { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.nero-wh-acties .knop svg { width: 18px; height: 18px; }

/* verhaal + feitenkaart */
.nero-wh-verhaal { padding-block: clamp(3rem, 6vw, 5.5rem); }
.nero-wh-verhaal-in {
	max-width: var(--kader);
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: grid;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
@media (min-width: 768px) { .nero-wh-verhaal-in { padding-inline: 2.5rem; } }
@media (min-width: 900px) { .nero-wh-verhaal-in { grid-template-columns: minmax(0, 1fr) 22rem; } }
.nero-wh-tekst h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); color: var(--bordeaux); margin: .4rem 0 1.4rem; }
.nero-wh-tekst p { max-width: 62ch; font-size: 1.06rem; line-height: 1.8; color: rgb(22 17 15 / .84); margin: 0 0 1.2rem; }
.nero-wh-tekst p:first-of-type { font-size: 1.18rem; color: var(--inkt); }
.nero-wh-feiten {
	background: rgb(22 17 15 / .04);
	border-radius: var(--rond-kaart);
	padding: 1.8rem;
	position: sticky;
	top: 96px;
}
.nero-wh-feiten-kop {
	font: 600 .74rem/1 var(--body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bordeaux);
	margin: 0 0 1.1rem;
}
.nero-wh-feiten dl { margin: 0; display: grid; gap: .1rem; }
.nero-wh-feiten dl > div { display: grid; gap: .15rem; padding: .75rem 0; border-top: 1px solid rgb(22 17 15 / .1); }
.nero-wh-feiten dl > div:first-child { border-top: 0; padding-top: 0; }
.nero-wh-feiten dt { font: 500 .68rem/1.4 var(--body); letter-spacing: .13em; text-transform: uppercase; color: rgb(22 17 15 / .55); }
.nero-wh-feiten dd { margin: 0; font-size: 1rem; line-height: 1.45; }
.nero-wh-site {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.3rem;
	font: 600 .74rem/1 var(--body);
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--bordeaux);
	text-decoration: none;
}
.nero-wh-site:hover .pijl { transform: translateX(4px); }
.nero-wh-site .pijl { transition: transform .35s var(--vlot); }
/* Huis zonder verhaal: de feiten gaan liggend over de volle breedte. */
.nero-wh-verhaal.geen-verhaal .nero-wh-verhaal-in { grid-template-columns: 1fr; }
.nero-wh-verhaal.geen-verhaal .nero-wh-feiten { position: static; padding: 1.6rem clamp(1.2rem, 3vw, 2rem); }
.nero-wh-verhaal.geen-verhaal .nero-wh-feiten dl { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 2rem; }
.nero-wh-verhaal.geen-verhaal .nero-wh-feiten dl > div { border-top: 0; padding-block: .4rem; }

/* waarom wij dit huis voeren */
.nero-wh-waarom { position: relative; overflow: clip; padding-block: clamp(3rem, 6vw, 5rem); }
.nero-wh-waarom-in {
	position: relative;
	max-width: 62rem;
	margin-inline: auto;
	padding-inline: 1.5rem;
}
@media (min-width: 768px) { .nero-wh-waarom-in { padding-inline: 2.5rem; } }
.nero-wh-waarom-tekst {
	margin: 1.2rem 0 0;
	max-width: 42ch;
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
	font-style: italic;
	line-height: 1.35;
	color: var(--ivory);
}
/* Zichtbaar merken dat hier nog echte tekst moet komen. */
.nero-wh-waarom.nog-invullen .nero-wh-waarom-in { border-left: 2px dashed var(--blush); padding-left: 1.5rem; }
.nero-wh-vlag {
	display: inline-block;
	margin: .8rem 0 0;
	padding: .35rem .7rem;
	font: 600 .66rem/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--inkt);
	background: var(--blush);
	border-radius: var(--rond-klein);
}

/* wijnen van dit huis */
.nero-wh-wijnen { padding-block: clamp(3rem, 6vw, 5rem); }
.nero-wh-wijnen-in { max-width: var(--kader); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .nero-wh-wijnen-in { padding-inline: 2.5rem; } }
.nero-wh-wijnen-kop {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 1.6rem;
}
.nero-wh-wijnen-kop h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); color: var(--bordeaux); margin: .4rem 0 0; }
.nero-wh-telling { margin: 0; font: 500 .78rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgb(22 17 15 / .6); }
.nero-wh-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
/* :not() erbij, anders wint deze regel van .nero-chip.is-actief en valt de
   donkere vulling onder de actieve knop weg. */
.nero-wh-filters .nero-chip:not(.is-actief) { background: none; }
.nero-wh-filters .nero-chip { gap: .5rem; cursor: pointer; }
.nero-wh-filters .nero-chip i { font-style: normal; opacity: .55; font-size: .74rem; }
.nero-wh-filters .nero-chip.is-actief i { opacity: .75; }
.nero-card.is-verborgen { display: none; }

/* meer huizen uit hetzelfde land */
.nero-wh-meer { background: rgb(22 17 15 / .04); padding-block: clamp(3rem, 6vw, 5rem); }
.nero-wh-meer-in { max-width: var(--kader); margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 768px) { .nero-wh-meer-in { padding-inline: 2.5rem; } }
.nero-wh-meer-kop {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 2rem;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1.8rem;
}
.nero-wh-meer-kop h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: 0; }
.nero-wh-meer .nero-huizen-grid { margin: 0; }
/* auto-fit in plaats van auto-fill: vier kaarten vullen de rij, geen gat rechts */
@media (min-width: 700px) {
	.nero-wh-meer .nero-huizen-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

@media (max-width: 899px) {
	.nero-wh-feiten { position: static; }
}

/* ------------------------------------------------------- wijnhuizen-grid */
.nero-huizen-zoek { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.nero-huizen-zoek input {
	flex: 1 1 300px; max-width: 420px;
	padding: .85rem 1.1rem;
	border-radius: var(--rond-pill);
	border: 1px solid rgb(22 17 15 / .3);
	font: 400 1rem var(--body);
	background: transparent;
}
.nero-huizen-teller { font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(22 17 15 / .6); }
.nero-huizen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.5rem; }
@media (min-width: 700px) { .nero-huizen-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.nero-huis-kaart {
	position: relative;
	display: block;
	border-radius: var(--rond-kaart);
	aspect-ratio: 3 / 3.6;
	overflow: clip;
	text-decoration: none;
	background: linear-gradient(160deg, #26211d, #4d1226);
	isolation: isolate;
}
.nero-huis-media { position: absolute; inset: 0; z-index: -1; }
.nero-huis-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--vlot); }
.nero-huis-kaart:hover .nero-huis-media img { transform: scale(1.045); }
.nero-huis-kaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(22 17 15 / .15), rgb(22 17 15 / .05) 55%, rgb(22 17 15 / .8)); z-index: -1; }
.nero-huis-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 3rem; color: rgb(242 237 228 / .35); }
.nero-huis-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem; }
.nero-huis-body h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .05em; margin: 0 0 .25rem; color: var(--ivory); }
.nero-huis-body span { font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(242 237 228 / .75); }

/* ----------------------------------------------------------- contactpagina */
.nero-contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.nero-contact-info h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.6rem; margin: 0 0 1rem; }
.nero-contact-info a { color: var(--inkt); text-decoration-color: var(--zilver); }
.nero-contact-info a:hover { color: var(--bordeaux); }
.nero-contact-kvk { color: rgb(22 17 15 / .55); font-size: .85rem; }
@media (max-width: 820px) { .nero-contact-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- formulier */
.nero-form-wrap { max-width: 640px; }
.nero-form { display: grid; gap: 1.1rem; }
.nero-form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.nero-form label { display: grid; gap: .4rem; font: 500 .72rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nero-form input, .nero-form textarea {
	padding: .85rem 1.05rem;
	border: 1px solid rgb(22 17 15 / .3);
	border-radius: var(--rond-klein);
	font: 400 1rem/1.5 var(--body);
	background: transparent;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.nero-form input:focus, .nero-form textarea:focus { outline: none; border-color: var(--bordeaux); box-shadow: 0 0 0 3px rgb(152 0 46 / .12); }
.nero-form button { justify-self: start; }
.nero-form-note { color: rgb(22 17 15 / .6); font-size: .88rem; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--body); }
.nero-hp { position: absolute; left: -9999px; }
.nero-form-ok { border: 1px solid rgb(30 158 79 / .4); border-radius: var(--rond-kaart); padding: 1.6rem; }
.nero-form-ok h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: 1.3rem; }
@media (max-width: 560px) { .nero-form-rij { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------- 404 */
.nero-404 { min-height: 70svh; display: grid; place-content: center; text-align: center; gap: 1rem; padding: 8rem 1.5rem 4rem; }
.nero-404 h1 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 4rem); color: var(--bordeaux); margin: 0; }
.nero-404 p { color: rgb(22 17 15 / .7); max-width: 44ch; margin-inline: auto; }
.nero-404-acties { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1rem; }
.nero-eyebrow { display: block; font: 500 .75rem/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgb(22 17 15 / .6); margin-bottom: .5rem; }

/* ------------------------------------------------- verhaallijn (scrollmeter)
   Dunne lijn langs de zijkant die meeloopt met de pagina. */
.verhaallijn {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 90;
	width: 2px;
	height: 100vh;
	background: rgb(22 17 15 / .08);
	pointer-events: none;
}
.verhaallijn .vulling {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(var(--bordeaux), var(--blush));
	transform: scaleY(0);
	transform-origin: top center;
}
@supports (animation-timeline: scroll()) {
	.verhaallijn .vulling {
		animation: lijnvullen linear both;
		animation-timeline: scroll(root block);
	}
	@keyframes lijnvullen { to { transform: scaleY(1); } }
}
@media (max-width: 860px) { .verhaallijn { display: none; } }

/* Zachte parallax op de grote sectiebeelden */
@supports (animation-timeline: view()) {
	.verhaal-beeld img,
	.proeverijen-beeld img,
	.horeca-beeld img {
		scale: 1.12;
		animation: sectieparallax linear both;
		animation-timeline: view();
	}
	@keyframes sectieparallax {
		from { translate: 0 -3.5%; }
		to { translate: 0 3.5%; }
	}
}

/* ------------------------------------------------------------------- motion */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-zichtbaar {
	opacity: 1;
	transform: none;
	transition: opacity .65s ease, transform .65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-group .reveal:nth-child(2).is-zichtbaar { transition-delay: .07s; }
.reveal-group .reveal:nth-child(3).is-zichtbaar { transition-delay: .14s; }
.reveal-group .reveal:nth-child(4).is-zichtbaar { transition-delay: .21s; }

html.geen-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hero-beeld img, .hero-beeld video { animation: none; }
	.hero h1 .regel > span { transform: none; animation: none; }
	.hero-zij, .hero-scrollhint, .hero-scrollhint-uit { display: none !important; }
.hero-scrollhint-oud { animation: none; }
	.lint ul { animation: none; }
	.beeldzoom img, .ontdek-tegel .beeld img { transition: none !important; transform: none !important; }
	.verhaallijn { display: none; }
	.verhaal-beeld img, .proeverijen-beeld img, .horeca-beeld img { animation: none; scale: 1; }
	* { transition-duration: .01ms !important; }
}

/* volle-breedte fotoband tussen secties */
.nero-fotoband {
	margin: 0;
	height: clamp(280px, 46svh, 520px);
	overflow: clip;
}
.nero-fotoband img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------------------
   Landingspagina's per land en per druif. Leunt op de opmaak van de
   wijnhuispagina (.nero-wh-*); hieronder staat alleen wat er extra bij komt.
   ------------------------------------------------------------------------- */
.nero-kennis-credit {
	margin: 1.6rem 0 0;
	font: 500 .7rem/1.4 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .5);
}
.nero-kennis-meer { margin-top: 2.4rem; }

.nero-kennis-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.nero-kennis-chip {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .6rem 1rem;
	border: 1px solid rgb(22 17 15 / .14);
	border-radius: var(--rond-klein);
	background: #FFFDF9;
	font-size: .92rem;
	text-decoration: none;
	color: var(--inkt);
	transition: border-color .3s var(--vlot), transform .3s var(--vlot);
}
.nero-kennis-chip:hover { border-color: var(--bordeaux); transform: translateY(-2px); }
.nero-kennis-chip b { font-weight: 500; font-size: .78rem; opacity: .55; }

/* Hub op /wijn/ */
.nero-wijzer-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.nero-wijzer-kaart {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.4rem;
	border: 1px solid rgb(22 17 15 / .12);
	border-radius: var(--rond-kaart);
	background: #FFFDF9;
	text-decoration: none;
	color: var(--inkt);
	transition: border-color .35s var(--vlot), transform .35s var(--vlot), box-shadow .35s var(--vlot);
}
.nero-wijzer-kaart:hover {
	border-color: var(--bordeaux);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgb(22 17 15 / .08);
}
.nero-wijzer-kaart h3 {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	font-family: var(--display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--bordeaux);
}
.nero-wijzer-kaart h3 i { font-style: normal; font-size: 1.1rem; }
.nero-wijzer-kaart p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.6;
	color: rgb(22 17 15 / .72);
}
.nero-wijzer-aantal {
	margin-top: auto;
	padding-top: .6rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font: 500 .72rem/1 var(--body);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .55);
}
.nero-wijzer-kaart:hover .pijl { transform: translateX(4px); }
.nero-wijzer-aantal .pijl { transition: transform .35s var(--vlot); }

/* ------------------------------------------------- landfilter bij wijnhuizen */
/* Zelfde chips als in het assortiment, maar horizontaal boven de grid; hier is
   geen zijbalk. Knoppen en geen links, want het filteren gebeurt in de grid. */
.nero-huizen-landen {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .6rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
}
.nero-huizen-landen .land-chip {
	border: 0;
	cursor: pointer;
	font: 500 .8rem/1 var(--body);
	padding: .48rem .85rem;
}
.nero-huizen-landen .land-chip b {
	font-weight: 500;
	font-size: .72rem;
	color: rgb(22 17 15 / .45);
}
.nero-huizen-landen .land-chip.is-actief { background: var(--bordeaux); color: #fff; box-shadow: none; }
.nero-huizen-landen .land-chip.is-actief b { color: rgb(255 255 255 / .7); }

/* -------------------------------------------------------------------- poort
   Leeftijdscheck. Ligt als laag over de pagina; de pagina zelf staat er
   gewoon onder. De klasse op <html> wordt in de head gezet, dus zonder
   JavaScript blijft de poort dicht in plaats van dat hij de site blokkeert. */
.poort { display: none; }
html.poort-aan .poort {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 5vw, 2.5rem);
	/* Iets minder dicht dan eerst: je ziet dat er een site achter ligt, wat
	   een reden geeft om door te klikken. De blur houdt de hero-kop, die
	   groot en licht is, onleesbaar zodat de vraag vooraan blijft staan. */
	background: rgb(22 17 15 / .88);
	backdrop-filter: blur(18px) saturate(1.1);
	color: var(--ivory);
	overscroll-behavior: contain;
}
html.poort-aan, html.poort-aan body { overflow: hidden; }
.poort::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	aspect-ratio: calc(1123.18 / 230 * 2);
	background: url('../img/golven.svg') bottom center / 50% auto repeat-x;
	opacity: .16;
	pointer-events: none;
}
.poort [hidden] { display: none; }
.poort-in {
	position: relative;
	z-index: 1;
	width: min(34rem, 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
	text-align: center;
	animation: poort-op .55s var(--vlot) both;
}
@keyframes poort-op {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}
.poort-logo { width: 104px; height: auto; }
.poort .mono-label { color: var(--zilver); }
.poort-kop {
	font-size: clamp(2rem, 6vw, 2.85rem);
	margin: .55rem 0 0;
}
.poort-tekst {
	max-width: 26rem;
	margin: .9rem auto 0;
	line-height: 1.6;
	color: rgb(242 237 228 / .78);
}
.poort-tekst a { color: var(--ivory); text-underline-offset: .25em; }
.poort-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.9rem;
}
/* "Nee" was een even zware knop als "ja". Daarmee kreeg de uitgang de helft
   van de aandacht en op een telefoon ook de helft van het scherm, terwijl
   verreweg de meeste bezoekers gewoon 18 zijn. Nu is het een rustige regel
   eronder, groot genoeg om met de duim te raken. */
.poort-nee {
	display: block;
	margin: 1.1rem auto 0;
	padding: .5rem .75rem;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: rgb(242 237 228 / .6);
	font: 500 .88rem/1.4 var(--body);
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-color: rgb(242 237 228 / .3);
	cursor: pointer;
	transition: color .25s var(--vlot);
}
.poort-nee:hover { color: var(--ivory); }
.poort .tekstlink { color: var(--blush); padding-right: 0; }
.poort .tekstlink:hover { color: var(--ivory); }
.poort-klein {
	margin-top: 1.1rem;
	font-size: .78rem;
	color: rgb(242 237 228 / .45);
}
.poort-nix img { width: 72px; height: auto; filter: brightness(0) invert(1); opacity: .75; transition: opacity .3s ease; }
.poort-nix:hover img { opacity: 1; }

/* Op een telefoon loopt de knop over de volle breedte; ingekaderd wordt
   "Ja, ik ben 18 of ouder" anders een knop van twee regels. */
@media (max-width: 30rem) {
	.poort-knoppen { flex-direction: column; align-items: stretch; width: 100%; }
	.poort-knoppen .knop { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.poort-in { animation: none; }
}

/* -------------------------------------------------------------------- blog
   De wijnreizen. Kaarten in dezelfde familie als de ontdek-tegels, zodat de
   blog niet als een los WordPress-onderdeel aanvoelt. */
.nero-blog { padding-bottom: clamp(4rem, 8vw, 7rem); }
.blog-grid { display: grid; gap: 2rem; margin-top: 1rem; }
@media (min-width: 720px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1080px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-grid-smal { margin-top: 2rem; }
@media (min-width: 1080px) { .blog-grid-smal { grid-template-columns: repeat(2, 1fr); max-width: 56rem; } }

.blog-kaart { display: block; text-decoration: none; color: inherit; }
.blog-kaart-media {
	position: relative;
	overflow: clip;
	border-radius: var(--rond-beeld);
	aspect-ratio: 4 / 3;
	background: rgb(22 17 15 / .06);
}
.blog-kaart-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--vlot); }
.blog-kaart:hover .blog-kaart-media img { transform: scale(1.05); }
/* Zonder uitgelichte afbeelding een golfvlak in plaats van een grijs gat. */
.blog-kaart-leeg {
	display: block; width: 100%; height: 100%;
	background:
		radial-gradient(120% 90% at 20% 0%, rgb(152 0 46 / .18), transparent 60%),
		linear-gradient(160deg, var(--ivory), rgb(176 183 188 / .35));
}
.blog-kaart-body { padding-top: 1.2rem; }
.blog-kaart-body .mono-label { color: var(--bordeaux); }
.blog-kaart-body h3 {
	margin: .5rem 0 .6rem;
	font-size: clamp(1.35rem, 2.2vw, 1.7rem);
	letter-spacing: -.02em;
	line-height: 1.15;
}
.blog-kaart-tekst { margin: 0; font-size: .95rem; line-height: 1.65; color: rgb(22 17 15 / .7); }
.blog-kaart-datum {
	display: inline-block;
	margin-top: .9rem;
	font: 600 .72rem/1 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgb(22 17 15 / .45);
}
.blog-kaart:hover h3 { color: var(--bordeaux); }

/* Artikel: één leeskolom, beeld en video mogen breder. */
.blog-artikel { max-width: 46rem; margin-inline: auto; padding: clamp(3rem, 7vw, 5.5rem) 1.5rem 0; }
.blog-artikel-kop { margin-bottom: 2.5rem; }
.blog-artikel-kop h1 {
	margin: .6rem 0 0;
	font-family: var(--display);
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.03em;
}
.blog-artikel-beeld img { width: 100%; border-radius: var(--rond-beeld); }
.blog-artikel p { line-height: 1.75; }
.blog-artikel h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2.75rem 0 .9rem; letter-spacing: -.02em; }
.blog-artikel h3 { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 2rem 0 .7rem; letter-spacing: -.02em; }
.blog-artikel figure { margin-inline: 0; }
.blog-artikel img { border-radius: var(--rond-beeld); height: auto; }
/* Aftermovies: een embed mag nooit buiten de leeskolom vallen. */
.blog-artikel iframe { max-width: 100%; border-radius: var(--rond-beeld); }
.blog-artikel .wp-block-embed__wrapper { position: relative; }
.blog-terug { max-width: 46rem; margin: 3rem auto clamp(4rem, 8vw, 6rem); padding-inline: 1.5rem; }
.blog-wijnen { margin-top: clamp(3rem, 6vw, 5rem); }

/* Reisverhaal op de wijnhuispagina. */
.nero-wh-reis { padding: clamp(3rem, 6vw, 5rem) 1.5rem 0; }
.nero-wh-reis-in { max-width: var(--kader); margin-inline: auto; }
.nero-wh-reis-kop h2 { margin: .5rem 0 0; font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -.02em; }