/* Pariteit met live (2026-09-30): kopen. Alles hangt onder main.koopoverzicht
   (page-kopen.php), zodat dit bestand op andere pagina's niets raakt. */

/* Raster: live zet elke drie kaarten in een eigen .row (op 768-991px twee per
   rij), zodat een rij pas begint onder de hoogste kaart van de vorige. Met een
   grid krijgen we hetzelfde zonder extra markup. */
/* Mobiel: gewone blokken onder elkaar, zodat de marges samenvallen zoals live. */
.koopoverzicht .koopgids > .koopgidsItem { float: none; width: auto; min-width: 0; margin: 10px 0; }
@media (min-width: 768px) {
	.koopoverzicht .koopgids { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.koopoverzicht .koopgids::before,
	.koopoverzicht .koopgids::after { content: none; display: none; } /* clearfix van .row zou een lege gridcel worden */
}
@media (min-width: 992px) {
	.koopoverzicht .koopgids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kaart: foto links (max. 200px hoog), tekst ernaast, knoppen eronder. */
.koopoverzicht .koopgidsImgP { float: left; width: auto; margin: 0 20px 10px 0; }
.koopoverzicht .koopgidsIMG { width: auto; max-height: 200px; }
.koopoverzicht .koopgidsItem > .row::after { content: ""; display: table; clear: both; }
.koopoverzicht .koopgidsItem > p { margin: 0 0 10px; }
.koopoverzicht .koopgidsItem .btn.koopgidsButton + .btn { margin-top: 0; }
.koopoverzicht .koopgidsColorsUl > li { width: auto; }

/* Kleurbolletjes (live: .color-example + {kleur}Menu). */
.koopoverzicht .color-example {
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
	background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.01) 0%, rgba(255, 255, 255, 0.1) 100%);
}
.koopoverzicht .color-example[data-kleur='zilver']     { background-color: #dddfde; }
.koopoverzicht .color-example[data-kleur='goud']       { background-color: #e3d0ba; }
.koopoverzicht .color-example[data-kleur='rood']       { background-color: #f8242d; }
.koopoverzicht .color-example[data-kleur='roségoud']   { background-color: #edccbd; }
.koopoverzicht .color-example[data-kleur='roze']       { background-color: #ff706c; }
.koopoverzicht .color-example[data-kleur='spacegrijs'] { background-color: #abaeb1; }
.koopoverzicht .color-example[data-kleur='grafiet']    { background-color: #61605c; }
.koopoverzicht .color-example[data-kleur='wit']        { background-color: #fff; }
.koopoverzicht .color-example[data-kleur='zwart']      { background-color: #1f1b1b; }
.koopoverzicht .color-example[data-kleur='gitzwart']   { background-color: #000; }
.koopoverzicht .color-example[data-kleur='blauw']      { background-color: #42b3ed; }
.koopoverzicht .color-example[data-kleur='geel']       { background-color: #fef16f; }
.koopoverzicht .color-example[data-kleur='groen']      { background-color: #99e368; }
.koopoverzicht .color-example[data-kleur='koraal']     { background-color: #ff5733; }
.koopoverzicht .color-example[data-kleur='blauwgroen'] { background-color: #42b3ed; }

/* Providerlogo's in de paginatekst: live één rij kleine logo's. */
.koopoverzicht .providersList { list-style: none; margin: 0; padding: 0; }
.koopoverzicht .providersList li { display: inline-block; margin: 10px 10px 0; }
.koopoverzicht .providersList li:first-child { margin-left: 0; }
.koopoverzicht .providersList li img { max-width: 120px; height: auto; }