- in plaats van een
omdat er per kaart
nog een regel bij hoort; daarom is dit een eigen klasse. */
.upsell-raster {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 700px) {
.upsell-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 980px) {
.upsell-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
}
/* De kaart rekt tot de hoogste van de rij, zodat de verschilregels op één lijn
staan ook als de ene productnaam over twee regels loopt en de andere niet. */
.upsell-item { display: flex; flex-direction: column; gap: 0.6rem; }
.upsell-item > .kaart { flex: 1; }
.upsell-item__meer {
margin: 0;
padding: 0.5rem 0.9rem;
border-radius: var(--radius-veld);
background: var(--kleur-zwembad);
font-size: 0.9rem;
line-height: 1.4;
}
.upsell-item__meer strong { white-space: nowrap; }
/* ----- Nieuwsbrief met welkomstkorting (onder de slot-CTA) ---------------- */
.nieuwsbrief {
margin: 2rem auto 0;
max-width: 34rem;
text-align: center;
}
.nieuwsbrief__kop { margin-bottom: 0.9rem; }
.nieuwsbrief__kop strong { color: var(--kleur-geel); }
.nieuwsbrief__rij {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
}
/* Het label hoort erbij voor schermlezers, maar zou de rij visueel opbreken. */
.nieuwsbrief__label {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nieuwsbrief__veld {
flex: 1 1 15rem;
min-width: 0;
padding: 0.7rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: var(--kleur-wit);
font: inherit;
}
.nieuwsbrief__veld::placeholder { color: rgba(255, 255, 255, 0.6); }
.nieuwsbrief__veld:focus-visible {
outline: 3px solid var(--kleur-geel);
outline-offset: 2px;
background: rgba(255, 255, 255, 0.14);
}
.nieuwsbrief__knop { flex: 0 0 auto; }
.nieuwsbrief__klein {
margin: 0.7rem 0 0;
font-size: 0.85rem;
opacity: 0.75;
}
/* Honeypot: uit beeld, maar niet display:none — sommige bots slaan verborgen
velden over en juist die willen we vangen. */
.honeypot {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
.nieuwsbrief-bedankt__knop { margin-top: 1.5rem; }
/* De tweede kop binnen het suggestievlak krijgt lucht boven zich, zodat de
twee rijen niet aan elkaar plakken nu ze dezelfde achtergrond delen. */
.suggesties__tweede-kop { margin-top: 2.5rem; }