/* 129.0 - live zoeksuggesties voor de hoofdzoekbalk
   Suggesties starten na 3 tekens en gebruiken server/search-suggest.php. */
.vh-header-search[data-live-search],
.vh-mobile-menu__search[data-live-search]{
  position:relative;
  overflow:visible;
}
.vh-header-search[data-live-search]>input{border-radius:7px 0 0 7px}
.vh-header-search[data-live-search]>button{border-radius:0 7px 7px 0}

.vh-search-suggestions{
  position:absolute;
  z-index:190;
  top:calc(100% + 8px);
  left:0;
  right:0;
  max-height:min(620px,72vh);
  overflow:auto;
  border:1px solid #cddce6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 45px rgba(7,43,68,.18);
  color:#14364b;
  text-align:left;
}
.vh-search-suggestions[hidden]{display:none!important}
.vh-search-suggestions__head{
  padding:10px 14px 8px;
  border-bottom:1px solid #e9f0f4;
  background:#f7fafc;
  color:#6c8392;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.vh-search-product{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:76px;
  padding:9px 13px;
  border-bottom:1px solid #edf2f5;
  background:#fff;
  color:#14364b;
  text-decoration:none;
}
.vh-search-product:hover,.vh-search-product.is-active{
  background:#eef8fd;
}
.vh-search-product>img{
  width:56px;
  height:56px;
  border-radius:8px;
  background:#edf3f6;
  object-fit:cover;
}
.vh-search-product__main{display:grid;min-width:0;gap:2px}
.vh-search-product__main strong{
  overflow:hidden;
  color:#12364c;
  font-size:13px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vh-search-product__main em{
  overflow:hidden;
  color:#6a8291;
  font-size:11px;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.vh-search-product__main b{margin-top:2px;color:#087cae;font-size:12px}
.vh-search-product__main b small{color:#768a96;font-size:9px;font-weight:700}
.vh-search-product__stock{
  color:#188354;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
.vh-search-categories{
  display:grid;
  padding:8px 12px 10px;
  border-bottom:1px solid #e8eff3;
  background:#fbfdfe;
}
.vh-search-categories>span{
  margin:0 2px 5px;
  color:#7a8e99;
  font-size:9px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.vh-search-categories>a{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 8px;
  border-radius:7px;
  color:#234b62;
  font-size:12px;
  font-weight:750;
  text-decoration:none;
}
.vh-search-categories>a:hover,.vh-search-categories>a.is-active{background:#eaf6fc;color:#087cae}
.vh-search-all{
  display:block;
  padding:12px 14px;
  background:#f3f9fc;
  color:#087cae;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}
.vh-search-all:hover,.vh-search-all.is-active{background:#e4f4fb}
.vh-search-empty{
  padding:16px 14px;
  color:#607987;
  font-size:12px;
  background:#fff;
}

/* Mobiele zoekbalk onder de header. */
.vh-mobile-search-wrap .vh-search-suggestions{
  top:calc(100% + 6px);
  max-height:58vh;
}

/* Zoekveld in het geopende mobiele menu. */
.vh-mobile-menu__search[data-live-search]{
  height:auto;
  min-height:42px;
}
.vh-mobile-menu__search[data-live-search]>input,
.vh-mobile-menu__search[data-live-search]>button{height:42px}
.vh-mobile-menu__search .vh-search-suggestions{
  top:48px;
  max-height:calc(100vh - 150px);
}

@media(max-width:760px){
  .vh-search-suggestions{border-radius:10px}
  .vh-search-product{grid-template-columns:48px minmax(0,1fr);min-height:66px;padding:8px 10px}
  .vh-search-product>img{width:46px;height:46px}
  .vh-search-product__commerce{display:none}
  .vh-search-product__main strong{font-size:12px}
  .vh-search-product__stock{display:none}
  .vh-search-all{font-size:11px}
}