/* 120.3 - productgroeptegels: volledige titels, blauwe titelbalk, rustige volledige intro en subtiele Zaagtool-badge. */

/* Categorie- en productgroeplandings */
.vh-category-tiles--results .vh-category-tile{
  min-height:250px;
  border:1px solid #c9dceb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 18px rgba(6,45,88,.045);
  overflow:hidden;
}
.vh-category-tiles--results .vh-category-tile:hover,
.vh-category-tiles--results .vh-category-tile:focus-visible{
  border-color:#79b9df;
  box-shadow:0 12px 28px rgba(6,45,88,.09);
}
.vh-category-tiles--results .vh-category-tile__image{
  flex:0 0 170px;
  min-width:170px;
  background:#edf3f7;
  overflow:hidden;
}
.vh-category-tiles--results .vh-category-tile__image img{
  width:100%;
  height:100%;
  min-height:250px;
  object-fit:cover;
  display:block;
}
.vh-category-tiles--results .vh-category-tile__content{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  flex-direction:column;
  gap:0;
  padding:0 0 18px;
  background:#fff;
}

/* Blauwe titelbalk: productgroep is het belangrijkste element. */
.vh-category-tiles--results .vh-category-tile__content>strong{
  display:block;
  width:100%;
  margin:0;
  padding:14px 18px 13px;
  background:#087fc3;
  color:#fff;
  font-size:clamp(18px,1.35vw,22px);
  font-weight:900;
  line-height:1.12;
  letter-spacing:-.018em;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  text-overflow:clip;
  overflow:visible;
}
.vh-category-tiles--results .vh-category-tile:hover .vh-category-tile__content>strong,
.vh-category-tiles--results .vh-category-tile:focus-visible .vh-category-tile__content>strong{
  background:#0673b2;
  color:#fff;
}

/* Intro: volledige eerste zin waar mogelijk; geen visuele line-clamp of halve zin. */
.vh-category-tile__intro{
  display:block;
  margin:13px 18px 0;
  color:#536d82;
  font-size:12.5px;
  font-weight:500;
  line-height:1.48;
  white-space:normal;
  word-break:normal;
  overflow-wrap:break-word;
  text-overflow:clip;
  overflow:visible;
}
.vh-category-tiles--results .vh-category-tile__count{
  display:block;
  margin:10px 18px 0;
  color:#768b9d;
  font-size:11.5px;
  font-weight:700;
  line-height:1.3;
}
.vh-category-tile__saw{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  width:auto;
  max-width:calc(100% - 36px);
  margin:10px 18px 0!important;
  padding:5px 9px;
  border:1px solid #bfe3d0;
  border-radius:999px;
  background:#eef9f3;
  color:#17643a;
  font-size:10.5px;
  font-weight:850;
  line-height:1.2;
  white-space:nowrap;
}
.vh-category-tile__saw>span{
  margin-right:5px;
  font-size:11px;
  line-height:1;
}
.vh-category-tiles--results .vh-category-tile__content>b{
  margin:0 18px;
  margin-top:auto;
  padding-top:14px;
  color:#087fc3;
  font-size:12px;
  font-weight:850;
  line-height:1.25;
}

/* Assortiment-overzicht: bestaande Zaagtool-herkenning compact houden. */
.vh-assortment-tile__saw{
  display:block!important;
  width:min(125px,100%);
  margin:8px 0 7px!important;
  line-height:0;
}
.vh-assortment-tiles .vh-assortment-tile__saw img{
  display:block;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:999px;
}

/* Homepage-categorieën blijven compact. */
.vh-home-category__saw{
  display:block!important;
  width:min(105px,100%);
  margin:7px 0 2px!important;
  line-height:0;
}
.vh-home-category .vh-home-category__saw img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:999px;
}

@media(max-width:1180px){
  .vh-category-tiles--results .vh-category-tile{
    min-height:238px;
  }
  .vh-category-tiles--results .vh-category-tile__image{
    flex-basis:160px;
    min-width:160px;
  }
  .vh-category-tiles--results .vh-category-tile__image img{
    min-height:238px;
  }
  .vh-category-tiles--results .vh-category-tile__content>strong{
    padding:13px 15px 12px;
    font-size:18px;
  }
  .vh-category-tile__intro,
  .vh-category-tiles--results .vh-category-tile__count,
  .vh-category-tile__saw,
  .vh-category-tiles--results .vh-category-tile__content>b{
    margin-left:15px!important;
    margin-right:15px!important;
  }
}

/* De bestaande 2-koloms tablet/mobiel-layout blijft leidend. */
@media(max-width:900px){
  .vh-category-tiles--results .vh-category-tile{
    min-height:0!important;
  }
  .vh-category-tiles--results .vh-category-tile__image{
    width:100%!important;
    min-width:0!important;
    height:clamp(135px,24vw,185px)!important;
    min-height:0!important;
    flex:none!important;
  }
  .vh-category-tiles--results .vh-category-tile__image img{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
  }
  .vh-category-tiles--results .vh-category-tile__content{
    padding:0 0 14px!important;
  }
  .vh-category-tiles--results .vh-category-tile__content>strong{
    padding:11px 13px 10px!important;
    font-size:17px!important;
    line-height:1.16!important;
  }
  .vh-category-tile__intro{
    margin:10px 13px 0!important;
    font-size:11.5px;
    line-height:1.42;
  }
  .vh-category-tiles--results .vh-category-tile__count{
    margin:8px 13px 0!important;
    font-size:10.5px;
  }
  .vh-category-tile__saw{
    max-width:calc(100% - 26px);
    margin:8px 13px 0!important;
    padding:4px 8px;
    font-size:10px;
  }
  .vh-category-tiles--results .vh-category-tile__content>b{
    margin:0 13px!important;
    margin-top:auto!important;
    padding-top:11px!important;
    font-size:11px!important;
  }
}

@media(max-width:430px){
  .vh-category-tiles--results .vh-category-tile__image{
    height:118px!important;
  }
  .vh-category-tiles--results .vh-category-tile__content>strong{
    padding:10px 10px 9px!important;
    font-size:15px!important;
    line-height:1.16!important;
  }
  .vh-category-tile__intro{
    margin:8px 10px 0!important;
    font-size:10.5px;
    line-height:1.38;
  }
  .vh-category-tiles--results .vh-category-tile__count{
    margin:7px 10px 0!important;
    font-size:9.5px;
  }
  .vh-category-tile__saw{
    max-width:calc(100% - 20px);
    margin:7px 10px 0!important;
    padding:4px 7px;
    font-size:9px;
    white-space:normal;
  }
  .vh-category-tiles--results .vh-category-tile__content>b{
    margin:0 10px!important;
    margin-top:auto!important;
    padding-top:9px!important;
    font-size:10px!important;
  }
}