/* ==========================================================================
   pb-favorites.css
   Patty Bakker — /favorieten/
   --------------------------------------------------------------------------
   DE TEGEL STAAT HIER NIET MEER
   Dit bestand had een eigen producttegel: witte kaart met een foto van 160px,
   een Manrope-titel, de prijs als accentkleurige pil in witte tekst en een
   brede bruine knop met een ». Dat was een tweede ontwerp naast de tegel op
   /must-haves/, de winkel, de categoriepagina's, de zoekpagina en de
   gerelateerde producten - en het week op elk punt af.

   De favorietenlijst gebruikt dezelfde markup als de WooCommerce-loop
   (ul.products > li.product met .woocommerce-loop-product__title, .price en
   a.button; zie pb-favorites.js), dus die tegel hoefde niet nagebouwd te
   worden: styles/pb-product-tegel.css noemt `.pb-favorites-list ul.products
   li.product` nu naast de andere plekken. Eén set declaraties, zes plekken.

   Wat hier overblijft is wat écht eigen is aan deze pagina: het raster en de
   lege staat.

   Let op: pb-product-tegel.css moet ná dit bestand laden. Dat gebeurt ook -
   het paginabestand gaat via $page_map en de tegel verderop in functions.php -
   maar bij gelijke specificiteit wint de laatste, dus die volgorde is niet
   toevallig.
   ========================================================================== */

/* Het raster. Anders dan .shop-row op de andere pagina's: daar staat een vast
   aantal kolommen omdat er een rij van bekend formaat staat, hier is het een
   lijst die van één tot tientallen producten lang kan zijn. Vandaar auto-fill.
   De tussenruimte is wel dezelfde 18px, en align-items:stretch zorgt net als
   daar dat alle kaarten in een rij even hoog zijn. */
.pb-favorites-list ul.products{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lege staat: "je hebt nog geen favorieten". */
.pb-fav-empty{
  padding: 6px 0 30px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}