/* =========================================================
   Hoeve Bold v1.0 — radical / brutalist editorial concept
   ========================================================= */
:root{
  --hb-blue:#24469a;
  --hb-blue-dark:#163270;
  --hb-sand:#cabd9b;
  --hb-cream:#f3efe6;
  --hb-black:#101317;
  --hb-white:#fff;
  --hb-line:#cfd3da;
  --hb-rail:120px;
}
html{scroll-behavior:smooth}
body{
  margin:0!important;
  background:#f6f5f0!important;
  color:var(--hb-black)!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px!important;
  line-height:1.5!important;
}
*{box-sizing:border-box}
#dd-main{background:none!important;width:100%!important;min-width:0!important}
.dd-nav,.dd-header{display:none!important}

.hb-site{margin-left:var(--hb-rail);min-height:100vh}

/* Fixed vertical brand rail */
.hb-rail{
  position:fixed;z-index:30000;left:0;top:0;bottom:0;width:var(--hb-rail);
  background:var(--hb-blue);color:#fff;
  display:flex;flex-direction:column;align-items:center;
  border-right:1px solid rgba(255,255,255,.18)
}
.hb-rail-brand{
  width:100%;height:110px;display:flex;align-items:center;justify-content:center;
  background:#fff;border-bottom:1px solid #ddd;padding:14px
}
.hb-rail-brand img{max-width:90px;max-height:78px}
.hb-rail-word{
  margin-top:34px;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:14px;font-weight:900;letter-spacing:7px
}
.hb-rail-bottom{
  margin-top:auto;padding:18px 0 22px;display:flex;flex-direction:column;align-items:center;gap:10px
}
.hb-rail-bottom a,.hb-rail-bottom span{
  color:#fff!important;text-decoration:none!important;font-size:10px;
  writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:1px
}

/* Small top bar instead of classic site header */
.hb-topbar{
  position:sticky;top:0;z-index:20000;height:68px;
  background:rgba(246,245,240,.96);border-bottom:1px solid #d8d8d4;
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;
  backdrop-filter:blur(10px)
}
.hb-menu-btn{
  display:flex;align-items:center;gap:12px;border:0;background:none;padding:0;
  color:var(--hb-black);font-weight:900;letter-spacing:1.4px;cursor:pointer
}
.hb-menu-btn i{display:block;width:34px;height:2px;background:var(--hb-blue);position:relative}
.hb-menu-btn i:after{content:"";position:absolute;right:0;top:7px;width:20px;height:2px;background:var(--hb-blue)}
.hb-menu{
  position:absolute;top:68px;left:0;width:420px;
  background:var(--hb-blue);display:none;padding:18px 0;
  box-shadow:0 20px 50px rgba(10,20,50,.16)
}
.hb-menu.is-open{display:block}
.hb-menu ul,.hb-menu .menu{margin:0!important;padding:0!important;list-style:none!important}
.hb-menu li{margin:0!important;padding:0!important}
.hb-menu a{
  display:block!important;padding:14px 28px!important;color:#fff!important;
  text-decoration:none!important;background:none!important;border:0!important;
  font-weight:900!important;font-size:16px!important;letter-spacing:.4px
}
.hb-menu a:hover,.hb-menu li.active>a,.hb-menu li.current>a{
  background:var(--hb-sand)!important;color:var(--hb-blue-dark)!important
}
.hb-topbar-meta{display:flex;gap:18px}
.hb-topbar-meta a{
  color:var(--hb-blue)!important;text-decoration:none!important;
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px
}

/* Hero is a split composition, not a conventional hero */
.hb-hero{
  position:relative;
  min-height:760px;
  display:grid;
  grid-template-columns:48% 52%;
  background:#f6f5f0;
  overflow:hidden
}
.hb-hero-copy{
  padding:84px 46px 70px 62px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:3
}
.hb-tag{
  color:var(--hb-blue);font-size:11px;font-weight:900;letter-spacing:1.8px;
  text-transform:uppercase;margin-bottom:28px
}
.hb-hero-copy h1{
  margin:0!important;
  color:var(--hb-black)!important;
  font:900 clamp(62px,7vw,112px)/.84 Arial,Helvetica,sans-serif!important;
  letter-spacing:-7px!important;text-transform:uppercase
}
.hb-hero-copy h1 span{display:block}
.hb-hero-copy h1 em{font-style:normal;color:var(--hb-blue)}
.hb-hero-copy p{
  max-width:520px;margin:34px 0 30px!important;
  font-size:17px!important;line-height:1.7!important;color:#52565c!important
}
.hb-hero-links{display:flex;gap:8px;flex-wrap:wrap}
.hb-hero-links a{
  display:inline-flex;align-items:center;gap:26px;
  padding:14px 16px;border:2px solid var(--hb-black);
  color:var(--hb-black)!important;text-decoration:none!important;
  font-weight:900!important;font-size:12px!important;letter-spacing:.8px
}
.hb-hero-links a:first-child{
  background:var(--hb-blue);border-color:var(--hb-blue);color:#fff!important
}
.hb-hero-links a:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--hb-sand)}

.hb-visual-wrap{position:relative;min-height:760px;background:var(--hb-blue)}
.hb-slide-stage{
  position:absolute;left:7%;top:7%;right:0;bottom:12%;
  overflow:hidden;background:#222
}
.hb-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.hb-slide.is-active{opacity:1}
.hb-slide img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  filter:saturate(.9) contrast(1.03)
}
.hb-big-number{
  position:absolute;left:-55px;bottom:3px;z-index:4;
  color:var(--hb-sand);
  font:900 170px/.8 Arial,sans-serif;
  letter-spacing:-12px;
  text-shadow:0 8px 30px rgba(0,0,0,.1)
}
.hb-slide-controls{
  position:absolute;z-index:6;right:24px;bottom:24px;
  display:flex;align-items:center;gap:12px
}
.hb-slide-controls button{
  width:46px;height:42px;border:2px solid #fff;background:transparent;color:#fff;
  font-size:20px;cursor:pointer
}
.hb-progress{
  width:120px;height:3px;background:rgba(255,255,255,.35);overflow:hidden
}
.hb-progress span{display:block;height:100%;width:0;background:var(--hb-sand)}

.hb-hero-stamp{
  position:absolute;z-index:7;right:20px;top:90px;
  width:110px;height:110px;border-radius:50%;
  background:var(--hb-sand);color:var(--hb-blue-dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(8deg);
  border:2px solid var(--hb-blue-dark)
}
.hb-hero-stamp span,.hb-hero-stamp small{font-size:8px;font-weight:900;letter-spacing:1px}
.hb-hero-stamp strong{font-size:28px;line-height:1}

/* Moving ticker */
.hb-marquee{
  overflow:hidden;background:var(--hb-black);color:#fff;
  border-top:4px solid var(--hb-sand);border-bottom:4px solid var(--hb-sand)
}
.hb-marquee div{
  width:max-content;padding:14px 0;
  white-space:nowrap;font-size:13px;font-weight:900;letter-spacing:2px;
  animation:hbMarquee 24s linear infinite
}
@keyframes hbMarquee{to{transform:translateX(-50%)}}

/* Big blocks, almost poster-like */
.hb-home-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.hb-home-block{
  min-height:280px;padding:28px;position:relative;
  text-decoration:none!important;border-right:1px solid #cfd3da
}
.hb-home-block:last-child{border-right:0}
.hb-home-block span{font-size:11px;font-weight:900;letter-spacing:1px}
.hb-home-block h2{
  margin:70px 0 12px!important;
  font:900 38px/.95 Arial,sans-serif!important;
  letter-spacing:-2px!important;text-transform:uppercase
}
.hb-home-block p{max-width:220px;margin:0!important;font-size:13px!important}
.hb-home-block b{position:absolute;right:24px;top:24px;font-size:25px}
.hb-home-block:hover b{transform:translate(4px,-4px)}
.hb-blue{background:var(--hb-blue);color:#fff!important}
.hb-blue h2{color:#fff!important}
.hb-sand{background:var(--hb-sand);color:var(--hb-blue-dark)!important}
.hb-sand h2{color:var(--hb-blue-dark)!important}
.hb-white{background:#fff;color:var(--hb-black)!important}
.hb-white h2{color:var(--hb-blue)!important}
.hb-outline{background:#f6f5f0;color:var(--hb-black)!important;border-top:8px solid var(--hb-blue)}
.hb-outline h2{color:var(--hb-black)!important}

/* Inner page title */
.hb-inner-title{
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:20px;
  padding:52px 48px 34px;background:var(--hb-blue);color:#fff
}
.hb-inner-number{font-size:11px;letter-spacing:2px;color:var(--hb-sand);font-weight:900}
.hb-inner-title h1{
  margin:0!important;color:#fff!important;
  font:900 clamp(44px,6vw,88px)/.9 Arial,sans-serif!important;
  text-transform:uppercase;letter-spacing:-5px!important
}
.hb-inner-line{width:100px;height:8px;background:var(--hb-sand)}

/* Content area intentionally plain and spacious */
.dd-sheet{
  width:100%!important;min-width:0!important;max-width:none!important;
  margin:0!important;padding:0!important;background:#f6f5f0!important;box-shadow:none!important
}
.dd-sheet:before,.dd-sheet:after{display:none!important}
.dd-layout-wrapper{padding:48px 54px 70px!important;background:#f6f5f0!important}
.dd-content-layout-row{
  display:grid!important;grid-template-columns:200px minmax(0,1fr)!important;
  gap:48px!important;align-items:start!important;background:none!important
}
.dd-layout-cell.dd-sidebar1{width:auto!important;padding:0!important;background:none!important}
.dd-layout-cell.dd-content{
  width:auto!important;min-width:0!important;
  padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important
}
.dd-sidebar1 .dd-block{
  margin:0 0 22px!important;background:none!important;border:0!important;box-shadow:none!important
}
.dd-sidebar1 .dd-blockheader{
  margin:0 0 12px!important;padding:0 0 8px!important;
  background:none!important;color:var(--hb-blue)!important;
  border-bottom:4px solid var(--hb-blue)!important;
  font-size:10px!important;letter-spacing:1.5px!important;text-transform:uppercase
}
.dd-sidebar1 .dd-blockcontent{padding:0!important;background:none!important}
.dd-sidebar1 ul{list-style:none!important;margin:0!important;padding:0!important}
.dd-sidebar1 li a{
  display:block!important;padding:9px 0!important;border-bottom:1px solid #d6d6d1!important;
  background:none!important;color:#4c5159!important;text-decoration:none!important;
  font-size:12px!important;font-weight:800!important
}
.dd-sidebar1 li.active>a,.dd-sidebar1 li.current>a,.dd-sidebar1 li a:hover{
  color:var(--hb-blue)!important;padding-left:8px!important
}

.dd-content h1,.dd-content h2,.dd-content h3{
  color:var(--hb-blue)!important;font-family:Arial,Helvetica,sans-serif!important;
  text-transform:uppercase;font-weight:900!important;letter-spacing:-1px!important
}
.dd-content h1{font-size:42px!important}
.dd-content h2{font-size:28px!important}
.dd-content h3{font-size:20px!important}
.dd-content p{line-height:1.7!important}
.dd-content a{color:var(--hb-blue)!important}

/* Keep functional specialty pages intact but flatten the cards */
.hoeve-welkom .hw-intro,
.hoeve-motoren .hm-motor-intro,
.hoeve-scooters .hs-intro,
.hoeve-banden .hb-intro,
.hoeve-nieuwsbrief .hn-intro,
.hoeve-contact .hc-intro,
.hoeve-nieuws .hnieuws-intro{
  background:#fff!important;border:0!important;border-left:10px solid var(--hb-sand)!important;
  border-radius:0!important;box-shadow:none!important;padding:25px 28px!important
}
.hoeve-welkom .hw-promo{background:var(--hb-blue)!important;border-radius:0!important}

/* Footer */
.dd-footer{
  margin:0!important;padding:42px 48px 22px!important;
  background:var(--hb-black)!important;color:#dfe3e8!important;
  border-top:10px solid var(--hb-sand)!important
}
.dd-footer a{color:#fff!important}
#toTop{background:var(--hb-blue)!important;border-radius:0!important}

/* responsive */
@media(max-width:1050px){
  :root{--hb-rail:82px}
  .hb-rail-brand{height:88px}.hb-rail-brand img{max-width:60px}
  .hb-hero{grid-template-columns:1fr;min-height:0}
  .hb-hero-copy{padding:62px 38px 44px}
  .hb-visual-wrap{min-height:560px}
  .hb-home-grid{grid-template-columns:1fr 1fr}
  .hb-home-block:nth-child(2){border-right:0}
  .hb-home-block:nth-child(-n+2){border-bottom:1px solid #cfd3da}
}
@media(max-width:760px){
  :root{--hb-rail:0px}
  .hb-site{margin-left:0}
  .hb-rail{display:none}
  .hb-topbar{height:62px;padding:0 16px}
  .hb-menu{top:62px;width:100%}
  .hb-topbar-meta{display:none}
  .hb-hero-copy{padding:42px 20px 30px}
  .hb-hero-copy h1{font-size:56px!important;letter-spacing:-4px!important}
  .hb-visual-wrap{min-height:420px}
  .hb-slide-stage{left:0;top:0;right:0;bottom:0}
  .hb-big-number{left:10px;bottom:8px;font-size:95px}
  .hb-hero-stamp{width:86px;height:86px;right:14px;top:18px}
  .hb-home-grid{grid-template-columns:1fr}
  .hb-home-block{min-height:210px;border-right:0;border-bottom:1px solid #cfd3da}
  .hb-home-block h2{margin-top:45px}
  .hb-inner-title{grid-template-columns:1fr;padding:34px 20px 24px}
  .hb-inner-title h1{font-size:45px!important;letter-spacing:-3px!important}
  .hb-inner-line{width:70px}
  .dd-layout-wrapper{padding:28px 20px 46px!important}
  .dd-content-layout-row{grid-template-columns:1fr!important}
  .dd-sidebar1{display:none!important}
}


/* =========================================================
   Hoeve Bold v1.1 - configurable backend slider
   ========================================================= */
.hb-hero{
  min-height:var(--hb-slider-desktop-height)!important;
}
.hb-visual-wrap{
  min-height:var(--hb-slider-desktop-height)!important;
}
.hb-slide-stage{
  min-height:0!important;
}
.hb-slide img{
  user-select:none;
  -webkit-user-drag:none;
}
.hb-slide-controls{
  backdrop-filter:blur(4px);
}
.hb-slide-controls button:hover{
  background:#fff;
  color:var(--hb-blue);
}
@media(max-width:760px){
  .hb-visual-wrap{
    min-height:var(--hb-slider-mobile-height)!important;
  }
}


/* =========================================================
   Hoeve Bold v1.2 - slider fix
   ========================================================= */
.hb-slider-warning{
  margin:0;
  padding:16px 24px;
  background:#fff3cd;
  color:#5f4b00;
  border-bottom:2px solid #d9bd43;
  font-size:13px;
}
.hb-slider-warning strong,
.hb-slider-warning span{display:block}
.hb-slider-warning code{font-weight:700}

.hb-slide-stage,
.hb-slide,
.hb-slide img{
  display:block!important;
}
.hb-slide{
  visibility:visible!important;
}
.hb-slide.is-active{
  opacity:1!important;
  z-index:2!important;
}


/* =========================================================
   Hoeve Bold v1.3 - compactere hero en navigatieblokken
   ========================================================= */
.hb-hero-copy{
  padding-top:52px!important;
  padding-bottom:46px!important;
}
.hb-hero-copy h1{
  font-size:clamp(54px,6vw,92px)!important;
}
.hb-hero-copy p{
  margin-top:24px!important;
  margin-bottom:22px!important;
}
.hb-home-block{
  min-height:205px!important;
  padding:22px!important;
}
.hb-home-block h2{
  margin-top:42px!important;
  margin-bottom:8px!important;
  font-size:31px!important;
}
.hb-home-block b{
  right:20px!important;
  top:18px!important;
}
.hb-home-block p{
  font-size:12px!important;
}
@media(max-width:1050px){
  .hb-home-block{min-height:185px!important}
}
@media(max-width:760px){
  .hb-hero-copy h1{font-size:50px!important}
  .hb-home-block{min-height:165px!important;padding:19px!important}
  .hb-home-block h2{margin-top:32px!important;font-size:28px!important}
}


/* =========================================================
   Hoeve Bold v1.4 - slidernummer weg + compactere tegels
   ========================================================= */

/* Grote decoratieve cijfers 01/02/03/04 in de slider verwijderen */
.hb-slide-no,
.hb-slide-number,
.hb-slide-index,
.hb-visual-wrap .hb-number,
.hb-visual-wrap [class*="slide-no"],
.hb-visual-wrap [class*="slide-number"]{
  display:none!important;
}

/* De vier hoofdblokken onder de slider compacter */
.hb-home-blocks{
  min-height:0!important;
}
.hb-home-block{
  min-height:150px!important;
  height:auto!important;
  padding:16px 22px 18px!important;
}
.hb-home-block h2{
  margin-top:26px!important;
  margin-bottom:5px!important;
  font-size:27px!important;
  line-height:1!important;
}
.hb-home-block p{
  margin:0!important;
  font-size:11px!important;
  line-height:1.35!important;
}
.hb-home-block b{
  top:14px!important;
  right:18px!important;
}
.hb-home-block .hb-block-no{
  top:15px!important;
  left:22px!important;
}

@media(max-width:1050px){
  .hb-home-block{
    min-height:140px!important;
  }
}
@media(max-width:760px){
  .hb-home-block{
    min-height:125px!important;
    padding:15px 18px!important;
  }
  .hb-home-block h2{
    margin-top:24px!important;
    font-size:24px!important;
  }
}

/* v1.5: decorative slider sequence numbers removed */
.hb-big-no{display:none!important;}


/* =========================================================
   Hoeve Bold v1.6 - alle slider nummer-overlays definitief uit
   ========================================================= */
.hb-big-number,
.hb-big-no,
#hbBigNumber,
[id*="BigNumber"],
[class*="big-number"]{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
}


/* =========================================================
   Hoeve Bold v1.7 - nieuw navigatieconcept
   Desktop: vaste horizontale balk
   Mobiel: fullscreen menu overlay
   ========================================================= */

/* oude menu-uitklapstijl neutraliseren */
.hb-topbar-v17{
  position:sticky!important;
  top:0!important;
  z-index:25000!important;
  height:78px!important;
  padding:0!important;
  background:#f6f5f0!important;
  border-bottom:1px solid #d7d8dc!important;
}
.hb-topbar-v17-inner{
  height:78px;
  display:grid;
  grid-template-columns:180px minmax(0,1fr) auto;
  align-items:center;
  gap:20px;
  padding:0 26px;
}
.hb-topbar-logo{
  display:flex;
  align-items:center;
  width:170px;
}
.hb-topbar-logo img{
  display:block;
  max-width:165px;
  max-height:58px;
  width:auto;
  height:auto;
}

/* desktop menu altijd zichtbaar */
.hb-menu-v17{
  position:static!important;
  display:flex!important;
  width:auto!important;
  padding:0!important;
  background:none!important;
  box-shadow:none!important;
}
.hb-menu-v17 ul,
.hb-menu-v17 .menu{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}
.hb-menu-v17 li{
  margin:0!important;
  padding:0!important;
  flex:0 0 auto;
}
.hb-menu-v17 a{
  display:flex!important;
  align-items:center!important;
  min-height:78px!important;
  padding:0 10px!important;
  color:#1f2430!important;
  background:none!important;
  border:0!important;
  border-bottom:4px solid transparent!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.2px!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}
.hb-menu-v17 a:hover,
.hb-menu-v17 li.active>a,
.hb-menu-v17 li.current>a{
  background:none!important;
  color:var(--hb-blue)!important;
  border-bottom-color:var(--hb-sand)!important;
}

/* contact rechts */
.hb-topbar-actions-v17{
  display:flex;
  align-items:center;
  gap:10px;
}
.hb-contact-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  background:var(--hb-blue);
  color:#fff!important;
  border:2px solid var(--hb-blue);
  text-decoration:none!important;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.7px;
}
.hb-contact-pill:hover{
  background:var(--hb-sand);
  border-color:var(--hb-sand);
  color:var(--hb-blue-dark)!important;
}
.hb-menu-btn-v17{
  display:none!important;
}

/* iets meer ruimte omdat de oude rail nog aanwezig is */
.hb-site{
  margin-left:var(--hb-rail)!important;
}

/* compacte desktopbreedtes */
@media(max-width:1180px) and (min-width:761px){
  .hb-topbar-v17-inner{
    grid-template-columns:145px minmax(0,1fr) auto;
    gap:12px;
    padding:0 16px;
  }
  .hb-topbar-logo{
    width:140px;
  }
  .hb-topbar-logo img{
    max-width:138px;
  }
  .hb-menu-v17 a{
    padding:0 7px!important;
    font-size:11px!important;
  }
  .hb-contact-pill{
    padding:0 10px;
  }
}

/* tablet/mobiel: geen geplet horizontaal menu */
@media(max-width:760px){

  .hb-topbar-v17{
    height:68px!important;
  }
  .hb-topbar-v17-inner{
    height:68px;
    grid-template-columns:1fr auto;
    padding:0 14px;
  }

  .hb-topbar-logo{
    width:165px;
  }
  .hb-topbar-logo img{
    max-width:160px;
    max-height:52px;
  }

  .hb-contact-pill{
    display:none!important;
  }

  .hb-menu-btn-v17{
    display:flex!important;
    width:48px;
    height:44px;
    padding:0;
    border:2px solid var(--hb-black);
    background:#f6f5f0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;
  }
  .hb-menu-btn-v17 span{
    display:block;
    width:22px;
    height:2px;
    background:var(--hb-blue);
  }
  .hb-menu-btn-v17 b{
    display:none;
  }

  /* fullscreen menu */
  .hb-menu-v17{
    display:none!important;
    position:fixed!important;
    z-index:26000!important;
    left:0!important;
    right:0!important;
    top:68px!important;
    bottom:0!important;
    width:100%!important;
    padding:24px 18px 30px!important;
    background:var(--hb-blue)!important;
    overflow:auto!important;
  }
  .hb-menu-v17.is-open{
    display:block!important;
  }
  .hb-menu-v17 ul,
  .hb-menu-v17 .menu{
    display:block!important;
    width:100%!important;
  }
  .hb-menu-v17 li{
    display:block!important;
    width:100%!important;
  }
  .hb-menu-v17 a{
    display:flex!important;
    min-height:58px!important;
    width:100%!important;
    padding:0 4px!important;
    color:#fff!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.22)!important;
    background:none!important;
    font-size:22px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:-.5px!important;
  }
  .hb-menu-v17 li.active>a,
  .hb-menu-v17 li.current>a,
  .hb-menu-v17 a:hover{
    color:var(--hb-sand)!important;
    border-bottom-color:var(--hb-sand)!important;
  }
}

/* extra smal */
@media(max-width:420px){
  .hb-topbar-logo{
    width:145px;
  }
  .hb-topbar-logo img{
    max-width:140px;
  }
}


/* =========================================================
   Hoeve Bold v1.8 - één logo, één Contact
   ========================================================= */

/* Oude linker merkrail volledig weg */
.hb-brand-rail{
  display:none!important;
}

/* Content gebruikt nu de volledige breedte */
.hb-site{
  margin-left:0!important;
  width:100%!important;
}

/* Geen tweede Contact CTA rechts */
.hb-contact-pill{
  display:none!important;
}

/* Header nu: logo + menu; hamburger alleen mobiel */
.hb-topbar-v17-inner{
  grid-template-columns:190px minmax(0,1fr) auto!important;
  max-width:1440px;
  margin:0 auto;
  width:100%;
}

/* Gebruik het mooie grotere horizontale logo */
.hb-topbar-logo{
  width:180px!important;
}
.hb-topbar-logo img{
  max-width:175px!important;
  max-height:62px!important;
}

@media(min-width:761px){
  .hb-topbar-actions-v17{
    display:none!important;
  }
  .hb-topbar-v17-inner{
    grid-template-columns:190px minmax(0,1fr)!important;
  }
}

@media(max-width:760px){
  .hb-topbar-actions-v17{
    display:flex!important;
  }
  .hb-topbar-v17-inner{
    grid-template-columns:1fr auto!important;
  }
}


/* =========================================================
   Hoeve Bold v2.1
   Originele linkerrail terug; alleen header/menu responsive fix.
   ========================================================= */

/* Herstel de originele rail zoals in het oorspronkelijke Bold ontwerp */
.hb-rail{
  display:flex!important;
}

/* De site houdt rekening met de originele railbreedte */
@media(min-width:1181px){
  .hb-site{
    margin-left:var(--hb-rail)!important;
    width:calc(100% - var(--hb-rail))!important;
  }
  .hb-topbar-v17{
    left:var(--hb-rail)!important;
    width:calc(100% - var(--hb-rail))!important;
  }
}

/* Bij te weinig ruimte: behoud rail, maar menu wordt hamburger */
@media(max-width:1180px) and (min-width:761px){
  .hb-site{
    margin-left:var(--hb-rail)!important;
    width:calc(100% - var(--hb-rail))!important;
  }

  .hb-topbar-v17{
    left:var(--hb-rail)!important;
    width:calc(100% - var(--hb-rail))!important;
    height:72px!important;
  }

  .hb-topbar-v17-inner{
    height:72px!important;
    grid-template-columns:minmax(175px,220px) 1fr auto!important;
    padding:0 18px!important;
  }

  .hb-menu-v17{
    display:none!important;
    position:fixed!important;
    z-index:26000!important;
    top:72px!important;
    left:var(--hb-rail)!important;
    right:0!important;
    bottom:0!important;
    width:calc(100% - var(--hb-rail))!important;
    padding:24px!important;
    background:var(--hb-blue)!important;
    overflow:auto!important;
  }

  .hb-menu-v17.is-open{
    display:block!important;
  }

  .hb-menu-v17 ul,
  .hb-menu-v17 .menu{
    display:block!important;
    width:100%!important;
  }

  .hb-menu-v17 li{
    display:block!important;
    width:100%!important;
  }

  .hb-menu-v17 a{
    display:flex!important;
    width:100%!important;
    min-height:56px!important;
    padding:0 4px!important;
    color:#fff!important;
    background:none!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.22)!important;
    font-size:20px!important;
    text-transform:uppercase!important;
    white-space:normal!important;
  }

  .hb-menu-v17 li.active>a,
  .hb-menu-v17 li.current>a,
  .hb-menu-v17 a:hover{
    color:var(--hb-sand)!important;
    border-bottom-color:var(--hb-sand)!important;
  }

  .hb-topbar-actions-v17{
    display:flex!important;
  }

  .hb-menu-btn-v17{
    display:flex!important;
    width:50px!important;
    height:44px!important;
    border:2px solid var(--hb-black)!important;
    background:#f6f5f0!important;
    align-items:center!important;
    justify-content:center!important;
    flex-direction:column!important;
    gap:4px!important;
  }

  .hb-menu-btn-v17 span{
    display:block!important;
    width:22px!important;
    height:2px!important;
    background:var(--hb-blue)!important;
  }
}

/* Mobiel blijft rail weg zoals het oorspronkelijke responsive ontwerp */
@media(max-width:760px){
  .hb-rail{
    display:none!important;
  }
  .hb-site{
    margin-left:0!important;
    width:100%!important;
  }
  .hb-topbar-v17{
    left:0!important;
    width:100%!important;
  }
}


/* =========================================================
   Hoeve Bold v2.2
   - linker rail iets breder
   - logo in linker rail groter
   - geen logo meer in horizontale header
   ========================================================= */

:root{
  --hb-rail:145px!important;
}

/* linker balk */
.hb-rail{
  width:145px!important;
}

/* originele afbeelding/logo boven in de rail groter */
.hb-rail img{
  width:118px!important;
  max-width:118px!important;
  height:auto!important;
}

/* header heeft geen logo meer en menu mag de ruimte gebruiken */
.hb-topbar-logo{
  display:none!important;
}

@media(min-width:1181px){
  .hb-topbar-v17-inner{
    grid-template-columns:minmax(0,1fr)!important;
    padding-left:28px!important;
    padding-right:28px!important;
  }

  .hb-menu-v17 ul,
  .hb-menu-v17 .menu{
    justify-content:flex-start!important;
  }
}

/* tablet: alleen menu-knop rechts */
@media(max-width:1180px) and (min-width:761px){
  .hb-topbar-v17-inner{
    grid-template-columns:1fr auto!important;
  }

  .hb-topbar-actions-v17{
    grid-column:2!important;
  }
}

/* mobiel blijft zonder linkerrail */
@media(max-width:760px){
  :root{
    --hb-rail:0px!important;
  }
}


/* =========================================================
   Hoeve Bold v2.3 - hoofdmenu sticky
   ========================================================= */

/* Hoofdmenu blijft bovenaan zichtbaar tijdens scrollen */
.hb-topbar-v17{
  position:sticky!important;
  top:0!important;
  z-index:30000!important;
  background:#f6f5f0!important;
  box-shadow:0 6px 18px rgba(16,19,23,.08)!important;
}

/* Zorg dat de menu-overlay op tablet/mobiel boven de pagina blijft */
.hb-menu-v17{
  z-index:31000!important;
}

/* Linker rail blijft eveneens boven de contentlaag */
.hb-rail{
  z-index:32000!important;
}


/* =========================================================
   Hoeve Bold v2.4 - hoofdmenu gegarandeerd vast bovenin
   Gebruik fixed i.p.v. sticky om conflicten met oude layout/
   overflow-regels volledig te omzeilen.
   ========================================================= */

:root{
  --hb-fixed-menu-height:78px;
}

/* Desktop / tablet */
.hb-topbar-v17{
  position:fixed!important;
  top:0!important;
  right:0!important;
  left:var(--hb-rail)!important;
  width:calc(100% - var(--hb-rail))!important;
  height:var(--hb-fixed-menu-height)!important;
  z-index:40000!important;
  margin:0!important;
  background:#f6f5f0!important;
  box-shadow:0 6px 20px rgba(16,19,23,.10)!important;
}

/* De pagina begint onder het vaste menu */
.hb-site{
  padding-top:var(--hb-fixed-menu-height)!important;
}

/* De verticale rail blijft volledig zichtbaar */
.hb-rail{
  top:0!important;
  z-index:41000!important;
}

/* Uitklapmenu begint onder de vaste menubalk */
.hb-menu-v17{
  z-index:42000!important;
}

@media(max-width:1180px) and (min-width:761px){
  :root{
    --hb-fixed-menu-height:72px;
  }

  .hb-menu-v17{
    top:72px!important;
  }
}

/* Mobiel: volledige breedte, rail weg */
@media(max-width:760px){
  :root{
    --hb-fixed-menu-height:66px;
  }

  .hb-topbar-v17{
    left:0!important;
    width:100%!important;
    height:66px!important;
  }

  .hb-site{
    padding-top:66px!important;
  }

  .hb-menu-v17{
    top:66px!important;
  }
}