/**
 * SIW Upsells — basisopmaak.
 *
 * Bewust kaal en met variabelen: elk thema moet dit kunnen overnemen zonder
 * tegen !important aan te lopen. Alleen wat nodig is om het blok bruikbaar te
 * maken staat hier; kleuren en lettertypes komen van het thema.
 */

.siw-upsells {
  --siw-up-kaart: 12rem;          /* minimale breedte van een kaart */
  --siw-up-gat: 1rem;
  margin-block: 2rem;
}

.siw-upsells__kop {
  margin-block-end: 0.25rem;
  font-size: 1.25rem;
}

.siw-upsells__onderkop {
  margin-block-end: 1rem;
  opacity: 0.8;
}

/* Een rij die schuift. Grid met scroll-snap geeft vegen, muiswiel, toetsenbord
   en focus gratis; er is geen carrousel-bibliotheek voor nodig.
 *
 * De kolombreedte hangt aan het ingestelde aantal, niet aan hoeveel producten
 * de motor vond. Met minmax(..., 1fr) rekten drie kaarten zich uit over de hele
 * breedte en waren ze dus groter dan bij vier: hetzelfde blok zag er per pagina
 * anders uit. Nu houdt een kaart zijn maat en blijft de laatste plek leeg.
 *
 * De max() eromheen is de ondergrens: op een telefoon is een vierde van het
 * scherm te smal, dan valt hij terug op --siw-up-kaart en kun je schuiven. */
.siw-upsells__rij {
  --siw-up-per-beeld: 4;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(
    var(--siw-up-kaart),
    calc((100% - (var(--siw-up-per-beeld) - 1) * var(--siw-up-gat)) / var(--siw-up-per-beeld))
  );
  gap: var(--siw-up-gat);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block-end: 0.5rem;
  /* Padding op een scroll-snap-rij werkt alleen mét scroll-padding, anders
     schuift de browser precies die padding meteen weer terug. */
  padding-inline: 0;
  scroll-padding-inline: 0;
}

.siw-upsells__item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;   /* anders krimpt een grid-item niet onder zijn inhoud */
}

.siw-upsells__knop {
  margin-block-start: 0.5rem;
  inline-size: 100%;
}

/* Ging het toevoegen mis, dan zegt PrestaShop waarom. Dat laten we zien in
   plaats van stil te blijven hangen. */
.siw-upsells__knop[data-siw-upsell-fout]::after {
  content: " " attr(data-siw-upsell-fout);
  font-size: 0.85em;
}

@media (max-width: 575.98px) {
  .siw-upsells {
    --siw-up-kaart: 9rem;
  }
}