/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2026 | 15:10:35 */
/* Productrasters op archiefpagina's, 8 september 2026.

   WooCommerce zet de klassen "first" en "last" alsof er vier producten per rij
   staan (de lijst heeft columns-4), terwijl het thema er drie toont. Aan die
   klassen hangt een clear, dus zodra twee kaartjes niet even hoog waren viel een
   rij uit elkaar en stond er soms een product in zijn eentje. Hieronder wordt het
   een echt raster: geen floats, geen clears, gelijke kolommen en gelijke hoogtes.

   Geldt voor categorie-, merk-, winkel- en zoekpagina's. Losse productpagina's
   (gerelateerde producten, upsells) blijven zoals ze waren. */

body.archive.woocommerce ul.products,
body.woocommerce-shop ul.products,
body.search.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 36px;
  row-gap: 42px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* de clearfix-pseudo's zouden anders zelf een rastercel vullen */
body.archive.woocommerce ul.products::before, body.archive.woocommerce ul.products::after,
body.woocommerce-shop ul.products::before, body.woocommerce-shop ul.products::after,
body.search.woocommerce ul.products::before, body.search.woocommerce ul.products::after {
  content: none !important;
  display: none !important;
}

body.archive.woocommerce ul.products > li.product,
body.woocommerce-shop ul.products > li.product,
body.search.woocommerce ul.products > li.product {
  float: none !important;
  clear: none !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
}

/* prijs onderaan de kaart, zodat die binnen een rij op dezelfde hoogte staat */
body.archive.woocommerce ul.products > li.product .price,
body.woocommerce-shop ul.products > li.product .price,
body.search.woocommerce ul.products > li.product .price {
  margin-top: auto !important;
}

/* de doosjes verschillen in verhouding; een vast vak houdt ze op een lijn */
body.archive.woocommerce ul.products > li.product a img,
body.woocommerce-shop ul.products > li.product a img,
body.search.woocommerce ul.products > li.product a img {
  width: 100% !important;
  height: 230px !important;
  object-fit: contain !important;
  margin-bottom: 14px !important;
}

@media only screen and (max-width: 980px) {
  body.archive.woocommerce ul.products,
  body.woocommerce-shop ul.products,
  body.search.woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 32px;
  }
  body.archive.woocommerce ul.products > li.product a img,
  body.woocommerce-shop ul.products > li.product a img,
  body.search.woocommerce ul.products > li.product a img { height: 200px !important; }
}

/* op de telefoon een kolom, zoals het nu ook al was */
@media only screen and (max-width: 767px) {
  body.archive.woocommerce ul.products,
  body.woocommerce-shop ul.products,
  body.search.woocommerce ul.products {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 36px;
  }
  body.archive.woocommerce ul.products > li.product a img,
  body.woocommerce-shop ul.products > li.product a img,
  body.search.woocommerce ul.products > li.product a img { height: auto !important; }
}