/*
 * 105.0.50 - Premium Blue Storefront
 * Visuele systeemlaag gebaseerd op het goedgekeurde ontwerpvoorbeeld.
 * Doel: dezelfde professionele, rustige Van Hameren-stijl op homepage,
 * categorieen, zoeken, productpagina, winkelwagen, checkout en footer.
 */

:root{
  --vh-premium-navy:#062f5f;
  --vh-premium-navy-2:#073b75;
  --vh-premium-navy-3:#0b4f92;
  --vh-premium-blue:#087fc5;
  --vh-premium-blue-2:#0b91d1;
  --vh-premium-ice:#f3f7fa;
  --vh-premium-ice-2:#eaf2f7;
  --vh-premium-line:#d5e2ea;
  --vh-premium-ink:#0e2f4a;
  --vh-premium-muted:#607789;
  --vh-premium-white:#fff;
  --vh-premium-shadow:0 12px 30px rgba(13,53,82,.08);
  --vh-premium-shadow-hover:0 18px 38px rgba(13,53,82,.13);
}

html{background:var(--vh-premium-ice)}
body{
  background:var(--vh-premium-ice)!important;
  color:var(--vh-premium-ink)!important;
}

/* ===== 1. BOVENBALK ===== */
.top-strip{
  height:auto!important;
  min-height:54px!important;
  background:linear-gradient(100deg,var(--vh-premium-navy) 0%,#063b72 58%,#042950 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 2px 0 rgba(255,255,255,.04)!important;
  overflow:visible!important;
}
.top-strip::after{display:none!important}
.top-strip__inner{
  min-height:54px!important;
  display:flex!important;
  align-items:center!important;
  gap:0!important;
}
.top-usp{
  min-height:34px;
  display:flex!important;
  align-items:center;
  gap:10px!important;
  padding:0 clamp(16px,2.2vw,34px);
  border-right:1px solid rgba(255,255,255,.17);
  color:#fff!important;
  text-transform:none!important;
  letter-spacing:0!important;
}
.top-usp:first-child{padding-left:0}
.top-usp svg{width:25px;height:25px;flex:0 0 25px;fill:none;stroke:#fff;stroke-width:1.7}
.top-usp strong,.top-usp small{display:block}
.top-usp strong{font-size:11px;line-height:1.2;font-weight:900;text-transform:uppercase;letter-spacing:.025em;color:#fff}
.top-usp small{margin-top:2px;color:#cfe0ec;font-size:10px;font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0}
.top-review-inline{
  margin-left:auto;
  background:transparent!important;
  border:0!important;
  padding-left:24px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  white-space:nowrap;
}
.top-review-inline .google-review-bar__stars{color:#ffc000!important;font-size:14px!important;letter-spacing:1px}
.top-review-inline .google-review-bar__text{font-size:11px;color:#eef6fb}
.top-review-inline a{font-size:11px!important;color:#fff!important;font-weight:800!important;text-decoration:none!important}
.top-review-inline a:hover{text-decoration:underline!important}
.top-strip__login{
  margin-left:22px!important;
  padding-left:20px;
  border-left:1px solid rgba(255,255,255,.17);
  color:#fff!important;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
.google-review-bar:not(.top-review-inline){display:none!important}

/* ===== 2. HOOFDHEADER ===== */
.site-header{
  background:#fff!important;
  border-bottom:0!important;
  box-shadow:0 7px 24px rgba(17,54,78,.07)!important;
}
.header-row{
  min-height:128px!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:minmax(190px,245px) minmax(390px,1fr) minmax(255px,330px)!important;
  grid-template-rows:66px 28px!important;
  column-gap:clamp(24px,3vw,52px)!important;
  row-gap:2px!important;
  align-content:center!important;
  align-items:center!important;
}
.header-row>.logo{grid-column:1;grid-row:1/3;align-self:center}
.logo img{width:min(100%,245px)!important;max-height:78px!important;object-fit:contain!important}
.header-row>.header-search{grid-column:2;grid-row:1;width:100%!important;max-width:none!important}
.header-search{
  height:58px!important;
  grid-template-columns:52px minmax(0,1fr) 62px!important;
  border:1px solid #cddde7!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(22,65,91,.07)!important;
  overflow:visible!important;
}
.header-search>svg{width:23px;height:23px;color:#153b58!important}
.header-search input{font-size:16px!important;color:var(--vh-premium-ink)!important;background:transparent!important}
.header-search input::placeholder{color:#758896}
.header-search>button{
  width:52px!important;
  height:48px!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,var(--vh-premium-blue-2),#0878ba)!important;
  box-shadow:0 7px 14px rgba(0,112,175,.20)!important;
}
.header-search:focus-within{
  border-color:#78bfe1!important;
  box-shadow:0 0 0 3px rgba(8,143,197,.09),0 9px 24px rgba(22,65,91,.08)!important;
}
.header-assurances{
  grid-column:2;
  grid-row:2;
  display:flex!important;
  align-items:center;
  justify-content:space-around;
  gap:18px;
  padding:0 4px;
  color:#294b63;
  font-size:11px;
  white-space:nowrap;
}
.header-assurances span{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.header-assurances svg{width:15px;height:15px;fill:none;stroke:var(--vh-premium-blue);stroke-width:2.2}
.header-row>.header-actions{grid-column:3;grid-row:1/3}
.header-actions{gap:18px!important}
.header-action{
  min-height:50px;
  padding:5px 9px!important;
  border-radius:11px;
  color:var(--vh-premium-ink)!important;
}
.header-action:hover{background:#f1f6f9!important}
.header-action svg{color:#103a58!important}
.header-action span{font-weight:850!important}
.cart-button b{background:var(--vh-premium-blue)!important;color:#fff!important}

/* ===== 3. HOOFDNAVIGATIE ===== */
.main-nav{
  background:linear-gradient(90deg,var(--vh-premium-navy) 0%,#073f7e 52%,var(--vh-premium-navy) 100%)!important;
  border:0!important;
  border-bottom:1px solid #0c5a9e!important;
  box-shadow:0 7px 18px rgba(4,42,80,.18)!important;
}
.main-nav__inner{
  min-height:70px!important;
  height:70px!important;
  justify-content:center!important;
  gap:10px!important;
  padding-block:9px;
}
.category-menu-button,
.main-nav__inner>.nav-main-link,
.main-nav__inner>.nav-contact-link,
.main-nav__inner>a{
  min-height:46px!important;
  height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 clamp(13px,1.25vw,20px)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(17,91,161,.72),rgba(4,55,111,.62))!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 10px rgba(1,25,51,.12)!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.category-menu-button{background:rgba(4,40,78,.82)!important}
.category-menu-button:hover,
.main-nav__inner>.nav-main-link:hover,
.main-nav__inner>.nav-contact-link:hover,
.main-nav__inner>a:hover,
.main-nav__inner>.active{
  background:#fff!important;
  color:var(--vh-premium-navy)!important;
  border-color:#fff!important;
  box-shadow:0 7px 18px rgba(0,21,45,.18)!important;
}
.category-menu-button svg{color:currentColor!important}

/* ===== 4. HERO / HOMEPAGE ===== */
.hero,.home-pro-hero{
  background-color:#0a3157!important;
}
.hero::after,.home-pro-hero::after{
  background:linear-gradient(90deg,rgba(3,30,57,.82),rgba(3,42,76,.56) 52%,rgba(3,27,52,.70))!important;
}
.hero__content,.home-pro-hero__content{
  text-align:center!important;
  margin-inline:auto!important;
  max-width:980px!important;
}
.hero__content h1,.home-pro-hero__content h1{
  max-width:900px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  color:#fff!important;
  text-shadow:0 3px 18px rgba(0,22,45,.24);
}
.hero__content p,.home-pro-hero__content p{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  color:#eef6fb!important;
}
.hero-search{
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  border-radius:13px!important;
  box-shadow:0 15px 34px rgba(2,25,50,.22)!important;
}
.project-search-switch{margin-left:auto!important;margin-right:auto!important}
.home-pro-trust,.hero-benefits{
  border-color:rgba(255,255,255,.16)!important;
}

/* ===== 5. ALGEMENE PAGINA-OPBOUW ===== */
.page-banner,.category-page-banner{
  background:linear-gradient(180deg,#f8fafc 0%,#eef4f7 100%)!important;
  border-bottom:1px solid var(--vh-premium-line)!important;
}
.page-banner h1,.category-page-banner h1,
.section-head h2,.catalog-title-row h2,.product-info h1{
  color:var(--vh-premium-ink)!important;
  letter-spacing:-.035em!important;
}
.breadcrumbs{color:#667e8d!important}
.breadcrumbs a{color:#3c6f91!important}
.breadcrumbs strong{color:#35576d!important}
.section.white{background:#fff!important}
.section.alt,.catalog-shell{background:var(--vh-premium-ice)!important}
.section{border-color:var(--vh-premium-line)!important}

/* ===== 6. CATEGORIEEN / FILTERS / TOOLBARS ===== */
.catalog-sidebar,.sidebar,.category-sidebar,.search-filter-sidebar,.filter-panel,
.catalog-toolbar,.catalog-search-bar,.catalog-deep-intro,.catalog-deep-note,
.mobile-category-drawer{
  background:#fff!important;
  border-color:var(--vh-premium-line)!important;
  border-radius:14px!important;
  box-shadow:0 7px 22px rgba(20,60,85,.045)!important;
}
.catalog-sidebar h2,.filter-panel h2,.filter-panel h3,
.sidebar h2,.category-sidebar h2{color:var(--vh-premium-ink)!important}
.sidebar-link,.sidebar-sublink,.filter-chip{
  border-radius:9px!important;
  color:#26485f!important;
}
.sidebar-link:hover,.sidebar-sublink:hover,.filter-chip:hover{background:#edf4f8!important}
.sidebar-link.active,.sidebar-sublink.active,.filter-chip.active{
  background:#e2f0f7!important;
  color:#074b78!important;
  box-shadow:inset 4px 0 var(--vh-premium-blue)!important;
}
.filter-chip.active{border-color:#8fc7df!important;box-shadow:none!important}
.catalog-toolbar input,.catalog-toolbar select,
.search-results-toolbar select,.filter-panel select,.filter-panel input{
  border-color:#cedce5!important;
  border-radius:10px!important;
  background:#fff!important;
  color:var(--vh-premium-ink)!important;
}

/* ===== 7. PRODUCTKAARTEN ===== */
.product-card,.product-card--calm{
  border:1px solid #d5e1e8!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 8px 22px rgba(16,55,80,.055)!important;
  transform:none!important;
}
.product-card:hover,.product-card--calm:hover{
  border-color:#a8cadb!important;
  box-shadow:var(--vh-premium-shadow-hover)!important;
  transform:translateY(-3px)!important;
}
.product-card__image,.product-card--calm .product-card__image{
  background:#eaf1f5!important;
}
.product-card__body{padding:16px!important}
.product-card__category{color:#0b73ad!important}
.product-card h3{color:var(--vh-premium-ink)!important}
.product-card__price-panel,.product-card__stock-summary,
.product-card__facts>div,.product-card__spec{
  background:#f6f9fb!important;
  border-color:#e0e8ed!important;
  border-radius:9px!important;
}
.product-card__choose,.product-card__choose--calm,.product-card__choose--3d,
.button-primary,#addSelectedToCart{
  background:linear-gradient(180deg,#0b79c6,#075cae)!important;
  color:#fff!important;
  border:1px solid #075aa7!important;
  border-radius:9px!important;
  box-shadow:0 5px 12px rgba(6,87,162,.16)!important;
}
.product-card__choose:hover,.button-primary:hover,#addSelectedToCart:hover{
  background:linear-gradient(180deg,#096eb8,#064d96)!important;
  transform:translateY(-1px)!important;
}
.button-secondary{
  background:#fff!important;
  color:var(--vh-premium-navy)!important;
  border:1px solid #bed1dc!important;
  border-radius:9px!important;
}
.button-secondary:hover{background:#edf4f8!important}

/* ===== 8. PRODUCTDETAIL ===== */
.product-page{background:var(--vh-premium-ice)!important}
.product-gallery,.product-info{
  background:#fff!important;
  border-color:var(--vh-premium-line)!important;
  border-radius:16px!important;
  box-shadow:var(--vh-premium-shadow)!important;
}
.product-main-image,.variant-table,.product-purchase-footer,
.product-saw-intro,.cut-callout,.related-products{
  border-color:#d7e3ea!important;
}
.product-info__head{border-bottom-color:#e1e8ed!important}
.live-status{background:#edf8f1!important;border-color:#cde6d4!important;color:#246b41!important}
.variant-row:nth-child(even){background:#f8fafb!important}
.product-saw-intro{background:#eef6fa!important;border-radius:12px!important}
.cut-callout--featured{
  background:linear-gradient(135deg,#fff 0%,#eef6fa 100%)!important;
  border-color:#b9d8e7!important;
  border-radius:14px!important;
}

/* ===== 9. ZOEKRESULTATEN ===== */
.search-loading-banner,.search-results-toolbar,.search-results-loading{
  border-color:var(--vh-premium-line)!important;
}
.suggestion-item:hover{background:#edf5f9!important}
.suggestions{
  border-color:#cbdce6!important;
  border-radius:12px!important;
  box-shadow:0 18px 44px rgba(10,48,75,.16)!important;
}

/* ===== 10. WINKELWAGEN / CHECKOUT / DIALOGEN ===== */
.cart-drawer,.checkout-page-card,.success-dialog,.footer-map-dialog{
  background:#fff!important;
  border-color:var(--vh-premium-line)!important;
  box-shadow:0 28px 70px rgba(5,37,64,.22)!important;
}
.cart-drawer>header,.cart-drawer>footer{background:#f5f8fa!important;border-color:#dbe5ea!important}
.checkout-page-shell{background:var(--vh-premium-ice)!important}
.checkout-progress .active{background:var(--vh-premium-blue)!important;color:#fff!important}

/* ===== 11. CATEGORIE-MENU ===== */
.step-menu{
  background:linear-gradient(180deg,#eaf4f8 0%,#dcebf2 100%)!important;
  color:var(--vh-premium-ink)!important;
  border-right:1px solid #c9d9e2!important;
  box-shadow:28px 0 70px rgba(5,39,64,.20)!important;
}
.step-menu__head{background:rgba(255,255,255,.38)!important;border-bottom:1px solid #cfdee6!important}
.step-menu__head img{filter:none!important}
.step-menu__head button{background:#fff!important;border:1px solid #c8d8e1!important;color:var(--vh-premium-ink)!important;border-radius:12px!important}
.step-menu__title{background:rgba(6,95,156,.055)!important;color:#456678!important;border-bottom:1px solid #d1dfe6!important}
.step-link{
  background:#fff!important;
  color:var(--vh-premium-ink)!important;
  border-color:#d6e2e8!important;
  box-shadow:0 7px 18px rgba(16,55,80,.055)!important;
}
.step-link:hover,.step-link.active{background:#fbfdfe!important;border-color:#91c6dc!important;box-shadow:0 12px 25px rgba(16,55,80,.10)!important}
.step-link__copy strong{color:var(--vh-premium-ink)!important}
.step-link__copy small,.step-link small{color:#6b8391!important}

/* ===== 12. FOOTER ===== */
.site-footer{
  background:linear-gradient(180deg,#073b75 0%,#052f60 42%,#04264d 100%)!important;
  color:#e8f2f8!important;
  border-top:0!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06)!important;
}
.site-footer h3{color:#fff!important}
.site-footer p,.site-footer a,.footer-company-ids{color:#c8dbe7!important}
.site-footer a:hover{color:#fff!important}
.site-footer__logo{filter:none!important}
.footer-trust{
  border-color:rgba(255,255,255,.13)!important;
  background:rgba(255,255,255,.045)!important;
}
.footer-bottom{border-top-color:rgba(255,255,255,.12)!important;color:#b7cfdd!important}

/* ===== 13. CONSISTENTE DETAILS ===== */
input,select,textarea,button{font-family:inherit}
:focus-visible{outline:3px solid rgba(14,148,207,.24)!important;outline-offset:2px!important}
.empty-state,.home-story-card,.saw-info-steps article,.contact-panel{
  border-color:var(--vh-premium-line)!important;
  border-radius:14px!important;
  box-shadow:0 7px 20px rgba(17,56,81,.05)!important;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1180px){
  .top-usp{padding-inline:15px}
  .top-usp small{display:none}
  .top-review-inline{padding-left:14px}
  .header-row{grid-template-columns:minmax(160px,205px) minmax(320px,1fr) minmax(230px,270px)!important;column-gap:20px!important}
  .header-assurances{gap:9px;font-size:10px}
  .main-nav__inner{gap:6px!important}
  .category-menu-button,.main-nav__inner>.nav-main-link,.main-nav__inner>.nav-contact-link,.main-nav__inner>a{padding-inline:11px!important;font-size:.68rem!important}
}

@media(max-width:900px){
  .header-assurances{display:none!important}
  .step-menu__list{padding:12px!important}
  .step-link{border-radius:14px!important;margin-bottom:10px!important}
}

@media(max-width:767px){
  body{background:#fff!important}
  .site-header{box-shadow:0 4px 14px rgba(17,54,78,.07)!important}
  .header-row{min-height:72px!important;grid-template-rows:72px!important}
  .logo img{max-width:170px!important}
  .mobile-search{background:#fff!important}
  .mobile-search input{background:#fff!important;border-color:#cbdbe4!important}
  .mobile-search button{background:linear-gradient(180deg,#0b83ca,#0872b5)!important}
  .page-banner,.category-page-banner{padding-top:20px!important;padding-bottom:20px!important}
  .product-card,.product-card--calm{border-radius:12px!important}
  .site-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))!important}
}