/*
 * Onderdelen van de plugin: kaart, filterknoppen en de labels op een
 * kerstrecept. De paginastijl zelf staat in kerst-pagina.css (letterlijk
 * overgenomen uit pagina 8269).
 */

/* Kaart: hele kaart klikbaar, foto vult het vlak */
.ps-kerst .psk-kaart { position: relative; }
.ps-kerst .psk-foto { padding: 0; overflow: hidden; }
.ps-kerst .psk-foto img,
.ps-kerst .psk-foto .ps-tegels { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-kerst .psk-kaart:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Filterknoppen */
.ps-kerst .psk-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.ps-kerst .psk-knop {
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid #CCCAC5; border-radius: 999px;
  background: #fff; color: var(--k-ink); cursor: pointer;
}
.ps-kerst .psk-knop:hover { border-color: var(--k-gold-dark); }
.ps-kerst .psk-knop[aria-pressed="true"] { background: var(--k-ink); border-color: var(--k-ink); color: #fff; }
.ps-kerst .psk-knop:focus-visible { outline: 3px solid var(--k-gold-dark); outline-offset: 3px; }
.ps-kerst .psk-aantal { font-size: 14px; color: var(--k-muted); margin: 0 0 18px; }
.ps-kerst .psk-leeg { color: var(--k-text); }

/* Op de receptpagina van een kerstrecept (buiten .ps-kerst) */
.psk-recept-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.psk-recept-labels .k-label {
  font-size: 12px; font-weight: 600; color: #5E461A;
  background: #F6ECD4; border: 1px solid #E2CB95; border-radius: 999px; padding: 4px 10px;
}
.psk-recept-noot { font-size: 15px; color: var(--ps-ink-soft, #4A413A); margin: 8px 0 0; }