/* ============================================================================
   collectie.css — facetfilters, resultatenbalk en productkaarten van de
   collectie- en alles-pagina. Hoort bij views/collectie.ejs.
   Design-tokens komen uit stijl.css (fundament); hier staat geen enkele
   losse kleurwaarde die niet uit de spec komt.

   Twee dingen die hier bewust anders zijn dan in stijl.css:
   1. Productfoto's staan in een VAST kader met object-fit: contain. Bijna de
      helft van de foto's is staand of liggend; met `cover` sneed daar tot een
      derde van het beeld af. Contain laat de hele foto zien, het kader houdt
      het raster recht.
   2. Het filterpaneel is één <details>. Zonder JavaScript staat hij open
      (alle filters direct bruikbaar); public/js/collectie.js klapt hem op
      smalle schermen dicht.
   ========================================================================== */

/* ----- Indeling: filters links, resultaten rechts ------------------------- */
.collectie-indeling {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .collectie-indeling {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 2.5rem;
  }
  /* Geen filters te tonen: geen lege kolom laten staan. */
  .collectie-indeling--breed { grid-template-columns: minmax(0, 1fr); }
}

/* ----- Filterpaneel ------------------------------------------------------- */
/* De KOLOM (het formulier) loopt bewust over de volle hoogte van de rij — dat
   is de ruimte waarbinnen het paneel mag meeschuiven. Zou het formulier zelf
   sticky zijn, dan had het geen speelruimte en bleef het gewoon stilstaan. */
.filters { min-width: 0; }

.filters__paneel {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: 0.25rem 1rem 1rem;
}
@media (min-width: 900px) {
  .filters__paneel {
    position: sticky;
    /* De site-kop is zelf sticky, 61 px hoog en heeft z-index 50. Op top: 1rem
       schoof de filterkop daar precies achter zodra je begon te scrollen, en
       zag je de bovenste regel van het paneel niet meer. 5,5rem is dezelfde
       afstand die .wagen-overzicht en .afrekenen-overzicht al aanhouden. */
    top: 5.5rem;
    /* Eigen scroll zodra de filterlijst langer wordt dan het scherm. */
    max-height: calc(100vh - 6.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.filters__samenvatting {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-kop);
  font-weight: 600;
  padding: 0.85rem 0.1rem;
}
.filters__samenvatting::-webkit-details-marker { display: none; }
.filters__samenvatting::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  margin-left: auto;
  border-right: 2px solid var(--kleur-aqua);
  border-bottom: 2px solid var(--kleur-aqua);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 120ms ease;
}
.filters__paneel[open] .filters__samenvatting::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.filters__samenvatting:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: -3px;
  border-radius: var(--radius-veld);
}
.filters__teller {
  background: var(--kleur-aqua);
  color: var(--kleur-wit);
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-knop);
}
@media (min-width: 900px) {
  /* Op desktop staat het paneel altijd open: de samenvatting is dan geen knop
     maar ruis. collectie.js zorgt dat `open` hier nooit weggaat. */
  .filters__samenvatting { display: none; }
  .filters__paneel { padding-top: 1rem; }
}

.facet {
  border: 0;
  border-top: 1px solid rgba(16, 36, 62, 0.12);
  padding: 0.9rem 0 0.1rem;
  margin: 0;
}
.facet:first-of-type { border-top: 0; padding-top: 0.25rem; }
.facet__kop {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
  margin-bottom: 0.45rem;
}
.facet__lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.1rem;
}
.facet__item { display: flex; align-items: center; }
.facet__vinkje {
  /* Het vinkje blijft een echt vinkje (toetsenbord + schermlezer), maar we
     leggen het onder het label zodat de hele regel klikbaar is. */
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: none;
  accent-color: var(--kleur-aqua);
  cursor: pointer;
}
.facet__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.15rem 0.35rem 0.55rem;
  font-size: 0.92rem;
  line-height: 1.3;
  cursor: pointer;
  border-radius: var(--radius-veld);
}
.facet__label:hover { background: rgba(255, 255, 255, 0.7); }
.facet__vinkje:focus-visible {
  outline: 3px solid var(--kleur-aqua);
  outline-offset: 2px;
}
.facet__vinkje:checked + .facet__label { font-weight: 700; }
.facet__naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facet__aantal {
  margin-left: auto;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  flex: none;
}
/* Kleur nooit als enige drager van betekenis: de swatch staat naast de naam. */
.facet__swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid rgba(16, 36, 62, 0.3);
  flex: none;
}
/* Geen treffers binnen de huidige combinatie: uitgeschakeld, niet weggehaald,
   zodat het paneel niet onder je handen verspringt. */
.facet__item--uit { opacity: 0.45; }
.facet__item--uit .facet__label,
.facet__item--uit .facet__vinkje { cursor: not-allowed; }
.facet__item--uit .facet__label:hover { background: none; }
.facet__item--uit .facet__naam { text-decoration: line-through; }

/* Terwijl de nieuwe selectie geladen wordt (collectie.js verzendt zichzelf). */
.filters[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.filters__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding-top: 1rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(16, 36, 62, 0.12);
}
.filters__wis { font-size: 0.9rem; font-weight: 700; }

/* ----- Resultatenbalk ----------------------------------------------------- */
.resultaten { min-width: 0; }
.resultaten__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.resultaten__aantal { margin: 0; font-size: 0.95rem; }
.resultaten__van { opacity: 0.7; }
.resultaten__voorraad {
  color: var(--kleur-groen);
  font-weight: 700;
}
.resultaten__voorraad::before { content: "· "; color: var(--kleur-navy); font-weight: 400; opacity: 0.4; }
/* Staat er in deze lijst niets klaar, dan zegt deze regel dat. Rustig, geen
   rood: uitverkocht is geen fout van de bezoeker. */
.resultaten__alles-uit {
  margin: 0;
  font-size: 0.95rem;
  color: var(--kleur-navy);
  opacity: 0.8;
}

/* De chips met de actieve filters, de tussenkop "Tijdelijk uitverkocht" en de
   productkaart (.pkaart) staan in shop.css: die drie deelt deze pagina met de
   home en de zoekresultaten, en shop.css wordt daar allemaal geladen. */

@media (prefers-reduced-motion: reduce) {
  .filters__samenvatting::after { transition: none; }
}

/* ----- Lege staat --------------------------------------------------------- */
.leeg {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.leeg h2 { margin-bottom: 0.4rem; }
.leeg p { max-width: 34rem; margin-inline: auto; }
.leeg__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0;
}