/* Raamdecoland - de productkaart: één ontwerp voor alle lijsten (rdl_productkaart_html() in landing.php).
   Soortpagina en hoofdcategorie (ul.rdl-lp-kaarten), winkel, categorie-archief en zoekresultaten (ul.products,
   via woocommerce/content-product.php), ruimtepagina's. Het raster zelf hoort bij de lijst, niet bij de kaart.
   Varianten: --soort (zonder soortnaam en stof) en --gemengd (met soortnaam en stof).
   Kleuren en maten uit tokens.css (met een terugval, zodat de kaart ook zonder tokens leesbaar blijft).
   Labels: alleen "Bestseller" (wit, magenta rand, #C4006A tekst) en "Nieuw" (lime, donker). Stalenknop: wit, 2px
   magenta rand, #C4006A tekst; gekozen = lime-tint, 2px ink rand en lime vinkbolletje. Prijs (bedrag) in #C4006A. */

.rdl-lp-kaart { position: relative; display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--rdl-rand); border-radius: var(--rdl-radius, 12px); background: #fff; font-family: var(--rdl-font-tekst, Figtree, sans-serif); color: var(--rdl-tekst); text-align: left; }
.rdl-lp-kaart[hidden] { display: none; }
.rdl-lp-kaart *, .rdl-lp-kaart *::before, .rdl-lp-kaart *::after { box-sizing: border-box; }
/* Hover (alleen met muis): 2px magenta rand als outline over de 1px rand, zodat niets verspringt. */
@media (hover: hover) { .rdl-lp-kaart:hover { outline: 2px solid var(--rdl-magenta); outline-offset: -1px; } }

/* Foto: eigen link, altijd vierkant 1:1. De foto vult het vak (cover, midden), zodat een 4:3-foto geen lege balk
   geeft (UX-fix 16 okt 2026). Dubbele klasse: .rdl-lp img (landing.css) en .woocommerce img zetten de hoogte anders
   op auto. Alle kaarten in een rij zijn even hoog. */
.rdl-lp-kaart__beeld { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--rdl-foto-vlak, #e9ebe6); }
.rdl-lp-kaart .rdl-lp-kaart__beeld img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.rdl-lp-kaart__geenbeeld { display: block; width: 100%; height: 100%; }

.rdl-lp-kaart__label { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: var(--rdl-radius-pil, 999px); font-size: 12px; font-weight: 700; line-height: 1.3; pointer-events: none; }
.rdl-lp-kaart__label--bestseller { border: 1.5px solid var(--rdl-magenta); background: #fff; color: var(--rdl-magenta-ink); }
.rdl-lp-kaart__label--nieuw { background: var(--rdl-lime); color: var(--rdl-tekst); }

.rdl-lp-kaart__tekst { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; padding: 10px 10px 10px; }
.rdl-lp-kaart__soort { font-size: 12px; line-height: 1.3; color: var(--rdl-tekst-grijs); }
.rdl-lp-kaart .rdl-lp-kaart__naam { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--rdl-tekst); text-decoration: none; overflow-wrap: anywhere; }
.rdl-lp-kaart .rdl-lp-kaart__naam:hover { text-decoration: underline; text-underline-offset: 2px; }
.rdl-lp-kaart .rdl-lp-kaart__naam:focus-visible { outline: var(--rdl-focus, 2px solid var(--rdl-ink)); outline-offset: 2px; }
.rdl-lp-kaart__naam small { font-size: 13px; font-weight: 400; color: var(--rdl-tekst-grijs); white-space: nowrap; }
.rdl-lp-kaart__stof { font-size: 13px; line-height: 1.3; color: var(--rdl-tekst-grijs); }

/* Kleurbolletjes van de andere kleuren (een staal blijft een vierkantje met radius) */

.rdl-lp-kaart__prijs { margin-top: 2px; font-size: 14px; color: var(--rdl-tekst-grijs); }
.rdl-lp-kaart__prijs strong { color: var(--rdl-magenta-ink); }

/* Kleurstaal: een knop over de breedte van de kaart (tikvlak 44px). Wit met magenta rand = toevoegen, lime gevuld =
   toegevoegd; nog een keer klikken haalt het staal weg. Eronder zit het vinkje met data-rdl-staal (kleurstalen.php). */
.rdl-lp-kaart__staal { display: block; margin: 0 10px 10px; cursor: pointer; }
.rdl-lp-kaart__staal input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.rdl-lp-kaart__staalknop { display: flex; align-items: center; justify-content: center; min-height: var(--rdl-tik, 44px); padding: 6px 8px; border: 2px solid var(--rdl-magenta); border-radius: var(--rdl-radius, 12px); background: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--rdl-magenta-ink); text-align: center; }
.rdl-lp-kaart__staal:hover .rdl-lp-kaart__staalknop { color: var(--rdl-magenta-hover); text-decoration: underline; text-underline-offset: 2px; }
.rdl-lp-kaart__staalknop .is-aan, .rdl-lp-kaart__staalknop .is-lang { display: none; }
/* Gekozen: lime-tint + 2px ink rand + lime vinkbolletje (nooit alleen een lime rand) */
.rdl-lp-kaart__staal input:checked + .rdl-lp-kaart__staalknop { border-color: var(--rdl-ink); background: var(--rdl-lime-tint); color: var(--rdl-ink); text-decoration: none; }
.rdl-lp-kaart__staal input:checked + .rdl-lp-kaart__staalknop .is-uit { display: none; }
.rdl-lp-kaart__staal input:checked + .rdl-lp-kaart__staalknop .is-aan { display: inline-flex; align-items: center; gap: 6px; }
.rdl-lp-kaart__staal input:focus-visible + .rdl-lp-kaart__staalknop { outline: var(--rdl-focus, 2px solid var(--rdl-ink)); outline-offset: 2px; }

@media (min-width: 768px) {
  .rdl-lp-kaart__tekst { padding: 12px 14px; }
  .rdl-lp-kaart .rdl-lp-kaart__naam { font-size: 16px; }
  .rdl-lp-kaart__staal { margin: 0 14px 14px; }
  .rdl-lp-kaart__staalknop .is-lang { display: inline; }
  .rdl-lp-kaart__staalknop .is-kort { display: none; }
}

/* Hele kaart klikbaar (17 okt 2026): de link met de naam strekt zich over de kaart uit. Geen geneste <a>:
 * de staalknop staat erboven (z-index) en blijft een eigen bediening. */
.rdl-lp-kaart .rdl-lp-kaart__naam::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rdl-lp-kaart .rdl-lp-kaart__staal { position: relative; z-index: 2; }
.rdl-lp-kaart:hover { cursor: pointer; }