/* ------------------------------------------------------------------
   filters.css — doorzoekbare comboboxen + sticky filterlade op mobiel.

   Progressive enhancement: filters.js zet elke <select> in .search om in
   een combobox en houdt de originele <select> als bron van waarheid.
   Zonder JS blijft alles een gewone select en werkt het formulier zoals
   het altijd deed.
   ------------------------------------------------------------------ */

.zjb-combo{
	--zc-ink:#0f172a; --zc-muted:#64748b; --zc-line:#e6eaf0; --zc-soft:#f6f8fb;
	--zc-brand:#39679f; --zc-r:6px;
	position:relative; width:100%;
}

/* de knop die de select vervangt */
.zjb-combo__knop{
	display:flex; align-items:center; gap:8px; width:100%; min-height:34px;
	padding:6px 30px 6px 10px; box-sizing:border-box;
	background:#fff; border:1px solid var(--zc-line); border-radius:var(--zc-r);
	font:inherit; font-size:14px; color:var(--zc-ink); text-align:left;
	cursor:pointer; position:relative;
	transition:border-color .15s, box-shadow .15s;
}
.zjb-combo__knop:hover{ border-color:#c3d3e6 }
.zjb-combo__knop:focus-visible{ outline:0; border-color:var(--zc-brand); box-shadow:0 0 0 3px rgba(57,103,159,.18) }
.zjb-combo__knop[aria-expanded="true"]{ border-color:var(--zc-brand) }
.zjb-combo__waarde{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.zjb-combo__waarde--leeg{ color:var(--zc-muted) }
.zjb-combo__knop:after{
	content:""; position:absolute; right:11px; top:50%; width:7px; height:7px;
	margin-top:-5px; border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8;
	transform:rotate(45deg); transition:transform .18s;
}
.zjb-combo__knop[aria-expanded="true"]:after{ transform:rotate(-135deg); margin-top:-2px }

/* wissen-kruisje bij een actieve keuze */
.zjb-combo__wis{
	position:absolute; right:28px; top:50%; transform:translateY(-50%);
	width:18px; height:18px; display:grid; place-items:center; padding:0;
	border:0; border-radius:50%; background:#e2e8f0; color:#475569;
	font-size:12px; line-height:1; cursor:pointer; z-index:2;
}
.zjb-combo__wis:hover{ background:#cbd5e1; color:#0f172a }

/* de uitklap */
.zjb-combo__paneel{
	position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px);
	background:#fff; border:1px solid var(--zc-line); border-radius:var(--zc-r);
	box-shadow:0 10px 30px rgba(15,23,42,.14); overflow:hidden;
	display:none;
}
.zjb-combo--open .zjb-combo__paneel{ display:block }
.zjb-combo--omhoog .zjb-combo__paneel{ top:auto; bottom:calc(100% + 4px) }

.zjb-combo__zoek{ padding:8px; border-bottom:1px solid var(--zc-line); background:var(--zc-soft) }
.zjb-combo__zoek input{
	width:100%; box-sizing:border-box; padding:7px 10px; font:inherit; font-size:14px;
	border:1px solid var(--zc-line); border-radius:var(--zc-r); background:#fff;
}
.zjb-combo__zoek input:focus{ outline:0; border-color:var(--zc-brand); box-shadow:0 0 0 3px rgba(57,103,159,.15) }

.zjb-combo__lijst{ max-height:260px; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:4px; list-style:none }
.zjb-combo__optie{
	padding:8px 10px; border-radius:var(--zc-r); font-size:14px; color:var(--zc-ink);
	cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.zjb-combo__optie:hover, .zjb-combo__optie.is-actief{ background:var(--zc-soft) }
.zjb-combo__optie[aria-selected="true"]{ color:var(--zc-brand); font-weight:600 }
.zjb-combo__optie mark{ background:#fde68a; color:inherit; padding:0; border-radius:2px }
.zjb-combo__naam{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.zjb-combo__aantal{
	flex:0 0 auto; min-width:26px; padding:1px 6px; border-radius:999px;
	background:var(--zc-soft); font-size:11.5px; font-weight:600; color:var(--zc-muted);
	text-align:center; font-variant-numeric:tabular-nums;
}
.zjb-combo__optie[aria-selected="true"] .zjb-combo__aantal{ background:rgba(57,103,159,.12); color:var(--zc-brand) }
.zjb-combo__leeg{ padding:14px 10px; text-align:center; font-size:13px; color:var(--zc-muted) }

/* meerkeuze: vinkje voor de naam, paneel blijft open bij het aanklikken */
.zjb-combo__optie--vink{ justify-content:flex-start }
.zjb-combo__vink{
	flex:0 0 auto; width:17px; height:17px; border:1.5px solid var(--zc-line); border-radius:4px;
	background:#fff; position:relative; transition:background-color .12s, border-color .12s;
}
.zjb-combo__optie--vink:hover .zjb-combo__vink{ border-color:#b9cbe2 }
.zjb-combo__optie.is-gekozen .zjb-combo__vink{ background:var(--zc-brand); border-color:var(--zc-brand) }
.zjb-combo__optie.is-gekozen .zjb-combo__vink:after{
	content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
	border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
}
.zjb-combo__optie--vink .zjb-combo__aantal{ margin-left:auto }

/* de knop toont dat er iets gekozen is */
.zjb-combo--gekozen .zjb-combo__knop{ border-color:var(--zc-brand); background:rgba(57,103,159,.05) }
.zjb-combo--gekozen .zjb-combo__waarde{ font-weight:600; color:var(--zc-brand) }

/* ------------------------------------------------------------------
   balk boven het raster: aantal gevonden + sorteren

   Sorteren stond eerder als dropdown tussen de filters. Het hoort bij de
   resultatenlijst, dus staat het nu hier, naast het totaal.
   ------------------------------------------------------------------ */
.zjb-resultaatbalk{
	display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
	max-width:1400px; margin:18px auto 4px; padding:0 14px;
}
.zjb-resultaatbalk__aantal{ margin:0; font-size:15px; color:#475569 }
.zjb-resultaatbalk__aantal strong{ color:#0f172a; font-size:17px; font-variant-numeric:tabular-nums }

.zjb-sorteer{ display:flex; align-items:center; gap:9px; min-width:0 }
.zjb-sorteer__label{ font-size:13px; font-weight:600; color:#64748b; white-space:nowrap }
.zjb-sorteer__select{
	appearance:none; -webkit-appearance:none;
	min-height:40px; max-width:100%; padding:0 34px 0 13px;
	border:1px solid #e6eaf0; border-radius:6px; background:#fff;
	font:inherit; font-size:14px; font-weight:600; color:#0f172a; cursor:pointer;
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238595ab'><path d='M7 10l5 5 5-5z'/></svg>");
	background-repeat:no-repeat; background-position:right 9px center; background-size:19px;
}
.zjb-sorteer__select:hover{ border-color:#c3d3e6 }
.zjb-sorteer__select:focus-visible{ outline:0; border-color:#39679f; box-shadow:0 0 0 3px rgba(57,103,159,.18) }

/* in de linkerkolom-indeling loopt de balk mee met de resultaatkolom */
@media (min-width:901px){
	.zjb-indeling+.zjb-resultaatbalk,
	.zjb-resultaatbalk{ margin-top:0 }
}
@media (max-width:640px){
	.zjb-resultaatbalk{ margin:12px auto 2px; gap:8px }
	.zjb-resultaatbalk__aantal{ font-size:14px; flex:1 1 100% }
	.zjb-sorteer{ flex:1 1 100% }
	.zjb-sorteer__label{ display:none }
	.zjb-sorteer__select{ width:100% }
}

/* kleine telling achter een label, buiten de comboboxen om */
.zjb-telling{ color:#64748b; font-weight:400; font-variant-numeric:tabular-nums }

/* ------------------------------------------------------------------
   kopjes boven een groep filters
   ------------------------------------------------------------------ */
.blokTitel{
	margin:0 0 10px; font-size:13.5px; font-weight:700; letter-spacing:0;
	color:#94a3b8;
}
.block.slide .blokTitel{ margin-top:2px }

/* in de linkerkolom staan alle blokken open; dan is een lijn tussen de
   groepen prettiger dan de losse "Meer filters"-knop */
@media (min-width:901px){
	.zjb-indeling .block.slide>.blokTitel{
		margin-top:16px; padding-top:14px; border-top:1px solid #e6eaf0;
	}
}

/* ------------------------------------------------------------------
   sticky filterlade op mobiel
   ------------------------------------------------------------------ */
.zjb-filterbalk{ display:none }
/* kop en voet van de lade horen alleen op mobiel te bestaan */
.zjb-ladekop, .zjb-ladevoet{ display:none }

@media (max-width:900px){
	/* knop die onderaan blijft staan */
	.zjb-filterbalk{
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:900;
		gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
		background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
		border-top:1px solid var(--zc-line, #e6eaf0);
		box-shadow:0 -2px 14px rgba(15,23,42,.08);
	}
	.zjb-filterbalk button{
		flex:1; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
		border:1px solid #39679f; border-radius:6px; background:#39679f; color:#fff;
		font:inherit; font-size:15px; font-weight:600; cursor:pointer;
	}
	.zjb-filterbalk .zjb-telling{
		display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
		border-radius:999px; background:#fff; color:#39679f; font-size:12px; font-weight:700;
	}

	/* de lade zelf */
	.search.zjb-lade{
		position:fixed; left:0; right:0; bottom:0; top:auto; z-index:901;
		max-height:86vh; margin:0; border-radius:10px 10px 0 0;
		background:#fff; box-shadow:0 -12px 40px rgba(15,23,42,.28);
		transform:translateY(100%); transition:transform .28s cubic-bezier(.2,.8,.3,1);
		display:flex; flex-direction:column; overflow:hidden;
	}
	.search.zjb-lade.is-open{ transform:translateY(0) }
	.search.zjb-lade .zjb-ladekop{
		display:flex !important; align-items:center; justify-content:space-between; gap:12px;
		padding:14px 16px; border-bottom:1px solid var(--zc-line, #e6eaf0); flex:0 0 auto;
	}
	.search.zjb-lade .zjb-ladekop strong{ font-size:16px }
	.search.zjb-lade .zjb-ladekop button{
		border:0; background:#f1f5f9; color:#475569; width:34px; height:34px;
		border-radius:6px; font-size:18px; line-height:1; cursor:pointer;
	}
	.search.zjb-lade .zjb-ladebody{ overflow-y:auto; overscroll-behavior:contain; padding:4px 16px 14px; flex:1 1 auto }

	/* ---- inhoud van de lade -------------------------------------------
	   De filters zaten in .blockWrap, een kaart met eigen rand, schaduw en
	   achtergrond. Binnen een modal levert dat een kader-in-een-kader op dat
	   los aanvoelt. In de lade is die kaart daarom vlak: de lade zelf is het
	   kader. De blokken worden gescheiden door een lijn met een kopje, zodat
	   je ziet waar je bent zonder dat het een tweede paneel wordt. */
	.zjb-lade .blockWrap{
		background:none; border:0; border-radius:0; box-shadow:none; padding:0;
	}
	.zjb-lade .block{ padding:0 }
	.zjb-lade .blockInner{ gap:14px 10px }

	/* In de lade staat alles open op de laatste groep na; die zit onder
	   "Meer filters", net als op desktop. */
	.zjb-lade .searchActions{ display:flex; margin:14px 0 0 }
	.zjb-lade .searchActions .meerknop{ width:100%; justify-content:center }

	.zjb-lade .blokTitel{
		display:block; margin:18px 0 10px; padding-top:16px;
		border-top:1px solid var(--zc-line, #e6eaf0);
		font-size:13px; font-weight:700; letter-spacing:0; color:#94a3b8;
	}
	.zjb-lade .block:first-of-type .blokTitel{ margin-top:8px; padding-top:0; border-top:0 }

	/* de vrije zoekbalk bovenaan, direct onder de kop van de lade */
	.zjb-lade .zoekAlles{ width:100%; margin:6px 0 0 }
	.search.zjb-lade .zjb-ladevoet{
		display:flex !important; flex:0 0 auto; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
		border-top:1px solid var(--zc-line, #e6eaf0); display:flex; gap:8px; background:#fff;
	}
	.search.zjb-lade .zjb-ladevoet button{
		flex:1; min-height:46px; border-radius:6px; font:inherit; font-size:15px; font-weight:600; cursor:pointer;
	}
	.search.zjb-lade .zjb-toepassen{ border:1px solid #39679f; background:#39679f; color:#fff }
	.search.zjb-lade .zjb-wissen{ border:1px solid var(--zc-line, #e6eaf0); background:#fff; color:#475569 }

	.zjb-overlay{
		position:fixed; inset:0; z-index:899; background:rgba(15,23,42,.45);
		backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
	}
	.zjb-overlay.is-open{ opacity:1; visibility:visible }

	body.zjb-lade-open{ overflow:hidden }

	/* de comboboxen krijgen meer tikruimte in de lade */
	.zjb-lade .zjb-combo__knop{ min-height:42px; font-size:15px }
	.zjb-lade .zjb-combo__optie{ padding:11px 10px; font-size:15px }
	.zjb-lade .zjb-combo__lijst{ max-height:46vh }
}

@media (prefers-reduced-motion:reduce){
	.search.zjb-lade, .zjb-overlay, .zjb-combo__knop:after{ transition:none !important }
}

/* ------------------------------------------------------------------
   fotocarrousel op de listing-kaarten
   Scroll-snap, geen library. Elke dia is een link naar de advertentie,
   dus klikken opent de advertentie in plaats van de foto te wisselen.
   ------------------------------------------------------------------ */
.zjb-kaart{ position:relative; overflow:hidden }
.zjb-kaart__spoor{
	display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
	overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
	scrollbar-width:none; scroll-behavior:smooth;
}
.zjb-kaart__spoor::-webkit-scrollbar{ display:none }
.zjb-kaart__slide{
	flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always;
	display:block; line-height:0;
}
.zjb-kaart__slide img{ width:100%; height:auto; display:block; object-fit:cover; background:#eef1f6 }

/* pijlen: op desktop pas bij hover, op touch altijd verborgen */
.zjb-kaart__pijl{
	position:absolute; top:50%; transform:translateY(-50%); z-index:2;
	width:30px; height:30px; padding:0; border:0; border-radius:50%;
	background:rgba(255,255,255,.92); box-shadow:0 1px 4px rgba(15,23,42,.28);
	cursor:pointer; opacity:0; transition:opacity .18s, background .18s;
}
.zjb-kaart:hover .zjb-kaart__pijl{ opacity:1 }
.zjb-kaart__pijl:hover{ background:#fff }
.zjb-kaart__pijl:focus-visible{ opacity:1; outline:2px solid #39679f; outline-offset:2px }
.zjb-kaart__pijl[disabled]{ opacity:0 !important; pointer-events:none }
.zjb-kaart__pijl--vorige{ left:8px }
.zjb-kaart__pijl--volgende{ right:8px }
.zjb-kaart__pijl:before{
	content:""; position:absolute; top:50%; left:50%; width:7px; height:7px;
	border-right:2px solid #334155; border-bottom:2px solid #334155;
}
.zjb-kaart__pijl--volgende:before{ transform:translate(-65%,-50%) rotate(-45deg) }
.zjb-kaart__pijl--vorige:before{ transform:translate(-35%,-50%) rotate(135deg) }

.zjb-kaart__dots{
	position:absolute; left:0; right:0; bottom:8px; z-index:2;
	display:flex; justify-content:center; gap:5px; pointer-events:none;
}
.zjb-kaart__dots span{
	width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.65);
	box-shadow:0 0 2px rgba(15,23,42,.5); transition:width .22s, background .22s;
}
.zjb-kaart__dots span.is-actief{ width:16px; border-radius:3px; background:#fff }

@media (hover:none){
	.zjb-kaart__pijl{ display:none }
}
@media (prefers-reduced-motion:reduce){
	.zjb-kaart__spoor{ scroll-behavior:auto }
	.zjb-kaart__dots span{ transition:none }
}

/* ------------------------------------------------------------------
   Veldindeling binnen een smalle filterkolom (linkerkolom op desktop,
   lade op mobiel).

   Twee kolommen: een gewone dropdown pakt de volle breedte, maar een
   van/tot-paar - in de markup gemarkeerd als .halfFirst + .halfLast -
   komt 50/50 naast elkaar te staan. Dat scheelt flink hoogte bij prijs,
   bouwjaar en kilometerstand.
   ------------------------------------------------------------------ */
.zjb-indeling .blockInner,
.search.zjb-lade .blockInner{ grid-template-columns:1fr 1fr; column-gap:10px }
.zjb-indeling .blockInner>.dropdown,
.search.zjb-lade .blockInner>.dropdown{ grid-column:1 / -1 }
.zjb-indeling .blockInner>.dropdown.halfFirst,
.search.zjb-lade .blockInner>.dropdown.halfFirst{ grid-column:1 }
.zjb-indeling .blockInner>.dropdown.halfLast,
.search.zjb-lade .blockInner>.dropdown.halfLast{ grid-column:2 }

/* het lege &nbsp;-label boven "tot" hoeft geen ruimte te kosten op de
   plek waar het paar toch al onder een gedeelde kop staat */
.zjb-indeling .blockInner>.dropdown.halfLast>label,
.search.zjb-lade .blockInner>.dropdown.halfLast>label{ white-space:nowrap }

/* ------------------------------------------------------------------
   filterkolom links op desktop
   form.search (de filters) en div#timeline (de resultaten) staan los in
   de pagina. filters.js zet die twee samen in .zjb-indeling zodat ze
   naast elkaar kunnen staan zonder de PHP-markup te verbouwen. De
   pre-header blijft buiten die wrapper en dus over de volle breedte.
   ------------------------------------------------------------------ */
@media (min-width:901px){
	.zjb-indeling{
		display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px;
		align-items:start; max-width:1400px; margin:0 auto; padding:0 14px;
	}
	.zjb-indeling>.search{
		position:sticky; top:14px; min-width:0; padding:0;
		max-height:calc(100vh - 28px); overflow-y:auto; overscroll-behavior:contain;
		scrollbar-width:thin;
	}
	/* in een smalle kolom past geen raster van vier */
	/* "Meer filters" is overbodig als alles onder elkaar past: in een kolom
	   van 300px scrollt de bezoeker toch al langs de groepen. */
	.zjb-indeling .block.slide{ margin-top:12px }
	/* "Meer filters" blijft ook in de linkerkolom staan: daaronder zitten
	   laadvermogen, trekvermogen en laadruimte. */
	.zjb-indeling .searchActions{ display:flex; margin:14px 0 0 }
	.zjb-indeling .searchActions .meerknop{ width:100%; justify-content:center }
	.zjb-indeling>.zjb-resultaten{ min-width:0 }
	.zjb-indeling>.zjb-resultaten>#timeline{ min-width:0; margin:0 }
	.zjb-indeling>.zjb-resultaten>.zjb-resultaatbalk{ padding:0; margin:0 0 12px }
}
@media (max-width:900px){
	.zjb-indeling{ display:block }
}

/* ------------------------------------------------------------------
   Dealerlogo's als doorlopende band

   Zelfde idee als een logo-marquee uit een React-componentenbibliotheek,
   maar dan zonder framework: de reeks staat twee keer in de DOM en de
   animatie schuift precies de helft op, waardoor hij naadloos herhaalt.
   De randen vervagen via mask-image, hij staat stil als je erover
   zweeft of er met het toetsenbord in staat, en wie beweging heeft
   uitgezet krijgt gewoon een scrollbare rij.
   ------------------------------------------------------------------ */
.zjb-dealerband{
	max-width:1400px; margin:56px auto 40px; padding:0 22px;
}
.zjb-dealerband__kop{ text-align:center; margin-bottom:22px }
.zjb-dealerband__kop h2{
	margin:0; font-size:clamp(19px,2.4vw,24px); font-weight:800;
	letter-spacing:-.01em; color:#0f172a;
}
.zjb-dealerband__kop p{ margin:6px 0 0; font-size:14.5px; color:#64748b }

.zjb-band{
	overflow:hidden; padding:6px 0;
	-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
	        mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.zjb-band__spoor{
	display:flex; width:max-content;
	animation:zjbBandLoop var(--zjb-band-duur,40s) linear infinite;
}
.zjb-band__reeks{ display:flex; align-items:center; gap:44px; padding-right:44px }

@keyframes zjbBandLoop{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.zjb-band:hover .zjb-band__spoor,
.zjb-band:focus-within .zjb-band__spoor{ animation-play-state:paused }

.zjb-band__logo{
	display:grid; place-items:center; flex:0 0 auto; height:46px; padding:0 4px;
	opacity:.62; filter:grayscale(1); transition:opacity .2s, filter .2s;
}
.zjb-band__logo:hover,
.zjb-band__logo:focus-visible{ opacity:1; filter:none }
.zjb-band__logo img{
	max-height:46px; width:auto; max-width:170px; object-fit:contain;
	user-select:none; -webkit-user-drag:none;
}

.zjb-dealerband__actie{ display:flex; justify-content:center; margin-top:24px }

@media (max-width:640px){
	.zjb-dealerband{ margin:40px auto 30px; padding:0 14px }
	.zjb-band__reeks{ gap:30px; padding-right:30px }
	.zjb-band__logo, .zjb-band__logo img{ height:36px; max-height:36px }
}

/* beweging uit: geen animatie, wel zelf kunnen scrollen */
@media (prefers-reduced-motion:reduce){
	.zjb-band{ overflow-x:auto; -webkit-mask-image:none; mask-image:none }
	.zjb-band__spoor{ animation:none }
	.zjb-band__reeks:last-child{ display:none }
}

/* ------------------------------------------------------------------
   Footer

   Was twee losse balken - een donkerblauw blok en daaronder een grijze
   strook met een gat ertussen. Nu één footer met dezelfde achtergrond
   en een haarlijn als scheiding.
   ------------------------------------------------------------------ */
.zjb-voet{
	background:#131c2c; color:#9fb0c6; margin-top:70px;
	font-size:14.5px; line-height:1.6;
}
.zjb-voet__kolommen{
	max-width:1400px; margin:0 auto; padding:46px 22px 34px;
	display:grid; gap:28px 34px;
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.zjb-voet__kolom{ display:flex; flex-direction:column; min-width:0 }
.zjb-voet h2{
	margin:0 0 12px; font-size:14px; font-weight:700; letter-spacing:0;
	text-transform:none; color:#fff;
}
.zjb-voet a{
	display:block; width:max-content; max-width:100%;
	color:#9fb0c6; text-decoration:none; padding:5px 0;
	transition:color .15s;
}
.zjb-voet a:hover, .zjb-voet a:focus-visible{ color:#fff }
.zjb-voet__kolom--contact p{ margin:0 0 12px; font-size:14px; color:#7d8fa8 }
.zjb-voet__mail{
	display:inline-flex !important; align-items:center; gap:8px; width:auto !important;
	padding:9px 13px !important; border:1px solid rgba(255,255,255,.14); border-radius:6px;
	font-size:13.5px; font-weight:600; color:#fff !important;
}
.zjb-voet__mail:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.28) }
.zjb-voet__mail svg{ width:16px; height:16px; flex:0 0 auto }

.zjb-voet__onder{
	border-top:1px solid rgba(255,255,255,.09);
}
.zjb-voet__onder{
	max-width:1400px; margin:0 auto; padding:16px 22px 22px;
	display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
	font-size:13px; color:#7d8fa8;
}
.zjb-voet__klein{ display:flex; gap:20px; flex-wrap:wrap }
.zjb-voet__klein a{ padding:0; font-size:13px }

@media (max-width:640px){
	.zjb-voet__kolommen{ padding:32px 16px 24px; gap:22px; grid-template-columns:repeat(2,minmax(0,1fr)) }
	.zjb-voet__kolom--contact{ grid-column:1/-1 }
	.zjb-voet__onder{ padding:14px 16px 20px; justify-content:flex-start }
}

/* ------------------------------------------------------------------
   Zoekrij bovenaan het filterpaneel

   Het vrije zoekveld stond onderaan, na alle dropdowns. Voor de meeste
   bezoekers is dat juist het beginpunt, dus het staat nu bovenaan, met
   een wisknop ernaast die terug gaat naar het overzicht zonder filters.
   ------------------------------------------------------------------ */
.zoekRij{ display:flex; align-items:stretch; gap:8px; margin-bottom:14px }
.zoekRij .zoekAlles{ flex:1 1 auto; min-width:0; margin:0 }

.wisFilters{
	flex:0 0 auto; display:inline-grid; place-items:center; width:46px; height:46px;
	border:1px solid var(--zc-line,#e6eaf0); border-radius:11px; background:#fff;
	color:#64748b; transition:color .15s, border-color .15s, background-color .15s;
}
.wisFilters:hover, .wisFilters:focus-visible{
	color:#b91c1c; border-color:#fca5a5; background:#fef2f2; outline:0;
}
.wisFilters svg{ width:18px; height:18px }

@media (max-width:900px){
	.zoekRij{ margin-bottom:12px }
	.wisFilters{ width:44px; height:44px; border-radius:8px }
}

/* ------------------------------------------------------------------
   Optiefilter: knop + gecentreerde modal
   ------------------------------------------------------------------ */
.dropdown--breed{ grid-column:1 / -1 }

.optieKnop{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	width:100%; min-height:46px; padding:0 14px;
	border:1px solid var(--zc-line,#e6eaf0); border-radius:11px; background:var(--panel-2,#f8fafc);
	font:inherit; font-size:14.5px; font-weight:600; color:#64748b; cursor:pointer;
	transition:border-color .15s, color .15s, background-color .15s;
}
.optieKnop:hover{ border-color:#c3d3e6; background:#fff }
.optieKnop:focus-visible{ outline:0; border-color:#39679f; box-shadow:0 0 0 3px rgba(57,103,159,.18) }
.optieKnop svg{ width:17px; height:17px; flex:none; color:#94a3b8 }
.optieKnop--aan{ border-color:#39679f; background:rgba(57,103,159,.05); color:#39679f }
.optieKnop--aan svg{ color:#39679f }

.optieOverlay{
	position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
	padding:20px; background:rgba(15,23,42,.5); backdrop-filter:blur(3px);
}
.optieOverlay[hidden]{ display:none }
body.optieModal-open{ overflow:hidden }

.optieModal{
	display:flex; flex-direction:column; width:100%; max-width:560px; max-height:min(680px,88vh);
	background:#fff; border-radius:12px; overflow:hidden;
	box-shadow:0 24px 60px rgba(15,23,42,.28);
}
.optieModal__kop{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:18px 20px; border-bottom:1px solid var(--zc-line,#e6eaf0); flex:0 0 auto;
}
.optieModal__kop h2{ margin:0; font-size:19px; font-weight:700; color:#0f172a }
.optieModal__sluit{
	width:34px; height:34px; padding:0; border:0; border-radius:8px;
	background:#f1f5f9; color:#475569; font-size:22px; line-height:1; cursor:pointer;
}
.optieModal__sluit:hover{ background:#e2e8f0; color:#0f172a }

.optieModal__zoek{ position:relative; padding:14px 20px 10px; flex:0 0 auto }
.optieModal__zoek svg{
	position:absolute; left:32px; top:50%; margin-top:-4px; width:18px; height:18px;
	color:#94a3b8; pointer-events:none;
}
.optieModal__zoek input{
	width:100%; box-sizing:border-box; min-height:44px; padding:0 14px 0 42px;
	border:1px solid var(--zc-line,#e6eaf0); border-radius:8px; background:#fff;
	font:inherit; font-size:15px; color:#0f172a;
}
.optieModal__zoek input:focus{ outline:0; border-color:#39679f; box-shadow:0 0 0 3px rgba(57,103,159,.16) }

.optieModal__lijst{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:4px 12px 12px }
.optieRij{
	display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:8px;
	font-size:15px; color:#0f172a; cursor:pointer;
}
.optieRij:hover{ background:var(--zc-soft,#f6f8fb) }
.optieRij input{ width:19px; height:19px; flex:none; margin:0; accent-color:#39679f; cursor:pointer }
.optieRij__naam{ flex:1 1 auto; min-width:0 }
.optieRij__aantal{ flex:none; font-size:14px; color:#94a3b8; font-variant-numeric:tabular-nums }
.optieRij.is-gekozen{ font-weight:600 }
.optieModal__leeg{ padding:26px 10px; text-align:center; color:#64748b; font-size:14.5px }

.optieModal__voet{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:14px 20px calc(14px + env(safe-area-inset-bottom));
	border-top:1px solid var(--zc-line,#e6eaf0); background:#fff; flex:0 0 auto;
}
.optieModal__reset{
	border:0; background:none; padding:10px 4px; cursor:pointer;
	font:inherit; font-size:15px; font-weight:600; color:#39679f;
}
.optieModal__reset:hover:not(:disabled){ text-decoration:underline }
.optieModal__reset:disabled{ color:#cbd5e1; cursor:default }
.optieModal__toon{
	min-height:46px; padding:0 24px; border:0; border-radius:8px;
	background:#39679f; color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.optieModal__toon:hover{ background:#2b4f7d }

@media (max-width:560px){
	.optieOverlay{ padding:0; align-items:flex-end }
	.optieModal{ max-width:none; max-height:92vh; border-radius:12px 12px 0 0 }
	.optieModal__toon{ flex:1 1 auto }
}

/* ------------------------------------------------------------------
   Dealerpagina: introblok boven het voorraadoverzicht

   De tekst en de contactgegevens stonden als twee floats van 50% en 40%
   zonder clearfix. Het omliggende blok had daardoor geen hoogte en de
   filterkolom van het overzicht liep er dwars overheen. Nu een grid over
   de volle breedte, met het overzicht netjes eronder.
   ------------------------------------------------------------------ */
.dealerkop{
	max-width:1400px; margin:0 auto 8px; padding:26px 14px 0;
	clear:both;
}
.dealerkop__logo{ display:flex; justify-content:center; margin-bottom:22px }
.dealerkop__logo img{
	max-height:96px; max-width:260px; width:auto; height:auto; object-fit:contain;
	background:#fff; border:1px solid #e6eaf0; border-radius:8px; padding:10px;
}
.dealerkop__kolommen{
	display:grid; gap:24px 40px; align-items:start;
	grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
}
.dealerkop__tekst, .dealerkop__zij{ min-width:0; font-size:15.5px; line-height:1.7; color:#334155 }
.dealerkop__tekst h1,.dealerkop__tekst h2,.dealerkop__zij h1,.dealerkop__zij h2{
	margin:0 0 10px; font-size:clamp(22px,3vw,30px); font-weight:800;
	letter-spacing:-.02em; color:#0f172a; line-height:1.2;
}
.dealerkop__zij h2,.dealerkop__zij h3{ font-size:17px; margin:0 0 6px }
.dealerkop__tekst p,.dealerkop__zij p{ margin:0 0 14px }
.dealerkop__tekst p:last-child,.dealerkop__zij p:last-child{ margin-bottom:0 }
.dealerkop__zij img,.dealerkop__zij iframe{ max-width:100%; border-radius:8px }
.dealerkop__zij iframe{ width:100%; border:0; display:block }

/* het overzicht eronder begint op een schone regel */
.dealerkop + .zjb-indeling,
.dealerkop ~ .zjb-resultaatbalk{ clear:both }

@media (max-width:900px){
	.dealerkop{ padding:18px 14px 0 }
	.dealerkop__kolommen{ grid-template-columns:1fr; gap:20px }
	.dealerkop__logo img{ max-height:72px }
}

/* ------------------------------------------------------------------
   Kaartinhoud: specs, prijzen en knop

   De specs stonden als vier <img>-verwijzingen naar losse svg-bestanden
   in de webroot - vier extra requests per kaart, in een vaste grijstint
   die niet meeliep met de rest. Nu inline iconen in currentColor.
   ------------------------------------------------------------------ */
.kaartSpecs{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px;
	margin:12px 0 0; padding:0; list-style:none;
}
.kaartSpec{
	display:flex; align-items:center; gap:8px; min-width:0;
	font-size:13.5px; font-weight:600; color:#475569;
}
.kaartSpec svg{ width:17px; height:17px; flex:none; color:#94a3b8 }
.kaartSpec>span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* prijs links, leasebedrag ertegenover */
.kaartPrijs{
	display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
	margin-top:14px; padding-top:12px; border-top:1px solid #e6eaf0;
}
.kaartPrijs__koop, .kaartPrijs__lease{
	display:flex; flex-direction:column; min-width:0; text-decoration:none;
}
.kaartPrijs__lease{ text-align:right; align-items:flex-end }
.kaartPrijs__koop .kaartPrijs__bedrag{ font-size:22px; font-weight:800; color:#0f172a; letter-spacing:-.02em }
.kaartPrijs__lease .kaartPrijs__bedrag{ font-size:17px; font-weight:700; color:#39679f }
.kaartPrijs__sub{ margin-top:2px; font-size:12px; font-weight:500; color:#94a3b8; white-space:nowrap }
.kaartPrijs__lease:hover .kaartPrijs__bedrag{ color:#2b4f7d }

/* knop over de volle breedte, met een scheiding erboven */
.kaartKnop{
	display:block; width:100%; margin-top:14px; padding:12px 16px;
	border:1px solid #e6eaf0; border-radius:8px; background:#f6f8fb;
	font-size:14.5px; font-weight:700; color:#39679f; text-align:center; text-decoration:none;
	transition:background-color .15s, border-color .15s, color .15s;
}
.kaartKnop:hover{ background:#39679f; border-color:#39679f; color:#fff }

@media (max-width:520px){
	.kaartSpecs{ gap:7px 10px }
	.kaartSpec{ font-size:13px }
	.kaartPrijs__koop .kaartPrijs__bedrag{ font-size:20px }
	.kaartPrijs__lease .kaartPrijs__bedrag{ font-size:15.5px }
}