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

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

/* =========================================================================
 * 0. Basis / knoppen
 * ========================================================================= */
.gin-app a { color: var(--gin-primary); }
.gin-btn, .gin-btn-cta, .gin-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(--gin-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(--gin-primary); color: var(--gin-on-primary);
}
.gin-btn:hover, .gin-btn-cta:hover, .gin-btn-submit:hover { background: var(--gin-primary-dark); color: var(--gin-on-primary); text-decoration: none; transform: translateY(-1px); }
.gin-btn--primary { background: var(--gin-primary); color: var(--gin-on-primary); }
.gin-btn--lg { font-size: 1.1rem; padding: 18px 30px; }
.gin-btn--sm { font-size: .85rem; padding: 9px 16px; }
.gin-btn--block { width: 100%; }
/* De basisregel hierboven staat na de theme-CSS en overschreef daar de
   secundaire knopvarianten; die worden hier opnieuw gezet. */
.gin-btn--ghost { background: var(--gin-card); color: var(--gin-ink); border-color: var(--gin-border); }
.gin-btn--ghost:hover { background: var(--gin-card); border-color: var(--gin-primary); color: var(--gin-primary); }
.gin-btn--outline { background: transparent; color: var(--gin-ink); border-color: var(--gin-border); }
.gin-btn--outline:hover { background: transparent; border-color: var(--gin-primary); color: var(--gin-primary); }

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

/* =========================================================================
 * 1. Filters / resultatenpagina [gin_resultaten]
 * ========================================================================= */
.gin-results { display: grid; grid-template-columns: 268px 1fr; gap: 24px; align-items: start; }
/* Grid-items krijgen standaard min-width:auto (op basis van hun min-content),
   waardoor een rij die niet wil breken de kolom breder kan duwen dan het
   scherm. Zonder deze reset ontstaat er op mobiel horizontale overloop zodra
   de filterkolom openstaat. */
.gin-sidebar-col, .gin-results__main { min-width: 0; }
/* Het adreskaartje en de filterkaart staan in dezelfde kolom en vormen samen
   1 scrollgebied onder de vaste sitekop (90px). Zonder eigen maximumhoogte
   loopt de kolom bij veel filtergroepen het scherm uit. */
.gin-sidebar-col {
	display: flex; flex-direction: column; gap: 12px;
	position: sticky; top: 90px; max-height: calc(100vh - 108px);
	overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* Zonder deze regel geeft de standaard flex-shrink:1 de kaartjes de ruimte die
   toevallig overblijft binnen max-height, in plaats van hun eigen
   inhoudshoogte; dan wordt het onderste kaartje platgeknepen terwijl de kolom
   zelf hoort te scrollen. */
.gin-sidebar-col > * { flex-shrink: 0; }
.gin-sidebar-col::-webkit-scrollbar { width: 8px; }
.gin-sidebar-col::-webkit-scrollbar-thumb { background: var(--gin-border); border-radius: var(--gin-radius-sm); }

.gin-filters { background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius); padding: 16px; }
.gin-filters__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gin-filters__title { margin: 0; font-size: 1.05rem; }
.gin-filters__reset { background: none; border: 0; color: var(--gin-primary); font-weight: 700; cursor: pointer; font-size: .85rem; }
.gin-filters__mobtoggle { display: none; background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-btn-radius); padding: 10px 16px; font-weight: 700; cursor: pointer; }

/* Tussenkopjes per filtergroep, met een dunne scheidingslijn: 18px tussen
   groepen en 12px binnen een groep, in plaats van de losse 22px hieronder. */
.gin-filters__group + .gin-filters__group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gin-border); }
.gin-filters__group[hidden] { display: none; }
.gin-filters__grouphead { margin: 0 0 10px; font-size: .92rem; font-weight: 700; letter-spacing: 0; color: var(--gin-ink); }
.gin-filters__group .gin-fgroup { margin-bottom: 12px; }
.gin-filters__group .gin-fgroup:last-child { margin-bottom: 0; }

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

/* Slider met een gevulde baan in primary. De vulling komt uit de
   --gin-range-fill-variabele die gin-resultaten.js na elke render bijwerkt;
   Firefox tekent hem zelf via ::-moz-range-progress. */
.gin-range {
	width: 100%; height: 5px; margin: 8px 0;
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background: linear-gradient(to right, var(--gin-primary) var(--gin-range-fill, 0%), var(--gin-border) var(--gin-range-fill, 0%));
	border-radius: var(--gin-radius-sm); cursor: pointer; accent-color: var(--gin-primary);
}
.gin-range::-webkit-slider-runnable-track { height: 5px; border-radius: var(--gin-radius-sm); background: transparent; }
.gin-range::-moz-range-track { height: 5px; border-radius: var(--gin-radius-sm); background: var(--gin-border); }
.gin-range::-moz-range-progress { height: 5px; border-radius: var(--gin-radius-sm); background: var(--gin-primary); }
.gin-range::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; margin-top: -5.5px; border-radius: var(--gin-radius-sm);
	background: var(--gin-primary); border: 2px solid var(--gin-card, var(--gin-surface)); cursor: pointer;
}
.gin-range::-moz-range-thumb {
	width: 16px; height: 16px; border-radius: var(--gin-radius-sm);
	border: 2px solid var(--gin-card, var(--gin-surface)); background: var(--gin-primary); cursor: pointer;
}

/* Klein vierkant i-knopje als tooltip-trigger, hetzelfde
   data-tip-toggle-patroon als de tekstlink hierboven. */
.gin-tip-icon {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 16px; height: 16px; border-radius: var(--gin-radius-sm); padding: 0;
	border: 1px solid var(--gin-primary); background: none; color: var(--gin-primary);
	font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
}
.gin-tip-icon:hover { background: var(--gin-primary); color: var(--gin-on-primary); }

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

.gin-checks-list, .gin-radio-list { display: flex; flex-direction: column; gap: 7px; }
/* display:flex hierboven wint van de browserstandaard van [hidden], waardoor
   ingeklapte lijsten (providers, tv-pakketten) toch open bleven staan. */
.gin-checks-list[hidden], .gin-radio-list[hidden] { display: none; }
.gin-check { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; }
.gin-check.is-unavailable { opacity: .5; }
.gin-check__loc { font-style: normal; color: var(--gin-muted); font-size: .82em; }

.gin-fgroup--verbinding .gin-check { align-items: flex-start; }

.gin-fgroup__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gin-fgroup__labelrow .gin-fgroup__label { margin-bottom: 0; }
.gin-fgroup__wijzig { background: none; border: 0; color: var(--gin-primary); font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0; white-space: nowrap; }
.gin-fgroup__summary { margin: 0 0 8px; font-size: .85rem; color: var(--gin-muted); }

.gin-tip-toggle { background: none; border: 0; color: var(--gin-primary); font-weight: 600; font-size: .78rem; cursor: pointer; padding: 0; text-decoration: underline; white-space: nowrap; }
.gin-tip { margin: 8px 0 0; padding: 10px 12px; background: var(--gin-tint-1, var(--gin-surface)); border-radius: var(--gin-radius-sm); font-size: .82rem; color: var(--gin-text); line-height: 1.5; }
.gin-tip[hidden] { display: none; }

/* Adreskaartje boven de filterkaart (alleen als niche-config 'adrescheck' =>
   true). Eigen kaart, dezelfde hoekige vorm als de rest: dunne rand, 4px, geen
   schaduw. Staat buiten .gin-filters zodat het op mobiel zichtbaar blijft
   terwijl de filters in een sheet zitten. */
.gin-adresblok {
	background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border);
	border-radius: var(--gin-app-radius); padding: 14px 16px;
	display: flex; flex-direction: column; gap: 8px;
}
.gin-adresblok__title { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gin-muted); }
.gin-adresblok__status { margin: 0; font-size: .8rem; color: var(--gin-muted); line-height: 1.45; }
.gin-adresblok__status[hidden] { display: none; }
.gin-adresblok__status.is-error { color: var(--gin-danger); }
.gin-adresblok__ingevuld { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gin-adresblok__ingevuld[hidden] { display: none; }
.gin-adresblok__icon { font-size: 1rem; }
.gin-adresblok__tekst { font-weight: 700; color: var(--gin-ink); font-size: .9rem; flex: 1; min-width: 0; }
.gin-adresblok__wijzig { background: none; border: 0; color: var(--gin-primary); font-weight: 700; font-size: .82rem; cursor: pointer; padding: 0; }
.gin-adresblok__form[hidden] { display: none; }
.gin-adresblok__label { font-weight: 700; font-size: .88rem; margin: 0 0 8px; color: var(--gin-ink); }
/* Grid in plaats van flex: de knop eiste de hele rij op waardoor de
   postcode- en huisnummervelden tot vierkantjes werden samengedrukt. */
.gin-adresblok__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.gin-adresblok__row input { min-width: 0; width: 100%; padding: 9px 10px; border: 1.5px solid var(--gin-border); border-radius: var(--gin-radius-sm); font-size: .85rem; }
.gin-adresblok__row .gin-btn { grid-column: 1 / -1; width: 100%; padding: 10px 14px; }

/* Pakketkeuze als pill-rij: internet vast gevuld, tv en bellen als
   schakelbare pills met een vinkvak erin. Hoekig (4px), passend bij de knoppen
   elders op de site. */
.gin-pakket-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.gin-pakket-plus { color: var(--gin-muted); font-weight: 700; font-size: .85rem; }
.gin-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 700; font-size: .78rem; line-height: 1;
	padding: 8px 10px; border-radius: var(--gin-btn-radius); cursor: pointer; user-select: none;
	border: 1px solid var(--gin-border); background: var(--gin-card, var(--gin-surface)); color: var(--gin-ink);
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.gin-pill--vast { background: var(--gin-primary); border-color: var(--gin-primary); color: var(--gin-on-primary); cursor: default; }
.gin-pill--toggle { position: relative; }
.gin-pill--toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gin-pill__box {
	width: 14px; height: 14px; flex: 0 0 14px; border-radius: 2px; position: relative;
	border: 1px solid var(--gin-border); background: var(--gin-card, var(--gin-surface));
}
.gin-pill--toggle:hover { border-color: var(--gin-primary); }
.gin-pill--toggle:has(input:checked) { background: var(--gin-primary); border-color: var(--gin-primary); color: var(--gin-on-primary); }
.gin-pill--toggle:has(input:checked) .gin-pill__box { background: var(--gin-on-primary); border-color: var(--gin-on-primary); }
.gin-pill--toggle:has(input:checked) .gin-pill__box::after {
	content: ""; position: absolute; left: 3px; top: 4px; width: 6px; height: 3px;
	border-left: 2px solid var(--gin-primary); border-bottom: 2px solid var(--gin-primary); transform: rotate(-45deg);
}
.gin-pill--toggle:has(input:focus-visible) { outline: 2px solid var(--gin-primary); outline-offset: 2px; }

/* Leveringsopties: drie losse booleaanse filters, elk met 1 vinkje, dicht op
   elkaar gestapeld onder 1 gedeelde tussenkop. */
.gin-fgroup--levering { display: flex; flex-direction: column; gap: 7px; }
.gin-fgroup__labelrow--tip { margin-bottom: 0; align-items: center; }

/* Statusregel van de server-side belfilters. */
.gin-fgroup__status { margin: 8px 0 0; font-size: .82rem; color: var(--gin-muted); }
.gin-fgroup__status[hidden] { display: none; }
.gin-fgroup__status.is-error { color: var(--gin-danger); }

/* "Snelheid vanaf" als uitklaplijst: knop plus paneel met echte radio's. */
.gin-selectmin { position: relative; }
.gin-selectmin__trigger {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 9px 12px; border: 1px solid var(--gin-border); border-radius: var(--gin-btn-radius);
	background: var(--gin-card, var(--gin-surface)); color: var(--gin-ink); font-weight: 700; font-size: .88rem;
	font-family: inherit; cursor: pointer;
}
.gin-selectmin__trigger:hover { border-color: var(--gin-primary); }
.gin-selectmin__chevron { flex: 0 0 auto; color: var(--gin-muted); transition: transform .15s ease; }
.gin-selectmin__trigger[aria-expanded="true"] .gin-selectmin__chevron { transform: rotate(180deg); }
.gin-selectmin__panel {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
	background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-radius);
	box-shadow: var(--gin-shadow-2); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.gin-selectmin__panel[hidden] { display: none; }
.gin-selectmin__option { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--gin-radius-sm); cursor: pointer; font-size: .86rem; color: var(--gin-ink); }
.gin-selectmin__option:hover { background: var(--gin-tint-1, var(--gin-surface)); }
.gin-selectmin__option span { display: flex; align-items: baseline; gap: 6px; }
.gin-selectmin__option em { font-style: normal; font-size: .76rem; color: var(--gin-muted); }
.gin-selectmin__option input[type="radio"] { flex: 0 0 auto; margin: 0; accent-color: var(--gin-primary); }

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

.gin-results__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.gin-results__heading { margin: 0 0 4px; }
/* Compacte resultaatregel links, met de actieve filterchips eronder. */
.gin-results__left { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.gin-results__count { margin: 0; color: var(--gin-muted); font-size: .88rem; }
.gin-results__toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gin-results__pakket, .gin-results__sort { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
.gin-results__pakket select, .gin-results__sort select { padding: 8px 10px; border: 1px solid var(--gin-border); border-radius: var(--gin-btn-radius); background: var(--gin-card, var(--gin-surface)); color: var(--gin-ink); font-weight: 600; }
.gin-results__disclaimer { font-size: .8rem; color: var(--gin-muted); margin-top: 16px; }
.gin-no-results { padding: 32px; text-align: center; color: var(--gin-muted); }

/* Tekstschakelaar tussen 1 en 2 jaar vast, boven de lijst. Tekstlink in
   primary, geen knopvlak: de sorteerselect ernaast is al een vlak. */
.gin-contractduur-switch {
	background: none; border: 0; padding: 0; color: var(--gin-primary); font-weight: 700; font-size: .84rem;
	cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.gin-contractduur-switch:hover { text-decoration: underline; }
.gin-contractduur-switch[hidden] { display: none; }

/* Actieve filters als wegklikbare chips, links in de balk. Hoekig en compact,
   in lijn met de rest van de site. */
.gin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gin-chip--filter {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--gin-tint-1, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm);
	padding: 5px 8px 5px 10px; font-size: .78rem; font-weight: 700; color: var(--gin-ink); cursor: pointer;
	font-family: inherit; line-height: 1.3;
}
.gin-chip--filter:hover { border-color: var(--gin-primary); color: var(--gin-primary); }
.gin-chip--filter span { font-size: .95rem; line-height: 1; color: var(--gin-muted); }
.gin-chip--filter:hover span { color: var(--gin-primary); }

.gin-cards { display: flex; flex-direction: column; gap: 12px; position: relative; transition: opacity .15s ease; }
/* Laadstaat tijdens de server-side belfilters: verminderde dekking plus een
   klein draaiend blokje rechtsboven, geen overlay die de kaarten verbergt. */
.gin-cards.is-loading { opacity: .5; pointer-events: none; }
.gin-cards.is-loading::after {
	content: ""; position: absolute; top: 10px; right: 10px; width: 20px; height: 20px;
	border: 3px solid var(--gin-border); border-top-color: var(--gin-primary);
	border-radius: 50%; animation: gin-spin .7s linear infinite;
}
@keyframes gin-spin { to { transform: rotate(360deg); } }

.gin-addr-banner { background: var(--gin-tint-1, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius); padding: 14px 20px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 2px; }
.gin-addr-banner strong { color: var(--gin-ink); }
.gin-addr-banner span { color: var(--gin-muted); font-size: .9rem; }
.gin-addr-banner[hidden] { display: none; }

@media (max-width: 860px) {
	.gin-results { grid-template-columns: minmax(0, 1fr); }
	.gin-sidebar-col { position: static; max-height: none; overflow-y: visible; }
	.gin-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. */
	.gin-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;
	}
	.gin-filters.is-open .gin-mfilters-foot { display: flex; }
	.gin-filters.is-open .gin-mfilters-sluit { display: block; }
	.gin-filters.is-open .gin-mfilters-chips:not([hidden]) { display: flex; }
	.gin-filters__mobtoggle { display: inline-flex; }
}

/* 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. */
.gin-mfilters-foot { display: none; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 301; background: var(--gin-surface); border-top: 1px solid var(--gin-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: var(--gin-shadow-2); }
.gin-mfilters-foot .gin-btn { flex: 1; text-align: center; }
.gin-mfilters-wis { background: none; border: 0; color: var(--gin-muted); font-weight: 700; font-size: .88rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
.gin-mfilters-sluit { display: none; background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--gin-muted); cursor: pointer; padding: 2px 6px; }
.gin-mfilters-chips { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.gin-mfilters-chips[hidden] { display: none; }
.gin-mfilters-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gin-tint-1, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm); padding: 6px 10px; font-size: .82rem; font-weight: 700; color: var(--gin-ink); cursor: pointer; }
.gin-mfilters-chip:hover { border-color: var(--gin-primary); }

/* Punt 13: op desktop staat dezelfde voet gewoon onderaan het filterpaneel,
   niet vastgeplakt aan de onderkant van het scherm. Zo heeft de bezoeker daar
   ook "Alles wissen" naast "Toon N abonnementen" binnen handbereik. */
@media (min-width: 861px) {
	.gin-mfilters-foot {
		display: flex; position: static; z-index: auto;
		margin: 18px -16px -16px; box-shadow: none;
		border-top: 1px solid var(--gin-border);
		padding: 14px 16px;
	}
}

/* =========================================================================
 * 2. Resultatenkaart (.gin-rcard)
 * ========================================================================= */
.gin-rcard {
	position: relative; background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius);
	padding: 14px 16px; display: grid; grid-template-columns: 22px 104px minmax(0, 1fr) 208px; gap: 10px 16px; align-items: center;
}
.gin-rcard--top { border-color: var(--gin-primary); }
.gin-rcard__rank { font-weight: 700; color: var(--gin-muted); font-size: .95rem; align-self: center; text-align: center; }

.gin-rcard__logo { width: 104px; height: 56px; display: grid; place-items: center; overflow: hidden; }
.gin-rcard__logo img { width: auto; height: auto; max-width: 100%; max-height: 44px; object-fit: contain; }
/* max-height in procenten werkt niet op een grid-item zonder vaste rijhoogte: Budget Thuis
   werd 73px hoog in een vak van 56px en hollandsnieuwe verloor de tweede regel. */
.gin-rcard__initials, .gin-aanrader__initials { font-weight: 700; color: var(--gin-muted); }
.gin-icon-check, .gin-icon-starbadge { flex: 0 0 auto; }
.gin-icon-check circle { fill: var(--gin-success); }
.gin-icon-check path { stroke: var(--gin-on-primary); }
.gin-icon-starbadge path { fill: var(--gin-accent); }

.gin-rcard__body { min-width: 0; }
.gin-rcard__titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gin-rcard__name { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.gin-rcard__name a { color: inherit; }
.gin-rcard__name a:hover { color: var(--gin-primary); }
/* De aanrader krijgt één pil, op de best gerangschikte rij van die provider. */
.gin-rcard__aanraderpill { background: var(--gin-primary); color: var(--gin-on-primary); font-weight: 700; font-size: .7rem; padding: 3px 8px; border-radius: var(--gin-radius-sm); }
.gin-rcard__pill { background: var(--gin-accent-2); color: var(--gin-on-primary); font-weight: 700; font-size: .74rem; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.gin-rcard__pakket { background: var(--gin-tint-1, var(--gin-surface)); color: var(--gin-primary); font-weight: 700; font-size: .7rem; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }

/* Metaregel: contractduur, snelheid, zenders en de score achter elkaar, met
   een dunne onderlijn. Dicht op elkaar, dat is de toon van deze site. */
.gin-rcard__meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
	color: var(--gin-muted); font-size: .8rem;
	padding-bottom: 8px; border-bottom: 1px solid var(--gin-border); margin: 6px 0 8px;
}
.gin-rcard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.gin-rcard__meta svg { color: var(--gin-primary); flex: 0 0 auto; }
.gin-rcard__meta-score { color: var(--gin-ink); font-weight: 700; }

.gin-rcard__benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gin-rcard__benefits li { display: flex; align-items: flex-start; gap: 7px; font-size: .84rem; color: var(--gin-text); line-height: 1.4; }
.gin-rcard__benefits svg { flex: 0 0 14px; margin-top: 2px; color: var(--gin-success); }
.gin-rcard__cashback {
	display: inline-flex; align-items: center; gap: 6px; margin-top: 7px;
	background: var(--gin-tint-1, var(--gin-surface)); color: var(--gin-primary); font-weight: 700; font-size: .76rem;
	padding: 4px 8px; border-radius: var(--gin-radius-sm);
}
.gin-rcard__cashback svg { flex: 0 0 13px; }

/* Prijsblok. Het bedrag staat in een <strong> binnen .gin-rcard__price, zodat
   de gele prijsbadge uit de identiteitslaag van het thema erop valt. */
.gin-rcard__price { display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.gin-rcard__badge {
	display: inline-flex; align-items: center; gap: 5px;
	background: var(--gin-accent); color: var(--gin-ink);
	font-size: .72rem; font-weight: 700; padding: 3px 8px; border-radius: var(--gin-radius-sm); margin-bottom: 6px; max-width: 100%;
}
.gin-rcard__priceline { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.gin-rcard__price-old { color: var(--gin-muted); font-size: .84rem; font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.gin-rcard__price strong, .gin-rcard__bedrag { font-family: var(--gin-font-head); font-weight: 700; font-size: 1.6rem; color: var(--gin-ink); letter-spacing: -.01em; }
.gin-rcard__per { color: var(--gin-muted); font-size: .76rem; font-weight: 600; }
.gin-rcard__dash { width: 100%; border-top: 1px dashed var(--gin-border); margin: 8px 0 6px; }
.gin-rcard__jaar { font-size: .92rem; font-weight: 700; color: var(--gin-ink); }
.gin-rcard__jaar span { color: var(--gin-muted); font-weight: 500; font-size: .76rem; }
.gin-rcard__daarna { font-size: .74rem; color: var(--gin-muted); margin-top: 3px; }
.gin-rcard__cta-btn { margin-top: 10px; width: 100%; text-align: center; }
.gin-rcard__levertijd { font-size: .76rem; color: var(--gin-muted); }

/* Voetregel: vergelijkvinkje links, Details rechts, samen op 1 dunne regel. */
.gin-rcard__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--gin-border); padding-top: 9px; margin-top: 2px; }
.gin-rcard__comparecb { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--gin-muted); cursor: pointer; }
.gin-rcard__comparecb input { accent-color: var(--gin-primary); width: 14px; height: 14px; margin: 0; }
.gin-rcard__more { background: none; border: 0; padding: 0; font-weight: 700; font-size: .84rem; color: var(--gin-primary); cursor: pointer; }
.gin-rcard__more-i { display: inline-block; transition: transform .15s; }
.gin-rcard__more.is-open .gin-rcard__more-i { transform: rotate(180deg); }

.gin-rcard__details { grid-column: 1 / -1; border-top: 1px solid var(--gin-border); padding-top: 14px; margin-top: 4px; }
.gin-detail-sam { color: var(--gin-muted); margin: 0 0 14px; }
.gin-dtabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--gin-border); }
.gin-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(--gin-muted); cursor: pointer; }
.gin-dtab.is-active { color: var(--gin-primary); border-bottom-color: var(--gin-primary); }
.gin-dtab-panel[hidden] { display: none; }
.gin-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.gin-detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--gin-border); font-size: .9rem; }
.gin-detail-row span { color: var(--gin-muted); }
.gin-detail-lines { margin: 0; padding-left: 16px; text-align: left; }
.gin-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.gin-chip { display: inline-block; background: var(--gin-tint-1, var(--gin-surface)); color: var(--gin-ink); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.gin-chip--korting { background: var(--gin-tint-3, var(--gin-surface)); color: var(--gin-success); font-weight: 700; }
.gin-detail-minpunten { margin-top: 12px; padding: 10px 14px; background: var(--gin-tint-2, var(--gin-surface)); border-radius: var(--gin-radius-sm); }
.gin-detail-minpunten span { display: block; font-weight: 700; font-size: .82rem; color: var(--gin-warning); margin-bottom: 4px; }
.gin-detail-minpunten ul { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--gin-text); }
.gin-detail-review { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--gin-primary); }

.gin-loadmore-wrap { text-align: center; margin-top: 20px; }
.gin-loadmore { background: var(--gin-card, var(--gin-surface)); border: 2px solid var(--gin-primary); color: var(--gin-primary); border-radius: 999px; padding: 12px 28px; font-weight: 700; cursor: pointer; }
.gin-loadmore:hover { background: var(--gin-primary); color: var(--gin-on-primary); }

/* Aanvullende blokken in de uitklap: prijsopbouw, tv-pakketten, subscores en
   bijboekbare opties. Structurele regels, kleuren allemaal uit :root. */
.gin-price-strike { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gin-price-strike__old { text-decoration: line-through; color: var(--gin-muted); font-size: .88rem; }
.gin-price-strike__new { font-weight: 700; color: var(--gin-ink); font-size: 1.05rem; }
.gin-tv-inbegrepen { color: var(--gin-success); }
.gin-chip--combi { background: var(--gin-tint-4, var(--gin-surface)); color: var(--gin-positief, var(--gin-success)); font-weight: 700; }
.gin-detail-benefits { margin: 0 0 14px; }

.gin-score-tab { display: flex; flex-direction: column; gap: 12px; }
.gin-score-row__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.gin-score-row__name { font-weight: 700; color: var(--gin-ink); font-size: .86rem; }
.gin-score-row__stars { position: relative; width: 90px; height: 6px; flex: 0 0 auto; background: var(--gin-border); border-radius: var(--gin-radius-sm); overflow: hidden; }
.gin-score-row__stars-fill { position: absolute; inset: 0; background: var(--gin-accent); border-radius: var(--gin-radius-sm); }
.gin-score-row__weight { width: 100%; height: 3px; background: var(--gin-border); border-radius: var(--gin-radius-sm); overflow: hidden; }
.gin-score-row__weight span { display: block; height: 100%; background: var(--gin-primary); border-radius: var(--gin-radius-sm); }
.gin-score-tab__total { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--gin-border); font-size: .84rem; color: var(--gin-text); line-height: 1.5; }
.gin-score-tab__total strong { color: var(--gin-ink); font-size: 1.05rem; }

.gin-bijboeken { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gin-border); }
.gin-bijboeken__title { font-weight: 700; color: var(--gin-ink); margin: 0 0 8px; font-size: .9rem; }
.gin-bijboeken__cat { font-weight: 700; color: var(--gin-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; margin: 10px 0 4px; }
.gin-bijboeken__cat:first-child { margin-top: 0; }

@media (max-width: 860px) {
	/* Zonder sidebar is er meer breedte, maar het prijspaneel mag daarvan niet
	   meer dan nodig opeisen. */
	.gin-rcard { grid-template-columns: 22px 96px minmax(0, 1fr) 190px; }
}

@media (max-width: 600px) {
	/* Logo, tekst en prijspaneel elk een eigen volle rij; het rangnummer loopt
	   mee in de eerste rij naast het logo. */
	.gin-rcard { grid-template-columns: 22px minmax(0, 1fr); padding: 14px; gap: 10px 12px; }
	.gin-rcard__logo { width: auto; max-width: 104px; justify-self: start; }
	.gin-rcard__body, .gin-rcard__price { grid-column: 1 / -1; }
	.gin-rcard__price { align-items: flex-start; text-align: left; }
	.gin-rcard__priceline { justify-content: flex-start; }
	.gin-rcard__cta-btn { max-width: 240px; }
	.gin-detail-grid { grid-template-columns: minmax(0, 1fr); }
	.gin-dtabs { overflow-x: auto; flex-wrap: nowrap; }
	.gin-dtab { white-space: nowrap; }
	.gin-score-row__stars { width: 70px; }
}

@media (max-width: 480px) {
	.gin-rcard__cta-btn { max-width: none; }
}

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

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

/* =========================================================================
 * 4. Aanrader-kaart [gin_aanrader]
 * ========================================================================= */
.gin-aanrader { background: var(--gin-card, var(--gin-surface)); border: 2px solid var(--gin-primary); border-radius: var(--gin-app-radius); padding: 24px; max-width: 640px; margin-inline: auto; }
.gin-aanrader__label { display: inline-block; background: var(--gin-primary); color: var(--gin-on-primary); font-weight: 700; font-size: .78rem; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.gin-aanrader__body { display: flex; align-items: center; gap: 18px; }
.gin-aanrader__logo { flex: 0 0 84px; width: 84px; height: 64px; border-radius: 12px; background: var(--gin-bg); border: 1px solid var(--gin-border); display: grid; place-items: center; overflow: hidden; padding: 8px; }
.gin-aanrader__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gin-aanrader__info { flex: 1; min-width: 0; }
.gin-aanrader__name { margin: 0 0 6px; }
.gin-aanrader { text-align: left; }
.gin-aanrader__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: var(--gin-text); text-align: left; }
.gin-aanrader__usps li { display: flex; align-items: flex-start; gap: 7px; }
.gin-aanrader__usps svg { flex: 0 0 auto; margin-top: 3px; color: var(--gin-primary); }
.gin-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(--gin-on-primary); background: var(--gin-primary); }
.gin-aanrader__score--great { background: var(--gin-success); }
.gin-aanrader__score--good { background: var(--gin-primary); }
.gin-aanrader__score--ok { background: var(--gin-warning); }
.gin-aanrader__score--poor { background: var(--gin-danger); }
.gin-aanrader .gin-btn { margin-top: 18px; }

@media (max-width: 600px) {
	.gin-aanrader { padding: 20px; }
	.gin-aanrader__body { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "logo score" "info info"; align-items: center; gap: 12px; }
	.gin-aanrader__logo { grid-area: logo; flex: none; width: 72px; height: 52px; }
	.gin-aanrader__score { grid-area: score; justify-self: end; flex: none; width: 48px; height: 48px; font-size: 1.05rem; }
	.gin-aanrader__info { grid-area: info; }
	.gin-aanrader__name { font-size: 1.05rem; }
}

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

.gin-table-scroll { overflow-x: auto; }
.gin-table-scroll > table { overflow: visible; }
.gin-prijstabel { width: 100%; border-collapse: collapse; min-width: 640px; }
.gin-prijstabel th, .gin-prijstabel td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--gin-border); }
.gin-prijstabel thead th { color: var(--gin-muted); font-size: .8rem; }
/* 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. */
.gin-prijstabel td { vertical-align: middle; }
.gin-ptable-provider { position: relative; }
.gin-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. */
.gin-prijstabel .gin-ptable-provider-naam,
.gin-prose .gin-prijstabel .gin-ptable-provider-naam { color: var(--gin-ink); font-weight: 700; text-decoration: none; }
.gin-prijstabel .gin-ptable-provider-naam:hover { color: var(--gin-primary); text-decoration: none; }
.gin-ptable-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; background: var(--gin-bg); border: 1px solid var(--gin-border); display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--gin-muted); }
.gin-ptable-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gin-ptable-row--best { background: var(--gin-tint-1, var(--gin-surface)); }
.gin-ptable-row--best td:first-child { position: relative; }
/* De badge staat in de rijstroom BOVEN het logo, niet absoluut eroverheen:
   op de reviewpagina viel hij anders over het providerlogo (punt 24). */
.gin-ptable-best-badge { display: block; width: fit-content; margin: 0 0 8px; background: var(--gin-success); color: var(--gin-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: var(--gin-radius-sm); white-space: nowrap; }

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

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

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

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

/* =========================================================================
 * 7. Stappen [gin_stappen]
 * ========================================================================= */
.gin-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gin-stappen--drie { grid-template-columns: repeat(3, 1fr); }
.gin-stap { position: relative; border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm); padding: 20px 20px 22px; background: var(--gin-card); }
.gin-stap__illu { height: 116px; margin: 0 0 14px; }
.gin-stap__illu svg { width: 100%; height: 100%; display: block; }
.gin-stap__num { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--gin-primary); color: var(--gin-primary); border-radius: var(--gin-radius-sm); font-weight: 700; font-size: .84rem; margin-bottom: 8px; }
.gin-stap h3 { margin: 2px 0 6px; font-size: 1.05rem; }
.gin-stap p { margin: 0; color: var(--gin-muted); font-size: .9rem; line-height: 1.6; }

@media (max-width: 860px) { .gin-stappen, .gin-stappen--drie { grid-template-columns: minmax(0, 1fr); } .gin-stap__illu { height: 96px; } }

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

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

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

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

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

.gin-vs { overflow-x: auto; }
.gin-vs__table { width: 100%; border-collapse: collapse; min-width: 480px; overflow: visible; }
.gin-vs__table th, .gin-vs__table td { padding: 12px 16px; border-bottom: 1px solid var(--gin-border); text-align: left; }
.gin-vs__table thead th { background: var(--gin-tint-1, var(--gin-surface)); }
.gin-vs__cta {
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .85rem; line-height: 1; padding: 9px 16px;
	border-radius: var(--gin-radius-sm); border: 2px solid transparent;
	background: var(--gin-primary); color: var(--gin-on-primary);
	text-decoration: none; white-space: nowrap;
}
.gin-app a.gin-vs__cta, .gin-app a.gin-vs__cta:hover { color: var(--gin-on-primary); text-decoration: none; }
.gin-vs__cta:hover { background: var(--gin-primary-dark); }
.gin-vs__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--gin-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) {
	.gin-vs__table { min-width: 0; }
	.gin-vs__table th, .gin-vs__table td { padding: 9px 8px; font-size: .82rem; }
	.gin-vs__table th:first-child,
	.gin-vs__table td:first-child { position: sticky; left: 0; background: var(--gin-surface); z-index: 1; min-width: 96px; max-width: 108px; box-shadow: 2px 0 0 var(--gin-border); overflow-wrap: break-word; word-break: break-word; hyphens: auto; overflow: hidden; }
	.gin-vs__table thead th:first-child { background: var(--gin-surface); }
	.gin-vs__hint { display: block; }
}

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

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

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

/* =========================================================================
 * 13. Single review-pagina
 * ========================================================================= */
.gin-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. */
.gin-review-main { min-width: 0; }
.gin-review-grid > * { min-width: 0; }
.gin-review-main h1, .gin-review-main h2, .gin-review-main h3 { overflow-wrap: break-word; word-break: break-word; }
.gin-rev-header { display: flex; gap: 20px; align-items: center; margin-bottom: 20px; }
.gin-rev-header__logo { flex: 0 0 96px; width: 96px; height: 96px; border: 1px solid var(--gin-border); border-radius: 16px; background: var(--gin-card, var(--gin-surface)); display: grid; place-items: center; padding: 12px; overflow: hidden; }
.gin-rev-header__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gin-rev-header__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.gin-rev-score { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; font-weight: 700; color: var(--gin-on-primary); background: var(--gin-primary); }
.gin-rev-score--great { background: var(--gin-success); }
.gin-rev-score--good { background: var(--gin-primary); }
.gin-rev-score--ok { background: var(--gin-warning); }
.gin-rev-score--poor { background: var(--gin-danger); }
.gin-rev-score__label { color: var(--gin-muted); font-size: .85rem; }
.gin-rev-updated { color: var(--gin-muted); font-size: .85rem; margin: 0; }
.gin-rev-header__sub { margin: 10px 0 0; color: var(--gin-text); }
.gin-rev-pros { background: var(--gin-tint-1, var(--gin-surface)); border-radius: var(--gin-radius-sm); padding: 18px 22px; margin-bottom: 24px; }
.gin-rev-pros h2 { font-size: 1.1rem; margin: 0 0 10px; color: var(--gin-success); }
.gin-rev-pros ul { margin: 0; padding-left: 20px; }
.gin-rev-specs { margin: 20px 0 24px; background: var(--gin-card); border: 1px solid var(--gin-border); border-radius: var(--gin-radius); padding: 20px 22px; }
.gin-rev-specs h2 { font-size: 1.1rem; }
.gin-rev-cta { text-align: center; background: var(--gin-tint-2, var(--gin-surface)); border-radius: var(--gin-app-radius); padding: 28px; }

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

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

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

/* =========================================================================
 * 15. Reviewbalk [gin_reviewbalk]
 * ========================================================================= */
.gin-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(--gin-border); text-align: center; }
.gin-reviewbalk__tekst { font-weight: 600; color: var(--gin-text); }
.gin-reviewbalk__badge { display: inline-flex; align-items: baseline; gap: 2px; background: var(--gin-primary); color: var(--gin-on-primary); font-family: var(--gin-font-head); font-weight: 700; font-size: 1.3rem; padding: 6px 14px; border-radius: var(--gin-radius-sm); }
.gin-reviewbalk__badge small { font-size: .7rem; font-weight: 600; opacity: .8; }
.gin-reviewbalk__count { color: var(--gin-muted); font-size: .88rem; }

/* =========================================================================
 * 12. Datablok-schil, duel [gin_duel] en dealsectie
 * ========================================================================= */
.gin-datablok { background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-radius); box-shadow: var(--gin-shadow-1); padding: 28px; margin: 1.6em 0; }
.gin-datablok__foot { margin: 14px 0 0; font-size: .85rem; color: var(--gin-muted); font-weight: 600; text-align: center; }

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

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

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

/* =========================================================================
 * 13. Aanbod-tabel [gin_provider_aanbod]: extra rij-onderdelen
 * ========================================================================= */
.gin-ptable-provider { position: relative; }
.gin-ptable-provider-info { display: flex; flex-direction: column; min-width: 0; }
.gin-ptable-provider-naam { font-weight: 700; color: var(--gin-ink); text-decoration: none; }
.gin-ptable-provider-naam:hover { color: var(--gin-primary); }
.gin-ptable-product { color: var(--gin-muted); font-weight: 500; font-size: 13px; text-decoration: none; }
.gin-ptable-product:hover { color: var(--gin-primary); text-decoration: underline; }
/* De badge staat in de rijstroom BOVEN het logo, niet absoluut eroverheen:
   op de reviewpagina viel hij anders over het providerlogo (punt 24). */
.gin-ptable-best-badge { display: block; width: fit-content; margin: 0 0 8px; background: var(--gin-success); color: var(--gin-on-primary); font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: var(--gin-radius-sm); white-space: nowrap; }
.gin-prijstabel-foot { margin: 14px 0 0; text-align: center; }
.gin-prijstabel-foot a { font-weight: 700; color: var(--gin-primary); }

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

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

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

/* -------------------------------------------------------------------------
 * Gebruikersreviews: gemiddelde + lijst links, formulier rechts (desktop);
 * gestapeld op mobiel. Herbruikt .gin-stars/.gin-star (sectie 6).
 * ---------------------------------------------------------------------- */
.gin-rev-reviews__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
.gin-rev-reviews__col--score { order: -1; background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius, var(--gin-radius)); padding: 24px 22px; text-align: center; position: sticky; top: 96px; }
.gin-rev-reviews__col--score .gin-rev-summary { border: 0; padding: 0; margin: 0 0 14px; background: none; }
.gin-rev-reviews__col--score .gin-rev-form { text-align: left; margin-top: 10px; }
.gin-rev-reviews__col { min-width: 0; }
.gin-rev-notice { padding: 12px 16px; border-radius: var(--gin-radius-sm); font-size: .92rem; font-weight: 600; margin: 0 0 18px; }
.gin-rev-notice--ok { background: var(--gin-tint-3, var(--gin-surface)); color: var(--gin-success-dark, var(--gin-success)); }
.gin-rev-notice--error { background: var(--gin-tint-2, var(--gin-surface)); color: var(--gin-danger); }

.gin-rev-summary { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 20px; }
.gin-rev-summary__avg { font-size: 40px; font-weight: 700; font-family: var(--gin-font-head); color: var(--gin-ink); line-height: 1; }
.gin-rev-summary__avg small { font-size: 16px; font-weight: 700; color: var(--gin-muted); }
.gin-rev-summary__count { color: var(--gin-muted); font-size: .88rem; }
.gin-rev-summary__subs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--gin-border); width: 100%; }
.gin-rev-summary__sub { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--gin-muted); }
.gin-rev-summary__sub-label { font-weight: 700; color: var(--gin-ink); }
.gin-rev-summary__sub-val { color: var(--gin-muted); }

.gin-rev-list { display: flex; flex-direction: column; gap: 16px; }
/* Punt 55: laadknop onder de klantervaringen. Zelfde knopvorm als de rest van
   deze site, kleuren uitsluitend uit :root. */
.gin-rev-meer { display: block; width: 100%; margin-top: 16px; padding: 12px 22px; background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-primary); border-radius: var(--gin-app-radius, var(--gin-radius)); color: var(--gin-primary); font: inherit; font-weight: 700; cursor: pointer; }
.gin-rev-meer:hover { background: var(--gin-primary); color: var(--gin-on-primary); border-color: var(--gin-primary); }
.gin-rev-meer:focus-visible { outline: 2px solid var(--gin-primary); outline-offset: 2px; }
.gin-rev-meer[hidden] { display: none; }
.gin-rev-item { background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius, var(--gin-radius)); padding: 16px 18px; }
.gin-rev-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gin-rev-item__avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--gin-tint-1); color: var(--gin-primary); font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.gin-rev-item__who { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gin-rev-item__who strong { font-size: .92rem; color: var(--gin-ink); }
.gin-rev-item__head time { color: var(--gin-muted); font-size: .8rem; white-space: nowrap; }
.gin-rev-item__text { margin: 0; color: var(--gin-text); font-size: .94rem; line-height: 1.55; }
.gin-rev-item__subs { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 10px; }
.gin-rev-item__sub { font-size: .78rem; color: var(--gin-muted); display: inline-flex; align-items: center; gap: 4px; }
.gin-rev-loadmore { margin-top: 18px; padding: 10px 20px; border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm); background: var(--gin-card, var(--gin-surface)); color: var(--gin-primary); font-weight: 700; cursor: pointer; }
.gin-rev-loadmore:hover { background: var(--gin-tint-1); }

.gin-rev-empty { background: var(--gin-tint-1, var(--gin-surface)); border-radius: var(--gin-app-radius); padding: 28px 22px; text-align: center; color: var(--gin-text); }
.gin-rev-empty p { margin: 0 0 6px; }

.gin-rev-form { background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.gin-rev-form h3 { margin: 0; font-size: 1.1rem; }
.gin-rev-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gin-rev-form__row { display: flex; flex-direction: column; gap: 6px; }
.gin-rev-form__row label { font-weight: 700; font-size: .88rem; color: var(--gin-ink); }
.gin-rev-form__row input[type="text"], .gin-rev-form__row textarea {
	font: inherit; padding: 10px 12px; border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm);
	background: var(--gin-bg); color: var(--gin-text); resize: vertical;
}
.gin-rev-form__row input[type="text"]:focus, .gin-rev-form__row textarea:focus { outline: 2px solid var(--gin-primary); outline-offset: 1px; }
.gin-rev-form__note { margin: 0; font-size: .78rem; color: var(--gin-muted); }

/* Scorekiezer 1-10: radio's omgekeerd in de bron (10 -> 1) zodat de CSS-
 * sibling-selector ~ zonder JS alle cijfers t/m de gehoverde/gekozen waarde
 * kan markeren (flex-direction: row-reverse draait de visuele volgorde terug). */
.gin-rev-scorepicker { display: flex; flex-wrap: wrap; gap: 4px; }
.gin-rev-scorepicker input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } /* Onzichtbaar maar wel focusbaar; pointer-events uit zodat de 1px-hitbox niet over de labels heen valt. */
.gin-rev-scorepicker label {
	width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	font-size: .78rem; font-weight: 700; background: var(--gin-tint-1, var(--gin-surface)); color: var(--gin-muted);
	cursor: pointer; border: 2px solid transparent; transition: background .12s ease, color .12s ease;
}
/* Cijferscore: alleen de gekozen (of gehoverde) waarde oplicht; een
   sterren-achtig vul-effect klopt hier niet en werkte fout bij wrappen. */
.gin-rev-scorepicker input:checked + label,
.gin-rev-scorepicker label:hover { background: var(--gin-accent-2); color: var(--gin-ink); }
.gin-rev-scorepicker input:focus-visible + label { outline: 2px solid var(--gin-primary); outline-offset: 2px; }

@media (max-width: 860px) {
	.gin-rev-reviews__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Merkuitwerking GoedkoopInternet: rustige afronding op de reviewblokken. */
.gin-rev-item,
.gin-rev-form,
.gin-rev-reviews__col--score,
.gin-rev-empty { border-radius: var(--gin-radius); }
.gin-rev-scorepicker label { border-radius: var(--gin-radius-sm); }
.gin-rev-scorepicker input:checked + label,
.gin-rev-scorepicker label:hover { background: var(--gin-primary); color: var(--gin-on-primary); }

/* Knoptekst binnen .gin-app: de generieke linkregel '.gin-app a' (0,1,1) is
   specifieker dan '.gin-btn-cta' (0,1,0) en kleurde knoplabels daardoor in de
   primaire kleur, wat op een gevulde knop tekst op dezelfde kleur oplevert. */
.gin-app a.gin-btn,
.gin-app a.gin-btn-cta,
.gin-app a.gin-btn-submit { color: var(--gin-on-primary); }
/* De vergelijker staat op deze site binnen .gin-prose, en die onderstreept
   elke link. Binnen de app zijn links kaarttitels, knoppen en chips: geen
   lopende tekst. Onderstreping alleen nog bij hover, net als op 8142/8145. */
.gin-prose .gin-app a { text-decoration: none; }
.gin-prose .gin-app a:hover { text-decoration: underline; }
.gin-prose .gin-app a.gin-btn:hover,
.gin-prose .gin-app a.gin-btn-cta:hover,
.gin-prose .gin-app a.gin-btn-submit:hover,
.gin-prose .gin-app a.gin-vs__cta:hover { text-decoration: none; }
/* De pagina-prose onderstreept elke link; knoplabels zijn geen lopende tekst. */
.gin-prose a.gin-btn, .gin-prose a.gin-btn-cta, .gin-prose a.gin-btn-submit,
.gin-app a.gin-btn, .gin-app a.gin-btn-cta, .gin-app a.gin-btn-submit,
a.gin-btn, a.gin-btn-cta, a.gin-btn-submit,
a.gin-btn:hover, a.gin-btn-cta:hover, a.gin-btn-submit:hover { text-decoration: none; }
.gin-app a.gin-btn--ghost,
.gin-app a.gin-btn--outline { color: var(--gin-ink); }
.gin-app a.gin-btn--ghost:hover,
.gin-app a.gin-btn--outline:hover { color: var(--gin-primary); }

/* Signatuur: dezelfde rustige knopvorm als in het theme. */
.gin-btn-cta, .gin-btn-submit {
	font-family: var(--gin-font-body);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	border-radius: var(--gin-radius-sm);
}


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

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

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

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

/* =========================================================================
 * Tv-zenders: zenderlijst in de detailuitklap en de zenderpagina's op
 * /tv-zenders/. Alleen var(--gin-*), geen losse hex. Breakpoints 480/600/860.
 * ========================================================================= */
.gin-tvz-allbtn { margin-top: 12px; }
.gin-tvz-allwrap { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gin-border); display: flex; flex-direction: column; gap: 16px; }
.gin-tvz-allwrap__status { color: var(--gin-muted); font-size: .88rem; margin: 0; }
.gin-tvz-allwrap__status.is-error { color: var(--gin-danger); }
.gin-tvz-allcat__head { font-weight: 800; color: var(--gin-ink); font-size: .9rem; margin: 0 0 10px; }
.gin-tvz-allcat__price { font-weight: 600; color: var(--gin-muted); }
.gin-tvz-allcat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gin-tvz-chan { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--gin-text); }
.gin-tvz-chan img { width: 28px; height: 28px; object-fit: contain; border-radius: var(--gin-radius-sm); background: var(--gin-bg); border: 1px solid var(--gin-border); flex: 0 0 auto; }
.gin-tvz-chan__noimg { width: 28px; height: 28px; border-radius: var(--gin-radius-sm); background: var(--gin-bg); border: 1px solid var(--gin-border); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: var(--gin-muted); flex: 0 0 auto; }
.gin-tvz-chan__hd { font-style: normal; color: var(--gin-primary); font-weight: 700; font-size: .74rem; }

/* Zenderfilter-paneel in de sidebar (RONDE-13-ZENDERS.md, punt 2) is
   uitgesteld naar een volgende ronde; geen CSS hier zolang de knop hidden
   staat (shortcode-resultaten.php, data-tv-zenderzoeker). */

/* Zenderoverzicht /tv-zenders/. */
.gin-tvz-search { margin-bottom: 28px; }
.gin-tvz-search__input {
	width: 100%; max-width: 480px; padding: 13px 18px; border: 1.5px solid var(--gin-border);
	border-radius: var(--gin-radius-sm); font-size: .95rem; font-family: inherit; background: var(--gin-card, var(--gin-surface)); color: var(--gin-ink);
}
.gin-tvz-search__input::placeholder { color: var(--gin-muted); }
.gin-tvz-search__input:focus { outline: none; border-color: var(--gin-primary); }
.gin-tvz-empty { color: var(--gin-muted); }
.gin-tvz-cat { margin-bottom: 36px; }
.gin-tvz-cat__title {
	font-size: 1.02rem; font-weight: 700; letter-spacing: 0;
	margin: 0 0 16px; color: var(--gin-ink); padding-bottom: 10px; border-bottom: 1px solid var(--gin-border);
}
.gin-tvz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.gin-tvz-item {
	display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px;
	background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border);
	border-radius: var(--gin-radius-sm); text-decoration: none; color: var(--gin-ink); font-weight: 600; font-size: .85rem;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.gin-tvz-item:hover { border-color: var(--gin-primary); color: var(--gin-primary); box-shadow: var(--gin-shadow-1); }
.gin-tvz-item__logowrap {
	width: 68px; height: 44px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	background: var(--gin-bg); border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm); overflow: hidden;
}
.gin-tvz-item__logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.gin-tvz-item__name { line-height: 1.25; }

/* Zenderpagina /tv-zenders/{slug}/. */
.gin-tvz-hero { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
.gin-tvz-hero__logo { width: 64px; height: 64px; object-fit: contain; border-radius: var(--gin-radius); border: 1px solid var(--gin-border); background: var(--gin-card, var(--gin-surface)); padding: 8px; flex: 0 0 auto; }
.gin-tvz-packages { display: flex; flex-direction: column; gap: 12px; }
.gin-tvz-package { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; background: var(--gin-card, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-radius-sm); }
.gin-tvz-package__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gin-ink); }
.gin-tvz-package__brand img { width: 40px; height: 40px; object-fit: contain; }
.gin-tvz-package__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .82rem; color: var(--gin-muted); text-align: right; }
.gin-tvz-package__price strong { font-size: 1rem; color: var(--gin-ink); }
.gin-tvz-back { margin-top: 28px; }

@media (max-width: 600px) {
	.gin-tvz-hero { flex-direction: column; align-items: flex-start; }
	.gin-tvz-package { flex-direction: column; align-items: flex-start; }
	.gin-tvz-package__price { align-items: flex-start; text-align: left; }
}

.gin-tv-inbegrepen { color: var(--gin-success); font-weight: 700; }


/* =========================================================================
 * Speedtest [gin_speedtest] (punt 63). Eigen SVG-boog, geen canvas-bibliotheek;
 * de waarde loopt live mee vanuit assets/js/gin-speedtest.js. Alleen
 * var(--gin-*), geen losse hex. Breakpoints 480/600/860.
 * ========================================================================= */
.gin-speedtest { margin-top: 28px; }
.gin-speedtest__tool {
	max-width: 480px; margin: 0 auto; text-align: center;
	background: var(--gin-card); border: 1px solid var(--gin-border); border-radius: var(--gin-radius);
	box-shadow: var(--gin-shadow-1); padding: 40px 28px 32px;
}
.gin-speedtest__meter { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; }
.gin-speedtest__ring { width: 100%; height: 100%; display: block; }
.gin-speedtest__track { fill: none; stroke: var(--gin-border); stroke-width: 14; }
.gin-speedtest__arc {
	fill: none; stroke: var(--gin-primary); stroke-width: 14; stroke-linecap: round;
	transform: rotate(-90deg); transform-origin: 100px 100px;
	transition: stroke-dashoffset .25s linear;
}
.gin-speedtest__readout {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.gin-speedtest__value { font-family: var(--gin-font-head); font-weight: 800; font-size: clamp(2rem, 6vw, 2.6rem); color: var(--gin-ink); line-height: 1; }
.gin-speedtest__unit { font-size: .82rem; font-weight: 700; color: var(--gin-muted); }
.gin-speedtest__btn { margin-top: 26px; min-width: 220px; }
.gin-speedtest__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.gin-speedtest__resbox {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	background: var(--gin-surface); border-radius: var(--gin-radius-sm); padding: 14px 8px;
}
.gin-speedtest__reslabel { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--gin-muted); }
.gin-speedtest__resvalue { font-family: var(--gin-font-head); font-weight: 800; font-size: 1.3rem; color: var(--gin-ink); }
.gin-speedtest__resunit { font-size: .74rem; color: var(--gin-muted); }
.gin-speedtest__error {
	margin-top: 22px; background: var(--gin-tint-2); border-radius: var(--gin-radius-sm); padding: 16px 18px;
}
.gin-speedtest__error p { margin: 0 0 12px; color: var(--gin-text); font-size: .92rem; }
.gin-speedtest__privacy { margin-top: 22px; font-size: .82rem; line-height: 1.55; color: var(--gin-muted); }
.gin-speedtest__duiding, .gin-speedtest__cta {
	max-width: 480px; margin: 22px auto 0;
	background: var(--gin-card); border: 1px solid var(--gin-border); border-radius: var(--gin-radius);
	padding: 28px; text-align: center;
}
.gin-speedtest__duiding h2, .gin-speedtest__cta h2 { margin: 0 0 10px; font-size: 1.2rem; }
.gin-speedtest__cta p { margin: 0 0 18px; color: var(--gin-text); }
.gin-speedtest__cta .gin-herocheck__row { margin-bottom: 0; }
.gin-speedtest__seo { margin-top: 48px; }
@media (max-width: 600px) {
	.gin-speedtest__tool { padding: 32px 20px 26px; }
	.gin-speedtest__btn { width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
	.gin-speedtest__results { gap: 8px; }
	.gin-speedtest__resbox { padding: 10px 6px; }
	.gin-speedtest__resvalue { font-size: 1.05rem; }
	.gin-speedtest__duiding, .gin-speedtest__cta { padding: 22px 16px; }
}

/* Tools: providercheck en omrekenen. */
.gin-tool { background: var(--gin-surface); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius, var(--gin-radius)); padding: 24px; margin: 18px 0; }
.gin-tool__privacy { color: var(--gin-muted); font-size: .88rem; margin: 10px 0 0; }
.gin-tool__hit { font-size: 1.15rem; }
.gin-tool__row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gin-tool__row label { font-weight: 700; color: var(--gin-ink); }
.gin-tool__input, .gin-tool__select { border: 1px solid var(--gin-border); border-radius: var(--gin-radius); padding: 10px 12px; font-size: 1rem; background: var(--gin-bg); color: var(--gin-ink); }
.gin-tool__input { width: 130px; }
.gin-tool__uitkomsten { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.gin-tool__kaart { flex: 1 1 120px; text-align: center; background: var(--gin-tint-1); border-radius: var(--gin-radius); padding: 16px 10px; }
.gin-tool__kaart strong { display: block; font-family: var(--gin-font-head); font-size: 1.4rem; color: var(--gin-primary); }
.gin-tool__kaart span { color: var(--gin-muted); font-size: .88rem; }
.gin-tool__voorbeelden { margin-top: 14px; }
.gin-tool__voorbeelden h3 { font-size: 1.02rem; margin-bottom: 6px; }

/* Social-proof-popup linksonder (ProveSource-model: tegel + tekst). */
.gin-sp { position: fixed; left: 18px; bottom: 18px; z-index: 9000; display: flex; align-items: center; gap: 12px; max-width: 360px; background: var(--gin-surface); border: 1px solid var(--gin-border); border-radius: var(--gin-radius); box-shadow: var(--gin-shadow-2); padding: 12px 34px 12px 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.gin-sp.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.gin-sp__tile { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--gin-radius); overflow: hidden; display: grid; place-items: center; background: var(--gin-tint-1); }
.gin-sp__tile svg, .gin-sp__tile img { width: 100%; height: 100%; display: block; object-fit: contain; }
.gin-sp__tile img { padding: 8px; box-sizing: border-box; }
.gin-sp__cijfer { font-family: var(--gin-font-head); font-weight: 800; font-size: 1.25rem; color: var(--gin-primary); }
.gin-sp__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: .9rem; color: var(--gin-text); }
.gin-sp__kop strong { color: var(--gin-primary); }
.gin-sp__regel { color: var(--gin-ink); }
.gin-sp__voet { display: flex; align-items: center; gap: 4px; color: var(--gin-muted); font-size: .78rem; margin-top: 3px; }
.gin-sp__voet svg { color: var(--gin-success); }
.gin-sp__tijd::after { content: "\00B7"; margin-left: 4px; }
.gin-sp__sluit { position: absolute; top: 4px; right: 8px; background: none; border: 0; color: var(--gin-muted); font-size: 1.1rem; cursor: pointer; padding: 2px; }
.gin-sp__sluit:hover { color: var(--gin-ink); }
@media (max-width: 600px) { .gin-sp { left: 10px; right: 10px; max-width: none; bottom: 10px; } }

/* De filter-sheet en zijn voet staan volledig in blok 1 (regel ~300). Hier
   stond een tweede, identieke set regels die de desktopvoet uit punt 13 weer
   op display:none zette. Verwijderd: alleen de mobiele chip-maatvoering
   blijft hier over. */
@media (max-width: 860px) {
	.gin-mfilters-chip { padding: 6px 12px; font-size: .84rem; font-weight: 600; }
}

/* Vergelijktabel in de overlay: op mobiel compact zodat 2 pakketten samen in
   beeld passen; labelkolom blijft plakken bij horizontaal scrollen. */
@media (max-width: 600px) {
  .gin-vs__table { min-width: 0; }
  .gin-vs__table th, .gin-vs__table td { padding: 9px 8px; font-size: .82rem; }
  .gin-vs__table th:first-child, .gin-vs__table td:first-child { position: sticky; left: 0; background: var(--gin-surface); z-index: 1; max-width: 108px; min-width: 96px; box-shadow: 2px 0 0 var(--gin-border); overflow-wrap: break-word; word-break: break-word; hyphens: auto; overflow: hidden; }
  .gin-vs__table thead th:first-child { background: var(--gin-surface); }
  .gin-compareoverlay__body h2 { font-size: 1.05rem; }
  .gin-compareoverlay__hint { display: block; }
}
.gin-compareoverlay__hint { display: none; margin: 0 0 10px; font-size: .8rem; color: var(--gin-muted); }

/* Vergelijkbalk mobiel: chips in 1 scrollende rij, acties eronder netjes. */
@media (max-width: 600px) {
  .gin-comparebar { flex-direction: column; align-items: stretch; gap: 8px; }
  .gin-comparebar__items { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .gin-comparebar__item { flex: 0 0 auto; }
  .gin-comparebar__actions { justify-content: space-between; width: 100%; }
  .gin-comparebar__actions .gin-btn { flex: 1 1 auto; text-align: center; margin-left: 10px; }
  .gin-comparebar__status { order: 0; }
}

/* Meldingen bij het sitereview-formulier. */
.gin-rev-melding { border-radius: var(--gin-radius); padding: 12px 16px; margin-bottom: 14px; font-weight: 600; font-size: .92rem; }
.gin-rev-melding--ok { background: var(--gin-tint-3, var(--gin-tint-1)); color: var(--gin-success); border: 1px solid var(--gin-success); }
.gin-rev-melding--fout { background: var(--gin-tint-1); color: var(--gin-danger); border: 1px solid var(--gin-danger); }

/* Sitereview-blok (vpnpower-model): scorekaart links, reviews rechts,
   formulier verborgen achter de "Schrijf een review"-knop. */
.gin-siterev__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.gin-siterev__score { background: var(--gin-surface); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius, var(--gin-radius)); padding: 26px 22px; text-align: center; }
.gin-siterev__kop { margin: 0 0 6px; font-size: 1.1rem; }
.gin-siterev__cijfer { display: block; font-family: var(--gin-font-head); font-size: 2.6rem; font-weight: 800; color: var(--gin-ink); line-height: 1.1; }
.gin-siterev__count { color: var(--gin-muted); font-size: .92rem; margin: 8px 0 16px; }
.gin-siterev__terug { margin: 0 0 16px; font-size: .92rem; }
.gin-siterev__terug a { color: var(--gin-primary); }
.gin-siterev__toggle summary { list-style: none; cursor: pointer; display: block; text-align: center; }
.gin-siterev__toggle summary::-webkit-details-marker { display: none; }
.gin-siterev__toggle[open] summary { display: none; }
.gin-siterev__toggle .gin-rev-form { text-align: left; margin-top: 8px; }
.gin-siterev__card { background: var(--gin-surface); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius, var(--gin-radius)); padding: 20px 22px; margin-bottom: 16px; }
.gin-siterev__cardkop { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.gin-siterev__wie { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gin-siterev__wie strong { color: var(--gin-ink); }
.gin-siterev__cardkop time { color: var(--gin-muted); font-size: .85rem; white-space: nowrap; align-self: flex-start; }
.gin-siterev__tekst { margin: 0; color: var(--gin-text); }
@media (max-width: 860px) { .gin-siterev__grid { grid-template-columns: minmax(0, 1fr); } }

.gin-rev-form__context { background: var(--gin-tint-1); border-radius: var(--gin-radius); padding: 10px 14px; font-size: .9rem; color: var(--gin-text); margin: 0 0 12px; }

.gin-rev-specs__adresnoot { margin: 12px 0 0; font-size: .9rem; color: var(--gin-muted); }


.gin-rev-cta__sub { margin: 6px auto 16px; max-width: 520px; color: var(--gin-muted); }
.gin-rev-cta__knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.gin-rev-cta .gin-btn--ghost { background: var(--gin-card); color: var(--gin-primary); border: 2px solid var(--gin-primary); box-shadow: none; }
/* Provider-check: "{naam} check" boven de reviewtekst. */
.gin-rev-check { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: center; margin: 28px 0 32px; padding: 28px; background: var(--gin-tint-1, var(--gin-surface)); border: 1px solid var(--gin-border); border-radius: var(--gin-app-radius); scroll-margin-top: 90px; }
.gin-rev-check__tekst h2 { margin: 6px 0 10px; }
.gin-rev-check__tekst p { margin: 0 0 14px; }
.gin-rev-check__usps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gin-rev-check__usps li { display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; }
.gin-rev-check__usps svg { flex: 0 0 18px; color: var(--gin-accent-2, var(--gin-primary)); margin-top: 2px; }
.gin-rev-check .gin-herocheck { max-width: none; }
.gin-rev-check .gin-herocheck__row > * { flex: 1 1 0; min-width: 0; }
.gin-rev-check .gin-herocheck__row input { width: 100%; }
@media (max-width: 860px) { .gin-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) {
  .gin-prijstabel td, .gin-prijstabel th { white-space: nowrap; }
  .gin-prijstabel td.gin-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. */
.gin-spin { display: inline-block; width: 16px; height: 16px; border: 3px solid var(--gin-on-primary-soft); border-top-color: var(--gin-on-primary); border-radius: 50%; animation: gin-spin .7s linear infinite; flex: 0 0 auto; }
.gin-btn.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: .9; }
.gin-gegevens__status.is-laden, .gin-adresblok__status.is-laden { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: var(--gin-radius-sm); background: var(--gin-tint-1, var(--gin-surface)); color: var(--gin-ink); font-weight: 600; font-size: .88rem; }
.gin-gegevens__status.is-laden::before, .gin-adresblok__status.is-laden::before { content: ""; display: inline-block; width: 18px; height: 18px; border: 3px solid var(--gin-border); border-top-color: var(--gin-primary); border-radius: 50%; animation: gin-spin .7s linear infinite; flex: 0 0 auto; }
.gin-results__count.is-laden { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gin-ink); }
.gin-results__count.is-laden::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 3px solid var(--gin-border); border-top-color: var(--gin-primary); border-radius: 50%; animation: gin-spin .7s linear infinite; flex: 0 0 auto; }
.gin-results__count.is-laden::after { content: "..."; }
.gin-cards.is-loading { opacity: .4; }
.is-adres-gevonden .gin-gegevens__ingevuld, .is-adres-gevonden .gin-adresblok__ingevuld { animation: gin-adres-ok 2.4s ease-out; border-radius: var(--gin-radius-sm); }
@keyframes gin-adres-ok { 0% { box-shadow: 0 0 0 0 var(--gin-success); } 25% { box-shadow: 0 0 0 4px var(--gin-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.
 * ========================================================================= */
.gin-review-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; max-width: none; margin-inline: 0; }
.gin-review-main .gin-prose { max-width: 780px; margin-inline: 0; }
.gin-sidebar__provcta { background: var(--gin-card); border: 1px solid var(--gin-border); border-radius: var(--gin-radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.gin-sidebar__provcta-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gin-sidebar__provcta-logo { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; padding: 6px; border: 1px solid var(--gin-border); border-radius: 10px; background: var(--gin-card); }
.gin-sidebar__provcta-logo img, .gin-sidebar__provcta-logo svg { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gin-sidebar__provcta-naam { flex: 1; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.gin-sidebar__provcta .gin-btn { width: 100%; justify-content: center; }
.gin-sidebar__provcta-sub { font-size: .8rem; color: var(--gin-muted); text-align: center; }
@media (max-width: 860px) {
	.gin-review-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.gin-review-main .gin-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).
 * ========================================================================= */
.gin-provgrid { align-items: stretch; }
.gin-provcard { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.gin-provcard__badge { position: absolute; top: -11px; left: 18px; padding: 3px 11px; border-radius: 999px; background: var(--gin-success); color: var(--gin-card); font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.gin-provcard__kop { display: flex; align-items: center; gap: 12px; }
.gin-provcard__logo { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; padding: 8px; border: 1px solid var(--gin-border); border-radius: 12px; background: var(--gin-card); text-decoration: none; font-weight: 800; color: var(--gin-ink); }
.gin-provcard__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gin-provcard__titel { flex: 1; min-width: 0; }
.gin-provcard__titel h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.gin-provcard__titel h2 a { color: var(--gin-ink); text-decoration: none; }
.gin-provcard__titel h2 a:hover { color: var(--gin-primary); }
.gin-provcard__scorelabel { display: block; margin-top: 2px; font-size: .78rem; color: var(--gin-muted); }
.gin-provcard__sam { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--gin-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gin-provcard__feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gin-provcard__feiten li { font-size: .78rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--gin-surface); border: 1px solid var(--gin-border); color: var(--gin-ink); }
.gin-provcard__prijs { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--gin-border); display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.gin-provcard__vanaf { font-size: .82rem; color: var(--gin-muted); }
.gin-provcard__prijs strong { font-size: 1.35rem; color: var(--gin-ink); }
.gin-provcard__mnd { font-size: .85rem; color: var(--gin-muted); }
.gin-provcard__actie { flex-basis: 100%; font-size: .8rem; color: var(--gin-muted); }
.gin-provcard__acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gin-provcard__acties .gin-btn { justify-content: center; padding-inline: 10px; font-size: .88rem; white-space: nowrap; }
.gin-provgrid__cta { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: var(--gin-radius); background: var(--gin-tint-1); flex-wrap: wrap; }
.gin-provgrid__cta h2 { margin: 0 0 6px; font-size: 1.35rem; }
.gin-provgrid__cta p { margin: 0; color: var(--gin-muted); max-width: 60ch; }
.gin-archive-head__meta { margin: 10px auto 0; font-size: .85rem; color: var(--gin-muted); }
@media (max-width: 600px) {
	.gin-provcard { padding: 18px; }
	.gin-provcard__acties { grid-template-columns: minmax(0, 1fr); }
	.gin-provgrid__cta { padding: 22px; }
	.gin-provgrid__cta .gin-btn { width: 100%; justify-content: center; }
}

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