/* theme/astra-child/assets/css/shop.css
 *
 * Shop en categorie-archief delen dit bestand -- het zijn dezelfde tegels.
 * Productfoto's staan op een wit paneel: de bol-foto's hebben uiteenlopende
 * achtergronden en dat kadert ze coherent.
 */

.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
  margin: 0;
}

.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
}

/* De centrering hangt aan .dg-kaart omdat Astra de tegel links uitlijnt via de
 * Customizer-klasse `.woocommerce ul.products li.product.desktop-align-left`,
 * goed voor (0,4,2). Zonder de eigen klasse erbij weegt deze regel (0,3,2) en
 * komt text-align nooit aan -- gemeten op 2026-07-30. */
.woocommerce ul.products li.product.dg-kaart {
  /* Eén bron voor het gat onder het paneel: de badge hangt aan Astra's
   * thumbnail-wrap, en die neemt dit gat mee in zijn hoogte. Zonder gedeelde
   * waarde zakt de badge onder het paneel zodra dit getal verandert. */
  --dg-kaart-gat: 0.75rem;
  text-align: center;
}

.dg-kaart__paneel {
  background: var(--dg-wit);
  border-radius: var(--dg-radius);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-block-end: var(--dg-kaart-gat, 0.75rem);
}

.dg-kaart__paneel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* vlakt afwijkende witjes in bol-foto's af */
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "Libre Baskerville", Georgia, serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--dg-zwart);
  padding: 0;
}

.woocommerce ul.products li.product .price {
  color: var(--dg-zwart);
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
}

/* Badges linksonder op het paneel, conform de merkregel.
 *
 * Astra plaatst de badge zelf rechtsboven met
 * `.woocommerce-js ul.products li.product .onsale` en een negatieve marge; die
 * selector weegt (0,4,2). Een kortere selector laat daardoor `top: 0` en
 * `right: 0` staan, en samen met onze `inset-block-end` rekt de badge dan uit
 * tot een strook over de volle hoogte (gemeten: 30 x 270 px). Deze selector
 * weegt (0,4,3) en wint dus op eigen kracht, zonder !important. De marge moet
 * mee terug naar nul, anders steekt de badge buiten het paneel.
 *
 * Het aanknopingspunt is Astra's .astra-shop-thumbnail-wrap (position: relative),
 * niet het paneel zelf -- Astra stuurt de badge namelijk uit vóór onze <div>
 * opengaat. Die wrap is precies --dg-kaart-gat hoger dan het paneel (gemeten:
 * 272,7 vs 260,7 px), dus dat gat telt mee in de afstand tot onderen. */
.woocommerce ul.products li.product span.onsale {
  position: absolute;
  inset-block-start: auto;
  inset-block-end: calc(var(--dg-kaart-gat, 0.75rem) + 0.5rem);
  inset-inline-start: 0.5rem;
  inset-inline-end: auto;
  margin: 0;
  background: var(--dg-koraal);
  color: var(--dg-wit);
  border-radius: var(--dg-radius);
  min-height: auto;
  min-width: auto;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  line-height: 1.4;
}