/**
 * AVO Aanbieders: plugin-CSS.
 * Alle kleuren via var(--avo-*) uit het theme :root-blok. Geen hardcoded hex
 * hier, ook niet in scorepaneel, sub-scores, tabel-highlight of CTA-kaarten.
 * Breakpoints: 480 / 600 / 860px.
 */

.avo-app { --avo-app-radius: var(--avo-radius, 12px); }

/* =========================================================================
 * 0. Basis / knoppen
 * ========================================================================= */
.avo-app a { color: var(--avo-primary); }
.avo-btn, .avo-btn-cta, .avo-btn-submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-weight: 700; font-size: 1rem; line-height: 1;
	padding: 14px 24px; border-radius: var(--avo-radius-sm); border: 2px solid transparent;
	cursor: pointer; transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
	text-decoration: none; white-space: nowrap; background: var(--avo-primary); color: var(--avo-on-primary);
}
.avo-btn:hover, .avo-btn-cta:hover, .avo-btn-submit:hover { background: var(--avo-primary-dark); color: var(--avo-on-primary); text-decoration: none; transform: translateY(-1px); }
.avo-btn--primary { background: var(--avo-primary); color: var(--avo-on-primary); }
.avo-btn--lg { font-size: 1.1rem; padding: 18px 30px; }
.avo-btn--sm { font-size: .85rem; padding: 9px 16px; }
.avo-btn--block { width: 100%; }

.avo-container { width: 100%; max-width: var(--avo-container); margin-inline: auto; padding-inline: 20px; }
.avo-section { padding-block: clamp(40px, 5vw, 72px); }
.avo-lead { font-size: 1.1rem; color: var(--avo-muted); max-width: 60ch; }

/* =========================================================================
 * 1. Filters / resultatenpagina [avo_resultaten]
 * ========================================================================= */
.avo-results { display: grid; grid-template-columns: 288px 1fr; gap: 40px; align-items: start; }
.avo-sidebar-col, .avo-results__main { min-width: 0; }

/* Adresblok, filterblok en verantwoording vormen samen een meelopende kolom.
   Het scrollgebied zit op de kolom (niet op het filterblok), zodat alle drie
   de blokken samen onder de vaste sitekop door schuiven. Zonder eigen maximum
   loopt de kolom bij veel filtergroepen het scherm uit. */
.avo-sidebar-col {
	display: flex; flex-direction: column; gap: 28px;
	position: sticky; top: 90px; max-height: calc(100vh - 108px);
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* Zonder deze regel verdeelt flexbox de beschikbare max-height over de drie
   blokken in plaats van ze hun eigen inhoudshoogte te geven, waardoor het
   onderste blok wordt platgeknepen in plaats van dat de kolom gaat scrollen. */
.avo-sidebar-col > * { flex-shrink: 0; }
.avo-sidebar-col::-webkit-scrollbar { width: 6px; }
.avo-sidebar-col::-webkit-scrollbar-thumb { background: var(--avo-border); }
@media (max-width: 860px) { .avo-sidebar-col { position: static; max-height: none; overflow-y: visible; } }

/* Filter-sidebar als zachte kaart, in lijn met de rest van het merkbeeld. */
.avo-filters { background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); box-shadow: var(--avo-shadow-1); padding: 20px; }
.avo-filters__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 20px; }
.avo-filters__title { margin: 0; font-family: var(--avo-font-head); font-size: 1.15rem; min-width: 0; }
.avo-filters__reset { background: none; border: 0; padding: 0; color: var(--avo-primary); font-weight: 600; cursor: pointer; font-size: .85rem; white-space: nowrap; flex: 0 0 auto; text-decoration: underline; text-underline-offset: 3px; }
.avo-filters__mobtoggle { display: none; background: none; border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm); padding: 10px 16px; font-weight: 700; color: var(--avo-ink); cursor: pointer; }

/* Tussenkoppen per filtergroep: dunne scheidingslijn ertussen, ruimer tussen
   groepen dan binnen een groep. */
.avo-filters__group + .avo-filters__group { margin-top: 24px; }
.avo-filters__grouphead { margin: 0 0 14px; font-family: var(--avo-font-head); font-size: .95rem; font-weight: 700; color: var(--avo-ink); }
.avo-filters__group .avo-fgroup { margin-bottom: 16px; }
.avo-filters__group .avo-fgroup:last-child { margin-bottom: 0; }

.avo-fgroup { margin-bottom: 22px; }
.avo-fgroup__label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 8px; color: var(--avo-ink); }
.avo-range-val { font-weight: 700; color: var(--avo-primary); margin-bottom: 4px; font-size: .85rem; }
.avo-range-val--inline { margin-bottom: 0; font-size: .82rem; }
.avo-range__minmax { display: flex; justify-content: space-between; font-size: .78rem; color: var(--avo-muted); }

/* Slider met een gevulde baan in de accentkleur. Het percentage komt uit de
   --avo-range-fill custom property die updateRangeFills() na elke render
   bijwerkt; Firefox tekent de vulling zelf via ::-moz-range-progress. */
.avo-range {
	width: 100%; height: 4px; margin: 10px 0;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: linear-gradient(to right, var(--avo-primary) var(--avo-range-fill, 0%), var(--avo-border) var(--avo-range-fill, 0%));
	cursor: pointer; accent-color: var(--avo-primary);
}
.avo-range::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.avo-range::-moz-range-track { height: 4px; background: var(--avo-border); }
.avo-range::-moz-range-progress { height: 4px; background: var(--avo-primary); }
.avo-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; margin-top: -6px; border-radius: 2px;
	background: var(--avo-primary); border: 0; cursor: pointer;
}
.avo-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 2px; border: 0; background: var(--avo-primary); cursor: pointer; }

.avo-tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.avo-tile { background: none; border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm); padding: 8px 14px; font-size: .85rem; font-weight: 700; color: var(--avo-ink); cursor: pointer; }
.avo-tile[aria-pressed="true"] { background: var(--avo-primary); border-color: var(--avo-primary); color: var(--avo-on-primary); }

.avo-checks-list, .avo-radio-list { display: flex; flex-direction: column; gap: 9px; }
/* display:flex hierboven wint van de browser-default voor [hidden], waardoor
   ingeklapte lijsten anders toch open blijven staan. */
.avo-checks-list[hidden], .avo-radio-list[hidden] { display: none; }
.avo-check { display: inline-flex; align-items: center; gap: 9px; font-size: .9rem; }
.avo-check.is-unavailable { opacity: .5; }
.avo-check__loc { font-style: normal; color: var(--avo-muted); font-size: .82em; }

/* Vierkante keuzevakjes voor zowel de checkboxen als de contractduur-radio's:
   radiogedrag, checkboxuiterlijk. De single-select-logica in
   avo-resultaten.js blijft ongewijzigd, alleen de weergave verandert. */
.avo-check input[type="checkbox"], .avo-check input[type="radio"] {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	width: 17px; height: 17px; flex: 0 0 17px; margin: 0;
	border: 1px solid var(--avo-rule); border-radius: 2px;
	background-color: var(--avo-card, var(--avo-surface));
	background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
	cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.avo-check input[type="checkbox"]:checked, .avo-check input[type="radio"]:checked {
	background-color: var(--avo-primary); border-color: var(--avo-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}
.avo-check input[type="checkbox"]:disabled { opacity: .6; cursor: default; }

.avo-fgroup--verbinding .avo-check { align-items: flex-start; }
/* Drie losse booleaanse filters onder één tussenkop, dicht op elkaar. */
.avo-fgroup--levering { display: flex; flex-direction: column; gap: 10px; }

.avo-fgroup__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.avo-fgroup__labelrow--tip { margin-bottom: 0; }
.avo-fgroup__labelrow--spaced { margin-top: 18px; }
.avo-fgroup__labelrow .avo-fgroup__label { margin-bottom: 0; }
.avo-fgroup__wijzig { background: none; border: 0; color: var(--avo-primary); font-weight: 600; font-size: .82rem; cursor: pointer; padding: 0; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.avo-fgroup__summary { margin: 0 0 8px; font-size: .85rem; color: var(--avo-muted); }
/* Statusregel van de server-side belfilters. */
.avo-fgroup__status { margin: 10px 0 0; font-size: .84rem; color: var(--avo-muted); }
.avo-fgroup__status[hidden] { display: none; }
.avo-fgroup__status.is-error { color: var(--avo-danger); }

.avo-tip-toggle { background: none; border: 0; color: var(--avo-primary); font-weight: 600; font-size: .78rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
/* Klein vierkant i-tje als toelichtingsknop, zelfde toggle als de tekstlink. */
.avo-tip-icon {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 16px; height: 16px; border-radius: 2px; padding: 0;
	border: 1px solid var(--avo-primary); background: none; color: var(--avo-primary);
	font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.avo-tip-icon:hover { background: var(--avo-primary); color: var(--avo-on-primary); }
.avo-tip { margin: 10px 0 0; padding: 10px 12px; background: var(--avo-tint-2, var(--avo-surface)); border-left: 2px solid var(--avo-rule); font-size: .82rem; color: var(--avo-text); line-height: 1.5; }
.avo-tip[hidden] { display: none; }

/* Pakketkeuze: internet ligt vast, tv en bellen zijn schakelbaar. Hoekige
   knopvorm (4px), geen ronde pillen. */
.avo-pakket-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.avo-pakket-plus { color: var(--avo-muted); font-weight: 700; font-size: .85rem; }
.avo-pill {
	display: inline-flex; align-items: center; gap: 7px; position: relative;
	font-weight: 700; font-size: .8rem; line-height: 1;
	padding: 9px 11px; border-radius: var(--avo-radius-sm); cursor: pointer; user-select: none;
	border: 1px solid var(--avo-rule); background: none; color: var(--avo-ink);
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.avo-pill--vast { background: var(--avo-primary); border-color: var(--avo-primary); color: var(--avo-on-primary); cursor: default; }
.avo-pill--toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.avo-pill__box { width: 14px; height: 14px; flex: 0 0 14px; border-radius: 2px; position: relative; border: 1px solid var(--avo-rule); background: var(--avo-card, var(--avo-surface)); }
.avo-pill--toggle:hover { border-color: var(--avo-primary); }
.avo-pill--toggle:has(input:checked) { background: var(--avo-primary); border-color: var(--avo-primary); color: var(--avo-on-primary); }
.avo-pill--toggle:has(input:checked) .avo-pill__box { background: var(--avo-on-primary); border-color: var(--avo-on-primary); }
.avo-pill--toggle:has(input:checked) .avo-pill__box::after {
	content: ""; position: absolute; left: 3px; top: 4px; width: 7px; height: 3.5px;
	border-left: 2px solid var(--avo-primary); border-bottom: 2px solid var(--avo-primary); transform: rotate(-45deg);
}
.avo-pill--toggle:has(input:focus-visible) { outline: 2px solid var(--avo-primary); outline-offset: 2px; }

/* Ondergrens als uitklaplijst: knop met de huidige keuze plus een paneel met
   echte radio's. */
.avo-selectmin { position: relative; }
.avo-selectmin__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 12px; border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm);
	background: var(--avo-card, var(--avo-surface)); color: var(--avo-ink); font-weight: 700; font-size: .88rem;
	cursor: pointer; text-align: left;
}
.avo-selectmin__trigger:hover { border-color: var(--avo-primary); }
.avo-selectmin__chevron { flex: 0 0 auto; color: var(--avo-muted); transition: transform .15s ease; }
.avo-selectmin__trigger[aria-expanded="true"] .avo-selectmin__chevron { transform: rotate(180deg); }
.avo-selectmin__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
	background: var(--avo-card, var(--avo-surface)); border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm);
	padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.avo-selectmin__panel[hidden] { display: none; }
.avo-selectmin__option { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 2px; cursor: pointer; font-size: .88rem; color: var(--avo-ink); }
.avo-selectmin__option:hover { background: var(--avo-tint-1, var(--avo-surface)); }
.avo-selectmin__option span { display: flex; align-items: baseline; gap: 6px; }
.avo-selectmin__option em { font-style: normal; font-size: .76rem; color: var(--avo-muted); }
.avo-selectmin__option input[type="radio"] {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	width: 17px; height: 17px; flex: 0 0 17px; margin: 0;
	border: 1px solid var(--avo-rule); border-radius: 50%;
	background: var(--avo-card, var(--avo-surface));
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.avo-selectmin__option input[type="radio"]:checked { border-color: var(--avo-primary); }
.avo-selectmin__option input[type="radio"]:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--avo-primary); }

/* Adresblok boven het filterblok (alleen als niche-config 'adrescheck' => true). */
.avo-adresblok { background: var(--avo-tint-1); border-radius: var(--avo-radius); padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.avo-adresblok__title { margin: 0; font-family: var(--avo-font-head); font-size: 1.15rem; color: var(--avo-ink); }
.avo-adresblok__ingevuld { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.avo-adresblok__ingevuld[hidden] { display: none; }
.avo-adresblok__tekst { font-weight: 700; color: var(--avo-ink); font-size: .92rem; }
.avo-adresblok__wijzig { background: none; border: 0; color: var(--avo-primary); font-weight: 600; font-size: .84rem; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.avo-adresblok__form[hidden] { display: none; }
.avo-adresblok__label { font-size: .86rem; margin: 0 0 10px; color: var(--avo-muted); }
.avo-adresblok__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.avo-adresblok__row input { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm); font-size: .85rem; background: var(--avo-card, var(--avo-surface)); color: var(--avo-ink); }
.avo-adresblok__row .avo-btn { grid-column: 1 / -1; width: 100%; justify-content: center; text-align: center; padding: 10px 14px; }
.avo-adresblok__status { margin: 0; font-size: .82rem; color: var(--avo-muted); line-height: 1.5; }
.avo-adresblok__status[hidden] { display: none; }
.avo-adresblok__status.is-error { color: var(--avo-danger); }

/* Verantwoordingsblok onder het filterblok: platte tint met een lijn erboven,
   geen kaart en geen schaduw. */
.avo-verantwoording { border-top: 1px solid var(--avo-rule); padding-top: 18px; }
.avo-verantwoording__title { margin: 0 0 10px; font-family: var(--avo-font-head); font-size: 1rem; color: var(--avo-ink); }
.avo-verantwoording__list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.avo-verantwoording__list li { font-size: .86rem; color: var(--avo-text); line-height: 1.5; padding-left: 14px; position: relative; }
.avo-verantwoording__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 1px; background: var(--avo-primary); }
.avo-verantwoording__link { font-size: .84rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.avo-filters__actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--avo-border); display: flex; flex-direction: column; gap: 10px; position: relative; }
.avo-filters__save, .avo-filters__share { background: var(--avo-card, var(--avo-surface)); border: 1.5px solid var(--avo-border); border-radius: var(--avo-radius-sm); padding: 10px 14px; font-weight: 700; font-size: .85rem; color: var(--avo-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.avo-filters__save:hover, .avo-filters__share:hover { border-color: var(--avo-primary); color: var(--avo-primary); }
.avo-filters__save-icon { font-size: 1rem; color: var(--avo-primary); }
.avo-filters__save.is-saved .avo-filters__save-icon { color: var(--avo-primary); }
.avo-filters__save.is-saved { border-color: var(--avo-primary); }
.avo-filters__sharebox { display: flex; gap: 6px; }
.avo-filters__sharebox[hidden] { display: none; }
.avo-filters__sharebox input { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--avo-border); border-radius: var(--avo-radius-sm); font-size: .78rem; color: var(--avo-muted); }
.avo-filters__sharebox button { flex: 0 0 auto; background: var(--avo-primary); color: var(--avo-on-primary); border: 0; border-radius: var(--avo-radius-sm); padding: 0 12px; font-weight: 700; font-size: .8rem; cursor: pointer; }

.avo-results__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px; }
.avo-results__left { display: flex; flex-direction: column; gap: 10px; flex: 1 1 240px; min-width: 0; }
.avo-results__heading { margin: 0 0 4px; }
.avo-results__count { margin: 0; color: var(--avo-muted); font-size: .92rem; }
.avo-results__toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avo-results__sort { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--avo-muted); margin-left: auto; }
.avo-results__sort select { padding: 9px 12px; border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm); background: var(--avo-card, var(--avo-surface)); color: var(--avo-ink); font-weight: 600; }
.avo-results__disclaimer { font-size: .82rem; color: var(--avo-muted); margin-top: 20px; }
.avo-no-results { padding: 32px 0; color: var(--avo-muted); }

/* Contractduur-schakelaar: een secundaire actie, dus een onderstreepte
   tekstlink en geen knop. */
.avo-contractduur-switch {
	background: none; border: 0; padding: 0; color: var(--avo-primary); font-weight: 600; font-size: .86rem;
	cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.avo-contractduur-switch[hidden] { display: none; }

/* Actieve filters als wegklikbare chips, links in de balk. */
.avo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.avo-chip--filter {
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--avo-tint-1, var(--avo-surface)); border: 1px solid var(--avo-rule); border-radius: var(--avo-radius-sm);
	padding: 5px 9px 5px 11px; font-size: .8rem; font-weight: 600; color: var(--avo-ink); cursor: pointer;
}
.avo-chip--filter:hover { border-color: var(--avo-primary); color: var(--avo-primary); }
.avo-chip--filter span { font-size: 1rem; line-height: 1; color: var(--avo-muted); }
.avo-chip--filter:hover span { color: var(--avo-primary); }

.avo-cards { display: flex; flex-direction: column; gap: 0; position: relative; transition: opacity .15s ease; }

/* Laadstaat tijdens een server-side belfilter: de vorige uitkomst blijft
   leesbaar staan, met een klein molentje rechtsboven. */
.avo-cards.is-loading { opacity: .5; pointer-events: none; }
.avo-cards.is-loading::after {
	content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
	border: 2px solid var(--avo-border); border-top-color: var(--avo-primary); border-radius: 50%;
	animation: avo-spin .7s linear infinite;
}
@keyframes avo-spin { to { transform: rotate(360deg); } }

/* De adresbanner is een direct kind van de tweekoloms grid. Zonder
   grid-column zou hij als eerste grid-item de sidebar en de lijst een cel
   opschuiven, waardoor de kaarten in de smalle kolom belanden. */
.avo-addr-banner { grid-column: 1 / -1; background: var(--avo-tint-1, var(--avo-surface)); border-left: 2px solid var(--avo-primary); padding: 14px 18px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.avo-addr-banner strong { color: var(--avo-ink); }
.avo-addr-banner span { color: var(--avo-muted); font-size: .9rem; }
.avo-addr-banner[hidden] { display: none; }

@media (max-width: 860px) {
	.avo-results { grid-template-columns: minmax(0, 1fr); }
	.avo-filters { position: static; display: none; }
	/* Mobiel: de filters zijn een volledig scherm-sheet met sticky voet, in
	   plaats van een eindeloze inline accordion. z-index boven de sticky
	   header, zodat de sheet niet half onder de site-kop verdwijnt. */
	.avo-filters.is-open {
		display: block;
		position: fixed; inset: 0; z-index: 300;
		border-radius: 0; border: 0; box-shadow: none;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 20px 20px 96px;
	}
	.avo-filters.is-open .avo-mfilters-foot { display: flex; }
	.avo-filters.is-open .avo-mfilters-sluit { display: block; }
	.avo-filters.is-open .avo-mfilters-chips:not([hidden]) { display: flex; }
	.avo-filters__mobtoggle { display: inline-flex; }
	/* Het verantwoordingsblok hoort bij de filterkolom en deelt de
	   Verfijnen-knop. .avo-filters.is-open wordt al door de bestaande
	   mobToggle-klik in avo-resultaten.js gezet; via de sibling-selector is
	   hier geen extra JS voor nodig. */
	.avo-verantwoording { display: none; }
	.avo-filters.is-open ~ .avo-verantwoording { display: block; }
	/* Het adresblok staat boven de filters en blijft op mobiel altijd
	   zichtbaar: na een adrescheck moet je kunnen zien voor welk adres het
	   overzicht geldt zonder eerst het filterpaneel te openen. */
	.avo-sidebar-col { gap: 20px; }
}

/* Mobiele filter-sheet: sticky voet met resultaatknop, sluitkruis in de kop en
   een rij chips met de actieve filters (per chip wisbaar). Alleen zichtbaar
   zolang de sheet open is, zie de media query hierboven. */
.avo-mfilters-foot { display: none; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; background: var(--avo-surface); border-top: 1px solid var(--avo-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--avo-shadow-2); }
.avo-mfilters-foot .avo-btn { flex: 1; text-align: center; }
.avo-mfilters-wis { background: none; border: 0; color: var(--avo-muted); font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.avo-mfilters-sluit { display: none; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--avo-muted); cursor: pointer; padding: 2px 6px; }
.avo-mfilters-chips { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.avo-mfilters-chips[hidden] { display: none; }
.avo-mfilters-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--avo-tint-1, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: 999px; padding: 6px 12px; font-size: .84rem; font-weight: 600; color: var(--avo-ink); cursor: pointer; }
.avo-mfilters-chip:hover { border-color: var(--avo-primary); }

/* =========================================================================
 * 2. Resultatenkaart (.avo-rcard)
 * ========================================================================= */
/* Redactionele vormtaal: geen losse kaartjes met schaduw, maar een doorlopende
   lijst waarin elke regel door een hairline van de volgende gescheiden wordt.
   Drie kolommen: logo, inhoud, prijs. */
.avo-rcard {
	position: relative; background: none; border-top: 1px solid var(--avo-border);
	padding: 26px 0 30px; display: grid; grid-template-columns: 132px minmax(0, 1fr) 232px; gap: 26px; align-items: center;
}
.avo-cards > .avo-rcard:first-child { border-top: 0; }
/* De redactiekeuze krijgt een merkstreep links, geen gekleurde kaart. */
.avo-rcard--top { border-left: 3px solid var(--avo-primary); padding-left: 20px; background: var(--avo-tint-1, var(--avo-surface)); }

.avo-rcard__rank { position: absolute; top: 6px; left: 0; font-family: var(--avo-font-head); font-weight: 700; font-size: .8rem; color: var(--avo-muted); }
.avo-rcard--top .avo-rcard__rank { left: 20px; }
/* Keuzelabel als hoekig merkvlak, niet als ronde pil. */
.avo-rcard__aanraderpill {
	position: absolute; top: 2px; left: 26px; z-index: 1;
	background: var(--avo-primary); color: var(--avo-on-primary); font-family: var(--avo-font-head);
	font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 2px; letter-spacing: .01em;
}
.avo-rcard--top .avo-rcard__aanraderpill { left: 46px; }

.avo-rcard__logo { display: grid; place-items: center start; }
.avo-rcard__logo img { width: 112px; height: 56px; object-fit: contain; object-position: left center; }
.avo-rcard__initials, .avo-aanrader__initials { display: grid; place-items: center; width: 56px; height: 56px; background: var(--avo-tint-2, var(--avo-surface)); font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-muted); font-size: 1.3rem; }

.avo-rcard__body { min-width: 0; }
.avo-rcard__name { margin: 0 0 8px; font-family: var(--avo-font-head); font-size: 1.12rem; font-weight: 700; color: var(--avo-ink); line-height: 1.3; }
.avo-rcard__name a { color: inherit; text-decoration: none; }
.avo-rcard__name a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Kenmerkenregel met een dunne onderlijn: looptijd, snelheid, zenders, cijfer. */
.avo-rcard__meta {
	display: flex; align-items: center; gap: 20px; row-gap: 6px; flex-wrap: wrap;
	color: var(--avo-muted); font-size: .86rem;
	padding-bottom: 12px; border-bottom: 1px solid var(--avo-border); margin-bottom: 12px;
}
.avo-rcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.avo-rcard__meta svg { color: var(--avo-primary); opacity: .8; flex: 0 0 auto; }
.avo-rcard__meta-score { color: var(--avo-ink); font-weight: 700; }
.avo-rcard__meta-score svg { opacity: 1; }

.avo-rcard__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.avo-rcard__benefits li { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--avo-text); }
.avo-rcard__benefits svg { flex: 0 0 15px; color: var(--avo-success); }
.avo-rcard__cashback { display: inline-block; margin-top: 10px; background: var(--avo-tint-2, var(--avo-surface)); color: var(--avo-accent-2); font-weight: 700; font-size: .78rem; padding: 4px 9px; border-radius: 2px; }

/* Prijsopbouw: actietarief groot, doorgestreepte normale prijs ernaast, en
   daaronder het eerstejaarsbedrag plus de prijs die daarna gaat gelden. */
.avo-rcard__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.avo-rcard__badge {
	display: inline-flex; align-items: center; gap: 6px; background: var(--avo-tint-2, var(--avo-surface)); color: var(--avo-accent-2);
	font-size: .74rem; font-weight: 700; padding: 4px 9px; border-radius: 2px; margin-bottom: 9px; max-width: 100%;
}
.avo-rcard__priceline { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.avo-rcard__price-old { color: var(--avo-muted); font-size: .86rem; text-decoration: line-through; }
.avo-rcard__bedrag { font-family: var(--avo-font-head); font-weight: 700; font-size: 1.9rem; color: var(--avo-ink); letter-spacing: -.01em; }
.avo-rcard__per { color: var(--avo-muted); font-size: .78rem; }
.avo-rcard__dash { width: 100%; max-width: 190px; border-top: 1px solid var(--avo-border); margin: 10px 0 8px; }
.avo-rcard__jaar { font-size: .92rem; font-weight: 700; color: var(--avo-ink); }
.avo-rcard__jaar span { color: var(--avo-muted); font-weight: 400; font-size: .78rem; }
.avo-rcard__daarna { font-size: .78rem; color: var(--avo-muted); margin-top: 4px; }
.avo-rcard__cta-btn { margin-top: 14px; width: 100%; max-width: 200px; text-align: center; justify-content: center; padding: 12px 20px; border-radius: var(--avo-radius-sm); font-size: .92rem; }
.avo-rcard__levertijd { font-size: .78rem; color: var(--avo-muted); margin-top: 8px; }

/* Twee secundaire acties onderaan de regel: allebei als tekstlink, links het
   vergelijkvinkje, rechts het opendraaien van de details. */
.avo-rcard__comparecb {
	grid-column: 1 / 2; margin-top: -6px;
	display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--avo-muted); cursor: pointer;
}
.avo-rcard__comparecb input { accent-color: var(--avo-primary); width: 14px; height: 14px; margin: 0; }
.avo-rcard__more {
	grid-column: 2 / 3; justify-self: start; margin-top: -6px;
	background: none; border: 0; padding: 0;
	font-size: .84rem; font-weight: 600; color: var(--avo-primary); cursor: pointer;
	text-decoration: underline; text-underline-offset: 3px;
	display: inline-flex; align-items: center; gap: 5px;
}
.avo-rcard__more-i { display: inline-block; transition: transform .15s; text-decoration: none; }
.avo-rcard__more.is-open .avo-rcard__more-i { transform: rotate(180deg); }

.avo-rcard__details { grid-column: 1 / -1; border-top: 1px solid var(--avo-border); padding-top: 14px; margin-top: 4px; }
.avo-detail-sam { color: var(--avo-muted); margin: 0 0 14px; }
.avo-dtabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--avo-border); }
.avo-dtab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 4px 10px; margin-right: 14px; font-weight: 700; font-size: .88rem; color: var(--avo-muted); cursor: pointer; }
.avo-dtab.is-active { color: var(--avo-primary); border-bottom-color: var(--avo-primary); }
.avo-dtab-panel[hidden] { display: none; }
.avo-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.avo-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--avo-border); font-size: .9rem; }
.avo-detail-row span { color: var(--avo-muted); }
.avo-detail-lines { margin: 0; padding-left: 16px; text-align: left; }
.avo-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.avo-chip { display: inline-block; background: var(--avo-tint-1, var(--avo-surface)); color: var(--avo-ink); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.avo-chip--korting { background: var(--avo-tint-3, var(--avo-surface)); color: var(--avo-success); font-weight: 700; }
.avo-detail-minpunten { margin-top: 12px; padding: 10px 14px; background: var(--avo-tint-2, var(--avo-surface)); border-radius: var(--avo-radius-sm); }
.avo-detail-minpunten span { display: block; font-weight: 700; font-size: .82rem; color: var(--avo-warning); margin-bottom: 4px; }
.avo-detail-minpunten ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--avo-text); }
.avo-detail-review { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--avo-primary); text-decoration: underline; text-underline-offset: 3px; }
/* Voordelen die niet op de regel zelf pasten. */
.avo-detail-benefits { margin: 0 0 16px; }
.avo-chip--combi { background: var(--avo-tint-2, var(--avo-surface)); color: var(--avo-accent-2); font-weight: 700; }
.avo-tv-inbegrepen { color: var(--avo-success); }

/* Doorgestreepte normale prijs plus actieprijs, boven de prijstabel in de
   uitklap. */
.avo-price-strike { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.avo-price-strike__old { text-decoration: line-through; color: var(--avo-muted); font-size: .9rem; }
.avo-price-strike__new { font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink); font-size: 1.1rem; }

/* Opbouw van het cijfer: per onderdeel een sterrenbalk en het gewicht. */
.avo-score-tab { display: flex; flex-direction: column; gap: 14px; }
.avo-score-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.avo-score-row__name { font-weight: 700; color: var(--avo-ink); font-size: .88rem; }
.avo-score-row__stars { position: relative; width: 90px; height: 6px; background: var(--avo-border); flex: 0 0 auto; }
.avo-score-row__stars-fill { position: absolute; inset: 0; background: var(--avo-accent-2); }
.avo-score-row__weight { width: 100%; height: 3px; background: var(--avo-border); overflow: hidden; }
.avo-score-row__weight span { display: block; height: 100%; background: var(--avo-primary); }
.avo-score-tab__total { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--avo-border); font-size: .85rem; color: var(--avo-text); line-height: 1.5; }
.avo-score-tab__total strong { color: var(--avo-ink); font-size: 1.1rem; font-family: var(--avo-font-head); }

/* Los bij te boeken opties, gegroepeerd per categorie. */
.avo-bijboeken { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--avo-border); }
.avo-bijboeken__title { font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink); margin: 0 0 10px; font-size: .95rem; }
.avo-bijboeken__cat { font-weight: 700; color: var(--avo-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 4px; }
.avo-bijboeken__cat:first-child { margin-top: 0; }

/* Volledige zenderlijst in de uitklap. */
.avo-tvz-allbtn { margin-top: 12px; }
.avo-tvz-allwrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--avo-border); display: flex; flex-direction: column; gap: 16px; }
.avo-tvz-allwrap__status { color: var(--avo-muted); font-size: .88rem; margin: 0; }
.avo-tvz-allwrap__status.is-error { color: var(--avo-danger); }
.avo-tvz-allcat__head { font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink); font-size: .9rem; margin: 0 0 10px; }
.avo-tvz-allcat__price { font-family: var(--avo-font-body); font-weight: 400; color: var(--avo-muted); }
.avo-tvz-allcat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.avo-tvz-chan { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--avo-text); }
.avo-tvz-chan img { width: 26px; height: 26px; object-fit: contain; border: 1px solid var(--avo-border); background: var(--avo-card, var(--avo-surface)); flex: 0 0 auto; }
.avo-tvz-chan__noimg { width: 26px; height: 26px; border: 1px solid var(--avo-border); background: var(--avo-tint-2, var(--avo-surface)); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--avo-muted); flex: 0 0 auto; }
.avo-tvz-chan__hd { font-style: normal; color: var(--avo-primary); font-weight: 700; font-size: .72rem; }

/* Secundaire knop in de uitklap: omlijnd, hoekig, geen vlak. */
.avo-btn--outline { background: none; border: 1px solid var(--avo-rule); color: var(--avo-ink); }
.avo-btn--outline:hover { background: none; border-color: var(--avo-primary); color: var(--avo-primary); transform: none; }

/* "Meer tonen" is een vervolgactie op de lijst, dus een tekstlink en geen
   tweede primaire knop naast de CTA's op de regels erboven. */
.avo-loadmore-wrap { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--avo-border); }
.avo-loadmore { background: none; border: 0; padding: 0; color: var(--avo-primary); font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
	/* Logo, inhoud en prijsblok krijgen elk een eigen volle-breedte rij: de
	   132/1fr/232-koloms van desktop passen niet op 375px. De twee
	   tekstlinkjes onderaan komen daaronder op één rij te staan. */
	/* Geen justify-items:start hier: dat geeft elk grid-item zijn eigen
	   inhoudsbreedte, waardoor de detailuitklap (tabelrijen met lange labels)
	   breder werd dan de kolom en de pagina horizontaal liet schuiven. De
	   items vullen dus de kolom, en alleen het logo staat links uitgelijnd. */
	.avo-rcard { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0 26px; }
	.avo-rcard > * { min-width: 0; max-width: 100%; }
	.avo-rcard__logo { justify-self: start; }
	.avo-rcard__comparecb, .avo-rcard__more { justify-self: start; }
	.avo-rcard--top { padding-left: 16px; }
	.avo-rcard__meta { gap: 14px; }
	.avo-rcard__price { align-items: flex-start; text-align: left; width: 100%; }
	.avo-rcard__priceline { justify-content: flex-start; }
	.avo-rcard__dash, .avo-rcard__cta-btn { width: 100%; max-width: none; }
	.avo-rcard__cta-btn { max-width: 260px; }
	.avo-rcard__comparecb, .avo-rcard__more { grid-column: 1 / -1; margin-top: 0; }
	.avo-detail-grid { grid-template-columns: minmax(0, 1fr); }
	.avo-dtabs { overflow-x: auto; }
	.avo-dtab { white-space: nowrap; }
}

/* =========================================================================
 * 3. Herocheck [avo_herocheck]
 * ========================================================================= */
.avo-herocheck { max-width: 420px; margin-inline: auto; }
.avo-herocheck__badge { text-align: center; background: var(--avo-accent); color: var(--avo-on-primary); font-weight: 700; padding: 8px 16px; border-radius: 999px; margin-bottom: -18px; position: relative; z-index: 2; width: fit-content; margin-inline: auto; }
.avo-herocheck__card { background: var(--avo-on-primary); color: var(--avo-ink); border-radius: var(--avo-app-radius); box-shadow: var(--avo-shadow-2); padding: 28px 24px 24px; }
.avo-herocheck__title { margin: 0 0 6px; font-size: 1.3rem; }
.avo-herocheck__sub { color: var(--avo-muted); margin: 0 0 18px; font-size: .92rem; }
.avo-herocheck__row { display: flex; gap: 10px; margin-bottom: 14px; }
.avo-herocheck__field { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.avo-herocheck__field--sm { flex: 0 0 110px; }
.avo-herocheck__field label { font-size: .78rem; font-weight: 700; color: var(--avo-muted); }
.avo-herocheck__field input { padding: 12px 14px; border: 1.5px solid var(--avo-border); border-radius: var(--avo-radius-sm); font-size: 1rem; }
.avo-herocheck__usps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.avo-herocheck__usps li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--avo-muted); }
.avo-herocheck__usps svg circle { fill: var(--avo-success); }
.avo-herocheck__usps svg path { stroke: var(--avo-on-primary); }

@media (max-width: 480px) {
	.avo-herocheck__row { flex-direction: column; }
	.avo-herocheck__field--sm { flex: 1 1 auto; }
}

/* =========================================================================
 * 4. Aanrader-kaart [avo_aanrader]
 * ========================================================================= */
.avo-aanrader { position: relative; background: var(--avo-card, var(--avo-surface)); border: 2px solid var(--avo-primary); border-radius: var(--avo-app-radius); padding: 24px; max-width: 640px; margin-inline: auto; }
.avo-aanrader__otto { position: absolute; top: -22px; left: -22px; }
@media (max-width: 600px) {
	.avo-aanrader__otto { width: 56px; height: auto; top: -16px; left: -12px; }
}
.avo-aanrader__label { display: inline-block; background: var(--avo-primary); color: var(--avo-on-primary); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.avo-aanrader__body { display: flex; align-items: center; gap: 18px; }
.avo-aanrader__logo { flex: 0 0 84px; width: 84px; height: 64px; border-radius: 12px; background: var(--avo-bg); border: 1px solid var(--avo-border); display: grid; place-items: center; overflow: hidden; padding: 8px; }
.avo-aanrader__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avo-aanrader__info { flex: 1; min-width: 0; }
.avo-aanrader__name { margin: 0 0 6px; }
.avo-aanrader__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--avo-muted); }
.avo-aanrader__score { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; color: var(--avo-on-primary); background: var(--avo-primary); }
.avo-aanrader__score--great { background: var(--avo-success); }
.avo-aanrader__score--good { background: var(--avo-primary); }
.avo-aanrader__score--ok { background: var(--avo-warning); }
.avo-aanrader__score--poor { background: var(--avo-danger); }
.avo-aanrader .avo-btn { margin-top: 18px; }

@media (max-width: 600px) {
	.avo-aanrader__body { flex-wrap: wrap; }
}

/* =========================================================================
 * 5. Prijstabel [avo_prijstabel]
 * ========================================================================= */
.avo-prijstabel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.avo-prijstabel-updated { font-size: .85rem; color: var(--avo-muted); font-weight: 600; }
.avo-prijstabel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.avo-ptab { background: var(--avo-bg); border: 1.5px solid var(--avo-border); border-radius: 999px; padding: 7px 16px; font-size: .85rem; font-weight: 700; cursor: pointer; color: var(--avo-ink); }
.avo-ptab.is-active { background: var(--avo-primary); border-color: var(--avo-primary); color: var(--avo-on-primary); }

.avo-table-scroll { overflow-x: auto; border: 1px solid var(--avo-border); border-radius: var(--avo-radius); }
.avo-table-scroll > table { overflow: visible; }
.avo-prijstabel { width: 100%; border-collapse: collapse; min-width: 640px; }
.avo-prijstabel th, .avo-prijstabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--avo-border); }
.avo-prijstabel thead th { color: var(--avo-muted); font-size: .85rem; }
/* De providercel is een gewone td met verticaal gecentreerde inhoud: een
   display:flex op de td zelf breekt de rijhoogtes van de tabel. De flex-lay-out
   zit daarom in een inner-span. */
.avo-prijstabel td { vertical-align: middle; }
.avo-ptable-provider { position: relative; }
.avo-ptable-provider-flex { display: flex; align-items: center; gap: 12px; }
/* De tabel-linkstijl moet de generieke prose-linkstijl overtroeven, anders
   krijgt de providernaam de blauwe onderstreepte tekstlinkopmaak. */
.avo-prijstabel .avo-ptable-provider-naam,
.avo-prose .avo-prijstabel .avo-ptable-provider-naam { color: var(--avo-ink); font-weight: 700; text-decoration: none; }
.avo-prijstabel .avo-ptable-provider-naam:hover { color: var(--avo-primary); text-decoration: none; }
.avo-ptable-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--avo-bg); border: 1px solid var(--avo-border); display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--avo-muted); }
.avo-ptable-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avo-ptable-row--best { background: var(--avo-tint-3, var(--avo-surface)); }
.avo-ptable-row--best td:first-child { position: relative; }
/* Beste-deal-badge gecentreerd boven de kolom, half over de rijrand heen. */
.avo-ptable-best-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--avo-accent-2); color: var(--avo-ink); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

@media (max-width: 600px) {
	.avo-prijstabel-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
 * 6. Reviewblok [avo_reviews]
 * ========================================================================= */
.avo-reviews__summary { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.avo-reviews__avg { font-size: 2.6rem; font-weight: 700; color: var(--avo-ink); line-height: 1; }
.avo-reviews__count { display: block; color: var(--avo-muted); font-size: .88rem; margin-top: 4px; }
.avo-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.avo-review-card { background: var(--avo-card, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-radius-sm); padding: 18px; }
.avo-review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.avo-review-card__text { margin: 0 0 10px; color: var(--avo-text); font-size: .92rem; }
.avo-review-card__date { color: var(--avo-muted); font-size: .78rem; }

.avo-stars { display: inline-flex; gap: 2px; --avo-star-size: 18px; }
.avo-star { width: var(--avo-star-size); height: var(--avo-star-size); fill: var(--avo-border); }
.avo-star.is-full, .avo-star.is-half { fill: var(--avo-accent); }

@media (max-width: 860px) { .avo-reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .avo-reviews__grid { grid-template-columns: minmax(0, 1fr); } .avo-reviews__summary { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* =========================================================================
 * 7. Stappen [avo_stappen]
 * ========================================================================= */
.avo-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.avo-stap {
	position: relative; background: var(--avo-card); border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius); padding: 22px; box-shadow: var(--avo-shadow-1);
}
.avo-stap__otto { position: absolute; top: -14px; right: -14px; }
/* De illustratie staat als een krantenfiguur boven de tekst: dunne kaderlijn,
   rechte hoeken, geen schaduw. */
.avo-stap__illu { border: 1px solid var(--avo-border); border-bottom: 2px solid var(--avo-rule-strong); background: var(--avo-card); padding: 14px 16px 10px; margin-bottom: 16px; }
.avo-stap__svg { display: block; width: 100%; height: auto; }
.avo-stap__label {
	display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--avo-cta); color: var(--avo-on-cta); font-family: var(--avo-font-head);
	font-weight: 800; font-size: .95rem; margin-bottom: 6px;
}
.avo-stap h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.35; }
.avo-stap p { margin: 0; color: var(--avo-text); font-size: .95rem; line-height: 1.65; }

@media (max-width: 860px) { .avo-stappen { grid-template-columns: minmax(0, 1fr); gap: 32px; } .avo-stap__illu { max-width: 320px; } }

/* =========================================================================
 * 8. Expertblok [avo_expert]
 * ========================================================================= */
.avo-expert { max-width: 720px; margin-inline: auto; text-align: center; padding: 32px 24px; background: var(--avo-tint-2, var(--avo-surface)); border-radius: var(--avo-app-radius); }
.avo-expert__eyebrow { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--avo-primary); margin-bottom: 10px; }
.avo-expert__quote { margin: 0 0 12px; font-size: 1.2rem; font-style: italic; color: var(--avo-ink); }
.avo-expert__naam { font-weight: 700; color: var(--avo-muted); font-size: .88rem; }

/* =========================================================================
 * 9. Logostrip [avo_logostrip]
 * ========================================================================= */
.avo-logostrip__kop { text-align: center; color: var(--avo-muted); font-weight: 700; margin-bottom: 16px; font-size: .9rem; }
.avo-logos-carousel { overflow: hidden; position: relative; }
.avo-logos-track { display: flex; align-items: center; gap: 48px; animation: avo-scroll 45s linear infinite; width: max-content; }
.avo-logos-track:hover { animation-play-state: paused; }
.avo-logos__item { flex: 0 0 auto; width: 140px; height: 44px; display: grid; place-items: center; }
.avo-logos__item img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: .7; transition: opacity .2s; }
.avo-logos__item:hover img { opacity: 1; }
.avo-logos__initials { font-weight: 700; color: var(--avo-muted); font-size: 1rem; opacity: .8; }
.avo-logos__item:hover .avo-logos__initials { opacity: 1; }
@keyframes avo-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================================================
 * 10. Widget [avo_widget]
 * ========================================================================= */
.avo-widget { background: var(--avo-card, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-app-radius); padding: 20px; max-width: 420px; }
.avo-widget__head { margin-bottom: 12px; }
.avo-widget__title { font-size: 1.1rem; }
.avo-field { margin-bottom: 16px; }
.avo-field__label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.avo-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.avo-pill-btn { background: var(--avo-bg); border: 1.5px solid var(--avo-border); border-radius: 999px; padding: 8px 14px; font-size: .84rem; font-weight: 700; cursor: pointer; color: var(--avo-ink); }
.avo-pill-btn[aria-pressed="true"] { background: var(--avo-primary); border-color: var(--avo-primary); color: var(--avo-on-primary); }
.avo-widget__note { margin: 12px 0 0; font-size: .78rem; color: var(--avo-muted); }

/* =========================================================================
 * 11. CTA-banner / top5 / vs
 * ========================================================================= */
.avo-cta-banner { background: var(--avo-primary); color: var(--avo-on-primary); border-radius: var(--avo-app-radius); padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.avo-cta-banner h3 { color: var(--avo-on-primary); margin: 0 0 4px; }
.avo-cta-banner p { margin: 0; color: var(--avo-on-primary-soft); }

.avo-top5 { border: 1px solid var(--avo-border); border-radius: var(--avo-app-radius); overflow: hidden; }
.avo-top5__head { background: var(--avo-primary); color: var(--avo-on-primary); font-weight: 700; padding: 14px 20px; }
.avo-top5__row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--avo-border); color: inherit; }
.avo-top5__row:first-of-type { border-top: 0; }
.avo-top5__rank { font-weight: 700; color: var(--avo-muted); width: 20px; }
.avo-top5__logo { flex: 0 0 48px; width: 48px; height: 40px; display: grid; place-items: center; overflow: hidden; }
.avo-top5__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avo-top5__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.avo-top5__name { font-weight: 700; }
.avo-top5__meta { font-size: .8rem; color: var(--avo-muted); }
.avo-top5__score { flex: 0 0 auto; font-weight: 700; padding: 4px 10px; border-radius: 8px; color: var(--avo-on-primary); background: var(--avo-primary); }
.avo-top5__score--great { background: var(--avo-success); }
.avo-top5__score--good { background: var(--avo-primary); }
.avo-top5__score--ok { background: var(--avo-warning); }
.avo-top5__score--poor { background: var(--avo-danger); }
.avo-top5__cta { flex: 0 0 auto; font-weight: 700; color: var(--avo-primary); }

.avo-vs { overflow-x: auto; }
.avo-vs__table { width: 100%; border-collapse: collapse; min-width: 480px; overflow: visible; }
.avo-vs__table th, .avo-vs__table td { padding: 12px 16px; border-bottom: 1px solid var(--avo-border); text-align: left; }
.avo-vs__table thead th { background: var(--avo-tint-1, var(--avo-surface)); }
.avo-vs__cta { font-weight: 700; color: var(--avo-primary); }
.avo-vs__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--avo-muted); }

/* Vergelijktabel op mobiel: 2 kolommen naast elkaar in beeld, labelkolom
   blijft plakken bij horizontaal scrollen, plus een veeg-hint erboven. */
@media (max-width: 600px) {
	.avo-vs__table { min-width: 0; }
	.avo-vs__table th, .avo-vs__table td { padding: 9px 8px; font-size: .82rem; }
	.avo-vs__table th:first-child,
	.avo-vs__table td:first-child { position: sticky; left: 0; background: var(--avo-surface); z-index: 1; min-width: 96px; max-width: 108px; box-shadow: 2px 0 0 var(--avo-border); overflow-wrap: break-word; word-break: break-word; hyphens: auto; overflow: hidden; }
	.avo-vs__table thead th:first-child { background: var(--avo-surface); }
	.avo-vs__hint { display: block; }
}

/* =========================================================================
 * 12. Archief- en detailkaarten (score-badges algemeen)
 * ========================================================================= */
.avo-grid { display: grid; gap: 20px; }
.avo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.avo-card { background: var(--avo-card, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-app-radius); padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .15s ease; }
a.avo-card:hover { transform: translateY(-3px); box-shadow: var(--avo-shadow-1); text-decoration: none; }
.avo-card-result:hover { border-color: var(--avo-primary); }
.avo-card__toprow { display: flex; align-items: center; gap: 12px; }
.avo-card__logowrap { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 10px; background: var(--avo-bg); display: grid; place-items: center; overflow: hidden; }
.avo-card__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.avo-card__icon { font-weight: 700; color: var(--avo-muted); }
.avo-card__titlewrap { flex: 1; min-width: 0; }
.avo-card__titlewrap h3 { margin: 0; font-size: 1.05rem; }
.avo-card__arrow { margin-top: auto; font-weight: 700; color: var(--avo-primary); }

.avo-score-badge { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--avo-on-primary); background: var(--avo-primary); }
.avo-score-badge--great { background: var(--avo-success); }
.avo-score-badge--good { background: var(--avo-primary); }
.avo-score-badge--ok { background: var(--avo-warning); }
.avo-score-badge--poor { background: var(--avo-danger); }

@media (max-width: 860px) { .avo-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .avo-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * 13. Single review-pagina
 * ========================================================================= */
.avo-review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 32px; }
/* min-width:0 overschrijft de automatische content-based minimumbreedte van een
 * grid-item. Zonder dit duwt de prijstabel (min-width 640px) de hele kolom en
 * dus de pagina breder dan de viewport op mobiel, ook al heeft de tabelwikkel
 * zelf overflow-x: auto. */
.avo-review-main { min-width: 0; }
.avo-review-grid > * { min-width: 0; }
.avo-review-main h1, .avo-review-main h2, .avo-review-main h3 { overflow-wrap: break-word; word-break: break-word; }
.avo-rev-header { margin-bottom: 20px; }
.avo-rev-header__title { margin: 0 0 16px; }
.avo-rev-header__row { display: flex; gap: 20px; align-items: center; }
.avo-rev-header__intro { min-width: 0; }
.avo-rev-header__logo { flex: 0 0 96px; width: 96px; height: 96px; border: 1px solid var(--avo-border); border-radius: 16px; background: var(--avo-card, var(--avo-surface)); display: grid; place-items: center; padding: 12px; overflow: hidden; }
.avo-rev-header__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avo-rev-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.avo-rev-score { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 700; color: var(--avo-on-primary); background: var(--avo-primary); }
.avo-rev-score--great { background: var(--avo-success); }
.avo-rev-score--good { background: var(--avo-primary); }
.avo-rev-score--ok { background: var(--avo-warning); }
.avo-rev-score--poor { background: var(--avo-danger); }
.avo-rev-score__label { color: var(--avo-muted); font-size: .85rem; }
.avo-rev-updated { color: var(--avo-muted); font-size: .85rem; margin: 0; }
.avo-rev-header__sub { margin: 10px 0 0; color: var(--avo-text); }
.avo-rev-pros { background: var(--avo-tint-1, var(--avo-surface)); border-radius: var(--avo-radius-sm); padding: 18px 22px; margin-bottom: 24px; }
.avo-rev-pros h2 { font-size: 1.1rem; margin: 0 0 10px; color: var(--avo-success); }
.avo-rev-pros ul { margin: 0; padding-left: 20px; }
.avo-rev-specs {
	margin-bottom: 24px; background: var(--avo-card); border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius); padding: 20px 22px;
}
.avo-rev-specs h2 { font-size: 1.1rem; margin-top: 0; }
.avo-rev-cta { text-align: center; background: var(--avo-tint-2, var(--avo-surface)); border-radius: var(--avo-app-radius); padding: 28px; }

@media (max-width: 600px) {
	.avo-rev-header__row { flex-direction: column; align-items: flex-start; }
	.avo-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
 * 14. Beste deals van vandaag [avo_topdeals]
 * ========================================================================= */
.avo-topdeals__pills { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; }
.avo-topdeals__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.avo-topdeals__grid[hidden] { display: none; }
.avo-topdeal { position: relative; background: var(--avo-card, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-app-radius); padding: 24px; box-shadow: var(--avo-shadow-1); display: flex; flex-direction: column; gap: 12px; }
.avo-topdeal__ribbon { position: absolute; top: -11px; left: 20px; background: var(--avo-accent-2); color: var(--avo-on-primary); font-weight: 700; font-size: .72rem; padding: 4px 12px; border-radius: 999px; }
.avo-topdeal__head { display: flex; align-items: center; justify-content: space-between; }
.avo-topdeal__logo { flex: 0 0 72px; width: 72px; height: 54px; border-radius: 10px; background: var(--avo-bg); border: 1px solid var(--avo-border); display: grid; place-items: center; overflow: hidden; padding: 8px; font-weight: 700; color: var(--avo-muted); }
.avo-topdeal__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.avo-topdeal__score { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--avo-tint-3, var(--avo-surface)); color: var(--avo-success); font-weight: 700; font-size: .92rem; }
.avo-topdeal__score--good { color: var(--avo-primary); }
.avo-topdeal__score--ok { color: var(--avo-warning); }
.avo-topdeal__score--poor { color: var(--avo-danger); }
.avo-topdeal__naam { margin: 0; font-size: 1.1rem; }
.avo-topdeal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.avo-topdeal__prijs { margin-top: auto; }
.avo-topdeal__prijs strong { font-size: 1.8rem; font-family: var(--avo-font-head); color: var(--avo-ink); }
.avo-topdeal__prijs span { color: var(--avo-muted); font-size: .9rem; }

@media (max-width: 860px) { .avo-topdeals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .avo-topdeals__grid { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
 * 15. Reviewbalk [avo_reviewbalk]
 * ========================================================================= */
.avo-reviewbalk { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 28px 20px; margin-top: 36px; border-top: 1px solid var(--avo-border); text-align: center; }
.avo-reviewbalk__tekst { font-weight: 600; color: var(--avo-text); }
.avo-reviewbalk__badge { display: inline-flex; align-items: baseline; gap: 2px; background: var(--avo-primary); color: var(--avo-on-primary); font-family: var(--avo-font-head); font-weight: 700; font-size: 1.3rem; padding: 6px 14px; border-radius: var(--avo-radius-sm); }
.avo-reviewbalk__badge small { font-size: .7rem; font-weight: 600; opacity: .8; }
.avo-reviewbalk__count { color: var(--avo-muted); font-size: .88rem; }

/* =========================================================================
 * 12. Datablok-schil, duel [avo_duel] en dealsectie
 * ========================================================================= */
.avo-datablok { background: var(--avo-card, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); box-shadow: var(--avo-shadow-1); padding: 28px; margin: 1.6em 0; }
.avo-datablok__foot { margin: 14px 0 0; font-size: .85rem; color: var(--avo-muted); font-weight: 600; text-align: center; }
/* Verbeterpunt 71: bijschrift boven de scrollcontainer, zodat het op smalle
   schermen niet met de brede tabel meeschuift. */
.avo-datablok__caption { margin: 0 0 10px; font-size: .9rem; color: var(--avo-muted); }

.avo-duel__head { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; }
.avo-duel__provider { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink); text-align: center; }
.avo-duel__provider img { height: 34px; width: auto; max-width: 120px; object-fit: contain; }
.avo-duel__vs { font-family: var(--avo-font-body); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--avo-on-primary); background: var(--avo-primary); border-radius: 999px; padding: 6px 12px; flex-shrink: 0; }
.avo-duel__table { width: 100%; border-collapse: collapse; }
.avo-duel__table th, .avo-duel__table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--avo-border); }
.avo-duel__table thead th:not(:first-child) { font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink); }
.avo-duel__table tbody th { font-weight: 600; color: var(--avo-muted); font-size: .92rem; }
.avo-duel__table tbody td { font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink); }
.avo-duel__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; justify-content: center; }
.avo-duel__ctas .avo-btn { flex: 1 1 200px; text-align: center; justify-content: center; }

.avo-deal .avo-deal-blok { margin: 0; background: var(--avo-tint-4); border-color: var(--avo-accent-2); }
.avo-deal-blok h2 { margin-top: 0; }
.avo-deal-blok__grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 16px; }
.avo-deal-blok__actie { font-family: var(--avo-font-head); font-weight: 700; font-size: 2.1rem; color: var(--avo-ink); }
.avo-deal-blok__actie small { font-family: var(--avo-font-body); font-weight: 600; font-size: .95rem; color: var(--avo-muted); }
.avo-deal-blok__daarna { font-size: .92rem; color: var(--avo-muted); font-weight: 600; }
.avo-deal-blok__info { width: 100%; }
.avo-deal-blok__pakket { margin: 0 0 4px; font-weight: 700; color: var(--avo-ink); }
.avo-deal-blok__looptijd { margin: 0; font-size: .9rem; color: var(--avo-warning); font-weight: 600; }
.avo-deal-blok__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.avo-deal-blok__vergelijk { font-weight: 600; color: var(--avo-primary); }
.avo-deal-blok__vergelijk:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.avo-datablok { padding: 20px 16px; }
	.avo-duel__head { gap: 10px; }
	.avo-duel__provider img { height: 26px; }
}

/* =========================================================================
 * 13. Aanbod-tabel [avo_provider_aanbod]: extra rij-onderdelen
 * ========================================================================= */
.avo-ptable-provider { position: relative; }
.avo-ptable-provider-info { display: flex; flex-direction: column; min-width: 0; }
.avo-ptable-provider-naam { font-weight: 700; color: var(--avo-ink); text-decoration: none; }
.avo-ptable-provider-naam:hover { color: var(--avo-primary); }
.avo-ptable-product { color: var(--avo-muted); font-weight: 500; font-size: 13px; text-decoration: none; }
.avo-ptable-product:hover { color: var(--avo-primary); text-decoration: underline; }
.avo-ptable-best-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--avo-success); color: var(--avo-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.avo-prijstabel-foot { margin: 14px 0 0; text-align: center; }
.avo-prijstabel-foot a { font-weight: 700; color: var(--avo-primary); }

/* =========================================================================
 * 14. Tool-kaart [avo_welke_aanbieder]
 * ========================================================================= */
.avo-tool { background: var(--avo-surface); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); padding: 24px; margin: 18px 0; }
.avo-tool__privacy { color: var(--avo-muted); font-size: .88rem; margin: 10px 0 0; }
.avo-tool__result { margin-top: 14px; }
.avo-tool__hit { font-size: 1.15rem; color: var(--avo-ink); }

/* =========================================================================
 * 15. Social proof [popups linksonder]
 * ========================================================================= */
.avo-sp { position: fixed; left: 18px; bottom: 18px; z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: 360px; background: var(--avo-surface); border: 1px solid var(--avo-border); border-radius: 16px; box-shadow: var(--avo-shadow-2); padding: 12px 34px 12px 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.avo-sp.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.avo-sp__tile { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--avo-tint-1); }
.avo-sp__tile svg, .avo-sp__tile img { width: 100%; height: 100%; display: block; object-fit: contain; }
.avo-sp__tile img { padding: 8px; box-sizing: border-box; }
.avo-sp__cijfer { font-family: var(--avo-font-head); font-weight: 700; font-size: 1.25rem; color: var(--avo-primary); }
.avo-sp__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .9rem; color: var(--avo-text); }
.avo-sp__kop strong { color: var(--avo-primary); }
.avo-sp__regel { color: var(--avo-ink); }
.avo-sp__voet { display: flex; align-items: center; gap: 4px; color: var(--avo-muted); font-size: .78rem; margin-top: 3px; }
.avo-sp__voet svg { color: var(--avo-success); }
.avo-sp__sluit { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: var(--avo-muted); font-size: 1.1rem; cursor: pointer; padding: 2px; }
.avo-sp__sluit:hover { color: var(--avo-ink); }
/* Kaart-tegel: kleuren hier, zodat de JS geen hexwaarden hoeft te schrijven. */
.avo-sp__map-bg { fill: var(--avo-tint-1); }
.avo-sp__map-block { fill: var(--avo-tint-3); }
.avo-sp__map-road { stroke: var(--avo-surface); }
.avo-sp__map-pin { fill: var(--avo-accent); }
.avo-sp__map-pin-dot { fill: var(--avo-surface); }

@media (max-width: 600px) {
	.avo-sp { left: 10px; right: 10px; max-width: none; bottom: 10px; }
}

/* =========================================================================
   Reviewpagina: pluspunten/minpunten, gebruikersreviews en reviewformulier.
   Merkstijl allesin1vergelijken.org: rustige kaders, linkerrand als
   "verantwoording"-signaal, geen felle vlakken.
   ========================================================================= */
.avo-rev-section { margin: 40px 0; }
.avo-rev-section > h2 { font-family: var(--avo-font-head); }

.avo-rev-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 28px 0;
}
.avo-rev-pros, .avo-rev-cons {
	background: var(--avo-card);
	border: 1px solid var(--avo-border);
	border-left: 3px solid var(--avo-primary);
	border-radius: 0 var(--avo-radius) var(--avo-radius) 0;
	padding: 18px 22px;
}
.avo-rev-cons { border-left-color: var(--avo-badge); }
.avo-rev-pros h2, .avo-rev-cons h2 { font-size: 1.05rem; margin: 0 0 10px; }
.avo-rev-pros ul, .avo-rev-cons ul { list-style: none; margin: 0; padding: 0; }
.avo-rev-pros li, .avo-rev-cons li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 8px;
	font-size: .96rem;
}
.avo-rev-icon { flex: 0 0 auto; font-weight: 700; line-height: 1.6; }
.avo-rev-icon--yes { color: var(--avo-accent); }
.avo-rev-icon--no { color: var(--avo-badge); }

.avo-rev-reviews__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 26px;
	align-items: start;
}
.avo-rev-list { display: grid; gap: 14px; }
.avo-rev-item {
	background: var(--avo-card);
	border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius);
	padding: 16px 18px;
}
.avo-rev-item__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.avo-rev-item__avatar {
	width: 36px; height: 36px; flex: 0 0 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--avo-tint-1);
	color: var(--avo-primary);
	border-radius: 50%;
	font-weight: 700;
	font-family: var(--avo-font-head);
}
.avo-rev-item__who { display: flex; flex-direction: column; line-height: 1.3; }
.avo-rev-item__who strong { font-size: .95rem; color: var(--avo-ink); }
.avo-rev-item__head time { margin-left: auto; font-size: .8rem; color: var(--avo-muted); }
.avo-rev-item__text { margin: 0; font-size: .95rem; }
.avo-rev-loadmore {
	margin-top: 16px;
	background: none;
	border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius-sm);
	padding: 10px 18px;
	font: inherit;
	font-size: .92rem;
	color: var(--avo-primary);
	cursor: pointer;
}
.avo-rev-loadmore:hover { background: var(--avo-tint-1); }
.avo-rev-empty {
	background: var(--avo-tint-3);
	border-radius: var(--avo-radius);
	padding: 20px;
}

.avo-rev-summary {
	background: var(--avo-tint-1);
	border-left: 3px solid var(--avo-primary);
	border-radius: 0 var(--avo-radius) var(--avo-radius) 0;
	padding: 20px;
	text-align: center;
	margin-bottom: 14px;
}
.avo-rev-summary__avg {
	display: block;
	font-family: var(--avo-font-head);
	font-size: 2.6rem;
	font-weight: 700;
	color: var(--avo-primary-dark);
	line-height: 1.1;
}
.avo-rev-summary__avg small { font-size: 1rem; color: var(--avo-muted); font-weight: 500; }
.avo-rev-summary__count { display: block; font-size: .85rem; color: var(--avo-muted); margin-top: 6px; }
.avo-rev-summary__subs { display: grid; gap: 6px; margin-top: 14px; text-align: left; }
.avo-rev-summary__sub { display: flex; justify-content: space-between; font-size: .88rem; }
.avo-rev-summary__sub-val { font-weight: 700; color: var(--avo-ink); }

/* Sitereviewblok + reviewformulier (contactpagina). */
.avo-siterev__grid {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}
.avo-siterev__score {
	background: var(--avo-tint-1);
	border-left: 3px solid var(--avo-primary);
	border-radius: 0 var(--avo-radius) var(--avo-radius) 0;
	padding: 22px;
	text-align: center;
}
.avo-siterev__kop { margin: 0 0 6px; font-size: 1rem; font-family: var(--avo-font-head); }
.avo-siterev__cijfer {
	display: block;
	font-family: var(--avo-font-head);
	font-size: 2.8rem;
	font-weight: 700;
	color: var(--avo-primary-dark);
	line-height: 1.1;
}
.avo-siterev__count { font-size: .86rem; color: var(--avo-muted); }
.avo-siterev__toggle { margin-top: 14px; text-align: left; }
.avo-siterev__knop { display: inline-block; cursor: pointer; list-style: none; }
.avo-siterev__toggle summary::-webkit-details-marker { display: none; }
.avo-siterev__lijst { display: grid; gap: 14px; }
.avo-siterev__card {
	background: var(--avo-card);
	border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius);
	padding: 16px 18px;
}
.avo-siterev__cardkop { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.avo-siterev__wie { display: flex; flex-direction: column; line-height: 1.3; }
.avo-siterev__cardkop time { margin-left: auto; font-size: .8rem; color: var(--avo-muted); }
.avo-siterev__tekst { margin: 0; font-size: .95rem; }
.avo-review-card__avatar {
	width: 36px; height: 36px; flex: 0 0 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--avo-tint-2);
	color: var(--avo-badge);
	border-radius: 50%;
	font-weight: 700;
	font-family: var(--avo-font-head);
}
.avo-rev-form { margin-top: 14px; display: grid; gap: 12px; }
.avo-rev-form__row { display: grid; gap: 5px; }
.avo-rev-form__row label { font-size: .85rem; font-weight: 700; color: var(--avo-ink); }
.avo-rev-form input[type="text"], .avo-rev-form textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius-sm);
	background: var(--avo-card);
	font: inherit;
	font-size: .93rem;
}
.avo-rev-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.avo-rev-form__note { font-size: .8rem; color: var(--avo-muted); margin: 0; }
.avo-rev-form__context { font-size: .9rem; margin: 0; }
.avo-rev-scorepicker { display: flex; flex-wrap: wrap; gap: 5px; }
.avo-rev-scorepicker input { position: absolute; opacity: 0; pointer-events: none; }
.avo-rev-scorepicker label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border: 1px solid var(--avo-border);
	border-radius: var(--avo-radius-sm);
	background: var(--avo-card);
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
}
.avo-rev-scorepicker input:checked + label {
	background: var(--avo-primary);
	border-color: var(--avo-primary);
	color: var(--avo-on-primary);
}
.avo-rev-scorepicker input:focus-visible + label { outline: 2px solid var(--avo-primary); outline-offset: 2px; }
.avo-rev-melding, .avo-rev-notice {
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: var(--avo-radius-sm);
	font-size: .9rem;
	text-align: left;
}
.avo-rev-melding--ok, .avo-rev-notice--ok { background: var(--avo-tint-1); border-left: 3px solid var(--avo-success); }
.avo-rev-melding--fout, .avo-rev-notice--error { background: var(--avo-tint-2); border-left: 3px solid var(--avo-danger); }

@media (max-width: 860px) {
	.avo-rev-reviews__grid { grid-template-columns: minmax(0, 1fr); }
	.avo-rev-reviews__col--score { order: -1; }
	.avo-siterev__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.avo-rev-proscons { grid-template-columns: minmax(0, 1fr); }
}

/* Knopkleur binnen .avo-app: de generieke ".avo-app a"-regel heeft een hogere
   specificiteit dan ".avo-btn--primary" en kleurde knoptekst groen op groen.
   Deze regels zetten de knopkleuren terug. */
.avo-app a.avo-btn, .avo-app a.avo-btn-cta, .avo-app a.avo-btn-submit { color: var(--avo-on-primary); }
.avo-app a.avo-btn--accent { color: var(--avo-ink); }
.avo-app a.avo-btn--ghost, .avo-app a.avo-btn--outline { color: var(--avo-ink); }
.avo-app a.avo-btn--ghost:hover, .avo-app a.avo-btn--outline:hover { color: var(--avo-primary); }

/* Logostrip: leveranciers-SVG's hebben lang niet altijd een bruikbare
   intrinsieke verhouding, waardoor max-height ze niet inperkte en ze door de
   strip heen liepen. Vaste hoogte plus object-fit houdt ze binnen het vak. */
.avo-logos__item img { width: 100%; height: 44px; max-height: 44px; object-fit: contain; }


/* =========================================================================
 * Vergelijk naast elkaar (pilotpariteit de referentie-implementatie): vinkje op de
 * kaart, vaste balk onderin met chips, overlay met de vergelijktabel.
 * Kleuren via var(--avo-*), geen hex. Breakpoint 600px, zoals de rest.
 * ========================================================================= */

/* Vinkje op de resultaatkaart, onder de CTA-knop in de prijskolom. */
.avo-rcard__comparecb {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
	font-size: .78rem; font-weight: 600; color: var(--avo-muted); cursor: pointer;
}
.avo-rcard__comparecb { max-width: 100%; min-width: 0; }
.avo-rcard__comparecb input { accent-color: var(--avo-primary); width: 14px; height: 14px; margin: 0; flex: 0 0 auto; }
.avo-rcard__comparecb:hover { color: var(--avo-primary); }

/* Balk onderin met de gekozen pakketten. Blijft onder de mobiele
   filter-sheet (z-index 300/301), zodat de sheet hem netjes afdekt. */
.avo-comparebar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	background: var(--avo-card, var(--avo-surface)); border-top: 1px solid var(--avo-border); box-shadow: var(--avo-shadow-2);
	padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.avo-comparebar[hidden] { display: none; }
.avo-comparebar__items { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.avo-comparebar__item {
	display: inline-flex; align-items: center; gap: 6px; background: var(--avo-tint-1, var(--avo-surface)); border: 1px solid var(--avo-border);
	border-radius: 999px; padding: 5px 8px 5px 12px; font-size: .82rem; font-weight: 600; color: var(--avo-ink); max-width: 220px;
}
.avo-comparebar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avo-comparebar__item button { flex: 0 0 auto; background: none; border: 0; color: var(--avo-muted); font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px; }
.avo-comparebar__item button:hover { color: var(--avo-danger, var(--avo-primary)); }
.avo-comparebar__status { flex: 0 0 100%; margin: 0; font-size: .78rem; color: var(--avo-muted); order: 3; }
.avo-comparebar__status[hidden] { display: none; }
.avo-comparebar__actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.avo-comparebar__clear { background: none; border: 0; color: var(--avo-muted); font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.avo-comparebar__clear:hover { color: var(--avo-primary); }

/* Overlay met de vergelijktabel; hergebruikt de .avo-vs__table-opmaak. */
.avo-compareoverlay { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.avo-compareoverlay[hidden] { display: none; }
.avo-compareoverlay__panel {
	background: var(--avo-card, var(--avo-surface)); border-radius: var(--avo-app-radius, var(--avo-radius)) var(--avo-app-radius, var(--avo-radius)) 0 0;
	width: 100%; max-width: var(--avo-container, 1120px); max-height: 88vh; overflow-y: auto; padding: 28px 24px; position: relative;
}
.avo-compareoverlay__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--avo-muted); cursor: pointer; padding: 4px 8px; }
.avo-compareoverlay__close:hover { color: var(--avo-ink); }
.avo-compareoverlay__body h2 { margin: 0 28px 16px 0; font-size: 1.2rem; }
.avo-compareoverlay__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--avo-muted); }
@media (min-width: 601px) {
	.avo-compareoverlay { align-items: center; padding: 24px; }
	.avo-compareoverlay__panel { border-radius: var(--avo-app-radius, var(--avo-radius)); }
}
@media (max-width: 600px) {
	.avo-compareoverlay__panel { padding: 22px 16px; }
	.avo-compareoverlay__body h2 { font-size: 1.05rem; }
	.avo-compareoverlay__hint { display: block; }
	/* Chips in 1 scrollende rij, acties eronder over de volle breedte. */
	.avo-comparebar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
	.avo-comparebar__items { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
	.avo-comparebar__item { flex: 0 0 auto; }
	.avo-comparebar__actions { justify-content: space-between; width: 100%; }
	.avo-comparebar__actions .avo-btn { flex: 1 1 auto; text-align: center; margin-left: 10px; }
	.avo-comparebar__status { order: 0; }
}

/* =========================================================================
 * Snelheidsmeting [avo_speedtest] (verbeterpunt 63)
 *
 * Vormtaal van deze gids: rechte hoeken, dunne lijnen, geen schaduw en geen
 * gevulde kleurvlakken. De meter is een open ring met een dunne boog, geen
 * dashboardnaald. Breakpoints 480 / 600 / 860, zoals de rest van dit bestand.
 * ========================================================================= */
.avo-speedtest { margin-top: 28px; }
.avo-speedtest__tool {
  border: 1px solid var(--avo-border); border-top: 3px solid var(--avo-rule-strong);
  background: var(--avo-card); padding: 40px 32px 30px; text-align: center;
}
.avo-speedtest__meter { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; }
.avo-speedtest__ring { width: 100%; height: 100%; display: block; }
.avo-speedtest__track { fill: none; stroke: var(--avo-border); stroke-width: 6; }
.avo-speedtest__arc {
  fill: none; stroke: var(--avo-primary); stroke-width: 6; stroke-linecap: butt;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  stroke-dasharray: 540.4; stroke-dashoffset: 540.4; transition: stroke-dashoffset .35s linear;
}
.avo-speedtest__readout {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.avo-speedtest__value { font-family: var(--avo-font-head); font-weight: 700; font-size: clamp(2rem, 6vw, 2.6rem); color: var(--avo-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.avo-speedtest__unit { font-size: .82rem; color: var(--avo-muted); }
.avo-speedtest__btn { margin-top: 26px; min-width: 240px; }
.avo-speedtest__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 30px; border-top: 1px solid var(--avo-rule); }
.avo-speedtest__resbox {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px 8px; border-right: 1px solid var(--avo-border);
}
.avo-speedtest__resbox:last-child { border-right: 0; }
.avo-speedtest__reslabel { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--avo-muted); }
.avo-speedtest__resvalue { font-family: var(--avo-font-head); font-weight: 700; font-size: 1.45rem; color: var(--avo-ink); font-variant-numeric: tabular-nums; }
.avo-speedtest__resunit { font-size: .74rem; color: var(--avo-muted); }
.avo-speedtest__error { margin-top: 22px; border-left: 3px solid var(--avo-accent-2); padding: 12px 16px; text-align: left; background: var(--avo-tint-2); }
.avo-speedtest__error p { margin: 0 0 12px; color: var(--avo-text); font-size: .92rem; }
.avo-speedtest__privacy { margin: 24px auto 0; max-width: 62ch; font-size: .84rem; line-height: 1.6; color: var(--avo-muted); text-align: left; }
.avo-speedtest__duiding, .avo-speedtest__cta {
  margin-top: 24px; border: 1px solid var(--avo-border); background: var(--avo-tint-1); padding: 26px 28px;
}
.avo-speedtest__duiding h2, .avo-speedtest__cta h2 { margin: 0 0 10px; font-size: 1.2rem; }
.avo-speedtest__duiding p { margin: 0; color: var(--avo-text); }
.avo-speedtest__cta p { margin: 0 0 18px; color: var(--avo-text); }
.avo-speedtest__cta .avo-herocheck__row { margin-bottom: 0; }
.avo-speedtest__seo { margin-top: 52px; }

@media (max-width: 600px) {
  .avo-speedtest__tool { padding: 30px 18px 24px; }
  .avo-speedtest__btn { width: 100%; min-width: 0; }
  .avo-speedtest__duiding, .avo-speedtest__cta { padding: 20px 16px; }
}
@media (max-width: 480px) {
  .avo-speedtest__results { grid-template-columns: minmax(0, 1fr); }
  .avo-speedtest__resbox { border-right: 0; border-bottom: 1px solid var(--avo-border); flex-direction: row; justify-content: space-between; padding: 12px 4px; }
  .avo-speedtest__resbox:last-child { border-bottom: 0; }
  .avo-speedtest__resvalue { font-size: 1.15rem; }
}

/* Verbeterpunt 54: scorekaart per onderdeel op de reviewpagina. Vormtaal van
   deze gids: een naam, een dunne meetbalk en het cijfer op een lijn, geen
   kaart eromheen. */
.avo-rev-subscores__lead { margin: 0 0 18px; color: var(--avo-text); max-width: 62ch; }
.avo-rev-subscores .avo-score-tab { gap: 0; border-top: 1px solid var(--avo-rule); }
.avo-score-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 140px 46px; align-items: center;
  gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--avo-rule);
}
.avo-score-row__bar { display: block; height: 4px; background: var(--avo-border); }
.avo-score-row__fill { display: block; height: 100%; background: var(--avo-primary); }
.avo-score-row__cijfer {
  font-family: var(--avo-font-head); font-weight: 700; color: var(--avo-ink);
  text-align: right; font-variant-numeric: tabular-nums;
}
.avo-rev-subscores .avo-btn { margin-top: 20px; }

/* Verbeterpunt 41: redactionele secties per aanbieder (techniek, tv, zenders). */
.avo-rev-uitleg p { max-width: 68ch; }
.avo-rev-uitleg .avo-table-scroll { margin: 18px 0; }
.avo-rev-uitleg__noot { font-size: .88rem; color: var(--avo-muted); }

@media (max-width: 600px) {
  .avo-score-row { grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; }
  .avo-score-row__bar { grid-column: 1 / -1; }
}

/* =========================================================================
 * 39. Otto-momenten in de vergelijker (sweep vriendelijk merkbeeld)
 * ========================================================================= */
.avo-otto-status { display: flex; align-items: center; gap: 12px; background: var(--avo-tint-1); border-radius: var(--avo-radius-sm); padding: 10px 14px; font-weight: 700; }
.avo-otto-status svg { flex: 0 0 auto; width: 56px; height: auto; }
.avo-no-results { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 0; }
.avo-no-results p { margin: 0; color: var(--avo-muted); }

.avo-rev-cta__sub { margin: 6px auto 16px; max-width: 520px; color: var(--avo-muted); }
.avo-rev-cta__knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.avo-rev-cta .avo-btn--ghost { background: var(--avo-card); color: var(--avo-primary); border: 2px solid var(--avo-primary); box-shadow: none; }
/* Provider-check: "{naam} check" boven de reviewtekst. */
.avo-rev-check { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: center; margin: 28px 0 32px; padding: 28px; background: var(--avo-tint-1, var(--avo-surface)); border: 1px solid var(--avo-border); border-radius: var(--avo-app-radius); scroll-margin-top: 90px; }
.avo-rev-check__tekst h2 { margin: 6px 0 10px; }
.avo-rev-check__tekst p { margin: 0 0 14px; }
.avo-rev-check__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.avo-rev-check__usps li { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; }
.avo-rev-check__usps svg { flex: 0 0 18px; color: var(--avo-accent-2, var(--avo-primary)); margin-top: 2px; }
.avo-rev-check .avo-herocheck { max-width: none; }
.avo-rev-check .avo-herocheck__row > * { flex: 1 1 0; min-width: 0; }
.avo-rev-check .avo-herocheck__row input { width: 100%; }
@media (max-width: 860px) { .avo-rev-check { grid-template-columns: minmax(0, 1fr); padding: 20px; } }

/* Mobiele polish (sweep 22-09): prijstabel scrollt zijwaarts, dus cellen
   niet per woord laten breken (gaf rijen van 188px hoog op 390px). */
@media (max-width: 860px) {
  .avo-prijstabel td, .avo-prijstabel th { white-space: nowrap; }
  .avo-prijstabel td.avo-ptable-provider { white-space: normal; min-width: 180px; }
}


/* Adrescheck zichtbaar laten laden (23-09): spinner in de knop bij verzenden,
   laadpil in het adresblok en teller met spinner boven de gedimde kaarten,
   daarna kort een groene bevestiging op het gevonden adres. */
.avo-spin { display: inline-block; width: 16px; height: 16px; border: 3px solid var(--avo-on-primary-soft); border-top-color: var(--avo-on-primary); border-radius: 50%; animation: avo-spin .7s linear infinite; flex: 0 0 auto; }
.avo-btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: .9; }
.avo-gegevens__status.is-laden, .avo-adresblok__status.is-laden { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--avo-radius-sm); background: var(--avo-tint-1, var(--avo-surface)); color: var(--avo-ink); font-weight: 600; font-size: .88rem; }
.avo-gegevens__status.is-laden::before, .avo-adresblok__status.is-laden::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 3px solid var(--avo-border); border-top-color: var(--avo-primary); border-radius: 50%; animation: avo-spin .7s linear infinite; flex: 0 0 auto; }
.avo-results__count.is-laden { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--avo-ink); }
.avo-results__count.is-laden::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 3px solid var(--avo-border); border-top-color: var(--avo-primary); border-radius: 50%; animation: avo-spin .7s linear infinite; flex: 0 0 auto; }
.avo-results__count.is-laden::after { content: "..."; }
.avo-cards.is-loading { opacity: .4; }
.is-adres-gevonden .avo-gegevens__ingevuld, .is-adres-gevonden .avo-adresblok__ingevuld { animation: avo-adres-ok 2.4s ease-out; border-radius: var(--avo-radius-sm); }
@keyframes avo-adres-ok { 0% { box-shadow: 0 0 0 0 var(--avo-success); } 25% { box-shadow: 0 0 0 4px var(--avo-success); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* =========================================================================
 * Providerpagina: zijkolom (05-10).
 *
 * De reviewtekst stond als smalle kolom in een leeg vlak zonder zijkolom.
 * Zelfde stramien als het artikel: inhoud links, 300px zijkolom rechts met
 * bovenin het sticky-blok een providerkaart (score, adrescheck, knop naar
 * de provider). Onder 860px valt de zijkolom onder de inhoud.
 * ========================================================================= */
.avo-review-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; max-width: none; margin-inline: 0; }
.avo-review-main .avo-prose { max-width: 780px; margin-inline: 0; }
.avo-sidebar__provcta { background: var(--avo-card); border: 1px solid var(--avo-border); border-radius: var(--avo-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.avo-sidebar__provcta-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.avo-sidebar__provcta-logo { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; padding: 6px; border: 1px solid var(--avo-border); border-radius: 10px; background: var(--avo-card); }
.avo-sidebar__provcta-logo img, .avo-sidebar__provcta-logo svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.avo-sidebar__provcta-naam { flex: 1; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.avo-sidebar__provcta .avo-btn { width: 100%; justify-content: center; }
.avo-sidebar__provcta-sub { font-size: .8rem; color: var(--avo-muted); text-align: center; }
@media (max-width: 860px) {
	.avo-review-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.avo-review-main .avo-prose { max-width: none; }
}

/* =========================================================================
 * Aanbiedersoverzicht: rijke kaarten (05-10).
 *
 * De kaart toonde alleen logo, score en vanafprijs in een leeg vlak. Nu:
 * badge uit de data, samenvatting (3 regels), kerngegevens als chips,
 * prijs met actieduur, en twee acties (adrescheck met voorselectie, review).
 * ========================================================================= */
.avo-provgrid { align-items: stretch; }
.avo-provcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.avo-provcard__badge { position: absolute; top: -11px; left: 18px; padding: 3px 11px; border-radius: 999px; background: var(--avo-success); color: var(--avo-card); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.avo-provcard__kop { display: flex; align-items: center; gap: 12px; }
.avo-provcard__logo { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--avo-border); border-radius: 12px; background: var(--avo-card); text-decoration: none; font-weight: 800; color: var(--avo-ink); }
.avo-provcard__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.avo-provcard__titel { flex: 1; min-width: 0; }
.avo-provcard__titel h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.avo-provcard__titel h2 a { color: var(--avo-ink); text-decoration: none; }
.avo-provcard__titel h2 a:hover { color: var(--avo-primary); }
.avo-provcard__scorelabel { display: block; margin-top: 2px; font-size: .78rem; color: var(--avo-muted); }
.avo-provcard__sam { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--avo-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.avo-provcard__feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.avo-provcard__feiten li { font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--avo-surface); border: 1px solid var(--avo-border); color: var(--avo-ink); }
.avo-provcard__prijs { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--avo-border); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.avo-provcard__vanaf { font-size: .82rem; color: var(--avo-muted); }
.avo-provcard__prijs strong { font-size: 1.35rem; color: var(--avo-ink); }
.avo-provcard__mnd { font-size: .85rem; color: var(--avo-muted); }
.avo-provcard__actie { flex-basis: 100%; font-size: .8rem; color: var(--avo-muted); }
.avo-provcard__acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avo-provcard__acties .avo-btn { justify-content: center; padding-inline: 10px; font-size: .88rem; white-space: nowrap; }
.avo-provgrid__cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--avo-radius); background: var(--avo-tint-1); flex-wrap: wrap; }
.avo-provgrid__cta h2 { margin: 0 0 6px; font-size: 1.35rem; }
.avo-provgrid__cta p { margin: 0; color: var(--avo-muted); max-width: 60ch; }
.avo-archive-head__meta { margin: 10px auto 0; font-size: .85rem; color: var(--avo-muted); }
@media (max-width: 600px) {
	.avo-provcard { padding: 18px; }
	.avo-provcard__acties { grid-template-columns: minmax(0, 1fr); }
	.avo-provgrid__cta { padding: 22px; }
	.avo-provgrid__cta .avo-btn { width: 100%; justify-content: center; }
}

/* ===== Speedtest: resultaat duidelijk en een CTA die aansluit op de gemeten snelheid (2-11) ===== */
.avo-speedtest__results.is-klaar .avo-speedtest__resbox { border-color: var(--avo-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--avo-primary) 15%, transparent); transition: box-shadow .4s, border-color .4s; }
.avo-speedtest__results.is-klaar .avo-speedtest__resvalue { color: var(--avo-primary); }
.avo-speedtest__samenvatting { margin: 16px 0 0; text-align: center; font-weight: 700; font-size: 1.1rem; color: var(--avo-ink); }
.avo-speedtest__duiding, .avo-speedtest__cta { scroll-margin-top: 90px; }
.avo-speedtest__cta.is-klaar { padding: clamp(20px, 4vw, 32px); border-radius: var(--avo-radius, 16px); background: linear-gradient(135deg, var(--avo-primary), var(--avo-primary-dark, var(--avo-primary))); color: var(--avo-on-primary, #fff); }
.avo-speedtest__cta.is-klaar h2, .avo-speedtest__cta.is-klaar p { color: inherit; }
.avo-speedtest__cta.is-klaar label { color: inherit; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
	.avo-speedtest__cta.is-klaar { animation: avo-cta-in .5s ease both; }
	@keyframes avo-cta-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.avo-speedtest__cta.is-klaar button[type="submit"] { background: #fff; color: var(--avo-primary); border-color: #fff; }
.avo-speedtest__cta.is-klaar button[type="submit"]:hover { background: color-mix(in srgb, #fff 88%, var(--avo-primary)); }