.wpb-navigation { --nav-bg-clr: #fff; position: relative; z-index: 1040; overflow-x: clip; }
.wpb-navigation .container { display: flex; align-items: center; justify-content: space-between; column-gap: 3rem; }
.wpb-navigation .logo { display: inline-flex; align-items: center; column-gap: 3.2rem; margin-inline: auto; }
.wpb-navigation .logo img { width: 13.4rem; height: auto; }
.wpb-navigation .logo img.sinds2001 { display: none; width: 11.6rem; }  

.wpb-navigation__top { padding-block: 2rem; border-top: .5rem solid var(--clr-primary); background-color: #fff; }
.wpb-navigation__top .wpb-navigation__.categories-menu .categories-menu__header div { display: flex; column-gap: .8rem; }

.btn--nav-toggle svg { fill: var(--clr); }
.btn--nav-toggle svg rect { transition: y var(--ts-25) ease var(--ts-25), transform var(--ts-25) ease, opacity 0ms var(--ts-25); transform-origin: center; }
.btn--nav-toggle:hover svg rect { fill: var(--hover-clr); }
.btn--nav-toggle:focus svg rect { fill: var(--focus-clr); }
.btn--nav-toggle:active svg rect { fill: var(--active-clr); }
.btn--nav-toggle[aria-expanded="true"] svg rect { fill: var(--active-clr); transition: y var(--ts-25) ease, transform var(--ts-25) ease var(--ts-25), opacity 0ms var(--ts-25); }
.btn--nav-toggle[aria-expanded="true"] svg .top { y: 45; transform: rotate(45deg); }
.btn--nav-toggle[aria-expanded="true"] svg .middle { opacity: 0; }
.btn--nav-toggle[aria-expanded="true"] svg .bottom { y: 45; transform: rotate(-45deg); }

.wpb-navigation__collapse ul { list-style: none; }
.wpb-navigation__collapse .menu-item .menu-link { color: var(--clr-text); width: 100%; text-decoration: none; display: inline-flex; align-items: center; column-gap: 1rem; font-weight: 600; line-height: 1; transition: color var(--ts-duration) var(--ts-function); }
.wpb-navigation__collapse .menu-item .menu-link:hover { color: var(--clr-primary); }
.wpb-navigation__collapse .menu-item.menu-item--current > .menu-link { color: var(--clr-primary); }
.wpb-navigation__collapse .menu-item-has-children { position: relative; }  
.wpb-navigation__collapse .menu-item-has-children .menu-link { justify-content: space-between; }  

.wpb-navigation__top .wpb-search-form { position: relative; }
.wpb-navigation__top .wpb-search-form .form-group { position: relative; display: flex; }
.wpb-navigation__top .wpb-search-form .form-group i { font-size: 1.5rem; position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); }
.wpb-navigation__top .wpb-search-form .form-group [type="search"] { padding-left: 4.3rem!important; background-color: #fff; }
.wpb-navigation__top .wpb-search-form form.--loading .form-group { pointer-events: none; opacity: .5; }

.wpb-navigation__main { background-color: var(--clr-dark); }
.wpb-navigation__top .wpb-navigation__buttons { display: flex; column-gap: .8rem; }

.wpb-navigation__collapse .wpb-collapse__footer { display: flex; flex-wrap: wrap; gap: .8rem; }
.wpb-navigation__collapse .wpb-collapse__footer :is(.faq, .customerservice) { font-size: 1.8rem; font-weight: 600; width: 100%; display: flex; align-items: center; column-gap: 1.2rem; text-decoration: none; transition: color var(--ts-duration) var(--ts-function); }
.wpb-navigation__collapse .wpb-collapse__footer :is(.faq, .customerservice) i { position: relative; color: var(--clr-primary); }
.wpb-navigation__collapse .wpb-collapse__footer :is(.faq, .customerservice):hover { color: var(--clr-primary); }
.wpb-navigation__collapse .wpb-collapse__footer .customerservice small { font-size: 1.4rem; font-weight: 400; }
.wpb-navigation__collapse .wpb-collapse__footer .customerservice .open { display: none; }
.wpb-navigation__collapse .wpb-collapse__footer .customerservice[data-opened="true"] i::after { border: 1px solid #fff; content: ''; position: absolute; top: -.35rem; right: -.35rem; border-radius: 50%; width: 1rem; height: 1rem; background-color: var(--clr-success); }
.wpb-navigation__collapse .wpb-collapse__footer .customerservice[data-opened="true"] .open { display: inline-block; }
.wpb-navigation__collapse .wpb-collapse__footer .customerservice[data-opened="true"] .closed { display: none; }

.wpb-navigation__top #wux-search-results { --br: .5rem; position: absolute; top: calc(100% + 1.1rem); left: 0; right: 0; z-index: 999; background-color: #fff; border-bottom-right-radius: var(--br); border-bottom-left-radius: var(--br); }
.wpb-navigation__top #wux-search-results .wux-search-results__group { padding: 0 2rem 2rem 2rem; }
.wpb-navigation__top #wux-search-results .wux-search-results__group + .wux-search-results__group{ border-top: 1px solid #fff3; padding-top: 1rem; }
.wpb-navigation__top #wux-search-results .wux-search-results__group:nth-child(1) { padding-top: 2rem; }
.wpb-navigation__top #wux-search-results h3 { font-size: 1.2rem; margin: 0 0 1rem 0; color: var(--clr-text); opacity: .5; }
.wpb-navigation__top #wux-search-results p { border-bottom: 1px solid var(--clr-secondary); font-size: 1.4rem; line-height: 1.3; color: var(--clr-text); position: relative; display: grid; grid-template-columns: 1fr 1rem; align-items: center; column-gap: 2rem; padding: .8rem 0; min-height: 4rem; transition: color var(--ts-duration) var(--ts-function); }
.wpb-navigation__top #wux-search-results p span { display: flex; align-items: center; column-gap: 1.4rem; }
.wpb-navigation__top #wux-search-results p img { min-width: 4rem; width: 4rem; height: 4rem; object-fit: contain; }
.wpb-navigation__top #wux-search-results p i { --w: 1rem; --h: 1rem; }
.wpb-navigation__top #wux-search-results p a { font-weight: 400; color: var(--clr-text); transition: color var(--ts-duration) var(--ts-function); }  
.wpb-navigation__top #wux-search-results p:hover a,  
.wpb-navigation__top #wux-search-results p:hover { color: var(--clr-primary); }
.wpb-navigation__top #wux-search-results p a::after { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.wpb-navigation__top #wux-search-results .btn.btn--link { --p: 0; }
.wpb-navigation__top #wux-search-results:has(.wux-search-results__group)::after { z-index: -1; pointer-events: none; content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: transparent; }
.wpb-navigation__top .wpb-search-view-all { display: flex; justify-content: space-between; align-items: center; padding: 0 2rem 2rem 2rem; text-decoration: none; font-size: 1.2rem; }
.wpb-navigation__top .wpb-search-view-all i { --w: 1rem; --h: 1rem; }  

@media (max-width: 1199.98px) {
    .wpb-navigation__top .wpb-navigation__buttons .wpb-account-button { --p: 0; aspect-ratio: 6/5; }
    .wpb-navigation__top .wpb-navigation__buttons .wpb-account-button span { display: none; }
}

/*** Navigation mobile ***/
@media (max-width: 991.98px) {
    .wpb-navigation__top .container { flex-wrap: wrap; }
    .wpb-navigation__top .wpb-search-form { width: 100%; margin-top: .8rem; }

    .wpb-navigation__collapse { max-width: 45rem; transform: translate3d(100%, 0, 0); width: 100%; display: none; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: auto; background-color: #fff; z-index: 1030; overflow: hidden; transition: transform var(--ts-35) ease; }
    .wpb-navigation__collapse.active { pointer-events: all; transform: translate3d(0%, 0, 0); }
    .wpb-navigation__collapse .wpb-collapse__header { font-size: 1.6rem; font-weight: bold; padding: 2rem; display: flex; justify-content: space-between; align-items: center; }
    .wpb-navigation__collapse .wpb-collapse__body { padding: 2rem; flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; }
    .wpb-navigation__collapse .wpb-collapse__footer { padding: 2rem; }
    
    .wpb-navigation__collapse.wpb-navigation__collapse--left { transform: translate3d(-100%, 0, 0); left: 0; right: auto; }
    .wpb-navigation__collapse.wpb-navigation__collapse--left.active { transform: translate3d(0%, 0, 0); }

    .wpb-navigation__collapse .menu-item .menu-link { font-size: 2rem; padding: 1.5rem 0; }
    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

    .wpb-sub-menu { display: flex; flex-direction: column; height: 100%; overflow: hidden; list-style: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; z-index: 1; overflow-y: auto; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease; }
    .wpb-sub-menu.active { transform: translate3d(0, 0, 0); }
    .wpb-sub-menu .wpb-sub-menu__header { font-size: 1.6rem; font-weight: bold; padding: 2rem; display: flex; align-items: center; justify-content: space-between; }
    .wpb-sub-menu .wpb-sub-menu__body { padding: 2rem; }
}

@media (max-width: 767.98px) {
    .wpb-navigation__top .wpb-navigation__buttons .wpb-favourite-button,
    .wpb-navigation__top .wpb-navigation__buttons .wpb-cart-button::after,
    .wpb-navigation__top .wpb-navigation__buttons .wpb-cart-button span { display: none; }
    .wpb-navigation__top .wpb-navigation__buttons .wpb-cart-button { --p: 0; aspect-ratio: 6/5; }
}

@media (max-width: 575.98px) {
    .wpb-navigation__top .wpb-navigation__buttons .wpb-account-button { display: none; }
}

/*** Navigation desktop ***/
@media (min-width: 992px) {
    .wpb-navigation .logo { margin-left: 0; }
    .wpb-navigation .logo img { width: 19rem; }
    .wpb-navigation__top .wpb-navigation__buttons { order: 1; }
    .wpb-navigation__top .wpb-search-form { margin-inline: auto; flex-grow: 1; max-width: 50rem; }   

    .btn.btn--nav-toggle, .wpb-navigation__collapse :is(.wpb-collapse__header, .wpb-submenu__header) { display: none; }
    .wpb-navigation__collapse .wpb-collapse__footer { gap: 3rem; }
    .wpb-navigation__collapse .wpb-collapse__footer :is(.faq, .customerservice) { color: #fff; width: auto; }
    .wpb-navigation__collapse .wpb-collapse__footer .customerservice[data-opened="true"] i::after { border: 1px solid var(--clr-dark); }

    .wpb-navigation__collapse .wpb-collapse__footer .btn--light { display: none; }

    .wpb-navigation__collapse { width: 100%; display: flex!important; justify-content: space-between; align-items: center; }
    .wpb-navigation__collapse .menu-item .menu-link { font-size: 1.6rem; position: relative; padding: 1rem 1.6rem; color: #fff; }
    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { --bg-clr: transparent; --clr: var(--clr-text); width: auto; height: auto; min-height: 0; }
    .wpb-navigation__collapse .wpb-menu { display: flex; align-items: center; }
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link { padding: 2.3rem 1.6rem; } /* Hoogste niveau links */
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link > .btn { transform: rotate(90deg); }
    .wpb-navigation__collapse .menu-item-has-children:hover > .wpb-sub-menu { pointer-events: all; opacity: 1; }

    .wpb-sub-menu { position: absolute; top: 100%; right: auto; bottom: auto; left: 50%; transform: translateX(-50%); box-shadow: 0 .5rem .5rem rgba(21, 47, 51, .1); width: 100%; padding: 0; min-width: 20rem; height: auto!important; background-color: #fff; opacity: 0; overflow: visible; pointer-events: none; transition: opacity var(--ts-25) ease; }
    .wpb-sub-menu .wpb-sub-menu { top: 0; left: 100%; transform: none; } 
    .wpb-sub-menu .wpb-sub-menu__header { display: none; }

    .wpb-navigation__collapse .wpb-collapse__body { display: flex; flex-direction: row; align-items: center; }
}

@media (min-width: 1400px) {
    .wpb-navigation .logo img.sinds2001 { display: block; } 
}








/* Categories menu */
.categories-menu .categories-menu__header { display: flex; font-size: 1.8rem; font-weight: 600; justify-content: space-between; align-items: center; }
.categories-menu .categories-menu__header div { display: flex; flex-grow: 1; align-items: center; }
.categories-menu .categories-menu__header span.title { font-size: 1.8rem; font-weight: 600; }
.categories-menu .categories-menu__header .btn { display: none; }

.categories-menu ul { list-style: none; }
.categories-menu .btn:not(.btn--square) { grid-column: span 2; }
.categories-menu ul > .category { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4.1rem); }
.categories-menu .categories-depth-1 .category::after { content: ''; display: block; width: calc(100% - 3rem); height: 1px; background-color: var(--clr-dark); position: absolute; bottom: 0; left: 1.5rem; right: 1.5rem; }
.categories-menu ul > .category { margin-top: .8rem; }  
.categories-menu ul > .category > .category-link { font-size: 1.6rem; font-weight: 600; text-decoration: none; min-height: 4.5rem; display: flex; align-items: center; column-gap: 1.6rem; border-radius: .5rem 0 0 .5rem; transition: background-color var(--ts-duration) var(--ts-function); }
.categories-menu ul > .category > .category-link:not(:has(+ .category-toggle)) { grid-column: span 2; border-radius: .5rem; }
.categories-menu ul > .category > .category-toggle { text-decoration: none; cursor: pointer; border-radius: 0 .5rem .5rem 0; min-height: 4.1rem; min-width: 4.1rem; display: flex; align-items: center; justify-content: end; padding-right: 1.5rem; transition: background-color var(--ts-duration) var(--ts-function); }
.categories-menu ul > .category > .category-toggle i { color: rgba(var(--clr-dark-rgb), .4); }
.categories-menu ul > .category:not(.has-thumbnail) > .category-link { padding-left: 1.5rem; } 
.categories-menu ul > .category.has-thumbnail > .category-link { display: grid; grid-template-columns: minmax(0, 4.1rem) minmax(0, 1fr); overflow: hidden; text-overflow: ellipsis}
.categories-menu ul > .category.has-thumbnail > .category-link .category-link__thumbnail { width: 4.5rem; height: 4.5rem; display: inline-grid; place-items: center; background-color: var(--clr-secondary); border-radius: .8rem; transition: background-color var(--ts-duration) var(--ts-function), border-radius var(--ts-duration) var(--ts-function); }
.categories-menu ul > .category.has-thumbnail > .category-link .category-link__thumbnail img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.categories-menu ul > .category:hover > .category-link { background-color: var(--clr-secondary); }
.categories-menu ul > .category:hover > .category-link .category-link__thumbnail { background-color: var(--clr-secondary-120); border-top-right-radius: 0; border-bottom-right-radius: 0; } 
.categories-menu ul > .category:hover > .category-toggle:not(.btn) { background-color: var(--clr-secondary); }

.categories-menu .wpb-card.wpb-card--cta { align-self: start; grid-column: 4; }

@media (max-width: 991.98px) {
    .categories-menu .categories-menu__header { padding-bottom: 4rem; }
    .categories-menu .categories-menu__header span.title { font-size: 1.6rem; margin: auto; text-align: center; line-height: 1.2; padding-inline: 2rem; }
    .categories-menu .categories-menu__header .btn { display: flex; }
    .categories-menu .categories-menu__sub { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color: #fff; overflow-x: clip; overflow-y: auto; transform: translate3d(100%, 0, 0); padding: 2rem; transition: transform var(--ts-35) ease; }
    .categories-menu .categories-menu__sub.active { transform: translate3d(0, 0, 0); }
    .categories-menu .btn:not(.btn--square) { width: 100%; }
}

@media (max-width: 1199.98px) {
    .categories-menu .wpb-card.wpb-card--cta { display: none; }
}

@media (min-width: 992px) {
    
    .categories-menu > ul > .category { margin-top: 0; }
    .categories-menu > ul > .category .menu-link { position: relative; padding: 2.3rem 1.6rem 2.3rem 0; }
    .categories-menu > ul > .category:hover .categories-menu-wrapper { opacity: 1; pointer-events: all; }
    
    .categories-menu ul > .category > .category-toggle::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
    
    .categories-menu :not(.categories-wrapper-niveau-1) .categories-menu__header div { padding-left: 1.5rem; }  

    .categories-menu-wrapper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 4rem; opacity: 0; pointer-events: none; position: absolute; top: 100%; left: 0; right: 0; pointer-events: none; transition: opacity var(--ts-duration) ease; padding: 3.2rem 1.8rem; }
    .categories-menu-wrapper::after { content:''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #fff; z-index: -1; }
  
    .categories-wrapper { display: grid; grid-template-areas: 'subCategories'; position: relative; }
    .categories-wrapper + .categories-wrapper:has(.is-active)::before { content: ''; width: 1px; height: 100%; position: absolute; left: -2rem; top: 0; bottom: 0; border-left: 1px solid var(--clr-secondary-120); }
    .categories-wrapper > ul { grid-area: subCategories; max-height: calc(100dvh - 30rem); overflow-y: auto; }
    .categories-wrapper > ul::-webkit-scrollbar { width: 6px; }
    .categories-wrapper > ul::-webkit-scrollbar-thumb { background: rgba(var(--clr-dark-rgb), .25); border-radius: 6px; }

    .categories-wrapper-niveau-2 .categories-menu__sub,
    .categories-wrapper-niveau-3 .categories-menu__sub,
    .categories-wrapper-niveau-4 .categories-menu__sub { opacity: 0; pointer-events: none; display: none; }

    .categories-wrapper-niveau-2 .categories-menu__sub.is-active,
    .categories-wrapper-niveau-3 .categories-menu__sub.is-active,
    .categories-wrapper-niveau-4 .categories-menu__sub.is-active { display: block; opacity: 1; pointer-events: all; }

    .categories-wrappper-depth-1,
    .categories-wrappper-depth-2,
    .categories-wrappper-depth-3,
    .categories-wrappper-depth-4 { max-height: calc(100dvh - 14rem); overflow-y: auto; overflow-x: clip; }

    .categories-wrappper-depth-2,
    .categories-wrappper-depth-3,
    .categories-wrappper-depth-4 { display: grid; grid-template-areas: "submenus"; }

    .categories-wrappper-depth-2 > ul,
    .categories-wrappper-depth-3 > ul,
    .categories-wrappper-depth-4 > ul { grid-area: submenus; }
    


    .categories-menu > ul > .category { display: flex; position: static; }
}

@media (min-width: 1200px) {
    .categories-depth-1 { padding: 3.2rem; }
    .categories-menu ul > .category > .category-link { font-size: 1.6rem; }

    .categories-menu-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6rem 1.8rem; }
}