/* ============================================================
   HORECAVOORDEEL – PRODUCTTEGELS (HOME + CATEGORIE)
   5/3/2 kolommen · onderstack strak uitgelijnd · knop onderaan
   ============================================================ */

/* == Local Open Sans font definitions == */
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/open-sans/open-sans-v40-latin-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/open-sans/open-sans-v40-latin-italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"Open Sans";
  src:url("../fonts/open-sans/open-sans-v40-latin-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ====================== Instelbare variabelen ====================== */
:root{
  /* Gaps in de onderstack */
  --hv-gap-colli-select: 6px;     /* Colli → Staffelkorting */
  --hv-gap-select-price: 6px;     /* Staffelkorting → prijsblok */
  --hv-gap-unit-btn:     10px;    /* Eenheidsprijs → BESTEL */

  /* Vaste hoogtes in de onderstack */
  --hv-colli-lines: 2;            /* aantal gereserveerde regels voor “Colli …”  */
  --hv-line: 1.25em;              /* basisregelhoogte */
  --hv-price-min: 56px;           /* prijsblok: 1 regel prijs + 1 regel eenheid */

  /* Grid-gutters */
  --hv-gutter-desktop: 12px;
  --hv-gutter-tablet:  12px;
  --hv-gutter-mobile:   8px;
}

/* ====================== Titel & typografie ====================== */
.product-miniature .product-name a{color:#4161aa;text-decoration:none}
.product-miniature .product-name a:hover{color:#e85d75;text-decoration:underline}

/* line-clamp per viewport */
@media (min-width:1200px){
  .product-miniature .product-name,
  .product-miniature .product-name a{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;line-height:1.25;min-height:calc(1.25em * 3);
  }
}
@media (min-width:768px) and (max-width:1199.98px){
  .product-miniature .product-name,
  .product-miniature .product-name a{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;line-height:1.25;min-height:calc(1.25em * 3);
  }
}
@media (max-width:767.98px){
  .product-miniature .product-name,
  .product-miniature .product-name a{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
    overflow:hidden;line-height:1.25;min-height:calc(1.25em * 2);
  }
}

/* ====================== Grid: 5 / 3 / 2 kolommen ====================== */
@media (min-width:1200px){
  #products .products{
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    column-gap:var(--hv-gutter-desktop);row-gap:calc(var(--hv-gutter-desktop) + 2px);
    margin:0;padding:0;
  }
}
@media (min-width:768px) and (max-width:1199.98px){
  #products .products{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--hv-gutter-tablet);row-gap:calc(var(--hv-gutter-tablet) + 2px);
    margin:0;padding:0;
  }
}
@media (max-width:767.98px){
  #products .products{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--hv-gutter-mobile);row-gap:calc(var(--hv-gutter-mobile) + 2px);
    margin:0;padding:0;
  }
}
/* wrappers geen eigen padding/margin/width */
#products .products > *{
  margin:0 !important;padding:0 !important;width:auto !important;max-width:none !important;
  float:none !important;flex:none !important;box-sizing:border-box !important;min-width:0 !important;
}

/* ====================== Kaart-skelet ====================== */
#products .product-miniature,
#products .product-miniature .product-container,
#main .featured-products .product .product-miniature,
#main .featured-products .product .product-miniature .product-container,
#main .product-accessories .product .product-miniature,
#main .product-accessories .product .product-miniature .product-container{
  border:none !important;box-shadow:none !important;background:#fff;
}

.product-miniature .product-container{
  display:flex;flex-direction:column;height:100%;
  padding:16px 16px 20px;box-sizing:border-box;
}

/* Afbeelding */
.product-miniature .thumbnail-container{aspect-ratio:4/3;overflow:hidden;border-radius:12px 12px 0 0}
.product-miniature .thumbnail-container img{width:100%;height:100%;object-fit:contain}

/* ====================== Middenkolom (titel boven, stack onder) ====================== */
.product-miniature .second-third-block{
  display:flex;flex-direction:column;flex:1 1 auto; /* vult de rest van de kaart */
}
.product-miniature .third-block{
  display:flex;flex-direction:column;margin-top:auto; /* duwt stack naar onderkant */
}

/* ====================== Colli → Staffelkorting ====================== */
.product-miniature .product-units.unit-package-message{
  font-size:.875rem;line-height:1.25;color:#6f6f6f;text-align:center;
  min-height:calc(var(--hv-line) * var(--hv-colli-lines));
  margin:0 0 var(--hv-gap-colli-select) 0;
}
.product-miniature .third-block-right::before{content:none}
.product-miniature .third-block-right select,
.product-miniature .third-block-right .product-variants,
.product-miniature .third-block-right .variant-dropdown{
  margin:0 0 var(--hv-gap-select-price) 0;width:100%;height:36px;line-height:36px;
}

/* ====================== Prijsblok (centraal, vaste hoogte) ====================== */
.product-miniature .product-price-and-shipping{
  display:flex;flex-direction:column;align-items:center !important;
  min-height:var(--hv-price-min);margin:0;
}
.product-miniature .product-price-and-shipping .first-prices{
  min-height:24px;margin:0 0 4px 0;width:100%;text-align:center;
}
.product-miniature .product-price-and-shipping .second-prices{
  min-height:18px;width:100%;text-align:center;
}
/* niets afbreken in prijsregels */
.product-miniature .product-price-and-shipping .first-prices .product-price,
.product-miniature .product-price-and-shipping .first-prices .price,
.product-miniature .product-price-and-shipping .current-price,
.product-miniature .product-price-and-shipping .second-prices span,
.product-miniature .product-price-and-shipping .first-prices .tax-label-at-price-miniature,
.product-miniature .product-price-and-shipping .first-prices .tax-label-next-price-miniature{
  white-space:nowrap;
}

/* ====================== Knop onderaan ====================== */
.product-miniature .buttons-sections{
  margin-top:var(--hv-gap-unit-btn) !important;padding-top:0 !important;
}

/* ====================== Home-carrousels (slick) ====================== */
.product-list-wrapper .slick-list .product-units.unit-package-message{
  min-height:calc(var(--hv-line) * var(--hv-colli-lines));
  margin:0 0 var(--hv-gap-colli-select) 0;text-align:center;
}
.product-list-wrapper .slick-list .third-block-right::before{content:none}
.product-list-wrapper .slick-list .third-block-right select,
.product-list-wrapper .slick-list .third-block-right .product-variants,
.product-list-wrapper .slick-list .third-block-right .variant-dropdown{
  margin:0 0 var(--hv-gap-select-price) 0;width:100%;height:36px;line-height:36px;
}
.product-list-wrapper .slick-list .product-miniature .product-price-and-shipping{
  display:flex;flex-direction:column;align-items:center !important;min-height:var(--hv-price-min);
}
.product-list-wrapper .slick-list .product-miniature .product-price-and-shipping .first-prices{
  min-height:24px;margin:0 0 4px 0;width:100%;text-align:center;
}
.product-list-wrapper .slick-list .product-miniature .product-price-and-shipping .second-prices{
  min-height:18px;width:100%;text-align:center;
}
.product-list-wrapper .slick-list .product-miniature .buttons-sections{
  margin-top:var(--hv-gap-unit-btn) !important;padding-top:0 !important;
}
/* === Colli vast aan Staffelkorting (vaste afstand), rest blijft gelijk === */
/* Zorg dat Colli in de second-block naar beneden “zakt”, vlak boven de select */
#products .product-miniature .second-block{
  display: flex !important;
  flex-direction: column !important;
}
#products .product-miniature .second-block .product-units.unit-package-message{
  margin-top: auto !important;                   /* duwt Colli naar onderkant second-block */
  margin-bottom: var(--hv-gap-colli-select) !important; /* vaste gap naar Staffelkorting */
  text-align: center;                            /* consistent met prijs/eenheid */
}

/* Zelfde in home-carrousels (slick) */
.product-list-wrapper .slick-list .product-miniature .second-block{
  display: flex !important;
  flex-direction: column !important;
}
.product-list-wrapper .slick-list .product-miniature .second-block .product-units.unit-package-message{
  margin-top: auto !important;
  margin-bottom: var(--hv-gap-colli-select) !important;
  text-align: center;
}
/* =============== Basis/variabelen =============== */
:root{
  /* afstanden onderin de kaart */
  --gap-colli-to-select: 8px;          /* Colli → Staffelkorting */
  --gap-under-select: .15rem;          /* lucht direct onder select */
  --gap-price-to-button: 10px;         /* Eenheidsprijs → BESTEL */
  --priceblock-min: 56px;              /* prijs + eenheidsprijs samen */
  --title-lh: 1.25;                    /* line-height titel */
}

/* =============== Kaart skeleton =============== */
#products .product-miniature .product-container{
  display:flex; flex-direction:column; height:100%;
  padding:16px 18px 20px; box-sizing:border-box;
  border:none !important; box-shadow:none !important; background:#fff;
}

/* Middenkolom: blok-naar-blok met klein vast ‘gap’ */
#products .product-miniature .second-third-block{
  display:flex; flex-direction:column; gap:8px; flex:1 1 auto;
}

/* 5 kolommen raster (desktop) + nette gutters */
@media (min-width:1200px){
  #products .products{ display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    column-gap:12px !important; row-gap:14px !important; margin:0 !important; padding:0 !important;
  }
  #products .products > *{ margin:0 !important; padding:0 !important; float:none !important; width:auto !important; max-width:none !important; min-width:0 !important; }
  #products .products .product .product-miniature{ margin:0 !important; height:100% !important; }
}

/* tablet: 3 kolommen */
@media (min-width:768px) and (max-width:1199.98px){
  #products .products{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:12px !important; row-gap:14px !important; }
}

/* mobiel: 2 kolommen */
@media (max-width:767.98px){
  #products .products{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:8px !important; row-gap:10px !important; margin:0 !important; padding:0 !important; }
  #products .products > *{ margin:0 !important; padding:0 !important; }
}

/* =============== Titel (altijd boven, witruimte onder) =============== */
#products .product-miniature .second-block{
  display:flex; flex-direction:column; min-height:0;
}

/* Productnaam neemt “overgebleven” ruimte; witruimte komt hier */
#products .product-miniature .second-block .product-name{ margin-bottom:auto !important; }

/* Clamp + vaste minimale ‘titelhoogte’ per viewport -> stabiliseert alles onder de titel */
@media (min-width:1200px){
  #products .product-miniature .product-name,
  #products .product-miniature .product-name a{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5;
    overflow:hidden; line-height:var(--title-lh);
    min-height:calc(var(--title-lh) * 5em);
  }
}
@media (min-width:768px) and (max-width:1199.98px){
  #products .product-miniature .product-name,
  #products .product-miniature .product-name a{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
    overflow:hidden; line-height:var(--title-lh);
    min-height:calc(var(--title-lh) * 4em);
  }
}
@media (max-width:767.98px){
  #products .product-miniature .product-name,
  #products .product-miniature .product-name a{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    overflow:hidden; line-height:var(--title-lh);
    min-height:calc(var(--title-lh) * 3em);
  }
}

/* =============== “Colli” strak naar de select =============== */
/* Colli is het laatste element in second-block en krijgt vaste ondermarge */
#products .product-miniature .product-units.unit-package-message{
  margin-top:6px;                      /* klein beetje lucht onder de titel */
  margin-bottom:var(--gap-colli-to-select) !important;
  font-size:.875rem; line-height:1.25; color:#6f6f6f; text-align:center;
}

/* =============== Select / varianten =============== */
#products .product-miniature .third-block-right{ position:relative; }
#products .product-miniature .third-block-right::before{ content:""; display:block; height:0 !important; }
#products .product-miniature .third-block-right select,
#products .product-miniature .third-block-right .product-variants,
#products .product-miniature .third-block-right .variant-dropdown{
  margin-top:0 !important; margin-bottom:var(--gap-under-select) !important; width:100%;
  min-height:36px;
}

/* =============== Prijsblok (centeren + vaste hoogte) =============== */
#products .product-miniature .product-price-and-shipping{
  display:flex; flex-direction:column; align-items:center;    /* centraal */
  min-height:var(--priceblock-min) !important; margin:0 !important;
}
#products .product-miniature .product-price-and-shipping .first-prices{
  display:block !important; min-height:24px !important; line-height:1.25; margin:0 0 4px 0 !important; width:100%; text-align:center !important;
}
#products .product-miniature .product-price-and-shipping .second-prices{
  min-height:18px !important; width:100%; text-align:center !important;
}
#products .product-miniature .product-price-and-shipping .first-prices .product-price,
#products .product-miniature .product-price-and-shipping .first-prices .price,
#products .product-miniature .product-price-and-shipping .current-price,
#products .product-miniature .product-price-and-shipping .second-prices span{
  white-space:nowrap !important;
}

/* BESTEL-knop altijd strak onderaan */
#products .product-miniature .third-block{ display:flex; flex-direction:column; }
#products .product-miniature .buttons-sections{ margin-top:auto !important; padding-top:var(--gap-price-to-button) !important; }

/* =============== Home carrousels (slick) gelijk trekken =============== */
body#index .product-list-wrapper .slick-list .product-miniature .second-block{ display:flex; flex-direction:column; }
body#index .product-list-wrapper .slick-list .product-units.unit-package-message{
  margin-top:6px; margin-bottom:var(--gap-colli-to-select) !important;
}
body#index .product-list-wrapper .slick-list .third-block-right::before{ content:none !important; }
body#index .product-list-wrapper .slick-list .third-block-right select,
body#index .product-list-wrapper .slick-list .third-block-right .product-variants,
body#index .product-list-wrapper .slick-list .third-block-right .variant-dropdown{
  margin-top:0 !important; margin-bottom:var(--gap-under-select) !important; height:36px; line-height:36px; width:100%;
}
body#index .product-list-wrapper .slick-list .product-miniature .product-price-and-shipping{
  display:flex; flex-direction:column; align-items:center; min-height:var(--priceblock-min) !important;
}
body#index .product-list-wrapper .slick-list .product-miniature .product-price-and-shipping .first-prices{
  min-height:24px !important; margin-bottom:4px !important; width:100%; text-align:center !important;
}
body#index .product-list-wrapper .slick-list .product-miniature .product-price-and-shipping .second-prices{
  min-height:18px !important; width:100%; text-align:center !important;
}

/* =============== Kleine utilities =============== */
#products .product-miniature .product-price-and-shipping span{ margin:0; }
.product-units.unit-price-message{ font-style:italic; color:#6f6f6f; }
/* === NS TEST – cosmetische en veilige finetune ==================== */
/* 1) Tegel-schaduw: kies A (geen schaduw) óf B (ultra subtiel) */

/* A) GEEN schaduw (clean, zoals je aangaf) */
#products .product-miniature,
#products .product-miniature .product-container {
  box-shadow: none !important;
  border: 1px solid #c7c7c7 !important;
  border-radius: 12px !important;
}

/* B) Subtiele schaduw – comment A uit en laat deze aan als je nét wat diepte wil */
/*
#products .product-miniature,
#products .product-miniature .product-container {
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  border: 1px solid #d8d8d8 !important;
  border-radius: 12px !important;
}
*/

/* 2) Safeguard: nooit clipping in flex-stacks (zeker bij smalle tegels) */
#products .product-miniature .second-third-block,
#products .product-miniature .third-block,
#products .product-miniature .product-price-and-shipping,
#products .product-miniature .product-price-and-shipping .first-prices {
  min-width: 0 !important;
  overflow: visible !important;
}

/* 3) Staffel select: altijd 100% breed/36px hoog, met ruimte voor (pseudo) pijltje */
#products .product-miniature .third-block-right,
#products .product-miniature .product-variants { min-width: 0 !important; overflow: visible !important; }

#products .product-miniature .third-block-right select,
#products .product-miniature .third-block-right .product-variants select,
#products .product-miniature .third-block-right .variant-dropdown select,
#products .product-miniature .third-block-right .custom-select,
#products .product-miniature .third-block-right .form-select,
#products .product-miniature .third-block-right .form-control {
  display: block !important;
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  height: 36px !important; line-height: 36px !important;
  padding: 4px 32px 4px 8px !important;   /* ruimte voor pijltje rechts */
  font-size: .875rem !important; box-sizing: border-box !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-position: right 8px center !important; background-repeat: no-repeat !important;
}

/* sommige thema’s tekenen een lijntje boven de select – uitzetten */
#products .product-miniature .third-block-right { border-top: 0 !important; }
#products .product-miniature .third-block-right::before { content: none !important; display: none !important; }
/* HV – PDP prijsblok normaliseren (neutraliseer thema-schaal) */
body#product .main-product-details .product-prices .product-prices-wrapper {
  font-size: 1rem !important;              /* basis terug naar 16px */
  line-height: 1.25 !important;
}

/* Hoofdprijs (zoals je voorbeeld) */
body#product .main-product-details .product-prices .current-price {
  font-size: 1.375rem !important;          /* ≈ 22px */
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
body#product .main-product-details .product-prices .current-price .price {
  font-size: 1em !important;               /* voorkom dubbele schaal in child */
}

/* Wasprijs + “Colli/eenheid” rustiger */
body#product .main-product-details .product-prices .regular-price,
body#product .main-product-details .product-prices .product-units,
body#product .product-prices .product-units {
  font-size: .95rem !important;            /* ≈ 15px */
  line-height: 1.35 !important;
  opacity: .95;
}

/* Kleine safeguards (sommige thema’s forceren oversized headings) */
body#product .main-product-details .product-prices {
  font-size: 1rem !important;              /* reset erfde schaal */
}
body#product .main-product-details .product-prices .tax-label-at-price,
body#product .main-product-details .product-prices .discount-percentage {
  font-size: .875rem !important;
}
/* HV – PDP: prijs nog iets compacter */
body#product .main-product-details .product-prices .current-price{
  font-size: 1.25rem !important;   /* was ~1.375rem */
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
@media (max-width: 767.98px){
  body#product .main-product-details .product-prices .current-price{
    font-size: 1.20rem !important; /* mobiel nog iets kleiner */
  }
}
/* éénheden/wasprijs subtieler */
body#product .main-product-details .product-prices .product-units,
body#product .main-product-details .product-prices .regular-price{
  font-size: .90rem !important;
  line-height: 1.35 !important;
  opacity: .95;
}
/* mini-tweaks spacing binnen het blok */
body#product .main-product-details .product-prices .product-prices-wrapper{
  font-size: 1rem !important;     /* basis gelijk houden */
  line-height: 1.25 !important;
  gap: .25rem !important;          /* iets minder lucht tussen regels */
}