/* 125.0 - professionele homepage- en assortimentstegels
   Productgroep eerst; Zaagtool uitsluitend als subtiele service-indicatie. */

.vh-feature-tile{
  min-width:0;
  overflow:hidden;
  border:1px solid #d4e1e9!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 6px 20px rgba(7,48,90,.055)!important;
  color:#16384d!important;
  text-decoration:none!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.vh-feature-tile:hover{
  transform:translateY(-2px);
  border-color:#a8ccde!important;
  box-shadow:0 12px 28px rgba(7,48,90,.10)!important;
}
.vh-feature-tile__image{
  display:block!important;
  overflow:hidden;
  background:#eef3f6;
}
.vh-feature-tile__image>img{
  display:block!important;
  width:100%!important;
  height:190px!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
  transition:transform .22s ease;
}
.vh-feature-tile:hover .vh-feature-tile__image>img{transform:scale(1.025)}
.vh-feature-tile__body{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-height:220px;
  padding:0 16px 16px!important;
  color:#16384d!important;
}
.vh-feature-tile__title{
  display:block!important;
  margin:0 -16px 13px!important;
  padding:12px 16px!important;
  background:#078fc5!important;
  color:#fff!important;
  font-size:20px!important;
  font-weight:900!important;
  line-height:1.16!important;
  letter-spacing:-.02em!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  hyphens:none!important;
}
.vh-feature-tile__intro{
  display:block!important;
  margin:0 0 10px!important;
  color:#496879!important;
  font-size:13px!important;
  font-weight:500!important;
  line-height:1.48!important;
}
.vh-feature-tile__count{
  display:block!important;
  margin:0 0 10px!important;
  color:#748a98!important;
  font-size:11px!important;
  font-weight:750!important;
}
.vh-feature-tile__saw{
  display:inline-flex!important;
  align-items:center!important;
  align-self:flex-start!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 0 12px!important;
  padding:6px 10px!important;
  border:1px solid #bfe5d0!important;
  border-radius:999px!important;
  background:#eef9f3!important;
  color:#17643a!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.vh-feature-tile__saw>span{margin-right:5px;font-size:11px;line-height:1}
.vh-feature-tile__cta{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-top:auto!important;
  padding-top:12px!important;
  border-top:1px solid #edf2f5!important;
  color:#0783bd!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:none!important;
}

/* Homepage: geen oude glossy Zaagtool-afbeelding meer. */
.vh-category-strip{padding:20px 0 22px!important;background:#fff!important}
.vh-category-strip__grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:14px!important;
  overflow:visible!important;
}
.vh-home-category.vh-feature-tile{
  display:flex!important;
  flex-direction:column!important;
  min-height:390px!important;
}
.vh-home-category.vh-feature-tile .vh-feature-tile__image>img{height:165px!important}
.vh-home-category.vh-feature-tile .vh-feature-tile__body{flex:1;min-height:220px!important}
.vh-home-category.vh-feature-tile .vh-feature-tile__title{font-size:18px!important}
.vh-home-category.vh-feature-tile .vh-feature-tile__intro{font-size:12px!important}

/* Hoofd-assortiment: dezelfde visuele taal als goedgekeurde productgroeptegels. */
.vh-assortment-tiles{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.vh-assortment-tiles>.vh-feature-tile{display:flex!important;flex-direction:column!important;min-height:450px!important}
.vh-assortment-tiles>.vh-feature-tile .vh-feature-tile__image>img{height:210px!important}
.vh-assortment-tiles>.vh-feature-tile .vh-feature-tile__body{flex:1!important}

@media(max-width:1180px){
  .vh-assortment-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .vh-category-strip__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .vh-home-category.vh-feature-tile{min-height:0!important;flex:initial!important}
  .vh-assortment-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .vh-assortment-tiles>.vh-feature-tile{min-height:0!important}
  .vh-feature-tile__body{min-height:210px!important;padding:0 14px 14px!important}
  .vh-feature-tile__title{margin:0 -14px 12px!important;padding:11px 14px!important;font-size:17px!important}
  .vh-feature-tile__image>img,
  .vh-home-category.vh-feature-tile .vh-feature-tile__image>img,
  .vh-assortment-tiles>.vh-feature-tile .vh-feature-tile__image>img{height:150px!important}
  .vh-feature-tile__intro{font-size:12px!important}
}
@media(max-width:520px){
  .vh-category-strip__grid,.vh-assortment-tiles{grid-template-columns:1fr!important}
  .vh-feature-tile__image>img,
  .vh-home-category.vh-feature-tile .vh-feature-tile__image>img,
  .vh-assortment-tiles>.vh-feature-tile .vh-feature-tile__image>img{height:190px!important}
  .vh-feature-tile__body{min-height:0!important}
  .vh-feature-tile__saw{white-space:normal!important}
}


/* 202.8 - productgroeptegels in categoriepagina's gelijk trekken met de voorzijde. */
.vh-category-tiles--results{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.vh-category-tiles--results>.vh-group-feature-tile{
  display:flex!important;
  flex-direction:column!important;
  min-height:390px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__image>img{
  height:165px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__body{
  flex:1!important;
  min-height:220px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__title{
  font-size:18px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__intro{
  font-size:12px!important;
}
@media(max-width:900px){
  .vh-category-tiles--results{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .vh-category-tiles--results>.vh-group-feature-tile{min-height:0!important}
}
@media(max-width:520px){
  .vh-category-tiles--results{grid-template-columns:1fr!important}
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__image>img{height:190px!important}
}


/* 203.0 - verfijnde vormgeving productgroeptegels */
.vh-category-tiles--results{
  gap:18px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile{
  min-height:430px!important;
  border-radius:18px!important;
  border:1px solid #d9e6ee!important;
  box-shadow:0 8px 22px rgba(6,46,82,.07)!important;
  background:#fff!important;
}
.vh-category-tiles--results>.vh-group-feature-tile:hover{
  transform:translateY(-3px)!important;
  border-color:#a8cbde!important;
  box-shadow:0 16px 34px rgba(6,46,82,.11)!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__image{
  background:#eef4f7!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__image>img{
  height:190px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__body{
  min-height:240px!important;
  padding:0 18px 18px!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__title{
  margin:0 -18px 14px!important;
  padding:14px 18px!important;
  min-height:78px!important;
  font-size:18px!important;
  line-height:1.15!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__intro{
  margin:0 0 12px!important;
  min-height:54px!important;
  color:#506d7d!important;
  font-size:12px!important;
  line-height:1.5!important;
  display:-webkit-box!important;
  -webkit-line-clamp:3!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__count{
  margin:0 0 12px!important;
  color:#738898!important;
  font-size:12px!important;
  font-weight:800!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__saw{
  margin:0 0 14px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#154f33!important;
  font-size:11px!important;
  font-weight:800!important;
}
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__cta{
  margin-top:auto!important;
  padding-top:14px!important;
  border-top:1px solid #e8eff4!important;
  color:#047fbd!important;
  font-size:13px!important;
  font-weight:900!important;
}
@media(max-width:900px){
  .vh-category-tiles--results{gap:14px!important}
  .vh-category-tiles--results>.vh-group-feature-tile{min-height:0!important}
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__body{min-height:220px!important;padding:0 16px 16px!important}
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__title{margin:0 -16px 12px!important;padding:13px 16px!important;min-height:72px!important}
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__image>img{height:170px!important}
}
@media(max-width:520px){
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__image>img{height:200px!important}
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__title{min-height:0!important}
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__intro{min-height:0!important}
}


/* 203.1 - herstel productgroeptegels: robuust voor oude en nieuwe markup */
.vh-category-tiles--results{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
  overflow:visible!important;
}

/* Ondersteunt zowel de oude .vh-category-tile markup als de nieuwe feature-tile markup. */
.vh-category-tiles--results>.vh-category-tile,
.vh-category-tiles--results>.vh-group-feature-tile{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  width:100%!important;
  min-height:420px!important;
  overflow:hidden!important;
  border:1px solid #d4e2ea!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#16384d!important;
  text-decoration:none!important;
  box-shadow:0 7px 20px rgba(7,48,90,.06)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.vh-category-tiles--results>.vh-category-tile:hover,
.vh-category-tiles--results>.vh-group-feature-tile:hover{
  transform:translateY(-2px)!important;
  border-color:#9fc7db!important;
  box-shadow:0 13px 28px rgba(7,48,90,.10)!important;
}

.vh-category-tiles--results>.vh-category-tile>.vh-category-tile__image,
.vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__image{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0!important;
  height:180px!important;
  overflow:hidden!important;
  background:#eef3f6!important;
}
.vh-category-tiles--results>.vh-category-tile>.vh-category-tile__image img,
.vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__image>img{
  display:block!important;
  width:100%!important;
  height:180px!important;
  min-height:0!important;
  max-height:none!important;
  object-fit:cover!important;
}

.vh-category-tiles--results>.vh-category-tile>.vh-category-tile__content,
.vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__body{
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  min-width:0!important;
  width:100%!important;
  min-height:235px!important;
  padding:0 16px 16px!important;
  background:#fff!important;
}

.vh-category-tiles--results>.vh-category-tile>.vh-category-tile__content>strong,
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__title{
  display:flex!important;
  align-items:center!important;
  width:auto!important;
  min-height:68px!important;
  margin:0 -16px 13px!important;
  padding:12px 16px!important;
  overflow:hidden!important;
  background:#0b8fc6!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1.15!important;
  letter-spacing:-.015em!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
}

.vh-category-tiles--results .vh-category-tile__intro,
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__intro{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  min-height:54px!important;
  margin:0 0 10px!important;
  color:#4d697a!important;
  font-size:12px!important;
  font-weight:500!important;
  line-height:1.5!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
}
.vh-category-tiles--results .vh-category-tile__count,
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__count{
  display:block!important;
  margin:0 0 10px!important;
  color:#748a98!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1.3!important;
}

/* Centrale zaagservice-badge compact houden in de tegel. */
.vh-category-tiles--results .vh-sawservice-badge--tile{
  display:inline-flex!important;
  align-items:center!important;
  align-self:flex-start!important;
  gap:6px!important;
  width:auto!important;
  max-width:100%!important;
  min-height:28px!important;
  margin:0 0 12px!important;
  padding:4px 8px 4px 5px!important;
  border:1px solid #c9dfd3!important;
  border-radius:999px!important;
  background:#f3faf6!important;
  color:#17643a!important;
  font-size:10.5px!important;
  font-weight:800!important;
  line-height:1.1!important;
}
.vh-category-tiles--results .vh-sawservice-badge--tile .vh-sawservice-badge__icon{
  display:grid!important;
  place-items:center!important;
  width:20px!important;
  height:20px!important;
  flex:0 0 20px!important;
}
.vh-category-tiles--results .vh-sawservice-badge--tile .vh-saw-blade-icon{
  display:block!important;
  width:20px!important;
  height:20px!important;
}
.vh-category-tiles--results .vh-sawservice-badge--tile .vh-sawservice-badge__text{
  white-space:nowrap!important;
}

.vh-category-tiles--results>.vh-category-tile>.vh-category-tile__content>b,
.vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__cta{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
  margin-top:auto!important;
  padding:12px 0 0!important;
  border-top:1px solid #e7eef3!important;
  color:#0783bd!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.25!important;
  text-transform:none!important;
}

@media(max-width:1280px){
  .vh-category-tiles--results{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .vh-category-tiles--results{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .vh-category-tiles--results>.vh-category-tile,
  .vh-category-tiles--results>.vh-group-feature-tile{min-height:0!important}
  .vh-category-tiles--results>.vh-category-tile>.vh-category-tile__image,
  .vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__image,
  .vh-category-tiles--results>.vh-category-tile>.vh-category-tile__image img,
  .vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__image>img{height:160px!important}
}
@media(max-width:560px){
  .vh-category-tiles--results{grid-template-columns:1fr!important}
  .vh-category-tiles--results>.vh-category-tile>.vh-category-tile__image,
  .vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__image,
  .vh-category-tiles--results>.vh-category-tile>.vh-category-tile__image img,
  .vh-category-tiles--results>.vh-group-feature-tile>.vh-feature-tile__image>img{height:190px!important}
  .vh-category-tiles--results .vh-category-tile__intro,
  .vh-category-tiles--results>.vh-group-feature-tile .vh-feature-tile__intro{min-height:0!important}
}
