/* ==========================================================================
   Motorenleasen.nl: eigen huisstijl (bovenop style.css)
   Asfaltzwart, gasoranje, Barlow Condensed. De calculator is een dashboard.
   ========================================================================== */

/* Koppen: krachtig en sportief */
h1, h2, .wp-block-post-title { text-transform: uppercase; letter-spacing: .005em !important; line-height: .98 !important; }
h1 em, h2 em { font-style: italic; color: var(--signal); }
h3 { letter-spacing: .01em !important; }
.label { letter-spacing: .16em; }
.label strong { color: var(--signal-dark); }
.dark .label strong, .ml-hero .label, .ml-hero .label strong { color: var(--signal); }
.wp-block-button__link, .btn { border-radius: var(--radius) !important; text-transform: none; }

/* Logo (het bestaande logo van Motorenleasen.nl) */
.logo { display: block; line-height: 0; }
.logo img { height: 58px; width: auto; display: block; }
footer.site .logo img { height: 64px; }

/* Hero met foto en dashboard-calculator */
.ml-hero { position: relative; background: var(--ink); color: #c9ccd1; overflow: hidden; isolation: isolate; }
.ml-hero-bg { position: absolute !important; inset: 0; margin: 0 !important; z-index: -2; }
.ml-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.ml-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16, 18, 20, .92) 0%, rgba(16, 18, 20, .66) 40%, rgba(16, 18, 20, .2) 75%, rgba(16, 18, 20, .1) 100%), linear-gradient(0deg, rgba(16, 18, 20, .75), transparent 45%); }
.ml-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: repeating-linear-gradient(-60deg, var(--signal) 0 26px, transparent 26px 40px); opacity: .9; }
.ml-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; padding-top: 88px; padding-bottom: 104px; }
.ml-hero h1 { color: #fff; font-size: clamp(2.8rem, 6vw, 5rem) !important; margin-bottom: 22px !important; }
.ml-hero .lead { color: #d4d7db; font-size: 1.15rem; max-width: 560px; }
.ml-hero .hero-checks { color: #e6e8eb; }
.ml-hero .hero-checks li::before { background: var(--signal); }
.ml-hero .crumbs, .ml-hero .crumbs a { color: #a3a8ae; }
.ml-hero .ctas { margin-top: 30px; }
.ml-hero.compact .ml-hero-grid { grid-template-columns: 1fr; padding-top: 72px; padding-bottom: 84px; }
.ml-hero.compact h1 { font-size: clamp(2.4rem, 5vw, 4rem) !important; max-width: 860px; }

/* Calculator */
.ml-calc { background: #fff; color: var(--text); border-radius: 16px; padding: 28px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.ml-calc h3 { font: 800 1.7rem/1 var(--head) !important; text-transform: uppercase; margin-bottom: 4px !important; color: var(--ink) !important; }
.ml-calc .sub { font-size: .88rem; color: var(--muted); margin-bottom: 18px !important; }
.ml-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; background: var(--soft); border-radius: 10px; padding: 5px; margin-bottom: 18px; }
.ml-types label { position: relative; text-align: center; padding: 10px 6px; border-radius: 7px; font: 600 .9rem var(--wp--preset--font-family--inter), sans-serif; color: var(--muted); cursor: pointer; }
.ml-types input { position: absolute; opacity: 0; pointer-events: none; }
.ml-types label:has(input:checked) { background: var(--ink); color: #fff; }
.ml-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ml-field { display: grid; gap: 6px; margin-bottom: 14px; }
.ml-field label { font-weight: 600; font-size: .84rem; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.ml-field label small { font-weight: 500; color: var(--muted); }
.ml-money { position: relative; }
.ml-money::before { content: "€"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.ml-money input { padding-left: 32px !important; }
.ml-field input, .ml-field select, .ml-field textarea { font: inherit; font-size: 1rem; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); width: 100%; background: #fff; color: var(--text); }
.ml-field input:focus, .ml-field select:focus, .ml-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ml-field input[type="file"] { padding: 10px; font-size: .88rem; }
.ml-calc .btn-signal, .ml-calc .ml-start { width: 100%; }
.ml-note { font-size: .76rem; color: var(--muted); margin: 12px 0 0 !important; line-height: 1.5; }
.ml-warn { display: none; font-size: .8rem; color: #b45309; margin: -6px 0 12px !important; }
.ml-warn.on { display: block; }

/* Dashboard: maandbedrag op een toerenteller */
.ml-dash { position: relative; background: radial-gradient(120% 90% at 50% 100%, #24282d 0%, var(--ink) 70%); border-radius: 14px; padding: 18px 18px 16px; margin: 4px 0 16px; text-align: center; overflow: hidden; }
.ml-gauge { display: block; width: 100%; max-width: 250px; margin: 0 auto; overflow: visible; }
.ml-gauge path { fill: none; stroke-width: 12; stroke-linecap: round; }
.ml-gauge .track { stroke: #2c3036; }
.ml-gauge .fill { stroke: var(--signal); stroke-dasharray: 100; transition: stroke-dashoffset .45s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px rgba(252, 67, 0, .55)); }
.ml-read { margin-top: -62px; position: relative; }
.ml-read small { display: block; font: 600 .68rem var(--wp--preset--font-family--inter), sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8d939a; }
.ml-read strong { display: block; font: 800 2.9rem/1 var(--head); color: #fff; letter-spacing: .01em; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.ml-read span { font-size: .74rem; color: #8d939a; }

/* Calculator in de donkere hero */
.ml-hero .ml-calc { box-shadow: 0 40px 80px rgba(0, 0, 0, .5); }

/* Aanvraag in stappen (leasecalculator) */
.ml-apply { max-width: 820px; margin: 0 auto; }
.ml-apply .ml-calc { box-shadow: 0 20px 50px rgba(16, 18, 20, .1); border: 1px solid var(--line); }
.ml-steps-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 26px; counter-reset: s; }
.ml-steps-nav span { font-size: .78rem; font-weight: 600; color: var(--muted); padding-top: 10px; border-top: 3px solid var(--line); counter-increment: s; }
.ml-steps-nav span::before { content: counter(s) ". "; }
.ml-steps-nav span.on { color: var(--ink); border-color: var(--signal); }
.js .ml-step { display: none; }
.js .ml-step.active { display: block; }
html:not(.js) .ml-step { margin-bottom: 32px; }
html:not(.js) .ml-nav [data-next], html:not(.js) .ml-nav [data-prev] { display: none; }
.ml-step h3 { margin-bottom: 4px !important; }
.ml-step > p { color: var(--muted); font-size: .9rem; margin-bottom: 18px !important; }
.ml-radio { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ml-radio label { border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 16px; cursor: pointer; font-weight: 500; font-size: .92rem; display: flex; gap: 8px; align-items: center; color: var(--text); }
.ml-radio label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ml-check { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--text); margin: 6px 0 12px; line-height: 1.5; font-weight: 400 !important; }
.ml-check input { width: 18px; height: 18px; accent-color: var(--signal); margin-top: 1px; flex: none; }
.ml-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.ml-nav > span:empty { display: none; }
.ml-nav > span:empty + .btn { width: 100%; }
.ml-done h3 { color: var(--ink) !important; }

/* Merkkaarten */
.ml-brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ml-brand { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ml-brand:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 18, 20, .1); }
.ml-brand h3 { font: italic 800 1.5rem/1 var(--head) !important; text-transform: uppercase; margin: 0 0 4px !important; }
.ml-brand h3 a { color: var(--ink); text-decoration: none; }
.ml-brand h3 a::after { content: ""; position: absolute; inset: 0; }
.ml-brand p { margin: 0 !important; font-size: .82rem; color: var(--muted); }
.ml-brand:hover h3 a { color: var(--signal-dark); }

/* Grote foto met tekst (split) */
.ml-photo { position: relative; border-radius: 16px; overflow: hidden; margin: 0 !important; min-height: 420px; }
.ml-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ml-photo::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46%; height: 6px; background: var(--signal); }

/* Kerncijfers */
.ml-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.ml-stats p { margin: 0 !important; padding: 26px 22px; border-right: 1px solid var(--line-dark); color: #9aa0a6; font-size: .88rem; }
.ml-stats p:last-child { border-right: 0; }
.ml-stats strong { display: block; font: italic 800 2.4rem/1 var(--head); color: #fff; text-transform: uppercase; margin-bottom: 6px; }
.ml-stats strong em { color: var(--signal); font-style: italic; }

/* Accenten */
.cta-band { background: var(--signal); }
.cta-band h2 { color: var(--ink) !important; }
.cta-band .is-style-line .wp-block-button__link { border-color: rgba(16, 18, 20, .35); }
.service.cta .more, .step .n { color: var(--signal); }
.dark .step .n { color: var(--signal); }
.c-card, .price, .type { border-radius: 12px; }
.types .type .num { color: var(--signal-dark); font-family: var(--head); font-weight: 800; font-style: italic; font-size: 1.2rem; }
.signal-box { border-radius: 16px; }
.signal-box li::before { background: var(--signal); }

@media (max-width: 1100px) { .ml-brands { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) {
	.ml-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 80px; }
	.ml-hero::before { background: linear-gradient(180deg, rgba(16, 18, 20, .8) 0%, rgba(16, 18, 20, .92) 60%); }
	/* minmax(0, 1fr): een lang woord mag de kolom (en daarmee de pagina) niet breder maken dan het scherm. */
	.ml-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.ml-stats p:nth-child(2) { border-right: 0; }
	.ml-stats p:nth-child(-n+2) { border-bottom: 1px solid var(--line-dark); }
	.ml-photo { min-height: 300px; }
}
@media (max-width: 600px) {
	.ml-hero-grid { padding-top: 44px !important; padding-bottom: 60px !important; }
	.ml-hero .ctas { display: none; }
	.ml-calc { padding: 22px 18px; }
	.ml-row { grid-template-columns: 1fr; gap: 0; }
	.ml-steps-nav span { font-size: .68rem; }
	.ml-read strong { font-size: 2.5rem; }
	.ml-brands { grid-template-columns: 1fr 1fr; }
	.logo img { height: 44px; }
}

/* Lopende tekst (merkpagina's met de oorspronkelijke tekst) */
.ml-prose-body { max-width: 780px; margin: 0 auto; font-size: 1.04rem; color: var(--text); }
.ml-prose-body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 1.6em 0 .5em !important; }
.ml-prose-body h2:first-child { margin-top: 0 !important; }
.ml-prose-body h3 { font: 800 1.3rem/1.1 var(--head) !important; text-transform: uppercase; margin: 1.4em 0 .3em !important; }
.ml-prose-body ul { padding-left: 0 !important; list-style: none; }
.ml-prose-body ul li { position: relative; padding: 8px 0 8px 32px; border-bottom: 1px solid var(--line); }
.ml-prose-body ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; background: var(--signal); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.ml-prose-body hr { border: 0; height: 4px; width: 60px; background: var(--signal); margin: 2.4em 0 !important; }
.ml-prose-body a:not(.btn) { color: var(--signal-dark); }
.ml-prose-body table { width: 100%; border-collapse: collapse; }
.ml-prose-body td, .ml-prose-body th { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }

/* Oproep in oude berichten (vervangt Elementor-sjablonen) */
.ml-inline-cta { background: var(--ink); color: #c9ccd1; border-radius: 14px; padding: 26px 28px; margin: 40px 0; border-left: 6px solid var(--signal); }
.ml-inline-cta strong { color: #fff; }
.ml-inline-cta p { margin: 0 0 14px !important; }
.ml-inline-cta p:last-child { margin: 0 !important; }

/* Blog: kaarten met foto */
.kb-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kb-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 0 20px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.kb-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 18, 20, .1); }
.kb-card > * { margin-left: 22px !important; margin-right: 22px !important; }
.kb-card .kb-img { margin: 0 0 18px !important; background: var(--ink); }
.kb-card .kb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kb-card .wp-block-post-title { font: 800 1.35rem/1.05 var(--head) !important; text-transform: uppercase; }
.post-head .lead { color: #c9ccd1; max-width: 640px; }
.post-head h1 em { color: var(--signal); }
.ml-pages { margin-top: 36px; display: flex; gap: 14px; justify-content: center; font-weight: 600; }
.ml-pages a { color: var(--ink); }
.single-wrap .cta-band { margin-top: 0; }
@media (max-width: 1000px) { .kb-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kb-grid { grid-template-columns: 1fr; } }

/* Vier kaarten: vier kolommen in plaats van 3 + 1 */
@media (min-width: 1001px) { .types:has(> .type:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
.ml-inline-cta a.btn, .post-body a.btn { text-decoration: none; color: var(--ink); }

/* Modelkaarten met maandprijs */
.ml-models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ml-model { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ml-model:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(16, 18, 20, .1); }
.ml-model .meta { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px !important; }
.ml-model h3 { font: italic 800 1.45rem/1 var(--head) !important; text-transform: uppercase; margin: 0 0 14px !important; }
.ml-model h3 a { color: var(--ink); text-decoration: none; }
.ml-model h3 a::after { content: ""; position: absolute; inset: 0; }
.ml-model:hover h3 a { color: var(--signal-dark); }
.ml-model .pm { margin: auto 0 2px !important; color: var(--muted); font-size: .8rem; }
.ml-model .pm strong { font: 800 1.7rem/1 var(--head); color: var(--ink); margin: 0 2px; }
.ml-model .adv { margin: 0 !important; font-size: .74rem; color: var(--muted); }
.dark .ml-model { background: var(--ink-2); border-color: var(--line-dark); }
.dark .ml-model h3 a, .dark .ml-model .pm strong { color: #fff; }

/* Budgettegels */
.ml-budgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ml-budget { position: relative; border-radius: 14px; padding: 26px 24px; background: var(--ink); color: #b5bac0; overflow: hidden; transition: transform .2s; }
.ml-budget:hover { transform: translateY(-3px); }
.ml-budget::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: var(--signal); transform: scaleX(.25); transform-origin: left; transition: transform .3s; }
.ml-budget:hover::after { transform: scaleX(1); }
.ml-budget .meta { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--signal); margin: 0 0 8px !important; }
.ml-budget h3 { font: italic 800 2.2rem/1 var(--head) !important; text-transform: uppercase; margin: 0 0 8px !important; }
.ml-budget h3 a { color: #fff; text-decoration: none; }
.ml-budget h3 a::after { content: ""; position: absolute; inset: 0; }
.ml-budget p { margin: 0 !important; font-size: .9rem; }
.ml-more { margin-top: 22px !important; }

@media (max-width: 1100px) { .ml-models { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .ml-models { grid-template-columns: 1fr 1fr; } .ml-budgets { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ml-model h3 { font-size: 1.2rem !important; } .ml-model .pm strong { font-size: 1.4rem; } }

/* Je eigen adviseur */
.ml-advisor { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: center; }
.ml-advisor-foto { margin: 0 !important; border-radius: 16px; overflow: hidden; position: relative; }
.ml-advisor-foto img { display: block; width: 100%; height: auto; }
.ml-advisor-foto::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50%; height: 6px; background: var(--signal); }
@media (max-width: 800px) { .ml-advisor { grid-template-columns: 1fr; gap: 28px; } .ml-advisor-foto { max-width: 220px; } }
.points li > span { grid-column: 2; }

/* Label "Elektrisch" op modelkaarten */
.ml-model .meta .ev { display: inline-block; margin-left: 4px; padding: 1px 7px 1px 18px; border-radius: 20px; background: #e7f6ee; color: #11734b; font-weight: 700; letter-spacing: .06em; position: relative; }
.ml-model .meta .ev::before { content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 11px; transform: translateY(-50%); background: currentColor; clip-path: polygon(55% 0, 0 60%, 45% 60%, 35% 100%, 100% 38%, 55% 38%); }
.ml-brands { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }

/* Elektrisch-blok op de homepage */
.ml-ev { background: radial-gradient(700px 400px at 90% 0%, rgba(46, 204, 133, .14), transparent 60%), var(--ink); }
.ml-ev h2 em { color: #2ecc85; }
.dark .ml-more, .dark .ml-more a { color: #c9ccd1; }
.dark .ml-model .adv, .dark .ml-model .meta, .dark .ml-model .pm { color: #9aa0a6; }
.dark .ml-model .meta .ev { background: rgba(46, 204, 133, .16); color: #4fe3a0; }

/* Modelfoto's */
.ml-model.has-foto { padding-top: 0; overflow: hidden; }
.ml-model-img { margin: 0 -18px 14px !important; aspect-ratio: 16 / 10; background: var(--soft); }
.ml-model-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.ml-model:hover .ml-model-img img { transform: scale(1.04); }
.ml-model-intro { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; margin-bottom: 32px; }
.ml-model-intro.has-foto { grid-template-columns: 1fr 1fr; gap: 56px; }
.ml-modelfoto { margin: 0 !important; }
.ml-modelfoto img { width: 100%; border-radius: 14px; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ml-modelfoto figcaption { font-size: .7rem; color: var(--muted); margin-top: 8px; }
.ml-modelfoto figcaption a { color: inherit; }
@media (max-width: 800px) { .ml-model-intro.has-foto { grid-template-columns: 1fr; gap: 24px; } }
.ml-geen-foto { display: grid; place-items: center; background: radial-gradient(120% 100% at 50% 100%, #24282d, var(--ink) 70%) !important; position: relative; overflow: hidden; }
.ml-geen-foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(-60deg, var(--signal) 0 14px, transparent 14px 22px); opacity: .8; }
.ml-geen-foto p { margin: 0 !important; font: italic 800 1.5rem/1 var(--head); text-transform: uppercase; color: rgba(255, 255, 255, .16); letter-spacing: .04em; text-align: center; padding: 0 10px; }
.ml-model-img { overflow: hidden; line-height: 0; height: auto; } .ml-model-img img { aspect-ratio: 16 / 10; }


/* Uitkomst van de rekenhulpen: donker paneel, net als de toerenteller */
.ml-result { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; background: radial-gradient(120% 90% at 50% 100%, #24282d 0%, var(--ink) 70%); color: #8d939a; border-radius: 14px; padding: 18px 20px; margin: 6px 0 16px; }
.ml-result small { display: block; font: 600 .68rem var(--wp--preset--font-family--inter), sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.ml-result strong { font: 800 2.3rem/1 var(--head); color: #fff; font-variant-numeric: tabular-nums; }
.ml-result .rate { text-align: right; font-size: .76rem; }
.ml-calc h4 { font: 800 1.25rem/1.1 var(--head) !important; text-transform: uppercase; }

/* Tegels (rekenhulpen, kennisbank, branches) */
.ml-tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ml-tegel { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.ml-tegel:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(11, 27, 51, .1); }
.ml-tegel .meta { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--signal-dark); font-weight: 700; margin: 0 0 8px !important; }
.ml-tegel h3 { font-size: 1.2rem !important; margin: 0 0 8px !important; }
.ml-tegel h3 a { color: var(--ink); text-decoration: none; }
.ml-tegel h3 a::after { content: ""; position: absolute; inset: 0; }
.ml-tegel p:last-child { margin: 0 !important; color: var(--muted); font-size: .93rem; }

/* Rekenhulp-pagina: tool met uitleg ernaast */
.ml-tool-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: start; }
.ml-tool-kolom .ml-calc, .ml-tool-los .ml-calc { box-shadow: 0 20px 50px rgba(11, 27, 51, .1); border: 1px solid var(--line); }
.ml-tool-los { max-width: 860px; margin: 0 auto; }
.ml-tool-uitleg h3 { font-size: 1.15rem !important; margin: 26px 0 8px !important; }
.ml-tool-uitleg h3:first-child { margin-top: 0 !important; }
.ml-tool-uitleg p, .ml-tool-uitleg li { font-size: .95rem; color: var(--muted); }
.ml-tool-uitleg ul { padding-left: 20px; }

/* Rekenhulpen: gedeelde onderdelen */
.ml-uitleg { width: 100%; border-collapse: collapse; margin: 4px 0 14px; font-size: .9rem; }
.ml-uitleg td { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.ml-uitleg td:last-child { text-align: right; color: var(--ink); font-weight: 600; white-space: nowrap; }
.ml-uitleg tr.totaal td { color: var(--ink); font-weight: 700; border-bottom: 0; }
.ml-result-dubbel > div:last-child { text-align: right; }
.ml-result-dubbel .netto { color: var(--signal); }
.ml-tool .ml-start, .ml-tool a.btn { display: flex; justify-content: center; text-decoration: none; margin-top: 4px; }
.ml-tool h4 { font-size: 1.05rem; margin: 0 0 6px !important; color: var(--ink); }

/* Mail mij dit rekenvoorbeeld */
.ml-mail { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.ml-mail summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--ink); list-style: none; }
.ml-mail summary::-webkit-details-marker { display: none; }
.ml-mail summary::after { content: " +"; color: var(--muted); }
.ml-mail[open] summary::after { content: " –"; }
.ml-mail-box { padding-top: 12px; }
.ml-mail-box .btn { width: 100%; }
.ml-lead-klaar { background: #e3f9f1; color: #0b7a55; border-radius: 10px; padding: 12px 14px; font-weight: 600; margin: 8px 0 0 !important; }

/* Kenteken */
.ml-kenteken-rij { display: flex; gap: 10px; }
.ml-plaat { flex: 1; display: flex; align-items: stretch; border: 2px solid #0b1b33; border-radius: 8px; overflow: hidden; background: #f7c600; }
.ml-plaat .nl { background: #003da5; color: #fff; font: 700 .78rem var(--wp--preset--font-family--inter), sans-serif; display: grid; place-items: center; padding: 0 8px; }
.ml-field .ml-plaat input { border: 0 !important; border-radius: 0 !important; background: transparent !important; font: 800 1.25rem/1 var(--head) !important; letter-spacing: .08em; text-transform: uppercase; color: #0b1b33 !important; padding: 10px 12px !important; box-shadow: none !important; }
.ml-kenteken-veld.groot .ml-plaat input { font-size: 1.6rem !important; padding: 14px !important; }
/* De knop mag het kentekenveld niet wegdrukken (knoppen in een calculator zijn anders 100% breed). */
.ml-calc .ml-kenteken-rij .btn { flex: none; width: auto; }
.ml-plaat { min-width: 0; }
.ml-plaat input { min-width: 140px; }
.ml-rdw-melding { font-size: .82rem; color: var(--muted); margin: 6px 0 0 !important; min-height: 1em; }
.ml-rdw-kaart dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 4px 0 16px; }
.ml-rdw-kaart dl div { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.ml-rdw-kaart dt { color: var(--muted); }
.ml-rdw-kaart dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

/* Kom ik in aanmerking? */
.ml-check-voortgang { height: 6px; background: var(--soft); border-radius: 6px; margin-bottom: 22px; overflow: hidden; }
.ml-check-voortgang span { display: block; height: 100%; width: 0; background: var(--signal); transition: width .3s; }
.ml-vraag { border: 0; padding: 0; margin: 0; display: none; }
.ml-vraag.active { display: block; }
html:not(.js) .ml-vraag { display: block; margin-bottom: 24px; }
.ml-vraag legend { font: 700 1.3rem/1.25 var(--head); color: var(--ink); margin-bottom: 16px; padding: 0; }
.ml-vraag legend small { display: block; font: 600 .75rem var(--wp--preset--font-family--inter), sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ml-keuzes { display: grid; gap: 10px; }
.ml-keuzes label { border: 1px solid var(--line); border-radius: 12px; padding: 15px 18px; cursor: pointer; font-weight: 500; display: flex; gap: 12px; align-items: center; transition: border-color .15s, background .15s; }
.ml-keuzes label:hover { border-color: var(--ink); }
.ml-keuzes label:has(input:checked) { border-color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--ink); }
.ml-keuzes input { accent-color: var(--ink); width: 18px; height: 18px; }
.ml-terug { background: none; border: 0; padding: 0; margin-top: 14px; color: var(--muted); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.ml-uitslag-label { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; margin: 0 0 10px !important; }
.ml-uitslag-label.goed { background: #e3f9f1; color: #0b7a55; }
.ml-uitslag-label.let-op { background: #fff4db; color: #8a5a00; }
.ml-uitslag-titel { font-size: 1.45rem !important; }
.ml-uitslag .ml-mail-box { background: var(--soft); border-radius: 14px; padding: 20px; margin: 18px 0 12px; }
.ml-uitslag-meer { font-size: .88rem; color: var(--muted); }

/* Busvergelijker */
.ml-bussen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 8px; }
.ml-bus { border: 1px solid var(--line); border-radius: 14px; padding: 18px; transition: border-color .2s, box-shadow .2s; }
.ml-bus.winnaar { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.ml-bus h4 { display: flex; justify-content: space-between; align-items: center; }
.ml-bus.winnaar h4::after { content: "voordeligst"; font: 700 .7rem var(--wp--preset--font-family--inter), sans-serif; background: #e3f9f1; color: #0b7a55; padding: 3px 9px; border-radius: 20px; }
.ml-bus .ml-row { grid-template-columns: 1fr 1fr; gap: 10px; }

/* Maandbudget */
.ml-budget-lijst { margin-top: 20px; }
.ml-budget-lijst ul { list-style: none; padding: 0 !important; margin: 10px 0 0 !important; }
.ml-budget-lijst li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.ml-budget-lijst li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ml-budget-lijst li a:hover { text-decoration: underline; }
.ml-budget-lijst li span { color: var(--muted); white-space: nowrap; }
.ml-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-filter label { position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: .82rem; cursor: pointer; }
.ml-filter label:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.ml-filter input { position: absolute; opacity: 0; pointer-events: none; }

/* Kennisbank-artikel */
.ml-artikel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
.ml-artikel { max-width: 720px; }
.ml-artikel h2 { font-size: 1.55rem !important; margin: 36px 0 12px !important; }
.ml-artikel h2:first-child { margin-top: 0 !important; }
.ml-artikel p, .ml-artikel li { font-size: 1.04rem; line-height: 1.7; }
.ml-artikel ul { padding-left: 22px; }
.ml-artikel li { margin-bottom: 8px; }
.ml-artikel .compare-wrap { margin: 18px 0 8px; }
.ml-artikel-aside { position: sticky; top: 110px; }
.ml-artikel-aside a:not(.wp-block-button__link) { color: #fff; }

/* Dealers */
.ml-dealer-gen textarea { font: .82rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace !important; }
.ml-dealer-voorbeeld { min-height: 60px; }
.ml-dealer-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

/* WhatsApp-knop (op de telefoon zit WhatsApp al in de balk onderin) */
.ml-whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 10px; background: #25d366; color: #fff; text-decoration: none; padding: 12px 18px 12px 14px; border-radius: 40px; font: 600 .92rem var(--wp--preset--font-family--inter), sans-serif; box-shadow: 0 12px 30px rgba(11, 27, 51, .25); transition: transform .2s; }
.ml-whatsapp:hover { transform: translateY(-2px); color: #fff; }
.ml-whatsapp svg { width: 26px; height: 26px; }
@media (max-width: 600px) { .ml-whatsapp { display: none; } }

@media (max-width: 1000px) {
	.ml-tegels { grid-template-columns: 1fr 1fr; }
	.ml-tool-grid, .ml-artikel-grid, .ml-dealer-contact { grid-template-columns: 1fr; gap: 40px; }
	.ml-artikel-aside { position: static; }
}
@media (max-width: 700px) {
	.ml-tegels, .ml-bussen, .ml-rdw-kaart dl { grid-template-columns: 1fr; }
	.ml-kenteken-rij { flex-direction: column; }
	.ml-calc .ml-kenteken-rij .btn { width: 100%; }
	.ml-steps-nav { gap: 4px; }
	.ml-steps-nav span { font-size: .62rem; }
}

/* Instagram-linkpagina (template page-links): donker, smal, alles op duimhoogte */
body.ml-linkpagina { background: var(--ink); }
.ml-links-pagina { min-height: 100vh; background: radial-gradient(120% 60% at 50% 0%, #2a2e34 0%, var(--ink) 60%); padding: 36px 16px 48px; }
.ml-links { max-width: 480px; margin: 0 auto; color: #c9ced5; }
.ml-links-kop { text-align: center; margin-bottom: 26px; }
.ml-links-kop .logo { width: 170px; height: auto; margin: 0 auto 22px; display: block; }
.ml-links-kop .guido { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--signal); display: block; margin: 0 auto 16px; }
.ml-links-kop h1 { font: 800 2rem/1.02 var(--head) !important; text-transform: uppercase; color: #fff; margin: 0 0 10px !important; }
.ml-links-kop h1 em { color: var(--signal); font-style: italic; }
.ml-links-kop p { font-size: .92rem; margin: 0 !important; }
.ml-links-lijst { display: grid; gap: 10px; }
.ml-link { display: flex; flex-direction: column; gap: 2px; padding: 15px 18px; border-radius: 12px; background: #1d2126; border: 1px solid #2f343a; color: #fff; text-decoration: none; transition: transform .15s, border-color .15s; }
.ml-link:hover { transform: translateY(-2px); border-color: var(--signal); color: #fff; }
.ml-link strong { font: 700 1.2rem/1.1 var(--head); text-transform: uppercase; letter-spacing: .02em; }
.ml-link span { font-size: .84rem; color: #9aa1a9; }
.ml-link.hoofd { background: var(--signal); border-color: var(--signal); }
.ml-link.hoofd span { color: rgba(255, 255, 255, .85); }
.ml-link.app { background: #1f3b2b; border-color: #25d366; }
.ml-links-modellen { margin-top: 30px; }
.ml-links-modellen h2 { font: 800 1.3rem/1 var(--head) !important; text-transform: uppercase; color: #fff; margin: 0 0 12px !important; }
.ml-links-modellen .raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ml-link-model { display: flex; flex-direction: column; background: #1d2126; border: 1px solid #2f343a; border-radius: 12px; overflow: hidden; text-decoration: none; color: #fff; }
.ml-link-model img, .ml-link-model .geen-foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: grid; place-items: center; background: #24282d; color: rgba(255, 255, 255, .25); font: 800 1rem var(--head); text-transform: uppercase; }
.ml-link-model strong { font-size: .86rem; padding: 10px 12px 0; line-height: 1.25; }
.ml-link-model span { font-size: .8rem; color: var(--signal); padding: 2px 12px 12px; font-weight: 600; }
.ml-links-modellen .meer { display: block; text-align: center; margin-top: 12px; color: #c9ced5; font-size: .88rem; }
.ml-links-voet { text-align: center; font-size: .74rem; color: #6f767e; margin-top: 30px; }
.ml-links-voet a { color: #9aa1a9; }

/* Telefoon: kerncijfers kleiner, zodat "bereikbaar" en "merken" binnen de kolom passen. */
@media (max-width: 600px) {
	.ml-stats p { padding: 20px 14px; }
	.ml-stats strong { font-size: 1.65rem; overflow-wrap: anywhere; }
}
/* Vangnet: de pagina schuift nooit horizontaal, ook niet als een onderdeel net te breed is. */
body { overflow-x: clip; }

/* ==========================================================================
   Blogberichten: twee kolommen, zijbalk en opmaak van de tekst
   ========================================================================== */
.post-head { padding: 48px 0 52px; }
.post-crumbs { font-size: .82rem; color: #8d97a4; margin: 0 0 22px !important; }
.post-crumbs a { color: #b9c1cb; text-decoration: none; }
.post-crumbs a:hover { color: #fff; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0 !important; font-size: .9rem; color: #b9c1cb; }
.post-meta span { display: inline-flex; align-items: center; }
.post-meta span + span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); margin-right: 14px; }

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; padding-top: 56px; padding-bottom: 96px; }
.post-layout .post-body > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.post-layout .post-body > :first-child { margin-top: 0 !important; }
.post-layout .post-body > :last-child { margin-bottom: 0 !important; }

/* Tekst */
.post-body { font-size: 1.06rem; line-height: 1.75; color: var(--text); }
.post-body > p:first-of-type { font-size: 1.24rem; line-height: 1.6; color: var(--ink); font-weight: 500; }
.post-body h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 56px 0 18px !important; padding-top: 18px !important; position: relative; scroll-margin-top: 110px; }
.post-body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 4px; background: var(--signal); }
.post-body h3 { font-size: 1.3rem; margin: 36px 0 12px !important; }
.post-body a:not(.btn) { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-body a:not(.btn):hover { color: var(--signal-dark); }

/* Lijstjes met een vinkje */
.post-body > ul { list-style: none; padding-left: 0 !important; margin-top: 20px !important; margin-bottom: 28px !important; display: grid; gap: 10px; }
.post-body > ul > li { position: relative; padding-left: 34px; }
.post-body > ul > li::before { content: ""; position: absolute; left: 0; top: .32em; width: 22px; height: 22px; border-radius: 50%; background: var(--signal); }
.post-body > ul > li::after { content: ""; position: absolute; left: 4px; top: calc(.32em + 4px); width: 14px; height: 14px; background: #fff; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }

/* Tabellen */
.post-body .wp-block-table { margin-top: 28px !important; margin-bottom: 40px !important; overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.post-body .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .96rem; margin: 0; }
.post-body .wp-block-table thead { border: 0; }
.post-body .wp-block-table thead th { background: var(--ink); color: #fff; font-weight: 600; text-align: left; padding: 13px 16px; border: 0; }
.post-body .wp-block-table td { padding: 12px 16px; border: 0; border-top: 1px solid var(--line); }
.post-body .wp-block-table tbody tr:nth-child(even) td { background: var(--soft); }
.post-body .wp-block-table td:last-child, .post-body .wp-block-table th:last-child { text-align: right; white-space: nowrap; }
.post-body .wp-block-table td:last-child strong { color: var(--signal-dark); font-size: 1.05rem; }

/* Foto's */
.post-body .wp-block-image { margin-top: 32px !important; margin-bottom: 40px !important; }
.post-body .wp-block-image img { border-radius: 12px; width: 100%; height: auto; }
.post-body .wp-block-image figcaption { font-size: .78rem; color: var(--muted); margin-top: 8px; }

/* Zijbalk */
.post-aside { position: sticky; top: 110px; display: grid; gap: 20px; }
.post-aside-kop { font: 700 1.15rem/1.2 var(--head); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin: 0 0 12px !important; }
.post-toc { border-left: 3px solid var(--signal); padding: 4px 0 4px 20px; }
.post-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: grid; gap: 9px; }
.post-toc li { counter-increment: toc; font-size: .92rem; line-height: 1.4; display: flex; gap: 10px; }
.post-toc li::before { content: counter(toc, decimal-leading-zero); color: var(--signal-dark); font-weight: 600; font-size: .8rem; padding-top: 2px; }
.post-toc a { color: var(--text); text-decoration: none; }
.post-toc a:hover { color: var(--signal-dark); }
.post-card { border-radius: 12px; padding: 24px; font-size: .94rem; line-height: 1.55; }
.post-card p { margin: 0 0 16px !important; }
.post-card-calc { background: var(--ink); color: #c4cbd4; }
.post-card-calc .post-aside-kop { color: #fff; }
.post-card-calc .btn { display: block; text-align: center; width: 100%; text-decoration: none; }
.post-card-tel { margin: 14px 0 0 !important; font-size: .86rem; }
.post-card-tel a { color: #fff; }
.post-card-link { font-weight: 600; color: var(--ink); text-decoration: none; }
.post-card-link::after { content: " →"; color: var(--signal); }

/* Over Guido */
.post-auteur { display: flex; gap: 20px; align-items: flex-start; margin-top: 64px; padding: 26px; background: var(--soft); border-radius: 12px; font-size: .95rem; line-height: 1.6; }
.post-auteur img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.post-auteur p { margin: 0 !important; }
.post-auteur-naam { font-weight: 700; color: var(--ink); margin-bottom: 4px !important; }

/* Lees ook */
.post-lees { margin-top: 56px; }
.post-lees-kop { font: 700 1.6rem/1.1 var(--head); text-transform: uppercase; color: var(--ink); margin: 0 0 20px !important; }
.post-lees-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post-lees-kaart { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-decoration: none; color: var(--text); background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.post-lees-kaart:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 18, 20, .1); border-color: var(--ink); }
.post-lees-beeld { aspect-ratio: 16 / 10; background: var(--ink) center / cover no-repeat; }
.post-lees-tekst { display: grid; gap: 6px; padding: 16px; }
.post-lees-tekst small { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--signal-dark); font-weight: 600; }
.post-lees-tekst strong { color: var(--ink); line-height: 1.35; font-size: .98rem; }
.post-lees-tekst em { font-style: normal; font-size: .8rem; color: var(--muted); }

@media (max-width: 1000px) {
	.post-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 40px; padding-bottom: 72px; }
	.post-aside { position: static; }
	.post-lees-raster { grid-template-columns: minmax(0, 1fr); }
	.post-lees-kaart { flex-direction: row; }
	.post-lees-beeld { aspect-ratio: auto; width: 120px; flex: none; }
}
@media (max-width: 600px) {
	.post-body { font-size: 1rem; }
	.post-body > p:first-of-type { font-size: 1.12rem; }
	.post-auteur { flex-direction: column; }
}

/* Nettobedrag op modelkaarten */
.ml-model .netto { margin: 2px 0 4px !important; font-size: .78rem; color: var(--muted); }
.ml-model .netto strong { color: var(--signal-dark); font-weight: 700; font-size: .95rem; }
.ml-netto-noot { font-size: .78rem; color: var(--muted); margin: 14px 0 0 !important; max-width: 820px; }
.ml-netto-noot a { color: inherit; }
.dark .ml-netto-noot, .sec.dark .ml-netto-noot { color: #8d97a4; }

/* Keuzehulp: welke motor past bij mij? */
.ml-keuze { max-width: 880px; margin: 0 auto; position: relative; overflow: hidden; }
.ml-keuze-voortgang { height: 4px; background: var(--line); border-radius: 4px; margin-bottom: 26px; }
.ml-keuze-voortgang span { display: block; height: 100%; width: 0; background: var(--signal); border-radius: 4px; transition: width .3s; }
.ml-keuze-vraag { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.ml-keuze-vraag.actief { display: block; animation: ml-keuze-in .25s ease-out; }
@keyframes ml-keuze-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.ml-keuze-vraag legend { font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--head); text-transform: uppercase; color: var(--ink); padding: 0; margin-bottom: 6px; }
.ml-keuze-vraag legend small { display: block; font: 600 .72rem/1 var(--wp--preset--font-family--inter), sans-serif; letter-spacing: .14em; color: var(--signal-dark); margin-bottom: 10px; }
.ml-keuze-opties { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.ml-keuze-opties label { cursor: pointer; display: block; }
.ml-keuze-opties input { position: absolute; opacity: 0; pointer-events: none; }
.ml-keuze-opties span { display: grid; gap: 4px; height: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; transition: border-color .15s, box-shadow .15s, transform .15s; background: #fff; }
.ml-keuze-opties span strong { color: var(--ink); font-size: 1.02rem; }
.ml-keuze-opties span small { color: var(--muted); font-size: .86rem; }
.ml-keuze-opties label:hover span { border-color: var(--ink); transform: translateY(-2px); }
.ml-keuze-opties input:checked + span { border-color: var(--signal); box-shadow: inset 0 0 0 2px var(--signal); }
.ml-keuze-opties input:focus-visible + span { outline: 3px solid var(--signal); outline-offset: 2px; }
.ml-keuze-terug { background: none; border: 0; padding: 0; margin-top: 20px; color: var(--muted); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.ml-keuze-kop { font: 800 clamp(1.5rem, 3vw, 2rem)/1.1 var(--head); text-transform: uppercase; color: var(--ink); margin: 0 0 6px !important; }
.ml-keuze-kaarten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 20px 0 14px; }
.ml-keuze-kaart { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; background: #fff; }
.ml-keuze-beeld { display: block; aspect-ratio: 4 / 3; background: var(--ink); }
.ml-keuze-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ml-keuze-beeld .ml-geen-foto { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .25); font: italic 800 1.4rem var(--head); text-transform: uppercase; }
.ml-keuze-info { padding: 16px; display: grid; gap: 4px; }
.ml-keuze-info small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ml-keuze-naam { font: italic 800 1.45rem/1 var(--head); text-transform: uppercase; color: var(--ink); text-decoration: none; margin: 2px 0 8px; }
.ml-keuze-naam:hover { color: var(--signal-dark); }
.ml-keuze-prijs { margin: 0 !important; color: var(--muted); font-size: .8rem; }
.ml-keuze-prijs strong { font: 800 1.7rem/1 var(--head); color: var(--ink); }
.ml-keuze-netto { margin: 0 !important; font-size: .8rem; color: var(--muted); }
.ml-keuze-netto strong { color: var(--signal-dark); }
.ml-keuze-links { display: flex; gap: 16px; margin: 10px 0 0 !important; font-size: .88rem; font-weight: 600; }
.ml-keuze-links a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; }
.ml-keuze-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.ml-keuze-acties .ml-keuze-terug { margin-top: 0; }
@media (max-width: 760px) { .ml-keuze-kaarten { grid-template-columns: minmax(0, 1fr); } .ml-keuze-kaart { flex-direction: row; } .ml-keuze-beeld { width: 120px; flex: none; aspect-ratio: auto; } }

/* Oproep naar de keuzehulp (homepage) */
.ml-keuze-banner { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 22px 26px; border-radius: 12px; background: var(--ink); color: #c4cbd4; }
.ml-keuze-banner p { margin: 0 !important; }
.ml-keuze-banner strong { color: #fff; font: 800 1.35rem/1.1 var(--head); text-transform: uppercase; display: block; margin-bottom: 4px; }

/* ==========================================================================
   Mega-menu: brede panelen met iconen, uitleg en een uitgelicht blok
   ========================================================================== */
:root {
	--i-euro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5A7 7 0 1 0 17.5 17.5M4 10h9M4 14h9'/%3E%3C/svg%3E");
	--i-boek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 21V5M9 7h6'/%3E%3C/svg%3E");
	--i-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8M8.5 12h.01M12 12h.01M15.5 12h.01M8.5 16h.01M12 16h.01M15.5 16h.01'/%3E%3C/svg%3E");
	--i-kompas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E");
	--i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
}

/* Iconen bij de menu-items (desktop en mobiel) */
.nav .mega li.mi > a { position: relative; }
.nav .mega li.mi > a::before { content: ""; position: absolute; left: 0; top: 50%; width: 38px; height: 38px; margin-top: -19px; border-radius: 10px; background: #fff1ea; }
.nav .mega li.mi > a::after { content: ""; position: absolute; left: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--signal-dark); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.nav .mega li.mi-file { --ic: var(--i-file); }
.nav .mega li.mi-tool { --ic: var(--i-tool); }
.nav .mega li.mi-check { --ic: var(--i-check); }
.nav .mega li.mi-shield { --ic: var(--i-shield); }
.nav .mega li.mi-euro { --ic: var(--i-euro); }
.nav .mega li.mi-helmet { --ic: var(--i-helmet); }
.nav .mega li.mi-chat { --ic: var(--i-chat); }
.nav .mega li.mi-boek { --ic: var(--i-boek); }
.nav .mega li.mi-user { --ic: var(--i-user); }
.nav .mega li.mi-calc { --ic: var(--i-calc); }
.nav .mega li.mi-kompas { --ic: var(--i-kompas); }
.nav .mega li.mi-eye { --ic: var(--i-eye); }
.nav .mega li.mi-clock { --ic: var(--i-clock); }
.nav .mega li.mi-bolt { --ic: var(--i-bolt); }
.nav .mega li.mi-rack { --ic: var(--i-rack); }
.nav .mega li.mi-phone { --ic: var(--i-phone); }
.nav .mega .wp-block-navigation-item__description { display: block; font-size: .8rem; font-weight: 400; color: var(--muted); line-height: 1.35; margin-top: 2px; white-space: normal; }

@media (min-width: 1081px) {
	/* Panelen worden gecentreerd onder de menubalk */
	.nav .wrap { position: relative; }
	.nav .mega,
	.nav .mega .wp-block-navigation__responsive-container:not(.is-menu-open),
	.nav .mega .wp-block-navigation__responsive-close,
	.nav .mega .wp-block-navigation__responsive-dialog,
	.nav .mega .wp-block-navigation__responsive-container-content,
	.nav .mega .wp-block-navigation__container,
	.nav .mega li.mega-paneel { position: static !important; }
	.nav .mega .wp-block-navigation__container { gap: 30px; }

	/* Hoofditems: hoge klikvlakken en een oranje streep bij hover */
	.nav .mega .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { position: relative; padding: 27px 0 !important; font-weight: 600; color: var(--ink); }
	.nav .mega .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { text-decoration: none; }
	.nav .mega .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: 17px; height: 2px; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
	.nav .mega .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
	.nav .mega .wp-block-navigation__container > .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content::after,
	.nav .mega .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
	.nav .mega .wp-block-navigation__submenu-icon svg { transition: transform .2s ease; }
	.nav .mega li.mega-paneel:hover > .wp-block-navigation__submenu-icon svg,
	.nav .mega li.mega-paneel:focus-within > .wp-block-navigation__submenu-icon svg { transform: rotate(180deg); }

	/* Het paneel */
	.nav .mega li.mega-paneel > .wp-block-navigation__submenu-container { left: 50% !important; top: 100% !important; transform: translate(-50%, 10px); display: grid !important; gap: 4px 10px; padding: 22px !important; background: #fff; border: 0 !important; border-top: 3px solid var(--signal) !important; border-radius: 0 0 14px 14px; box-shadow: 0 30px 60px rgba(16, 18, 20, .16); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
	.nav .mega li.mega-paneel:hover > .wp-block-navigation__submenu-container,
	.nav .mega li.mega-paneel:focus-within > .wp-block-navigation__submenu-container { transform: translate(-50%, 0); }
	.nav .mega li.mega-leasen > .wp-block-navigation__submenu-container { grid-template-columns: repeat(2, 270px) 250px; }
	.nav .mega li.mega-rekenen > .wp-block-navigation__submenu-container { grid-template-columns: repeat(3, 270px); }
	.nav .mega li.mega-over > .wp-block-navigation__submenu-container { grid-template-columns: repeat(2, 270px); }
	.nav .mega li.mega-motoren > .wp-block-navigation__submenu-container { grid-template-columns: 470px 200px 250px; gap: 0 28px; }

	/* Items met icoon */
	.nav .mega li.mega-paneel li.mi > .wp-block-navigation-item__content { display: block; padding: 10px 12px 10px 62px !important; border-radius: 10px; white-space: normal; }
	.nav .mega li.mega-paneel li.mi > .wp-block-navigation-item__content::before { left: 12px; }
	.nav .mega li.mega-paneel li.mi > .wp-block-navigation-item__content::after { left: 22px; }
	.nav .mega li.mega-paneel li.mi > .wp-block-navigation-item__content:hover { background: var(--soft); text-decoration: none; }
	.nav .mega li.mega-paneel li.mi .wp-block-navigation-item__label { font-weight: 600; color: var(--ink); }

	/* Uitgelicht blok (rechts in het paneel) */
	.nav .mega li.mega-uitgelicht { grid-column: -2; grid-row: 1 / span 5; align-self: stretch; }
	.nav .mega li.mega-uitgelicht > .wp-block-navigation-item__content { height: 100%; display: flex !important; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px !important; border-radius: 12px; background: radial-gradient(120% 90% at 100% 0%, rgba(252, 67, 0, .45), rgba(252, 67, 0, 0) 55%), linear-gradient(160deg, #22262b, var(--ink)); color: #fff; white-space: normal; }
	.nav .mega li.mega-uitgelicht .wp-block-navigation-item__label { font: 800 1.45rem/1.05 var(--head); text-transform: uppercase; color: #fff; }
	.nav .mega li.mega-uitgelicht .wp-block-navigation-item__description { color: #c4cbd4; font-size: .86rem; }
	.nav .mega li.mega-uitgelicht > .wp-block-navigation-item__content::after { content: "Probeer het \2192"; color: var(--signal); font-weight: 600; font-size: .9rem; margin-top: 6px; }
	.nav .mega li.mega-uitgelicht > .wp-block-navigation-item__content:hover { text-decoration: none; }
	.nav .mega li.mega-uitgelicht > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--signal); }

	/* Kolommen in het paneel Motoren */
	.nav .mega li.mega-kolom > .wp-block-navigation__submenu-container { position: static !important; visibility: inherit !important; opacity: 1 !important; width: auto !important; height: auto !important; min-width: 0 !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none; display: grid !important; gap: 0 12px; transform: none; }
	.nav .mega li.mega-merken > .wp-block-navigation__submenu-container { grid-template-columns: repeat(3, 1fr); }
	.nav .mega li.mega-kolom { display: block !important; }
	.nav .mega li.mega-kolom > .wp-block-navigation-submenu__toggle { display: none; }
	.nav .mega li.mega-kolom > .wp-block-navigation-item__content { display: block; padding: 0 0 10px !important; margin-bottom: 8px; border-bottom: 1px solid var(--line); font: 600 .72rem/1.2 var(--wp--preset--font-family--inter), sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
	.nav .mega li.mega-kolom li > .wp-block-navigation-item__content { display: block; padding: 6px 0 !important; font-size: .9rem; color: var(--text); }
	.nav .mega li.mega-kolom li > .wp-block-navigation-item__content:hover { color: var(--signal-dark); text-decoration: none; }
	.nav .mega li.mega-alle > .wp-block-navigation-item__content { font-weight: 600; color: var(--ink) !important; }
	.nav .mega li.mega-alle > .wp-block-navigation-item__content::after { content: " \2192"; color: var(--signal); }
	.nav .mega li.mega-motoren li.mega-uitgelicht { grid-row: 1; }
}

/* Mobiel menu: merken in twee kolommen, kopjes en een uitgelicht blok */
.nav .is-menu-open li.mi > a::before { width: 30px; height: 30px; margin-top: -15px; border-radius: 8px; }
.nav .is-menu-open li.mi > a::after { left: 7px; width: 16px; height: 16px; margin-top: -8px; }
.nav .is-menu-open li.mi > .wp-block-navigation-item__content { padding-left: 42px !important; }
.nav .is-menu-open .wp-block-navigation-item__description { display: none; }
.nav .is-menu-open li.mega-kolom > .wp-block-navigation-item__content { font: 600 .72rem/1.2 var(--wp--preset--font-family--inter), sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) !important; padding: 14px 0 4px !important; }
.nav .is-menu-open li.mega-merken > .wp-block-navigation__submenu-container { display: grid !important; grid-template-columns: 1fr 1fr; padding-left: 0 !important; }
.nav .is-menu-open li.mega-soorten > .wp-block-navigation__submenu-container { padding-left: 0 !important; }
.nav .is-menu-open li.mega-uitgelicht > .wp-block-navigation-item__content { margin: 10px 0 6px; padding: 14px 16px !important; border-radius: 10px; background: var(--ink); color: #fff !important; font: 600 1rem/1.3 var(--wp--preset--font-family--inter), sans-serif !important; }
.nav .is-menu-open li.mega-uitgelicht > .wp-block-navigation-item__content::after { content: " \2192"; color: var(--signal); }

/* Mobiel menu: panelen uitklappen met een pijltje */
.nav .is-menu-open li.mega-paneel { position: relative; }
.nav .is-menu-open li.mega-paneel > .wp-block-navigation__submenu-container { display: none !important; }
.nav .is-menu-open li.mega-paneel.ml-open > .wp-block-navigation__submenu-container { display: flex !important; flex-direction: column; }
.nav .is-menu-open li.mega-paneel > .wp-block-navigation-submenu__toggle { display: flex !important; align-items: center; justify-content: center; position: absolute; right: 0; top: 8px; width: 44px; height: 44px; padding: 0; border-radius: 10px; background: var(--soft); }
.nav .is-menu-open li.mega-paneel > .wp-block-navigation-submenu__toggle svg { width: 14px; height: 14px; transition: transform .2s ease; transform: none !important; }
.nav .is-menu-open li.mega-paneel.ml-open > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg) !important; }
.nav .is-menu-open li.mega-paneel > .wp-block-navigation-item__content { padding-right: 56px !important; }

/* Kennisbank: tabellen met modellen en foto's (extra artikelen) */
.ml-artikel h3 { font-size: 1.2rem !important; margin: 26px 0 10px !important; }
.ml-artikel a:not(.btn):not(.wp-block-button__link) { color: var(--ink); text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ml-artikel .ml-kb-tabel { margin: 20px 0 28px !important; overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.ml-artikel .ml-kb-tabel table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 0; }
.ml-artikel .ml-kb-tabel thead { border: 0; }
.ml-artikel .ml-kb-tabel th { background: var(--ink); color: #fff; font-weight: 600; text-align: left; padding: 12px 14px; border: 0; white-space: nowrap; }
.ml-artikel .ml-kb-tabel td { padding: 11px 14px; border: 0; border-top: 1px solid var(--line); }
.ml-artikel .ml-kb-tabel tbody tr:nth-child(even) td { background: var(--soft); }
.ml-artikel .ml-kb-tabel td:nth-child(n+2), .ml-artikel .ml-kb-tabel th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.ml-artikel .ml-kb-tabel td:nth-child(3) strong { color: var(--ink); font-size: 1.02rem; }
.ml-artikel .ml-kb-tabel td:nth-child(4) { color: var(--signal-dark); font-weight: 600; }
.ml-artikel .ml-kb-foto { margin: 24px 0 32px !important; }
.ml-artikel .ml-kb-foto img { border-radius: 12px; width: 100%; height: auto; }
.ml-artikel .ml-kb-foto figcaption { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.ml-artikel .ml-netto-noot { font-size: .8rem !important; }