/* ==========================================================================
   Header, navigatie, breadcrumbs
   ========================================================================== */

/* header */

#site-navigation, #sticky-navigation{border-bottom:1px solid var(--contrast);box-shadow:0 !important}
.main-navigation .inside-navigation{justify-content:space-between !important}
.main-navigation .navigation-branding{order:2}
.main-navigation .main-nav{order:1}
.main-navigation .menu-bar-items{order:3}
.main-navigation .menu-bar-items .slideout-toggle.hide-on-mobile{display:block !important}
.main-navigation .menu-toggle{display:none !important}

/* link hover animation */
.main-navigation .main-nav ul li a{position:relative}
.main-navigation .main-nav ul li a::after {
    content: ''; /* Pseudo-element content is empty */
    position: absolute; /* Position relative to the link */
    bottom: 0; /* Position at the bottom */
    left: 0; /* Start from the left */
    height: 5px; /* Line height */
    width: 0; /* Start with zero width */
    background-color: var(--accent); /* Line color */
    transition: width 0.3s ease; /* Smooth transition */
}
.main-navigation .main-nav ul li a:hover::after{width:calc(100% - 15px)} /* HOver effect - Expand the line to full width on hover */

/* menu bar items */
.main-navigation .menu-bar-items a{padding-left:10px;padding-right:10px}
/* menu bar item wishlist */
.main-navigation .menu-bar-items .wishlist_products_counter.top_wishlist-heart::before{margin:0 0 0 0;vertical-align:baseline}
.main-navigation .menu-bar-items .wishlist_products_counter.top_wishlist-heart:hover::before{color:var(--accent)}
/* menu bar item account */
.main-navigation .menu-bar-items .my-account a{padding-bottom:35px;padding-top:30px}
.main-navigation .menu-bar-items .my-account svg{height:15px;width:15px}
.main-navigation .menu-bar-items .my-account a:hover path{fill:var(--accent)}

@media (width < 768px) {
    .main-navigation .menu-bar-items a{padding-left:8px;padding-right:8px}
    .main-navigation .menu-bar-items .slideout-toggle a{padding-right:20px}
}
@media (width >= 1400px){
    .main-navigation .main-nav ul > li a{padding-left:0}
    .main-navigation .menu-bar-items .slideout-toggle a{padding-right:0}
}

.main-navigation .site-logo, .main-navigation .sticky-navigation-logo{display:none !important}
.main-navigation .site-logo-svg svg{height:60px;margin:10px;width:auto}
.main-navigation .site-logo-svg svg path{transition:fill 0.3s ease}
.main-navigation .site-logo-svg a:hover svg path{fill:var(--accent)}

/*
.site-logo{display:none}
.sticky-navigation-logo{display:none !important}
*/

.slideout-navigation .logo-off-canvas{padding:30px 60px;max-width:100%}
.slideout-navigation .main-nav .menu-item.sub{padding-left:20px}





/* nav breadcrumbs*/
.nav-breadcrumb .grid-container{padding:0 40px}
.nav-breadcrumb .yoast-breadcrumb, .nav-breadcrumb .woocommerce-breadcrumb{color:var(--contrast);font-size:15px;font-weight:bold;line-height:60px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.nav-breadcrumb .yoast-breadcrumb a, .nav-breadcrumb .woocommerce-breadcrumb a{color:var(--contrast);transition:color .25s}
.nav-breadcrumb .yoast-breadcrumb a:hover, .nav-breadcrumb .woocommerce-breadcrumb a:hover{color:var(--accent);text-decoration:none}
@media (width <= 768px) {.nav-breadcrumb .grid-container{padding:0 15px} }