/* ==================================================================
   Nova Septem - Afwerking productoverzicht (categorie, shop, zoeken)

   Bovenop assets/css/jh-woo-archive.css. Doel: rustiger raster, gelijke
   kaarthoogtes, uniforme productfoto's en een duidelijke hierarchie
   tussen categorie, naam, artikelnummer, prijs en de bestelknop.
   ================================================================== */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  display: flex;
  flex-direction: column;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 10px 12px 12px !important;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,16,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(16,24,16,.10);
}

/* ---- Productfoto: altijd hetzelfde vlak, ongeacht de aanlevering ---- */

.woocommerce ul.products li.product .leftcol{
  position: relative;
  background: #f7f9f4;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.woocommerce ul.products li.product .leftcol img,
.woocommerce ul.products li.product .jh-thumbwrap img{
  display: block;
  width: 100%;
  /* Een vierkant vlak maakte de kaart onnodig hoog. Een vaste hoogte houdt
     de kaarten compact en de foto's onderling nog steeds gelijk. */
  height: 150px;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: transparent;
  transition: transform .25s ease;
}

.woocommerce ul.products li.product:hover .leftcol img{
  transform: scale(1.03);
}

/* ---- Verlanglijst: een rustig hartje in plaats van een fel rood icoon ---- */

.woocommerce ul.products li.product [class*="wishlist"]{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  margin: 0 !important;
}

.woocommerce ul.products li.product [class*="wishlist"] a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,16,.12);
  color: #b3bcb0;
  transition: color .15s ease, transform .15s ease;
}

.woocommerce ul.products li.product [class*="wishlist"] a:hover{
  color: #c0403f;
  transform: scale(1.06);
}

.woocommerce ul.products li.product [class*="wishlist"] i,
.woocommerce ul.products li.product [class*="wishlist"] svg{
  color: inherit !important;
  fill: currentColor;
  font-size: 16px;
  width: 17px;
  height: 17px;
}

/* Toegevoegd aan de lijst blijft wel gewoon rood. */
.woocommerce ul.products li.product [class*="wishlist"] .added a,
.woocommerce ul.products li.product [class*="wishlist"] a.added{
  color: #c0403f;
}

/* ---- Tekstblok ---- */

/* Het tekstblok niet laten uitrekken, anders valt er een gat tussen het
   artikelnummer en de prijs. De bestelrij duwt zichzelf al naar onderen. */
.woocommerce ul.products li.product .middlecol{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product h3.catnamearc{
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: #8a9486 !important;
  margin: 0 0 6px !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 15.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #1e2a17 !important;
  margin: 0 0 4px !important;
  /* Twee regels vast, zodat alle kaarten even hoog blijven. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title{
  color: #476930 !important;
}

.woocommerce ul.products li.product .specs .spec p{
  font-size: 12px !important;
  color: #8a9486 !important;
  margin: 0 !important;
  line-height: 1.3;
}

.woocommerce ul.products li.product .excerpt{
  font-size: 13px;
  color: #5f6b57;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Prijs ---- */

.woocommerce ul.products li.product .price{
  display: block;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #476930 !important;
  margin: 6px 0 10px !important;
}

.woocommerce ul.products li.product .price del{ opacity:.5; font-weight:600; font-size:15px; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }

/* ---- Bestelrij ---- */

.woocommerce ul.products li.product .jh-card-cta-wrap{
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.woocommerce ul.products li.product .jh-card-cta-wrap .jh-qty{
  width: 54px !important;
  min-width: 54px !important;
  height: 42px !important;
  border: 1px solid #dfe5db !important;
  border-radius: 12px !important;
  font-weight: 600;
  font-size: 15px;
  color: #1e2a17;
}

.woocommerce ul.products li.product .jh-card-cta-wrap .jh-qty:focus{
  border-color: #476930 !important;
  outline: 2px solid rgba(71,105,48,.18);
  outline-offset: 1px;
}

/* De knop was een icoonvlak van 64 pixels breed. Nu vult hij de rij en
   staat er ook gewoon bij wat hij doet. */
.woocommerce li.product .button.jh-add-btn,
body.tax-product_cat .woocommerce li.product .button.jh-add-btn,
body.jh-shop-grid .woocommerce li.product .button.jh-add-btn{
  flex: 1 1 auto;
  width: auto !important;
  height: 42px !important;
  gap: 8px;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  background: #476930 !important;
  color: #fff !important;
  transition: background .15s ease;
}

/* Alleen het winkelwagen-icoon, geen tekst. Bij zes kolommen is er simpelweg
   geen ruimte voor een label zonder dat het afgekapt wordt. */
.woocommerce li.product .button.jh-add-btn::after{
  content: none;
}

.woocommerce li.product .button.jh-add-btn:hover{
  background: #3a5726 !important;
  filter: none;
}

.woocommerce li.product .button.jh-add-btn.loading::after,
.woocommerce li.product .button.jh-add-btn.added::after{
  content: "";
}

.woocommerce li.product .jh-cart-ico{
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

/* ---- Kop en sortering ---- */

.woocommerce .woocommerce-result-count{
  font-size: 13.5px;
  color: #8a9486;
  margin: 0;
}

.woocommerce .woocommerce-ordering select{
  border: 1px solid #dfe5db !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px;
  color: #1e2a17;
  background: #fff;
}

/* ---- Smallere schermen ---- */

@media (max-width: 520px){
  .woocommerce ul.products li.product{ padding: 8px 10px 10px !important; }
  .woocommerce ul.products li.product .leftcol img{ height: 130px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 14.5px !important; }
  .woocommerce li.product .button.jh-add-btn{ flex: 1 1 auto; }
}

/* ==================================================================
   Raster: meer producten naast elkaar

   Het thema stopte bij vier kolommen vanaf 992 pixels. Bij een container
   van 1240 pixels past er meer, en bij een groothandelsassortiment wil je
   zoveel mogelijk in beeld. Vanaf 1500 pixels dus zes kolommen.
   ================================================================== */

.woocommerce ul.products,
body.tax-product_cat .woocommerce ul.products,
body.jh-shop-grid .jh-archive-grid ul.products{
  gap: 14px !important;
}

@media (min-width: 1100px){
  .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.jh-shop-grid .jh-archive-grid ul.products{
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media (min-width: 1500px){
  .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.jh-shop-grid .jh-archive-grid ul.products{
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

/* Smallere kaarten vragen om iets kleinere maatvoering. */
@media (min-width: 1100px){
  .woocommerce ul.products li.product .leftcol img{ height: 128px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 14.5px !important;
  }
  .woocommerce ul.products li.product .price{ font-size: 17px !important; }
  .woocommerce ul.products li.product .jh-card-cta-wrap .jh-qty{
    width: 46px !important;
    min-width: 46px !important;
  }
  .woocommerce li.product .button.jh-add-btn{
    padding: 0 10px !important;
    font-size: 13.5px !important;
    gap: 6px;
  }
}

/* WooCommerce plakt na het toevoegen een "Bekijk winkelwagen"-link achter de
   knop. Die valt buiten de kaart en is overbodig, want de zijbalk met de
   winkelwagen klapt al open. */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product a.added_to_cart.wc-forward{
  display: none !important;
}

/* Het artikelnummer zat nog in een blok met eigen marges vanuit het thema,
   waardoor er boven en onder onnodig ruimte overbleef. */
.woocommerce ul.products li.product .specs{
  margin: 2px 0 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .specs .spec{
  margin: 0 !important;
  padding: 0 !important;
}

.woocommerce ul.products li.product .specs .spec p{
  line-height: 1.2 !important;
}

.woocommerce ul.products li.product .price{
  margin: 6px 0 8px !important;
}


/* ==================================================================
   Filterknop, sortering en compacte weergave op telefoon
   ================================================================== */

/* De filterknop klapte een zijbalk open die hier geen inhoud heeft. */
.filtertoggle{ display: none !important; }

/* ---- Sorteerkeuze ---- */

.woocommerce .woocommerce-ordering{
  margin: 0 0 14px;
}

.woocommerce .woocommerce-ordering select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  max-width: 280px;
  padding: 11px 40px 11px 14px !important;
  border: 1px solid #dfe5db !important;
  border-radius: 10px !important;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23476930' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1e2a17;
  cursor: pointer;
  box-shadow: none;
}

.woocommerce .woocommerce-ordering select:focus{
  border-color: #476930 !important;
  outline: 2px solid rgba(71,105,48,.18);
  outline-offset: 1px;
}

/* ---- Telefoon: twee kolommen en compacte kaarten ---- */

@media (max-width: 640px){
  .woocommerce ul.products,
  body.tax-product_cat .woocommerce ul.products,
  body.jh-shop-grid .jh-archive-grid ul.products{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .woocommerce ul.products li.product{
    padding: 8px !important;
    border-radius: 12px !important;
  }

  .woocommerce ul.products li.product .leftcol{
    margin-bottom: 8px;
  }

  .woocommerce ul.products li.product .leftcol img{
    height: 104px;
    padding: 6px;
  }

  .woocommerce ul.products li.product h3.catnamearc{
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 13px !important;
    line-height: 1.3 !important;
    min-height: 2.6em;
    margin-bottom: 2px !important;
  }

  .woocommerce ul.products li.product .specs .spec p{
    font-size: 11px !important;
  }

  .woocommerce ul.products li.product .price{
    font-size: 15px !important;
    margin: 4px 0 8px !important;
  }

  .woocommerce ul.products li.product .jh-card-cta-wrap{
    gap: 6px;
  }

  .woocommerce ul.products li.product .jh-card-cta-wrap .jh-qty{
    width: 42px !important;
    min-width: 42px !important;
    height: 38px !important;
    font-size: 14px;
  }

  .woocommerce li.product .button.jh-add-btn{
    height: 38px !important;
    padding: 0 8px !important;
  }

  .woocommerce li.product .jh-cart-ico{ width: 19px; height: 19px; }

  /* Het hartje kleiner, dat vraagt op een klein kaartje niet de aandacht. */
  .woocommerce ul.products li.product [class*="wishlist"] a{
    width: 28px;
    height: 28px;
  }
  .woocommerce ul.products li.product [class*="wishlist"] i,
  .woocommerce ul.products li.product [class*="wishlist"] svg{
    width: 15px;
    height: 15px;
    font-size: 14px;
  }

  .woocommerce .woocommerce-ordering select{ max-width: 100%; }
  .woocommerce .woocommerce-result-count{ margin-bottom: 8px; }
}

@media (max-width: 380px){
  .woocommerce ul.products li.product .leftcol img{ height: 92px; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size: 12.5px !important; }
}