/* ==========================================================================
   Overstapmaatje components, ported for the energy sister site.
   Same class names and structure as overstapmaatje.nl (main.css + compare-v3.css), so the calculators' markup
   renders like a sibling. Differences on purpose: teal where Overstapmaatje uses frog green, amber where it
   uses sun yellow (the energy variant of the family), slightly calmer shadows. Loaded after main.css.
   Class reference with markup: docs/ui-klassen.md.
   ========================================================================== */

:root {
	/* Overstapmaatje token names, mapped onto the energy palette */
	--ink: var(--ep-ink);
	--ink-2: #354c40;
	--ink-3: #56615c;
	--paper: var(--ep-bg);
	--paper-2: var(--ep-surface-2);
	--card: #ffffff;
	--line-c: var(--ep-border);
	--line-ctl: #8a978f;
	--frog: #15a39a;          /* family teal (was frog green) */
	--frog-2: #12968d;        /* borders and underlines, 3.4:1 on white */
	--frog-text: #0a6660;     /* text in teal, 6.8:1 on white */
	--frog-wash: #dff2ef;
	--frog-line: #b3dfd9;
	--sun: #ffd23f;           /* same yellow as overstapmaatje.nl: the one primary action */
	--sun-2: #f5bf0a;
	--sun-wash: #fdf0d6;
	--sun-line: #f1d08f;
	--coral: #ff6a55;
	--coral-text: #a8321f;
	--coral-wash: #ffe8e3;
	--pond: #d3ebe7;

	--f-display: var(--ep-font-display);
	--f-body: var(--ep-font);
	--t-hero: clamp(2.3rem, 1.5rem + 3.4vw, 4rem);
	--t-h1: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
	--t-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.15rem);
	--t-h3: 1.25rem;
	--t-lg: 1.125rem;
	--t-base: 1rem;
	--t-sm: .9375rem;
	--t-xs: .875rem;

	--gutter: var(--ep-gutter);
	--wrap: 1200px;
	--r-card: 16px;
	--r-ctl: 12px;
	--line: 2px solid var(--ink);
	--hair: 1px solid var(--line-c);
	--sticker: 3px 3px 0 var(--ink);
	--sticker-lg: 5px 5px 0 var(--ink);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--header-h: var(--ep-header-h);
}

/* ---------- helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--stack, 1rem); }
.eyebrow { font: 700 var(--t-xs)/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.small { font-size: var(--t-xs); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }

/* ---------- buttons ---------- */
.btn {
	--bg: var(--card);
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 46px; padding: .65em 1.15em;
	font: 700 1rem/1 var(--f-body); color: var(--ink); text-decoration: none; white-space: nowrap;
	background: var(--bg); border: 1.5px solid var(--line-c); border-radius: var(--r-ctl); cursor: pointer;
	transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s, border-color .15s;
}
.btn:hover { color: var(--ink); background: var(--paper-2); border-color: var(--ink-3); }
/* The one loud element: ink outline + hard sticker shadow. */
.btn--primary { --bg: var(--sun); border: var(--line); box-shadow: var(--sticker); }
.btn--primary:hover { background: var(--sun); border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ink { --bg: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { color: var(--paper); background: #1f3d2f; border-color: #1f3d2f; }
.btn--ghost { --bg: transparent; }
.btn--sm { min-height: 40px; padding: .5em .9em; font-size: var(--t-sm); }
.btn--block { width: 100%; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--frog-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
/* the theme's own primary button follows the same family style */
.ep-btn, .ep-content a.ep-btn { color: var(--ink); background: var(--sun); }
.ep-btn:hover, .ep-content a.ep-btn:hover { color: var(--ink); background: var(--sun); }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: .35em; padding: .25em .6em; font: 600 var(--t-xs)/1.3 var(--f-body); background: var(--paper-2); color: var(--ink-2); border-radius: 999px; white-space: nowrap; }
.tag--frog { background: var(--frog-wash); color: var(--frog-text); }
.tag--ink { background: var(--ink); color: var(--paper); }
.tag--sun { background: var(--sun-wash); color: #5c4200; }
.tag--sm { padding: .1em .5em; }

/* ---------- form controls (select arrow as on Overstapmaatje) ---------- */
select { appearance: none; padding-right: 2.2em !important; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313291f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6em center / 1em; }
select:hover { border-color: var(--ink-3); }
input::placeholder { color: var(--ink-3); }

/* ---------- chips: label.chip > input + text; checked via :has() ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { position: relative; display: inline-flex; flex: none; align-items: center; gap: .35em; min-height: 40px; padding: .45em .9em; font: 600 var(--t-sm)/1.1 var(--f-body); color: var(--ink); background: var(--card); border: 1.5px solid var(--line-c); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip small, .chip .count { color: var(--ink-3); font-weight: 500; font-size: var(--t-xs); }
.chip:hover { border-color: var(--ink-2); }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:has(input:checked) :is(small, .count) { color: #c3d3c8; }
.chip:has(input:focus-visible) { outline: 3px solid var(--sun-2); outline-offset: 2px; }
.chip:has(input:disabled) { color: #5f6963; border-style: dashed; cursor: default; }
.chips--big .chip { min-height: 48px; padding: .55em 1.15em; font-size: 1rem; }
@media (max-width: 720px) {
	.chips--scroll { scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
}

/* ---------- page head ---------- */
.page-head { padding-block: clamp(24px, 4vw, 44px) clamp(16px, 2.5vw, 24px); }
.page-head h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.02em; font-stretch: 86%; }
.page-head .lead, .page-head .ep-lead { font-size: var(--t-lg); color: var(--ink-2); max-width: 44em; margin-top: .75rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: .4em; margin: 0 0 .75rem; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: .4em; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-2); }
.facts b { color: var(--ink); }
.meta-line { font-size: var(--t-sm); color: var(--ink-3); margin-top: .5rem; }

/* ---------- home hero ---------- */
.hero { position: relative; padding-block: clamp(24px, 4vw, 52px) clamp(32px, 5vw, 64px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.hero h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.02em; font-stretch: 84%; }
.hero-lead { font-size: var(--t-lg); color: var(--ink-2); max-width: 32em; margin-top: 1rem; }
.hero-q { margin-top: 1.5rem; font-weight: 700; }
.hero-q + .chips { margin-top: .6rem; }
.hero-alt { margin-top: 1.1rem; font-size: var(--t-sm); color: var(--ink-2); }
.hero-board { position: relative; }
.board { position: relative; z-index: 2; background: var(--card); border: 1.5px solid var(--line-c); border-radius: 20px; padding: 18px 18px 14px; box-shadow: 0 1px 2px rgb(19 41 31 / .05), 0 12px 32px rgb(19 41 31 / .07); }
.board-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.board-head h2 { font-size: 1.25rem; font-stretch: 92%; }
.board-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.board-list a { display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; transition: background .15s; }
.board-list a:hover { background: var(--frog-wash); }
.board-list .rank { font: 800 .95rem/1 var(--f-display); color: var(--ink-3); text-align: center; }
.board-list .what { min-width: 0; }
.board-list .what b { display: block; font-weight: 700; line-height: 1.2; }
.board-list .what small { color: var(--ink-3); font-size: var(--t-xs); }
.board-list .p { text-align: right; }
.board-list .p b { font: 800 1.2rem/1 var(--f-display); display: block; }
.board-list .p small { font-size: var(--t-xs); color: var(--ink-3); }
.board-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- trust strip ---------- */
.trust { border-block: var(--hair); background: var(--card); }
.trust .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; padding-block: 12px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
.trust span { display: inline-flex; align-items: center; gap: .45em; }
.trust .icon { color: var(--frog-text); }

/* ---------- sections ---------- */
.section { padding-block: clamp(40px, 6vw, 80px); }
.section--tint { background: var(--paper-2); }
.section--pond { background: var(--pond); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.section-head h2 { font-size: var(--t-h2); }
.section-head p { color: var(--ink-2); max-width: 40em; margin-top: .5rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- provider badge ---------- */
.pbadge { display: inline-flex; align-items: center; gap: .65em; min-width: 0; }
.pbadge-dot { --c: var(--ink); width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--c); color: #fff; font: 800 1rem/1 var(--f-display); }
.pbadge-dot.has-logo { border: 1px solid var(--line-c); padding: 5px; overflow: hidden; background: #fff; }
.pbadge-dot.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pbadge-name { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pbadge-net { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.pbadge--lg .pbadge-dot { width: 64px; height: 64px; border-radius: 16px; }

/* ---------- compare app ---------- */
.cmp-top { display: grid; gap: 10px; margin-bottom: 18px; }
.cmp-top .chips-label { font-weight: 700; font-size: var(--t-sm); }
.compare { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
.filters { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 24px); overflow: auto; padding: 2px 6px 24px 2px; scrollbar-width: thin; }
.filters-inner { display: grid; gap: 22px; }
.filters-title { display: none; }
.fgroup { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fgroup-title { font: 700 var(--t-sm)/1.2 var(--f-body); padding: 0; color: var(--ink); }
.fgroup-help { font-size: var(--t-xs); color: var(--ink-3); }
.fchecks { display: grid; gap: 1px; }
.fcheck { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; font-weight: 500; font-size: var(--t-sm); cursor: pointer; min-height: 38px; }
.fcheck:hover { background: var(--paper-2); }
.fcheck input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; margin: 0; }
.fcheck .count { margin-left: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }
.have { padding: 14px; border-radius: 14px; background: var(--frog-wash); border: 1.5px solid var(--frog-line); }
.have .fgroup-title { display: flex; align-items: center; gap: .4em; }
.have select { min-height: 40px; font-size: var(--t-sm); margin-top: 2px; }
.have-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: end; margin-bottom: 14px; padding: 12px 14px; background: var(--frog-wash); border: 1.5px solid var(--frog-line); border-radius: 14px; }
.have-row-title { align-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: .1em .4em; font-weight: 700; font-size: var(--t-sm); line-height: 1.25; }
.have-row-title span { flex-basis: 100%; font-weight: 500; font-size: var(--t-xs); color: var(--ink-2); }
.have-row-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.have-row-field { display: grid; gap: 2px; min-width: 0; }
.have-row-field > span { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.have-row-field :is(select, input) { min-height: 40px; font-size: var(--t-sm); width: 100%; }
.have-result { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .45em; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.have-result.is-good { color: var(--frog-text); font-weight: 700; }
@media (max-width: 700px) { .have-row { grid-template-columns: 1fr; padding: 10px 12px; } .have-row-title span { display: none; } }
.filters-actions, .filter-bar { display: none; }
.results-col { min-width: 0; }
.results-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.results-count { font-weight: 700; font-size: var(--t-sm); }
.results-count .num { font: 800 1.35rem/1 var(--f-display); margin-right: .2em; }
.sortbox { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); }
.sortbox select { min-height: 40px; width: auto; font-size: var(--t-sm); font-weight: 600; }
.sort-label { font-weight: 600; color: var(--ink-2); }
.sort-note { font-size: var(--t-xs); color: var(--ink-3); }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.active-filters:empty { display: none; }
.afilter { display: inline-flex; align-items: center; gap: .35em; min-height: 32px; padding: .3em .5em .3em .75em; font: 600 var(--t-xs)/1 var(--f-body); background: var(--sun-wash); border: 1.5px solid var(--ink); border-radius: 999px; cursor: pointer; }
.results { display: grid; gap: 12px; transition: opacity .2s; }
.results.is-loading { opacity: .45; pointer-events: none; }
.list-note { font-size: var(--t-xs); color: var(--ink-3); margin-top: 12px; }
.load-more { display: flex; justify-content: center; margin-top: 20px; }
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 32px 20px; background: var(--card); border: 1.5px dashed var(--line-c); border-radius: var(--r-card); }
.m-tip { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 12px 16px; background: var(--sun-wash); border: 1.5px solid var(--sun-line); border-radius: var(--r-card); font-size: var(--t-sm); }
@media (max-width: 960px) {
	.compare { grid-template-columns: 1fr; }
	/* Filters as a bottom sheet when the page provides the toggle (.filter-bar); else simply above the list. */
	.compare:has(.filter-bar) .filters { position: fixed; z-index: 90; inset: auto 0 0 0; top: auto; max-height: 88vh; padding: 0; background: var(--paper); border-top: var(--line); border-radius: 20px 20px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .35s var(--ease-out), visibility 0s .35s; box-shadow: 0 -10px 40px rgb(0 0 0 / .18); }
	.compare:has(.filter-bar) .filters.is-open { transform: none; visibility: visible; transition: transform .35s var(--ease-out); }
	.compare:not(:has(.filter-bar)) .filters { position: static; max-height: none; overflow: visible; padding: 0; }
	.compare:not(:has(.filter-bar)) .filters-inner { gap: 14px; }
	.filters-title { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); border-bottom: var(--hair); font: 750 1.2rem/1 var(--f-display); }
	.compare:not(:has(.filter-bar)) .filters-title { display: none; }
	.filters-actions { display: flex; gap: 10px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); border-top: var(--hair); background: var(--paper); }
	.filters-actions .btn { flex: 1; }
	.filter-bar { position: sticky; top: var(--header-h); z-index: 40; display: flex; gap: 8px; align-items: center; margin: 0 calc(-1 * var(--gutter)) 12px; padding: 8px var(--gutter); background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: var(--hair); }
	.compare:has(.filter-bar) .results-bar .sortbox { display: none; }
}

/* ---------- deal card ---------- */
.deal { position: relative; background: var(--card); border: 1.5px solid var(--line-c); border-radius: var(--r-card); transition: border-color .15s, box-shadow .2s, opacity .2s; }
.deal:hover { border-color: var(--ink-3); }
.deal.is-best { margin-top: 10px; border: 2px solid var(--frog-2); }
.deal-flag { position: absolute; top: -11px; left: 16px; z-index: 1; margin: 0; padding: 1px 10px; background: var(--frog-wash); border: 2px solid var(--frog-2); border-radius: 999px; font: 700 var(--t-xs)/1.3 var(--f-body); color: var(--frog-text); }
.deal-main { display: grid; grid-template-columns: minmax(0, 1fr) 212px 172px; grid-template-areas: "id price cta" "cfg ptl cta"; gap: 10px 16px; align-items: start; padding: 14px 18px; }
.deal-main:not(:has(> .ptl)) { grid-template-areas: "id price cta" "cfg price cta"; }
.deal-id { grid-area: id; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.deal-id .pbadge { flex: none; }
.deal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-size: var(--t-xs); color: var(--ink-2); }
.deal-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.deal-bundle { flex-basis: 100%; margin: 2px 0 0; font: 780 1.05rem/1.25 var(--f-display); font-stretch: 92%; color: var(--ink); }
.deal-bundle .seg { white-space: nowrap; }
.deal-config { grid-area: cfg; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px 8px; align-items: start; max-width: 480px; }
.cfg { display: grid; gap: 3px; min-width: 0; }
.cfg-label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.cfg-static { display: flex; align-items: center; min-height: 32px; font-weight: 700; font-size: var(--t-sm); }
.deal-price { grid-area: price; text-align: right; display: grid; gap: 2px; justify-items: end; align-self: start; }
.price-main { font: 800 1.75rem/1 var(--f-display); letter-spacing: -.01em; white-space: nowrap; color: var(--ink); }
.price-main small { font: 600 var(--t-xs)/1 var(--f-body); color: var(--ink-3); margin-left: .15em; letter-spacing: 0; }
.price-sub { margin: 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.35; }
.price-sub span, .price-sub b { display: block; }
.price-sub b { font-weight: 700; color: var(--ink); }
.price-was { margin: 0; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.price-disc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: end; }
.price-disc li { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .3em; font: 700 var(--t-xs)/1.3 var(--f-body); color: var(--frog-text); text-align: right; }
.deal-cta { grid-area: cta; display: grid; gap: 8px; justify-items: stretch; align-self: center; }
.deal-cta .btn { max-width: 100%; min-width: 0; padding-inline: 10px; gap: .35em; white-space: normal; text-align: center; line-height: 1.15; }
.deal-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-xs); }
.offer-more { display: inline-flex; align-items: center; gap: .25em; min-height: 32px; padding: 6px 2px; font: 600 var(--t-xs)/1 var(--f-body); color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none; }
.offer-more:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--frog-2); text-underline-offset: 3px; }
.offer-more svg { width: 1em; height: 1em; transition: transform .2s; }
.offer-more[aria-expanded=true] svg { transform: rotate(180deg); }
.deal-perks { list-style: none; margin: 0; padding: 8px 18px 9px; border-top: 1px dashed var(--line-c); display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-xs); color: var(--ink-2); }
.perk { display: inline-flex; align-items: center; gap: .4em; }
.perk.is-on { color: var(--frog-text); font-weight: 600; }
.perk.is-off { color: var(--ink-3); }
.deal-details { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px 28px; padding: 16px 18px 18px; border-top: var(--hair); background: #fbfcf9; border-radius: 0 0 var(--r-card) var(--r-card); }
.deal-details h4 { margin-bottom: 8px; }
.pricetable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pricetable th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 6px 0; border-bottom: 1px solid var(--paper-2); }
.pricetable td { text-align: right; font-weight: 700; padding: 6px 0; border-bottom: 1px solid var(--paper-2); white-space: nowrap; }
.pricetable tr.sum th, .pricetable tr.sum td { font-weight: 700; color: var(--ink); border-bottom: 0; }
.specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: var(--t-sm); }
.specs dt { color: var(--ink-3); }
.specs dd { margin: 0; font-weight: 600; }

/* price over the term: 12 month segments */
.ptl { grid-area: ptl; margin: 0; width: 100%; max-width: 212px; justify-self: end; align-self: end; }
.ptl-bar { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 24px; }
.ptl:not(.ptl--12) .ptl-bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: 0; border-left: 1px solid var(--line-c); }
.ptl-seg { flex: var(--m, 1) 1 0; min-width: 3px; height: calc(6px + 18px * var(--h, .5)); background: var(--frog-wash); box-shadow: inset 0 2px 0 var(--frog-2); border-radius: 4px 4px 0 0; }
.ptl-seg.is-up { background: var(--sun-wash); box-shadow: inset 0 2px 0 var(--sun-2); }
.ptl-seg.is-down { background: var(--frog-wash); box-shadow: inset 0 2px 0 var(--frog-text); }
.ptl-seg.is-after { background: repeating-linear-gradient(135deg, var(--paper-2) 0 4px, transparent 4px 8px); box-shadow: inset 0 2px 0 var(--line-ctl); }
.ptl-bar[style*="--avg"]::after { content: ""; position: absolute; left: 0; width: calc(100% * var(--avg-span, 1)); bottom: calc(6px + 18px * var(--avg)); border-top: 1.5px dashed var(--ink); }
.ptl-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; margin-top: 3px; font-size: var(--t-xs); line-height: 1.3; color: var(--ink-3); }
.ptl-cap span:last-child { margin-left: auto; text-align: right; }
.ptl-cap b { color: var(--ink); font-weight: 700; }
.ptl--lg { max-width: none; }
.ptl--lg .ptl-bar { height: 48px; }
.ptl--lg .ptl-seg { height: calc(10px + 38px * var(--h, .5)); }

@media (max-width: 1200px) {
	.deal-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id price" "cfg ptl" "cta cta"; }
	.deal-main:not(:has(> .ptl)) { grid-template-areas: "id price" "cfg cfg" "cta cta"; }
	.ptl { width: 212px; }
	.deal-config { max-width: none; }
	.deal-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
	.deal-sub { gap: 14px; }
}
@media (max-width: 720px) {
	.deal-main { grid-template-areas: "id price" "ptl ptl" "cfg cfg" "cta cta"; }
	.ptl { max-width: none; width: 100%; }
	.ptl-bar { height: 20px; }
	.ptl-seg { height: calc(5px + 15px * var(--h, .5)); }
	.ptl-bar[style*="--avg"]::after { bottom: calc(5px + 15px * var(--avg)); }
	.deal-cta > .btn, .deal .offer-more { min-height: 44px; }
}
@media (max-width: 560px) {
	.deal-main { padding: 14px; gap: 10px 12px; }
	.pbadge-dot { width: 40px; height: 40px; }
	.price-main { font-size: 1.45rem; }
	.deal-cta { grid-template-columns: 1fr; }
	.deal-sub { justify-content: space-between; }
	.deal-perks { padding: 8px 14px 10px; }
	.deal-details { grid-template-columns: 1fr; padding: 14px; }
}
@media (max-width: 479px) {
	.deal-flag { left: 12px; }
	/* Compact card as one grid: logo | name + meta | price, then full-width rows. */
	.deal .deal-main, .deal .deal-main:not(:has(> .ptl)) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; row-gap: 6px; column-gap: 10px; padding: 12px; }
	.deal-id, .deal-id .pbadge { display: contents; }
	.deal-id .pbadge-dot { grid-area: 1 / 1 / 3 / 2; align-self: center; width: 36px; height: 36px; border-radius: 10px; }
	.deal-id .pbadge-name { grid-area: 1 / 2 / 2 / 3; align-self: end; line-height: 1.15; min-width: 0; }
	.deal-id .deal-meta { grid-area: 2 / 2 / 3 / 3; align-self: start; }
	.deal-main > .deal-price { grid-area: 1 / 3 / 3 / 4; justify-self: end; max-width: 170px; }
	.deal-id > :is(.deal-bundle, .deal-tags), .deal-main > :is(.deal-config, .ptl, .deal-cta) { grid-column: 1 / -1; grid-row: auto; }
	.price-main { font-size: 1.3rem; }
	.deal .ptl { display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; align-items: center; column-gap: 8px; }
	.deal .ptl-cap { display: contents; }
	.deal .ptl-cap span:first-child { order: -1; }
	.deal .ptl-cap span { white-space: nowrap; }
	.deal .ptl-bar { height: 18px; }
	.deal .ptl-seg { height: calc(4px + 14px * var(--h, .5)); }
	.deal-perks { padding: 8px 12px 10px; gap: 4px 12px; }
	.deal-details { padding: 12px; gap: 14px; }
}

/* ---------- "Wat heb je al?" (mini) ---------- */
.hmini { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; margin: 0 0 16px; padding: 12px 14px; background: var(--frog-wash); border: 1.5px solid var(--frog-line); border-radius: 14px; transition: opacity .2s; }
.hmini.is-loading { opacity: .55; }
.hmini-title { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .3em .6em; align-items: center; margin: 0; font-weight: 700; }
.hmini-title > .icon { color: var(--frog-text); }
.hmini-on { display: inline-flex; flex-wrap: wrap; gap: .3em; align-items: center; font-weight: 700; color: var(--frog-text); }
.hmini-help { font-size: var(--t-xs); color: var(--ink-2); font-weight: 500; }
.hmini-fields { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
.hmini-field { display: grid; gap: 4px; }
.hmini-field > span { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.hmini-field :is(select, input) { min-height: 40px; min-width: 150px; font-size: var(--t-sm); }
.hmini-field input[type=number], .hmini-field input[inputmode] { min-width: 0; width: 8.5em; }
.hmini-check { display: inline-flex; gap: .5em; align-items: center; min-height: 40px; font-weight: 600; cursor: pointer; }
.hmini-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--frog-text); }
@media (max-width: 720px) {
	.hmini { padding: 10px 12px; gap: 6px 12px; }
	.hmini-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: 8px 10px; }
	.hmini-field :is(select, input) { width: 100%; min-width: 0; }
	.hmini-check { grid-column: 1 / -1; }
}

/* ---------- lowest price per group ---------- */
.sumstrip { margin-bottom: 18px; }
.sumstrip-title { margin-bottom: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--ink-2); }
.sumstrip-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sumstrip-list > li { display: grid; align-content: start; gap: 1px; padding: 9px 12px; background: var(--card); border: var(--hair); border-radius: 12px; color: var(--ink); }
.sumstrip-list > li:has(> a) { padding: 0; border: 0; background: none; }
.sumstrip-list a { display: grid; align-content: start; gap: 1px; height: 100%; padding: 9px 12px; background: var(--card); border: var(--hair); border-radius: 12px; color: var(--ink); text-decoration: none; }
.sumstrip-list a:hover { border-color: var(--ink); }
.ss-term { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.ss-price { font-size: var(--t-xs); color: var(--ink-3); }
.ss-price b { font: 800 1.2rem/1.2 var(--f-display); color: var(--ink); }
.ss-who { font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 720px) {
	.sumstrip { margin: 0 calc(-1 * var(--gutter)) 14px; }
	.sumstrip-title { padding: 0 var(--gutter); }
	.sumstrip-list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); padding: 0 var(--gutter) 2px; scrollbar-width: none; }
	.sumstrip-list::-webkit-scrollbar { display: none; }
	.sumstrip-list > li { scroll-snap-align: start; }
	.ss-price { white-space: nowrap; }
	.ss-price b { font-size: 1.1rem; }
}

/* ---------- big numbers (kpi tiles) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kpi { display: grid; align-content: start; gap: 4px; padding: 16px 18px 14px; background: var(--card); border: var(--hair); border-radius: var(--r-card); min-width: 0; }
.kpi-label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.kpi-value { font: 800 clamp(1.7rem, 1.35rem + 1.3vw, 2.4rem)/1.05 var(--f-display); font-stretch: 88%; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-value small { font: 600 var(--t-xs)/1 var(--f-body); color: var(--ink-3); letter-spacing: 0; margin-left: .15em; }
.kpi-sub { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
.kpi.is-good .kpi-value { color: var(--frog-text); }
.kpi.is-accent { background: var(--frog-wash); border-color: var(--frog-line); }

/* ---------- blocks ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; list-style: none; padding: 0; margin: 0; }
.step { position: relative; padding: 22px 20px 20px; background: var(--card); border: var(--hair); border-radius: var(--r-card); }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 10px; font: 800 1rem/1 var(--f-display); background: var(--sun); border: var(--line); border-radius: 50%; }
.step h3 { margin-bottom: 6px; font-size: 1.15rem; }
.step p { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.calc { background: var(--card); border: 1.5px solid var(--line-c); border-radius: 20px; padding: clamp(16px, 3vw, 24px); display: grid; gap: 14px; }
.promo-rows { display: grid; gap: 6px; }
.promo-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--paper); font-size: var(--t-sm); }
.promo-row b { font: 800 1.2rem/1 var(--f-display); }
.promo-row.is-avg { background: var(--frog-wash); }
.promo-row.is-up { background: var(--coral-wash); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.provider-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--card); border: var(--hair); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color .15s; }
.provider-card:hover { border-color: var(--ink); color: var(--ink); }
.provider-card .from { text-align: right; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.provider-card .from b { display: block; font: 800 1.05rem/1.2 var(--f-display); color: var(--ink); }

/* FAQ */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--card); border: var(--hair); border-radius: 14px; }
.faq details[open] { border-color: var(--ink-3); }
.faq summary { list-style: none; cursor: pointer; padding: 14px 46px 14px 16px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .a, .faq details > :not(summary) { padding: 0 16px 16px; color: var(--ink-2); max-width: 43.3em; }

/* ---------- honesty blocks ("Zo rekenen we", "Hier verdienen we niets aan") ---------- */
.honest { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.honest-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 16px; background: var(--card); border: var(--hair); border-radius: var(--r-card); }
.honest-item > .icon, .honest-ico { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--frog-wash); color: var(--frog-text); }
.honest-ico .icon { width: 18px; height: 18px; }
.honest-item h3 { font-size: 1.05rem; font-stretch: 96%; }
.honest-item p { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- sticky CTA on detail pages (mobile) ---------- */
.sticky-cta, .deal-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line-c); box-shadow: 0 -8px 24px rgb(19 41 31 / .12); }
.sticky-cta-price, .deal-sticky-price { display: grid; line-height: 1.15; min-width: 0; }
.sticky-cta-price b, .deal-sticky-price b { font: 800 1.25rem/1 var(--f-display); }
.sticky-cta-price small, .deal-sticky-price small { font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn, .deal-sticky .btn { flex: none; min-height: 44px; }
body:has(.sticky-cta:not([hidden])) { padding-bottom: 72px; }
@media (min-width: 721px) { .sticky-cta, .deal-sticky { display: none !important; } body:has(.sticky-cta) { padding-bottom: 0; } }
html.ep-cb-open .sticky-cta { visibility: hidden; }

/* ==========================================================================
   Energy home and page layout on top of the ported components
   ========================================================================== */
.home-hero .hero-grid { grid-template-areas: "text board"; row-gap: 12px; }
.home-hero-text { grid-area: text; }
.home-hero-board { grid-area: board; min-width: 0; }
.home-hero-tip { grid-area: tip; align-self: start; display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; background: var(--card); border: var(--hair); border-radius: var(--r-card); font-size: var(--t-sm); color: var(--ink-2); max-width: 34em; }
.home-hero-tip .ep-maatje { width: 104px; height: auto; flex: none; }
.home-hero-actions { margin-top: 1.5rem; }
@media (max-width: 960px) {
	.home-hero .hero-grid { grid-template-areas: "text" "board"; }
}
@media (max-width: 480px) {
	.home-hero-tip .ep-maatje { width: 80px; }
	.home-hero-actions .btn { flex: 1 1 100%; }
}

/* calculators as cards with an icon */
.tool-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--card); border: 1.5px solid var(--line-c); border-radius: var(--r-card); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s var(--ease-out); }
.tool-card:hover { color: var(--ink); border-color: var(--ink); }
.tool-card h3 { font-size: 1.2rem; }
.tool-card p { font-size: var(--t-sm); color: var(--ink-2); }
.tool-card-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--frog-wash); color: var(--frog-text); }
.tool-card-ico .icon { width: 22px; height: 22px; }
.tool-card-go { display: inline-flex; align-items: center; gap: .35em; margin-top: auto; padding-top: 6px; font-weight: 700; font-size: var(--t-sm); text-decoration: underline; text-decoration-color: var(--frog-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tool-card:hover .tool-card-go .icon { transform: translateX(3px); }
.tool-card-go .icon { transition: transform .15s var(--ease-out); }

/* explainer cards on the home page: flush with the section */
.section .ep-cards { margin-top: 0; }
.section-head .offer-more { font-size: var(--t-sm); }

/* the helper figure */
.ep-maatje { display: block; height: auto; }
/* ==========================================================================
   Energy comparer (src/tools: vergelijker, batterijen, kerncijfers, leverancier, batterijproduct)
   ========================================================================== */
/* inputs with a unit inside .hmini-field / forms */
.ept-input { position: relative; display: flex; align-items: stretch; min-width: 0; background: var(--card); border: 1.5px solid var(--line-ctl); border-radius: var(--r-ctl); overflow: hidden; }
.ept-input:focus-within { border-color: var(--ink); outline: 3px solid var(--sun); outline-offset: 0; }
.ept-input input { flex: 1 1 auto; min-width: 0; min-height: 40px; border: 0 !important; border-radius: 0; outline: none !important; background: transparent; font-weight: 700; }
.ept-affix { display: flex; align-items: center; padding: 0 .7em; background: var(--paper-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; }
.hmini .ept-input { min-width: 150px; }
.hmini-hint { display: block; max-width: 22em; font-size: var(--t-xs); line-height: 1.35; color: var(--ink-2); font-weight: 500; }
.hmini .chips { flex-basis: 100%; }
.hmini .chip { background: var(--card); }
.hmini .chip:has(input:checked) { background: var(--ink); }
/* in the 264px sidebar the mini form stacks */
.filters .hmini { display: grid; gap: 10px; margin: 0; }
.filters .hmini-fields { display: grid; gap: 10px; }
.filters .hmini .ept-input, .filters .hmini-field :is(select, input) { min-width: 0; width: 100%; }
.filters .fgroup .chips { gap: 6px; }

/* the compact top 3 (home) and the full list */
.vgl { min-width: 0; }
.vgl--top .hmini { margin-bottom: 12px; }
.vgl--top .results { gap: 10px; }
.vgl-meer { margin-top: 12px; }
.vgl-niet { font-size: var(--t-xs); color: var(--ink-3); margin-top: 12px; }
/* In the narrow hero column the card uses its tablet layout */
.home-hero-board .deal-main, .home-hero-board .deal-main:not(:has(> .ptl)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id price" "ptl ptl" "cta cta"; }
.home-hero-board .ptl { max-width: none; width: 100%; }
.home-hero-board .deal-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.home-hero-board .deal-bundle { font-size: .98rem; }
.home-hero-board .hmini { background: var(--card); border-color: var(--line-c); }

/* card parts */
.deal-name { margin: 0; font: 780 1.12rem/1.2 var(--f-display); font-stretch: 92%; color: var(--ink); }
.deal-specs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 0; flex-basis: 100%; }
.deal-specs > div { display: grid; gap: 0; }
.deal-specs dt { font-size: var(--t-xs); color: var(--ink-3); }
.deal-specs dd { margin: 0; font-weight: 700; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.deal-specs--big { gap: 10px 28px; margin: 14px 0 0; }
.deal-specs--big dd { font: 800 1.35rem/1.15 var(--f-display); font-stretch: 90%; }
.price-main--none { font: 700 var(--t-sm)/1.3 var(--f-body); color: var(--ink-3); white-space: normal; }
.deal--bat .deal-visual { grid-area: vis; }
.deal-visual { display: grid; place-items: center; width: 104px; aspect-ratio: 4 / 3; background: var(--paper); border-radius: 12px; overflow: hidden; }
.deal-visual :is(svg, img) { width: 100%; height: 100%; object-fit: contain; }
.deal--bat .deal-main { grid-template-columns: 104px minmax(0, 1fr) 190px 172px; grid-template-areas: "vis id price cta"; align-items: center; }
@media (max-width: 1200px) {
	.deal--bat .deal-main { grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "vis id price" "cta cta cta"; }
}
@media (max-width: 720px) {
	.deal--bat .deal-main { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "vis id" "price price" "cta cta"; }
	.deal--bat .deal-visual { width: 88px; }
	.deal--bat .deal-price { justify-items: start; text-align: left; }
}
@media (max-width: 479px) {
	/* keep the battery card as its own grid (not the compact sim-only layout) */
	.deal--bat .deal-main, .deal--bat .deal-main:not(:has(> .ptl)) { grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "vis id" "price price" "cta cta"; row-gap: 10px; }
	.deal--bat .deal-id { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
	.deal--bat .deal-main > .deal-price { grid-area: price; justify-self: stretch; max-width: none; }
	.deal--bat .deal-main > .deal-cta { grid-area: cta; }
	.deal--bat .deal-visual { width: 72px; }
}
/* battery illustration: calm fills from the tokens */
.bat-ill__body { fill: #eef1ea; stroke: var(--ink); stroke-width: 2.5; }
.bat-ill__led { fill: var(--frog); }
.bat-ill__panel { fill: #fff; stroke: #8a978f; stroke-width: 1.5; }
.bat-ill__cable { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.bat-ill__plug { fill: var(--ink-2); }
.bat-ill__line { stroke: #8a978f; stroke-width: 2; stroke-linecap: round; }
.bat-ill__floor { fill: var(--line-c); }
.bat-img { background: #fff; }

/* big numbers from kerncijfers: the sumstrip as tiles, 3 per row, 2 on phones */
.sumstrip.kpis { display: block; margin-bottom: 0; }
.kpis .sumstrip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpis .sumstrip-list > li, .kpis .sumstrip-list a { padding: 16px 18px 14px; border-radius: var(--r-card); gap: 4px; }
.kpis .sumstrip-list .ss-cell { display: grid; gap: 4px; }
.kpis .ss-term { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.kpis .ss-price b { font: 800 clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem)/1.05 var(--f-display); font-stretch: 88%; letter-spacing: -.015em; }
.kpis .ss-who { line-height: 1.4; }
.kpis .sumstrip-list a { position: relative; }
.kpis .sumstrip-list a::after { content: ""; position: absolute; right: 14px; top: 16px; width: 1em; height: 1em; background: var(--ink-3); -webkit-mask: var(--ep-arrow) center / contain no-repeat; mask: var(--ep-arrow) center / contain no-repeat; }
.sumstrip-src { margin-top: 10px; font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 720px) {
	.sumstrip.kpis { margin: 0; }
	.kpis .sumstrip-list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding: 0; gap: 8px; }
	.kpis .sumstrip-list > li, .kpis .sumstrip-list a { padding: 12px 12px 10px; }
	.kpis .ss-price { white-space: normal; }
	.sumstrip.kpis .sumstrip-src { padding: 0; }
}

/* supplier detail */
.lev-detail { display: grid; gap: 24px; }
.lev-kaart .meta-line { margin: 0 0 10px; }
.lev-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.lev-grid > * { min-width: 0; }
.lev-grid h2 { font-size: 1.45rem; margin-bottom: 12px; }
.lev-persoonlijk { padding: 18px; background: var(--card); border: var(--hair); border-radius: var(--r-card); }
.lev-persoonlijk .hmini { margin: 0; }
.lev-grafiek { margin-top: 8px; }
@media (max-width: 900px) { .lev-grid { grid-template-columns: 1fr; } }

/* battery detail */
.bat-detail { display: grid; gap: 20px; }
.bat-detail > h2 { margin-top: 12px; font-size: 1.45rem; }
.bat-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(16px, 4vw, 48px); align-items: center; padding: clamp(16px, 3vw, 28px); background: var(--card); border: var(--hair); border-radius: 20px; }
.bat-hero-visual { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--paper); border-radius: 16px; padding: 16px; }
.bat-hero-visual :is(svg, img) { width: min(100%, 360px); height: auto; }
.bat-hero-txt .price-main { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); }
.bat-cta { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 18px; }
@media (max-width: 760px) { .bat-hero { grid-template-columns: 1fr; } .bat-cta .btn { flex: 1 1 100%; } }

/* data tables from the tools */
.ept-table--tarief th[scope=row] { font-weight: 600; width: 42%; }
.ept-table--tarief td:last-child { white-space: nowrap; }
.ept-noot { margin-top: 4px; font-size: var(--t-xs); font-weight: 500; line-height: 1.45; color: var(--ink-2); }
.ept-noot summary { cursor: pointer; width: fit-content; color: var(--ink-3); text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; }
.ept-noot[open] { max-width: 34em; }
.ept-sub { display: block; font-size: var(--t-xs); color: var(--ink-3); }
/* ---------- hero board with Maatje on top (as on the Overstapmaatje home) ---------- */
.hero-board .maatje-perch { position: absolute; z-index: 3; right: 20px; top: -112px; width: 124px; height: auto; pointer-events: none; }
.hero-board.has-perch { margin-top: 100px; }
@media (max-width: 600px) { .hero-board .maatje-perch { width: 96px; top: -88px; right: 12px; } .hero-board.has-perch { margin-top: 80px; } }
@media (prefers-reduced-motion: no-preference) {
	.maatje-perch { animation: ep-perch-up .7s var(--ease-out) .2s both; }
	@keyframes ep-perch-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.board-head .small { font-size: var(--t-xs); }
.board-ctl { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; background: var(--paper); border-radius: 12px; }
.board-ctl .chips { gap: 6px; }
.board-ctl .chip { min-height: 36px; padding: .35em .8em; font-size: var(--t-xs); }
.board-kwh { display: grid; gap: 3px; font-weight: 600; }
.board-kwh > span:first-child { font-size: var(--t-xs); color: var(--ink-2); }
.board-kwh .ept-input { width: 9.5em; min-width: 0; }
.board-kwh .ept-input input { min-height: 36px; padding: .3em .6em; font-size: var(--t-sm); }
.board-list .pbadge-dot { width: 36px; height: 36px; border-radius: 10px; font-size: .9rem; }
.board-foot .btn { flex: none; }
@media (max-width: 420px) {
	.board { padding: 14px 12px 12px; }
	.board-list a { grid-template-columns: 18px auto minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px; }
	.board-list .p b { font-size: 1.1rem; }
	.board-foot .btn { width: 100%; }
}

/* ---------- detail pages (OM deal page) ---------- */
.deal-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.deal-h1 { font-size: var(--t-h2) !important; }
.deal-h1 .muted { font-weight: 600; font-size: .6em; }
.deal-split { align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.deal-split > .calc { position: sticky; top: calc(var(--header-h) + 16px); }
.calc > .price-main, .calc .price-main.num { font-size: 2.6rem; }
.calc .promo-row b.num { font-size: 1.2rem; }
@media (max-width: 900px) {
	.deal-split { grid-template-columns: minmax(0, 1fr) !important; }
	.deal-split > .calc { position: static !important; }
	.calc > .price-main, .calc .price-main.num { font-size: 2.2rem; }
}
.profile { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
.profile-box { background: var(--card); border: var(--hair); border-radius: var(--r-card); padding: 18px; }
.profile-box h2 { font-size: 1.3rem; margin-bottom: 10px; }
.profile-box ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: var(--t-sm); }
.profile-box .hmini { margin: 0; }
@media (max-width: 860px) { .profile { grid-template-columns: 1fr; } }
.report-line { grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); }
.report-line :is(.link-btn, a) { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); text-decoration-color: var(--line-c); }
.report-line :is(.link-btn, a):hover { color: var(--ink); text-decoration-color: var(--frog-2); }
.pi-more { margin-top: 4px; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.pi-more summary { cursor: pointer; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; width: fit-content; min-height: 24px; }
.pi-more span { display: block; margin-top: 4px; }
.step > b:first-child { display: block; margin-bottom: 6px; font: 750 1.15rem/1.2 var(--f-display); }
.deal-visual--big { width: 100%; max-width: none; aspect-ratio: 16 / 9; padding: 12px; }
.deal-visual--big :is(svg, img) { width: min(100%, 320px); }
.ep-main--detail .section { padding-block: 40px; }
.ep-main--detail .section-head h2 { font-size: 1.5rem; }
.ep-main--detail .section--tint { margin-block: 8px; padding-inline: clamp(16px, 3vw, 28px); border-radius: 20px; }
.ep-main--detail .ep-tool { margin-top: 0; }

.kpis .sumstrip-list > li:has(> a) { padding: 0; border: 0; background: none; }
.kpis .sumstrip-list a { height: 100%; }
.kpis .sumstrip-list a .ss-term { padding-right: 1.4em; }
.filters .chip { padding: .4em .75em; }
.filters .hmini { padding: 12px; }
.sort-label { white-space: nowrap; }
.vgl-niet { max-width: 60em; }
.deal.is-best .deal-main { padding-top: 22px; }
.deal--bat .deal-visual { align-self: start; }

/* ---------- content pages: lists as tiles, contents as chips ---------- */
ul.ep-tiles { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
ul.ep-tiles > li { position: relative; margin: 0 !important; padding: 14px 16px 14px 46px; background: var(--card); border: var(--hair); border-radius: 14px; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
ul.ep-tiles > li::marker { content: ""; }
ul.ep-tiles > li::before { content: ""; position: absolute; left: 14px; top: 15px; width: 20px; height: 20px; border-radius: 50%; background: var(--frog-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a6660' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
ul.ep-tiles > li strong { color: var(--ink); }
ul.ep-tiles--warn > li { background: var(--sun-wash); border-color: var(--sun-line); color: var(--ink); }
ul.ep-tiles--warn > li::before { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5200' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8'/%3E%3Ccircle cx='12' cy='18.5' r='1' fill='%237a5200'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: inset 0 0 0 1.5px var(--sun-2); }
.ep-toc { padding: 0; background: none; border: 0; }
.ep-toc ul, .ep-toc ol { display: flex; flex-wrap: wrap; gap: 6px; columns: auto; margin: 0; padding: 0 !important; list-style: none; }
.ep-toc li { margin: 0 !important; }
.ep-toc a { display: inline-flex; align-items: center; min-height: 40px; padding: .45em .9em; font: 600 var(--t-sm)/1.2 var(--f-body); color: var(--ink); text-decoration: none; background: var(--card); border: 1.5px solid var(--line-c); border-radius: 999px; }
.ep-toc a:hover { border-color: var(--ink-2); color: var(--ink); }
@media (max-width: 720px) {
	.ep-toc ul, .ep-toc ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter) !important; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent); }
	.ep-toc a { white-space: nowrap; }
}
/* FAQ items on content pages sit together */
.ep-content > details.ep-faq + details.ep-faq { margin-top: 8px; }.wrap.ep-page--default { max-width: calc(var(--ep-measure) + 2 * var(--gutter) + 2rem); }
/* comparer notes */
.deal-ctx { flex-basis: 100%; margin: 0; font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); }
.deal-ctx.is-down { color: var(--frog-text); }
details.vgl-niet { margin-top: 14px; padding: 12px 14px; background: var(--card); border: var(--hair); border-radius: 14px; }
details.vgl-niet > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 24px; }
details.vgl-niet[open] > summary { margin-bottom: 8px; }
details.vgl-niet ul { margin: 6px 0; padding-left: 1.2em; display: grid; gap: 4px; }
details.vgl-niet p + p, details.vgl-niet ul + p { margin-top: 6px; }
/* ---------- round 1 fixes ---------- */
/* hero control (tool "profielkeuze"), like the OM hero chips */
.hero-ctl { margin-top: 1.5rem; }
.hero-ctl .hero-q { margin-top: 0; font-weight: 700; }
.hero-ctl .hero-q + .chips, .hero-ctl .hero-q + .hero-kwh { margin-top: .6rem; }
.hero-ctl .chips + .hero-q { margin-top: 1.1rem; }
.hero-kwh { display: flex; align-items: center; gap: 10px; }
.hero-kwh .ept-input { width: 180px; flex: none; }
.hero-kwh .ept-input input { min-height: 46px; font-size: 1rem; }
.hero-ctl .hero-alt { margin-top: 1.1rem; }
.home-hero-text .ep-tool { margin: 0; min-height: 0; }
.home-hero-board .ep-tool { margin: 0; }

/* price over the year: full width of the price column, taller bar, caption on one line */
.deal-main > .ptl { max-width: 212px; }
.ptl-bar { height: 28px; gap: 2px; }
.ptl-seg { height: calc(6px + 22px * var(--h, .5)); }
.ptl-bar[style*="--avg"]::after { bottom: calc(6px + 22px * var(--avg)); }
.ptl-cap { flex-wrap: nowrap; font-size: var(--t-xs); white-space: nowrap; }
.ptl-cap span:last-child { margin-left: auto; }
@media (max-width: 720px) {
	.deal-main > .ptl { max-width: none; }
	.ptl-bar { height: 24px; }
	.ptl-seg { height: calc(5px + 19px * var(--h, .5)); }
}
@media (max-width: 479px) {
	/* keep bar + caption stacked on phones (caption on one line under the full-width bar) */
	.deal .ptl { display: block; }
	.deal .ptl-cap { display: flex; }
	.deal .ptl-cap span:first-child { order: 0; }
	.deal .ptl-bar { height: 22px; }
	.deal .ptl-seg { height: calc(4px + 18px * var(--h, .5)); }
}
/* one-line CTA */
.deal-cta .btn { white-space: nowrap; }
.deal-cta .btn-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results-note { margin: 0 0 10px; }
/* sidebar: the four "Wat heb je al?" chips as a 2 x 2 grid */
.filters .hmini .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.filters .hmini .chip { justify-content: center; padding-inline: .5em; white-space: normal; text-align: center; line-height: 1.15; }
/* home rhythm on the 8px grid */
.home-hero { padding-block: 32px 48px; }
.ep-main--home .trust + .section { padding-top: 48px; }
.ep-main--home .section { padding-block: 64px; }
@media (max-width: 720px) {
	.home-hero { padding-block: 24px 40px; }
	.ep-main--home .section, .ep-main--home .trust + .section { padding-block: 40px; }
}@media (max-width: 479px) { .deal-id > :is(.deal-ctx, .deal-specs, .deal-name, p:not(.deal-meta)) { grid-column: 1 / -1; grid-row: auto; } .deal:not(.deal--bat) .deal-id > .deal-meta { flex-wrap: wrap; } }

/* ---------- round 2 ---------- */
/* "Wat heb je al?" fold: a green bar on mobile, the plain block on desktop (JS sets [open] at >= 1000px) */
details.have-fold > summary { list-style: none; cursor: pointer; }
details.have-fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 1000px) {
	details.have-fold > summary { display: none; }
}
@media (max-width: 999px) {
	details.have-fold > summary.have-fold-sum { display: flex; align-items: center; gap: .5em; min-height: 48px; padding: 8px 40px 8px 12px; position: relative; background: var(--frog-wash); border: 1.5px solid var(--frog-line); border-radius: 14px; font-size: var(--t-xs); line-height: 1.3; }
	.have-fold-sum b { flex: none; font-size: var(--t-sm); color: var(--ink); }
	.have-fold-sum [data-samenvatting] { flex: 1; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.have-fold-sum::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
	details.have-fold[open] > .have-fold-sum { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
	details.have-fold[open] > .have-fold-sum::after { transform: translateY(-30%) rotate(-135deg); }
	details.have-fold > .hmini { margin: 0; border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 4px; }
	details.have-fold .hmini-title { display: none; }
	.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
	details.have-fold, details.have-fold > summary { min-width: 0; }
}
/* filter fold: a compact "Filters" pill on mobile */
details.filter-fold > summary { list-style: none; }
details.filter-fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 1000px) { details.filter-fold > summary { cursor: default; pointer-events: none; } }
@media (max-width: 999px) {
	details.filter-fold > summary.fgroup-title { display: inline-flex; align-items: center; gap: .45em; width: fit-content; min-height: 40px; padding: .4em .9em; font: 600 var(--t-sm)/1 var(--f-body); background: var(--card); border: 1.5px solid var(--line-c); border-radius: 999px; cursor: pointer; }
	details.filter-fold > summary.fgroup-title::before { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 7H13M18.5 7h2M3.5 17h2M10.5 17h10'/%3E%3Ccircle cx='15.8' cy='7' r='2.5'/%3E%3Ccircle cx='8' cy='17' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 7H13M18.5 7h2M3.5 17h2M10.5 17h10'/%3E%3Ccircle cx='15.8' cy='7' r='2.5'/%3E%3Ccircle cx='8' cy='17' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
	details.filter-fold > summary.fgroup-title:hover { border-color: var(--ink-2); }
	details.filter-fold[open] > summary.fgroup-title { background: var(--ink); border-color: var(--ink); color: var(--paper); }
	details.filter-fold[open] { gap: 10px; }
}
/* detail page: no box around the green form inside the price card */
.calc .profile-box { padding: 0; background: none; border: 0; border-radius: 0; }
/* battery cards on phones: name next to the picture, tags and specs full width in one wrapping row */
@media (max-width: 720px) {
	.deal--bat .deal-meta { flex-wrap: wrap; }
}
@media (max-width: 479px) {
	.deal--bat .deal-main, .deal--bat .deal-main:not(:has(> .ptl)) { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: none; }
	.deal--bat .deal-visual { grid-column: 1; grid-row: 1; width: 64px; }
	.deal--bat .deal-id { display: contents; }
	.deal--bat .deal-name { grid-column: 2; grid-row: 1; align-self: center; }
	.deal--bat .deal-id > :not(.deal-name) { grid-column: 1 / -1; }
	.deal--bat .deal-main > .deal-price, .deal--bat .deal-main > .deal-cta { grid-row: auto; grid-column: 1 / -1; }
	.deal--bat .deal-main > .deal-price { justify-items: start; text-align: left; }
}
/* card text at 390: the context line and the bar caption never overflow */
.deal-ctx { overflow-wrap: anywhere; }
@media (max-width: 400px) { .ptl-cap { font-size: .875rem; gap: 0 6px; } }
/* ---------- round 3 (lead): first card above the fold on phones, like OM ---------- */
@media (max-width: 999px) {
	.vgl.compare .results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 4px; }
	.vgl.compare .results-count { margin: 0; font-size: var(--t-sm); }
	.vgl.compare .sortbox { display: flex; align-items: center; gap: 0; margin: 0; }
	.vgl.compare .sortbox .sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.vgl.compare .sortbox select { min-height: 40px; padding: 6px 32px 6px 12px; font-size: var(--t-sm); }
	.vgl.compare .filters { margin-bottom: 0; }
	.vgl.compare .results-note { margin: 0 0 8px; font-size: var(--t-xs); }
	.page-head .meta-line, .entry > .meta-line:first-child { margin-top: 4px; }
}
/* ---------- round 4 (lead): review-1 fixes ---------- */
/* month bar: taller and with more contrast, never past the card padding */
.ptl { min-width: 0; max-width: 100%; }
.ptl-bar { min-width: 0; }
.ptl-seg { height: calc(8px + 24px * var(--h, .5)); background: color-mix(in srgb, var(--frog) 38%, var(--card)); box-shadow: inset 0 2px 0 var(--frog-2); }
.ptl-seg.is-up { background: color-mix(in srgb, var(--sun) 55%, var(--card)); box-shadow: inset 0 2px 0 var(--sun-2); }
.ptl-cap { flex-wrap: wrap; row-gap: 2px; }
.lev-calc .ptl, .calc .ptl { width: 100%; }
/* sidebar rhythm and chips */
@media (min-width: 1000px) {
	.vgl.compare .filters > * + * { margin-top: 24px; }
}
.hmini .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hmini .chip { justify-content: center; padding: 8px 14px; min-height: 40px; }
/* one note above the list instead of one per card */
.btw-noot { margin: 0 0 12px; font-size: var(--t-xs); color: var(--ink-3); }
/* suppliers outside the ranking: visible rows, like the home board */
.vgl-niet { margin-top: 32px; padding: 20px; background: var(--card); border: var(--hair); border-radius: var(--r-card); }
.vgl-niet-t { margin: 0 0 4px; font-size: var(--t-h3); }
.vgl-niet .board-list { margin-top: 12px; }
.board-list--plain .p small { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--frog-2); text-underline-offset: 3px; }
/* header: the yellow action, like "Vraag Maatje" on overstapmaatje.nl */
.ep-header-cta { display: none; }
@media (min-width: 1000px) { .ep-header-cta { display: inline-flex; margin-left: 12px; white-space: nowrap; } }
/* home at 390: first prices in view */
@media (max-width: 699px) {
	.home-hero .hero-lead { font-size: var(--t-base); margin-bottom: 8px; }
	.home-hero .hero-ctl .hero-alt { display: none; }
	.home-hero .hero-ctl .hero-q { margin: 8px 0 6px; }
	.home-hero .maatje-perch { width: 72px; height: auto; }
	.home-hero h1 { font-size: clamp(1.9rem, 1.4rem + 3vw, 2.4rem); }
}
/* home: price chart section */
.home-chart { margin-top: 24px; padding: 20px; background: var(--card); border: var(--hair); border-radius: var(--r-card); }
.home-faq { display: grid; gap: 8px; max-width: 760px; }
/* loading skeleton for the hero board */
.vgl-board.is-laden .board-list li { min-height: 64px; display: flex; align-items: center; padding: 12px; }
.vgl-board.is-laden .skel { display: block; width: 100%; height: 36px; border-radius: 10px; background: linear-gradient(90deg, var(--paper-2) 0%, var(--card) 50%, var(--paper-2) 100%); background-size: 200% 100%; animation: ep-skel 1.2s ease-in-out infinite; }
@keyframes ep-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .vgl-board.is-laden .skel { animation: none; } }
/* ---------- round 5 (lead): review-2 fixes ---------- */
/* not-ranked rows: no rank column, so a 3-column grid; nothing overlaps or sticks out */
.board-list--plain a, .board-list--plain a:is(*) { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; min-width: 0; }
.board-list--plain .what { min-width: 0; }
.board-list--plain .what small { overflow-wrap: anywhere; }
/* list cards on desktop: month bar in the empty left column under the opslag line, caption on one line */
@media (min-width: 1000px) {
	.vgl .deal:not(.deal--bat) .deal-main { grid-template-areas: "id price cta" "ptl price cta"; }
	.vgl .deal:not(.deal--bat) .deal-main > .ptl { grid-area: ptl; max-width: 340px; }
}
.ptl-cap { white-space: nowrap; }
@media (max-width: 400px) { .ptl-cap { white-space: normal; } }
/* home at 390: a smaller Maatje sitting on the board edge, so all three prices fit */
@media (max-width: 600px) {
	.home-hero .hero-board .maatje-perch { width: 64px; top: -56px; right: 16px; }
	.home-hero .hero-board.has-perch { margin-top: 48px; }
}
/* round 6: list on phones, one note line, first price higher */
@media (max-width: 600px) {
	.vgl.compare .btw-noot { display: none; }
	.vgl.compare .results-bar { margin-top: 4px; }
	.vgl.compare .results-count .muted { display: none; }
	.vgl.compare .sortbox select { width: auto; }
}
/* ---------- round 7 (lead): review-3 fixes ---------- */
/* three big numbers instead of six tiles */
.kpis--groot .sumstrip-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis--groot .ss-price b { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); line-height: 1.1; }
@media (max-width: 700px) { .kpis--groot .sumstrip-list { grid-template-columns: 1fr; } }
/* one honesty line on the home */
.honest-line { max-width: 72ch; margin: 0; font-size: var(--t-lg); color: var(--ink-2); }
/* desktop list card: month bar starts at the same left edge as the opslag line */
.vgl .deal:not(.deal--bat) .deal-main > .ptl { justify-self: start; margin-left: 0; padding-left: 0; width: 100%; }
.vgl .deal:not(.deal--bat) .ptl-bar, .vgl .deal:not(.deal--bat) .ptl-cap { margin-left: 0; padding-left: 0; }
/* "Wat heb je al?" chips in the sidebar: one column, real side padding */
@media (min-width: 1000px) {
	.vgl.compare .filters .hmini .chips { grid-template-columns: 1fr; gap: 6px; }
	.vgl.compare .filters .hmini .chip { justify-content: flex-start; padding: 6px 14px; min-height: 36px; }
}
figure.ptl { margin: 0; }