/** Shopify CDN: Minification failed

Line 6:0 Unexpected "<"

**/
<script>
  (function () {
    var root = (window.Shopify && Shopify.routes && Shopify.routes.root) ? Shopify.routes.root : '/';
    if (!root.startsWith('/')) root = '/' + root;
    if (!root.endsWith('/')) root = root + '/';

    var path = window.location.pathname;
    if (!path.startsWith('/')) path = '/' + path;
    if (!path.endsWith('/')) path = path + '/';

    var isHome = (path === root);
    document.body.classList.toggle('dbz-home', isHome);
  })();
</script>


/* =========================
   DBOZ Header - Desktop
   ========================= */
@media screen and (min-width: 990px) {

  /* 1) Maak de header grid “logo | ruimte | icons” */
  .dbz-header {
    grid-template-columns: auto 1fr auto;
  }

  /* 2) Laat jouw nav-wrapper de hele middenkolom gebruiken en rechts uitlijnen */
  .dbz-header .dbz-header__nav {
    margin-left: 0;              /* margin-left:auto werkt niet betrouwbaar in grid */
    justify-self: stretch;       /* vul de volledige 1fr middenkolom */
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;   /* dit is de echte ‘push naar rechts’ */
    gap: 15px;
  }

  /* 3) Menu items rechts binnen de nav */
  .dbz-header .dbz-header__nav .list-menu--inline {
    justify-content: flex-end;
    gap: 10px;
  }

  /* 4) Optioneel: wat extra ruimte tussen nav en icons (als het strak wordt) */
  .dbz-header .header__icons {
    justify-self: end;
    margin-left: 10px;
  }

  /* CTA button */
  .dbz-header .dbz-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
  }

  .dbz-header .dbz-header__cta:hover {
    filter: brightness(0.95);
  }
}


/* =========================
   DBOZ – Sticky header wrapper (baseline)
   (altijd fixed/sticky, we sturen alleen states aan)
   ========================= */
@media screen and (min-width: 990px) {

  sticky-header.header-wrapper {
    position: fixed !important;
    inset: 0 0 auto 0; /* top:0 left:0 right:0 */
    width: 100%;
    z-index: 30;
  }

  sticky-header.header-wrapper.header-wrapper--border-bottom {
    border-bottom: none !important;
  }

  /* Smooth fade tussen states */
  sticky-header.header-wrapper.gradient {
    transition: background-color 0.22s ease, box-shadow 0.22s ease;
  }

  /* Bubble fade */
  sticky-header.header-wrapper::before {
    transition: opacity 0.22s ease;
  }

  /* Tekstkleur smooth (menu + icons) */
  .dbz-header .header__menu-item,
  .dbz-header .header__menu-item span,
  .dbz-header .header__icon,
  .dbz-header .header__icon .svg-wrapper {
    transition: color 0.22s ease, font-weight 0.15s ease;
  }
}


/* =========================
   DBOZ – DEFAULT (alle pagina's behalve homepage)
   Altijd “active/scroll state”: wit + donker + hover blauw
   ========================= */
@media screen and (min-width: 990px) {

  body:not(#template-index):not(.template-index) sticky-header.header-wrapper.gradient {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important; /* subtiel, kan ook weg */
  }

  /* Geen bubble buiten homepage */
  body:not(#template-index):not(.template-index) sticky-header.header-wrapper::before {
    content: none !important;
    opacity: 0 !important;
  }

  /* Menu/icons donker buiten homepage */
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item,
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item span,
  body:not(#template-index):not(.template-index) .dbz-header .header__icon,
  body:not(#template-index):not(.template-index) .dbz-header .header__icon .svg-wrapper {
    color: rgb(var(--color-foreground)) !important;
  }

  /* Underline kill */
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item::after,
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item span::after,
  body:not(#template-index):not(.template-index) .dbz-header .header__active-menu-item::after {
    content: none !important;
  }

  /* Hover: blauw + iets dikker */
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item,
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item span,
  body:not(#template-index):not(.template-index) .dbz-header .header__active-menu-item {
    text-decoration: none !important;
    font-weight: 400;
    transition: font-weight 0.15s ease;
  }

  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item:hover,
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item:hover span,
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item[aria-current="page"]:hover,
  body:not(#template-index):not(.template-index) .dbz-header .header__menu-item[aria-current="page"]:hover span {
    color: rgb(var(--color-button)) !important;
    font-weight: 500;
  }
}


/* =========================
   DBOZ – HOMEPAGE ONLY TOP-STATE
   Transparant + bubble + wit menu
   (robust: body#template-index OF body.template-index)
   ========================= */
@media screen and (min-width: 990px) {

  body#template-index sticky-header.header-wrapper.gradient,
  body.template-index sticky-header.header-wrapper.gradient {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  /* Bubble op homepage (top-state) */
  body#template-index sticky-header.header-wrapper::before,
  body.template-index sticky-header.header-wrapper::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;

    width: 260px;
    height: 120px;

    background: #fff;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 999px;

    z-index: 0;
    pointer-events: none;

    opacity: 1;
  }

  /* Header-content boven bubble */
  body#template-index .dbz-header,
  body.template-index .dbz-header {
    position: relative;
    z-index: 2;
  }

  body#template-index .dbz-header .header__heading-link,
  body.template-index .dbz-header .header__heading-link {
    position: relative;
    z-index: 3;
  }

  /* Menu + icons wit op hero (homepage top-state) */
  body#template-index .dbz-header .header__menu-item,
  body#template-index .dbz-header .header__menu-item span,
  body#template-index .dbz-header .header__icon,
  body#template-index .dbz-header .header__icon .svg-wrapper,
  body.template-index .dbz-header .header__menu-item,
  body.template-index .dbz-header .header__menu-item span,
  body.template-index .dbz-header .header__icon,
  body.template-index .dbz-header .header__icon .svg-wrapper {
    color: #fff !important;
  }

  /* Logo extra padding zodat het mooi in de bubble zit */
  body#template-index .dbz-header .header__heading-logo-wrapper,
  body.template-index .dbz-header .header__heading-logo-wrapper {
    padding: 14px 2px;
  }

  /* Hover wit + subtiel dikker (homepage top-state) */
  body#template-index .dbz-header .header__menu-item,
  body#template-index .dbz-header .header__menu-item span,
  body#template-index .dbz-header .header__active-menu-item,
  body.template-index .dbz-header .header__menu-item,
  body.template-index .dbz-header .header__menu-item span,
  body.template-index .dbz-header .header__active-menu-item {
    text-decoration: none !important;
    font-weight: 400;
    transition: font-weight 0.15s ease;
  }

  body#template-index .dbz-header .header__menu-item::after,
  body#template-index .dbz-header .header__menu-item span::after,
  body#template-index .dbz-header .header__active-menu-item::after,
  body.template-index .dbz-header .header__menu-item::after,
  body.template-index .dbz-header .header__menu-item span::after,
  body.template-index .dbz-header .header__active-menu-item::after {
    content: none !important;
  }

  body#template-index .dbz-header .header__menu-item:hover,
  body#template-index .dbz-header .header__menu-item:hover span,
  body#template-index .dbz-header .header__menu-item[aria-current="page"]:hover,
  body#template-index .dbz-header .header__menu-item[aria-current="page"]:hover span,
  body.template-index .dbz-header .header__menu-item:hover,
  body.template-index .dbz-header .header__menu-item:hover span,
  body.template-index .dbz-header .header__menu-item[aria-current="page"]:hover,
  body.template-index .dbz-header .header__menu-item[aria-current="page"]:hover span {
    font-weight: 520;
  }
}


/* =========================
   DBOZ – Scroll transitie: transparant -> wit (zonder extra JS)
   Gebruikt Dawn class: .scrolled-past-header op .section-header
   (dit mag GLOBAL blijven: andere pagina's zijn al wit)
   ========================= */
@media screen and (min-width: 990px) {

  .scrolled-past-header sticky-header.header-wrapper.gradient {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
  }

  /* Bubble uit zodra je scrollt (homepage) */
  .scrolled-past-header sticky-header.header-wrapper::before {
    opacity: 0;
  }

  /* Menu/icons donker zodra je scrollt */
  .scrolled-past-header .dbz-header .header__menu-item,
  .scrolled-past-header .dbz-header .header__menu-item span,
  .scrolled-past-header .dbz-header .header__icon,
  .scrolled-past-header .dbz-header .header__icon .svg-wrapper {
    color: rgb(var(--color-foreground)) !important;
  }

  /* Hover gedrag in scrolled state: blauw + iets dikker */
  .scrolled-past-header .dbz-header .header__menu-item:hover,
  .scrolled-past-header .dbz-header .header__menu-item:hover span,
  .scrolled-past-header .dbz-header .header__menu-item[aria-current="page"]:hover,
  .scrolled-past-header .dbz-header .header__menu-item[aria-current="page"]:hover span {
    color: rgb(var(--color-button)) !important;
    font-weight: 500;
  }
}


/* Hide CTA button on mobile */
@media screen and (max-width: 989px){
  sticky-header.header-wrapper .dbz-header a.dbz-header__cta{
    display: none !important;
  }
}


/* =========================
   DBOZ – HARD FIX (Homepage detectie zonder body classes)
   - Homepage = header link #HeaderMenu-home heeft aria-current="page"
   - Top-state = .section-header is NIET scrolled-past-header
   ========================= */

@media screen and (min-width: 990px) {

  /* 0) Menu alignment fix (als hij naar links is geschoven) */
  .dbz-header{
    display: grid !important;                 /* Dawn gebruikt grid, maar dit forceert het */
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
  }

  .dbz-header .header__heading{ grid-column: 1 !important; }
  .dbz-header .dbz-header__nav{ grid-column: 2 !important; }
  .dbz-header .header__icons{ grid-column: 3 !important; }

  .dbz-header .dbz-header__nav{
    justify-self: stretch !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end !important;
  }

  .dbz-header .dbz-header__nav .list-menu--inline{
    display: flex !important;
    justify-content: flex-end !important;
  }

  /* 1) Alleen uitvoeren als :has() ondersteund wordt */
  @supports selector(body:has(*)) {

    /* =========================
       HOMEPAGE TOP-STATE (transparant + bubble + wit menu)
       ========================= */

    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      sticky-header.header-wrapper.gradient{
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
    }

    /* Bubble AAN op homepage top-state (content MOET important zijn i.v.m. eerdere overrides) */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      sticky-header.header-wrapper::before{
      content: "" !important;
      position: fixed !important;
      left: 0 !important;
      top: 0 !important;
      width: 260px !important;
      height: 120px !important;
      background: #fff !important;
      border-top-right-radius: 0px !important;
      border-bottom-right-radius: 999px !important;
      z-index: 0 !important;
      pointer-events: none !important;
      opacity: 1 !important;
    }

    /* Menu + icons wit op homepage top-state */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__menu-item,
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__menu-item span,
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__icon,
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__icon .svg-wrapper{
      color: #fff !important;
    }

    /* Logo padding (bubble) op homepage top-state */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__heading-logo-wrapper{
      padding: 14px 2px !important;
    }

    /* Hover op homepage top-state: wit + iets dikker */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__menu-item:hover,
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__menu-item:hover span,
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__menu-item[aria-current="page"]:hover,
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__menu-item[aria-current="page"]:hover span{
      font-weight: 520 !important;
    }

    /* =========================
       HOMEPAGE SCROLLED (bubble uit) blijft via jouw bestaande scrolled rules,
       maar we maken bubble-uit zeker:
       ========================= */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header.scrolled-past-header
      sticky-header.header-wrapper::before{
      opacity: 0 !important;
    }
  }
}

/* =========================
   DBOZ – FIX: Logo altijd boven bubble (homepage top-state)
   ========================= */
@media screen and (min-width: 990px) {
  @supports selector(body:has(*)) {

    /* Bubble blijft achter alles */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      sticky-header.header-wrapper::before{
      z-index: 0 !important;
    }

    /* Header-content boven bubble */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      sticky-header.header-wrapper .dbz-header{
      position: relative !important;
      z-index: 2 !important;
    }

    /* Logo link + wrapper extra hoog (zoals je originele versie) */
    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__heading-link{
      position: relative !important;
      z-index: 3 !important;
    }

    body:has(#HeaderMenu-home[aria-current="page"])
      .section-header:not(.scrolled-past-header)
      .dbz-header .header__heading-logo-wrapper{
      position: relative !important;
      z-index: 3 !important;
    }
  }
}