/*
 * 101.6.1 - Header/menu alignment guard
 * Presentatie-only: houdt de bestaande Van Hameren vormgeving intact maar
 * voorkomt overlap tussen logo, zoekbalk, account, BTW-keuze en winkelwagen.
 */

@media (min-width: 901px){
  .site-header .header-row{
    display:grid!important;
    grid-template-columns:minmax(180px,240px) minmax(320px,1fr) max-content!important;
    align-items:center!important;
    gap:clamp(14px,2.1vw,32px)!important;
    height:auto!important;
    min-height:104px!important;
    padding-top:14px!important;
    padding-bottom:14px!important;
  }
  .site-header .header-row>*{min-width:0!important}
  .site-header .logo{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .site-header .logo img{
    display:block!important;
    width:min(100%,230px)!important;
    max-width:230px!important;
    height:auto!important;
    max-height:70px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  .site-header .header-search{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
  }
  .site-header .header-search input{
    min-width:0!important;
    width:100%!important;
  }
  .site-header .header-actions{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    min-width:max-content!important;
    white-space:nowrap!important;
  }
  .site-header .header-actions>*{
    flex:0 0 auto!important;
    margin:0!important;
  }
  .site-header .header-action{
    min-width:0!important;
    max-width:190px!important;
  }
  .site-header .header-action span{white-space:nowrap!important}
  .site-header .cart-button{position:relative!important}
  .site-header .cart-button [data-cart-count]{
    position:absolute!important;
    top:-8px!important;
    left:19px!important;
    z-index:2!important;
  }
  .header-actions>.vh-vat-toggle{flex:0 0 auto!important}

  /* Hoofdmenu blijft altijd één horizontale rij. Bij te weinig breedte scrollt
     de rij rustig horizontaal in plaats van te wrappen of elementen te laten overlappen. */
  .main-nav{overflow:hidden!important}
  .main-nav__inner{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    white-space:nowrap!important;
    padding-inline:0!important;
  }
  .main-nav__inner::-webkit-scrollbar{display:none!important}
  .main-nav__inner>*{
    flex:0 0 auto!important;
    min-width:max-content!important;
    white-space:nowrap!important;
  }

  .top-strip__inner{
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    white-space:nowrap!important;
  }
  .top-strip__inner::-webkit-scrollbar{display:none!important}
  .top-strip__inner>*{flex:0 0 auto!important}
}

@media (min-width:901px) and (max-width:1180px){
  .site-header .header-row{
    grid-template-columns:minmax(145px,190px) minmax(260px,1fr) max-content!important;
    gap:12px!important;
  }
  .site-header .logo img{max-width:185px!important}
  .site-header .header-actions{gap:6px!important;font-size:13px!important}
  .site-header .header-action{padding-inline:7px!important}
  .header-actions>.vh-vat-toggle .vh-vat-toggle__label{display:none!important}
  .header-actions>.vh-vat-toggle button{padding-inline:6px!important}
  .main-nav__inner{gap:6px!important}
  .main-nav__inner>.nav-main-link,
  .main-nav__inner>.vh-fast-menu-link,
  .main-nav__inner>a,
  .category-menu-button{padding-inline:13px!important}
}

@media (min-width:901px) and (max-width:1020px){
  .site-header .header-row{
    grid-template-columns:150px minmax(220px,1fr) max-content!important;
  }
  .site-header .logo img{max-width:150px!important}
  #customerHeaderLink span{display:none!important}
  #customerHeaderLink{width:42px!important;height:42px!important;justify-content:center!important;padding:0!important}
}

/* Mobiel blijft de bestaande mobiele header gebruiken; alleen harde overflow-guards. */
@media (max-width:900px){
  .site-header,.header-row,.mobile-search,.main-nav{max-width:100vw!important}
  .header-row>*{min-width:0!important}
  .header-actions{flex:0 0 auto!important;white-space:nowrap!important}
  .mobile-search form{min-width:0!important;width:100%!important}
}