/* 201.36 - centrale favorieten + opgeschoonde header/menu + uniforme dynamische producttegels */

/* Favorieten: één herkenbare blauwe staat */
.vh-favorite-button,
.vh-favorite-detail,
.portal-latest-heart,
.houthulp-favorite,
.vh-cart-extra__favorite,
.vh-season-favorite {
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:42px;
  padding:0;
  border:1px solid #c7dce7;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#0b5f89;
  font:inherit;
  font-size:1.28rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(8,67,98,.08);
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.vh-favorite-button:hover,
.vh-favorite-detail:hover,
.portal-latest-heart:hover,
.houthulp-favorite:hover,
.vh-cart-extra__favorite:hover,
.vh-season-favorite:hover,
.vh-favorite-button:focus-visible,
.vh-favorite-detail:focus-visible,
.portal-latest-heart:focus-visible,
.houthulp-favorite:focus-visible,
.vh-cart-extra__favorite:focus-visible,
.vh-season-favorite:focus-visible {
  border-color:#70b9d9;
  color:#007db8;
  background:#f3fbff;
  outline:none;
  box-shadow:0 0 0 4px rgba(0,138,203,.10),0 8px 20px rgba(8,67,98,.10);
}
.vh-favorite-button.active,
.vh-favorite-button.is-active,
.vh-favorite-detail.active,
.vh-favorite-detail.is-active,
.portal-latest-heart.active,
.portal-latest-heart.is-active,
.houthulp-favorite.active,
.houthulp-favorite.is-active,
.vh-cart-extra__favorite.active,
.vh-cart-extra__favorite.is-active,
.vh-season-favorite.active,
.vh-season-favorite.is-active {
  color:#008acb !important;
  border-color:#78bddc !important;
  background:#eaf7fc !important;
}
.vh-favorite-button:active,
.vh-favorite-detail:active,
.portal-latest-heart:active,
.houthulp-favorite:active,
.vh-cart-extra__favorite:active,
.vh-season-favorite:active { transform:scale(.96); }

/* Seizoenslider: card blijft klikbaar, hartje staat erboven */
.vh-season-card { position:relative; }
.vh-season-card__link {
  display:grid;
  grid-template-rows:auto 1fr;
  height:100%;
  color:inherit;
  text-decoration:none;
}
.vh-season-card__link:hover { color:inherit; }
.vh-season-favorite {
  position:absolute;
  top:14px;
  right:14px;
  z-index:6;
}

/* Slimme kassakoopjes */
.vh-cart-extra { position:relative; }
.vh-cart-extra__favorite {
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  min-width:38px;
  min-height:38px;
  font-size:1.12rem;
}

/* Hout hulp AI productkaarten */
.houthulp-product,
.houthulp-related__item { position:relative; }
.houthulp-favorite {
  position:absolute;
  top:8px;
  right:8px;
  z-index:4;
  min-width:34px;
  min-height:34px;
  font-size:1rem;
  box-shadow:0 4px 12px rgba(7,59,87,.12);
}

/* Centrale header: één plek voor zoeken, account, favorieten en winkelwagen */
.vh-favorites-action { position:relative; }
.vh-favorites-action [data-favorites-count],
.vh-mobile-header-action [data-favorites-count],
.vh-mobile-quick-link [data-favorites-count] {
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:#008acb;
  color:#fff;
  font-size:.69rem;
  font-weight:800;
  line-height:1;
}
.vh-favorites-action [data-favorites-count][hidden],
.vh-mobile-header-action [data-favorites-count][hidden],
.vh-mobile-quick-link [data-favorites-count][hidden] { display:none !important; }

.vh-mobile-header-actions { display:none; }
.vh-mobile-menu-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.vh-mobile-menu-close {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  border:1px solid #c8dce6;
  border-radius:12px;
  background:#fff;
  color:#0b4666;
  font:inherit;
  font-size:.86rem;
  font-weight:700;
  cursor:pointer;
}
.vh-mobile-menu-quicklinks {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:14px 0 12px;
}
.vh-mobile-quick-link {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:8px 10px;
  border:1px solid #d1e0e7;
  border-radius:12px;
  background:#f8fbfd;
  color:#0b4f73;
  text-decoration:none;
  font-size:.77rem;
  font-weight:750;
  text-align:center;
}
.vh-mobile-quick-link:hover,
.vh-mobile-quick-link:focus-visible { background:#edf7fb; border-color:#8fc4db; }

/* Favoriet-login modal */
.vh-favorite-modal-backdrop {
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(5,37,54,.48);
  backdrop-filter:blur(2px);
}
.vh-favorite-modal {
  width:min(100%,480px);
  padding:24px;
  border:1px solid #d3e2e9;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 60px rgba(4,38,58,.22);
}
.vh-favorite-modal h2 {
  margin:0 0 8px;
  color:#0a4263;
  font-size:1.45rem;
}
.vh-favorite-modal p {
  margin:0;
  color:#5e7888;
  line-height:1.55;
}
.vh-favorite-modal__actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}
.vh-favorite-modal__actions a,
.vh-favorite-modal__actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 17px;
  border-radius:12px;
  border:1px solid #afd0df;
  background:#fff;
  color:#075a83;
  text-decoration:none;
  font:inherit;
  font-weight:750;
  cursor:pointer;
}
.vh-favorite-modal__actions .primary {
  border-color:#008acb;
  background:#008acb;
  color:#fff;
}
body.vh-favorite-modal-open { overflow:hidden; }

/* Zaagservice-badge in gecentraliseerde categorie-tegels */
.vh-category-tile .vh-sawservice-badge,
.vh-assortment-tile .vh-sawservice-badge { margin-top:8px; }

@media (max-width: 1000px) {
  .vh-mainnav > a[data-direct-category]:nth-of-type(n+4) { display:none; }
}

@media (max-width: 900px) {
  .vh-header-actions { display:none !important; }
  .vh-mobile-header-actions {
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
  }
  .vh-mobile-header-action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:44px;
    min-height:44px;
    padding:0 8px;
    border:1px solid #d2e1e8;
    border-radius:12px;
    background:#fff;
    color:#074e72;
    text-decoration:none;
    font-size:.78rem;
  }
  .vh-mobile-header-action__label { display:none; }
  .vh-mainnav { display:none !important; }
}

@media (max-width: 620px) {
  .vh-mobile-menu-quicklinks { grid-template-columns:1fr; }
  .vh-mobile-quick-link { justify-content:flex-start; padding-inline:14px; }
  .vh-favorite-modal__actions { display:grid; grid-template-columns:1fr; }
  .vh-favorite-modal__actions a,
  .vh-favorite-modal__actions button { width:100%; }
}

/* Bestaande SVG-harten vullen in actieve staat */
.vh-favorite-button.active svg,
.vh-favorite-button.is-active svg,
.vh-favorite-detail.active svg,
.vh-favorite-detail.is-active svg { fill:currentColor !important; }

/* Werkelijke mobiele headerklassen uit de centrale headerpartial */
.vh-mobile-header-actions > a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:44px;
  min-height:44px;
  padding:0 8px;
  border:1px solid #d2e1e8;
  border-radius:12px;
  background:#fff;
  color:#074e72;
  text-decoration:none;
  font-size:.78rem;
}
.vh-mobile-header-actions > a .vh-ui-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.vh-mobile-menu__top { align-items:center; gap:12px; }
.vh-mobile-menu__close {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:44px;
  padding:0 14px;
  border:1px solid #c8dce6;
  border-radius:12px;
  background:#fff;
  color:#0b4666;
  font:inherit;
  font-weight:750;
  cursor:pointer;
}
.vh-mobile-menu__quick {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  margin-left:auto;
}
.vh-mobile-menu__quick > a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-height:40px;
  padding:0 9px;
  border:1px solid #d2e1e8;
  border-radius:10px;
  background:#f8fbfd;
  color:#0b4f73;
  text-decoration:none;
  font-size:.72rem;
  font-weight:750;
}

/* Werkelijke login-modal van de centrale favorietenmodule */
.vh-favorite-login-modal[hidden] { display:none !important; }
.vh-favorite-login-modal {
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:20px;
}
.vh-favorite-login-modal__backdrop {
  position:absolute;
  inset:0;
  background:rgba(5,37,54,.48);
  backdrop-filter:blur(2px);
}
.vh-favorite-login-modal__dialog {
  position:relative;
  z-index:1;
  width:min(100%,480px);
  padding:26px;
  border:1px solid #d3e2e9;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 60px rgba(4,38,58,.22);
}
.vh-favorite-login-modal__close {
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:1px solid #d3e2e9;
  border-radius:999px;
  background:#fff;
  color:#0b4f73;
  font-size:1.25rem;
  cursor:pointer;
}
.vh-favorite-login-modal__kicker {
  display:block;
  margin-bottom:8px;
  color:#0082bd;
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.12em;
}
.vh-favorite-login-modal__dialog h2 { margin:0 44px 8px 0; color:#0a4263; font-size:1.45rem; }
.vh-favorite-login-modal__dialog p { margin:0; color:#5e7888; line-height:1.55; }
.vh-favorite-login-modal__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.vh-favorite-login-modal__cancel {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 17px;
  border:1px solid #c9dbe4;
  border-radius:12px;
  background:#fff;
  color:#526f7f;
  font:inherit;
  font-weight:700;
  cursor:pointer;
}

@media (max-width:620px) {
  .vh-mobile-menu__top { flex-wrap:wrap; }
  .vh-mobile-menu__top > img { max-width:150px; }
  .vh-mobile-menu__quick { order:3; width:100%; display:grid; grid-template-columns:repeat(3,1fr); margin-left:0; }
  .vh-mobile-menu__quick > a { min-height:44px; }
  .vh-favorite-login-modal__actions { display:grid; grid-template-columns:1fr; }
  .vh-favorite-login-modal__actions > * { width:100%; justify-content:center; }
}

/* 203.3 - mobiele header: logo + account/favorieten/winkelwagen netjes uitgelijnd */
@media (max-width:760px){
  .vh-header-main{
    min-height:62px!important;
    grid-template-columns:38px minmax(96px,1fr) auto!important;
    gap:6px!important;
    align-items:center!important;
  }
  .vh-mobile-menu-trigger{
    width:36px!important;
    height:36px!important;
    font-size:21px!important;
  }
  .vh-brand{
    width:min(100%,145px)!important;
    height:44px!important;
    min-width:0!important;
    justify-self:start!important;
  }
  .vh-mobile-header-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    margin-left:0!important;
    min-width:0!important;
  }
  .vh-mobile-header-actions>a{
    position:relative!important;
    flex:0 0 36px!important;
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    background:#f4f8fb!important;
    color:#064b77!important;
  }
  .vh-mobile-header-actions>a:hover,
  .vh-mobile-header-actions>a:focus-visible{background:#eaf4fa!important;outline:2px solid rgba(0,138,203,.18)!important;outline-offset:1px}
  .vh-mobile-header-actions>a .vh-ui-icon{
    width:21px!important;
    height:21px!important;
    stroke-width:1.9!important;
  }
  .vh-mobile-header-actions>a em{
    position:absolute!important;
    right:-3px!important;
    top:-4px!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 4px!important;
    display:grid!important;
    place-items:center!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    background:#f58220!important;
    color:#fff!important;
    font-size:9px!important;
    font-style:normal!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .vh-mobile-header-actions>a em[hidden]{display:none!important}
}
@media (max-width:360px){
  .vh-header-main{grid-template-columns:34px minmax(82px,1fr) auto!important;gap:4px!important}
  .vh-mobile-menu-trigger{width:32px!important;height:34px!important}
  .vh-brand{width:min(100%,126px)!important}
  .vh-mobile-header-actions{gap:3px!important}
  .vh-mobile-header-actions>a{flex-basis:33px!important;width:33px!important;min-width:33px!important;height:34px!important;min-height:34px!important}
  .vh-mobile-header-actions>a .vh-ui-icon{width:19px!important;height:19px!important}
}

/* 203.4 - mobiele header: drie iconen zichtbaar en strak naast het logo */
@media (max-width:760px){
  .vh-header-main{
    grid-template-columns:36px minmax(0,1fr) auto!important;
    gap:6px!important;
    min-height:62px!important;
    align-items:center!important;
  }
  .vh-mobile-menu-trigger{
    width:34px!important;
    height:36px!important;
    min-width:34px!important;
    padding:0!important;
  }
  .vh-brand{
    width:min(100%,142px)!important;
    height:42px!important;
    min-width:0!important;
    justify-self:start!important;
  }
  .vh-mobile-header-actions{
    display:grid!important;
    grid-template-columns:repeat(3,36px)!important;
    gap:4px!important;
    align-items:center!important;
    justify-content:end!important;
    margin:0!important;
    min-width:116px!important;
  }
  .vh-mobile-header-actions>a{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    padding:0!important;
    border:0!important;
    border-radius:10px!important;
    background:#f4f8fb!important;
    color:#064b77!important;
  }
  .vh-mobile-header-actions>a .vh-ui-icon{
    display:block!important;
    width:21px!important;
    height:21px!important;
    fill:none!important;
    stroke:currentColor!important;
    stroke-width:1.9!important;
  }
  .vh-mobile-header-actions>a em{
    position:absolute!important;
    right:-3px!important;
    top:-4px!important;
    min-width:17px!important;
    height:17px!important;
    padding:0 4px!important;
    display:grid!important;
    place-items:center!important;
    border:2px solid #fff!important;
    border-radius:999px!important;
    background:#f58220!important;
    color:#fff!important;
    font-size:9px!important;
    font-style:normal!important;
    font-weight:900!important;
    line-height:1!important;
  }
  .vh-mobile-header-actions>a em[hidden]{display:none!important}
}
@media (max-width:380px){
  .vh-header-main{grid-template-columns:32px minmax(0,1fr) auto!important;gap:4px!important}
  .vh-mobile-menu-trigger{width:32px!important;min-width:32px!important}
  .vh-brand{width:min(100%,124px)!important;height:40px!important}
  .vh-mobile-header-actions{grid-template-columns:repeat(3,33px)!important;gap:3px!important;min-width:105px!important}
  .vh-mobile-header-actions>a{width:33px!important;height:34px!important;min-width:33px!important;min-height:34px!important}
  .vh-mobile-header-actions>a .vh-ui-icon{width:19px!important;height:19px!important}
}

/* 203.5 - iPhone/mobile header: nooit horizontaal scrollen en alle 3 iconen zichtbaar */
@media (max-width:480px){
  .vh-site-header,.vh-header-main,.vh-mobile-search-wrap{max-width:100%!important;overflow-x:clip!important}
  .vh-header-main{
    width:100%!important;
    grid-template-columns:32px minmax(0,1fr) 102px!important;
    gap:4px!important;
    min-height:60px!important;
  }
  .vh-mobile-menu-trigger{
    width:32px!important;
    min-width:32px!important;
    height:34px!important;
    padding:0!important;
  }
  .vh-brand{
    width:min(100%,132px)!important;
    max-width:132px!important;
    min-width:0!important;
    height:40px!important;
    justify-self:start!important;
  }
  .vh-mobile-header-actions{
    display:grid!important;
    grid-template-columns:repeat(3,32px)!important;
    gap:3px!important;
    width:102px!important;
    min-width:102px!important;
    max-width:102px!important;
    justify-self:end!important;
    overflow:visible!important;
  }
  .vh-mobile-header-actions>a{
    width:32px!important;
    min-width:32px!important;
    height:34px!important;
    min-height:34px!important;
    border-radius:9px!important;
  }
  .vh-mobile-header-actions>a .vh-ui-icon{
    width:19px!important;
    height:19px!important;
  }
  .vh-mobile-header-actions>a em{
    right:-2px!important;
    top:-3px!important;
    min-width:16px!important;
    height:16px!important;
    font-size:8px!important;
  }
  .vh-mobile-search-wrap{padding-inline:0!important}
  .vh-mobile-search-wrap .vh-header-search{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .vh-mobile-search-wrap .vh-header-search input{
    min-width:0!important;
    width:0!important;
  }
  .vh-mobile-search-wrap .vh-header-search button{
    flex:0 0 82px!important;
    width:82px!important;
    padding:0 10px!important;
  }
}